@interchain-kit/react 0.3.33 → 0.3.34
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/modal/modal.js +8 -7
- package/esm/provider.js +1 -1
- package/esm/store/stateful-wallet.js +6 -9
- package/modal/modal.d.ts +22 -10
- package/modal/modal.js +9 -8
- package/package.json +3 -3
- package/provider.d.ts +1 -1
- package/provider.js +1 -1
- package/store/stateful-wallet.d.ts +1 -1
- package/store/stateful-wallet.js +5 -8
package/esm/modal/modal.js
CHANGED
|
@@ -2,10 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { ConnectedContent, ConnectedHeader, ConnectingContent, ConnectingHeader, ErrorContent, ErrorHeader, NotExistContent, NotExistHeader, QRCodeContent, QRCodeHeader, RejectContent, RejectHeader, WalletListContent, WalletListHeader, } from "./views";
|
|
3
3
|
import { useMemo, useState } from "react";
|
|
4
4
|
import { WalletState } from "@interchain-kit/core";
|
|
5
|
-
import { ConnectModal, } from "@interchain-ui/react";
|
|
5
|
+
import { ConnectModal, ThemeProvider, } from "@interchain-ui/react";
|
|
6
6
|
import { useWalletManager } from "../hooks";
|
|
7
7
|
import { transferToWalletUISchema } from "../utils";
|
|
8
|
-
export const InterchainWalletModal = (
|
|
8
|
+
export const InterchainWalletModal = ({
|
|
9
|
+
// ==== Custom modal styles
|
|
10
|
+
modalContainerClassName, modalContentClassName, modalChildrenClassName, modalContentStyles, modalThemeProviderProps, }) => {
|
|
9
11
|
const [shouldShowList, setShouldShowList] = useState(false);
|
|
10
12
|
const { modalIsOpen: isOpen, walletConnectQRCodeUri, wallets: statefulWallets, getChainWalletState, currentWalletName, currentChainName, openModal: open, closeModal: close, chains, setCurrentWalletName, getDownloadLink, getEnv, } = useWalletManager();
|
|
11
13
|
const [walletToConnect, setWalletToConnect] = useState(null);
|
|
@@ -31,9 +33,9 @@ export const InterchainWalletModal = () => {
|
|
|
31
33
|
const onReconnect = () => {
|
|
32
34
|
currentWallet.connect(chainToConnect.chainId);
|
|
33
35
|
};
|
|
34
|
-
return (_jsx(
|
|
36
|
+
return (_jsx(ThemeProvider, { ...modalThemeProviderProps, children: _jsx(WalletModalElement, { shouldShowList: shouldShowList, username: account?.username, address: account?.address, disconnect: disconnect, isOpen: isOpen, open: open, close: handleCloseModal, wallets: walletsForUI, walletConnectQRCodeUri: walletConnectQRCodeUri, currentWallet: walletToShow, isConnecting: walletToShow?.walletState === WalletState.Connecting, isConnected: walletToShow?.walletState === WalletState.Connected, isRejected: walletToShow?.walletState === WalletState.Rejected, isDisconnected: walletToShow?.walletState === WalletState.Disconnected, isNotExist: walletToShow?.walletState === WalletState.NotExist, errorMessage: errorMessage, onSelectWallet: (w) => onSelectWallet(w), onBack: () => setShouldShowList(true), onReconnect: () => onSelectWallet(walletToShow), getDownloadLink: () => getDownloadLink(walletToShow?.info.name), getEnv: getEnv, modalContainerClassName: modalContainerClassName, modalContentClassName: modalContentClassName, modalChildrenClassName: modalChildrenClassName, modalContentStyles: modalContentStyles, modalThemeProviderProps: modalThemeProviderProps }) }));
|
|
35
37
|
};
|
|
36
|
-
export const
|
|
38
|
+
export const WalletModalElement = ({ shouldShowList, isOpen, walletConnectQRCodeUri, wallets, username, address, currentWallet, isConnecting, isConnected, isRejected, isDisconnected, isNotExist, errorMessage, open, close, disconnect, onSelectWallet, onBack, onReconnect, getDownloadLink, getEnv, modalThemeProviderProps, modalContainerClassName, modalContentClassName, modalChildrenClassName, modalContentStyles, }) => {
|
|
37
39
|
const { header, content } = useMemo(() => {
|
|
38
40
|
if (shouldShowList ||
|
|
39
41
|
(isDisconnected && currentWallet.errorMessage === "")) {
|
|
@@ -94,12 +96,11 @@ export const WalletModal = ({ shouldShowList, isOpen, walletConnectQRCodeUri, wa
|
|
|
94
96
|
wallets,
|
|
95
97
|
isOpen,
|
|
96
98
|
]);
|
|
97
|
-
return (_jsx(ConnectModal, { isOpen: isOpen, header: header, onOpen: open, onClose: close, children: content }));
|
|
99
|
+
return (_jsx(ConnectModal, { isOpen: isOpen, header: header, onOpen: open, onClose: close, modalContainerClassName: modalContainerClassName, modalContentClassName: modalContentClassName, modalChildrenClassName: modalChildrenClassName, modalContentStyles: modalContentStyles, children: content }));
|
|
98
100
|
};
|
|
99
101
|
export const ModalRenderer = ({ walletModal: ProvidedWalletModal, }) => {
|
|
100
102
|
if (!ProvidedWalletModal) {
|
|
101
|
-
|
|
102
|
-
Example: <ChainProvider chains={chains} assetLists={assetLists} wallets={wallets} walletModal={InterchainKitWalletModal} />`);
|
|
103
|
+
return null;
|
|
103
104
|
}
|
|
104
105
|
const { modalIsOpen, openModal, closeModal, wallets, currentWalletName } = useWalletManager();
|
|
105
106
|
return (_jsx(ProvidedWalletModal, { wallets: wallets, isOpen: modalIsOpen, open: openModal, close: closeModal, currentWallet: wallets.find((w) => w.info.name === currentWalletName) }));
|
package/esm/provider.js
CHANGED
|
@@ -13,7 +13,7 @@ export const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endp
|
|
|
13
13
|
// walletManager.init();
|
|
14
14
|
store.current.getState().init();
|
|
15
15
|
}, []);
|
|
16
|
-
return (_jsxs(InterchainWalletContext.Provider, { value: store.current, children: [children, _jsx(ModalRenderer, { walletModal: ProviderWalletModal })] }));
|
|
16
|
+
return (_jsxs(InterchainWalletContext.Provider, { value: store.current, children: [children, ProviderWalletModal && (_jsx(ModalRenderer, { walletModal: ProviderWalletModal }))] }));
|
|
17
17
|
};
|
|
18
18
|
export const useInterchainWalletContext = () => {
|
|
19
19
|
const context = useContext(InterchainWalletContext);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BaseWallet, clientNotExistError, CosmosWallet, EthereumWallet,
|
|
1
|
+
import { BaseWallet, clientNotExistError, CosmosWallet, EthereumWallet, MultiChainWallet, WalletState, WCWallet } from "@interchain-kit/core";
|
|
2
2
|
export class StatefulWallet extends BaseWallet {
|
|
3
3
|
originalWallet;
|
|
4
4
|
walletName;
|
|
@@ -142,24 +142,21 @@ export class StatefulWallet extends BaseWallet {
|
|
|
142
142
|
getChainById(chainId) {
|
|
143
143
|
return this.originalWallet.getChainById(chainId);
|
|
144
144
|
}
|
|
145
|
-
|
|
145
|
+
getWalletOfType(WalletClass) {
|
|
146
146
|
if (this.originalWallet instanceof WalletClass) {
|
|
147
|
-
return
|
|
147
|
+
return this.originalWallet;
|
|
148
148
|
}
|
|
149
|
-
if (this.originalWallet instanceof
|
|
150
|
-
return callback(this.originalWallet);
|
|
151
|
-
}
|
|
152
|
-
if (this.originalWallet instanceof ExtensionWallet) {
|
|
149
|
+
if (this.originalWallet instanceof MultiChainWallet) {
|
|
153
150
|
if (WalletClass === CosmosWallet) {
|
|
154
151
|
const cosmosWallet = this.originalWallet.getWalletByChainType('cosmos');
|
|
155
152
|
if (cosmosWallet) {
|
|
156
|
-
return
|
|
153
|
+
return cosmosWallet;
|
|
157
154
|
}
|
|
158
155
|
}
|
|
159
156
|
if (WalletClass === EthereumWallet) {
|
|
160
157
|
const ethereumWallet = this.originalWallet.getWalletByChainType('eip155');
|
|
161
158
|
if (ethereumWallet) {
|
|
162
|
-
return
|
|
159
|
+
return ethereumWallet;
|
|
163
160
|
}
|
|
164
161
|
}
|
|
165
162
|
}
|
package/modal/modal.d.ts
CHANGED
|
@@ -1,8 +1,23 @@
|
|
|
1
1
|
import { ReactElement } from "react";
|
|
2
2
|
import { DownloadInfo } from "@interchain-kit/core";
|
|
3
|
-
import { Wallet as InterchainUIWalletType } from "@interchain-ui/react";
|
|
3
|
+
import { Wallet as InterchainUIWalletType, ThemeProviderProps } from "@interchain-ui/react";
|
|
4
4
|
import { StatefulWallet } from "../store/stateful-wallet";
|
|
5
|
+
export type WalletModalProps = {
|
|
6
|
+
isOpen: boolean;
|
|
7
|
+
wallets: StatefulWallet[];
|
|
8
|
+
currentWallet?: StatefulWallet;
|
|
9
|
+
open: () => void;
|
|
10
|
+
close: () => void;
|
|
11
|
+
};
|
|
5
12
|
export type InterchainWalletModalProps = {
|
|
13
|
+
modalContainerClassName?: string;
|
|
14
|
+
modalContentClassName?: string;
|
|
15
|
+
modalChildrenClassName?: string;
|
|
16
|
+
modalContentStyles?: React.CSSProperties;
|
|
17
|
+
modalThemeProviderProps?: ThemeProviderProps;
|
|
18
|
+
};
|
|
19
|
+
export declare const InterchainWalletModal: ({ modalContainerClassName, modalContentClassName, modalChildrenClassName, modalContentStyles, modalThemeProviderProps, }: InterchainWalletModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export type WalletModalElementProps = {
|
|
6
21
|
shouldShowList: boolean;
|
|
7
22
|
isOpen: boolean;
|
|
8
23
|
walletConnectQRCodeUri: string | null;
|
|
@@ -28,16 +43,13 @@ export type InterchainWalletModalProps = {
|
|
|
28
43
|
device?: string;
|
|
29
44
|
os?: string;
|
|
30
45
|
};
|
|
46
|
+
modalThemeProviderProps?: ThemeProviderProps;
|
|
47
|
+
modalContainerClassName?: string;
|
|
48
|
+
modalContentClassName?: string;
|
|
49
|
+
modalChildrenClassName?: string;
|
|
50
|
+
modalContentStyles?: React.CSSProperties;
|
|
31
51
|
};
|
|
32
|
-
export
|
|
33
|
-
isOpen: boolean;
|
|
34
|
-
wallets: StatefulWallet[];
|
|
35
|
-
currentWallet?: StatefulWallet;
|
|
36
|
-
open: () => void;
|
|
37
|
-
close: () => void;
|
|
38
|
-
};
|
|
39
|
-
export declare const InterchainWalletModal: () => import("react/jsx-runtime").JSX.Element;
|
|
40
|
-
export declare const WalletModal: ({ shouldShowList, isOpen, walletConnectQRCodeUri, wallets, username, address, currentWallet, isConnecting, isConnected, isRejected, isDisconnected, isNotExist, errorMessage, open, close, disconnect, onSelectWallet, onBack, onReconnect, getDownloadLink, getEnv, }: InterchainWalletModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
52
|
+
export declare const WalletModalElement: ({ shouldShowList, isOpen, walletConnectQRCodeUri, wallets, username, address, currentWallet, isConnecting, isConnected, isRejected, isDisconnected, isNotExist, errorMessage, open, close, disconnect, onSelectWallet, onBack, onReconnect, getDownloadLink, getEnv, modalThemeProviderProps, modalContainerClassName, modalContentClassName, modalChildrenClassName, modalContentStyles, }: WalletModalElementProps) => import("react/jsx-runtime").JSX.Element;
|
|
41
53
|
export declare const ModalRenderer: ({ walletModal: ProvidedWalletModal, }: {
|
|
42
54
|
walletModal: (props: WalletModalProps) => ReactElement;
|
|
43
55
|
}) => import("react/jsx-runtime").JSX.Element;
|
package/modal/modal.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ModalRenderer = exports.
|
|
3
|
+
exports.ModalRenderer = exports.WalletModalElement = exports.InterchainWalletModal = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const views_1 = require("./views");
|
|
6
6
|
const react_1 = require("react");
|
|
@@ -8,7 +8,9 @@ const core_1 = require("@interchain-kit/core");
|
|
|
8
8
|
const react_2 = require("@interchain-ui/react");
|
|
9
9
|
const hooks_1 = require("../hooks");
|
|
10
10
|
const utils_1 = require("../utils");
|
|
11
|
-
const InterchainWalletModal = (
|
|
11
|
+
const InterchainWalletModal = ({
|
|
12
|
+
// ==== Custom modal styles
|
|
13
|
+
modalContainerClassName, modalContentClassName, modalChildrenClassName, modalContentStyles, modalThemeProviderProps, }) => {
|
|
12
14
|
const [shouldShowList, setShouldShowList] = (0, react_1.useState)(false);
|
|
13
15
|
const { modalIsOpen: isOpen, walletConnectQRCodeUri, wallets: statefulWallets, getChainWalletState, currentWalletName, currentChainName, openModal: open, closeModal: close, chains, setCurrentWalletName, getDownloadLink, getEnv, } = (0, hooks_1.useWalletManager)();
|
|
14
16
|
const [walletToConnect, setWalletToConnect] = (0, react_1.useState)(null);
|
|
@@ -34,10 +36,10 @@ const InterchainWalletModal = () => {
|
|
|
34
36
|
const onReconnect = () => {
|
|
35
37
|
currentWallet.connect(chainToConnect.chainId);
|
|
36
38
|
};
|
|
37
|
-
return ((0, jsx_runtime_1.jsx)(exports.
|
|
39
|
+
return ((0, jsx_runtime_1.jsx)(react_2.ThemeProvider, { ...modalThemeProviderProps, children: (0, jsx_runtime_1.jsx)(exports.WalletModalElement, { shouldShowList: shouldShowList, username: account?.username, address: account?.address, disconnect: disconnect, isOpen: isOpen, open: open, close: handleCloseModal, wallets: walletsForUI, walletConnectQRCodeUri: walletConnectQRCodeUri, currentWallet: walletToShow, isConnecting: walletToShow?.walletState === core_1.WalletState.Connecting, isConnected: walletToShow?.walletState === core_1.WalletState.Connected, isRejected: walletToShow?.walletState === core_1.WalletState.Rejected, isDisconnected: walletToShow?.walletState === core_1.WalletState.Disconnected, isNotExist: walletToShow?.walletState === core_1.WalletState.NotExist, errorMessage: errorMessage, onSelectWallet: (w) => onSelectWallet(w), onBack: () => setShouldShowList(true), onReconnect: () => onSelectWallet(walletToShow), getDownloadLink: () => getDownloadLink(walletToShow?.info.name), getEnv: getEnv, modalContainerClassName: modalContainerClassName, modalContentClassName: modalContentClassName, modalChildrenClassName: modalChildrenClassName, modalContentStyles: modalContentStyles, modalThemeProviderProps: modalThemeProviderProps }) }));
|
|
38
40
|
};
|
|
39
41
|
exports.InterchainWalletModal = InterchainWalletModal;
|
|
40
|
-
const
|
|
42
|
+
const WalletModalElement = ({ shouldShowList, isOpen, walletConnectQRCodeUri, wallets, username, address, currentWallet, isConnecting, isConnected, isRejected, isDisconnected, isNotExist, errorMessage, open, close, disconnect, onSelectWallet, onBack, onReconnect, getDownloadLink, getEnv, modalThemeProviderProps, modalContainerClassName, modalContentClassName, modalChildrenClassName, modalContentStyles, }) => {
|
|
41
43
|
const { header, content } = (0, react_1.useMemo)(() => {
|
|
42
44
|
if (shouldShowList ||
|
|
43
45
|
(isDisconnected && currentWallet.errorMessage === "")) {
|
|
@@ -98,13 +100,12 @@ const WalletModal = ({ shouldShowList, isOpen, walletConnectQRCodeUri, wallets,
|
|
|
98
100
|
wallets,
|
|
99
101
|
isOpen,
|
|
100
102
|
]);
|
|
101
|
-
return ((0, jsx_runtime_1.jsx)(react_2.ConnectModal, { isOpen: isOpen, header: header, onOpen: open, onClose: close, children: content }));
|
|
103
|
+
return ((0, jsx_runtime_1.jsx)(react_2.ConnectModal, { isOpen: isOpen, header: header, onOpen: open, onClose: close, modalContainerClassName: modalContainerClassName, modalContentClassName: modalContentClassName, modalChildrenClassName: modalChildrenClassName, modalContentStyles: modalContentStyles, children: content }));
|
|
102
104
|
};
|
|
103
|
-
exports.
|
|
105
|
+
exports.WalletModalElement = WalletModalElement;
|
|
104
106
|
const ModalRenderer = ({ walletModal: ProvidedWalletModal, }) => {
|
|
105
107
|
if (!ProvidedWalletModal) {
|
|
106
|
-
|
|
107
|
-
Example: <ChainProvider chains={chains} assetLists={assetLists} wallets={wallets} walletModal={InterchainKitWalletModal} />`);
|
|
108
|
+
return null;
|
|
108
109
|
}
|
|
109
110
|
const { modalIsOpen, openModal, closeModal, wallets, currentWalletName } = (0, hooks_1.useWalletManager)();
|
|
110
111
|
return ((0, jsx_runtime_1.jsx)(ProvidedWalletModal, { wallets: wallets, isOpen: modalIsOpen, open: openModal, close: closeModal, currentWallet: wallets.find((w) => w.info.name === currentWalletName) }));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@interchain-kit/react",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.34",
|
|
4
4
|
"author": "Hyperweb <developers@hyperweb.io>",
|
|
5
5
|
"description": "interchain-kit wallet connector react package",
|
|
6
6
|
"main": "index.js",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"keywords": [],
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@chain-registry/v2-types": "^0.53.40",
|
|
37
|
-
"@interchain-kit/core": "0.3.
|
|
37
|
+
"@interchain-kit/core": "0.3.34",
|
|
38
38
|
"@interchain-ui/react": "1.26.1",
|
|
39
39
|
"@interchainjs/cosmos": "1.11.11",
|
|
40
40
|
"@interchainjs/cosmos-types": "1.11.11",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"react": "^19.0.0",
|
|
65
65
|
"react-dom": "^19.0.0"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "f20fdd36dee935e0abe8e7cddc0de505d987ec50"
|
|
68
68
|
}
|
package/provider.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ type InterchainWalletProviderProps = {
|
|
|
12
12
|
signerOptions?: SignerOptions;
|
|
13
13
|
endpointOptions?: EndpointOptions;
|
|
14
14
|
children: React.ReactNode;
|
|
15
|
-
walletModal
|
|
15
|
+
walletModal?: (props: WalletModalProps) => ReactElement;
|
|
16
16
|
};
|
|
17
17
|
export declare const ChainProvider: ({ chains, assetLists, wallets, signerOptions, endpointOptions, children, walletModal: ProviderWalletModal, }: InterchainWalletProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
18
|
export declare const useInterchainWalletContext: () => InterchainWalletContextType;
|
package/provider.js
CHANGED
|
@@ -16,7 +16,7 @@ const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endpointOpt
|
|
|
16
16
|
// walletManager.init();
|
|
17
17
|
store.current.getState().init();
|
|
18
18
|
}, []);
|
|
19
|
-
return ((0, jsx_runtime_1.jsxs)(InterchainWalletContext.Provider, { value: store.current, children: [children, (0, jsx_runtime_1.jsx)(modal_1.ModalRenderer, { walletModal: ProviderWalletModal })] }));
|
|
19
|
+
return ((0, jsx_runtime_1.jsxs)(InterchainWalletContext.Provider, { value: store.current, children: [children, ProviderWalletModal && ((0, jsx_runtime_1.jsx)(modal_1.ModalRenderer, { walletModal: ProviderWalletModal }))] }));
|
|
20
20
|
};
|
|
21
21
|
exports.ChainProvider = ChainProvider;
|
|
22
22
|
const useInterchainWalletContext = () => {
|
|
@@ -17,5 +17,5 @@ export declare class StatefulWallet extends BaseWallet {
|
|
|
17
17
|
addSuggestChain(chainId: Chain["chainId"]): Promise<void>;
|
|
18
18
|
getProvider(chainId?: Chain["chainId"]): Promise<any>;
|
|
19
19
|
getChainById(chainId: Chain["chainId"]): Chain;
|
|
20
|
-
|
|
20
|
+
getWalletOfType<T>(WalletClass: new (...args: any[]) => T): T | undefined;
|
|
21
21
|
}
|
package/store/stateful-wallet.js
CHANGED
|
@@ -145,24 +145,21 @@ class StatefulWallet extends core_1.BaseWallet {
|
|
|
145
145
|
getChainById(chainId) {
|
|
146
146
|
return this.originalWallet.getChainById(chainId);
|
|
147
147
|
}
|
|
148
|
-
|
|
148
|
+
getWalletOfType(WalletClass) {
|
|
149
149
|
if (this.originalWallet instanceof WalletClass) {
|
|
150
|
-
return
|
|
150
|
+
return this.originalWallet;
|
|
151
151
|
}
|
|
152
|
-
if (this.originalWallet instanceof core_1.
|
|
153
|
-
return callback(this.originalWallet);
|
|
154
|
-
}
|
|
155
|
-
if (this.originalWallet instanceof core_1.ExtensionWallet) {
|
|
152
|
+
if (this.originalWallet instanceof core_1.MultiChainWallet) {
|
|
156
153
|
if (WalletClass === core_1.CosmosWallet) {
|
|
157
154
|
const cosmosWallet = this.originalWallet.getWalletByChainType('cosmos');
|
|
158
155
|
if (cosmosWallet) {
|
|
159
|
-
return
|
|
156
|
+
return cosmosWallet;
|
|
160
157
|
}
|
|
161
158
|
}
|
|
162
159
|
if (WalletClass === core_1.EthereumWallet) {
|
|
163
160
|
const ethereumWallet = this.originalWallet.getWalletByChainType('eip155');
|
|
164
161
|
if (ethereumWallet) {
|
|
165
|
-
return
|
|
162
|
+
return ethereumWallet;
|
|
166
163
|
}
|
|
167
164
|
}
|
|
168
165
|
}
|