diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx index 4855cdfc..8d33d39c 100644 --- a/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx +++ b/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx @@ -2,6 +2,7 @@ import React from 'react' import { getHighNetworks, getLowNetworks } from '../../../../constants' import DepositMobile from './DepositMobile' import styles from './WithdrawTransactions.module.css' +import { ethers } from 'ethers' import { BridgeTransferStatus } from 'game7-bridge-sdk' import { useMediaQuery } from 'summon-ui/mantine' import IconArrowNarrowDown from '@/assets/IconArrowNarrowDown' @@ -24,13 +25,14 @@ const Deposit: React.FC = ({ deposit }) => { from: getLowNetworks(selectedNetworkType)?.find((n) => n.chainId === deposit.lowNetworkChainId)?.displayName ?? '', to: getHighNetworks(selectedNetworkType)?.find((n) => n.chainId === deposit.highNetworkChainId)?.displayName ?? '' } - const tokenInformation = getTokensForNetwork(deposit?.lowNetworkChainId, connectedAccount).find( - (token) => token.address === deposit?.tokenAddress - ) const { data: status, isLoading: isLoadingStatus } = useDepositStatus(deposit, selectedNetworkType) - const { returnTransferData } = useBridgeTransfer() + const { returnTransferData, getTransactionInputs } = useBridgeTransfer() const { data: transferStatus, isLoading } = returnTransferData({ txRecord: deposit }) + const { data: transactionInputs } = getTransactionInputs({ txRecord: deposit }) + const tokenInformation = getTokensForNetwork(deposit?.lowNetworkChainId, connectedAccount).find( + (token) => token.address === transactionInputs?.tokenOriginAddress + ) return ( <> @@ -53,7 +55,7 @@ const Deposit: React.FC = ({ deposit }) => {
{timeAgo(deposit.lowNetworkTimestamp)}
{`${tokenInformation?.decimals ? Number(deposit.amount) / tokenInformation?.decimals : deposit.amount} ${tokenInformation?.symbol}`}
+ >{`${transactionInputs?.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs?.amount, 6) : deposit.amount} ${transactionInputs?.tokenSymbol}`}
{depositInfo.from}
{depositInfo.to}
<> diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx index 5c06b027..3e54f24b 100644 --- a/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx +++ b/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx @@ -71,8 +71,6 @@ const HistoryDesktop: React.FC = () => { const localTransactions = messages || [] const formattedApiTransactions = apiTransactions ? apiTransactions.map(mapAPIDataToTransactionRecord) : [] const combinedTransactions = mergeTransactions(formattedApiTransactions, localTransactions) - console.log(formattedApiTransactions) - console.log(combinedTransactions) // Retrieve existing transactions from localStorage const storedTransactionsString = localStorage.getItem( `bridge-${connectedAccount}-transactions-${selectedNetworkType}` diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/Withdrawal.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/Withdrawal.tsx index c93ada86..d0e33fc5 100644 --- a/webapps/world-builder-dashboard/src/components/bridge/history/Withdrawal.tsx +++ b/webapps/world-builder-dashboard/src/components/bridge/history/Withdrawal.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react' import { getHighNetworks, getLowNetworks, HIGH_NETWORKS, LOW_NETWORKS } from '../../../../constants' import styles from './WithdrawTransactions.module.css' +import { ethers } from 'ethers' import IconArrowNarrowUp from '@/assets/IconArrowNarrowUp' import IconLinkExternal02 from '@/assets/IconLinkExternal02' import IconWithdrawalNodeCompleted from '@/assets/IconWithdrawalNodeCompleted' @@ -62,10 +63,11 @@ const Withdrawal: React.FC = ({ withdrawal }) => { const highNetworks = getHighNetworks(selectedNetworkType) || HIGH_NETWORKS const status = getStatus(withdrawal, lowNetworks, highNetworks) const { data: transferStatus, isLoading } = returnTransferData({ txRecord: withdrawal }) + + const { data: transactionInputs } = getTransactionInputs({ txRecord: withdrawal }) const tokenInformation = getTokensForNetwork(withdrawal?.highNetworkChainId, connectedAccount).find( - (token) => token.address === withdrawal?.tokenAddress + (token) => token.address === transactionInputs?.tokenAddress ) - const { data: transactionInputs } = getTransactionInputs({ txRecord: withdrawal }) return ( <> @@ -147,7 +149,7 @@ const Withdrawal: React.FC = ({ withdrawal }) => { }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} - >{`${tokenInformation?.decimals ? Number(withdrawal.amount) / tokenInformation?.decimals : withdrawal.amount} ${transactionInputs?.tokenSymbol}`} + >{`${transactionInputs?.tokenSymbol === 'USDC' ? ethers.utils.formatUnits(transactionInputs?.amount, 6) : withdrawal.amount} ${transactionInputs?.tokenSymbol}`}
setCollapseExecuted(!collapseExecuted)} diff --git a/webapps/world-builder-dashboard/src/hooks/useBridgeTransfer.ts b/webapps/world-builder-dashboard/src/hooks/useBridgeTransfer.ts index 7ccff15e..ed4b5e82 100644 --- a/webapps/world-builder-dashboard/src/hooks/useBridgeTransfer.ts +++ b/webapps/world-builder-dashboard/src/hooks/useBridgeTransfer.ts @@ -150,9 +150,7 @@ export const useBridgeTransfer = () => { provider = new ethers.providers.Web3Provider(window.ethereum) const currentChain = await provider.getNetwork() if (currentChain.chainId !== targetChain.chainId) { - console.log('about to switch') await switchChain(targetChain) - console.log('switching?') provider = new ethers.providers.Web3Provider(window.ethereum) //refresh provider } } else { @@ -193,7 +191,6 @@ export const useBridgeTransfer = () => { status: BridgeTransferStatus.WITHDRAW_EXECUTED } } - console.log("couldn't find the transaction..") return { ...t } }) localStorage.setItem( @@ -217,50 +214,47 @@ export const useBridgeTransfer = () => { ) const getTransactionInputs = ({ txRecord }: UseTransferDataProps) => { - const isDeposit = txRecord.type === 'DEPOSIT'; - const txHash = isDeposit ? txRecord.lowNetworkHash : txRecord.highNetworkHash; - const destinationChainId = isDeposit ? txRecord.highNetworkChainId : txRecord.lowNetworkChainId; - const originChainId = isDeposit ? txRecord.lowNetworkChainId : txRecord.highNetworkChainId; - const destinationRpc = getNetworks(selectedNetworkType)?.find((n) => n.chainId === destinationChainId)?.rpcs[0]; - const originRpc = getNetworks(selectedNetworkType)?.find((n) => n.chainId === originChainId)?.rpcs[0]; - const storageKey = `transaction-inputs-${connectedAccount}`; + const isDeposit = txRecord.type === 'DEPOSIT' + const txHash = isDeposit ? txRecord.lowNetworkHash : txRecord.highNetworkHash + const destinationChainId = isDeposit ? txRecord.highNetworkChainId : txRecord.lowNetworkChainId + const originChainId = isDeposit ? txRecord.lowNetworkChainId : txRecord.highNetworkChainId + const destinationRpc = getNetworks(selectedNetworkType)?.find((n) => n.chainId === destinationChainId)?.rpcs[0] + const originRpc = getNetworks(selectedNetworkType)?.find((n) => n.chainId === originChainId)?.rpcs[0] + const storageKey = `transaction-inputs-${connectedAccount}` // Retrieve cached transaction inputs from localStorage const getCachedTransactionInputs = () => { - const cachedData = localStorage.getItem(storageKey); - if (!cachedData) return null; + const cachedData = localStorage.getItem(storageKey) + if (!cachedData) return null - const cachedTransactions = JSON.parse(cachedData); + const cachedTransactions = JSON.parse(cachedData) // Return the specific transaction input based on txHash - return cachedTransactions.find((input: any) => input.txHash === txHash) || null; - }; + return cachedTransactions.find((input: any) => input.txHash === txHash) || null + } // Save transaction inputs to localStorage as an array const saveTransactionInputsToCache = (newInput: any) => { - const cachedData = localStorage.getItem(storageKey); - const cachedTransactions = cachedData ? JSON.parse(cachedData) : []; + const cachedData = localStorage.getItem(storageKey) + const cachedTransactions = cachedData ? JSON.parse(cachedData) : [] - // Check if the transaction already exists in the array const updatedTransactions = cachedTransactions.some((input: any) => input.txHash === newInput.txHash) ? cachedTransactions.map((input: any) => input.txHash === newInput.txHash ? { ...input, ...newInput } : input ) - : [...cachedTransactions, newInput]; // Add new input if not found + : [...cachedTransactions, newInput] - // Save updated transactions back to localStorage - localStorage.setItem(storageKey, JSON.stringify(updatedTransactions)); - }; + localStorage.setItem(storageKey, JSON.stringify(updatedTransactions)) + } // Use React Query to fetch or cache transaction inputs return useQuery( ['transactionInputs', txHash], async () => { - const cachedTransactionInputs = getCachedTransactionInputs(); - + const cachedTransactionInputs = getCachedTransactionInputs() // If found in cache, return the cached data if (cachedTransactionInputs) { - return cachedTransactionInputs; + return cachedTransactionInputs } // Otherwise, fetch transaction inputs from the bridge transfer instance @@ -270,14 +264,15 @@ export const useBridgeTransfer = () => { originNetworkChainId: originChainId ?? 0, destinationSignerOrProviderOrRpc: destinationRpc, originSignerOrProviderOrRpc: originRpc, - }); - - const transactionInputs = await _bridgeTransfer.getTransactionInputs(); + }) + + + const transactionInputs = isDeposit ? await _bridgeTransfer.getInfo() : await _bridgeTransfer.getTransactionInputs() // Save the fetched transaction inputs to cache - saveTransactionInputsToCache({ txHash, ...transactionInputs }); + saveTransactionInputsToCache({ txHash, ...transactionInputs }) - return transactionInputs; + return transactionInputs }, { placeholderData: () => { @@ -287,8 +282,8 @@ export const useBridgeTransfer = () => { refetchOnWindowFocus: false, // Disable refetching on window focus enabled: !!txRecord, // Ensure the query only runs when txRecord exists } - ); - }; + ) + } return { getTransactionInputs, returnTransferData,