Merge pull request #214 from cosmology-tech/fix/connect-wallet

fix: add chains to wallet before connect
cosmology-tech · Oct 11, 2024 · 143259d · 143259d
2 parents 91733f5 + d2b1a47
commit 143259d
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 67 deletions.
diff --git a/examples/chain-template/components/common/Sidebar/SidebarContent.tsx b/examples/chain-template/components/common/Sidebar/SidebarContent.tsx
@@ -1,47 +1,25 @@
 import Image from 'next/image';
-import { useChain, useWalletClient } from '@cosmos-kit/react';
 import { Box, useColorModeValue, Text } from '@interchain-ui/react';
 import { MdOutlineAccountBalanceWallet } from 'react-icons/md';
 import { FiLogOut } from 'react-icons/fi';
-import { Keplr } from '@keplr-wallet/types';
 
 import { NavItems } from './NavItems';
 import { Button } from '@/components';
 import { useChainStore } from '@/contexts';
-import { makeKeplrChainInfo, shortenAddress } from '@/utils';
-import { useCopyToClipboard } from '@/hooks';
+import { shortenAddress } from '@/utils';
+import { useCopyToClipboard, useConnectChain } from '@/hooks';
 
 export const SidebarContent = ({ onClose }: { onClose: () => void }) => {
   const { selectedChain } = useChainStore();
   const { isCopied, copyToClipboard } = useCopyToClipboard();
-
-  const {
-    connect,
-    disconnect,
-    address,
-    isWalletConnected,
-    wallet,
-    chain,
-    assets,
-  } = useChain(selectedChain);
-  const { client: keplrWallet } = useWalletClient('keplr-extension');
+  const { connect, disconnect, address, isWalletConnected, wallet } =
+    useConnectChain(selectedChain);
 
   const poweredByLogoSrc = useColorModeValue(
     '/logos/cosmology.svg',
     '/logos/cosmology-dark.svg'
   );
 
-  const handleConnect = async () => {
-    const chainInfo = makeKeplrChainInfo(chain, assets!.assets[0]);
-    try {
-      // @ts-ignore
-      await (keplrWallet?.client as Keplr)?.experimentalSuggestChain(chainInfo);
-      connect();
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
   return (
     <Box
       flex="1"
@@ -97,7 +75,7 @@ export const SidebarContent = ({ onClose }: { onClose: () => void }) => {
           <Button
             variant="outline"
             leftIcon={<MdOutlineAccountBalanceWallet size="20px" />}
-            onClick={handleConnect}
+            onClick={connect}
           >
             Connect Wallet
           </Button>

diff --git a/examples/chain-template/components/contract/ExecuteTab.tsx b/examples/chain-template/components/contract/ExecuteTab.tsx
@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
 import { Box, Text } from '@interchain-ui/react';
-import { useChain } from '@cosmos-kit/react';
 import { Coin } from '@cosmjs/amino';
 
 import { ContractAddressField } from './ContractAddressField';
@@ -9,7 +8,11 @@ import { JsonInput } from './JsonInput';
 import { AttachFundsRadio } from './AttachFundsRadio';
 import { Button } from '../common';
 import { useChainStore } from '@/contexts';
-import { useDetectBreakpoints, useExecuteContractTx } from '@/hooks';
+import {
+  useConnectChain,
+  useDetectBreakpoints,
+  useExecuteContractTx,
+} from '@/hooks';
 import { validateJson } from '@/utils';
 
 const INPUT_LINES = 12;
@@ -32,7 +35,7 @@ export const ExecuteTab = ({
   const [isAssetListJsonValid, setIsAssetListJsonValid] = useState(true);
 
   const { selectedChain } = useChainStore();
-  const { address, connect } = useChain(selectedChain);
+  const { address, connect } = useConnectChain(selectedChain);
   const { executeTx } = useExecuteContractTx(selectedChain);
 
   const handleExecuteMsg = () => {

diff --git a/examples/chain-template/hooks/common/index.ts b/examples/chain-template/hooks/common/index.ts
@@ -6,3 +6,4 @@ export * from './useOutsideClick';
 export * from './useMediaQuery';
 export * from './useDetectBreakpoints';
 export * from './useStarshipChains';
+export * from './useConnectChain';
diff --git a/examples/chain-template/hooks/common/useConnectChain.ts b/examples/chain-template/hooks/common/useConnectChain.ts
@@ -0,0 +1,20 @@
+import { makeKeplrChainInfo } from '@/utils';
+import { useChain, useWalletClient } from '@cosmos-kit/react';
+
+export const useConnectChain = (chainName: string) => {
+  const { connect, chain, assets, ...rest } = useChain(chainName);
+  const { client: keplrWallet } = useWalletClient('keplr-extension');
+
+  const addAndConnectChain = async () => {
+    const chainInfo = makeKeplrChainInfo(chain, assets!.assets[0]);
+    try {
+      // @ts-ignore
+      await keplrWallet?.client?.experimentalSuggestChain(chainInfo);
+      connect();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return { connect: addAndConnectChain, chain, assets, ...rest };
+};
diff --git a/examples/chain-template/pages/index.tsx b/examples/chain-template/pages/index.tsx
@@ -1,15 +1,15 @@
 import Image from 'next/image';
 import { Box, Text, useColorModeValue } from '@interchain-ui/react';
-import { useChain } from '@cosmos-kit/react';
 
 import { Button } from '@/components';
 import { useChainStore } from '@/contexts';
-import { useDetectBreakpoints } from '@/hooks';
+import { useConnectChain, useDetectBreakpoints } from '@/hooks';
 
 export default function Home() {
   const { isMobile } = useDetectBreakpoints();
   const { selectedChain } = useChainStore();
-  const { connect, isWalletConnected, openView } = useChain(selectedChain);
+  const { connect, isWalletConnected, openView } =
+    useConnectChain(selectedChain);
 
   const chainsImageSrc = useColorModeValue(
     '/images/chains.png',

diff --git a/examples/spawn/components/common/Sidebar/SidebarContent.tsx b/examples/spawn/components/common/Sidebar/SidebarContent.tsx
@@ -1,47 +1,25 @@
 import Image from 'next/image';
-import { useChain, useWalletClient } from '@cosmos-kit/react';
 import { Box, useColorModeValue, Text } from '@interchain-ui/react';
 import { MdOutlineAccountBalanceWallet } from 'react-icons/md';
 import { FiLogOut } from 'react-icons/fi';
-import { Keplr } from '@keplr-wallet/types';
 
 import { NavItems } from './NavItems';
 import { Button } from '@/components';
 import { useChainStore } from '@/contexts';
-import { makeKeplrChainInfo, shortenAddress } from '@/utils';
-import { useCopyToClipboard } from '@/hooks';
+import { shortenAddress } from '@/utils';
+import { useCopyToClipboard, useConnectChain } from '@/hooks';
 
 export const SidebarContent = ({ onClose }: { onClose: () => void }) => {
   const { selectedChain } = useChainStore();
   const { isCopied, copyToClipboard } = useCopyToClipboard();
-
-  const {
-    connect,
-    disconnect,
-    address,
-    isWalletConnected,
-    wallet,
-    chain,
-    assets,
-  } = useChain(selectedChain);
-  const { client: keplrWallet } = useWalletClient('keplr-extension');
+  const { connect, disconnect, address, isWalletConnected, wallet } =
+    useConnectChain(selectedChain);
 
   const poweredByLogoSrc = useColorModeValue(
     '/logos/cosmology.svg',
     '/logos/cosmology-dark.svg'
   );
 
-  const handleConnect = async () => {
-    const chainInfo = makeKeplrChainInfo(chain, assets!.assets[0]);
-    try {
-      // @ts-ignore
-      await (keplrWallet?.client as Keplr)?.experimentalSuggestChain(chainInfo);
-      connect();
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
   return (
     <Box
       flex="1"
@@ -97,7 +75,7 @@ export const SidebarContent = ({ onClose }: { onClose: () => void }) => {
           <Button
             variant="outline"
             leftIcon={<MdOutlineAccountBalanceWallet size="20px" />}
-            onClick={handleConnect}
+            onClick={connect}
           >
             Connect Wallet
           </Button>

diff --git a/examples/spawn/components/contract/ExecuteTab.tsx b/examples/spawn/components/contract/ExecuteTab.tsx
@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
 import { Box, Text } from '@interchain-ui/react';
-import { useChain } from '@cosmos-kit/react';
 import { Coin } from '@cosmjs/amino';
 
 import { ContractAddressField } from './ContractAddressField';
@@ -9,7 +8,11 @@ import { JsonInput } from './JsonInput';
 import { AttachFundsRadio } from './AttachFundsRadio';
 import { Button } from '../common';
 import { useChainStore } from '@/contexts';
-import { useDetectBreakpoints, useExecuteContractTx } from '@/hooks';
+import {
+  useConnectChain,
+  useDetectBreakpoints,
+  useExecuteContractTx,
+} from '@/hooks';
 import { validateJson } from '@/utils';
 
 const INPUT_LINES = 12;
@@ -32,7 +35,7 @@ export const ExecuteTab = ({
   const [isAssetListJsonValid, setIsAssetListJsonValid] = useState(true);
 
   const { selectedChain } = useChainStore();
-  const { address, connect } = useChain(selectedChain);
+  const { address, connect } = useConnectChain(selectedChain);
   const { executeTx } = useExecuteContractTx(selectedChain);
 
   const handleExecuteMsg = () => {

diff --git a/examples/spawn/config/chains.ts b/examples/spawn/config/chains.ts
@@ -1,7 +1,13 @@
 import { chains } from 'chain-registry';
 import osmosis from 'chain-registry/mainnet/osmosis/chain';
 
-const chainNames = ['osmosistestnet', 'juno', 'stargaze', 'osmosis', 'cosmoshub'];
+const chainNames = [
+  'osmosistestnet',
+  'juno',
+  'stargaze',
+  'osmosis',
+  'cosmoshub',
+];
 
 export const chainOptions = chainNames.map(
   (chainName) => chains.find((chain) => chain.chain_name === chainName)!

diff --git a/examples/spawn/hooks/common/index.ts b/examples/spawn/hooks/common/index.ts
@@ -6,3 +6,4 @@ export * from './useOutsideClick';
 export * from './useMediaQuery';
 export * from './useDetectBreakpoints';
 export * from './useSpawnChains';
+export * from './useConnectChain';
diff --git a/examples/spawn/hooks/common/useConnectChain.ts b/examples/spawn/hooks/common/useConnectChain.ts
@@ -0,0 +1,20 @@
+import { makeKeplrChainInfo } from '@/utils';
+import { useChain, useWalletClient } from '@cosmos-kit/react';
+
+export const useConnectChain = (chainName: string) => {
+  const { connect, chain, assets, ...rest } = useChain(chainName);
+  const { client: keplrWallet } = useWalletClient('keplr-extension');
+
+  const addAndConnectChain = async () => {
+    const chainInfo = makeKeplrChainInfo(chain, assets!.assets[0]);
+    try {
+      // @ts-ignore
+      await keplrWallet?.client?.experimentalSuggestChain(chainInfo);
+      connect();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return { connect: addAndConnectChain, chain, assets, ...rest };
+};
diff --git a/examples/spawn/pages/index.tsx b/examples/spawn/pages/index.tsx
@@ -1,15 +1,15 @@
 import Image from 'next/image';
 import { Box, Text, useColorModeValue } from '@interchain-ui/react';
-import { useChain } from '@cosmos-kit/react';
 
 import { Button } from '@/components';
 import { useChainStore } from '@/contexts';
-import { useDetectBreakpoints } from '@/hooks';
+import { useConnectChain, useDetectBreakpoints } from '@/hooks';
 
 export default function Home() {
   const { isMobile } = useDetectBreakpoints();
   const { selectedChain } = useChainStore();
-  const { connect, isWalletConnected, openView } = useChain(selectedChain);
+  const { connect, isWalletConnected, openView } =
+    useConnectChain(selectedChain);
 
   const chainsImageSrc = useColorModeValue(
     '/images/chains.png',