Anchorage Enable For BNB-Testnet

.github/workflows/end2end-test.yml

@@ -1,9 +1,10 @@
 name: Integration Test
 
 on: 
-  push: 
-    branches: ['main', 'master']
-  pull_request:
+  # push: 
+  #   branches: ['main', 'master']
+  # pull_request:
+  workflow_dispatch
 
 jobs:
   e2e-test:

e2e-tests/lib/gatewayAction.ts

@@ -15,6 +15,17 @@ const networkConfig = {
   },
 }
 
+const networkNames = {
+  eth: {
+    fromNetwork: 'Ethereum (Sepolia)',
+    toNetwork: 'Boba (Sepolia)',
+  },
+  bnb: {
+    fromNetwork: 'BNB Testnet',
+    toNetwork: 'Boba BNB Testnet',
+  },
+}
+
 export class GatewayAction {
   basePage: BasePage
   bridgePage: BridgePage
@@ -29,11 +40,13 @@ export class GatewayAction {
     tokenSymbol,
     successWaitTime = 1000,
     approveAllowance = false,
+    networkKey = 'eth',
   }: {
     amountToBridge: string
     tokenSymbol: string
     successWaitTime?: number
     approveAllowance?: boolean
+    networkKey?: 'bnb' | 'eth'
   }) {
     await this.bridgePage.openTokenPickerAndSelect(tokenSymbol)
     await this.bridgePage.bridgeButtonToBeDisable()
@@ -48,8 +61,7 @@ export class GatewayAction {
     await this.bridgePage.validateAndConfirmBridging({
       amount: amountToBridge,
       token: tokenSymbol,
-      fromNetwork: 'Ethereum (Sepolia)',
-      toNetwork: 'Boba (Sepolia)',
+      ...networkNames[networkKey],
       estimatedTime: '13 ~ 14mins.',
     })
     if (approveAllowance) {
@@ -65,9 +77,11 @@ export class GatewayAction {
   async classicBridgeWithdrawal({
     amountToBridge,
     tokenSymbol,
+    networkKey = 'eth',
   }: {
     amountToBridge: string
     tokenSymbol: string
+    networkKey?: 'bnb' | 'eth'
   }) {
     await this.bridgePage.openTokenPickerAndSelect(tokenSymbol)
     await this.bridgePage.bridgeButtonToBeDisable()
@@ -82,8 +96,7 @@ export class GatewayAction {
     await this.bridgePage.validateAndConfirmBridging({
       amount: amountToBridge,
       token: tokenSymbol,
-      fromNetwork: 'Boba (Sepolia)',
-      toNetwork: 'Ethereum (Sepolia)',
+      ...networkNames[networkKey],
       estimatedTime: '7 days',
     })
     await this.bridgePage.reviewAndInitiateWithdrawal()
@@ -180,7 +193,13 @@ export class GatewayAction {
     await this.basePage.wait(1000)
   }
 
-  async switchNetwork() {
+  async switchL2Network() {
     await this.basePage.clickToSwitchNetwork()
   }
+
+  async addAndConnectBNBTestnet() {
+    await this.connectToTestnet()
+    await this.basePage.clickAndSwitchToBnb()
+    await this.basePage.wait(1000)
+  }
 }

e2e-tests/pages/basePage.ts

@@ -98,6 +98,27 @@ export class BasePage {
     await metamask.allowToAddAndSwitchNetwork()
   }
 
+  async clickAndSwitchToBnb() {
+    await this.page.getByTestId('from-network-picker').click()
+    await expect(
+      this.page.getByRole('heading', { level: 2, name: 'Select Network' })
+    ).toBeVisible()
+
+    await expect(this.page.getByText('Network Names')).toBeVisible()
+
+    await this.page.getByTestId('selector-bnb').click()
+
+    await this.page.waitForTimeout(1000)
+
+    await this.page.getByTestId('switch-network-btn').click()
+
+    await this.page.waitForTimeout(2000)
+
+    await this.page.getByText('Connect to the Bnb Testnet network').click()
+
+    await metamask.allowToAddAndSwitchNetwork()
+  }
+
   // disconnect
   async disconnectMetamask() {
     await this.page.getByTestId('label-address').click()

e2e-tests/pages/bridgePage.ts

@@ -41,7 +41,7 @@ export class BridgePage extends BasePage {
     estimatedTime: string
   }) {
     await expect(this.page.getByTestId('amountToRecieve')).toHaveText(
-      `${amount} ${token}`
+      `${Number(amount).toFixed(4)} ${token}`
     )
 
     const estTime = await this.page
@@ -55,7 +55,7 @@ export class BridgePage extends BasePage {
       .textContent()
 
     // TODO: update value with fee calculation.
-    expect(estRecievable).toBe(`${amount} ${token}`)
+    expect(estRecievable).toBe(`${Number(amount).toFixed(4)} ${token}`)
   }
 
   async clickToBridge() {

e2e-tests/playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test'
+import { defineConfig } from '@playwright/test'
 export default defineConfig({
   testDir: './tests',
   timeout: 30 * 1000,

e2e-tests/tests/bnb.bridge.spec.ts

@@ -0,0 +1,53 @@
+import { test } from '../fixture/synpress'
+import { GatewayAction } from '../lib/gatewayAction'
+import { BasePage } from '../pages/basePage'
+
+const amountToBridge: string = '0.0001'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/')
+})
+
+test.describe('Gateway BNB (Testnet)', () => {
+  test.describe('Classic Bridge', () => {
+    test.describe('Deposit', () => {
+      test('tBNB', async ({ page }) => {
+        test.setTimeout(120000)
+        const bridgeAction = new GatewayAction(page)
+        await bridgeAction.addAndConnectBNBTestnet()
+        await bridgeAction.classicBridgeDeposit({
+          amountToBridge,
+          tokenSymbol: 'tBNB',
+          networkKey: 'bnb',
+        })
+      })
+      test('BOBA', async ({ page }) => {
+        test.setTimeout(120000)
+        const bridgeAction = new GatewayAction(page)
+        await bridgeAction.addAndConnectBNBTestnet()
+        await bridgeAction.classicBridgeDeposit({
+          amountToBridge,
+          tokenSymbol: 'BOBA',
+          approveAllowance: true,
+          networkKey: 'bnb',
+        })
+      })
+    })
+    test.describe('Withdraw', () => {
+      test.skip('BOBA', async ({ page }) => {
+        test.setTimeout(120000)
+        const basePage = new BasePage(page)
+        const bridgeAction = new GatewayAction(page)
+        await bridgeAction.addAndConnectBNBTestnet()
+        await bridgeAction.switchL2Network()
+        page.waitForTimeout(2000)
+        await basePage.connectToMetamask(true)
+        await bridgeAction.classicBridgeWithdrawal({
+          amountToBridge: '0.00001',
+          tokenSymbol: 'tBNB',
+          networkKey: 'bnb',
+        })
+      })
+    })
+  })
+})

e2e-tests/tests/bridging.spec.ts

@@ -18,6 +18,7 @@ test.describe('Gateway ETHEREUM (Sepolia)', () => {
         await bridgeAction.classicBridgeDeposit({
           amountToBridge,
           tokenSymbol: 'ETH',
+          networkKey: 'eth',
         })
       })
 
@@ -29,6 +30,7 @@ test.describe('Gateway ETHEREUM (Sepolia)', () => {
           amountToBridge,
           tokenSymbol: 'BOBA',
           approveAllowance: true,
+          networkKey: 'eth',
         })
       })
     })
@@ -39,7 +41,7 @@ test.describe('Gateway ETHEREUM (Sepolia)', () => {
         const basePage = new BasePage(page)
         const bridgeAction = new GatewayAction(page)
         await bridgeAction.connectToTestnet() // connected to L1.
-        await bridgeAction.switchNetwork()
+        await bridgeAction.switchL2Network()
         await basePage.disconnectMetamask()
         await basePage.connectToMetamask(true)
         await bridgeAction.classicBridgeWithdrawal({
@@ -52,12 +54,12 @@ test.describe('Gateway ETHEREUM (Sepolia)', () => {
         const basePage = new BasePage(page)
         const bridgeAction = new GatewayAction(page)
         await bridgeAction.connectToTestnet() // connected to L1.
-        await bridgeAction.switchNetwork()
+        await bridgeAction.switchL2Network()
         await basePage.disconnectMetamask()
         await basePage.connectToMetamask(true)
         await bridgeAction.classicBridgeWithdrawal({
           amountToBridge,
-          tokenSymbol: 'ETH',
+          tokenSymbol: 'BOBA',
         })
       })
     })
@@ -93,7 +95,7 @@ test.describe('Gateway ETHEREUM (Sepolia)', () => {
         const bridgeAction = new GatewayAction(page)
         const basePage = new BasePage(page)
         await bridgeAction.connectToTestnet()
-        await bridgeAction.switchNetwork()
+        await bridgeAction.switchL2Network()
         await basePage.disconnectMetamask()
         await basePage.connectToMetamask(true)
         await bridgeAction.lightBridgeWithdraw({
@@ -106,7 +108,7 @@ test.describe('Gateway ETHEREUM (Sepolia)', () => {
         const bridgeAction = new GatewayAction(page)
         const basePage = new BasePage(page)
         await bridgeAction.connectToTestnet()
-        await bridgeAction.switchNetwork()
+        await bridgeAction.switchL2Network()
         await basePage.disconnectMetamask()
         await basePage.connectToMetamask(true)
         await bridgeAction.lightBridgeWithdraw({

package.json

@@ -28,7 +28,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@bobanetwork/graphql-utils": "^1.1.15",
     "@bobanetwork/light-bridge-chains": "^1.1.0",
-    "@bobanetwork/register": "^0.0.25",
+    "@bobanetwork/register": "^0.0.26",
     "@bobanetwork/sdk": "1.0.7",
     "@cfx-kit/wallet-avatar": "^0.0.5",
     "@emotion/styled": "^11.11.0",
@@ -91,7 +91,7 @@
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.24.1",
     "@sentry/types": "^8.13.0",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.1",
@@ -110,7 +110,7 @@
     "eslint-plugin-jsdoc": "^46.9.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.34.4",
     "eslint-plugin-testing-library": "^6.2.0",
     "eslint-plugin-unicorn": "^50.0.1",
     "husky": "^8.0.3",

src/actions/createAction.ts

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. */
 
 import * as Sentry from '@sentry/react'
+import { ERROR_CODE } from 'util/constant'
 
 export const createAction =
   (key: string, asyncAction: () => any): any =>
@@ -66,8 +67,8 @@ export const createAction =
             errorMessage = 'Transaction rejected by user!'
           }
         } else {
-          errorMessage = response.reason
-          Sentry.captureMessage(response.reason || '')
+          errorMessage = response.message
+          Sentry.captureMessage(response.message || '')
         }
 
         if (response.reason?.includes('could not detect network')) {
@@ -93,6 +94,13 @@ export const createAction =
         dispatch({ type: `UI/ERROR/UPDATE`, payload: errorMessage })
         dispatch({ type: `${key}/ERROR` })
         return false
+      } else if (
+        response.hasOwnProperty('message') &&
+        response.message.includes(ERROR_CODE)
+      ) {
+        dispatch({ type: `UI/ERROR/UPDATE`, payload: response.message })
+        dispatch({ type: `${key}/ERROR` })
+        return false
       }
 
       dispatch({ type: `${key}/SUCCESS`, payload: response })

src/actions/networkAction.ts

@@ -17,6 +17,7 @@ import networkService from 'services/networkService'
 import transactionService from 'services/transaction.service'
 import { createAction } from './createAction'
 import { BigNumberish } from 'ethers'
+import { bridgeService } from 'services'
 import { lightBridgeService } from 'services/teleportation.service'
 
 export const fetchBalances = () =>
@@ -81,10 +82,10 @@ export const depositETHL2 = (payload) =>
     return networkService.depositETHL2(payload)
   })
 
-//CLASSIC DEPOSIT ETH
-export const depositETHAnchorageL2 = (payload) =>
-  createAction('DEPOSIT/CREATE', () => {
-    return networkService.depositETHAnchorage(payload)
+// Anchorage CLASSIC DEPOSIT ETH
+export const depositNativeAnchorage = (payload) =>
+  createAction('DEPOSIT_ANCHORAGE/CREATE', () => {
+    return bridgeService.anchorageDepositNative(payload)
   })
 
 //DEPOSIT ERC20
@@ -93,7 +94,12 @@ export const depositErc20 = (payload) =>
 
 export const depositErc20Anchorage = (payload) =>
   createAction('DEPOSIT/CREATE', () =>
-    networkService.depositERC20Anchorage(payload)
+    bridgeService.anchorageDepositERC20(payload)
+  )
+
+export const depositErc20AnchorageOptimism = (payload) =>
+  createAction('DEPOSIT/CREATE', () =>
+    bridgeService.anchorageDepositERC20Optimism(payload)
   )
 
 export const approveERC20 = (

src/components/alert/Alert.tsx

@@ -50,10 +50,10 @@ const Toast = ({
       autoHideDuration={autohide ? autohide : undefined}
       onClose={onClose}
       anchorOrigin={{
-        vertical: 'top',
-        horizontal: 'center',
+        vertical: 'bottom',
+        horizontal: 'right',
       }}
-      style={{ marginTop: 50 }}
+      style={{ marginBottom: 100 }}
     >
       <MuiAlert
         onClose={onClose}
@@ -62,7 +62,7 @@ const Toast = ({
         sx={{
           wordWrap: 'break-word',
           borderRadius: '10px',
-          maxWidth: '80vw',
+          maxWidth: '400px',
         }}
         iconMapping={{
           error: <Error sx={{ color: '#FFD88D' }} />,

src/components/bridge/NetworkPickerList/index.tsx

@@ -144,6 +144,7 @@ export const NetworkList: FC<NetworkListProps> = ({
         className={'networkItem'}
         selected={selected}
         key={`${chainDetail.label}_${layer}_${chainDetail.key}`}
+        data-testid={`selector-${chainDetail.key}`}
         onClick={() => onChainChange(chainDetail, layer)}
       >
         <NetworkIcon>