G7DAO · elclandestin0 · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024
diff --git a/webapps/world-builder-dashboard/constants.ts b/webapps/world-builder-dashboard/constants.ts
@@ -168,27 +168,27 @@ export const USDC_MAINNET: TokenAddressMap = {
 
 export const getNetworks = (selectedNetworkType: NetworkType) => {
   switch (selectedNetworkType) {
-    case 'Mainnet':
+    case 'mainnet':
       return ALL_MAINNET_NETWORKS
-    case 'Testnet':
+    case 'testnet':
       return ALL_TESTNET_NETWORKS
   }
 }
 
 export const getHighNetworks = (selectedNetworkType: NetworkType) => {
   switch (selectedNetworkType) {
-    case 'Mainnet':
+    case 'mainnet':
       return ALL_HIGH_MAINNET_NETWORKS
-    case 'Testnet':
+    case 'testnet':
       return ALL_HIGH_TESTNET_NETWORKS
   }
 }
 
 export const getLowNetworks = (selectedNetworkType: NetworkType) => {
   switch (selectedNetworkType) {
-    case 'Mainnet':
+    case 'mainnet':
       return ALL_LOW_MAINNET_NETWORKS
-    case 'Testnet':
+    case 'testnet':
       return ALL_LOW_TESTNET_NETWORKS
   }
 }
diff --git a/webapps/world-builder-dashboard/index.html b/webapps/world-builder-dashboard/index.html
@@ -6,19 +6,19 @@
               new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
             j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
             'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-MBNQK3GV');</script>
+    })(window,document,'script','dataLayer','GTM-PM8Q4623');</script>
     <!-- End Google Tag Manager -->
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/Logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet" />
-    <title>Game7 - World builder</title>
+    <title>Game7 DevHub</title>
   </head>
   <body>
     <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MBNQK3GV"
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PM8Q4623"
                       height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="root"></div>

diff --git a/webapps/world-builder-dashboard/package-lock.json b/webapps/world-builder-dashboard/package-lock.json
diff --git a/webapps/world-builder-dashboard/src/assets/IconChevronUp.tsx b/webapps/world-builder-dashboard/src/assets/IconChevronUp.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const IconChevronUp: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' {...props}>
+    <path d='M15 12.5L10 7.5L5 12.5' stroke='#B9B9B9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' />
+  </svg>
+)
+
+export default IconChevronUp;
diff --git a/webapps/world-builder-dashboard/src/assets/IconG7T.tsx b/webapps/world-builder-dashboard/src/assets/IconG7T.tsx
@@ -1,16 +1,10 @@
 import React from 'react'
 
 const IconG7T: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20' fill='none' {...props}>
-    <path
-      d='M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10Z'
-      fill='#FE7071'
-    />
-    <path
-      d='M4.33333 6.16667L6.62944 9.76822H9.60412L8.92848 8.70799H11.0727L8.51324 12.7238L10 15.0556L15.6667 6.16667H4.33333Z'
-      fill='#1B1B1B'
-    />
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20" fill="none" {...props}>
+  <path d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10Z" fill="#FE7071"/>
+  <path d="M4.33333 6.16667L6.62944 9.76822H9.60412L8.92848 8.70799H11.0727L8.51324 12.7238L10 15.0556L15.6667 6.16667H4.33333Z" fill="white"/>
+</svg>
 )
 
 export default IconG7T
diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.module.css b/webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.module.css
@@ -52,7 +52,7 @@
 }
 
 .container:hover {
-  border: 1px solid var(--Primary-600, #F04438);
+  border: 1px solid var(--Primary-700, #F04438);
   background: var(--Primary-700, #F04438);
   transition: all linear 200ms;
 
@@ -77,7 +77,7 @@
   border-radius: 8px;
   background: var(--Disabled-Button, #393939);
   cursor: not-allowed;
-  border: none;
+  /* border: none; */
 }
 
 /*Mantine */

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.tsx b/webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.tsx
@@ -126,7 +126,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
           highNetworkChainId: selectedHighNetwork.chainId,
           highNetworkHash: tx?.hash,
           highNetworkTimestamp: Date.now() / 1000,
-          challengePeriod: selectedNetworkType === 'Testnet' ? (60 * 60) : (60 * 60) * 24 * 7,
+          challengePeriod: selectedNetworkType === 'testnet' ? (60 * 60) : (60 * 60) * 24 * 7,
           symbol: symbol,
           status: BridgeTransferStatus.WITHDRAW_UNCONFIRMED
         }
@@ -177,7 +177,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
             ((!L2L3message?.destination || !L2L3message.data) && Number(amount) === 0))
         }
       >
-        <div className={isConnecting || transfer.isLoading ? styles.buttonLabelLoading : styles.buttonLabel}>
+        <div className={isConnecting || transfer.isLoading || isDisabled ? styles.buttonLabelLoading : styles.buttonLabel}>
           {getLabel() ?? 'Submit'}
         </div>
       </button>

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/BridgeView.module.css b/webapps/world-builder-dashboard/src/components/bridge/bridge/BridgeView.module.css
@@ -70,6 +70,11 @@
   color: var(--Gray-600, #fff);
 }
 
+.directionButton:hover {
+  background: rgba(57, 57, 57, 0.5);
+  color: #fff;
+}
+
 .networksContainer {
   display: flex;
   padding: 11px;

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/BridgeView.tsx b/webapps/world-builder-dashboard/src/components/bridge/bridge/BridgeView.tsx
@@ -161,15 +161,15 @@ const BridgeView = ({
       return (
         <NetworkSelector
           direction={direction}
-          networks={selectedNetworkType === 'Testnet' ? [L1_NETWORK, L2_NETWORK] : [L1_MAIN_NETWORK, L2_MAIN_NETWORK]}
+          networks={selectedNetworkType === 'testnet' ? [L1_NETWORK, L2_NETWORK] : [L1_MAIN_NETWORK, L2_MAIN_NETWORK]}
           selectedNetwork={selectedLowNetwork}
           onChange={setSelectedLowNetwork}
         />
       )
     } else {
       return (
         <NetworkSelector
-          networks={selectedNetworkType === 'Testnet' ? [L2_NETWORK, L3_NETWORK] : [L2_MAIN_NETWORK, L3_MAIN_NETWORK]}
+          networks={selectedNetworkType === 'testnet' ? [L2_NETWORK, L3_NETWORK] : [L2_MAIN_NETWORK, L3_MAIN_NETWORK]}
           selectedNetwork={selectedHighNetwork}
           onChange={setSelectedHighNetwork}
           direction={direction}
@@ -236,7 +236,7 @@ const BridgeView = ({
       {direction === 'DEPOSIT' &&
         selectedLowNetwork.chainId === L2_NETWORK.chainId &&
         isMessagingEnabled &&
-        selectedNetworkType === 'Testnet' && (
+        selectedNetworkType === 'testnet' && (
           <BridgeMessage
             isExpanded={isMessageExpanded}
             setIsExpanded={setIsMessageExpanded}

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/ValueToBridge.module.css b/webapps/world-builder-dashboard/src/components/bridge/bridge/ValueToBridge.module.css
@@ -30,7 +30,7 @@
 }
 
 .errorMessage {
-  color: var(--Error-600, #D92D20);
+  color: var(--Error-600, #d92d20);
   text-align: right;
 
   /* Text xs/Medium */
@@ -67,7 +67,8 @@
   line-height: 18px; /* 150% */
 }
 
-.inputGroup, .inputWithError {
+.inputGroup,
+.inputWithError {
   display: flex;
   padding-left: 12px;
   align-items: center;
@@ -101,7 +102,7 @@
 }
 
 .inputWithError {
-  border: 1px solid var(--Error-500, #F04438);
+  border: 1px solid var(--Error-500, #f04438);
 }
 
 .maxButton {
@@ -126,6 +127,7 @@
 
 .maxButton:disabled {
   background: var(--Disabled-Button, #475467);
+  color: rgba(255, 255, 255, 0.7); /* Font opacity via RGBA */
   cursor: not-allowed;
 }
 
@@ -150,7 +152,6 @@
   line-height: 20px; /* 142.857% */
 }
 
-
 @media (max-width: 1199px) {
   .input {
     font-size: 18px;

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/ValueToBridge.tsx b/webapps/world-builder-dashboard/src/components/bridge/bridge/ValueToBridge.tsx
@@ -43,7 +43,7 @@ const ValueToBridge: React.FC<ValueToBridgeProps> = ({
   const [tokens, setTokens] = useState<Token[]>([])
   const { connectedAccount, selectedBridgeToken, selectedHighNetwork, selectedLowNetwork } = useBlockchainContext()
 
-  const getTokens = async () => {
+  const getTokens = () => {
     const highNetworkChainId = String(selectedHighNetwork.chainId)
     const lowNetworkChainId = String(selectedLowNetwork.chainId)
     const _tokens = getTokensForNetwork(selectedChainId, connectedAccount)

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx
@@ -120,12 +120,16 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
                   >
                     <div className={styles.gridItem}>
                       {transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_REDEEMED ||
-                      transferStatus?.status === BridgeTransferStatus.DEPOSIT_GAS_DEPOSITED ||
-                      transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_FUNDS_DEPOSITED_ON_CHILD ? (
+                      transferStatus?.status === BridgeTransferStatus.DEPOSIT_GAS_DEPOSITED ? (
                         <div className={styles.settled}>
                           Completed
                           <IconLinkExternal02 stroke='#fff' />
                         </div>
+                      ) : transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_FUNDS_DEPOSITED_ON_CHILD ? (
+                        <div className={styles.pending}>
+                          Claimable
+                          <IconLinkExternal02 className={styles.arrowUp} />
+                        </div>
                       ) : (
                         <div className={styles.pending}>
                           Pending
@@ -151,7 +155,9 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
                       <>{ETA(deposit.lowNetworkTimestamp, deposit.retryableCreationTimeout ?? 15 * 60)}</>
                     )}
                   </div>
+
                 )}
+                 <div className={styles.emptyCell} />
               </>
             </>
           )}

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/DepositMobile.module.css b/webapps/world-builder-dashboard/src/components/bridge/history/DepositMobile.module.css
@@ -23,7 +23,7 @@
     gap: 12px;
     align-self: stretch;
 
-    background: var(--Gray-50, #F9FAFB);
+    background: #393939;
 }
 
 .title {
@@ -60,8 +60,8 @@
     align-items: center;
     gap: 12px;
     align-self: stretch;
-
     border-top: 1px solid var(--Gray-200, #EAECF0);
+    background-color: #171717
 }
 
 .dataRowCompleted {
@@ -109,7 +109,7 @@
     line-height: 20px; /* 142.857% */
     border: none;
     border-top: 1px solid var(--Gray-200, #EAECF0);
-    background: var(--Base-White, #ffffff);
+    background: #171717;
     border-radius: 0 0 12px 12px;
 }
 

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/DepositMobile.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/DepositMobile.tsx
@@ -9,6 +9,7 @@ import { NetworkType } from '@/contexts/BlockchainContext'
 import { TransactionRecord } from '@/utils/bridge/depositERC20ArbitrumSDK'
 import { ETA, timeAgo } from '@/utils/timeFormat'
 import { getBlockExplorerUrl } from '@/utils/web3utils'
+import IconArrowNarrowDown from '@/assets/IconArrowNarrowDown'
 
 interface DepositMobileProps {
   deposit: TransactionRecord
@@ -50,7 +51,10 @@ const DepositMobile: React.FC<DepositMobileProps> = ({
       ) : (
         <div className={styles.container}>
           <div className={styles.header}>
-            <div className={styles.title}>Deposit</div>
+            <div className={parentStyles.typeDeposit}>
+              Deposit
+              <IconArrowNarrowDown className={parentStyles.arrowUp} />
+            </div>
             <div className={styles.amount}>{`${deposit.amount} ${transactionInputs?.tokenSymbol}`}</div>
           </div>
           {!isCollapsed && (
@@ -88,7 +92,7 @@ const DepositMobile: React.FC<DepositMobileProps> = ({
             </>
           )}
           <div className={styles.dataRow}>
-            <div className={styles.dataText}> Status</div>
+            <div className={styles.dataText}>Status</div>
             <div className={styles.dataTextBold}>
               {transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_REDEEMED ||
               transferStatus?.status === BridgeTransferStatus.DEPOSIT_GAS_DEPOSITED ||

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx
@@ -7,11 +7,12 @@ import { ethers } from 'ethers'
 import Deposit from '@/components/bridge/history/Deposit'
 import Withdrawal from '@/components/bridge/history/Withdrawal'
 import { useBlockchainContext } from '@/contexts/BlockchainContext'
-import { useBridgeAPI } from '@/hooks/useBridgeAPI'
-import { useMessages } from '@/hooks/useL2ToL1MessageStatus'
 import { TransactionRecord } from '@/utils/bridge/depositERC20ArbitrumSDK'
 
-interface HistoryDesktopProps {}
+interface HistoryDesktopProps {
+  apiTransactions: TransactionRecord[]
+  messages: TransactionRecord[] | undefined
+}
 
 const mergeTransactions = (apiData: TransactionRecord[], localData: TransactionRecord[]): TransactionRecord[] => {
   const combinedData = new Map<string, TransactionRecord>()
@@ -63,13 +64,10 @@ const mapAPIDataToTransactionRecord = (apiData: any): TransactionRecord => {
   }
 }
 
-const HistoryDesktop: React.FC<HistoryDesktopProps> = () => {
+const HistoryDesktop: React.FC<HistoryDesktopProps> = ({ apiTransactions, messages }) => {
   const { connectedAccount, selectedNetworkType } = useBlockchainContext()
-  const { data: messages } = useMessages(connectedAccount, selectedNetworkType || 'Testnet')
-  const { useHistoryTransactions } = useBridgeAPI()
-  const { data: apiTransactions } = useHistoryTransactions(connectedAccount)
   const [mergedTransactions, setMergedTransactions] = useState<TransactionRecord[]>([])
-  const headers = ['Type', 'Submitted', 'Token', 'From', 'To', 'Transaction', 'Status']
+  const headers = ['Type', 'Submitted', 'Token', 'From', 'To', 'Transaction', 'Status', '']
 
   // Merge transations only when API data is updated with new data
   useEffect(() => {
@@ -116,7 +114,7 @@ const HistoryDesktop: React.FC<HistoryDesktopProps> = () => {
           <div className={styles.transactions}>
             <div className={styles.withdrawsGrid}>
               {headers.map((h) => (
-                <div className={styles.transactionsHeader} key={h}>
+                <div className={h !== ' ' ? styles.transactionsHeader : styles.transactionsHeaderEmpty} key={h}>
                   {h}
                 </div>
               ))}