chalabi/cross chain x

.gitignore

@@ -38,4 +38,6 @@ next-env.d.ts
 
 .idea/
 
-certificates
+certificates
+
+/scripts/demons.json

README.md

@@ -31,6 +31,10 @@ NEXT_PUBLIC_RPC_URL=
 NEXT_PUBLIC_API_URL=
 NEXT_PUBLIC_EXPLORER_URL=
 NEXT_PUBLIC_INDEXER_URL=
+NEXT_PUBLIC_OSMOSIS_CHAIN_ID=
+NEXT_PUBLIC_OSMOSIS_RPC_URL=
+NEXT_PUBLIC_OSMOSIS_API_URL=
+NEXT_PUBLIC_OSMOSIS_EXPLORER_URL=
 ```
 
 where
@@ -45,6 +49,10 @@ where
 - `NEXT_PUBLIC_API_URL` is the chain API URL
 - `NEXT_PUBLIC_EXPLORER_URL` is the block explorer URL
 - `NEXT_PUBLIC_INDEXER_URL` is the YACI indexer URL
+- `NEXT_PUBLIC_OSMOSIS_CHAIN_ID` is the osmosis chain ID
+- `NEXT_PUBLIC_OSMOSIS_RPC_URL` is the osmosis RPC URL
+- `NEXT_PUBLIC_OSMOSIS_API_URL` is the osmosis API URL
+- `NEXT_PUBLIC_OSMOSIS_EXPLORER_URL` is the osmosis block explorer URL
 
 ### Development
 

components/bank/components/__tests__/sendBox.test.tsx

@@ -1,7 +1,7 @@
 import { test, expect, afterEach, describe, mock, jest } from 'bun:test';
 import React from 'react';
 import matchers from '@testing-library/jest-dom/matchers';
-import { screen, cleanup, waitFor, fireEvent } from '@testing-library/react';
+import { screen, cleanup, waitFor, fireEvent, within } from '@testing-library/react';
 import SendBox from '@/components/bank/components/sendBox';
 import { mockBalances } from '@/tests/mock';
 import { renderWithChainProvider } from '@/tests/render';
@@ -17,12 +17,45 @@ mock.module('next/router', () => ({
   }),
 }));
 
+// Add this mock before your tests
+mock.module('next/image', () => ({
+  default: (props: any) => {
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img {...props} alt={props.alt || ''} />;
+  },
+}));
+
+// Add this mock at the top of your test file
+mock.module('@/components/bank/forms/ibcSendForm', () => ({
+  default: (props: any) => {
+    return (
+      <div data-testid="ibc-send-form">
+        <div className="dropdown">
+          <label tabIndex={0} aria-label="from-chain-selector" className="btn">
+            {props.selectedFromChain || 'Select Chain'}
+          </label>
+        </div>
+        <div className="dropdown">
+          <label tabIndex={0} aria-label="to-chain-selector" className="btn">
+            {props.selectedToChain || 'Select Chain'}
+          </label>
+        </div>
+      </div>
+    );
+  },
+}));
+
 const renderWithProps = (props = {}) => {
   const defaultProps = {
     address: 'test_address',
     balances: mockBalances,
     isBalancesLoading: false,
     refetchBalances: () => {},
+    refetchHistory: () => {},
+    osmosisBalances: [],
+    isOsmosisBalancesLoading: false,
+    refetchOsmosisBalances: () => {},
+    resolveOsmosisRefetch: () => {},
   };
   return renderWithChainProvider(<SendBox {...defaultProps} {...props} />);
 };
@@ -40,42 +73,27 @@ describe('SendBox', () => {
 
   test('toggles between Send and Cross-Chain Transfer', async () => {
     renderWithProps();
-    expect(screen.getByText('Amount')).toBeInTheDocument();
-
-    fireEvent.click(screen.getByText('Cross-Chain Transfer'));
-    await waitFor(() => expect(screen.getByText('Chain')).toBeInTheDocument());
-  });
-
-  test('displays chain selection dropdown when in Cross-Chain Transfer mode', async () => {
-    renderWithProps();
-    fireEvent.click(screen.getByText('Cross-Chain Transfer'));
-    await waitFor(() => expect(screen.getByText('Chain')).toBeInTheDocument());
-  });
-
-  test('selects a chain in Cross-Chain Transfer mode', async () => {
-    renderWithProps();
-    const crossChainBtn = screen.getByLabelText('cross-chain-transfer-tab');
-    fireEvent.click(crossChainBtn);
-
-    await waitFor(() => {
-      const chainSelector = screen.getByLabelText('chain-selector');
-      expect(chainSelector).toBeTruthy();
-    });
+    // Check initial send form
+    expect(screen.getByPlaceholderText('0.00')).toBeInTheDocument();
+    expect(screen.queryByLabelText('to-chain-selector')).not.toBeInTheDocument();
 
-    const chainSelector = screen.getByLabelText('chain-selector');
-    fireEvent.click(chainSelector);
+    // Switch to cross-chain transfer
+    fireEvent.click(screen.getByLabelText('cross-chain-transfer-tab'));
 
+    // Verify cross-chain elements are present
     await waitFor(() => {
-      const osmosisOption = screen.getByText('Osmosis');
-      expect(osmosisOption).toBeTruthy();
+      expect(screen.getByLabelText('from-chain-selector')).toBeInTheDocument();
+      expect(screen.getByLabelText('to-chain-selector')).toBeInTheDocument();
     });
+  });
 
-    const osmosisOption = screen.getByText('Osmosis');
-    fireEvent.click(osmosisOption);
+  test('displays chain selection dropdowns in Cross-Chain Transfer mode', async () => {
+    renderWithProps();
+    fireEvent.click(screen.getByLabelText('cross-chain-transfer-tab'));
 
     await waitFor(() => {
-      const updatedChainSelector = screen.getByLabelText('chain-selector');
-      expect(updatedChainSelector.textContent).toContain('Osmosis');
+      expect(screen.getByLabelText('from-chain-selector')).toBeInTheDocument();
+      expect(screen.getByLabelText('to-chain-selector')).toBeInTheDocument();
     });
   });
 });

components/bank/components/historyBox.tsx

@@ -1,12 +1,13 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import { TruncatedAddressWithCopy } from '@/components/react/addressCopy';
 import TxInfoModal from '../modals/txInfo';
-import { shiftDigits, truncateString } from '@/utils';
+import { denomToAsset, shiftDigits, truncateString } from '@/utils';
 import { BurnIcon, DenomImage, formatDenom, MintIcon } from '@/components';
 import { HistoryTxType, useTokenFactoryDenomsMetadata } from '@/hooks';
 import { ReceiveIcon, SendIcon } from '@/components/icons';
 
 import useIsMobile from '@/hooks/useIsMobile';
+import env from '@/config/env';
 
 interface Transaction {
   tx_type: HistoryTxType;
@@ -216,7 +217,40 @@
                     </div>
 
                     {tx.data.amount.map((amt, index) => {
-                      const metadata = metadatas?.metadatas.find(m => m.base === amt.denom);
+                      const assetInfo = denomToAsset(env.chain, amt.denom);
+                      let metadata = metadatas?.metadatas.find(m => m.base === amt.denom);
+
+                      if (amt.denom.startsWith('ibc/')) {
+                        if (assetInfo) {
+                          metadata = {
+                            description: assetInfo?.description ?? '',
+                            denom_units:
+                              assetInfo?.denom_units?.map(unit => ({
+                                ...unit,
+                                aliases: unit.aliases || [],
+                              })) ?? [],
+                            base: assetInfo?.base ?? '',
+                            display: assetInfo?.display ?? '',
+                            name: assetInfo?.name ?? '',
+                            symbol: assetInfo?.symbol ?? '',
+                            uri: assetInfo?.logo_URIs?.svg ?? assetInfo?.logo_URIs?.png ?? '',
+                            uri_hash: assetInfo?.logo_URIs?.svg ?? assetInfo?.logo_URIs?.png ?? '',
+                          };
+                        } else {
+                          //  assetInfo is undefined
+                          metadata = {
+                            description: '',
+                            denom_units: [],
+                            base: '',
+                            display: '',
+                            name: '',
+                            symbol: '',
+                            uri: '',
+                            uri_hash: '',
+                          };
+                        }
+                      }
+
                       return <DenomImage key={index} denom={metadata} />;
                     })}
 
@@ -228,8 +262,18 @@
                         <p className="font-semibold text-[#161616] dark:text-white">
                           {tx.data.amount.map((amt, index) => {
                             const metadata = metadatas?.metadatas.find(m => m.base === amt.denom);
-                            const display = metadata?.display ?? metadata?.symbol ?? '';
-                            return metadata?.display.startsWith('factory')
+                            let display = metadata?.display ?? metadata?.symbol ?? '';
+
+                            if (amt.denom.startsWith('ibc/')) {
+                              const assetInfo = denomToAsset(env.chain, amt.denom);
+                              if (assetInfo?.traces && assetInfo.traces.length > 0) {
+                                if (assetInfo.traces[0].counterparty?.base_denom) {
+                                  display = assetInfo.traces[0].counterparty.base_denom.slice(1);
+                                }
+                              }
+                            }
+
+                            return metadata?.display?.startsWith('factory')
                               ? metadata?.display?.split('/').pop()?.toUpperCase()
                               : display.length > 4
                                 ? display.slice(0, 4).toUpperCase() + '...'
@@ -269,7 +313,18 @@
                           const metadata = metadatas?.metadatas.find(m => m.base === amt.denom);
                           const exponent = Number(metadata?.denom_units[1]?.exponent) || 6;
                           const amount = Number(shiftDigits(amt.amount, -exponent));
-                          return `${formatLargeNumber(amount)} ${formatDenom(amt.denom)}`;
+                          let baseDenom = formatDenom(amt.denom);
+
+                          if (amt.denom.startsWith('ibc/')) {
+                            const assetInfo = denomToAsset(env.chain, amt.denom);
+                            if (assetInfo?.traces && assetInfo.traces.length > 0) {
+                              if (assetInfo.traces[0].counterparty?.base_denom) {
+                                baseDenom = assetInfo.traces[0].counterparty.base_denom.slice(1);
+                              }
+                            }
+                          }
+
+                          return `${formatLargeNumber(amount)} ${baseDenom.toUpperCase()}`;
                         })
                         .join(', ')}
                     </p>

components/bank/components/sendBox.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import SendForm from '../forms/sendForm';
 import IbcSendForm from '../forms/ibcSendForm';
-
+import env from '@/config/env';
 import { CombinedBalanceInfo } from '@/utils/types';
 
 export interface IbcChain {
@@ -21,6 +21,10 @@
   isGroup,
   admin,
   refetchProposals,
+  osmosisBalances,
+  isOsmosisBalancesLoading,
+  refetchOsmosisBalances,
+  resolveOsmosisRefetch,
 }: {
   address: string;
   balances: CombinedBalanceInfo[];
@@ -31,17 +35,43 @@
   selectedDenom?: string;
   isGroup?: boolean;
   admin?: string;
+  osmosisBalances: CombinedBalanceInfo[];
+  isOsmosisBalancesLoading: boolean;
+  refetchOsmosisBalances: () => void;
+  resolveOsmosisRefetch: () => void;
 }) {
   const [activeTab, setActiveTab] = useState<'send' | 'cross-chain'>('send');
-  const [selectedChain, setSelectedChain] = useState('');
-  const ibcChains: IbcChain[] = [
-    {
-      id: 'osmosis',
-      name: 'Osmosis',
-      icon: 'https://osmosis.zone/assets/icons/osmo-logo-icon.svg',
-      prefix: 'osmo',
-    },
-  ];
+  const [selectedFromChain, setSelectedFromChain] = useState('');
+  const [selectedToChain, setSelectedToChain] = useState('');
+  const ibcChains = useMemo<IbcChain[]>(
+    () => [
+      {
+        id: env.chain,
+        name: 'Manifest',
+        icon: 'logo.svg',
+        prefix: 'manifest',
+      },
+      {
+        id: env.osmosisChain,
+        name: 'Osmosis',
+        icon: 'osmosis.svg',
+        prefix: 'osmo',
+      },
+    ],
+    []
+  );
+
+  useEffect(() => {
+    if (selectedFromChain && selectedToChain && selectedFromChain === selectedToChain) {
+      // If chains match, switch the destination chain to the other available chain
+      const otherChain = ibcChains.find(chain => chain.id !== selectedFromChain)?.id || '';
+      setSelectedToChain(otherChain);
+    }
+  }, [selectedFromChain, selectedToChain, ibcChains]);
+
+  const getAvailableToChains = useMemo(() => {
+    return ibcChains.filter(chain => chain.id !== selectedFromChain);
+  }, [ibcChains, selectedFromChain]);
 
   return (
     <div className="rounded-2xl w-full  ">
@@ -79,16 +109,25 @@
               <IbcSendForm
                 isIbcTransfer={true}
                 ibcChains={ibcChains}
-                selectedChain={selectedChain}
-                setSelectedChain={setSelectedChain}
+                selectedFromChain={selectedFromChain}
+                setSelectedFromChain={setSelectedFromChain}
+                selectedToChain={selectedToChain}
+                setSelectedToChain={setSelectedToChain}
                 address={address}
-                destinationChain={selectedChain}
+                destinationChain={selectedToChain}
                 balances={balances}
                 isBalancesLoading={isBalancesLoading}
                 refetchBalances={refetchBalances}
                 refetchHistory={refetchHistory}
                 selectedDenom={selectedDenom}
+                osmosisBalances={osmosisBalances}
                 isGroup={isGroup}
+                admin={admin}
+                refetchProposals={refetchProposals}
+                isOsmosisBalancesLoading={isOsmosisBalancesLoading}
+                refetchOsmosisBalances={refetchOsmosisBalances}
+                resolveOsmosisRefetch={resolveOsmosisRefetch}
+                availableToChains={getAvailableToChains}
               />
             ) : (
               <SendForm

components/bank/components/tokenList.tsx

@@ -16,6 +16,10 @@ interface TokenListProps {
   admin?: string;
   refetchProposals?: () => void;
   searchTerm?: string;
+  osmosisBalances?: CombinedBalanceInfo[] | undefined;
+  isOsmosisBalancesLoading?: boolean;
+  refetchOsmosisBalances?: () => void;
+  resolveOsmosisRefetch?: () => void;
 }
 
 export function TokenList(props: Readonly<TokenListProps>) {
@@ -30,6 +34,10 @@ export function TokenList(props: Readonly<TokenListProps>) {
     admin,
     refetchProposals,
     searchTerm = '',
+    osmosisBalances,
+    isOsmosisBalancesLoading,
+    refetchOsmosisBalances,
+    resolveOsmosisRefetch,
   } = props;
   const [selectedDenom, setSelectedDenom] = useState<any>(null);
   const [isSendModalOpen, setIsSendModalOpen] = useState(false);
@@ -107,9 +115,16 @@ export function TokenList(props: Readonly<TokenListProps>) {
                   <div className="  flex items-center justify-center">
                     <DenomImage denom={balance.metadata} />
                   </div>
-                  <p className="font-semibold text-[#161616] dark:text-white">
-                    {truncateString(balance.metadata?.display ?? '', 12).toUpperCase()}
-                  </p>
+                  <div>
+                    <p className="font-semibold text-[#161616] dark:text-white">
+                      {truncateString(balance.metadata?.display ?? '', 12).toUpperCase()}
+                    </p>
+                    <p className="text-sm text-[#00000099] dark:text-[#FFFFFF99]">
+                      {balance.metadata?.denom_units[0]?.denom.startsWith('ibc')
+                        ? balance.metadata?.denom_units[0]?.aliases[0]
+                        : balance.metadata?.denom_units[0]?.denom.split('/').pop()}
+                    </p>
+                  </div>
                 </div>
                 <div className="text-center hidden sm:block md:block lg:hidden xl:block">
                   <p className="font-semibold text-[#161616] dark:text-white">
@@ -233,6 +248,10 @@ export function TokenList(props: Readonly<TokenListProps>) {
         isGroup={isGroup}
         admin={admin}
         refetchProposals={refetchProposals}
+        osmosisBalances={osmosisBalances ?? []}
+        isOsmosisBalancesLoading={isOsmosisBalancesLoading ?? false}
+        refetchOsmosisBalances={refetchOsmosisBalances ?? (() => {})}
+        resolveOsmosisRefetch={resolveOsmosisRefetch ?? (() => {})}
       />
     </div>
   );