Anchorage Enable For BNB-Testnet

package.json

@@ -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/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'
 
 export const fetchBalances = () =>
   createAction('BALANCE/GET', () => networkService.getBalances())
@@ -67,10 +68,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
@@ -79,7 +80,7 @@ export const depositErc20 = (payload) =>
 
 export const depositErc20Anchorage = (payload) =>
   createAction('DEPOSIT/CREATE', () =>
-    networkService.depositERC20Anchorage(payload)
+    bridgeService.anchorageDepositERC20(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}

src/components/global/inputWithButton/index.tsx

@@ -34,6 +34,13 @@ const InputWithButton: FC<Props> = ({
         name={name}
         placeholder={placeholder}
         onChange={onChange}
+        onWheel={(e: any) => {
+          e.target.blur()
+          e.stopPropagation()
+          setTimeout(() => {
+            e.target.focus()
+          }, 0)
+        }}
       />
       <InputActionButton disabled={disabled || error} onClick={onButtonClick}>
         {buttonLabel}

src/containers/modals/BridgeConfirmModal/index.tsx

@@ -10,6 +10,7 @@ import {
   selectActiveNetworkIcon,
   selectActiveNetworkName,
   selectAmountToBridge,
+  selectBridgeDestinationAddress,
   selectBridgeType,
   selectDestChainIdTeleportation,
   selectLayer,
@@ -26,6 +27,7 @@ import {
   Item,
   LayerNames,
 } from './index.styles'
+import truncateMiddle from 'truncate-middle'
 
 interface Props {
   open: boolean
@@ -35,6 +37,7 @@ const BridgeConfirmModal: FC<Props> = ({ open }) => {
   const dispatch = useDispatch<any>()
   const bridgeType = useSelector(selectBridgeType())
   const token = useSelector(selectTokenToBridge())
+  const toL2Account = useSelector(selectBridgeDestinationAddress())
   const amountToBridge = useSelector(selectAmountToBridge())
   const networkNames = useSelector(selectActiveNetworkName())
   const activeNetworkIcon = useSelector(selectActiveNetworkIcon())
@@ -131,6 +134,14 @@ const BridgeConfirmModal: FC<Props> = ({ open }) => {
             {amountToUsd(amountToBridge, lookupPrice, token).toFixed(4)})
           </ConfirmValue>
         </Item>
+        {toL2Account && (
+          <Item>
+            <ConfirmLabel>Recipient</ConfirmLabel>
+            <ConfirmValue>
+              {truncateMiddle(toL2Account!, 6, 6, '...')}
+            </ConfirmValue>
+          </Item>
+        )}
         <Item>
           <ConfirmLabel>Time</ConfirmLabel>
           <ConfirmValue>{estimateTime()}</ConfirmValue>

src/hooks/useBridge/index.test.tsx

@@ -11,13 +11,19 @@ import { mockedInitialState } from 'util/tests'
 import networkService from 'services/networkService'
 
 import useBridge from '.'
+import { bridgeService } from 'services'
+
+jest.mock('services/bridge/bridge.services', () => {
+  return {
+    anchorageDepositERC20: jest.fn(),
+  }
+})
 
 jest.mock('services/networkService', () => {
   return {
     getAllAddresses: jest.fn(),
     approveERC20: jest.fn(),
     depositErc20: jest.fn(),
-    depositERC20Anchorage: jest.fn(),
     depositETHL2: jest.fn(),
     depositWithTeleporter: jest.fn(),
     exitBOBA: jest.fn(),
@@ -161,15 +167,15 @@ describe('UseBridge Hooks', () => {
   })
 
   describe('Layer 1', () => {
-    describe('Classic Bridge', () => {
+    xdescribe('Classic Bridge', () => {
       beforeEach(() => {
         ;(networkService.depositETHL2 as jest.Mock).mockResolvedValue({
           message: 'success!',
         })
         ;(networkService.depositErc20 as jest.Mock).mockResolvedValue({
           message: 'success!',
         })
-        ;(networkService.depositERC20Anchorage as jest.Mock).mockResolvedValue({
+        ;(bridgeService.anchorageDepositERC20 as jest.Mock).mockResolvedValue({
           message: 'success!',
         })
 
@@ -313,7 +319,7 @@ describe('UseBridge Hooks', () => {
         expect(actions).toEqual(successActionsClassic)
       })
 
-      test('should invoke depositErc20Anchorage correctly and reset state on success', async () => {
+      test('should invoke anchorageDepositERC20 correctly and reset state on success', async () => {
         store = mockStore({
           ...store,
           bridge: {
@@ -333,10 +339,10 @@ describe('UseBridge Hooks', () => {
         let prevActions = store.getActions()
         await result.current.triggerSubmit()
         expect(
-          (networkService.depositERC20Anchorage as jest.Mock).mock.calls
+          (bridgeService.anchorageDepositERC20 as jest.Mock).mock.calls
         ).toHaveLength(1)
         expect(
-          (networkService.depositERC20Anchorage as jest.Mock).mock.calls[0][0]
+          (bridgeService.anchorageDepositERC20 as jest.Mock).mock.calls[0][0]
         ).toEqual({
           recipient: '',
           L1DepositAmountWei: '1255000000000000000',
@@ -346,7 +352,7 @@ describe('UseBridge Hooks', () => {
         expect(prevActions).toEqual(successActionsClassic)
       })
 
-      test('should trigger depositErc20Anchorage correctly with reciepent address', async () => {
+      test('should trigger anchorageDepositERC20 correctly with reciepent address', async () => {
         store = mockStore({
           ...store,
           bridge: {
@@ -369,10 +375,10 @@ describe('UseBridge Hooks', () => {
 
         await result.current.triggerSubmit()
         expect(
-          (networkService.depositERC20Anchorage as jest.Mock).mock.calls
+          (bridgeService.anchorageDepositERC20 as jest.Mock).mock.calls
         ).toHaveLength(1)
         expect(
-          (networkService.depositERC20Anchorage as jest.Mock).mock.calls[0][0]
+          (bridgeService.anchorageDepositERC20 as jest.Mock).mock.calls[0][0]
         ).toEqual({
           currency: '0x0000000000000000000000000000000000000006',
           currencyL2: '0x0000000000000000000000000000000000000032',

src/hooks/useBridge/index.ts

@@ -1,14 +1,15 @@
 import {
   purgeBridgeAlert,
   resetBridgeAmount,
+  resetBridgeDestinationAddress,
   resetToken,
 } from 'actions/bridgeAction'
 import {
   approveERC20,
   depositErc20,
   depositErc20Anchorage,
-  depositETHAnchorageL2,
   depositETHL2,
+  depositNativeAnchorage,
   depositWithLightBridge,
   exitBOBA,
 } from 'actions/networkAction'
@@ -30,7 +31,12 @@ import {
 import networkService from 'services/networkService'
 import { toWei_String } from 'util/amountConvert'
 import { Layer, LAYER } from 'util/constant'
-import { INetwork, NetworkList } from '../../util/network/network.util'
+import {
+  INetwork,
+  Network,
+  NetworkList,
+  NetworkType,
+} from '../../util/network/network.util'
 
 export const useBridge = () => {
   const dispatch = useDispatch<any>()
@@ -63,35 +69,47 @@ export const useBridge = () => {
   }
 
   const triggerDeposit = async (amountWei: any) => {
-    let receipt
-    if (token.address === ethers.constants.AddressZero) {
-      if (!!isAnchorageEnabled) {
-        receipt = await dispatch(
-          depositETHAnchorageL2({
+    let reciept
+    if (!!isAnchorageEnabled) {
+      if (token.address === ethers.constants.AddressZero) {
+        reciept = await dispatch(
+          depositNativeAnchorage({
             recipient: toL2Account || '',
-            L1DepositAmountWei: amountWei,
+            amount: amountWei,
           })
         )
       } else {
-        receipt = await dispatch(
-          depositETHL2({
-            recipient: toL2Account || '',
-            value_Wei_String: amountWei,
+        let isBobaBnbToken = false
+        if (
+          activeNetwork === Network.BNB &&
+          activeNetworkType === NetworkType.TESTNET &&
+          token.symbol === 'BOBA'
+        ) {
+          // deposit BOBA in bnb-testnet with optimism.
+          isBobaBnbToken = true
+        }
+
+        reciept = await dispatch(
+          depositErc20Anchorage({
+            recipient: toL2Account,
+            amount: amountWei,
+            currency: token.address,
+            currencyL2: token.addressL2,
+            isBobaBnbToken,
           })
         )
       }
     } else {
-      if (!!isAnchorageEnabled) {
-        receipt = await dispatch(
-          depositErc20Anchorage({
+      // NOTE: Below code is getting use only for BNB Mainnet.
+      if (token.address === ethers.constants.AddressZero) {
+        reciept = await dispatch(
+          depositETHL2({
             recipient: toL2Account || '',
-            L1DepositAmountWei: amountWei,
-            currency: token.address,
-            currencyL2: token.addressL2,
+            value_Wei_String: amountWei,
           })
         )
       } else {
-        receipt = await dispatch(
+        reciept = await dispatch(
           depositErc20({
             recipient: toL2Account || '',
             value_Wei_String: amountWei,
@@ -101,8 +119,7 @@ export const useBridge = () => {
         )
       }
     }
-
-    return receipt
+    return reciept
   }
 
   const triggerTeleportAsset = async (
@@ -167,6 +184,7 @@ export const useBridge = () => {
       }
     }
     dispatch(closeModal('bridgeInProgress'))
+    dispatch(resetBridgeDestinationAddress())
     if (receipt) {
       dispatch(openModal({ modal: 'transactionSuccess' }))
       dispatch(resetToken())

src/hooks/useNetworkInfo/index.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { selectActiveNetwork, selectActiveNetworkType } from 'selectors'
-import { Network } from 'util/network/network.util'
+import { Network, NetworkType } from 'util/network/network.util'
 
 export const useNetworkInfo = () => {
   const [isAnchorageEnabled, setIsAnchorageEnabled] = useState(false)
@@ -11,8 +11,11 @@ export const useNetworkInfo = () => {
   const networkType = useSelector(selectActiveNetworkType())
 
   useEffect(() => {
-    // NOTE: as anchorage has been shiped to ETHEREUM & SEPOLIA both.
-    if (network === Network.ETHEREUM) {
+    // NOTE: as anchorage has been shiped to ETHEREUM and BNB Testnet only.
+    if (
+      network === Network.ETHEREUM ||
+      (network === Network.BNB && networkType === NetworkType.TESTNET)
+    ) {
       setIsAnchorageEnabled(true)
     } else {
       setIsAnchorageEnabled(false)

src/services/abi/OptimismPortal.abi.ts

@@ -1,2 +1,4 @@
-export const OptimismPortalABI =
-  '[{"inputs":[{"internalType":"contract L2OutputOracle","name":"_l2Oracle","type":"address"},{"internalType":"address","name":"_guardian","type":"address"},{"internalType":"bool","name":"_paused","type":"bool"},{"internalType":"contract SystemConfig","name":"_config","type":"address"}],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":false,"internalType":"uint8","name":"version","type":"uint8"}],"name":"Initialized","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"internalType":"address","name":"account","type":"address"}],"name":"Paused","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":true,"internalType":"address","name":"to","type":"address"},{"indexed":true,"internalType":"uint256","name":"version","type":"uint256"},{"indexed":false,"internalType":"bytes","name":"opaqueData","type":"bytes"}],"name":"TransactionDeposited","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"internalType":"address","name":"account","type":"address"}],"name":"Unpaused","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"bytes32","name":"withdrawalHash","type":"bytes32"},{"indexed":false,"internalType":"bool","name":"success","type":"bool"}],"name":"WithdrawalFinalized","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"bytes32","name":"withdrawalHash","type":"bytes32"},{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":true,"internalType":"address","name":"to","type":"address"}],"name":"WithdrawalProven","type":"event"},{"inputs":[],"name":"GUARDIAN","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"L2_ORACLE","outputs":[{"internalType":"contract L2OutputOracle","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"SYSTEM_CONFIG","outputs":[{"internalType":"contract SystemConfig","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"_to","type":"address"},{"internalType":"uint256","name":"_value","type":"uint256"},{"internalType":"uint64","name":"_gasLimit","type":"uint64"},{"internalType":"bool","name":"_isCreation","type":"bool"},{"internalType":"bytes","name":"_data","type":"bytes"}],"name":"depositTransaction","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[],"name":"donateETH","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[{"components":[{"internalType":"uint256","name":"nonce","type":"uint256"},{"internalType":"address","name":"sender","type":"address"},{"internalType":"address","name":"target","type":"address"},{"internalType":"uint256","name":"value","type":"uint256"},{"internalType":"uint256","name":"gasLimit","type":"uint256"},{"internalType":"bytes","name":"data","type":"bytes"}],"internalType":"struct Types.WithdrawalTransaction","name":"_tx","type":"tuple"}],"name":"finalizeWithdrawalTransaction","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"bytes32","name":"","type":"bytes32"}],"name":"finalizedWithdrawals","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"bool","name":"_paused","type":"bool"}],"name":"initialize","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_l2OutputIndex","type":"uint256"}],"name":"isOutputFinalized","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"l2Sender","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint64","name":"_byteCount","type":"uint64"}],"name":"minimumGasLimit","outputs":[{"internalType":"uint64","name":"","type":"uint64"}],"stateMutability":"pure","type":"function"},{"inputs":[],"name":"params","outputs":[{"internalType":"uint128","name":"prevBaseFee","type":"uint128"},{"internalType":"uint64","name":"prevBoughtGas","type":"uint64"},{"internalType":"uint64","name":"prevBlockNum","type":"uint64"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"pause","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"paused","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[{"components":[{"internalType":"uint256","name":"nonce","type":"uint256"},{"internalType":"address","name":"sender","type":"address"},{"internalType":"address","name":"target","type":"address"},{"internalType":"uint256","name":"value","type":"uint256"},{"internalType":"uint256","name":"gasLimit","type":"uint256"},{"internalType":"bytes","name":"data","type":"bytes"}],"internalType":"struct Types.WithdrawalTransaction","name":"_tx","type":"tuple"},{"internalType":"uint256","name":"_l2OutputIndex","type":"uint256"},{"components":[{"internalType":"bytes32","name":"version","type":"bytes32"},{"internalType":"bytes32","name":"stateRoot","type":"bytes32"},{"internalType":"bytes32","name":"messagePasserStorageRoot","type":"bytes32"},{"internalType":"bytes32","name":"latestBlockhash","type":"bytes32"}],"internalType":"struct Types.OutputRootProof","name":"_outputRootProof","type":"tuple"},{"internalType":"bytes[]","name":"_withdrawalProof","type":"bytes[]"}],"name":"proveWithdrawalTransaction","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"bytes32","name":"","type":"bytes32"}],"name":"provenWithdrawals","outputs":[{"internalType":"bytes32","name":"outputRoot","type":"bytes32"},{"internalType":"uint128","name":"timestamp","type":"uint128"},{"internalType":"uint128","name":"l2OutputIndex","type":"uint128"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"unpause","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"version","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"stateMutability":"payable","type":"receive"}]'
+export const OptimismPortalABI = [
+  'function depositERC20Transaction(address _to, uint256 _mint,uint256 _value, uint64 _gasLimit,bool _isCreation,bytes memory _data) external',
+  'function depositTransaction(address _to,uint256 _value,uint64 _gasLimit,bool _isCreation,bytes memory _data) external payable',
+]