Merge branch 'main' into feat/chain-template

Author: marslavish

examples/asset-list/components/asset-list/AssetsOverview.tsx

@@ -40,7 +40,7 @@ const AssetsOverview = ({
     isLoading: isLoadingTotalAssets,
     refetch,
   } = useTotalAssets(selectedChainName);
-  const { getChainName, getNativeDenom, isNativeAsset } =
+  const { getChainName, getNativeDenom, isNativeAsset, getDenomBySymbolAndChain } =
     useChainUtils(selectedChainName);
 
   const modalControl = useDisclosure();
@@ -70,7 +70,7 @@ const AssetsOverview = ({
       showWithdraw: !isNativeAsset(asset),
       onDeposit: () => {
         const sourceChainName = getChainName(asset.denom);
-        const sourceChainNativeDenom = getNativeDenom(sourceChainName);
+        const denom = getDenomBySymbolAndChain(sourceChainName, asset.symbol);
         flushSync(() => {
           setRowTransferInfo({
             sourceChainName,
@@ -80,7 +80,7 @@ const AssetsOverview = ({
               ...prettyAssetToTransferItem(asset),
               priceDisplayAmount: 0,
               available: 0,
-              denom: sourceChainNativeDenom,
+              denom
             },
           });
         });

examples/asset-list/components/asset-list/DropdownTransferModal.tsx

@@ -188,7 +188,7 @@ const OverviewTransferWrapper = (
         return asset.symbol !== transferToken.symbol;
       })
       .map((asset) => ({
-        available: new BigNumber(asset.amount).toNumber(),
+        available: new BigNumber(asset.displayAmount).toNumber(),
         symbol: asset.symbol,
         name: asset.prettyChainName,
         denom: asset.denom,

examples/asset-list/components/asset-list/RowTransferModal.tsx

@@ -66,25 +66,30 @@ const TransferModalBody = (
 
   const { balance, isLoading: isLoadingBalance } = useBalance(
     sourceChainName,
-    isDeposit
+    isDeposit,
+    transferInfo.token.symbol
   );
 
   const { getChainLogo } = useManager();
   const { tx } = useTx(sourceChainName);
 
   const availableAmount = useMemo(() => {
-    if (!isDeposit) return transferToken.priceDisplayAmount ?? 0;
-    if (isLoading) return 0;
+    if (!isDeposit) return transferToken.available ?? 0;
+    if (isLoadingBalance) return 0;
+
+    console.log('transferInfo.token', transferInfo.token)
 
     return new BigNumber(
-      convRawToDispAmount(transferToken.symbol, balance?.amount || '0')
+      convRawToDispAmount(transferInfo.token.symbol, balance?.amount || '0')
     ).toNumber();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDeposit, isLoading, transferToken]);
+  }, [isDeposit, isLoading, transferToken.symbol, balance?.amount, transferInfo.token.symbol,
+    isLoadingBalance
+  ]);
 
-  const dollarValue = new BigNumber(inputValue)
-    .multipliedBy(prices[symbolToDenom(transferToken.symbol)])
-    .decimalPlaces(2)
+  const dollarValue = new BigNumber(1)
+    .multipliedBy(prices[symbolToDenom(transferToken.symbol, transferInfo.sourceChainName)])
+    .decimalPlaces(6)
     .toNumber();
 
   useEffect(() => {
@@ -145,7 +150,6 @@ const TransferModalBody = (
 
   const sourceChain = useMemo(() => {
     return {
-      symbol: sourceChainInfo.chain_name.toUpperCase(),
       name: sourceChainInfo.pretty_name,
       address: sourceAddress ?? '',
       imgSrc: getChainLogo(sourceChainName) ?? '',
@@ -212,7 +216,7 @@ const TransferModalBody = (
   return (
     <AssetWithdrawTokens
       isDropdown={false}
-      fromSymbol={sourceChain.symbol}
+      fromSymbol={transferInfo.token.symbol}
       fromName={sourceChain.name}
       fromAddress={sourceChain.address}
       fromImgSrc={sourceChain.imgSrc}
@@ -246,7 +250,7 @@ const TransferModalBody = (
 };
 
 export const RowTransferModal = (props: IProps) => {
-  const { modalControl } = props;
+  const { modalControl, transferInfo } = props;
   const [inputValue, setInputValue] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
@@ -258,7 +262,7 @@ export const RowTransferModal = (props: IProps) => {
   return (
     <BasicModal
       isOpen={modalControl.isOpen}
-      title="Deposit"
+      title={transferInfo.type}
       onClose={() => closeModal()}
     >
       <TransferModalBody

examples/asset-list/components/common/Layout.tsx

@@ -24,7 +24,7 @@ export const Layout = ({ children }: { children?: React.ReactNode }) => {
         }}
       >
         <Head>
-          <title>Create Cosmos App</title>
+          <title>Asset List - Create Cosmos App</title>
           <meta name="description" content="Generated by create cosmos app" />
           <link rel="icon" href="/favicon.ico" />
         </Head>

examples/asset-list/hooks/queries/useAssets.ts

@@ -79,13 +79,13 @@ export const useAssets = (chainName: string) => {
 
     const { allBalances, prices, topTokens } = queriesData;
 
-    const nativeAndIbcBalances: Coin[] = allBalances.filter(
+    const nativeAndIbcBalances: Coin[] = allBalances?.filter(
       ({ denom }) => !denom.startsWith('gamm') && prices[denom]
     );
 
     const emptyBalances: Coin[] = ibcAssets
       .filter(({ base }) => {
-        const notInBalances = !nativeAndIbcBalances.find(
+        const notInBalances = !nativeAndIbcBalances?.find(
           ({ denom }) => denom === base
         );
         return notInBalances && prices[base];
@@ -96,7 +96,7 @@ export const useAssets = (chainName: string) => {
       })
       .map((asset) => ({ denom: asset.base, amount: '0' }));
 
-    const finalAssets = [...nativeAndIbcBalances, ...emptyBalances]
+    const finalAssets = [...(nativeAndIbcBalances ?? []), ...emptyBalances]
       .map(({ amount, denom }) => {
         const asset = getAssetByDenom(denom);
         const symbol = denomToSymbol(denom);

examples/asset-list/hooks/queries/useBalance.ts

@@ -4,8 +4,17 @@ import { UseQueryResult } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useQueryHooks } from './useQueryHooks';
 
-export const useBalance = (chainName: string, enabled: boolean = true) => {
+export const useBalance = (chainName: string, enabled: boolean = true,
+  displayDenom?: string
+) => {
   const { address, assets } = useChain(chainName);
+  let denom = assets?.assets[0].base!;
+  for (const asset of assets?.assets || []) {
+    if (asset.display.toLowerCase() === displayDenom?.toLowerCase()) {
+      denom = asset.base;
+      break;
+    }
+  }
 
   const { cosmosQuery, isReady, isFetching } = useQueryHooks(
     chainName,
@@ -15,7 +24,7 @@ export const useBalance = (chainName: string, enabled: boolean = true) => {
   const balanceQuery: UseQueryResult<Coin> =
     cosmosQuery.bank.v1beta1.useBalance({
       request: {
-        denom: assets!.assets[0]!.base,
+        denom,
         address: address || '',
       },
       options: {
@@ -26,13 +35,13 @@ export const useBalance = (chainName: string, enabled: boolean = true) => {
 
   useEffect(() => {
     return () => {
-      balanceQuery.remove();
+      balanceQuery.remove()
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return {
     balance: balanceQuery.data,
-    isLoading: isFetching || balanceQuery.isFetching,
+    isLoading: isFetching // || !!balanceQueries.find(item => item.isFetching),
   };
 };

examples/asset-list/hooks/useChainUtils.ts

@@ -49,8 +49,14 @@ export const useChainUtils = (chainName: string) => {
     return symbol;
   };
 
-  const symbolToDenom = (symbol: CoinSymbol): CoinDenom => {
-    const asset = allAssets.find((asset) => asset.symbol === symbol);
+  const symbolToDenom = (symbol: CoinSymbol, chainName?: string): CoinDenom => {
+    const asset = allAssets.find((asset) => (
+      asset.symbol === symbol
+      && (
+        !chainName
+        || asset.traces?.[0].counterparty.chain_name.toLowerCase() === chainName.toLowerCase()
+      )
+    ));
     const base = asset?.base;
     if (!base) {
       return symbol;
@@ -85,7 +91,7 @@ export const useChainUtils = (chainName: string) => {
     }
     const asset = ibcAssets.find((asset) => asset.base === ibcDenom);
     const ibcChainName = asset?.traces?.[0].counterparty.chain_name;
-    if (!ibcChainName) throw Error('chainName not found: ' + ibcDenom);
+    if (!ibcChainName) throw Error('chainName not found for ibcDenom: ' + ibcDenom);
     return ibcChainName;
   };
 
@@ -111,6 +117,13 @@ export const useChainUtils = (chainName: string) => {
     return denom;
   };
 
+  const getDenomBySymbolAndChain = (chainName: ChainName, symbol: string) => {
+    const chainRecord = getChainRecord(chainName);
+    const denom = chainRecord.assetList?.assets.find((asset) => asset.symbol === symbol)?.base;
+    if (!denom) throw Error('denom not found');
+    return denom;
+  };
+
   const getIbcInfo = (fromChainName: string, toChainName: string) => {
     let flipped = false;
 
@@ -156,5 +169,6 @@ export const useChainUtils = (chainName: string) => {
     getNativeDenom,
     getIbcInfo,
     getExponentByDenom,
+    getDenomBySymbolAndChain
   };
 };

examples/asset-list/package.json

@@ -27,7 +27,7 @@
     "@cosmos-kit/react": "2.17.0",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
-    "@interchain-ui/react": "1.23.22",
+    "@interchain-ui/react": "1.23.29",
     "@interchain-ui/react-no-ssr": "^0.1.6",
     "@tanstack/react-query": "4.32.0",
     "@uidotdev/usehooks": "2.4.1",

examples/asset-list/pages/_app.tsx

@@ -2,7 +2,7 @@ import '../styles/globals.css';
 import '@interchain-ui/react/globalStyles';
 import '@interchain-ui/react/styles';
 
-import { ThemeProvider, Toaster, useTheme } from '@interchain-ui/react';
+import { OverlaysManager, ThemeProvider, Toaster, useTheme } from '@interchain-ui/react';
 import type { AppProps } from 'next/app';
 import { ChainProvider } from '@cosmos-kit/react';
 
@@ -75,6 +75,7 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
       </ChainProvider>
 
       <Toaster position={'top-right'} closeButton={true} />
+      <OverlaysManager />
     </ThemeProvider>
   );
 }