diff --git a/examples/asset-list/components/asset-list/AssetsOverview.tsx b/examples/asset-list/components/asset-list/AssetsOverview.tsx index 277b06146..d317cca68 100644 --- a/examples/asset-list/components/asset-list/AssetsOverview.tsx +++ b/examples/asset-list/components/asset-list/AssetsOverview.tsx @@ -4,18 +4,19 @@ import { useChain } from '@cosmos-kit/react'; import BigNumber from 'bignumber.js'; import { ChainName } from 'cosmos-kit'; import { SingleChain, SingleChainProps } from '@interchain-ui/react'; - -import { useDisclosure, useChainUtils, useTotalAssets } from '@/hooks'; +import { useDisclosure, useTotalAssets } from '@/hooks'; import { truncDecimals, formatDollarValue, prettyAssetToTransferItem, + getAssetsByChainName, + assets as assetsFromRegistry, + isNativeAsset } from '@/utils'; - import { DropdownTransferModal } from './DropdownTransferModal'; import { RowTransferModal } from './RowTransferModal'; - import { PrettyAsset, Transfer, TransferInfo } from './types'; +import { getChainNameByDenom, getNativeTokenByChainName } from '@chain-registry/utils' interface AssetsOverviewProps { isLoading?: boolean; @@ -40,14 +41,12 @@ const AssetsOverview = ({ isLoading: isLoadingTotalAssets, refetch, } = useTotalAssets(selectedChainName); - const { getChainName, getNativeDenom, isNativeAsset } = - useChainUtils(selectedChainName); const modalControl = useDisclosure(); const rowModalControl = useDisclosure(); const ibcAssets = useMemo( - () => assets.filter((asset) => !isNativeAsset(asset)), + () => assets.filter((asset) => !isNativeAsset(asset, selectedChainName)), // eslint-disable-next-line react-hooks/exhaustive-deps [assets] ); @@ -58,63 +57,58 @@ const AssetsOverview = ({ ); const assetsToShow = useMemo(() => { - const returnAssets: SingleChainProps['list'] = assets.map((asset) => ({ - imgSrc: asset.logoUrl ?? '', - symbol: asset.symbol, - denom: asset.denom, - name: asset.prettyChainName, - tokenAmount: truncDecimals(asset.displayAmount, 6), - tokenAmountPrice: formatDollarValue(asset.dollarValue, asset.amount), - chainName: asset.prettyChainName, - showDeposit: !isNativeAsset(asset), - showWithdraw: !isNativeAsset(asset) && new BigNumber(asset.amount).gt(0), - onDeposit: () => { - const sourceChainName = getChainName(asset.denom); - const sourceChainNativeDenom = getNativeDenom(sourceChainName); - flushSync(() => { - setRowTransferInfo({ - sourceChainName, - type: Transfer.Deposit, - destChainName: selectedChainName, - token: { - ...prettyAssetToTransferItem(asset), - priceDisplayAmount: 0, - available: 0, - denom: sourceChainNativeDenom, - }, + const returnAssets: SingleChainProps['list'] = assets.map((asset) => { + return { + imgSrc: asset.logoUrl ?? '', + symbol: asset.symbol, + denom: asset.denom, + name: asset.prettyChainName, + tokenAmount: truncDecimals(asset.displayAmount, 6), + tokenAmountPrice: formatDollarValue(asset.dollarValue, asset.amount), + chainName: asset.prettyChainName, + showDeposit: !isNativeAsset(asset, selectedChainName), + showWithdraw: !isNativeAsset(asset, selectedChainName) && new BigNumber(asset.amount).gt(0), + onDeposit: () => { + const sourceChainName = getChainNameByDenom(getAssetsByChainName(selectedChainName), asset.denom) || ''; + const sourceChainNativeDenom = getNativeTokenByChainName(assetsFromRegistry, sourceChainName)?.base; + flushSync(() => { + setRowTransferInfo({ + sourceChainName, + type: Transfer.Deposit, + destChainName: selectedChainName, + token: { + ...prettyAssetToTransferItem(asset), + priceDisplayAmount: 0, + available: 0, + denom: sourceChainNativeDenom, + }, + }); }); - }); - rowModalControl.open(); - }, - onWithdraw: () => { - const destChainName = getChainName(asset.denom); - - flushSync(() => { - setRowTransferInfo({ - sourceChainName: selectedChainName, - type: Transfer.Withdraw, - destChainName, - token: prettyAssetToTransferItem(asset), + rowModalControl.open(); + }, + onWithdraw: () => { + const destChainName = getChainNameByDenom(assetsFromRegistry, asset.denom) || ''; + + flushSync(() => { + setRowTransferInfo({ + sourceChainName: selectedChainName, + type: Transfer.Withdraw, + destChainName, + token: prettyAssetToTransferItem(asset), + }); }); - }); - rowModalControl.open(); - }, - })); + rowModalControl.open(); + }, + } + }); return returnAssets; - }, [ - assets, - getChainName, - getNativeDenom, - isNativeAsset, - rowModalControl, - selectedChainName, - ]); + }, [assets, rowModalControl, selectedChainName]); const onWithdrawAsset = () => { - const destChainName = getChainName(ibcAssets[0].denom); + const destChainName = getChainNameByDenom(assetsFromRegistry,ibcAssets[0].denom) || ''; setTransferInfo({ sourceChainName: selectedChainName, type: Transfer.Withdraw, @@ -125,8 +119,8 @@ const AssetsOverview = ({ }; const onDepositAsset = () => { - const sourceChainName = getChainName(ibcAssets[0].denom); - const sourceChainAssetDenom = getNativeDenom(sourceChainName); + const sourceChainName = getChainNameByDenom(assetsFromRegistry,ibcAssets[0].denom) || ''; + const sourceChainAssetDenom = getNativeTokenByChainName(assetsFromRegistry, sourceChainName)?.base; setTransferInfo({ sourceChainName, type: Transfer.Deposit, diff --git a/examples/asset-list/components/asset-list/types.tsx b/examples/asset-list/components/asset-list/types.tsx index 56437be26..99883e15d 100644 --- a/examples/asset-list/components/asset-list/types.tsx +++ b/examples/asset-list/components/asset-list/types.tsx @@ -1,8 +1,9 @@ +import { Asset } from '@chain-registry/types'; import { AvailableItem } from '@interchain-ui/react'; export type Unpacked = T extends (infer U)[] ? U : T; -export type PrettyAsset = { +export type PrettyAsset = Asset & { logoUrl: string | undefined; symbol: string; prettyChainName: string; diff --git a/examples/asset-list/hooks/queries/useAssets.ts b/examples/asset-list/hooks/queries/useAssets.ts index d61cac903..7fb0f37b2 100644 --- a/examples/asset-list/hooks/queries/useAssets.ts +++ b/examples/asset-list/hooks/queries/useAssets.ts @@ -15,6 +15,7 @@ import { import { useGeckoPrices } from './useGeckoPrices'; import { getAssetsByChainName } from '@/utils/local-chain-registry' import BigNumber from "bignumber.js"; +import { PrettyAsset } from "@/components"; (BigInt.prototype as any).toJSON = function () { return this.toString(); @@ -51,7 +52,7 @@ export const useAssets = (chainName: string) => { const assets = getAssetsByChainName(chainName) - return topTokens.map((token) => { + return topTokens.map((token) => { const { denom, symbol } = token @@ -73,6 +74,7 @@ export const useAssets = (chainName: string) => { const prettyChainName = getChainNameByDenom(assets, denom) || '' return { + ...asset, symbol, logoUrl: asset?.logo_URIs?.png || asset?.logo_URIs?.svg, prettyChainName, diff --git a/examples/asset-list/utils/index.ts b/examples/asset-list/utils/index.ts index fce1c34ac..4ff59456d 100644 --- a/examples/asset-list/utils/index.ts +++ b/examples/asset-list/utils/index.ts @@ -2,3 +2,4 @@ export * from './pool'; export * from './base'; export * from './assets'; export * from './format'; +export * from './local-chain-registry'