bobanetwork · sk-enya · May 4, 2024 · Apr 30, 2024 · May 1, 2024 · May 1, 2024
diff --git a/cypress/e2e/specs/layout.spec.cy.ts b/cypress/e2e/specs/layout.spec.cy.ts
@@ -37,10 +37,6 @@ describe('Page Layout', () => {
       page.setNetworkTo('ETH')
       page.checkGasWatcherListingInETH()
     })
-    it('Gas details should be visible with no status verifier value in cas of BNB', () => {
-      page.setNetworkTo('BNB')
-      page.checkGasWatcherListingInBNB()
-    })
     it('Copyright & Version', () => {
       page.checkCopyrightAndVersion()
     })

diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
   "dependencies": {
     "@apollo/client": "^3.5.10",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@bobanetwork/graphql-utils": "^1.1.9",
+    "@bobanetwork/graphql-utils": "^1.1.11",
     "@bobanetwork/light-bridge-chains": "^1.1.0",
     "@bobanetwork/
8000
register": "^0.0.25",
     "@bobanetwork/sdk": "1.0.7",

diff --git a/readme.md b/readme.md
@@ -66,7 +66,7 @@ Copy `.env.example` file and name by excluding `.example` and populate the varia
 | REACT_APP_ENV                 | Yes      | dev          | This will be used in case of sentry configuration.                                                                                                                                         |
 | REACT_APP_GA4_MEASUREMENT_ID  | Yes      | N/A          | Google analytics api key                                                                                                                                                                   |
 | REACT_APP_SENTRY_DSN          | Yes      | N/A          | Sentry DSN url to catch the error on frontend                                                                                                                                              |
-| REACT_APP_GAS_POLL_INTERVAL   | Yes      | 30000        | Poll interval to fetch the gas price and verifier status                                                                                                                                   |
+| REACT_APP_GAS_POLL_INTERVAL   | Yes      | 30000        | Poll interval to fetch the gas price status                                                                                                                                   |
 | REACT_APP_WC_PROJECT_ID=      | Yes      | N/A          | Wallet Connect project ID                                                                                                                                                                  |
 | CYPRESS_REMOTE_DEBUGGING_PORT | Yes      | 9222         | Debugging port for Cypress                                                                                                                                                                 |
 | NETWORK_NAME                  | Yes      | sepolia       | Starting network for wallet                                                                                                                                                                |

diff --git a/src/actions/uiAction.ts b/src/actions/uiAction.ts
@@ -24,6 +24,7 @@ interface IOpenModalProps {
   selectionLayer?: any
   destNetworkSelection?: any
   isNewTx?: Boolean
+  isAnchorageWithdrawal?: Boolean
 }
 
 export const openModal =
@@ -33,6 +34,7 @@ export const openModal =
     selectionLayer,
     destNetworkSelection,
     isNewTx,
+    isAnchorageWithdrawal,
   }: IOpenModalProps): any =>
   (dispatch) =>
     dispatch({
@@ -42,8 +44,12 @@ export const openModal =
       selectionLayer,
       destNetworkSelection,
       isNewTx,
+      isAnchorageWithdrawal,
     })
 
+export const resetAnchorageWithdrawalStatus = (): any => (dispatch) =>
+  dispatch({ type: 'UI/MODAL/CLOSE', isAnchorageWithdrawal: false })
+
 export const closeModal =
   (modal): any =>
   (dispatch) =>

diff --git a/src/actions/verifierAction.ts b/src/actions/verifierAction.ts
diff --git a/src/api/verifierWatcherAxios.ts b/src/api/verifierWatcherAxios.ts
diff --git a/src/components/NetworkSelector/index.tsx b/src/components/NetworkSelector/index.tsx
@@ -11,7 +11,6 @@ import { useDispatch, useSelector } from 'react-redux'
 import { BRIDGE_TYPE } from 'containers/Bridging/BridgeTypeSelector'
 import { NetworkSelectorDropdown } from './styles'
 import { IDropdownItem } from 'components/global/dropdown'
-import { setBridgeType } from 'actions/bridgeAction'
 
 const NetworkDropdownHeading = {
   label: 'Networks',

diff --git a/src/components/layout/Footer/GasWatcher/__snapshots__/index.test.tsx.snap b/src/components/layout/Footer/GasWatcher/__snapshots__/index.test.tsx.snap
@@ -76,20 +76,6 @@ exports[`Footer GasWatcher should match snapshot when gas has value 1`] = `
         220000
       </p>
     </div>
-    <div
-      class="sc-fPXMVe fYeija"
-    >
-      <p
-        class="sc-imWYAI dZiXLh sc-gFqAkR cKDrUh"
-      >
-        Last Verified Block
-      </p>
-      <p
-        class="sc-imWYAI dZiXLh sc-ikkxIA sRcg"
-      >
-        0
-      </p>
-    </div>
   </div>
 </DocumentFragment>
 `;

diff --git a/src/components/layout/Footer/GasWatcher/index.test.tsx b/src/components/layout/Footer/GasWatcher/index.test.tsx
@@ -48,7 +48,6 @@ describe('Footer GasWatcher', () => {
     mockUseGasWatcher.mockReturnValue({
       gas: null,
       savings: 1,
-      verifierStatus: 231223,
     })
     const { asFragment } = renderGasWatcher({})
     expect(asFragment()).toMatchSnapshot()
@@ -63,50 +62,8 @@ describe('Footer GasWatcher', () => {
         blockL2: 220000,
       },
       savings: 1,
-      verifierStatus: 231223,
     })
     const { asFragment } = renderGasWatcher({})
     expect(asFragment()).toMatchSnapshot()
   })
-
-  test('should show last verified block in case of ethereum network', () => {
-    mockUseGasWatcher.mockReturnValue({
-      gas: {
-        gasL1: 10,
-        gasL2: 20,
-        blockL1: 110000,
-        blockL2: 220000,
-      },
-      savings: 1,
-      verifierStatus: 231223,
-    })
-    renderGasWatcher({})
-    expect(screen.getByText('Last Verified Block')).toBeInTheDocument()
-  })
-
-  test('should remove last verified block from dom incase of BNB network', () => {
-    mockUseGasWatcher.mockReturnValue({
-      gas: {
-        gasL1: 10,
-        gasL2: 20,
-        blockL1: 110000,
-        blockL2: 220000,
-      },
-      savings: 1,
-      verifierStatus: 231223,
-    })
-    renderGasWatcher({
-      options: {
-        network: {
-          activeNetwork: Network.BNB,
-          activeNetworkType: NetworkType.MAINNET,
-          activeNetworkName: {
-            l1: 'Binance',
-            l2: 'Boba BNB',
-          },
-        },
-      },
-    })
-    expect(screen.queryByText('Last Verified Block')).not.toBeInTheDocument()
-  })
 })
diff --git a/src/components/layout/Footer/GasWatcher/index.tsx b/src/components/layout/Footer/GasWatcher/index.tsx
@@ -7,13 +7,11 @@ import {
 } from './style'
 import useGasWatcher from 'hooks/useGasWatcher'
 import { useSelector } from 'react-redux'
-import { selectActiveNetwork, selectActiveNetworkName } from 'selectors'
-import { Network } from 'util/network/network.util'
+import { selectActiveNetworkName } from 'selectors'
 
 const GasWatcher: FC = () => {
-  const { gas, savings, verifierStatus } = useGasWatcher()
+  const { gas, savings } = useGasWatcher()
   const networkName = useSelector(selectActiveNetworkName())
-  const activeNetwork = useSelector(selectActiveNetwork())
 
   if (!gas) {
     return null
@@ -41,14 +39,6 @@ const GasWatcher: FC = () => {
         <GasListItemLabel>L2</GasListItemLabel>
         <GasListItemValue>{gas?.blockL2}</GasListItemValue>
       </GasListItem>
-      {activeNetwork === Network.ETHEREUM ? (
-        <GasListItem>
-          <GasListItemLabel>Last Verified Block</GasListItemLabel>
-          <GasListItemValue>
-            {Number(verifierStatus?.matchedBlock || 0)}
-          </GasListItemValue>
-        </GasListItem>
-      ) : null}
     </GasListContainer>
   )
 }

diff --git a/src/containers/Bridging/BridgeInput/Fee/index.tsx b/src/containers/Bridging/BridgeInput/Fee/index.tsx
@@ -9,8 +9,6 @@ import {
   selectExitFee,
   selectFastDepositCost,
   selectFastExitCost,
-  selectL1FeeRateN,
-  selectL2FeeRateN,
   selectLayer,
 } from 'selectors'
 import { useSelector } from 'react-redux'
@@ -21,17 +19,12 @@ import networkService from 'services/networkService'
 import { useTheme } from 'styled-components'
 import { useNetworkInfo } from 'hooks/useNetworkInfo'
 
-interface Props {}
-
-const Fee = (props: Props) => {
+const Fee = () => {
   const bridgeType = useSelector(selectBridgeType())
   const layer = useSelector(selectLayer())
-  const l2FeeRateN = useSelector(selectL2FeeRateN)
   const theme: any = useTheme()
   const depositFee = useSelector(selectFastDepositCost)
 
-  // required on L2 layer
-  const l1FeeRateN = useSelector(selectL1FeeRateN)
   const classicExitCost = useSelector(selectClassicExitCost)
   const fastExitCost = useSelector(selectFastExitCost)
   const feeUseBoba = useSelector(selectBobaFeeChoice())
@@ -40,7 +33,7 @@ const Fee = (props: Props) => {
 
   const { isAnchorageEnabled, isActiveNetworkBnb } = useNetworkInfo()
 
-  const { amount: amountToReceive } = useAmountToReceive()
+  const { amount: amountToReceive, lightBridgeExitFee } = useAmountToReceive()
 
   const [gasFee, setGasFee] = useState('')
 
@@ -108,6 +101,12 @@ const Fee = (props: Props) => {
           <Label>{gasFee}</Label>
         </InfoRow>
       )}
+      {bridgeType === BRIDGE_TYPE.LIGHT && layer === LAYER.L2 ? (
+        <InfoRow>
+          <Label>Bridge fee</Label>
+          <Label>{lightBridgeExitFee}</Label>
+        </InfoRow>
+      ) : null}
       {isActiveNetworkBnb &&
       layer === LAYER.L2 &&
       bridgeType !== BRIDGE_TYPE.LIGHT ? (

diff --git a/src/containers/history/History.tsx b/src/containers/history/History.tsx
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. */
 
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { isEqual } from 'util/lodash'
 
@@ -155,15 +155,17 @@ const History = () => {
     )
   }
 
-  const syncTransactions = async () => {
+  const syncTransactions = useCallback(() => {
     if (accountEnabled) {
       dispatch(fetchTransactions())
     }
-  }
+  }, [accountEnabled])
+
+  useEffect(() => {
+    syncTransactions()
+  }, [])
 
-  useInterval(async () => {
-    await syncTransactions()
-  }, POLL_INTERVAL)
+  useInterval(syncTransactions, POLL_INTERVAL)
 
   return (
     <HistoryPageContainer id={'history'}>

diff --git a/src/containers/history/TransactionsResolver.tsx b/src/containers/history/TransactionsResolver.tsx
@@ -21,6 +21,7 @@ import {
   IconContainer,
   Image,
   IncompleteTransactionHash,
+  NoAction,
   NoHistory,
   Status,
   TransactionAmount,
@@ -133,12 +134,12 @@ export const TransactionsResolver: React.FC<ITransactionsResolverProps> = ({
     return TRANSACTION_FILTER_STATUS.Canceled
   }
   const statusFilter = (transaction: ITransaction) => {
-    transaction.UserFacingStatus = getTransactionStatus(transaction)
+    const userFacingStatus = getTransactionStatus(transaction)
     if (
       transactionsFilter.status &&
       transactionsFilter.status !== TRANSACTION_FILTER_STATUS.All
     ) {
-      return transactionsFilter.status === transaction.UserFacingStatus
+      return transactionsFilter.status === userFacingStatus
     }
 
     return true
@@ -208,15 +209,17 @@ export const TransactionsResolver: React.FC<ITransactionsResolverProps> = ({
       toHash = transaction.crossDomainMessage.l2Hash
     }
 
+    const status = getTransactionStatus(transaction)
+
     const processedTransaction: IProcessedTransaction = {
       timeStamp: transaction.timeStamp,
       from: transaction.from,
       fromHash,
       toHash,
+      status,
       to: transaction.to,
       tokenSymbol: symbol,
       amount: amountString,
-      status: transaction.UserFacingStatus,
       originChainId: transaction.originChainId,
       destinationChainId: transaction.destinationChainId,
       actionRequired: transaction.actionRequired,
@@ -353,6 +356,10 @@ export const TransactionsResolver: React.FC<ITransactionsResolverProps> = ({
                       content: getTransactionAmount(transaction.amount),
                       width: 80,
                     },
+                    {
+                      content: <Status>{transaction.status}</Status>,
+                      width: 80,
+                    },
                     {
                       content: transaction.actionRequired ? (
                         <Button
@@ -361,10 +368,10 @@ export const TransactionsResolver: React.FC<ITransactionsResolverProps> = ({
                           size="small"
                            => handleAction(transaction)}
                         >
-                          Reenter
+                          Continue
                         </Button>
                       ) : (
-                        <Status>{transaction.status}</Status>
+                        <NoAction>-</NoAction>
                       ),
                       width: 88,
                     },

diff --git a/src/containers/history/constants.ts b/src/containers/history/constants.ts
@@ -211,5 +211,6 @@ export const TableOptions: TableHeaderOptionType[] = [
     tooltip: '',
   },
   { name: 'Amount', width: 80, tooltip: '' },
-  { name: 'Status', width: 88, tooltip: '' },
+  { name: 'Status', width: 80, tooltip: '' },
+  { name: 'Action', width: 88, tooltip: '' },
 ]
diff --git a/src/containers/history/styles.ts b/src/containers/history/styles.ts
@@ -281,6 +281,15 @@ export const TransactionAmount = styled.div`
   `)}
 `
 
+export const NoAction = styled.div`
+  font-size: 14px;
+  width: 80px;
+  text-align: center;
+  ${mobile(css`
+    font-size: 10px;
+  `)}
+`
+
 export const Status = styled.div`
   font-size: 14px;
   width: 88px;