chalabi/cross chain x

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,26 @@ export function HistoryBox({
                     </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/')) {
+                        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 ?? '',
+                        };
+                      }
+
                       return <DenomImage key={index} denom={metadata} />;
                     })}
 
@@ -228,8 +248,16 @@ export function HistoryBox({
                         <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?.[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 +297,16 @@ export function HistoryBox({
                           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?.[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 { 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 @@ export default function SendBox({
   isGroup,
   admin,
   refetchProposals,
+  osmosisBalances,
+  isOsmosisBalancesLoading,
+  refetchOsmosisBalances,
+  resolveOsmosisRefetch,
 }: {
   address: string;
   balances: CombinedBalanceInfo[];
@@ -31,17 +35,31 @@ export default function SendBox({
   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.osmosisTestnetChain,
+        name: 'Osmosis',
+        icon: '/osmosis.svg',
+        prefix: 'osmo',
+      },
+    ],
+    []
+  );
 
   return (
     <div className="rounded-2xl w-full  ">
@@ -79,16 +97,24 @@ export default function SendBox({
               <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}
               />
             ) : (
               <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>
   );