Merge pull request #257 from G7DAO/feat/update-bridge-sdk

Feat/update bridge sdk
G7DAO · Dec 18, 2024 · 80b1548 · 80b1548
2 parents c842b37 + 021df7b
commit 80b1548
Show file tree

Hide file tree

Showing 17 changed files with 625 additions and 225 deletions.
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/package.json b/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.70",
+    "game7-bridge-sdk": "^0.0.75",
     "history": "^5.3.0",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.2.0",

diff --git a/webapps/world-builder-dashboard/patches/game7-bridge-sdk+0.0.74.patch b/webapps/world-builder-dashboard/patches/game7-bridge-sdk+0.0.74.patch
@@ -0,0 +1,20 @@
+diff --git a/node_modules/game7-bridge-sdk/dist/bridgeTransfer.js b/node_modules/game7-bridge-sdk/dist/bridgeTransfer.js
+index 9ab8926..24a757a 100644
+--- a/node_modules/game7-bridge-sdk/dist/bridgeTransfer.js
++++ b/node_modules/game7-bridge-sdk/dist/bridgeTransfer.js
+@@ -272,11 +272,15 @@ export class BridgeTransfer {
+     execute(signer) {
+         return __awaiter(this, void 0, void 0, function* () {
+             if (!this.childTransactionReceipt) {
++                console.log('here before originreceipt')
+                 const originReceipt = yield this.originProvider.getTransactionReceipt(this.txHash);
+                 this.childTransactionReceipt = new ChildTransactionReceipt(originReceipt);
++                console.log('here after originreceipt')
+             }
++            console.log('here')
+             const messages = (yield this.childTransactionReceipt.getChildToParentMessages(signer));
+             const message = messages[0];
++            console.log(message);
+             const res = yield message.execute(this.originProvider);
+             return yield res.wait();
+         });
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/components/bridge/bridge/ActionButton.tsx b/webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.tsx
@@ -98,7 +98,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
       const needsBridgeTokenApproval = bridgeAllowance?.lt(amountBN)
       const gasFeesAmount = gasFees?.[1] ? ethers.utils.parseUnits(gasFees[1], 18) : amountBN
       const needsNativeTokenApproval = nativeAllowance !== null ? nativeAllowance?.lt(gasFeesAmount) : false
-      
+
       if (needsBridgeTokenApproval || needsNativeTokenApproval) {
         setStartingTokenIndex(needsBridgeTokenApproval ? 0 : 1)
         setShowApproval(true)
@@ -175,6 +175,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
         connectedAccount: connectedAccount
       })
       if (bridger?.isDeposit) {
+        const isCCTP = bridger?.isCctp()
         const tx = await bridger?.transfer({ amount: amountToSend, signer, destinationProvider })
         await tx?.wait()
         return {
@@ -190,9 +191,13 @@ const ActionButton: React.FC<ActionButtonProps> = ({
           status:
             destinationTokenAddress === ZERO_ADDRESS
               ? BridgeTransferStatus.DEPOSIT_GAS_PENDING
-              : BridgeTransferStatus.DEPOSIT_ERC20_NOT_YET_CREATED
+              : isCCTP
+                ? BridgeTransferStatus.CCTP_PENDING
+                : BridgeTransferStatus.DEPOSIT_ERC20_NOT_YET_CREATED,
+          isCCTP: isCCTP
         }
       } else {
+        const isCCTP = bridger?.isCctp()
         const tx = await bridger?.transfer({ amount: amountToSend, signer, destinationProvider })
         await tx?.wait()
         return {
@@ -204,7 +209,11 @@ const ActionButton: React.FC<ActionButtonProps> = ({
           highNetworkTimestamp: Date.now() / 1000,
           challengePeriod: selectedNetworkType === 'Testnet' ? 60 * 60 : 60 * 60 * 24 * 7,
           symbol: symbol,
-          status: BridgeTransferStatus.WITHDRAW_UNCONFIRMED
+          status:
+            isCCTP
+              ? BridgeTransferStatus.CCTP_PENDING
+              : BridgeTransferStatus.WITHDRAW_UNCONFIRMED,
+          isCCTP: isCCTP
         }
       }
     },
@@ -219,6 +228,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
           if (transactionsString) {
             transactions = JSON.parse(transactionsString)
           }
+          console.log(record)
           transactions.push(record)
           localStorage.setItem(
             `bridge-${connectedAccount}-transactions-${selectedNetworkType}`,
@@ -283,7 +293,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
           (isDisabled ||
             Number(amount) < 0 ||
             ((!L2L3message?.destination || !L2L3message.data) && Number(amount) === 0)) ||
-            isLoadingAllowances
+          isLoadingAllowances
         }
       >
         <div className={isConnecting || transfer.isLoading ? styles.buttonLabelLoading : styles.buttonLabel}>

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
@@ -26,15 +26,17 @@
   font-size: 18px;
   font-style: normal;
   font-weight: 600;
-  line-height: 28px; /* 155.556% */
+  line-height: 28px;
+  /* 155.556% */
 }
 
 .subtitle {
   color: var(--Gray-600, #475467);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: 20px; /* 142.857% */
+  line-height: 20px;
+  /* 142.857% */
 }
 
 .directionContainer {
@@ -116,7 +118,8 @@
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
-  line-height: 20px; /* 142.857% */
+  line-height: 20px;
+  /* 142.857% */
 }
 
 .valueBlockContainer {
@@ -159,7 +162,8 @@
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
-  line-height: 18px; /* 150% */
+  line-height: 18px;
+  /* 150% */
   transition: all ease-in-out 1s;
 }
 
@@ -190,13 +194,14 @@
 
   /* Shadow/xs */
   box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
-  color:  var(--Gray-700, #344054);
+  color: var(--Gray-700, #344054);
 
   /* Text sm/Semibold */
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
-  line-height: 20px; /* 142.857% */
+  line-height: 20px;
+  /* 142.857% */
 }
 
 .balanceContainer {
@@ -211,7 +216,8 @@
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
-  line-height: 18px; /* 150% */
+  line-height: 18px;
+  /* 150% */
   border: none;
   background: transparent;
   cursor: pointer;
@@ -226,25 +232,57 @@
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
-  line-height: 18px; /* 150% */
+  line-height: 18px;
+  /* 150% */
+}
+
+.manualGasMessageContainer {
+  display: flex;
+  padding: 2px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+  border-radius: 16px;
+  background: #B54708;
+}
+
+.manualGasMessageText {
+  color: #FFFAEB;
+  text-align: center;
+
+  /* Text xs/Medium */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+  /* 150% */
+}
+
+.manualGasMessageTooltip {
+  background: #B54708;
 }
 
 @media (max-width: 1199px) {
-    .container {
-      width: 100%;
-      padding: 15px;
-    }
+  .container {
+    width: 100%;
+    padding: 15px;
+  }
+
   .networksContainer {
     flex-direction: column;
     gap: 20px;
   }
+
   .networkSelect {
     flex-direction: row;
     align-items: center;
     width: 100%;
     gap: 12px
   }
+
   .arrowIcon {
     display: none;
   }
-}
+}
diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/BridgeView.tsx b/webapps/world-builder-dashboard/src/components/bridge/bridge/BridgeView.tsx
@@ -13,7 +13,7 @@ import {
 import styles from './BridgeView.module.css'
 import { ethers } from 'ethers'
 // G7 SDK
-import { Bridger } from 'game7-bridge-sdk'
+import { Bridger, getBridger } from 'game7-bridge-sdk'
 // Components
 import ActionButton from '@/components/bridge/bridge/ActionButton'
 import BridgeMessage from '@/components/bridge/bridge/BridgeMessage'
@@ -30,6 +30,8 @@ import { DepositDirection } from '@/pages/BridgePage/BridgePage'
 import { getStakeNativeTxData } from '@/utils/bridge/stakeContractInfo'
 import { getTokensForNetwork, Token } from '@/utils/tokens'
 import { useBridger } from '@/hooks/useBridger'
+import IconAlertCircle from '@/assets/IconAlertCircle'
+import { Tooltip } from 'summon-ui/mantine'
 
 const BridgeView = ({
   direction,
@@ -75,6 +77,7 @@ const BridgeView = ({
   })
 
   const { data: coinUSDRate, isFetching: isCoinFetching } = useUSDPriceOfToken(selectedBridgeToken.geckoId ?? '')
+  const { data: ethRate } = useUSDPriceOfToken('ethereum')
   const handleTokenChange = async (token: Token) => {
     setSelectedBridgeToken(token)
   }
@@ -100,6 +103,7 @@ const BridgeView = ({
     selectedHighNetwork,
     connectedAccount: connectedAccount ?? ''
   })
+  console.log(allowances)
 
   useEffect(() => {
     if (selectedBridgeToken && connectedAccount && selectedHighNetwork && selectedLowNetwork) {
@@ -122,7 +126,7 @@ const BridgeView = ({
           ) ?? null
           setSelectedNativeToken(token)
         }
-        const _bridger: Bridger = new Bridger(originChainId, destinationChainId, selectedBridgeToken.tokenAddressMap)
+        const _bridger: Bridger = getBridger(originChainId, destinationChainId, selectedBridgeToken.tokenAddressMap)
         setBridger(_bridger)
 
       } catch (e) {
@@ -260,13 +264,7 @@ const BridgeView = ({
         childFee={Number(estimatedFee.data?.childFee ?? 0)}
         isEstimatingFee={estimatedFee.isLoading}
         value={Number(value)}
-        ethRate={
-          selectedBridgeToken.symbol === 'TG7T' || selectedBridgeToken.symbol === 'G7'
-            ? 1
-            : isCoinFetching
-              ? 0.0
-              : coinUSDRate[selectedBridgeToken?.geckoId ?? ''].usd
-        }
+        ethRate={ethRate?.ethereum?.usd ?? 0}
         tokenRate={
           selectedBridgeToken.symbol === 'TG7T' || selectedBridgeToken.symbol === 'G7'
             ? 1
@@ -285,6 +283,21 @@ const BridgeView = ({
         selectedHighChain={selectedHighNetwork}
       />
       {networkErrorMessage && <div className={styles.networkErrorMessage}>{networkErrorMessage}</div>}
+      {direction === 'DEPOSIT' && <div className={styles.manualGasMessageContainer}>
+        <div className={styles.manualGasMessageText}>
+          May need manual gas completion on {selectedHighNetwork.displayName}
+        </div>
+        <Tooltip
+          content={`
+            Gas requirements may change on the destination chain, requiring manual completion. Check the Activity tab for updates.
+          `}
+          label=' Gas requirements may change on the destination chain, requiring manual completion. Check the Activity tab for updates.'
+          position='top'
+          className={styles.manualGasMessageTooltip }
+        >
+          <IconAlertCircle stroke='#FFFAEB' height={12} width={12} />
+        </Tooltip>
+      </div>}
       <ActionButton
         direction={direction}
         amount={value ?? '0'}

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/MultiTokenApproval.tsx b/webapps/world-builder-dashboard/src/components/bridge/bridge/MultiTokenApproval.tsx
@@ -43,7 +43,7 @@ export const MultiTokenApproval: React.FC<MultiTokenApprovalProps> = ({ showAppr
     const currentToken = tokens[currentTokenIndex]
     if (currentTokenIndex === 1) {
       const gasFeeAmount = ethers.utils.parseUnits(
-        (gasFees[1] === '0' ? amount : gasFees[1]) || amount, 
+        (gasFees[1] === '0' ? amount : gasFees[1]) || amount,
         currentToken.decimals || 18
       )
       return gasFeeAmount
@@ -64,7 +64,7 @@ export const MultiTokenApproval: React.FC<MultiTokenApprovalProps> = ({ showAppr
     if (!allowanceInitialized && currentTokenIndex === 1) {
       const currentToken = tokens[currentTokenIndex]
       const gasFeeAmount = ethers.utils.parseUnits(
-        (gasFees[1] === '0' ? amount : gasFees[1]) || amount, 
+        (gasFees[1] === '0' ? amount : gasFees[1]) || amount,
         currentToken.decimals || 18
       )
       setNewAllowance(gasFeeAmount)
@@ -138,7 +138,8 @@ export const MultiTokenApproval: React.FC<MultiTokenApprovalProps> = ({ showAppr
             </div>
             <IconClose onClick={() => setShowApproval(false)} className={styles.closeButton} stroke="#fff" />
           </div>
-          <div className={styles.modalSubtitle}>Approve the token you want to bridge</div>
+          <div className={styles.modalSubtitle}>This sets a limit to the amount of tokens that can be processed through the bridge.
+          </div>
         </div>
         {tokens.length > 1 && (
           <>