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

DEV-11 Attempt

webapps/world-builder-dashboard/src/assets/IconInfoCircle.tsx

@@ -27,4 +27,4 @@ const IconInfoCircle = forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
   </svg>
 ))
 
-export default IconInfoCircle
+export default IconInfoCircle

webapps/world-builder-dashboard/src/assets/IconLock.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react'
+
+const IconLock = forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>((props, ref) => (
+  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' {...props} ref={ref}>
+    <path
+      d='M14.1667 9.16667V6.66667C14.1667 4.36548 12.3012 2.5 10 2.5C7.69881 2.5 5.83333 4.36548 5.83333 6.66667V9.16667M6.5 17.5H13.5C14.9001 17.5 15.6002 17.5 16.135 17.2275C16.6054 16.9878 16.9878 16.6054 17.2275 16.135C17.5 15.6002 17.5 14.9001 17.5 13.5V13.1667C17.5 11.7665 17.5 11.0665 17.2275 10.5317C16.9878 10.0613 16.6054 9.67883 16.135 9.43915C15.6002 9.16667 14.9001 9.16667 13.5 9.16667H6.5C5.09987 9.16667 4.3998 9.16667 3.86502 9.43915C3.39462 9.67883 3.01217 10.0613 2.77248 10.5317C2.5 11.0665 2.5 11.7665 2.5 13.1667V13.5C2.5 14.9001 2.5 15.6002 2.77248 16.135C3.01217 16.6054 3.39462 16.9878 3.86502 17.2275C4.3998 17.5 5.09987 17.5 6.5 17.5Z'
+      stroke='white'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+    />
+  </svg>
+))
+
+export default IconLock

webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.tsx

@@ -95,15 +95,15 @@ const ActionButton: React.FC<ActionButtonProps> = ({
         if (selectedBridgeToken.address != ZERO_ADDRESS) {
           const allowance = (await bridger?.getAllowance(selectedLowNetwork.rpcs[0], connectedAccount ?? '')) ?? ''
           const allowanceToCheck = ethers.utils.formatUnits(allowance, decimals)
-            
+
           // approve first
-          if (Number(allowanceToCheck) < Number(amount)) {
+          if (Number(allowanceToCheck) < Number(amountToSend)) {
             const txApprove = await bridger?.approve(amountToSend, signer)
             await txApprove.wait()
-            queryClient.refetchQueries(['estimatedFee'])
           }
         }
         const tx = await bridger?.transfer({ amount: amountToSend, signer, destinationProvider })
+        console.log("transfer .. ?")
         await tx?.wait()
         return {
           type: 'DEPOSIT',

webapps/world-builder-dashboard/src/components/bridge/bridge/BridgeView.tsx

@@ -80,7 +80,6 @@ const BridgeView = ({
 
         const allowance = await bridger?.getAllowance(originNetwork.rpcs[0], connectedAccount ?? '')
         const decimals = tokenInformation?.decimalPlaces ?? 18
-        console.log(decimals)
         const parsedValue = value ? ethers.utils.parseUnits(value, decimals) : ethers.utils.parseEther('0')
 
         let approvalFee = ethers.utils.parseEther('0') // Default to zero if no approval needed
@@ -122,7 +121,6 @@ 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({originChainId, destinationChainId, chainIds, selectedBridgeToken})
 
       if (!chainIds.includes(String(destinationChainId))) {
         return
@@ -162,6 +160,7 @@ const BridgeView = ({
     if ((isSource && direction === 'DEPOSIT') || (!isSource && direction === 'WITHDRAW')) {
       return (
         <NetworkSelector
+          direction={direction}
           networks={selectedNetworkType === 'Testnet' ? [L1_NETWORK, L2_NETWORK] : [L1_MAIN_NETWORK, L2_MAIN_NETWORK]}
           selectedNetwork={selectedLowNetwork}
           onChange={setSelectedLowNetwork}
@@ -173,6 +172,7 @@ const BridgeView = ({
           networks={selectedNetworkType === 'Testnet' ? [L2_NETWORK, L3_NETWORK] : [L2_MAIN_NETWORK, L3_MAIN_NETWORK]}
           selectedNetwork={selectedHighNetwork}
           onChange={setSelectedHighNetwork}
+          direction={direction}
         />
       )
     }

webapps/world-builder-dashboard/src/components/bridge/bridge/NetworkSelector.tsx

@@ -13,19 +13,22 @@ import IconCheck from '@/assets/IconCheck'
 import IconChevronDown from '@/assets/IconChevronDown'
 import IconEthereum from '@/assets/IconEthereum'
 import IconG7T from '@/assets/IconG7T'
-import { HighNetworkInterface, NetworkInterface } from '@/contexts/BlockchainContext'
+import { HighNetworkInterface, NetworkInterface, useBlockchainContext } from '@/contexts/BlockchainContext'
 
 type NetworkSelectorProps = {
   networks: NetworkInterface[]
   selectedNetwork: NetworkInterface
   onChange: (network: NetworkInterface | HighNetworkInterface) => void
+  direction: 'DEPOSIT' | 'WITHDRAW'
 } & InputBaseProps
 
-const NetworkSelector = ({ networks, onChange, selectedNetwork }: NetworkSelectorProps) => {
+const NetworkSelector = ({ networks, onChange, selectedNetwork, direction }: NetworkSelectorProps) => {
   const combobox = useCombobox({
     onDropdownClose: () => combobox.resetSelectedOption()
   })
 
+  const { selectedHighNetwork, selectedLowNetwork } = useBlockchainContext()
+
   const networkLogo = (chainId: number) => {
     switch (chainId) {
       case L1_NETWORK.chainId:
@@ -73,23 +76,28 @@ const NetworkSelector = ({ networks, onChange, selectedNetwork }: NetworkSelecto
       <Combobox.Dropdown className='!bg-dark-900 !rounded-md !border-dark-700'>
         <Combobox.Options>
           {networks.map((n) => {
-            return (
-              <Combobox.Option value={String(n.chainId)} key={n.chainId}>
-                <Group>
-                  <div
-                    className={
-                      n.chainId === selectedNetwork.chainId ? styles.optionContainerSelected : styles.optionContainer
-                    }
-                  >
-                    <div className={styles.optionLeftSection}>
-                      {networkLogo(n.chainId)}
-                      {n.displayName}
+            if (direction === "DEPOSIT" ? selectedHighNetwork.chainId !== n.chainId && selectedHighNetwork.chainId === selectedNetwork.chainId : selectedLowNetwork.chainId !== n.chainId && selectedLowNetwork.chainId === selectedNetwork.chainId) {
+              return
+            }
+            else {
+              return (
+                <Combobox.Option value={String(n.chainId)} key={n.chainId}>
+                  <Group>
+                    <div
+                      className={
+                        n.chainId === selectedNetwork.chainId ? styles.optionContainerSelected : styles.optionContainer
+                      }
+                    >
+                      <div className={styles.optionLeftSection}>
+                        {networkLogo(n.chainId)}
+                        {n.displayName}
+                      </div>
+                      {n.chainId === selectedNetwork.chainId && <IconCheck />}
                     </div>
-                    {n.chainId === selectedNetwork.chainId && <IconCheck />}
-                  </div>
-                </Group>
-              </Combobox.Option>
-            )
+                  </Group>
+                </Combobox.Option>
+              )
+            }
           })}
         </Combobox.Options>
       </Combobox.Dropdown>

webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx

@@ -2,10 +2,12 @@ import React from 'react'
 import { getHighNetworks, getLowNetworks } from '../../../../constants'
 import DepositMobile from './DepositMobile'
 import styles from './WithdrawTransactions.module.css'
+import { BridgeTransferStatus } from 'game7-bridge-sdk'
 import { useMediaQuery } from 'summon-ui/mantine'
 import IconArrowNarrowDown from '@/assets/IconArrowNarrowDown'
 import IconLinkExternal02 from '@/assets/IconLinkExternal02'
 import { useBlockchainContext } from '@/contexts/BlockchainContext'
+import { useBridgeTransfer } from '@/hooks/useBridgeTransfer'
 import { useDepositStatus } from '@/hooks/useL2ToL1MessageStatus'
 import { TransactionRecord } from '@/utils/bridge/depositERC20ArbitrumSDK'
 import { ETA, timeAgo } from '@/utils/timeFormat'
@@ -26,6 +28,9 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
   const tokenInformation = getTokensForNetwork(deposit?.lowNetworkChainId, connectedAccount).find(
     (token) => token.address === deposit?.tokenAddress
   )
+  const { returnTransferData } = useBridgeTransfer()
+  const { data: transferStatus, isLoading } = returnTransferData({ txRecord: deposit })
+
   return (
     <>
       {isLoadingStatus && smallView ? (
@@ -50,7 +55,7 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
               >{`${tokenInformation?.decimals ? Number(deposit.amount) / tokenInformation?.decimals : deposit.amount} ${tokenInformation?.symbol}`}</div>
               <div className={styles.gridItem}>{depositInfo.from}</div>
               <div className={styles.gridItem}>{depositInfo.to}</div>
-              {isLoadingStatus ? (
+              {isLoading ? (
                 <>
                   <div className={styles.gridItem}>
                     <div className={styles.loading}>Loading</div>
@@ -67,7 +72,9 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
                     className={styles.explorerLink}
                   >
                     <div className={styles.gridItem}>
-                      {status?.l2Result?.complete ? (
+                      {transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_REDEEMED ||
+                      transferStatus?.status === BridgeTransferStatus.DEPOSIT_GAS_DEPOSITED ||
+                      transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_FUNDS_DEPOSITED_ON_CHILD ? (
                         <div className={styles.settled}>
                           Completed
                           <IconLinkExternal02 stroke='#fff' />
@@ -86,7 +93,9 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
                     </div>
                   ) : (
                     <div className={styles.gridItemImportant}>
-                      {status?.highNetworkTimestamp ? (
+                      {transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_REDEEMED ||
+                      transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_REDEEMED ||
+                      transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_FUNDS_DEPOSITED_ON_CHILD ? (
                         <>
                           {status?.highNetworkTimestamp === undefined
                             ? 'No status found'

webapps/world-builder-dashboard/src/components/notifications/NotificationsDropModal.module.css

@@ -233,7 +233,7 @@
 }
 
 .closeIconMultiple:hover {
-  stroke: var(--Purple-800, #5925dc);
+  stroke: #fff;
 }
 
 @media (max-width: 1199px) {

webapps/world-builder-dashboard/src/components/notifications/NotificationsDropModal.tsx

@@ -131,6 +131,7 @@ export const FloatingNotification = ({ notifications }: { notifications: BridgeN
   const { setIsDropdownOpened } = useBridgeNotificationsContext()
   const { selectedNetworkType } = useBlockchainContext()
   const handleClick = () => {
+    console.log('clickity?')
     setIsDropdownOpened(true)
   }
   if (!notifications || notifications.length === 0) {

webapps/world-builder-dashboard/src/contexts/BlockchainContext.tsx

@@ -15,6 +15,7 @@ import {
 import { ethers } from 'ethers'
 import { getTokensForNetwork, Token } from '@/utils/tokens'
 
+
 interface BlockchainContextType {
   walletProvider?: ethers.providers.Web3Provider
   connectedAccount?: string
@@ -90,6 +91,7 @@ export const BlockchainProvider: React.FC<BlockchainProviderProps> = ({ children
   const [selectedBridgeToken, setSelectedBridgeToken] = useState<Token>(
     getTokensForNetwork(DEFAULT_LOW_NETWORK.chainId, connectedAccount)[0]
   )
+
   const tokenAddress = '0x5f88d811246222F6CB54266C42cc1310510b9feA'
 
   const setSelectedLowNetwork = (network: NetworkInterface) => {
@@ -115,7 +117,7 @@ export const BlockchainProvider: React.FC<BlockchainProviderProps> = ({ children
     if (_selectedNetworkType) {
       setSelectedNetworkType(_selectedNetworkType as NetworkType)
     } else {
-      setSelectedNetworkType('Testnet')
+      setSelectedNetworkType('Mainnet')
     }
   }, [])
 
@@ -154,6 +156,7 @@ export const BlockchainProvider: React.FC<BlockchainProviderProps> = ({ children
     } else {
       setSelectedLowNetwork(DEFAULT_LOW_MAINNET_NETWORK)
       setSelectedHighNetwork(DEFAULT_HIGH_MAINNET_NETWORK)
+
     }
   }, [selectedNetworkType])
 

webapps/world-builder-dashboard/src/hooks/useBridgeTransfer.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query'
+  import { useMutation, useQueryClient } from 'react-query'
 import { useQuery } from 'react-query'
 import { useNavigate } from 'react-router-dom'
 import { getNetworks, L1_NETWORK, L2_NETWORK } from '../../constants'
@@ -79,17 +79,17 @@ export const useBridgeTransfer = () => {
         }
       },
       {
-        placeholderData: () => {
-          const transactions = getCachedTransactions()
-          const cachedTransaction = transactions.find((t: any) =>
-            isDeposit ? t.lowNetworkHash === txRecord.lowNetworkHash : t.highNetworkHash === txRecord.highNetworkHash
-          )
-
-          if (cachedTransaction && cachedTransaction.status !== undefined) {
-            status = cachedTransaction.status
-            return { status }
-          }
-        },
+        // placeholderData: () => {
+        //   const transactions = getCachedTransactions()
+        //   const cachedTransaction = transactions.find((t: any) =>
+        //     isDeposit ? t.lowNetworkHash === txRecord.lowNetworkHash : t.highNetworkHash === txRecord.highNetworkHash
+        //   )
+
+        //   if (cachedTransaction && cachedTransaction.status !== undefined) {
+        //     status = cachedTransaction.status
+        //     return { status }
+        //   }
+        // },
         staleTime: 2 * 60 * 1000,
         refetchInterval: shouldFetchStatus(getCachedTransactions().find((t: any) => t.txHash === txHash))
           ? 5 * 60 * 1000

webapps/world-builder-dashboard/src/hooks/useL2ToL1MessageStatus.ts

@@ -147,7 +147,7 @@ const fetchDepositStatus = async (deposit: TransactionRecord, selectedNetworkTyp
   let l2Result
 
   try {
-    l2Result = await l1ContractCallReceipt.waitForChildTransactionReceipt(l2Provider, l1Receipt.confirmations)
+    l2Result = await l1ContractCallReceipt.waitForChildTransactionReceipt(l2Provider, l1Receipt.confirmations, 1)
   } catch (e) {
     console.error('Error waiting for child transaction receipt:', { deposit, e })
   }
@@ -169,7 +169,7 @@ const fetchDepositStatus = async (deposit: TransactionRecord, selectedNetworkTyp
 export const useDepositStatus = (deposit: TransactionRecord, selectedNetworkType: NetworkType) => {
   return useQuery(['depositStatus', deposit], () => fetchDepositStatus(deposit, selectedNetworkType), {
     refetchInterval: 60000 * 3,
-    staleTime: 2 * 60 * 1000 // 2 minutes
+    staleTime: 2 * 60 * 1000
   })
 }
 

webapps/world-builder-dashboard/src/layouts/MainLayout/DesktopSidebar.tsx

@@ -4,6 +4,7 @@ import styles from './MainLayout.module.css'
 import { Tooltip } from 'summon-ui/mantine'
 import IconExternalLink from '@/assets/IconExternalLink'
 import IconInfoCircle from '@/assets/IconInfoCircle'
+import IconLock from '@/assets/IconLock'
 import IconLogout from '@/assets/IconLogout'
 import NetworkToggle from '@/components/commonComponents/networkToggle/NetworkToggle'
 import { useBlockchainContext } from '@/contexts/BlockchainContext'
@@ -26,11 +27,12 @@ const DesktopSidebar: React.FC<DesktopSidebarProps> = ({ navigationItems }) => {
         <div className={styles.navigation}>
           {navigationItems.map((item) => (
             <div
+              aria-disabled={item.name === 'faucet' && selectedNetworkType === 'Mainnet'}
               className={location.pathname.startsWith(item.navigateTo) ? styles.selectedNavButton : styles.navButton}
               onClick={() => {
                 if (item.name === 'documentation' || item.name === 'explorer') {
                   window.open(item.navigateTo, '_blank')
-                } else {
+                } else if (!(item.name === 'faucet' && selectedNetworkType === 'Mainnet')) {
                   navigate(item.navigateTo)
                 }
               }}
@@ -47,6 +49,10 @@ const DesktopSidebar: React.FC<DesktopSidebarProps> = ({ navigationItems }) => {
                   <Tooltip arrowSize={8} radius={'8px'} label={'Only available on Testnet'} withArrow>
                     <IconInfoCircle stroke='#fff' />
                   </Tooltip>
+                ) : item.name === 'faucet' && selectedNetworkType === 'Mainnet' ? (
+                  <Tooltip arrowSize={8} radius={'8px'} label={'Only available on Testnet'} withArrow>
+                    <IconLock stroke='#fff' />
+                  </Tooltip>
                 ) : (
                   <></>
                 )}

webapps/world-builder-dashboard/src/layouts/MainLayout/MainLayout.tsx

@@ -19,7 +19,7 @@ const MainLayout: React.FC<MainLayoutProps> = ({}) => {
   const location = useLocation()
   const { selectedNetworkType } = useBlockchainContext()
 
-  const TESTNET_NAVIGATION_ITEMS = [
+  const NAVIGATION_ITEMS = [
     {
       name: 'faucet',
       navigateTo: '/faucet',
@@ -42,8 +42,6 @@ const MainLayout: React.FC<MainLayoutProps> = ({}) => {
     }
   ]
 
-  const MAINNET_NAVIGATION_ITEMS = TESTNET_NAVIGATION_ITEMS.slice(1, TESTNET_NAVIGATION_ITEMS.length)
-  const NAVIGATION_ITEMS = selectedNetworkType === 'Mainnet' ? MAINNET_NAVIGATION_ITEMS : TESTNET_NAVIGATION_ITEMS
   const smallView = useMediaQuery('(max-width: 1199px)')
   return (
     <div className={styles.container}>

webapps/world-builder-dashboard/src/layouts/MainLayout/MobileSidebar.tsx

@@ -6,6 +6,7 @@ import { Tooltip } from 'summon-ui/mantine'
 import IconExternalLink from '@/assets/IconExternalLink'
 import IconHamburgerLanding from '@/assets/IconHamburgerLanding'
 import IconInfoCircle from '@/assets/IconInfoCircle'
+import IconLock from '@/assets/IconLock'
 import IconLogoutLarge from '@/assets/IconLogoutLarge'
 import NetworkToggle from '@/components/commonComponents/networkToggle/NetworkToggle'
 import { useBlockchainContext } from '@/contexts/BlockchainContext'
@@ -54,7 +55,7 @@ const MobileSidebar: React.FC<MobileSidebarProps> = ({ navigationItems }) => {
                   setIsExpanded(false)
                   if (item.name === 'documentation' || item.name === 'explorer') {
                     window.open(item.navigateTo, '_blank')
-                  } else {
+                  } else if (!(item.name === 'faucet' && selectedNetworkType === 'Mainnet')) {
                     navigate(item.navigateTo)
                   }
                 }}
@@ -66,11 +67,15 @@ const MobileSidebar: React.FC<MobileSidebarProps> = ({ navigationItems }) => {
                 </div>
                 <div style={{ display: 'flex' }}>
                   {item.name === 'documentation' || item.name === 'explorer' ? (
-                    <IconExternalLink className={parentStyles.icon} />
+                    <IconExternalLink className={styles.icon} />
                   ) : item.name === 'faucet' && selectedNetworkType === 'Testnet' ? (
                     <Tooltip arrowSize={8} radius={'8px'} label={'Only available on Testnet'} withArrow>
                       <IconInfoCircle stroke='#fff' />
                     </Tooltip>
+                  ) : item.name === 'faucet' && selectedNetworkType === 'Mainnet' ? (
+                    <Tooltip arrowSize={8} radius={'8px'} label={'Only available on Testnet'} withArrow>
+                      <IconLock stroke='#fff' />
+                    </Tooltip>
                   ) : (
                     <></>
                   )}