Staging

webapps/world-builder-dashboard/constants.ts

@@ -40,7 +40,7 @@ export const L3_NETWORK: HighNetworkInterface = {
   chainId: 13746,
   name: 'game7Testnet',
   displayName: 'G7 Sepolia',
-  rpcs: ['https://testnet-rpc.game7.io'],
+  rpcs: ['https://x.game7-testnet.nodes.game7.build'],
   blockExplorerUrls: ['https://testnet.game7.io'],
   nativeCurrency: {
     decimals: 18,
@@ -93,7 +93,7 @@ export const L3_MAIN_NETWORK: NetworkInterface = {
   nativeCurrency: {
     decimals: 18,
     name: 'Game7 Token',
-    symbol: 'G7T'
+    symbol: 'G7'
   },
   g7TokenAddress: '0x0000000000000000000000000000000000000000',
   retryableCreationTimeout: 15 * 60,

webapps/world-builder-dashboard/package.json

@@ -19,7 +19,7 @@
     "clsx": "^1.2.1",
     "dayjs": "^1.11.11",
     "dotenv": "^16.4.7",
-    "game7-bridge-sdk": "^0.0.68",
+    "game7-bridge-sdk": "^0.0.77",
     "history": "^5.3.0",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.2.0",
@@ -45,6 +45,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-tailwindcss": "^3.15.1",
+    "patch-package": "^8.0.0",
     "postcss": "^8.4.38",
     "postcss-preset-mantine": "^1.15.0",
     "postcss-simple-vars": "^7.0.1",

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;

webapps/world-builder-dashboard/src/components/bridge/allowance/AllowanceSelector.module.css

@@ -1,20 +1,22 @@
-.container, .containerDisabled {
+.container,
+.containerDisabled {
     display: flex;
     gap: 8px;
     justify-content: space-between;
     align-items: center;
     padding: 7px 13px;
 
     border-radius: 8px;
-    border: 1px solid #F2F4F7;
-    background: var(--Base-White, #FFF);
-    color: var(--Gray-700, #344054);
+    border: 1px solid #393939;
+    background: #171717;
+    color: #FFF;
 
     /* Text sm/Medium */
     font-family: Inter, sans-serif;
     font-size: 14px;
     font-style: normal;
-    line-height: 20px; /* 142.857% */
+    line-height: 20px;
+    /* 142.857% */
     width: 100%;
     cursor: pointer;
 }
@@ -25,10 +27,24 @@
 
 .containerDisabled {
     cursor: not-allowed;
+    background: #393939;
 }
 
 .value {
-    flex: 1;
+    flex: 1 0 0;
+    color: #FFF;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.tokenAmountContainer {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
 }
 
 .rightSection {
@@ -54,7 +70,8 @@
     font-size: 12px;
     font-style: normal;
     font-weight: 500;
-    line-height: 18px; /* 150% */
+    line-height: 18px;
+    /* 150% */
 }
 
 .minButton:disabled {
@@ -86,11 +103,14 @@
 
 .dropdownContainer {
     border-radius: 8px !important;
-    border: 1px solid var(--Gray-200, #EAECF0) !important;;
-    background: var(--Base-White, #FFF) !important;;
+    border: 1px solid var(--Gray-200, #EAECF0) !important;
+    ;
+    background: var(--Base-White, #FFF) !important;
+    ;
 
     /* Shadow/lg */
-    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03) !important;;
+    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03) !important;
+    ;
 }
 
 .optionPercent {
@@ -100,7 +120,8 @@
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
-    line-height: 20px; /* 142.857% */
+    line-height: 20px;
+    /* 142.857% */
 }
 
 .optionValue {
@@ -113,6 +134,7 @@
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
-    line-height: 20px; /* 142.857% */
+    line-height: 20px;
+    /* 142.857% */
     margin-right: auto;
-}
+}

webapps/world-builder-dashboard/src/components/bridge/allowance/AllowanceSelector.tsx

@@ -1,34 +1,42 @@
 import styles from './AllowanceSelector.module.css'
 import { ethers } from 'ethers'
-import { Combobox, Tooltip, useCombobox } from 'summon-ui/mantine'
-import IconAlertCircle from '@/assets/IconChevronDownToggle'
+import { Combobox, useCombobox } from 'summon-ui/mantine'
 import IconCheck from '@/assets/IconCheck'
 import IconChevronDown from '@/assets/IconChevronDown'
-import { formatBigNumber } from '@/utils/web3utils'
+import { Token } from '@/utils/tokens'
 
 type AllowanceSelectorProps = {
   balance: ethers.BigNumber
   onChange: (newAllowance: ethers.BigNumber) => void
   allowance: ethers.BigNumber
   amount: ethers.BigNumber
   disabled: boolean
+  token: Token
 }
 
-const AllowanceSelector = ({ balance, onChange, allowance, amount, disabled }: AllowanceSelectorProps) => {
+const AllowanceSelector = ({ balance, onChange, allowance, amount, disabled, token }: AllowanceSelectorProps) => {
   const combobox = useCombobox({
     onDropdownClose: () => combobox.resetSelectedOption()
   })
 
+  const formatAllowanceDisplay = () => {
+    if (allowance.eq(ethers.constants.MaxUint256)) {
+      return `Infinite ${token?.symbol}`
+    }
+    const formattedAllowance = ethers.utils.formatUnits(allowance, token.decimals)
+    return `${formattedAllowance} ${token?.symbol}`
+  }
+
   return (
     <Combobox
       store={combobox}
       variant='unstyled'
       onOptionSubmit={(val: string) => {
-        const amountInWei = ethers.utils.parseUnits(val, 18)
         try {
-          onChange(ethers.BigNumber.from(amountInWei))
+          const amountInWei = ethers.utils.parseUnits(val, token.decimals)
+          onChange(amountInWei)
         } catch (e) {
-          console.log(e)
+          console.error('Error parsing units:', e)
         }
         combobox.closeDropdown()
       }}
@@ -39,7 +47,12 @@ const AllowanceSelector = ({ balance, onChange, allowance, amount, disabled }: A
           className={disabled ? styles.containerDisabled : styles.container}
           onClick={() => combobox.toggleDropdown()}
         >
-          <div className={styles.value}>{formatBigNumber(allowance)}</div>
+          <div className={styles.tokenAmountContainer}>
+            {token?.Icon && <token.Icon />}
+            <div className={styles.value}>
+              {formatAllowanceDisplay()}
+            </div>
+          </div>
           <button
             className={styles.minButton}
             onClick={(e) => {
@@ -50,36 +63,37 @@ const AllowanceSelector = ({ balance, onChange, allowance, amount, disabled }: A
           >
             MIN
           </button>
+
           <IconChevronDown className={styles.chevron} />
         </div>
       </Combobox.Target>
-
       <Combobox.Dropdown className={styles.dropdownContainer}>
         <Combobox.Options>
           {[25, 50, 75, 100]
             .map((n) => {
               const percentage = balance.mul(ethers.BigNumber.from(n)).div(ethers.BigNumber.from(100))
               return { n, percentage }
             })
-            .filter(({ percentage }) => percentage.gt(amount))
+            // Only show percentages that are greater than the required amount
+            .filter(({ percentage }) => percentage.gte(amount))
             .map(({ n, percentage }) => (
-              <Combobox.Option className={styles.optionContainer} value={ethers.utils.formatEther(percentage)} key={n}>
+              <Combobox.Option
+                className={styles.optionContainer}
+                value={ethers.utils.formatUnits(percentage, token.decimals)}
+                key={n}
+              >
                 <div className={styles.optionPercent}>{`${n}%`}</div>
-                <div className={styles.optionValue}>{formatBigNumber(percentage)}</div>
+                <div className={styles.optionValue}>
+                  {ethers.utils.formatUnits(percentage, token.decimals)} {token?.symbol}
+                </div>
                 {allowance.eq(percentage) && <IconCheck />}
               </Combobox.Option>
             ))}
           <Combobox.Option
             className={styles.optionContainer}
-            value={ethers.utils.formatEther(ethers.constants.MaxUint256)}
+            value={ethers.utils.formatUnits(ethers.constants.MaxUint256, token.decimals)}
           >
             <div className={styles.optionPercent}>Infinite</div>
-            <div className={styles.optionValue}>
-              (Testnet Only)
-              <Tooltip arrowSize={8} radius={'8px'} label={'For developers and testnet purposes only.'} withArrow>
-                <IconAlertCircle className={styles.chevron} />
-              </Tooltip>
-            </div>
 
             {allowance.eq(ethers.constants.MaxUint256) && <IconCheck />}
           </Combobox.Option>

webapps/world-builder-dashboard/src/components/bridge/allowance/ApproveAllowance.tsx

@@ -8,7 +8,6 @@ import { useBlockchainContext } from '@/contexts/BlockchainContext'
 import { ERC20AllowanceProps } from '@/types'
 import { approve } from '@/utils/bridge/approveERC20'
 import { formatBigNumber } from '@/utils/web3utils'
-
 interface ApproveAllowanceProps {
   onSuccess: () => void
   onClose: () => void
@@ -18,7 +17,7 @@ interface ApproveAllowanceProps {
 }
 const ApproveAllowance: React.FC<ApproveAllowanceProps> = ({ amount, balance, onClose, onSuccess, allowanceProps }) => {
   const [newAllowance, setNewAllowance] = useState(amount)
-  const { getProvider } = useBlockchainContext()
+  const { getProvider, selectedBridgeToken } = useBlockchainContext()
 
   const approveAllowance = useMutation(
     async ({
@@ -54,8 +53,12 @@ const ApproveAllowance: React.FC<ApproveAllowanceProps> = ({ amount, balance, on
     <div className={styles.container}>
       <div className={styles.header}>
         <div className={styles.titleAndCloseButton}>
-          <div className={styles.title}>Approve Allowance</div>
-          <IconClose onClick={onClose} className={styles.closeButton} />
+          <div className={styles.titleAndCloseButtonContainer}>
+            <div className={styles.title}>
+              Approve Allowance
+            </div>
+            <IconClose onClick={onClose} className={styles.closeButton} />
+          </div>
         </div>
         <div className={styles.supportingText}>
           We need permission for token allowances in order to facilitate transactions.
@@ -72,6 +75,7 @@ const ApproveAllowance: React.FC<ApproveAllowanceProps> = ({ amount, balance, on
               onChange={(value) => setNewAllowance(value)}
               allowance={newAllowance}
               disabled={approveAllowance.isLoading}
+              token={selectedBridgeToken}
             />
           </div>
         </div>