Develop

examples/contracts/components/wallet.tsx

@@ -9,7 +9,7 @@ import {
   useColorModeValue,
   Text
 } from '@chakra-ui/react';
-import { MouseEventHandler, useEffect, useMemo } from 'react';
+import { MouseEventHandler, useMemo } from 'react';
 import { FiAlertTriangle } from 'react-icons/fi';
 import {
   Astronaut,
@@ -28,26 +28,28 @@ import {
   ChainCard
 } from '../components';
 import { getWalletPrettyName } from '@cosmos-kit/config';
-import { ChainName } from '@cosmos-kit/core';
 import { assets as chainAssets } from 'chain-registry';
+import { ChainRecord } from '@cosmos-kit/core';
 
-export const WalletSection = ({ chainName }: { chainName?: ChainName }) => {
+export const WalletSection = () => {
   const walletManager = useWallet();
   const {
     connect,
     openView,
-    setCurrentChain,
     walletStatus,
     username,
     address,
     message,
+    currentChainName,
     currentWalletName,
     chains
   } = walletManager;
 
-  const chainOptions = useMemo(
-    () =>
-      chains.map((chainRecord) => {
+  const chainName = currentChainName;
+
+  const chain = useMemo(
+    () => {
+      const getChain = (chainRecord: ChainRecord) => {
         const assets = chainAssets.find(
           (_chain) => _chain.chain_name === chainRecord.name
         )?.assets;
@@ -60,23 +62,16 @@ export const WalletSection = ({ chainName }: { chainName?: ChainName }) => {
             : undefined,
           disabled: false
         };
-      }),
+      }
+      return getChain(chains[0]);
+    },
     [chains]
   );
 
-  const chain = chainOptions.find((c) => c.chainName === chainName);
-
-  useEffect(() => {
-    setCurrentChain(chainName);
-  }, [chainName, setCurrentChain]);
-
   // Events
   const onClickConnect: MouseEventHandler = async (e) => {
     e.preventDefault();
-    openView();
-    if (currentWalletName) {
-      await connect();
-    }
+    await connect();
   };
 
   const onClickOpenView: MouseEventHandler = (e) => {

examples/contracts/config/defaults.ts

@@ -0,0 +1,52 @@
+import { StdFee } from '@cosmjs/amino';
+import { assets } from 'chain-registry';
+import { AssetList, Asset } from '@chain-registry/types';
+
+export const chainName = 'osmosis';
+
+export const chainassets: AssetList = assets.find(
+    (chain) => chain.chain_name === chainName
+) as AssetList;
+
+export const baseAsset: Asset = chainassets.assets.find(
+    (asset) => asset.base === 'uosmo'
+) as Asset;
+
+export const sendTokens = (
+    getStargateClient: () => Promise<SigningStargateClient>,
+    setResp: () => any,
+    address: string
+) => {
+    return async () => {
+        const stargateClient = await getStargateClient();
+        if (!stargateClient || !address) {
+            console.error('stargateClient undefined or address undefined.');
+            return;
+        }
+
+        const { send } = cosmos.bank.v1beta1.MessageComposer.withTypeUrl;
+
+        const msg = send({
+            amount: [
+                {
+                    denom: baseAsset.base,
+                    amount: '1000'
+                }
+            ],
+            toAddress: address,
+            fromAddress: address
+        });
+
+        const fee: StdFee = {
+            amount: [
+                {
+                    denom: baseAsset.base,
+                    amount: '0'
+                }
+            ],
+            gas: '86364'
+        };
+        const response = await stargateClient.signAndBroadcast(address, [msg], fee);
+        setResp(JSON.stringify(response, null, 2));
+    };
+};

examples/contracts/config/index.ts

@@ -1,2 +1,3 @@
 export * from './theme';
 export * from './features';
+export * from './defaults';

examples/contracts/package.json

@@ -16,7 +16,7 @@
     "@chakra-ui/react": "^2.3.4",
     "@cosmjs/cosmwasm-stargate": "0.29.0",
     "@cosmjs/stargate": "0.29.0",
-    "@cosmos-kit/react": "^0.18.1",
+    "@cosmos-kit/react": "0.18.4",
     "@cosmos-kit/types": "^0.11.0",
     "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",

examples/contracts/pages/_app.tsx

@@ -2,7 +2,7 @@ import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import { WalletProvider } from '@cosmos-kit/react';
 import { ChakraProvider } from '@chakra-ui/react';
-import { defaultTheme } from '../config';
+import { chainName, defaultTheme } from '../config';
 import { wallets } from '@cosmos-kit/keplr';
 import { chains, assets } from 'chain-registry';
 import { getSigningCosmosClientOptions } from '../codegen';
@@ -38,8 +38,8 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
   return (
     <ChakraProvider theme={defaultTheme}>
       <WalletProvider
-        chains={chains}
-        assetLists={assets}
+        chains={chains.filter(chain => chain.chain_name === chainName)}
+        assetLists={assets.filter(asset => asset.chain_name === chainName)}
         wallets={wallets}
         signerOptions={signerOptions}
       >

examples/contracts/pages/index.tsx

@@ -1,76 +1,22 @@
 import { Container, Button } from '@chakra-ui/react';
 import { useWallet } from '@cosmos-kit/react';
-import { useEffect, useState } from 'react';
-import { StdFee } from '@cosmjs/amino';
-import { assets } from 'chain-registry';
-import { AssetList, Asset } from '@chain-registry/types';
+import { useState } from 'react';
 import { SigningStargateClient } from '@cosmjs/stargate';
 import { WalletStatus } from '@cosmos-kit/core';
 import BigNumber from 'bignumber.js';
 
 import { WalletSection } from '../components';
 import { cosmos } from '../codegen';
-
-const chainName = 'osmosis';
-const chainassets: AssetList = assets.find(
-  (chain) => chain.chain_name === chainName
-) as AssetList;
-const baseAsset: Asset = chainassets.assets.find(
-  (asset) => asset.base === 'uosmo'
-) as Asset;
-
-const sendTokens = (
-  getStargateClient: () => Promise<SigningStargateClient>,
-  setResp: () => any,
-  address: string
-) => {
-  return async () => {
-    const stargateClient = await getStargateClient();
-    if (!stargateClient || !address) {
-      console.error('stargateClient undefined or address undefined.');
-      return;
-    }
-
-    const { send } = cosmos.bank.v1beta1.MessageComposer.withTypeUrl;
-
-    const msg = send({
-      amount: [
-        {
-          denom: baseAsset.base,
-          amount: '1000'
-        }
-      ],
-      toAddress: address,
-      fromAddress: address
-    });
-
-    const fee: StdFee = {
-      amount: [
-        {
-          denom: baseAsset.base,
-          amount: '0'
-        }
-      ],
-      gas: '86364'
-    };
-    const response = await stargateClient.signAndBroadcast(address, [msg], fee);
-    setResp(JSON.stringify(response, null, 2));
-  };
-};
+import { baseAsset, chainassets, chainName, sendTokens } from '../config';
 
 export default function Home() {
   const {
     getStargateClient,
     address,
-    setCurrentChain,
     currentWallet,
     walletStatus
   } = useWallet();
 
-  useEffect(() => {
-    setCurrentChain(chainName);
-  }, [chainName]);
-
   const [balance, setBalance] = useState(new BigNumber(0));
   const [resp, setResp] = useState('');
   const getBalance = async () => {

examples/contracts/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "ES2020",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -15,6 +19,12 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

examples/juno/components/wallet.tsx

@@ -9,7 +9,7 @@ import {
   useColorModeValue,
   Text
 } from '@chakra-ui/react';
-import { MouseEventHandler, useEffect, useMemo } from 'react';
+import { MouseEventHandler, useMemo } from 'react';
 import { FiAlertTriangle } from 'react-icons/fi';
 import {
   Astronaut,
@@ -28,26 +28,28 @@ import {
   ChainCard
 } from '../components';
 import { getWalletPrettyName } from '@cosmos-kit/config';
-import { ChainName } from '@cosmos-kit/core';
 import { assets as chainAssets } from 'chain-registry';
+import { ChainRecord } from '@cosmos-kit/core';
 
-export const WalletSection = ({ chainName }: { chainName?: ChainName }) => {
+export const WalletSection = () => {
   const walletManager = useWallet();
   const {
     connect,
     openView,
-    setCurrentChain,
     walletStatus,
     username,
     address,
     message,
+    currentChainName,
     currentWalletName,
     chains
   } = walletManager;
 
-  const chainOptions = useMemo(
-    () =>
-      chains.map((chainRecord) => {
+  const chainName = currentChainName;
+
+  const chain = useMemo(
+    () => {
+      const getChain = (chainRecord: ChainRecord) => {
         const assets = chainAssets.find(
           (_chain) => _chain.chain_name === chainRecord.name
         )?.assets;
@@ -60,23 +62,16 @@ export const WalletSection = ({ chainName }: { chainName?: ChainName }) => {
             : undefined,
           disabled: false
         };
-      }),
+      }
+      return getChain(chains[0]);
+    },
     [chains]
   );
 
-  const chain = chainOptions.find((c) => c.chainName === chainName);
-
-  useEffect(() => {
-    setCurrentChain(chainName);
-  }, [chainName, setCurrentChain]);
-
   // Events
   const onClickConnect: MouseEventHandler = async (e) => {
     e.preventDefault();
-    openView();
-    if (currentWalletName) {
-      await connect();
-    }
+    await connect();
   };
 
   const onClickOpenView: MouseEventHandler = (e) => {

examples/juno/config/defaults.ts

@@ -0,0 +1,12 @@
+import { assets } from 'chain-registry';
+import { AssetList, Asset } from '@chain-registry/types';
+
+export const chainName = 'juno';
+
+export const chainassets: AssetList = assets.find(
+    (chain) => chain.chain_name === chainName
+) as AssetList;
+
+export const coin: Asset = chainassets.assets.find(
+    (asset) => asset.base === 'ujuno'
+) as Asset;

examples/juno/config/index.ts

@@ -1,2 +1,3 @@
 export * from './theme';
 export * from './features';
+export * from './defaults';

examples/juno/package.json

@@ -14,9 +14,9 @@
     "@chakra-ui/react": "2.3.4",
     "@cosmjs/cosmwasm-stargate": "0.29.0",
     "@cosmjs/stargate": "0.29.0",
-    "@cosmos-kit/core": "0.19.0",
-    "@cosmos-kit/keplr": "0.19.0",
-    "@cosmos-kit/react": "0.18.1",
+    "@cosmos-kit/core": "0.19.3",
+    "@cosmos-kit/keplr": "0.19.3",
+    "@cosmos-kit/react": "0.18.4",
     "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "@juno-network/assets": "0.11.1",

examples/juno/pages/_app.tsx

@@ -2,7 +2,7 @@ import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import { WalletProvider } from '@cosmos-kit/react';
 import { ChakraProvider } from '@chakra-ui/react';
-import { defaultTheme } from '../config';
+import { chainName, defaultTheme } from '../config';
 import { wallets } from '@cosmos-kit/keplr';
 import { assets, chains } from 'chain-registry';
 import { getSigningCosmosClientOptions } from 'juno-network';
@@ -29,8 +29,8 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
   return (
     <ChakraProvider theme={defaultTheme}>
       <WalletProvider
-        chains={chains}
-        assetLists={assets}
+        chains={chains.filter(chain => chain.chain_name === chainName)}
+        assetLists={assets.filter(asset => asset.chain_name === chainName)}
         wallets={wallets}
         signerOptions={signerOptions}
       >