@interchain-kit/react 0.0.1-beta.5 → 0.0.1-beta.50

package/README.md

@@ -1,22 +1,175 @@
-# react
-
 <p align="center">
   <img src="https://user-images.githubusercontent.com/545047/188804067-28e67e5e-0214-4449-ab04-2e0c564a6885.svg" width="80"><br />
-    interchain-kit wallet connector react package
+    @interchain-kit/react
 </p>
 
-## install
-
+## Install
+Using npm:
+```sh
+npm install @interchain-kit/react
+```
+Using yarn:
 ```sh
-npm install react
+yarn add @interchain-kit/react
+```
+
+## Usage
+### Setup
+#### import chain registry info that you need
+```js
+import { ChainProvider, useChain } from "@interchain-kit/react";
+import { keplrWallet } from "@interchain-kit/keplr-extension";
+import { ThemeProvider } from "@interchain-ui/react";
+import "@interchain-ui/react/styles";
+
+import { chain as junoChain, assetList as junoAssetList } from "@chain-registry/v2/mainnet/juno";
+import { chain as osmosisChain,assetList as osmosisAssetList } from "@chain-registry/v2/mainnet/osmosis";
+import { chain as cosmoshubChain, assetList as cosmoshubAssetList } from "@chain-registry/v2/mainnet/cosmoshub";
+
+const Show = () => {
+  const {address} = useChain('osmosis');
+  // will show cosmoshub address from what you selected wallet in modal
+  return <div>{address}</div>;
+};
+
+function App() {
+  return (
+    <ThemeProvider>
+      <ChainProvider
+        chains={[osmosisChain, junoChain, cosmoshubChain]}
+        assetLists={[osmosisAssetList, junoAssetList, cosmoshubAssetList]}
+        wallets={[keplrWallet]}
+        signerOptions={{}}
+        endpointOptions={{}}
+      >
+        <Show />
+      </ChainProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;
+```
+
+#### or import all chain registry
+```js
+import { ChainProvider, useChain } from "@interchain-kit/react";
+import { keplrWallet } from "@interchain-kit/keplr-extension";
+import { ThemeProvider } from "@interchain-ui/react";
+import "@interchain-ui/react/styles";
+import { chains, assetLists } from '@chain-registry/v2/mainnet'
+ 
+
+const Show = () => {
+  const {address} = useChain('osmosis');
+  // will show cosmoshub address from what you selected wallet in modal
+  return <div>{address}</div>;
+};
+
+function App() {
+  return (
+    <ThemeProvider>
+      <ChainProvider
+        chains={chains}
+        assetLists={assetLists}
+        wallets={[keplrWallet]}
+        signerOptions={{}}
+        endpointOptions={{}}
+      >
+        <Show />
+      </ChainProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;
+```
+
+### useChain
+```js
+
+const chainName = 'cosmoshub'
+const { chain, assetList, address, wallet, queryClient, signingClient } = useChain(chainName)
+
+console.log(wallet) //keprl extension wallet info
+console.log(chain) // chain info for cosmoshub
+console.log(assetList) // assets info for cosmoshub
+console.log(address) // address for cosmoshub in keplr-extension wallet
+
+//query
+const { balance } = await queryClient.balance({
+  address,
+  denom: 'uosmo'
+})
+console.log(balance)
+// { amount: 23423, denom: 'uosmos' }
+
+```
+
+### useChainWallet
+```js
+import { chain as junoChain, assetList as junoAssetList } from "@chain-registry/v2/mainnet/juno";
+import { chain as stargazeChain,assetList as stargazeAssetList } from "@chain-registry/v2/mainnet/stargaze";
+import { keplrWallet } from "@interchain-kit/keplr-extension";
+import { leapWallet } from "@interchain-kit/leap-extension";
+
+const Show = () => {
+  const juno = useChainWallet('juno', 'keplr-extension')
+  const stargaze = useChainWallet('stargaze', 'leap-extension')
+  console.log(juno.address) // juno1xxxxxxx in keplr extension wallet
+  console.log(stargaze.addresss) // stargaze1xxxxxx in leap extension wallet
+};
+
+const chainNames 
+
+function App() {
+  return (
+    <ThemeProvider>
+      <ChainProvider
+        chains={[junoChain, stargazeChain]}
+        assetLists={[junoAssetList, stargazeAssetList]}
+        wallets={[keplrWallet, leapWallet]}
+        signerOptions={{}}
+        endpointOptions={{}}
+      >
+        <Show />
+      </ChainProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;
+```
+
+### useCurrentWallet
+```js
+const wallet = useCurrentWallet()
+
+console.log(wallet) // current connected wallet
+
+```
+
+### useAccount
+```js
+const account = useAccount('cosmoshub', 'keplr-extension')
+
+console.log(account.address) // cosmoshub address in keplr-extension wallet
+
+```
+
+### useOfflineSigner
+```js
+const offlineSigner = useOfflineSigner('cosmoshub', 'keplr-extension')
+
+console.log(offlineSigner) // cosmoshub offlineSigner in keplr-extension wallet 
+```
+
+### useChains
+
+```js
+WIP
 ```
-## Table of contents
 
-- [react](#react)
-  - [Install](#install)
-  - [Table of contents](#table-of-contents)
-- [Developing](#developing)
-- [Credits](#credits)
 
 ## Developing
 

package/esm/hooks/index.js

@@ -1,7 +1,9 @@
 export * from './useWalletManager';
-export * from './useActiveWallet';
+export * from './useCurrentWallet';
 export * from './useAccount';
 export * from './useChain';
 export * from './useConnect';
 export * from './useChainWallet';
 export * from './useConfig';
+export * from './useOfflineSigner';
+export * from './useRpcEndpoint';

package/esm/hooks/useAccount.js

@@ -1,25 +1,26 @@
-import { useEffect, useState } from "react";
+import { WalletState } from "@interchain-kit/core";
 import { useWalletManager } from './useWalletManager';
+import { useEffect } from "react";
 export const useAccount = (chainName, walletName) => {
     const walletManager = useWalletManager();
-    const wallet = walletManager.wallets.find(w => w.option.name === walletName);
-    const [account, setAccount] = useState(null);
-    const chain = walletManager.chains.find(c => c.chainName === chainName);
-    const getAccount = async () => {
-        const account = await wallet.getAccount(chain.chainId);
-        setAccount(account);
-    };
-    useEffect(() => {
-        if (wallet) {
-            wallet.events.on('keystoreChange', getAccount);
-        }
-    }, [wallet]);
+    const chainAccount = walletManager.getWalletRepositoryByName(walletName)?.getChainAccountByName(chainName);
     useEffect(() => {
-        if (!wallet) {
-            setAccount(null);
-            return;
+        if (chainAccount?.walletState === WalletState.Connected && chainName && walletName) {
+            chainAccount.getAccount();
         }
-        getAccount();
-    }, [wallet, chainName, wallet?.walletState]);
-    return account;
+    }, [chainName, walletName, chainAccount?.walletState]);
+    if (chainAccount?.walletState === WalletState.Connected && chainName && walletName) {
+        return {
+            account: chainAccount?.account,
+            isLoading: chainAccount.getAccountState().loading,
+            error: chainAccount.getAccountState().error,
+            getAccount: () => chainAccount?.getAccount()
+        };
+    }
+    return {
+        account: undefined,
+        isLoading: false,
+        error: null,
+        getAccount: () => chainAccount?.getAccount()
+    };
 };

package/esm/hooks/useChain.js

@@ -1,39 +1,78 @@
 import { useWalletManager } from "./useWalletManager";
 import { useAccount } from "./useAccount";
-import { useActiveWallet } from './useActiveWallet';
 import { useInterchainClient } from './useInterchainClient';
 import { useWalletModal } from "../modal";
+import { useRpcEndpoint } from "./useRpcEndpoint";
+import { WalletState } from "@interchain-kit/core";
+import { useCurrentChainWallet } from "./useCurrentChainWallet";
 export const useChain = (chainName) => {
     const walletManager = useWalletManager();
-    const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
-    const assetList = walletManager.assetLists.find((a) => a.chainName === chainName);
-    const activeWallet = useActiveWallet();
-    const account = useAccount(chainName, activeWallet.option.name);
-    const interchainClient = useInterchainClient(chainName, activeWallet.option.name);
+    const chainAccount = useCurrentChainWallet();
+    const chain = walletManager.getChainByName(chainName);
+    walletManager.currentChainName = chainName;
+    const walletName = chainAccount?.info?.name;
+    const rpcEndpointHook = useRpcEndpoint(chainName, walletName);
+    const accountHook = useAccount(chainName, walletName);
+    const signingClientHook = useInterchainClient(chainName, walletName);
     const { open, close } = useWalletModal();
-    const clientFactory = walletManager.createClientFactory(activeWallet, chainName);
     const cosmosKitUserChainReturnType = {
         connect: () => {
-            if (activeWallet) {
+            if (chainAccount?.walletState === WalletState.Connected) {
                 return;
             }
+            walletManager.currentChainName = chainName;
+            open();
+        },
+        disconnect: async () => {
+            walletManager.currentChainName = chainName;
+            await chainAccount?.disconnect();
+        },
+        openView: () => {
+            walletManager.currentChainName = chainName;
             open();
         },
-        openView: open,
         closeView: close,
-        getRpcEndpoint: () => walletManager.getRpcEndpoint(activeWallet, chainName),
-        status: activeWallet.walletState,
-        username: account?.username,
-        message: activeWallet.errorMessage,
-        getSigningCosmWasmClient: () => clientFactory.then((c) => c.getSigningCosmwasmClient()),
-        getSigningStargateClient: () => clientFactory.then((c) => c.getSigningStargateClient())
+        getRpcEndpoint: () => chainAccount.getRpcEndpoint(),
+        status: chainAccount?.walletState,
+        username: accountHook.account?.username,
+        message: chainAccount?.errorMessage
     };
+    if (chainAccount && chainAccount?.walletState === WalletState.Connected) {
+        return {
+            logoUrl: walletManager.getChainLogoUrl(chainName),
+            chain,
+            assetList: chainAccount?.assetList,
+            address: accountHook.account?.address,
+            wallet: chainAccount,
+            rpcEndpoint: rpcEndpointHook.rpcEndpoint,
+            ...cosmosKitUserChainReturnType, //for migration cosmos kit
+            signingClient: signingClientHook.signingClient,
+            getSigningClient: () => signingClientHook.getSigningClient(),
+            isRpcEndpointLoading: rpcEndpointHook.isLoading,
+            isAccountLoading: accountHook.isLoading,
+            isSigningClientLoading: signingClientHook.isLoading,
+            isLoading: rpcEndpointHook.isLoading || accountHook.isLoading || signingClientHook.isLoading,
+            getRpcEndpointError: rpcEndpointHook.error,
+            getSigningClientError: signingClientHook.error,
+            getAccountError: accountHook.error
+        };
+    }
     return {
-        chain: chainToShow,
-        assetList,
-        address: account?.address,
-        wallet: activeWallet,
+        logoUrl: walletManager.getChainLogoUrl(chainName),
+        chain,
+        assetList: chainAccount?.assetList,
+        address: accountHook.account?.address,
+        wallet: chainAccount,
+        rpcEndpoint: rpcEndpointHook.rpcEndpoint,
         ...cosmosKitUserChainReturnType, //for migration cosmos kit
-        ...interchainClient
+        signingClient: signingClientHook.signingClient,
+        getSigningClient: () => signingClientHook.getSigningClient(),
+        isRpcEndpointLoading: rpcEndpointHook.isLoading,
+        isAccountLoading: accountHook.isLoading,
+        isSigningClientLoading: signingClientHook.isLoading,
+        isLoading: rpcEndpointHook.isLoading || accountHook.isLoading || signingClientHook.isLoading,
+        getRpcEndpointError: rpcEndpointHook.error,
+        getSigningClientError: signingClientHook.error,
+        getAccountError: accountHook.error
     };
 };

package/esm/hooks/useChainWallet.js

@@ -1,18 +1,41 @@
 import { useWalletManager } from "./useWalletManager";
 import { useAccount } from "./useAccount";
 import { useInterchainClient } from "./useInterchainClient";
+import { useRpcEndpoint } from "./useRpcEndpoint";
+import { WalletState } from "@interchain-kit/core";
 export const useChainWallet = (chainName, walletName) => {
     const walletManager = useWalletManager();
-    const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
-    const assetList = walletManager.assetLists.find((a) => a.chainName === chainName);
-    const wallet = walletManager.wallets.find((w) => w.option.name === walletName);
-    const account = useAccount(chainName, walletName);
-    const interchainClient = useInterchainClient(chainName, walletName);
+    const walletRepository = walletManager.getWalletRepositoryByName(walletName);
+    const chainAccount = walletRepository.getChainAccountByName(chainName);
+    const rpcEndpointHook = useRpcEndpoint(chainName, walletName);
+    const accountHook = useAccount(chainName, walletName);
+    const signingClientHook = useInterchainClient(chainName, walletName);
     return {
-        chain: chainToShow,
-        assetList,
-        address: account?.address,
-        wallet,
-        ...interchainClient
+        connect: () => {
+            if (!chainAccount && chainAccount.walletState === WalletState.Connected) {
+                return;
+            }
+            chainAccount.connect();
+        },
+        disconnect: () => chainAccount.disconnect(),
+        getRpcEndpoint: () => chainAccount.getRpcEndpoint(),
+        status: chainAccount.walletState,
+        username: accountHook.account?.username,
+        message: chainAccount.errorMessage,
+        logoUrl: walletManager.getChainLogoUrl(chainName),
+        rpcEndpoint: rpcEndpointHook.rpcEndpoint,
+        chain: chainAccount.chain,
+        assetList: chainAccount.assetList,
+        address: accountHook.account?.address,
+        wallet: walletRepository,
+        signingClient: signingClientHook.signingClient,
+        getSigningClient: () => signingClientHook.getSigningClient(),
+        isRpcEndpointLoading: rpcEndpointHook.isLoading,
+        isAccountLoading: accountHook.isLoading,
+        isSigningClientLoading: signingClientHook.isLoading,
+        isLoading: rpcEndpointHook.isLoading || accountHook.isLoading || signingClientHook.isLoading,
+        getRpcEndpointError: rpcEndpointHook.error,
+        getSigningClientError: signingClientHook.error,
+        getAccountError: accountHook.error
     };
 };

package/esm/hooks/useCurrentChainWallet.js

@@ -0,0 +1,11 @@
+import { bindAllMethodsToContext } from "../utils/helpers";
+import { useWalletManager } from "./useWalletManager";
+export const useCurrentChainWallet = () => {
+    const walletManager = useWalletManager();
+    const { currentChainName, currentWalletName } = walletManager;
+    const chainWallet = walletManager.getWalletRepositoryByName(currentWalletName)?.getChainAccountByName(currentChainName);
+    if (chainWallet) {
+        return bindAllMethodsToContext(chainWallet);
+    }
+    return {};
+};

package/esm/hooks/useCurrentWallet.js

@@ -0,0 +1,18 @@
+import { useWalletManager } from "./useWalletManager";
+import { useWalletModal } from "../modal";
+import { bindAllMethodsToContext } from "../utils/helpers";
+export const useCurrentWallet = () => {
+    const walletManager = useWalletManager();
+    const { open } = useWalletModal();
+    // useEffect(() => {
+    //   if (!walletManager.currentWalletName && walletManager.state === WalletManagerState.Initialized) {
+    //     open()
+    //   }
+    // }, [walletManager.currentWalletName, walletManager.state])
+    const { currentWalletName, currentChainName, getWalletRepositoryByName } = walletManager;
+    const wallet = getWalletRepositoryByName(currentWalletName);
+    if (wallet) {
+        return bindAllMethodsToContext(wallet);
+    }
+    return {};
+};

package/esm/hooks/useInterchainClient.js

@@ -1,56 +1,20 @@
-import { useEffect, useState } from "react";
 import { useWalletManager } from './useWalletManager';
-import { useAccount } from './useAccount';
+import { WalletState } from '@interchain-kit/core';
 export const useInterchainClient = (chainName, walletName) => {
-    const [rpcEndpoint, setRpcEndpoint] = useState();
-    const [signingClient, setSigningClient] = useState(null);
-    const [queryClient, setQueryClient] = useState(null);
-    const [signingStargateClient, setSigningStargateClient] = useState(null);
-    const [signingCosmWasmClient, setSigningCosmWasmClient] = useState(null);
-    const [error, setError] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
     const walletManager = useWalletManager();
-    const account = useAccount(chainName, walletName);
-    const initialize = async () => {
-        const wallet = walletManager.wallets.find((w) => w.option.name === walletName);
-        const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
-        if (!wallet) {
-            throw new Error('Wallet not found');
-        }
-        if (!chainToShow) {
-            throw new Error('Chain not found');
-        }
-        try {
-            setIsLoading(true);
-            const rpcEndpoint = await walletManager.getRpcEndpoint(wallet, chainName);
-            setRpcEndpoint(rpcEndpoint);
-            const clientFactory = await walletManager.createClientFactory(wallet, chainName);
-            const queryClient = await clientFactory.getClient();
-            setQueryClient(queryClient);
-            const signingClient = await clientFactory.getSigningClient();
-            setSigningClient(signingClient);
-            const signingStargateClient = await clientFactory.getSigningStargateClient(chainToShow.bech32Prefix);
-            setSigningStargateClient(signingStargateClient);
-            const signingCosmwasmClient = await clientFactory.getSigningCosmwasmClient();
-            setSigningCosmWasmClient(signingCosmwasmClient);
-        }
-        catch (error) {
-            setError(error);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    useEffect(() => {
-        initialize();
-    }, [chainName, walletName, account]);
+    const chainAccount = walletManager.getWalletRepositoryByName(walletName)?.getChainAccountByName(chainName);
+    if (chainAccount && chainAccount.walletState === WalletState.Connected) {
+        return {
+            signingClient: chainAccount?.signingClient,
+            isLoading: chainAccount?.getSigningClientState().loading,
+            error: chainAccount?.getSigningClientState().error,
+            getSigningClient: () => chainAccount?.getSigningClient()
+        };
+    }
     return {
-        rpcEndpoint,
-        signingClient,
-        queryClient,
-        signingStargateClient,
-        signingCosmWasmClient,
-        error,
-        isLoading
+        signingClient: undefined,
+        isLoading: false,
+        error: undefined,
+        getSigningClient: () => chainAccount?.getSigningClient()
     };
 };

package/esm/hooks/useOfflineSigner.js

@@ -1,8 +1,20 @@
 import { useWalletManager } from "./useWalletManager";
+import { WalletState } from "@interchain-kit/core";
 export const useOfflineSigner = (chainName, walletName) => {
     const walletManager = useWalletManager();
-    const wallet = walletManager.wallets.find((w) => w.option.name === walletName);
+    const chainAccount = walletManager.getWalletRepositoryByName(walletName)?.getChainAccountByName(chainName);
+    if (chainAccount && chainAccount.walletState === WalletState.Connected) {
+        return {
+            offlineSigner: chainAccount?.offlineSigner,
+            isLoading: chainAccount?.getOfflineSignerState().loading,
+            error: chainAccount?.getOfflineSignerState().error,
+            getOfflineSigner: () => chainAccount?.getOfflineSigner()
+        };
+    }
     return {
-        offlineSigner: walletManager.getOfflineSigner(wallet, chainName),
+        offlineSigner: undefined,
+        isLoading: false,
+        error: undefined,
+        getOfflineSigner: () => chainAccount?.getOfflineSigner()
     };
 };

package/esm/hooks/useRpcEndpoint.js

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { useWalletManager } from "./useWalletManager";
+import { WalletState } from "@interchain-kit/core";
+export const useRpcEndpoint = (chainName, walletName) => {
+    const walletManager = useWalletManager();
+    const chainAccount = walletManager.getWalletRepositoryByName(walletName)?.getChainAccountByName(chainName);
+    useEffect(() => {
+        if (chainAccount?.walletState === WalletState.Connected) {
+            chainAccount.getRpcEndpoint();
+        }
+    }, [chainName, walletName, chainAccount?.walletState]);
+    if (chainAccount && chainAccount.walletState === WalletState.Connected) {
+        return {
+            rpcEndpoint: chainAccount?.rpcEndpoint,
+            isLoading: chainAccount?.getRpcEndpointState().loading,
+            error: chainAccount?.getRpcEndpointState().error,
+            getRpcEndpoint: () => chainAccount?.getRpcEndpoint()
+        };
+    }
+    return {
+        rpcEndpoint: undefined,
+        isLoading: false,
+        error: undefined,
+        getRpcEndpoint: () => chainAccount?.getRpcEndpoint()
+    };
+};

package/esm/hooks/useWalletManager.js

@@ -1,5 +1,6 @@
-import { useInterChainWalletContext } from "../provider";
+import { useInterchainWalletContext } from "../provider";
+import { bindAllMethodsToContext } from '../utils/helpers';
 export const useWalletManager = () => {
-    const { walletManager } = useInterChainWalletContext();
-    return walletManager;
+    const { walletManager } = useInterchainWalletContext();
+    return bindAllMethodsToContext(walletManager);
 };

package/esm/modal/modal.js

@@ -1,16 +1,75 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConnectedContent, ConnectedHeader, ConnectingContent, ConnectingHeader, NotExistContent, NotExistHeader, QRCodeContent, QRCodeHeader, RejectContent, RejectHeader, WalletListContent, WalletListHeader, } from "./views";
+import { useWalletModal } from "./provider";
 import { useWalletManager } from "../hooks";
-const style = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%,-50%)',
-    width: '500px',
-    backgroundColor: 'white',
-};
+import { useEffect, useMemo, useState } from "react";
+import { WalletState, } from "@interchain-kit/core";
+import { ConnectModal } from "@interchain-ui/react";
+import { useCurrentChainWallet } from "../hooks/useCurrentChainWallet";
 export const WalletModal = () => {
+    const { modalIsOpen, open, close } = useWalletModal();
     const walletManager = useWalletManager();
-    return (_jsx("ul", { style: style, children: walletManager.wallets.map(wallet => {
-            return (_jsxs("li", { children: [_jsx("span", { children: wallet.option.prettyName }), _jsx("button", { onClick: () => walletManager.connect(wallet.option.name), children: "connect" })] }));
-        }) }));
+    const handleSelectWallet = async (wallet) => {
+        walletManager.currentWalletName = wallet.info.name;
+        const currentWallet = walletManager
+            .getWalletRepositoryByName(wallet.info.name)
+            .getChainAccountByName(walletManager.currentChainName);
+        setModalView({
+            header: _jsx(ConnectingHeader, { wallet: wallet, onBack: gotoWalletList }),
+            content: _jsx(ConnectingContent, { wallet: wallet }),
+        });
+        if (currentWallet.wallet?.info.mode === "extension" &&
+            !currentWallet.wallet.isExtensionInstalled) {
+            setModalView({
+                header: (_jsx(NotExistHeader, { wallet: currentWallet, onBack: gotoWalletList })),
+                content: _jsx(NotExistContent, { wallet: currentWallet }),
+            });
+            return;
+        }
+        try {
+            if (currentWallet.wallet?.info.mode === "wallet-connect") {
+                currentWallet.wallet.setOnPairingUriCreatedCallback(() => {
+                    setModalView({
+                        header: _jsx(QRCodeHeader, { onBack: gotoWalletList }),
+                        content: _jsx(QRCodeContent, {}),
+                    });
+                });
+                currentWallet.wallet.setPairingToConnect(wallet.pairing);
+            }
+            await currentWallet.connect();
+            await currentWallet.getAccount();
+            setModalView({
+                header: _jsx(ConnectedHeader, { onBack: gotoWalletList }),
+                content: _jsx(ConnectedContent, {}),
+            });
+        }
+        catch (error) {
+            console.log(error);
+            setModalView({
+                header: _jsx(RejectHeader, { wallet: wallet, onBack: gotoWalletList }),
+                content: _jsx(RejectContent, { wallet: wallet }),
+            });
+        }
+    };
+    const defaultModalView = useMemo(() => {
+        return {
+            header: _jsx(WalletListHeader, {}),
+            content: _jsx(WalletListContent, { onSelectWallet: handleSelectWallet }),
+        };
+    }, []);
+    const [modalView, setModalView] = useState(defaultModalView);
+    const gotoWalletList = () => setModalView(defaultModalView);
+    const currentWallet = useCurrentChainWallet();
+    useEffect(() => {
+        if (modalIsOpen && currentWallet?.walletState === WalletState.Connected) {
+            setModalView({
+                header: _jsx(ConnectedHeader, { onBack: gotoWalletList }),
+                content: _jsx(ConnectedContent, {}),
+            });
+        }
+        else {
+            setModalView(defaultModalView);
+        }
+    }, [modalIsOpen]);
+    return (_jsx(ConnectModal, { isOpen: modalIsOpen, header: modalView.header, onOpen: open, onClose: close, children: modalView.content }));
 };

package/esm/modal/provider.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState } from "react";
-import { createPortal } from "react-dom";
 import { WalletModal } from "./modal";
 const WalletModalContext = createContext(null);
 export const WalletModalProvider = ({ children }) => {
     const [modalIsOpen, setModalIsOpen] = useState(false);
     const open = () => setModalIsOpen(true);
     const close = () => setModalIsOpen(false);
-    return (_jsxs(WalletModalContext.Provider, { value: { modalIsOpen, open, close }, children: [children, modalIsOpen && createPortal(_jsx(WalletModal, {}), document.body)] }));
+    return (_jsxs(WalletModalContext.Provider, { value: { modalIsOpen, open, close }, children: [children, _jsx(WalletModal, {})] }));
 };
 export const useWalletModal = () => {
     const context = useContext(WalletModalContext);