@interchain-kit/react 0.0.1-beta.51 → 0.0.1-beta.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/hooks/index.js +0 -6
- package/esm/hooks/useChain.js +31 -65
- package/esm/hooks/useChainWallet.js +25 -36
- package/esm/hooks/useWalletManager.js +3 -3
- package/esm/index.js +1 -0
- package/esm/modal/modal.js +31 -35
- package/esm/modal/views/Connected.js +11 -13
- package/esm/modal/views/QRCode.js +7 -8
- package/esm/modal/views/Reject.js +3 -1
- package/esm/provider.js +7 -10
- package/esm/store/index.js +163 -0
- package/hooks/index.d.ts +0 -6
- package/hooks/index.js +0 -6
- package/hooks/useChain.js +30 -64
- package/hooks/useChainWallet.js +25 -36
- package/hooks/useWalletManager.d.ts +1 -2
- package/hooks/useWalletManager.js +3 -3
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/modal/modal.js +28 -32
- package/modal/views/Connected.d.ts +3 -1
- package/modal/views/Connected.js +10 -12
- package/modal/views/QRCode.js +6 -7
- package/modal/views/Reject.js +3 -1
- package/package.json +6 -5
- package/provider.d.ts +4 -4
- package/provider.js +5 -8
- package/store/index.d.ts +35 -0
- package/store/index.js +167 -0
- package/types/chain.d.ts +0 -8
- package/esm/hooks/useAccount.js +0 -26
- package/esm/hooks/useConfig.js +0 -10
- package/esm/hooks/useConnect.js +0 -11
- package/esm/hooks/useCurrentChainWallet.js +0 -11
- package/esm/hooks/useCurrentWallet.js +0 -18
- package/esm/hooks/useInterchainClient.js +0 -20
- package/esm/hooks/useOfflineSigner.js +0 -20
- package/esm/hooks/useRpcEndpoint.js +0 -26
- package/hooks/useAccount.d.ts +0 -6
- package/hooks/useAccount.js +0 -30
- package/hooks/useConfig.d.ts +0 -8
- package/hooks/useConfig.js +0 -14
- package/hooks/useConnect.d.ts +0 -1
- package/hooks/useConnect.js +0 -15
- package/hooks/useCurrentChainWallet.d.ts +0 -2
- package/hooks/useCurrentChainWallet.js +0 -15
- package/hooks/useCurrentWallet.d.ts +0 -2
- package/hooks/useCurrentWallet.js +0 -22
- package/hooks/useInterchainClient.d.ts +0 -6
- package/hooks/useInterchainClient.js +0 -24
- package/hooks/useOfflineSigner.d.ts +0 -6
- package/hooks/useOfflineSigner.js +0 -24
- package/hooks/useRpcEndpoint.d.ts +0 -6
- package/hooks/useRpcEndpoint.js +0 -30
package/esm/hooks/index.js
CHANGED
|
@@ -1,9 +1,3 @@
|
|
|
1
1
|
export * from './useWalletManager';
|
|
2
|
-
export * from './useCurrentWallet';
|
|
3
|
-
export * from './useAccount';
|
|
4
2
|
export * from './useChain';
|
|
5
|
-
export * from './useConnect';
|
|
6
3
|
export * from './useChainWallet';
|
|
7
|
-
export * from './useConfig';
|
|
8
|
-
export * from './useOfflineSigner';
|
|
9
|
-
export * from './useRpcEndpoint';
|
package/esm/hooks/useChain.js
CHANGED
|
@@ -1,78 +1,44 @@
|
|
|
1
|
-
import { useWalletManager } from "./useWalletManager";
|
|
2
|
-
import { useAccount } from "./useAccount";
|
|
3
|
-
import { useInterchainClient } from './useInterchainClient';
|
|
4
1
|
import { useWalletModal } from "../modal";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { useCurrentChainWallet } from "./useCurrentChainWallet";
|
|
2
|
+
import { useWalletManager } from './useWalletManager';
|
|
3
|
+
import { ChainNameNotExist } from '@interchain-kit/core';
|
|
8
4
|
export const useChain = (chainName) => {
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
5
|
+
const { assetLists, currentWalletName, disconnect, setCurrentChainName, getChainByName, getWalletByName, getChainWalletState, getChainLogoUrl, connect, getSigningClient, getRpcEndpoint, getAccount } = useWalletManager();
|
|
6
|
+
const chain = getChainByName(chainName);
|
|
7
|
+
if (!chain) {
|
|
8
|
+
throw new ChainNameNotExist(chainName);
|
|
9
|
+
}
|
|
10
|
+
const assetList = assetLists.find(a => a.chainName === chainName);
|
|
11
|
+
const wallet = getWalletByName(currentWalletName);
|
|
12
|
+
const chainWalletStateToShow = getChainWalletState(currentWalletName, chainName);
|
|
17
13
|
const { open, close } = useWalletModal();
|
|
18
|
-
|
|
14
|
+
console.log({ chainName, chain });
|
|
15
|
+
return {
|
|
16
|
+
//for migration cosmos kit
|
|
19
17
|
connect: () => {
|
|
20
|
-
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
walletManager.currentChainName = chainName;
|
|
18
|
+
setCurrentChainName(chainName);
|
|
24
19
|
open();
|
|
25
20
|
},
|
|
26
|
-
disconnect: async () =>
|
|
27
|
-
walletManager.currentChainName = chainName;
|
|
28
|
-
await chainAccount?.disconnect();
|
|
29
|
-
},
|
|
21
|
+
disconnect: async () => disconnect(currentWalletName, chainName),
|
|
30
22
|
openView: () => {
|
|
31
|
-
|
|
23
|
+
setCurrentChainName(chainName);
|
|
32
24
|
open();
|
|
33
25
|
},
|
|
34
26
|
closeView: close,
|
|
35
|
-
getRpcEndpoint: () =>
|
|
36
|
-
status:
|
|
37
|
-
username:
|
|
38
|
-
message:
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
return {
|
|
42
|
-
logoUrl: walletManager.getChainLogoUrl(chainName),
|
|
43
|
-
chain,
|
|
44
|
-
assetList: chainAccount?.assetList,
|
|
45
|
-
address: accountHook.account?.address,
|
|
46
|
-
wallet: chainAccount,
|
|
47
|
-
rpcEndpoint: rpcEndpointHook.rpcEndpoint,
|
|
48
|
-
...cosmosKitUserChainReturnType, //for migration cosmos kit
|
|
49
|
-
signingClient: signingClientHook.signingClient,
|
|
50
|
-
getSigningClient: () => signingClientHook.getSigningClient(),
|
|
51
|
-
isRpcEndpointLoading: rpcEndpointHook.isLoading,
|
|
52
|
-
isAccountLoading: accountHook.isLoading,
|
|
53
|
-
isSigningClientLoading: signingClientHook.isLoading,
|
|
54
|
-
isLoading: rpcEndpointHook.isLoading || accountHook.isLoading || signingClientHook.isLoading,
|
|
55
|
-
getRpcEndpointError: rpcEndpointHook.error,
|
|
56
|
-
getSigningClientError: signingClientHook.error,
|
|
57
|
-
getAccountError: accountHook.error
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
return {
|
|
61
|
-
logoUrl: walletManager.getChainLogoUrl(chainName),
|
|
27
|
+
getRpcEndpoint: () => getRpcEndpoint(currentWalletName, chainName),
|
|
28
|
+
status: chainWalletStateToShow?.walletState,
|
|
29
|
+
username: chainWalletStateToShow?.account?.username,
|
|
30
|
+
message: chainWalletStateToShow?.errorMessage,
|
|
31
|
+
// new api
|
|
32
|
+
logoUrl: getChainLogoUrl(chainName),
|
|
62
33
|
chain,
|
|
63
|
-
assetList
|
|
64
|
-
address:
|
|
65
|
-
wallet:
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
isSigningClientLoading: signingClientHook.isLoading,
|
|
73
|
-
isLoading: rpcEndpointHook.isLoading || accountHook.isLoading || signingClientHook.isLoading,
|
|
74
|
-
getRpcEndpointError: rpcEndpointHook.error,
|
|
75
|
-
getSigningClientError: signingClientHook.error,
|
|
76
|
-
getAccountError: accountHook.error
|
|
34
|
+
assetList,
|
|
35
|
+
address: chainWalletStateToShow?.account?.address,
|
|
36
|
+
wallet: wallet ? Object.assign({}, wallet, {
|
|
37
|
+
walletState: chainWalletStateToShow?.walletState,
|
|
38
|
+
connect: () => connect(currentWalletName, chainName),
|
|
39
|
+
getAccount: () => getAccount(currentWalletName, chainName)
|
|
40
|
+
}) : undefined,
|
|
41
|
+
rpcEndpoint: chainWalletStateToShow?.rpcEndpoint,
|
|
42
|
+
getSigningClient: () => getSigningClient(currentWalletName, chainName),
|
|
77
43
|
};
|
|
78
44
|
};
|
|
@@ -1,41 +1,30 @@
|
|
|
1
1
|
import { useWalletManager } from "./useWalletManager";
|
|
2
|
-
import { useAccount } from "./useAccount";
|
|
3
|
-
import { useInterchainClient } from "./useInterchainClient";
|
|
4
|
-
import { useRpcEndpoint } from "./useRpcEndpoint";
|
|
5
|
-
import { WalletState } from "@interchain-kit/core";
|
|
6
2
|
export const useChainWallet = (chainName, walletName) => {
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const signingClientHook = useInterchainClient(chainName, walletName);
|
|
3
|
+
const { assetLists, disconnect, getChainByName, getWalletByName, getChainWalletState, getChainLogoUrl, connect, getSigningClient, getRpcEndpoint, getAccount } = useWalletManager();
|
|
4
|
+
const chain = getChainByName(chainName);
|
|
5
|
+
const wallet = getWalletByName(walletName);
|
|
6
|
+
const assetList = assetLists.find(a => a.chainName === chainName);
|
|
7
|
+
const chainWalletStateToShow = getChainWalletState(walletName, chainName);
|
|
13
8
|
return {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
isAccountLoading: accountHook.isLoading,
|
|
35
|
-
isSigningClientLoading: signingClientHook.isLoading,
|
|
36
|
-
isLoading: rpcEndpointHook.isLoading || accountHook.isLoading || signingClientHook.isLoading,
|
|
37
|
-
getRpcEndpointError: rpcEndpointHook.error,
|
|
38
|
-
getSigningClientError: signingClientHook.error,
|
|
39
|
-
getAccountError: accountHook.error
|
|
9
|
+
//for migration cosmos kit
|
|
10
|
+
connect: () => connect(walletName, chainName),
|
|
11
|
+
disconnect: () => disconnect(walletName, chainName),
|
|
12
|
+
getRpcEndpoint: () => getRpcEndpoint(walletName, chainName),
|
|
13
|
+
status: chainWalletStateToShow?.walletState,
|
|
14
|
+
username: chainWalletStateToShow?.account?.username,
|
|
15
|
+
message: chainWalletStateToShow?.errorMessage,
|
|
16
|
+
// new api
|
|
17
|
+
logoUrl: getChainLogoUrl(chainName),
|
|
18
|
+
chain,
|
|
19
|
+
assetList,
|
|
20
|
+
address: chainWalletStateToShow?.account?.address,
|
|
21
|
+
wallet: wallet ? Object.assign({}, wallet, {
|
|
22
|
+
walletState: chainWalletStateToShow?.walletState,
|
|
23
|
+
connect: () => connect(walletName, chainName),
|
|
24
|
+
disconnect: () => disconnect(walletName, chainName),
|
|
25
|
+
getAccount: () => getAccount(walletName, chainName)
|
|
26
|
+
}) : undefined,
|
|
27
|
+
rpcEndpoint: chainWalletStateToShow?.rpcEndpoint,
|
|
28
|
+
getSigningClient: () => getSigningClient(walletName, chainName),
|
|
40
29
|
};
|
|
41
30
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useInterchainWalletContext } from "../provider";
|
|
2
|
-
import {
|
|
2
|
+
import { useStore } from 'zustand';
|
|
3
3
|
export const useWalletManager = () => {
|
|
4
|
-
const
|
|
5
|
-
return
|
|
4
|
+
const store = useInterchainWalletContext();
|
|
5
|
+
return useStore(store);
|
|
6
6
|
};
|
package/esm/index.js
CHANGED
package/esm/modal/modal.js
CHANGED
|
@@ -1,76 +1,72 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { ConnectedContent, ConnectedHeader, ConnectingContent, ConnectingHeader, NotExistContent, NotExistHeader, QRCodeContent, QRCodeHeader, RejectContent, RejectHeader, WalletListContent, WalletListHeader, } from "./views";
|
|
3
3
|
import { useWalletModal } from "./provider";
|
|
4
|
-
import { useWalletManager } from "../hooks";
|
|
5
|
-
import { useEffect,
|
|
6
|
-
import { WalletState
|
|
4
|
+
import { useChainWallet, useWalletManager } from "../hooks";
|
|
5
|
+
import { useEffect, useState } from "react";
|
|
6
|
+
import { WalletState } from "@interchain-kit/core";
|
|
7
7
|
import { ConnectModal } from "@interchain-ui/react";
|
|
8
|
-
import { useCurrentChainWallet } from "../hooks/useCurrentChainWallet";
|
|
9
8
|
export const WalletModal = () => {
|
|
10
9
|
const { modalIsOpen, open, close } = useWalletModal();
|
|
11
|
-
const
|
|
12
|
-
const handleSelectWallet = async (
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
.getWalletRepositoryByName(wallet.info.name)
|
|
16
|
-
.getChainAccountByName(walletManager.currentChainName);
|
|
17
|
-
console.log(wallet.info.name, walletManager.currentChainName, Boolean(currentWallet));
|
|
10
|
+
const { currentWalletName, currentChainName, wallets, setCurrentWalletName, connect, getAccount, getWalletByName, } = useWalletManager();
|
|
11
|
+
const handleSelectWallet = async (selectedWallet) => {
|
|
12
|
+
const walletToView = wallets.find((w) => w.info.name === selectedWallet.info.name);
|
|
13
|
+
setCurrentWalletName(selectedWallet.info.name);
|
|
18
14
|
setModalView({
|
|
19
|
-
header: _jsx(ConnectingHeader, { wallet:
|
|
20
|
-
content: _jsx(ConnectingContent, { wallet:
|
|
15
|
+
header: (_jsx(ConnectingHeader, { wallet: walletToView, onBack: gotoWalletList })),
|
|
16
|
+
content: _jsx(ConnectingContent, { wallet: walletToView }),
|
|
21
17
|
});
|
|
22
|
-
if (
|
|
23
|
-
!
|
|
18
|
+
if (walletToView?.info.mode === "extension" &&
|
|
19
|
+
!walletToView.isExtensionInstalled) {
|
|
24
20
|
setModalView({
|
|
25
|
-
header: (_jsx(NotExistHeader, { wallet:
|
|
26
|
-
content: _jsx(NotExistContent, { wallet:
|
|
21
|
+
header: (_jsx(NotExistHeader, { wallet: walletToView, onBack: gotoWalletList })),
|
|
22
|
+
content: _jsx(NotExistContent, { wallet: walletToView }),
|
|
27
23
|
});
|
|
28
24
|
return;
|
|
29
25
|
}
|
|
30
26
|
try {
|
|
31
|
-
if (
|
|
32
|
-
|
|
27
|
+
if (walletToView?.info.mode === "wallet-connect") {
|
|
28
|
+
walletToView.setOnPairingUriCreatedCallback(() => {
|
|
33
29
|
setModalView({
|
|
34
30
|
header: _jsx(QRCodeHeader, { onBack: gotoWalletList }),
|
|
35
31
|
content: _jsx(QRCodeContent, {}),
|
|
36
32
|
});
|
|
37
33
|
});
|
|
38
|
-
|
|
34
|
+
walletToView.setPairingToConnect(wallet.pairing);
|
|
39
35
|
}
|
|
40
|
-
|
|
41
|
-
await
|
|
36
|
+
console.log({ currentChainName });
|
|
37
|
+
await connect(selectedWallet.info.name, currentChainName);
|
|
38
|
+
await getAccount(selectedWallet.info.name, currentChainName);
|
|
42
39
|
setModalView({
|
|
43
|
-
header: _jsx(ConnectedHeader, { onBack: gotoWalletList }),
|
|
40
|
+
header: (_jsx(ConnectedHeader, { wallet: walletToView, onBack: gotoWalletList })),
|
|
44
41
|
content: _jsx(ConnectedContent, {}),
|
|
45
42
|
});
|
|
46
43
|
}
|
|
47
44
|
catch (error) {
|
|
48
45
|
console.log(error);
|
|
49
46
|
setModalView({
|
|
50
|
-
header: _jsx(RejectHeader, { wallet:
|
|
51
|
-
content: _jsx(RejectContent, { wallet:
|
|
47
|
+
header: _jsx(RejectHeader, { wallet: walletToView, onBack: gotoWalletList }),
|
|
48
|
+
content: _jsx(RejectContent, { wallet: walletToView }),
|
|
52
49
|
});
|
|
53
50
|
}
|
|
54
51
|
};
|
|
55
|
-
const defaultModalView =
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
};
|
|
60
|
-
}, []);
|
|
52
|
+
const defaultModalView = {
|
|
53
|
+
header: _jsx(WalletListHeader, {}),
|
|
54
|
+
content: _jsx(WalletListContent, { onSelectWallet: handleSelectWallet }),
|
|
55
|
+
};
|
|
61
56
|
const [modalView, setModalView] = useState(defaultModalView);
|
|
62
57
|
const gotoWalletList = () => setModalView(defaultModalView);
|
|
63
|
-
const
|
|
58
|
+
const { status } = useChainWallet(currentChainName, currentWalletName);
|
|
64
59
|
useEffect(() => {
|
|
65
|
-
|
|
60
|
+
const currentWallet = getWalletByName(currentWalletName);
|
|
61
|
+
if (modalIsOpen && status === WalletState.Connected) {
|
|
66
62
|
setModalView({
|
|
67
|
-
header: _jsx(ConnectedHeader, { onBack: gotoWalletList }),
|
|
63
|
+
header: (_jsx(ConnectedHeader, { wallet: currentWallet, onBack: gotoWalletList })),
|
|
68
64
|
content: _jsx(ConnectedContent, {}),
|
|
69
65
|
});
|
|
70
66
|
}
|
|
71
67
|
else {
|
|
72
68
|
setModalView(defaultModalView);
|
|
73
69
|
}
|
|
74
|
-
}, [modalIsOpen]);
|
|
70
|
+
}, [modalIsOpen, status]);
|
|
75
71
|
return (_jsx(ConnectModal, { isOpen: modalIsOpen, header: modalView.header, onOpen: open, onClose: close, children: modalView.content }));
|
|
76
72
|
};
|
|
@@ -1,33 +1,31 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { ConnectModalHead, ConnectModalStatus } from "@interchain-ui/react";
|
|
3
|
-
import {
|
|
3
|
+
import { useChainWallet, useWalletManager } from "../../hooks";
|
|
4
4
|
import { useWalletModal } from "../provider";
|
|
5
5
|
import { getWalletInfo } from "../../utils";
|
|
6
6
|
import { AstronautSvg } from "./Astronaut";
|
|
7
|
-
|
|
8
|
-
export const ConnectedHeader = ({ onBack }) => {
|
|
9
|
-
const currentWallet = useCurrentChainWallet();
|
|
7
|
+
export const ConnectedHeader = ({ wallet, onBack, }) => {
|
|
10
8
|
const { close } = useWalletModal();
|
|
11
|
-
return (_jsx(ConnectModalHead, { title:
|
|
9
|
+
return (_jsx(ConnectModalHead, { title: wallet?.info?.prettyName || "", hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
|
|
12
10
|
};
|
|
13
11
|
export const ConnectedContent = () => {
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
const {
|
|
12
|
+
const { currentChainName, currentWalletName } = useWalletManager();
|
|
13
|
+
console.log({ currentChainName, currentWalletName });
|
|
14
|
+
const { address, username, wallet } = useChainWallet(currentChainName, currentWalletName);
|
|
17
15
|
const { close } = useWalletModal();
|
|
18
|
-
if (!
|
|
16
|
+
if (!wallet) {
|
|
19
17
|
return null;
|
|
20
18
|
}
|
|
21
|
-
return (_jsx(ConnectModalStatus, { wallet: getWalletInfo(
|
|
22
|
-
name:
|
|
19
|
+
return (_jsx(ConnectModalStatus, { wallet: getWalletInfo(wallet), status: "Connected", connectedInfo: {
|
|
20
|
+
name: username || "Wallet",
|
|
23
21
|
avatar: (_jsx(AstronautSvg, { style: {
|
|
24
22
|
fontSize: "inherit",
|
|
25
23
|
width: "100%",
|
|
26
24
|
height: "100%",
|
|
27
25
|
} })),
|
|
28
|
-
address:
|
|
26
|
+
address: address,
|
|
29
27
|
}, onDisconnect: async () => {
|
|
30
|
-
await
|
|
28
|
+
await wallet.disconnect(currentChainName);
|
|
31
29
|
close();
|
|
32
30
|
} }));
|
|
33
31
|
};
|
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { ConnectModalHead, ConnectModalQRCode } from "@interchain-ui/react";
|
|
3
|
-
import {
|
|
3
|
+
import { useWalletManager } from "../../hooks";
|
|
4
4
|
import { useWalletModal } from "../provider";
|
|
5
5
|
export const QRCodeHeader = ({ onBack }) => {
|
|
6
|
-
const
|
|
7
|
-
const walletManager = useWalletManager();
|
|
6
|
+
const { currentChainName, currentWalletName, getWalletByName, disconnect } = useWalletManager();
|
|
8
7
|
const { close } = useWalletModal();
|
|
8
|
+
const currentWallet = getWalletByName(currentWalletName);
|
|
9
9
|
return (_jsx(ConnectModalHead, { title: currentWallet?.info?.prettyName || "", hasBackButton: true, onClose: () => void 0, onBack: async () => {
|
|
10
|
-
await
|
|
10
|
+
await disconnect(currentWallet?.info?.name || "", currentChainName);
|
|
11
11
|
onBack();
|
|
12
12
|
}, closeButtonProps: { onClick: close } }));
|
|
13
13
|
};
|
|
14
14
|
export const QRCodeContent = () => {
|
|
15
|
-
const
|
|
16
|
-
const currentWallet =
|
|
17
|
-
const walletManager = useWalletManager();
|
|
15
|
+
const { currentChainName, currentWalletName, getWalletByName, connect } = useWalletManager();
|
|
16
|
+
const currentWallet = getWalletByName(currentWalletName);
|
|
18
17
|
const data = currentWallet.pairingUri;
|
|
19
|
-
return (_jsx(ConnectModalQRCode, { status: data ? "Done" : "Pending", link: data, description: "Open App to connect", errorTitle: "errorTitle", errorDesc: currentWallet.errorMessage || "", onRefresh: () =>
|
|
18
|
+
return (_jsx(ConnectModalQRCode, { status: data ? "Done" : "Pending", link: data, description: "Open App to connect", errorTitle: "errorTitle", errorDesc: currentWallet.errorMessage || "", onRefresh: () => connect(currentWallet?.info?.name || "", currentChainName) }));
|
|
20
19
|
};
|
|
@@ -10,5 +10,7 @@ export const RejectHeader = ({ wallet, onBack, }) => {
|
|
|
10
10
|
export const RejectContent = ({ wallet }) => {
|
|
11
11
|
const walletManager = useWalletManager();
|
|
12
12
|
const { close } = useWalletModal();
|
|
13
|
-
return (_jsx(ConnectModalStatus, { status: "Rejected", wallet: getWalletInfo(wallet), contentHeader: "Request Rejected", contentDesc: wallet.errorMessage || "Connection permission is denied.", onConnect: () => walletManager
|
|
13
|
+
return (_jsx(ConnectModalStatus, { status: "Rejected", wallet: getWalletInfo(wallet), contentHeader: "Request Rejected", contentDesc: wallet.errorMessage || "Connection permission is denied.", onConnect: () => walletManager
|
|
14
|
+
.connect(wallet.info.name, walletManager.currentChainName)
|
|
15
|
+
.then(close) }));
|
|
14
16
|
};
|
package/esm/provider.js
CHANGED
|
@@ -1,21 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect,
|
|
2
|
+
import { useEffect, useRef } from "react";
|
|
3
3
|
import { createContext, useContext } from "react";
|
|
4
|
-
import { WalletManager,
|
|
4
|
+
import { WalletManager, } from "@interchain-kit/core";
|
|
5
5
|
import { WalletModalProvider } from "./modal";
|
|
6
|
+
import { createInterchainStore } from "./store";
|
|
6
7
|
const InterchainWalletContext = createContext(null);
|
|
7
8
|
export const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endpointOptions, children, }) => {
|
|
8
|
-
const [_, forceRender] = useState({});
|
|
9
|
-
const walletManager =
|
|
10
|
-
|
|
11
|
-
}, []);
|
|
9
|
+
// const [_, forceRender] = useState({});
|
|
10
|
+
const walletManager = new WalletManager(chains, assetLists, wallets, signerOptions, endpointOptions);
|
|
11
|
+
const store = useRef(createInterchainStore(walletManager));
|
|
12
12
|
useEffect(() => {
|
|
13
13
|
walletManager.init();
|
|
14
14
|
}, []);
|
|
15
|
-
|
|
16
|
-
return _jsx("div", { children: "Interchain Kit Initializing..." });
|
|
17
|
-
}
|
|
18
|
-
return (_jsx(InterchainWalletContext.Provider, { value: { walletManager }, children: _jsx(WalletModalProvider, { children: children }) }));
|
|
15
|
+
return (_jsx(InterchainWalletContext.Provider, { value: store.current, children: _jsx(WalletModalProvider, { children: children }) }));
|
|
19
16
|
};
|
|
20
17
|
export const useInterchainWalletContext = () => {
|
|
21
18
|
const context = useContext(InterchainWalletContext);
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { WalletState } from "@interchain-kit/core";
|
|
2
|
+
import { createStore } from "zustand";
|
|
3
|
+
import { immer } from "zustand/middleware/immer";
|
|
4
|
+
const immerSyncUp = (newWalletManager) => {
|
|
5
|
+
return (draft) => {
|
|
6
|
+
draft.chains = newWalletManager.chains;
|
|
7
|
+
draft.assetLists = newWalletManager.assetLists;
|
|
8
|
+
draft.wallets = newWalletManager.wallets;
|
|
9
|
+
draft.signerOptions = newWalletManager.signerOptions;
|
|
10
|
+
draft.endpointOptions = newWalletManager.endpointOptions;
|
|
11
|
+
draft.signerOptionMap = newWalletManager.signerOptionMap;
|
|
12
|
+
draft.endpointOptionsMap = newWalletManager.endpointOptionsMap;
|
|
13
|
+
draft.preferredSignTypeMap = newWalletManager.preferredSignTypeMap;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export const createInterchainStore = (walletManager) => {
|
|
17
|
+
const { chains, assetLists, wallets, signerOptions, endpointOptions } = walletManager;
|
|
18
|
+
// const walletManager = new WalletManager(chains, assetLists, wallets, signerOptions, endpointOptions)
|
|
19
|
+
const chainWalletState = [];
|
|
20
|
+
wallets.forEach(wallet => {
|
|
21
|
+
chains.forEach(chain => {
|
|
22
|
+
chainWalletState.push({
|
|
23
|
+
chainName: chain.chainName,
|
|
24
|
+
walletName: wallet.info.name,
|
|
25
|
+
walletState: null,
|
|
26
|
+
rpcEndpoint: "",
|
|
27
|
+
errorMessage: "",
|
|
28
|
+
signerOption: undefined,
|
|
29
|
+
account: undefined
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
return createStore(immer((set, get) => ({
|
|
34
|
+
chainWalletState,
|
|
35
|
+
currentWalletName: '',
|
|
36
|
+
currentChainName: '',
|
|
37
|
+
chains: [...walletManager.chains],
|
|
38
|
+
assetLists: [...walletManager.assetLists],
|
|
39
|
+
wallets: walletManager.wallets,
|
|
40
|
+
signerOptions: walletManager.signerOptions,
|
|
41
|
+
endpointOptions: walletManager.endpointOptions,
|
|
42
|
+
preferredSignTypeMap: { ...walletManager.preferredSignTypeMap },
|
|
43
|
+
signerOptionMap: { ...walletManager.signerOptionMap },
|
|
44
|
+
endpointOptionsMap: { ...walletManager.endpointOptionsMap },
|
|
45
|
+
updateChainWalletState: (walletName, chainName, data) => {
|
|
46
|
+
set(draft => {
|
|
47
|
+
let targetIndex = draft.chainWalletState.findIndex(cws => cws.walletName === walletName && cws.chainName === chainName);
|
|
48
|
+
draft.chainWalletState[targetIndex] = { ...draft.chainWalletState[targetIndex], ...data };
|
|
49
|
+
});
|
|
50
|
+
},
|
|
51
|
+
init: () => walletManager.init(),
|
|
52
|
+
setCurrentChainName: (chainName) => {
|
|
53
|
+
set(draft => { draft.currentChainName = chainName; });
|
|
54
|
+
},
|
|
55
|
+
setCurrentWalletName: (walletName) => {
|
|
56
|
+
set(draft => { draft.currentWalletName = walletName; });
|
|
57
|
+
},
|
|
58
|
+
getDraftChainWalletState: (state, walletName, chainName) => {
|
|
59
|
+
const targetIndex = state.chainWalletState.findIndex(cws => cws.walletName === walletName && cws.chainName === chainName);
|
|
60
|
+
return state.chainWalletState[targetIndex];
|
|
61
|
+
},
|
|
62
|
+
getChainWalletState: (walletName, chainName) => {
|
|
63
|
+
return get().chainWalletState.find(cws => cws.walletName === walletName && cws.chainName === chainName);
|
|
64
|
+
},
|
|
65
|
+
addChains: (chains, assetLists, signerOptions, endpointOptions) => {
|
|
66
|
+
walletManager.addChains(chains, assetLists, signerOptions, endpointOptions);
|
|
67
|
+
// console.log(walletManager.chains, walletManager.assetLists)
|
|
68
|
+
// set(immerSyncUp(walletManager))
|
|
69
|
+
// set(draft => {
|
|
70
|
+
// draft.chains = walletManager.chains
|
|
71
|
+
// })
|
|
72
|
+
set(draft => {
|
|
73
|
+
chains.forEach(newChain => {
|
|
74
|
+
const existChain = draft.chains.find(c => c.chainId === newChain.chainId);
|
|
75
|
+
if (!existChain) {
|
|
76
|
+
draft.chains.push(newChain);
|
|
77
|
+
const assetList = assetLists.find(a => a.chainName === newChain.chainName);
|
|
78
|
+
draft.assetLists.push(assetList);
|
|
79
|
+
}
|
|
80
|
+
draft.wallets.forEach(w => {
|
|
81
|
+
draft.chainWalletState.push({
|
|
82
|
+
chainName: newChain.chainName,
|
|
83
|
+
walletName: w.info.name,
|
|
84
|
+
walletState: WalletState.Disconnected,
|
|
85
|
+
rpcEndpoint: "",
|
|
86
|
+
errorMessage: "",
|
|
87
|
+
signerOption: undefined,
|
|
88
|
+
account: undefined
|
|
89
|
+
});
|
|
90
|
+
});
|
|
91
|
+
draft.signerOptionMap[newChain.chainName] = signerOptions?.signing?.(newChain.chainName);
|
|
92
|
+
draft.endpointOptionsMap[newChain.chainName] = endpointOptions?.endpoints?.[newChain.chainName];
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
},
|
|
96
|
+
connect: async (walletName, chainName) => {
|
|
97
|
+
get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Connecting });
|
|
98
|
+
try {
|
|
99
|
+
await walletManager.connect(walletName, chainName);
|
|
100
|
+
set(draft => {
|
|
101
|
+
draft.currentChainName = chainName;
|
|
102
|
+
draft.currentWalletName = walletName;
|
|
103
|
+
});
|
|
104
|
+
get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Connected });
|
|
105
|
+
}
|
|
106
|
+
catch (error) {
|
|
107
|
+
get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Disconnected, errorMessage: error.message });
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
disconnect: async (walletName, chainName) => {
|
|
111
|
+
try {
|
|
112
|
+
await walletManager.disconnect(walletName, chainName);
|
|
113
|
+
get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Disconnected, account: null });
|
|
114
|
+
}
|
|
115
|
+
catch (error) {
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
getAccount: async (walletName, chainName) => {
|
|
119
|
+
const account = await walletManager.getAccount(walletName, chainName);
|
|
120
|
+
get().updateChainWalletState(walletName, chainName, { account });
|
|
121
|
+
return account;
|
|
122
|
+
},
|
|
123
|
+
getRpcEndpoint: async (walletName, chainName) => {
|
|
124
|
+
const rpcEndpoint = await walletManager.getRpcEndpoint(walletName, chainName);
|
|
125
|
+
get().updateChainWalletState(walletName, chainName, { rpcEndpoint });
|
|
126
|
+
return rpcEndpoint;
|
|
127
|
+
},
|
|
128
|
+
getChainLogoUrl(chainName) {
|
|
129
|
+
return walletManager.getChainLogoUrl(chainName);
|
|
130
|
+
},
|
|
131
|
+
getChainByName(chainName) {
|
|
132
|
+
return walletManager.getChainByName(chainName);
|
|
133
|
+
},
|
|
134
|
+
getAssetListByName(chainName) {
|
|
135
|
+
return walletManager.getAssetListByName(chainName);
|
|
136
|
+
},
|
|
137
|
+
getDownloadLink(walletName) {
|
|
138
|
+
return walletManager.getDownloadLink(walletName);
|
|
139
|
+
},
|
|
140
|
+
getOfflineSigner(walletName, chainName) {
|
|
141
|
+
return walletManager.getOfflineSigner(walletName, chainName);
|
|
142
|
+
},
|
|
143
|
+
getPreferSignType(chainName) {
|
|
144
|
+
const result = walletManager.getPreferSignType(chainName);
|
|
145
|
+
set(immerSyncUp(walletManager));
|
|
146
|
+
return result;
|
|
147
|
+
},
|
|
148
|
+
getSignerOptions(chainName) {
|
|
149
|
+
const result = walletManager.getSignerOptions(chainName);
|
|
150
|
+
set(immerSyncUp(walletManager));
|
|
151
|
+
return result;
|
|
152
|
+
},
|
|
153
|
+
getWalletByName(walletName) {
|
|
154
|
+
return walletManager.getWalletByName(walletName);
|
|
155
|
+
},
|
|
156
|
+
getSigningClient(walletName, chainName) {
|
|
157
|
+
return walletManager.getSigningClient(walletName, chainName);
|
|
158
|
+
},
|
|
159
|
+
getEnv() {
|
|
160
|
+
return walletManager.getEnv();
|
|
161
|
+
},
|
|
162
|
+
})));
|
|
163
|
+
};
|
package/hooks/index.d.ts
CHANGED
|
@@ -1,9 +1,3 @@
|
|
|
1
1
|
export * from './useWalletManager';
|
|
2
|
-
export * from './useCurrentWallet';
|
|
3
|
-
export * from './useAccount';
|
|
4
2
|
export * from './useChain';
|
|
5
|
-
export * from './useConnect';
|
|
6
3
|
export * from './useChainWallet';
|
|
7
|
-
export * from './useConfig';
|
|
8
|
-
export * from './useOfflineSigner';
|
|
9
|
-
export * from './useRpcEndpoint';
|
package/hooks/index.js
CHANGED
|
@@ -15,11 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
__exportStar(require("./useWalletManager"), exports);
|
|
18
|
-
__exportStar(require("./useCurrentWallet"), exports);
|
|
19
|
-
__exportStar(require("./useAccount"), exports);
|
|
20
18
|
__exportStar(require("./useChain"), exports);
|
|
21
|
-
__exportStar(require("./useConnect"), exports);
|
|
22
19
|
__exportStar(require("./useChainWallet"), exports);
|
|
23
|
-
__exportStar(require("./useConfig"), exports);
|
|
24
|
-
__exportStar(require("./useOfflineSigner"), exports);
|
|
25
|
-
__exportStar(require("./useRpcEndpoint"), exports);
|