diff --git a/examples/contracts/components/wallet.tsx b/examples/contracts/components/wallet.tsx index ecb7170b5..c1ada72ee 100644 --- a/examples/contracts/components/wallet.tsx +++ b/examples/contracts/components/wallet.tsx @@ -9,7 +9,7 @@ import { useColorModeValue, Text } from '@chakra-ui/react'; -import { MouseEventHandler, useMemo } from 'react'; +import { MouseEventHandler, useEffect } from 'react'; import { FiAlertTriangle } from 'react-icons/fi'; import { Astronaut, @@ -27,9 +27,8 @@ import { WalletConnectComponent, ChainCard } from '../components'; -import { getWalletPrettyName } from '@cosmos-kit/config'; -import { assets as chainAssets } from 'chain-registry'; -import { ChainRecord } from '@cosmos-kit/core'; +import { chainName } from '../config'; + export const WalletSection = () => { const walletManager = useWallet(); @@ -41,32 +40,22 @@ export const WalletSection = () => { address, message, currentChainName, - currentWalletName, - chains + currentWallet, + currentChainRecord, + getChainLogo, + setCurrentChain } = walletManager; - const chainName = currentChainName; + useEffect(() => { + setCurrentChain(chainName); + }, [setCurrentChain]); - const chain = useMemo( - () => { - const getChain = (chainRecord: ChainRecord) => { - const assets = chainAssets.find( - (_chain) => _chain.chain_name === chainRecord.name - )?.assets; - return { - chainName: chainRecord.name, - label: chainRecord.chain.pretty_name, - value: chainRecord.name, - icon: assets - ? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png - : undefined, - disabled: false - }; - } - return getChain(chains[0]); - }, - [chains] - ); + const chain = { + chainName: currentChainName, + label: currentChainRecord?.chain.pretty_name, + value: currentChainName, + icon: getChainLogo(currentChainName) + } // Events const onClickConnect: MouseEventHandler = async (e) => { @@ -104,17 +93,13 @@ export const WalletSection = () => { rejected={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } error={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } /> @@ -123,7 +108,7 @@ export const WalletSection = () => { const userInfo = ( } /> ); - const addressBtn = chainName && ( + const addressBtn = currentChainName && ( } @@ -140,10 +125,10 @@ export const WalletSection = () => { alignItems="center" justifyContent="center" > - {chainName && ( + {currentChainName && ( diff --git a/examples/contracts/package.json b/examples/contracts/package.json index 757401780..e1147d39b 100644 --- a/examples/contracts/package.json +++ b/examples/contracts/package.json @@ -16,7 +16,7 @@ "@chakra-ui/react": "^2.3.5", "@cosmjs/cosmwasm-stargate": "0.29.2", "@cosmjs/stargate": "0.29.2", - "@cosmos-kit/react": "0.18.4", + "@cosmos-kit/react": "0.18.6", "@cosmos-kit/types": "^0.11.0", "@emotion/react": "11.10.4", "@emotion/styled": "11.10.4", @@ -41,4 +41,4 @@ "eslint-config-next": "12.2.5", "typescript": "4.7.4" } -} +} \ No newline at end of file diff --git a/examples/contracts/pages/_app.tsx b/examples/contracts/pages/_app.tsx index daa2735e0..841948ba4 100644 --- a/examples/contracts/pages/_app.tsx +++ b/examples/contracts/pages/_app.tsx @@ -38,8 +38,8 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) { return ( chain.chain_name === chainName)} - assetLists={assets.filter(asset => asset.chain_name === chainName)} + chains={chains} + assetLists={assets} wallets={wallets} signerOptions={signerOptions} > diff --git a/examples/juno/components/wallet.tsx b/examples/juno/components/wallet.tsx index ecb7170b5..c1ada72ee 100644 --- a/examples/juno/components/wallet.tsx +++ b/examples/juno/components/wallet.tsx @@ -9,7 +9,7 @@ import { useColorModeValue, Text } from '@chakra-ui/react'; -import { MouseEventHandler, useMemo } from 'react'; +import { MouseEventHandler, useEffect } from 'react'; import { FiAlertTriangle } from 'react-icons/fi'; import { Astronaut, @@ -27,9 +27,8 @@ import { WalletConnectComponent, ChainCard } from '../components'; -import { getWalletPrettyName } from '@cosmos-kit/config'; -import { assets as chainAssets } from 'chain-registry'; -import { ChainRecord } from '@cosmos-kit/core'; +import { chainName } from '../config'; + export const WalletSection = () => { const walletManager = useWallet(); @@ -41,32 +40,22 @@ export const WalletSection = () => { address, message, currentChainName, - currentWalletName, - chains + currentWallet, + currentChainRecord, + getChainLogo, + setCurrentChain } = walletManager; - const chainName = currentChainName; + useEffect(() => { + setCurrentChain(chainName); + }, [setCurrentChain]); - const chain = useMemo( - () => { - const getChain = (chainRecord: ChainRecord) => { - const assets = chainAssets.find( - (_chain) => _chain.chain_name === chainRecord.name - )?.assets; - return { - chainName: chainRecord.name, - label: chainRecord.chain.pretty_name, - value: chainRecord.name, - icon: assets - ? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png - : undefined, - disabled: false - }; - } - return getChain(chains[0]); - }, - [chains] - ); + const chain = { + chainName: currentChainName, + label: currentChainRecord?.chain.pretty_name, + value: currentChainName, + icon: getChainLogo(currentChainName) + } // Events const onClickConnect: MouseEventHandler = async (e) => { @@ -104,17 +93,13 @@ export const WalletSection = () => { rejected={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } error={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } /> @@ -123,7 +108,7 @@ export const WalletSection = () => { const userInfo = ( } /> ); - const addressBtn = chainName && ( + const addressBtn = currentChainName && ( } @@ -140,10 +125,10 @@ export const WalletSection = () => { alignItems="center" justifyContent="center" > - {chainName && ( + {currentChainName && ( diff --git a/examples/juno/package.json b/examples/juno/package.json index 323f17075..b8232dced 100644 --- a/examples/juno/package.json +++ b/examples/juno/package.json @@ -16,7 +16,7 @@ "@cosmjs/stargate": "0.29.2", "@cosmos-kit/core": "0.19.3", "@cosmos-kit/keplr": "0.19.3", - "@cosmos-kit/react": "0.18.4", + "@cosmos-kit/react": "0.18.6", "@emotion/react": "11.10.4", "@emotion/styled": "11.10.4", "@juno-network/assets": "0.13.0", @@ -37,4 +37,4 @@ "eslint-config-next": "12.2.5", "typescript": "4.7.4" } -} +} \ No newline at end of file diff --git a/examples/juno/pages/_app.tsx b/examples/juno/pages/_app.tsx index 4834a5a24..5a3389841 100644 --- a/examples/juno/pages/_app.tsx +++ b/examples/juno/pages/_app.tsx @@ -29,8 +29,8 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) { return ( chain.chain_name === chainName)} - assetLists={assets.filter(asset => asset.chain_name === chainName)} + chains={chains} + assetLists={assets} wallets={wallets} signerOptions={signerOptions} > diff --git a/examples/osmosis-cosmwasm/components/wallet.tsx b/examples/osmosis-cosmwasm/components/wallet.tsx index ecb7170b5..c1ada72ee 100644 --- a/examples/osmosis-cosmwasm/components/wallet.tsx +++ b/examples/osmosis-cosmwasm/components/wallet.tsx @@ -9,7 +9,7 @@ import { useColorModeValue, Text } from '@chakra-ui/react'; -import { MouseEventHandler, useMemo } from 'react'; +import { MouseEventHandler, useEffect } from 'react'; import { FiAlertTriangle } from 'react-icons/fi'; import { Astronaut, @@ -27,9 +27,8 @@ import { WalletConnectComponent, ChainCard } from '../components'; -import { getWalletPrettyName } from '@cosmos-kit/config'; -import { assets as chainAssets } from 'chain-registry'; -import { ChainRecord } from '@cosmos-kit/core'; +import { chainName } from '../config'; + export const WalletSection = () => { const walletManager = useWallet(); @@ -41,32 +40,22 @@ export const WalletSection = () => { address, message, currentChainName, - currentWalletName, - chains + currentWallet, + currentChainRecord, + getChainLogo, + setCurrentChain } = walletManager; - const chainName = currentChainName; + useEffect(() => { + setCurrentChain(chainName); + }, [setCurrentChain]); - const chain = useMemo( - () => { - const getChain = (chainRecord: ChainRecord) => { - const assets = chainAssets.find( - (_chain) => _chain.chain_name === chainRecord.name - )?.assets; - return { - chainName: chainRecord.name, - label: chainRecord.chain.pretty_name, - value: chainRecord.name, - icon: assets - ? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png - : undefined, - disabled: false - }; - } - return getChain(chains[0]); - }, - [chains] - ); + const chain = { + chainName: currentChainName, + label: currentChainRecord?.chain.pretty_name, + value: currentChainName, + icon: getChainLogo(currentChainName) + } // Events const onClickConnect: MouseEventHandler = async (e) => { @@ -104,17 +93,13 @@ export const WalletSection = () => { rejected={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } error={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } /> @@ -123,7 +108,7 @@ export const WalletSection = () => { const userInfo = ( } /> ); - const addressBtn = chainName && ( + const addressBtn = currentChainName && ( } @@ -140,10 +125,10 @@ export const WalletSection = () => { alignItems="center" justifyContent="center" > - {chainName && ( + {currentChainName && ( diff --git a/examples/osmosis-cosmwasm/package.json b/examples/osmosis-cosmwasm/package.json index 400719b99..7b7c3cea2 100644 --- a/examples/osmosis-cosmwasm/package.json +++ b/examples/osmosis-cosmwasm/package.json @@ -16,9 +16,9 @@ "@chakra-ui/react": "2.3.5", "@cosmjs/cosmwasm-stargate": "0.29.2", "@cosmjs/stargate": "0.29.2", - "@cosmos-kit/core": "0.19.3", - "@cosmos-kit/keplr": "0.19.3", - "@cosmos-kit/react": "0.18.4", + "@cosmos-kit/core": "0.19.9", + "@cosmos-kit/keplr": "0.19.7", + "@cosmos-kit/react": "0.18.6", "@emotion/react": "11.10.4", "@emotion/styled": "11.10.4", "bignumber.js": "9.1.0", @@ -39,4 +39,4 @@ "eslint-config-next": "12.2.5", "typescript": "4.7.4" } -} +} \ No newline at end of file diff --git a/examples/osmosis-cosmwasm/pages/_app.tsx b/examples/osmosis-cosmwasm/pages/_app.tsx index 86c4cd59e..b986861b4 100644 --- a/examples/osmosis-cosmwasm/pages/_app.tsx +++ b/examples/osmosis-cosmwasm/pages/_app.tsx @@ -30,8 +30,8 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) { return ( chain.chain_name === chainName)} - assetLists={assets.filter(asset => asset.chain_name === chainName)} + chains={chains} + assetLists={assets} wallets={wallets} signerOptions={signerOptions} endpointOptions={{ diff --git a/examples/osmosis/components/wallet.tsx b/examples/osmosis/components/wallet.tsx index ecb7170b5..ce942a65e 100644 --- a/examples/osmosis/components/wallet.tsx +++ b/examples/osmosis/components/wallet.tsx @@ -9,7 +9,7 @@ import { useColorModeValue, Text } from '@chakra-ui/react'; -import { MouseEventHandler, useMemo } from 'react'; +import { MouseEventHandler, useEffect, useMemo } from 'react'; import { FiAlertTriangle } from 'react-icons/fi'; import { Astronaut, @@ -27,9 +27,8 @@ import { WalletConnectComponent, ChainCard } from '../components'; -import { getWalletPrettyName } from '@cosmos-kit/config'; -import { assets as chainAssets } from 'chain-registry'; -import { ChainRecord } from '@cosmos-kit/core'; +import { chainName } from '../config'; + export const WalletSection = () => { const walletManager = useWallet(); @@ -41,32 +40,22 @@ export const WalletSection = () => { address, message, currentChainName, - currentWalletName, - chains + currentWallet, + currentChainRecord, + getChainLogo, + setCurrentChain } = walletManager; - const chainName = currentChainName; + useEffect(() => { + setCurrentChain(chainName); + }, [setCurrentChain]); - const chain = useMemo( - () => { - const getChain = (chainRecord: ChainRecord) => { - const assets = chainAssets.find( - (_chain) => _chain.chain_name === chainRecord.name - )?.assets; - return { - chainName: chainRecord.name, - label: chainRecord.chain.pretty_name, - value: chainRecord.name, - icon: assets - ? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png - : undefined, - disabled: false - }; - } - return getChain(chains[0]); - }, - [chains] - ); + const chain = { + chainName: currentChainName, + label: currentChainRecord?.chain.pretty_name, + value: currentChainName, + icon: getChainLogo(currentChainName) + } // Events const onClickConnect: MouseEventHandler = async (e) => { @@ -104,17 +93,13 @@ export const WalletSection = () => { rejected={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } error={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } /> @@ -123,7 +108,7 @@ export const WalletSection = () => { const userInfo = ( } /> ); - const addressBtn = chainName && ( + const addressBtn = currentChainName && ( } @@ -140,10 +125,10 @@ export const WalletSection = () => { alignItems="center" justifyContent="center" > - {chainName && ( + {currentChainName && ( diff --git a/examples/osmosis/config/defaults.ts b/examples/osmosis/config/defaults.ts index 664c35337..d3f8e3f55 100644 --- a/examples/osmosis/config/defaults.ts +++ b/examples/osmosis/config/defaults.ts @@ -4,8 +4,8 @@ import { AssetList, Asset } from '@chain-registry/types'; import { SigningStargateClient } from '@cosmjs/stargate'; import { cosmos } from 'osmojs'; -// export const chainName = 'osmosis'; -export const chainName = 'osmosistestnet'; +export const chainName = 'osmosis'; +// export const chainName = 'osmosistestnet'; export const chainassets: AssetList = assets.find( (chain) => chain.chain_name === chainName diff --git a/examples/osmosis/package.json b/examples/osmosis/package.json index 70529fbb7..938d3263b 100644 --- a/examples/osmosis/package.json +++ b/examples/osmosis/package.json @@ -15,9 +15,9 @@ "@chakra-ui/react": "2.3.5", "@cosmjs/cosmwasm-stargate": "0.29.2", "@cosmjs/stargate": "0.29.2", - "@cosmos-kit/core": "0.19.3", - "@cosmos-kit/keplr": "0.19.3", - "@cosmos-kit/react": "0.18.4", + "@cosmos-kit/core": "0.19.9", + "@cosmos-kit/keplr": "0.19.7", + "@cosmos-kit/react": "0.18.6", "@emotion/react": "11.10.4", "@emotion/styled": "11.10.4", "bignumber.js": "9.1.0", @@ -37,4 +37,4 @@ "eslint-config-next": "12.2.5", "typescript": "4.7.4" } -} +} \ No newline at end of file diff --git a/examples/osmosis/pages/_app.tsx b/examples/osmosis/pages/_app.tsx index c3556e79e..c54d93cd4 100644 --- a/examples/osmosis/pages/_app.tsx +++ b/examples/osmosis/pages/_app.tsx @@ -11,9 +11,6 @@ import { GasPrice } from '@cosmjs/stargate'; import { SignerOptions } from '@cosmos-kit/core'; import { Chain } from '@chain-registry/types'; -// const chainName = 'osmosis'; -const chainName = 'osmosistestnet'; - function CreateCosmosApp({ Component, pageProps }: AppProps) { const signerOptions: SignerOptions = { stargate: (_chain: Chain) => { @@ -33,8 +30,8 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) { return ( chain.chain_name === chainName)} - assetLists={assets.filter(asset => asset.chain_name === chainName)} + chains={chains} + assetLists={assets} wallets={wallets} signerOptions={signerOptions} > diff --git a/examples/send-tokens/components/wallet.tsx b/examples/send-tokens/components/wallet.tsx index ecb7170b5..c1ada72ee 100644 --- a/examples/send-tokens/components/wallet.tsx +++ b/examples/send-tokens/components/wallet.tsx @@ -9,7 +9,7 @@ import { useColorModeValue, Text } from '@chakra-ui/react'; -import { MouseEventHandler, useMemo } from 'react'; +import { MouseEventHandler, useEffect } from 'react'; import { FiAlertTriangle } from 'react-icons/fi'; import { Astronaut, @@ -27,9 +27,8 @@ import { WalletConnectComponent, ChainCard } from '../components'; -import { getWalletPrettyName } from '@cosmos-kit/config'; -import { assets as chainAssets } from 'chain-registry'; -import { ChainRecord } from '@cosmos-kit/core'; +import { chainName } from '../config'; + export const WalletSection = () => { const walletManager = useWallet(); @@ -41,32 +40,22 @@ export const WalletSection = () => { address, message, currentChainName, - currentWalletName, - chains + currentWallet, + currentChainRecord, + getChainLogo, + setCurrentChain } = walletManager; - const chainName = currentChainName; + useEffect(() => { + setCurrentChain(chainName); + }, [setCurrentChain]); - const chain = useMemo( - () => { - const getChain = (chainRecord: ChainRecord) => { - const assets = chainAssets.find( - (_chain) => _chain.chain_name === chainRecord.name - )?.assets; - return { - chainName: chainRecord.name, - label: chainRecord.chain.pretty_name, - value: chainRecord.name, - icon: assets - ? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png - : undefined, - disabled: false - }; - } - return getChain(chains[0]); - }, - [chains] - ); + const chain = { + chainName: currentChainName, + label: currentChainRecord?.chain.pretty_name, + value: currentChainName, + icon: getChainLogo(currentChainName) + } // Events const onClickConnect: MouseEventHandler = async (e) => { @@ -104,17 +93,13 @@ export const WalletSection = () => { rejected={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } error={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } /> @@ -123,7 +108,7 @@ export const WalletSection = () => { const userInfo = ( } /> ); - const addressBtn = chainName && ( + const addressBtn = currentChainName && ( } @@ -140,10 +125,10 @@ export const WalletSection = () => { alignItems="center" justifyContent="center" > - {chainName && ( + {currentChainName && ( diff --git a/examples/send-tokens/package.json b/examples/send-tokens/package.json index 052d4bb8b..4f7ce5833 100644 --- a/examples/send-tokens/package.json +++ b/examples/send-tokens/package.json @@ -14,9 +14,9 @@ "@chakra-ui/react": "2.3.5", "@cosmjs/cosmwasm-stargate": "0.29.2", "@cosmjs/stargate": "0.29.2", - "@cosmos-kit/core": "0.19.3", - "@cosmos-kit/keplr": "0.19.3", - "@cosmos-kit/react": "0.18.4", + "@cosmos-kit/core": "0.19.9", + "@cosmos-kit/keplr": "0.19.7", + "@cosmos-kit/react": "0.18.6", "@emotion/react": "11.10.4", "@emotion/styled": "11.10.4", "bignumber.js": "9.1.0", @@ -36,4 +36,4 @@ "eslint-config-next": "12.2.5", "typescript": "4.7.4" } -} +} \ No newline at end of file diff --git a/examples/send-tokens/pages/_app.tsx b/examples/send-tokens/pages/_app.tsx index 6b8ff203e..68a09556a 100644 --- a/examples/send-tokens/pages/_app.tsx +++ b/examples/send-tokens/pages/_app.tsx @@ -20,8 +20,8 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) { return ( chain.chain_name === chainName)} - assetLists={assets.filter(asset => asset.chain_name === chainName)} + chains={chains} + assetLists={assets} wallets={wallets} signerOptions={signerOptions} > diff --git a/examples/stargaze/components/wallet.tsx b/examples/stargaze/components/wallet.tsx index ecb7170b5..c1ada72ee 100644 --- a/examples/stargaze/components/wallet.tsx +++ b/examples/stargaze/components/wallet.tsx @@ -9,7 +9,7 @@ import { useColorModeValue, Text } from '@chakra-ui/react'; -import { MouseEventHandler, useMemo } from 'react'; +import { MouseEventHandler, useEffect } from 'react'; import { FiAlertTriangle } from 'react-icons/fi'; import { Astronaut, @@ -27,9 +27,8 @@ import { WalletConnectComponent, ChainCard } from '../components'; -import { getWalletPrettyName } from '@cosmos-kit/config'; -import { assets as chainAssets } from 'chain-registry'; -import { ChainRecord } from '@cosmos-kit/core'; +import { chainName } from '../config'; + export const WalletSection = () => { const walletManager = useWallet(); @@ -41,32 +40,22 @@ export const WalletSection = () => { address, message, currentChainName, - currentWalletName, - chains + currentWallet, + currentChainRecord, + getChainLogo, + setCurrentChain } = walletManager; - const chainName = currentChainName; + useEffect(() => { + setCurrentChain(chainName); + }, [setCurrentChain]); - const chain = useMemo( - () => { - const getChain = (chainRecord: ChainRecord) => { - const assets = chainAssets.find( - (_chain) => _chain.chain_name === chainRecord.name - )?.assets; - return { - chainName: chainRecord.name, - label: chainRecord.chain.pretty_name, - value: chainRecord.name, - icon: assets - ? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png - : undefined, - disabled: false - }; - } - return getChain(chains[0]); - }, - [chains] - ); + const chain = { + chainName: currentChainName, + label: currentChainRecord?.chain.pretty_name, + value: currentChainName, + icon: getChainLogo(currentChainName) + } // Events const onClickConnect: MouseEventHandler = async (e) => { @@ -104,17 +93,13 @@ export const WalletSection = () => { rejected={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } error={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } /> @@ -123,7 +108,7 @@ export const WalletSection = () => { const userInfo = ( } /> ); - const addressBtn = chainName && ( + const addressBtn = currentChainName && ( } @@ -140,10 +125,10 @@ export const WalletSection = () => { alignItems="center" justifyContent="center" > - {chainName && ( + {currentChainName && ( diff --git a/examples/stargaze/package.json b/examples/stargaze/package.json index a4a7a1c6e..a51a75c5a 100644 --- a/examples/stargaze/package.json +++ b/examples/stargaze/package.json @@ -14,9 +14,9 @@ "@chakra-ui/react": "2.3.5", "@cosmjs/cosmwasm-stargate": "0.29.2", "@cosmjs/stargate": "0.29.2", - "@cosmos-kit/core": "0.19.3", - "@cosmos-kit/keplr": "0.19.3", - "@cosmos-kit/react": "0.18.4", + "@cosmos-kit/core": "0.19.9", + "@cosmos-kit/keplr": "0.19.7", + "@cosmos-kit/react": "0.18.6", "@emotion/react": "11.10.4", "@emotion/styled": "11.10.4", "bignumber.js": "9.1.0", @@ -36,4 +36,4 @@ "eslint-config-next": "12.2.5", "typescript": "4.7.4" } -} +} \ No newline at end of file diff --git a/examples/stargaze/pages/_app.tsx b/examples/stargaze/pages/_app.tsx index 5af61d592..af9513c62 100644 --- a/examples/stargaze/pages/_app.tsx +++ b/examples/stargaze/pages/_app.tsx @@ -30,8 +30,8 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) { return ( chain.chain_name === chainName)} - assetLists={assets.filter(asset => asset.chain_name === chainName)} + chains={chains} + assetLists={assets} wallets={wallets} signerOptions={signerOptions} > diff --git a/examples/tailwindcss/components/react/index.ts b/examples/tailwindcss/components/react/index.ts index ac1dc7dd7..c9a7498d1 100644 --- a/examples/tailwindcss/components/react/index.ts +++ b/examples/tailwindcss/components/react/index.ts @@ -1,2 +1,3 @@ export * from './chain-card'; export * from './modal'; +export * from './views'; diff --git a/examples/tailwindcss/components/react/modal.tsx b/examples/tailwindcss/components/react/modal.tsx index dbb93b263..56cd9d6d6 100644 --- a/examples/tailwindcss/components/react/modal.tsx +++ b/examples/tailwindcss/components/react/modal.tsx @@ -12,7 +12,7 @@ import { QRCode, WalletList } from './views'; -import { wallets } from '@cosmos-kit/config'; +import { wallets } from '@cosmos-kit/keplr'; import { useRouter } from 'next/router'; import Bowser from 'bowser'; @@ -43,16 +43,14 @@ export const TailwindModal = ({ isOpen, setOpen }: WalletModalProps) => { }); }, []); - const { setCurrentWallet, connect, walletStatus, currentWalletName } = + const { setCurrentWallet, connect, walletStatus, currentWalletName, currentWallet, getWallet } = useWallet(); const [currentView, setCurrentView] = useState( ModalView.WalletList ); - const currentWalletData = useMemo(() => { - return wallets.find((wallet) => wallet.name === currentWalletName); - }, [currentWalletName]); + const currentWalletData = currentWallet?.walletInfo; useEffect(() => { if (isOpen) { @@ -86,11 +84,11 @@ export const TailwindModal = ({ isOpen, setOpen }: WalletModalProps) => { // 1ms timeout prevents _render from determining the view to show first setTimeout(() => { - if (wallets.find((wallet) => wallet.name === name)?.isQRCode) + if (getWallet(name)?.walletInfo.isQRCode) setCurrentView(ModalView.QRCode); }, 1); }, - [setCurrentWallet, connect] + [setCurrentWallet, connect, getWallet] ); const onCloseModal = useCallback(() => { diff --git a/examples/tailwindcss/components/wallet.tsx b/examples/tailwindcss/components/wallet.tsx index 77290c75a..728473818 100644 --- a/examples/tailwindcss/components/wallet.tsx +++ b/examples/tailwindcss/components/wallet.tsx @@ -1,3 +1,5 @@ +/* eslint-disable react-hooks/exhaustive-deps */ + import { MouseEventHandler, useEffect, useMemo } from 'react' import { ChainCard } from '../components' import { Address, truncate } from './react/views' @@ -7,8 +9,8 @@ import { WalletIcon, } from '@heroicons/react/24/outline' import { useWallet } from '@cosmos-kit/react' -import { ChainName, WalletStatus } from '@cosmos-kit/core' -import { chainInfos } from '../config/chain-infos' +import { WalletStatus } from '@cosmos-kit/core' +import { chainName } from '../config'; const buttons = { Disconnected: { @@ -33,7 +35,7 @@ const buttons = { }, } -export const WalletSection = ({ chainName }: { chainName?: ChainName }) => { +export const WalletSection = () => { const walletManager = useWallet() const { connect, @@ -42,15 +44,26 @@ export const WalletSection = ({ chainName }: { chainName?: ChainName }) => { walletStatus, username, address, - currentWalletName, - chains, - } = walletManager + currentChainName, + currentChainRecord, + getChainLogo, + setCurrentChain + } = walletManager; + + useEffect(() => { + setCurrentChain(chainName); + }, [setCurrentChain]); - const chain = chainInfos.find((c) => c.chainName === chainName) + const chain = { + chainName: currentChainName, + label: currentChainRecord?.chain.pretty_name, + value: currentChainName, + icon: getChainLogo(currentChainName) + } useEffect(() => { setCurrentChain(chainName) - }, [chainName, setCurrentChain]) + }, [setCurrentChain]) // Events const onClickConnect: MouseEventHandler = async (e) => { diff --git a/examples/tailwindcss/config/chain-infos.ts b/examples/tailwindcss/config/chain-infos.ts deleted file mode 100644 index 3a5de4712..000000000 --- a/examples/tailwindcss/config/chain-infos.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { ChooseChainInfo } from '../components'; -import { chains as chainsBase, assets as chainAssets } from 'chain-registry'; - -export const chainInfos: ChooseChainInfo[] = chainsBase - .filter((chain) => chain.network_type !== 'testnet') - .map((chain) => { - const assets = chainAssets.find( - (_chain) => _chain.chain_name === chain.chain_name - )?.assets; - return { - chainName: chain.chain_name, - label: chain.pretty_name, - value: chain.chain_name, - icon: assets - ? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png - : undefined, - disabled: false - }; - }); diff --git a/examples/tailwindcss/package.json b/examples/tailwindcss/package.json index 4c17d90f6..14a17538d 100644 --- a/examples/tailwindcss/package.json +++ b/examples/tailwindcss/package.json @@ -11,9 +11,9 @@ "dependencies": { "@cosmjs/cosmwasm-stargate": "0.29.2", "@cosmjs/stargate": "0.29.2", - "@cosmos-kit/core": "0.19.3", - "@cosmos-kit/keplr": "0.19.3", - "@cosmos-kit/react": "0.18.4", + "@cosmos-kit/core": "0.19.9", + "@cosmos-kit/keplr": "0.19.7", + "@cosmos-kit/react": "0.18.6", "@emotion/react": "11.10.4", "@emotion/styled": "11.10.4", "@headlessui/react": "^1.7.3", @@ -43,4 +43,4 @@ "tailwind-scrollbar-hide": "^1.1.7", "typescript": "4.7.4" } -} +} \ No newline at end of file diff --git a/examples/telescope/components/wallet.tsx b/examples/telescope/components/wallet.tsx index ecb7170b5..c1ada72ee 100644 --- a/examples/telescope/components/wallet.tsx +++ b/examples/telescope/components/wallet.tsx @@ -9,7 +9,7 @@ import { useColorModeValue, Text } from '@chakra-ui/react'; -import { MouseEventHandler, useMemo } from 'react'; +import { MouseEventHandler, useEffect } from 'react'; import { FiAlertTriangle } from 'react-icons/fi'; import { Astronaut, @@ -27,9 +27,8 @@ import { WalletConnectComponent, ChainCard } from '../components'; -import { getWalletPrettyName } from '@cosmos-kit/config'; -import { assets as chainAssets } from 'chain-registry'; -import { ChainRecord } from '@cosmos-kit/core'; +import { chainName } from '../config'; + export const WalletSection = () => { const walletManager = useWallet(); @@ -41,32 +40,22 @@ export const WalletSection = () => { address, message, currentChainName, - currentWalletName, - chains + currentWallet, + currentChainRecord, + getChainLogo, + setCurrentChain } = walletManager; - const chainName = currentChainName; + useEffect(() => { + setCurrentChain(chainName); + }, [setCurrentChain]); - const chain = useMemo( - () => { - const getChain = (chainRecord: ChainRecord) => { - const assets = chainAssets.find( - (_chain) => _chain.chain_name === chainRecord.name - )?.assets; - return { - chainName: chainRecord.name, - label: chainRecord.chain.pretty_name, - value: chainRecord.name, - icon: assets - ? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png - : undefined, - disabled: false - }; - } - return getChain(chains[0]); - }, - [chains] - ); + const chain = { + chainName: currentChainName, + label: currentChainRecord?.chain.pretty_name, + value: currentChainName, + icon: getChainLogo(currentChainName) + } // Events const onClickConnect: MouseEventHandler = async (e) => { @@ -104,17 +93,13 @@ export const WalletSection = () => { rejected={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } error={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } /> @@ -123,7 +108,7 @@ export const WalletSection = () => { const userInfo = ( } /> ); - const addressBtn = chainName && ( + const addressBtn = currentChainName && ( } @@ -140,10 +125,10 @@ export const WalletSection = () => { alignItems="center" justifyContent="center" > - {chainName && ( + {currentChainName && ( diff --git a/examples/telescope/package.json b/examples/telescope/package.json index 514cc5632..863e25a94 100644 --- a/examples/telescope/package.json +++ b/examples/telescope/package.json @@ -15,7 +15,7 @@ "@chakra-ui/react": "^2.3.5", "@cosmjs/cosmwasm-stargate": "0.29.2", "@cosmjs/stargate": "0.29.2", - "@cosmos-kit/react": "0.18.4", + "@cosmos-kit/react": "0.18.6", "@cosmos-kit/types": "^0.11.0", "@emotion/react": "11.10.4", "@emotion/styled": "11.10.4", @@ -40,4 +40,4 @@ "eslint-config-next": "12.2.5", "typescript": "4.7.4" } -} +} \ No newline at end of file diff --git a/examples/telescope/pages/_app.tsx b/examples/telescope/pages/_app.tsx index 83f24dc78..9cd279d04 100644 --- a/examples/telescope/pages/_app.tsx +++ b/examples/telescope/pages/_app.tsx @@ -37,8 +37,8 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) { return ( chain.chain_name === chainName)} - assetLists={assets.filter(asset => asset.chain_name === chainName)} + chains={chains} + assetLists={assets} wallets={wallets} signerOptions={signerOptions} > diff --git a/package.json b/package.json index f4d7517b5..8119f9f0b 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "lint": "lerna run lint", "format": "lerna run format", "test": "lerna run test --stream", - "upgrade": "yarn upgrade-interactive --latest" + "update": "yarn upgrade-interactive --latest" }, "devDependencies": { "@babel/cli": "7.18.10", diff --git a/templates/connect-chain/components/wallet.tsx b/templates/connect-chain/components/wallet.tsx index ecb7170b5..9f549cfb6 100644 --- a/templates/connect-chain/components/wallet.tsx +++ b/templates/connect-chain/components/wallet.tsx @@ -9,7 +9,7 @@ import { useColorModeValue, Text } from '@chakra-ui/react'; -import { MouseEventHandler, useMemo } from 'react'; +import { MouseEventHandler, useEffect, useMemo } from 'react'; import { FiAlertTriangle } from 'react-icons/fi'; import { Astronaut, @@ -27,9 +27,7 @@ import { WalletConnectComponent, ChainCard } from '../components'; -import { getWalletPrettyName } from '@cosmos-kit/config'; -import { assets as chainAssets } from 'chain-registry'; -import { ChainRecord } from '@cosmos-kit/core'; +import { chainName } from '../config'; export const WalletSection = () => { const walletManager = useWallet(); @@ -41,32 +39,22 @@ export const WalletSection = () => { address, message, currentChainName, - currentWalletName, - chains + currentWallet, + currentChainRecord, + getChainLogo, + setCurrentChain } = walletManager; - const chainName = currentChainName; + useEffect(() => { + setCurrentChain(chainName); + }, [setCurrentChain]); - const chain = useMemo( - () => { - const getChain = (chainRecord: ChainRecord) => { - const assets = chainAssets.find( - (_chain) => _chain.chain_name === chainRecord.name - )?.assets; - return { - chainName: chainRecord.name, - label: chainRecord.chain.pretty_name, - value: chainRecord.name, - icon: assets - ? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png - : undefined, - disabled: false - }; - } - return getChain(chains[0]); - }, - [chains] - ); + const chain = { + chainName: currentChainName, + label: currentChainRecord?.chain.pretty_name, + value: currentChainName, + icon: getChainLogo(currentChainName) + } // Events const onClickConnect: MouseEventHandler = async (e) => { @@ -104,17 +92,13 @@ export const WalletSection = () => { rejected={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } error={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } /> @@ -123,7 +107,7 @@ export const WalletSection = () => { const userInfo = ( } /> ); - const addressBtn = chainName && ( + const addressBtn = currentChainName && ( } @@ -140,10 +124,10 @@ export const WalletSection = () => { alignItems="center" justifyContent="center" > - {chainName && ( + {currentChainName && ( diff --git a/templates/connect-chain/package.json b/templates/connect-chain/package.json index f4e9a7599..2ed5e0a2b 100644 --- a/templates/connect-chain/package.json +++ b/templates/connect-chain/package.json @@ -9,13 +9,20 @@ "lint": "next lint" }, "dependencies": { + "@chakra-ui/icons": "2.0.10", + "@chakra-ui/react": "2.3.4", + "@cosmjs/cosmwasm-stargate": "0.29.0", + "@cosmjs/stargate": "0.29.0", + "@cosmos-kit/core": "0.19.9", + "@cosmos-kit/keplr": "0.19.7", + "@cosmos-kit/react": "0.18.6", "@chakra-ui/icons": "2.0.11", "@chakra-ui/react": "2.3.5", "@cosmjs/cosmwasm-stargate": "0.29.2", "@cosmjs/stargate": "0.29.2", - "@cosmos-kit/core": "0.19.3", - "@cosmos-kit/keplr": "0.19.3", - "@cosmos-kit/react": "0.18.4", + "@cosmos-kit/core": "0.19.9", + "@cosmos-kit/keplr": "0.19.7", + "@cosmos-kit/react": "0.18.6", "@emotion/react": "11.10.4", "@emotion/styled": "11.10.4", "chain-registry": "1.0.0", @@ -33,4 +40,4 @@ "eslint-config-next": "12.2.5", "typescript": "4.7.4" } -} +} \ No newline at end of file diff --git a/templates/connect-chain/pages/_app.tsx b/templates/connect-chain/pages/_app.tsx index ad6ace545..23cfc60fc 100644 --- a/templates/connect-chain/pages/_app.tsx +++ b/templates/connect-chain/pages/_app.tsx @@ -18,8 +18,8 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) { return ( chain.chain_name === chainName)} - assetLists={assets.filter(asset => asset.chain_name === chainName)} + chains={chains} + assetLists={assets} wallets={wallets} signerOptions={signerOptions} > diff --git a/templates/connect-multi-chain/components/wallet.tsx b/templates/connect-multi-chain/components/wallet.tsx index 72264be26..2fddcc7d4 100644 --- a/templates/connect-multi-chain/components/wallet.tsx +++ b/templates/connect-multi-chain/components/wallet.tsx @@ -8,7 +8,7 @@ import { Stack, useColorModeValue } from '@chakra-ui/react'; -import { MouseEventHandler, useMemo } from 'react'; +import { MouseEventHandler, useEffect, useMemo } from 'react'; import { FiAlertTriangle } from 'react-icons/fi'; import { Astronaut, @@ -28,41 +28,34 @@ import { RejectedWarn, WalletConnectComponent } from '../components'; -import { getWalletPrettyName } from '@cosmos-kit/config'; -import { assets as chainAssets } from 'chain-registry'; export const WalletSection = () => { const walletManager = useWallet(); const { connect, openView, - setCurrentChain, walletStatus, username, address, message, - currentChainName: chainName, - currentWalletName, - chains + currentChainName, + currentWallet, + chains, + getChainLogo, + setCurrentChain } = walletManager; const chainOptions = useMemo( () => chains.map((chainRecord) => { - const assets = chainAssets.find( - (_chain) => _chain.chain_name === chainRecord.name - )?.assets; return { - chainName: chainRecord.name, - label: chainRecord.chain.pretty_name, - value: chainRecord.name, - icon: assets - ? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png - : undefined, - disabled: false + chainName: chainRecord?.name, + label: chainRecord?.chain.pretty_name, + value: chainRecord?.name, + icon: getChainLogo(chainRecord.name) }; }), - [chains] + [chains, getChainLogo] ); // Events @@ -108,24 +101,20 @@ export const WalletSection = () => { rejected={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } error={ } - wordOfWarning={`${getWalletPrettyName( - currentWalletName - )}: ${message}`} + wordOfWarning={`${currentWallet?.walletInfo.prettyName}: ${message}`} /> } /> ); const chooseChain = ( @@ -134,7 +123,7 @@ export const WalletSection = () => { const userInfo = ( } /> ); - const addressBtn = chainName && ( + const addressBtn = currentChainName && ( } diff --git a/templates/connect-multi-chain/package.json b/templates/connect-multi-chain/package.json index 414b292a7..725ab2e44 100644 --- a/templates/connect-multi-chain/package.json +++ b/templates/connect-multi-chain/package.json @@ -14,9 +14,9 @@ "@chakra-ui/react": "2.3.5", "@cosmjs/cosmwasm-stargate": "0.29.2", "@cosmjs/stargate": "0.29.2", - "@cosmos-kit/core": "0.19.3", - "@cosmos-kit/keplr": "0.19.3", - "@cosmos-kit/react": "0.18.4", + "@cosmos-kit/core": "0.19.9", + "@cosmos-kit/keplr": "0.19.7", + "@cosmos-kit/react": "0.18.6", "@emotion/react": "11.10.4", "@emotion/styled": "11.10.4", "chain-registry": "1.0.0", @@ -36,4 +36,4 @@ "eslint-config-next": "12.2.5", "typescript": "4.7.4" } -} +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index f5a5a10a2..89b9f08d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2832,10 +2832,10 @@ "@cosmos-kit/core" "^0.16.2" "@cosmos-kit/keplr" "^0.16.2" -"@cosmos-kit/core@0.19.3", "@cosmos-kit/core@^0.19.3": - version "0.19.3" - resolved "https://registry.npmjs.org/@cosmos-kit/core/-/core-0.19.3.tgz#1c065956e4c84c3a912ad1fce98028de01d4494a" - integrity sha512-0YqThC5hoLIFKmQdJn7BEI/og+4YlSxr/Rytmt29dICr8FXLIfdfjMHb/W+MqBUo7y0lLAal1l6RIcFbq2qKCg== +"@cosmos-kit/core@0.19.9", "@cosmos-kit/core@^0.19.9": + version "0.19.9" + resolved "https://registry.npmjs.org/@cosmos-kit/core/-/core-0.19.9.tgz#7c984dc3bea19d6e520ae3872667326f6492211e" + integrity sha512-f59sKsu/T3tsGvpbdUmUeXcUAYMZq3/sz6NcwebD/Zpjml5kES4lj7s/LUX5O7Njs8cD5GNbmIcBtJanS6dKBA== dependencies: "@babel/runtime" "^7.11.2" "@chain-registry/types" "^0.11.0" @@ -2850,16 +2850,16 @@ "@chain-registry/types" "^0.11.0" chain-registry "^0.14.0" -"@cosmos-kit/keplr@0.19.3": - version "0.19.3" - resolved "https://registry.npmjs.org/@cosmos-kit/keplr/-/keplr-0.19.3.tgz#fbbaad6dc5139883a89ac1f75aeb9b845727fad9" - integrity sha512-lm5jKrAVL8sWFCwo5jfqN4QrTwCYNgLoTdnQPi7+IqgsX8FAZke7qSkfSHyd32ST55RWnfgz5jAgLlWzIzlz4Q== +"@cosmos-kit/keplr@0.19.7": + version "0.19.7" + resolved "https://registry.npmjs.org/@cosmos-kit/keplr/-/keplr-0.19.7.tgz#7d2499706775f2e828c4ec31589a63fd736a62f8" + integrity sha512-lsm54F7Zi1YH3BhuiddA7Q+D6tLrmvG5GvN86duOhqIAt6zQ96iK6Z0r1ZzBHJpELob40OZYpLJkXRq6UDo2PQ== dependencies: "@babel/runtime" "^7.11.2" "@chain-registry/keplr" "1.0.0" "@chain-registry/types" "^0.11.0" "@chakra-ui/react" "^2.2.9" - "@cosmos-kit/core" "^0.19.3" + "@cosmos-kit/core" "^0.19.9" "@emotion/react" "^11" "@emotion/styled" "^11" "@keplr-wallet/types" "^0.11.3" @@ -2890,10 +2890,10 @@ react-dom "18.2.0" react-icons "^4.4.0" -"@cosmos-kit/react@0.18.4": - version "0.18.4" - resolved "https://registry.npmjs.org/@cosmos-kit/react/-/react-0.18.4.tgz#f02cf5939a08595b8b7db82c388d3ccfb36be956" - integrity sha512-gRAPFE7Ln4CMiyKq3YxW5hqUbLvyqFAT1CUlvBFtb+wdrM3g+7JhdNLKZLV7I68gWYW3rO4ORC6jZxsgqmmsNg== +"@cosmos-kit/react@0.18.6": + version "0.18.6" + resolved "https://registry.npmjs.org/@cosmos-kit/react/-/react-0.18.6.tgz#617d351803311faa96295cce3a9fb6072f872d71" + integrity sha512-WrecEa4GHwoao/fDtt2+UA1aWSvRLOlSz78AgoecxIBZASsfRMPS0dxL6gyXij0gvXvCgPna9Re3Lmgu2Umozw== dependencies: "@babel/runtime" "^7.11.2" "@chain-registry/types" "^0.11.0"