use registry | add ibc assets to formatDenom

.env.test

@@ -1,10 +1,30 @@
+# Wallet
 NEXT_PUBLIC_WALLETCONNECT_KEY=test_walletconnect_key
 NEXT_PUBLIC_WEB3AUTH_NETWORK=testnet
 NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=test_client_id
-NEXT_PUBLIC_CHAIN=manifest
-NEXT_PUBLIC_CHAIN_ID=test_chain_id
+
+# Chains
+NEXT_PUBLIC_CHAIN=manifesttestnet
+NEXT_PUBLIC_OSMOSIS_CHAIN=osmosistestnet
+NEXT_PUBLIC_CHAIN_ID='manifest-ledger-testnet'
+NEXT_PUBLIC_OSMOSIS_CHAIN_ID='osmo-test-5'
+NEXT_PUBLIC_AXELAR_CHAIN=axelartestnet
+NEXT_PUBLIC_AXELAR_CHAIN_ID='axelar-testnet-1'
+
+# Ops
 NEXT_PUBLIC_CHAIN_TIER=testnet
-NEXT_PUBLIC_RPC_URL=https://test.rpc.url
-NEXT_PUBLIC_API_URL=https://test.api.url
-NEXT_PUBLIC_EXPLORER_URL=https://test.explorer.url
-NEXT_PUBLIC_INDEXER_URL=https://test.indexer.url
+# Explorer URLs
+NEXT_PUBLIC_EXPLORER_URL=https://testnet.manifest.explorers.guru
+NEXT_PUBLIC_OSMOSIS_EXPLORER_URL=https://manifest.io/testnet-osmosis
+NEXT_PUBLIC_AXELAR_EXPLORER_URL=https://manifest.io/testnet-axelar
+# Indexer URL
+NEXT_PUBLIC_INDEXER_URL=
+# RPC URLs
+NEXT_PUBLIC_RPC_URL=
+NEXT_PUBLIC_API_URL=
+# Osmosis RPC URLs
+NEXT_PUBLIC_OSMOSIS_API_URL=
+NEXT_PUBLIC_OSMOSIS_RPC_URL=
+# Axelar RPC URLs
+NEXT_PUBLIC_AXELAR_API_URL=
+NEXT_PUBLIC_AXELAR_RPC_URL=

components/bank/components/sendBox.tsx

@@ -60,6 +60,13 @@ export default function SendBox({
         prefix: 'osmo',
         chainID: env.osmosisChainId,
       },
+      {
+        id: env.axelarChain,
+        name: 'Axelar',
+        icon: 'https://github.com/cosmos/chain-registry/raw/refs/heads/master/axelar/images/axl.svg',
+        prefix: 'axelar',
+        chainID: env.axelarChainId,
+      },
     ],
     []
   );

components/bank/forms/ibcSendForm.tsx

@@ -30,9 +30,7 @@ import { SearchIcon, TransferIcon } from '@/components/icons';
 
 import { TailwindModal } from '@/components/react/modal';
 import env from '@/config/env';
-import { useChains } from '@cosmos-kit/react';
-import { useSearchParams } from 'next/navigation';
-import { Any } from 'cosmjs-types/google/protobuf/any';
+
 import { useSkipClient } from '@/contexts/skipGoContext';
 
 import { IbcChain } from '@/components';
@@ -207,11 +205,6 @@ export default function IbcSendForm({
 
       const { source_port, source_channel } = getIbcInfo(selectedFromChain.id, selectedToChain.id);
 
-      const skipChains = await skipClient.chains({
-        onlyTestnets: true,
-      });
-      console.log('Available Skip chains:', skipChains);
-
       const token = {
         denom: values.selectedToken.coreDenom,
         amount: amountInBaseUnits,
@@ -231,17 +224,24 @@ export default function IbcSendForm({
       });
 
       console.log('route', route);
-
+      console.log('route.requiredChainAddresses', route.requiredChainAddresses);
       const addressList = route.requiredChainAddresses.map(chainID => ({
         address:
           Object.values(chains).find(chain => chain.chain.chain_id === chainID)?.address ?? '',
       }));
 
-      const userAddresses = route.requiredChainAddresses.map(chainID => ({
-        address:
-          Object.values(chains).find(chain => chain.chain.chain_id === chainID)?.address ?? '',
-        chainID: chainID,
-      }));
+      const userAddresses = route.requiredChainAddresses.map(chainID => {
+        const chainContext = Object.values(chains).find(chain => chain.chain.chain_id === chainID);
+
+        if (!chainContext?.address) {
+          throw new Error(`No address found for chain: ${chainID}`);
+        }
+
+        return {
+          chainID,
+          address: chainContext.address,
+        };
+      });
 
       console.log(userAddresses);
 
@@ -265,7 +265,7 @@ export default function IbcSendForm({
       await skipClient.executeRoute({
         route,
         userAddresses,
-        simulate: true,
+
         // Executes after all of the operations triggered by a user's signature complete.
         // For multi-tx routes that require multiple user signatures, this will be called once for each tx in sequence
         onTransactionCompleted: async (chainID, txHash, status) => {

components/bank/handlers/createMessageUtils.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { formatAmount, formatDenom, formatLargeNumber } from '@/utils';
+import { denomToAsset, formatAmount, formatDenom, formatLargeNumber } from '@/utils';
 import { format } from 'react-string-format';
 import { TruncatedAddressWithCopy } from '@/components/react/addressCopy';
 import { MetadataSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/bank/v1beta1/bank';
@@ -13,7 +13,9 @@ export const createTokenMessage = (
   metadata?: MetadataSDKType[]
 ) => {
   const formattedAmount = formatLargeNumber(formatAmount(amount, denom, metadata));
+
   const formattedDenom = formatDenom(denom);
+
   // coloredAmount is {0}
   const coloredAmount = (
     <span className={`text-${color}-500`}>

components/react/modal.tsx

@@ -94,7 +94,7 @@ export const TailwindModal: React.FC<
   const [qrState, setQRState] = useState<State>(State.Init);
   const [qrMessage, setQrMessage] = useState<string>('');
 
-  const chains = useChains([env.chain, env.osmosisChain]);
+  const chains = useChains([env.chain, env.osmosisChain, env.axelarChain]);
 
   const chainStates = useMemo(() => {
     return Object.values(chains).map(chain => ({

components/wallet.tsx

@@ -36,7 +36,7 @@ interface WalletSectionProps {
 }
 
 export const WalletSection: React.FC<WalletSectionProps> = ({ chainName }) => {
-  const chains = useChains([env.chain, env.osmosisChain]);
+  const chains = useChains([env.chain, env.osmosisChain, env.axelarChain]);
 
   const chainStates = useMemo(() => {
     return Object.values(chains).map(chain => ({

config/env.ts

@@ -1,19 +1,36 @@
 const env = {
-  chainId: process.env.NEXT_PUBLIC_CHAIN_ID ?? '',
-  rpcUrl: process.env.NEXT_PUBLIC_RPC_URL ?? '',
-  explorerUrl: process.env.NEXT_PUBLIC_EXPLORER_URL ?? '',
-  osmosisExplorerUrl: process.env.NEXT_PUBLIC_OSMOSIS_EXPLORER_URL ?? '',
-  osmosisChainId: process.env.NEXT_PUBLIC_OSMOSIS_CHAIN_ID ?? '',
-  web3AuthClientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID ?? '',
+  // Wallet
   walletConnectKey: process.env.NEXT_PUBLIC_WALLETCONNECT_KEY ?? '',
   web3AuthNetwork: process.env.NEXT_PUBLIC_WEB3AUTH_NETWORK ?? '',
+  web3AuthClientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID ?? '',
+
+  // Chains
   chain: process.env.NEXT_PUBLIC_CHAIN ?? '',
   osmosisChain: process.env.NEXT_PUBLIC_OSMOSIS_CHAIN ?? '',
+  axelarChain: process.env.NEXT_PUBLIC_AXELAR_CHAIN ?? '',
+  chainId: process.env.NEXT_PUBLIC_CHAIN_ID ?? '',
+  osmosisChainId: process.env.NEXT_PUBLIC_OSMOSIS_CHAIN_ID ?? '',
+  axelarChainId: process.env.NEXT_PUBLIC_AXELAR_CHAIN_ID ?? '',
+
+  // Ops
   chainTier: process.env.NEXT_PUBLIC_CHAIN_TIER ?? '',
+
+  // Explorer URLs
+  explorerUrl: process.env.NEXT_PUBLIC_EXPLORER_URL ?? '',
+  osmosisExplorerUrl: process.env.NEXT_PUBLIC_OSMOSIS_EXPLORER_URL ?? '',
+  axelarExplorerUrl: process.env.NEXT_PUBLIC_AXELAR_EXPLORER_URL ?? '',
+  // RPC and API URLs
+  rpcUrl: process.env.NEXT_PUBLIC_RPC_URL ?? '',
   apiUrl: process.env.NEXT_PUBLIC_API_URL ?? '',
   indexerUrl: process.env.NEXT_PUBLIC_INDEXER_URL ?? '',
+
+  // Osmosis RPC URLs
   osmosisApiUrl: process.env.NEXT_PUBLIC_OSMOSIS_API_URL ?? '',
   osmosisRpcUrl: process.env.NEXT_PUBLIC_OSMOSIS_RPC_URL ?? '',
+
+  // Axelar RPC URLs
+  axelarApiUrl: process.env.NEXT_PUBLIC_AXELAR_API_URL ?? '',
+  axelarRpcUrl: process.env.NEXT_PUBLIC_AXELAR_RPC_URL ?? '',
 };
 
 export default env;

package.json

@@ -46,17 +46,17 @@
     "@liftedinit/manifestjs": "0.0.1-rc.1",
     "@react-three/drei": "^9.114.0",
     "@react-three/fiber": "^8.17.8",
-    "@skip-go/client": "^0.16.7",
+    "@skip-go/client": "^0.16.8",
     "@tanstack/react-query": "^5.55.0",
     "@tanstack/react-query-devtools": "^5.55.0",
     "@types/file-saver": "^2.0.7",
     "@types/react-syntax-highlighter": "^15.5.13",
     "apexcharts": "^3.54.0",
     "autoprefixer": "^10.4.20",
     "babel-plugin-glsl": "^1.0.0",
-    "chain-registry": "1.69.93",
+    "chain-registry": "^1.69.115",
     "cosmjs-types": "^0.9.0",
-    "cosmos-kit": "^2.23.5",
+    "cosmos-kit": "2.23.9",
     "country-flag-icons": "^1.5.13",
     "daisyui": "^4.12.10",
     "dayjs": "^1.11.13",

pages/_app.tsx

@@ -17,6 +17,7 @@ import {
   assets as osmosisAssets,
   chain as osmosisChain,
 } from 'chain-registry/testnet/osmosistestnet';
+import { assets as axelarAssets, chain as axelarChain } from 'chain-registry/testnet/axelartestnet';
 import { SignerOptions, wallets } from 'cosmos-kit';
 
 import { wallets as cosmosExtensionWallets } from '@cosmos-kit/cosmos-extension-metamask';
@@ -202,8 +203,8 @@ function ManifestApp({ Component, pageProps }: ManifestAppProps) {
         <ReactQueryDevtools />
         {
           <ChainProvider
-            chains={[manifestChain, osmosisChain]}
-            assetLists={[manifestAssets, osmosisAssets]}
+            chains={[manifestChain, osmosisChain, axelarChain]}
+            assetLists={[manifestAssets, osmosisAssets, axelarAssets]}
             defaultChain={manifestChain}
             // @ts-ignore
             wallets={combinedWallets}

pages/bank.tsx

@@ -29,7 +29,7 @@ interface PageSizeConfig {
 }
 
 export default function Bank() {
-  const chains = useChains([env.chain, env.osmosisChain]);
+  const chains = useChains([env.chain, env.osmosisChain, env.axelarChain]);
 
   const isWalletConnected = useMemo(
     () => Object.values(chains).every(chain => chain.isWalletConnected),

utils/format.ts

@@ -1,5 +1,7 @@
 import { MetadataSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/bank/v1beta1/bank';
 import { shiftDigits } from '@/utils/maths';
+import { denomToAsset } from './ibc';
+import env from '@/config/env';
 
 export function formatLargeNumber(num: number): string {
   if (!Number.isFinite(num)) return 'Invalid number';
@@ -30,9 +32,17 @@ export function formatLargeNumber(num: number): string {
 }
 
 export function formatDenom(denom: string): string {
-  const cleanDenom = denom.replace(/^factory\/[^/]+\//, '');
+  const assetInfo = denomToAsset(env.chain, denom);
 
-  if (cleanDenom.startsWith('u')) {
+  // Fallback to cleaning the denom if no assetInfo
+  const cleanDenom = denom?.replace(/^factory\/[^/]+\//, '');
+
+  // Skip cleaning for IBC denoms as they should be resolved via assetInfo
+  if (cleanDenom.startsWith('ibc/')) {
+    return assetInfo?.display.toUpperCase() ?? '';
+  }
+
+  if (cleanDenom?.startsWith('u')) {
     return cleanDenom.slice(1).toUpperCase();
   }