Merge pull request #192 from G7DAO/feat/network-toggle

fix build and log errors
G7DAO · Nov 20, 2024 · a4475e9 · a4475e9
2 parents 190294e + f9d95b4
commit a4475e9
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 31 deletions.
diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.tsx b/webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.tsx
@@ -81,7 +81,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
   const queryClient = useQueryClient()
   const transfer = useMutation(
     async (amount: string) => {
-      const network = networks.find((n) => n.chainId === bridger?.originNetwork.chainId)!
+      const network = networks?.find((n) => n.chainId === bridger?.originNetwork.chainId)!
       const provider = await getProvider(network)
       const signer = provider.getSigner()
       const destinationRPC = direction === 'DEPOSIT' ? selectedHighNetwork.rpcs[0] : selectedLowNetwork.rpcs[0]

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/BridgeView.tsx b/webapps/world-builder-dashboard/src/components/bridge/bridge/BridgeView.tsx
@@ -75,7 +75,7 @@ const BridgeView = ({
     ['estimatedFee', bridger, connectedAccount, value],
     async () => {
       try {
-        const originNetwork = networks.find((n) => n.chainId === bridger?.originNetwork.chainId)
+        const originNetwork = networks?.find((n) => n.chainId === bridger?.originNetwork.chainId)
         if (!originNetwork) throw new Error("Can't find network!")
 
         const allowance = await bridger?.getAllowance(originNetwork.rpcs[0], connectedAccount ?? '')
@@ -122,6 +122,7 @@ const BridgeView = ({
       const originChainId = direction === 'DEPOSIT' ? selectedLowNetwork.chainId : selectedHighNetwork.chainId
       const destinationChainId = direction === 'DEPOSIT' ? selectedHighNetwork.chainId : selectedLowNetwork.chainId
       const chainIds = Object.keys(selectedBridgeToken.tokenAddressMap)
+      console.log({origin, destinationChainId, chainIds, selectedBridgeToken})
 
       if (!chainIds.includes(String(destinationChainId))) {
         return
@@ -164,7 +165,6 @@ const BridgeView = ({
           networks={selectedNetworkType === 'Testnet' ? [L1_NETWORK, L2_NETWORK] : [L1_MAIN_NETWORK, L2_MAIN_NETWORK]}
           selectedNetwork={selectedLowNetwork}
           onChange={setSelectedLowNetwork}
-          selectedToken={selectedBridgeToken}
         />
       )
     } else {
@@ -173,7 +173,6 @@ const BridgeView = ({
           networks={selectedNetworkType === 'Testnet' ? [L2_NETWORK, L3_NETWORK] : [L2_MAIN_NETWORK, L3_MAIN_NETWORK]}
           selectedNetwork={selectedHighNetwork}
           onChange={setSelectedHighNetwork}
-          selectedToken={selectedBridgeToken}
         />
       )
     }

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/NetworkSelector.tsx b/webapps/world-builder-dashboard/src/components/bridge/bridge/NetworkSelector.tsx
@@ -14,16 +14,14 @@ import IconChevronDown from '@/assets/IconChevronDown'
 import IconEthereum from '@/assets/IconEthereum'
 import IconG7T from '@/assets/IconG7T'
 import { HighNetworkInterface, NetworkInterface } from '@/contexts/BlockchainContext'
-import { Token } from '@/utils/tokens'
 
 type NetworkSelectorProps = {
   networks: NetworkInterface[]
   selectedNetwork: NetworkInterface
   onChange: (network: NetworkInterface | HighNetworkInterface) => void
-  selectedToken: Token
 } & InputBaseProps
 
-const NetworkSelector = ({ networks, onChange, selectedNetwork, selectedToken }: NetworkSelectorProps) => {
+const NetworkSelector = ({ networks, onChange, selectedNetwork }: NetworkSelectorProps) => {
   const combobox = useCombobox({
     onDropdownClose: () => combobox.resetSelectedOption()
   })
@@ -75,7 +73,6 @@ const NetworkSelector = ({ networks, onChange, selectedNetwork, selectedToken }:
       <Combobox.Dropdown className='!bg-dark-900 !rounded-md !border-dark-700'>
         <Combobox.Options>
           {networks.map((n) => {
-            const chainIds = Object.keys(selectedToken.tokenAddressMap)
             return (
               <Combobox.Option value={String(n.chainId)} key={n.chainId}>
                 <Group>

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx
@@ -20,8 +20,8 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
   const smallView = useMediaQuery('(max-width: 1199px)')
   const { data: status, isLoading: isLoadingStatus } = useDepositStatus(deposit, selectedNetworkType)
   const depositInfo = {
-    from: getLowNetworks(selectedNetworkType).find((n) => n.chainId === deposit.lowNetworkChainId)?.displayName ?? '',
-    to: getHighNetworks(selectedNetworkType).find((n) => n.chainId === deposit.highNetworkChainId)?.displayName ?? ''
+    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

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/DepositMobile.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/DepositMobile.tsx
@@ -19,8 +19,8 @@ const DepositMobile: React.FC<DepositMobileProps> = ({ deposit, isLoading, selec
   const [isCollapsed, setIsCollapsed] = useState(true)
   const status = useDepositStatus(deposit, selectedNetworkType)
   const depositInfo = {
-    from: getLowNetworks(selectedNetworkType).find((n) => n.chainId === deposit.lowNetworkChainId)?.displayName ?? '',
-    to: getHighNetworks(selectedNetworkType).find((n) => n.chainId === deposit.highNetworkChainId)?.displayName ?? ''
+    from: getLowNetworks(selectedNetworkType)?.find((n) => n.chainId === deposit.lowNetworkChainId)?.displayName ?? '',
+    to: getHighNetworks(selectedNetworkType)?.find((n) => n.chainId === deposit.highNetworkChainId)?.displayName ?? ''
   }
   const smallView = useMediaQuery('(max-width: 1199px)')
 

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx
@@ -60,7 +60,7 @@ const mapAPIDataToTransactionRecord = (apiData: any): TransactionRecord => {
 
 const HistoryDesktop: React.FC<HistoryDesktopProps> = () => {
   const { connectedAccount, selectedNetworkType } = useBlockchainContext()
-  const {data: messages} = useMessages(connectedAccount, selectedNetworkType)
+  const {data: messages} = useMessages(connectedAccount, selectedNetworkType || 'Testnet')
   const { useHistoryTransactions } = useBridgeAPI()
   const { data: apiTransactions } = useHistoryTransactions(connectedAccount)
   const [mergedTransactions, setMergedTransactions] = useState<TransactionRecord[]>([])

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/HistoryMobile.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/HistoryMobile.tsx
@@ -41,7 +41,7 @@ const mapAPIDataToTransactionRecord = (apiData: any): TransactionRecord => {
 }
 const HistoryMobile: React.FC<HistoryMobileProps> = ({}) => {
   const { connectedAccount, selectedNetworkType } = useBlockchainContext()
-  const messages = useMessages(connectedAccount, selectedNetworkType)
+  const messages = useMessages(connectedAccount, selectedNetworkType || 'Testnet')
   const { useHistoryTransactions } = useBridgeAPI()
   const { data: apiTransactions } = useHistoryTransactions(connectedAccount)
   const [mergedTransactions, setMergedTransactions] = useState<TransactionRecord[]>([])

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/Withdrawal.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/Withdrawal.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { getHighNetworks, getLowNetworks } from '../../../../constants'
+import { getHighNetworks, getLowNetworks, HIGH_NETWORKS, LOW_NETWORKS } from '../../../../constants'
 import styles from './WithdrawTransactions.module.css'
 import IconArrowNarrowUp from '@/assets/IconArrowNarrowUp'
 import IconLinkExternal02 from '@/assets/IconLinkExternal02'
@@ -58,8 +58,8 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
   const { claim } = useBridgeTransfer()
   const [collapseExecuted, setCollapseExecuted] = useState(false)
   const [hovered, setHovered] = useState(false)
-  const lowNetworks = getLowNetworks(selectedNetworkType)
-  const highNetworks = getHighNetworks(selectedNetworkType)
+  const lowNetworks = getLowNetworks(selectedNetworkType) || LOW_NETWORKS
+  const highNetworks = getHighNetworks(selectedNetworkType) || HIGH_NETWORKS
   const status = getStatus(withdrawal, lowNetworks, highNetworks)
   const tokenInformation = getTokensForNetwork(withdrawal?.highNetworkChainId, connectedAccount).find(
     (token) => token.address === withdrawal?.tokenAddress

diff --git a/...pps/world-builder-dashboard/src/components/commonComponents/walletButton/WalletButton.tsx b/...pps/world-builder-dashboard/src/components/commonComponents/walletButton/WalletButton.tsx
@@ -21,7 +21,7 @@ const WalletButton: React.FC<WalletButtonProps> = () => {
 
   const { data: nativeBalance } = useNativeBalance({
     account: connectedAccount,
-    rpc: getNetworks(selectedNetworkType).find((network) => network.chainId === chainId)?.rpcs[0] || L3_NETWORK.rpcs[0]
+    rpc: getNetworks(selectedNetworkType)?.find((network) => network.chainId === chainId)?.rpcs[0] || L3_NETWORK.rpcs[0]
   })
 
   const getTokens = async () => {
@@ -45,7 +45,7 @@ const WalletButton: React.FC<WalletButtonProps> = () => {
           <IconWallet04 />
           <div className={styles.balance}>
             {nativeBalance
-              ? `${Number(nativeBalance).toFixed(4)} ${getNetworks(selectedNetworkType).find((network) => network.chainId === chainId)?.nativeCurrency?.symbol}`
+              ? `${Number(nativeBalance).toFixed(4)} ${getNetworks(selectedNetworkType)?.find((network) => network.chainId === chainId)?.nativeCurrency?.symbol}`
               : 'Fetching...'}
           </div>
         </div>

diff --git a/webapps/world-builder-dashboard/src/components/faucet/FaucetView.tsx b/webapps/world-builder-dashboard/src/components/faucet/FaucetView.tsx
@@ -33,7 +33,7 @@ const FaucetView: React.FC<FaucetViewProps> = ({}) => {
   const networks = getNetworks(selectedNetworkType)
 
   useEffect(() => {
-    const targetNetwork = networks.find((n) => n.chainId === faucetTargetChainId)
+    const targetNetwork = networks?.find((n) => n.chainId === faucetTargetChainId)
     if (targetNetwork) {
       setSelectedNetwork(targetNetwork)
     }

diff --git a/webapps/world-builder-dashboard/src/hooks/useBridgeTransfer.ts b/webapps/world-builder-dashboard/src/hooks/useBridgeTransfer.ts
@@ -20,8 +20,8 @@ export const useBridgeTransfer = () => {
     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 destinationRpc = getNetworks(selectedNetworkType)?.find((n) => n.chainId === destinationChainId)?.rpcs[0]
+    const originRpc = getNetworks(selectedNetworkType)?.find((n) => n.chainId === originChainId)?.rpcs[0]
 
     const getCachedTransactions = () => {
       const transactionsString = localStorage.getItem(`bridge-${connectedAccount}-transactions-${selectedNetworkType}`)
@@ -131,9 +131,9 @@ export const useBridgeTransfer = () => {
         txHash: withdrawal.highNetworkHash || '',
         destinationNetworkChainId: withdrawal.lowNetworkChainId ?? 0,
         originNetworkChainId: withdrawal.highNetworkChainId ?? 0,
-        destinationSignerOrProviderOrRpc: getNetworks(selectedNetworkType).find((n) => n.chainId === withdrawal.lowNetworkChainId)
+        destinationSignerOrProviderOrRpc: getNetworks(selectedNetworkType)?.find((n) => n.chainId === withdrawal.lowNetworkChainId)
           ?.rpcs[0],
-        originSignerOrProviderOrRpc: getNetworks(selectedNetworkType).find((n) => n.chainId === withdrawal.highNetworkChainId)
+        originSignerOrProviderOrRpc: getNetworks(selectedNetworkType)?.find((n) => n.chainId === withdrawal.highNetworkChainId)
           ?.rpcs[0]
       })
       const res = await _bridgeTransfer?.execute(signer)

diff --git a/webapps/world-builder-dashboard/src/hooks/useL2ToL1MessageStatus.ts b/webapps/world-builder-dashboard/src/hooks/useL2ToL1MessageStatus.ts
@@ -45,8 +45,8 @@ export interface L2ToL1MessageStatusResult {
 const fetchL2ToL1MessageStatus = async (withdrawal: TransactionRecord, selectedNetworkType: NetworkType) => {
   const { lowNetworkChainId, highNetworkChainId, highNetworkHash, amount, highNetworkTimestamp } = withdrawal
 
-  const lowNetwork = getLowNetworks(selectedNetworkType).find((n) => n.chainId === lowNetworkChainId)
-  const highNetwork = getHighNetworks(selectedNetworkType).find((n) => n.chainId === highNetworkChainId)
+  const lowNetwork = getLowNetworks(selectedNetworkType)?.find((n) => n.chainId === lowNetworkChainId)
+  const highNetwork = getHighNetworks(selectedNetworkType)?.find((n) => n.chainId === highNetworkChainId)
   if (!highNetwork || !lowNetwork || !highNetworkHash) {
     return undefined
   }
@@ -117,8 +117,8 @@ const fetchDepositStatus = async (deposit: TransactionRecord, selectedNetworkTyp
     }
   }
 
-  const lowNetwork = getLowNetworks(selectedNetworkType).find((n) => n.chainId === lowNetworkChainId)
-  const highNetwork = getHighNetworks(selectedNetworkType).find((n) => n.chainId === highNetworkChainId)
+  const lowNetwork = getLowNetworks(selectedNetworkType)?.find((n) => n.chainId === lowNetworkChainId)
+  const highNetwork = getHighNetworks(selectedNetworkType)?.find((n) => n.chainId === highNetworkChainId)
 
   if (!lowNetwork || !lowNetworkHash) {
     return undefined

diff --git a/webapps/world-builder-dashboard/src/utils/web3utils.ts b/webapps/world-builder-dashboard/src/utils/web3utils.ts
@@ -1,4 +1,4 @@
-import { getHighNetworks, getLowNetworks } from '../../constants'
+import { getHighNetworks, getLowNetworks, HIGH_NETWORKS, LOW_NETWORKS } from '../../constants'
 import { ethers } from 'ethers'
 import { NetworkType } from '@/contexts/BlockchainContext'
 
@@ -10,7 +10,7 @@ export const convertToBigNumber = (numberString: string, precision = 18) => {
 }
 
 export const getBlockExplorerUrl = (chainId: number | undefined, selectedNetworkType: NetworkType) => {
-  const network = [...getLowNetworks(selectedNetworkType), ...getHighNetworks(selectedNetworkType)].find(
+  const network = [...getLowNetworks(selectedNetworkType) || LOW_NETWORKS, ...getHighNetworks(selectedNetworkType) || HIGH_NETWORKS].find(
     (n) => n.chainId === chainId
   )
   if (network?.blockExplorerUrls) {
@@ -19,7 +19,7 @@ export const getBlockExplorerUrl = (chainId: number | undefined, selectedNetwork
 }
 
 export const getNetwork = (chainId: number, selectedNetworkType: NetworkType) => {
-  return [...getLowNetworks(selectedNetworkType), ...getHighNetworks(selectedNetworkType)].find(
+  return [...getLowNetworks(selectedNetworkType) || LOW_NETWORKS, ...getHighNetworks(selectedNetworkType) || HIGH_NETWORKS].find(
     (n) => n.chainId === chainId
   )
 }