Fe/move pending bridge transactions (#1546)

* Move `pendingBridgeTransactions` actions to `transactions` * Move `pendingBridgeTransactions` reducers to `transactions` * Update `resetTransactionsState` reducer to reset `pendingBridgeTransactions` and `fallbackQueryHistoricalTransactions` * Replace all instances of `pendingBridgeTransactions` to updated * Update version tracking to reset cache * Remove bridge from `persistedReducers` * Update `pendingBridgeTransactions` instance * Clean imports * ... * Update actions naming * cf --------- Co-authored-by: Jonah Lin <[email protected]>
synapsecns · Nov 8, 2023 · 925a11a · 925a11a
1 parent c1cd08d
commit 925a11a
Show file tree

Hide file tree

Showing 12 changed files with 121 additions and 143 deletions.
diff --git a/packages/synapse-interface/components/Portfolio/Activity.tsx b/packages/synapse-interface/components/Portfolio/Activity.tsx
@@ -9,9 +9,7 @@ import { Chain, Token } from '@/utils/types'
 import { tokenAddressToToken } from '@/constants/tokens'
 import { TransactionsState } from '@/slices/transactions/reducer'
 import { PortfolioState } from '@/slices/portfolio/reducer'
-import { PendingBridgeTransaction } from '@/slices/bridge/actions'
-import { BridgeState } from '@/slices/bridge/reducer'
-import { useBridgeState } from '@/slices/bridge/hooks'
+import { PendingBridgeTransaction } from '@/slices/transactions/actions'
 import { Transaction, TransactionType } from './Transaction/Transaction'
 import { PendingTransaction } from './Transaction/PendingTransaction'
 import { UserExplorerLink } from './Transaction/components/TransactionExplorerLink'
@@ -27,8 +25,8 @@ export const Activity = ({ visibility }: { visibility: boolean }) => {
     pendingAwaitingCompletionTransactions,
     fallbackQueryPendingTransactions,
     fallbackQueryHistoricalTransactions,
+    pendingBridgeTransactions,
   }: TransactionsState = useTransactionsState()
-  const { pendingBridgeTransactions }: BridgeState = useBridgeState()
   const { searchInput, searchedBalancesAndAllowances }: PortfolioState =
     usePortfolioState()
 
@@ -328,7 +326,8 @@ export const Activity = ({ visibility }: { visibility: boolean }) => {
 
 export const PendingTransactionAwaitingIndexing = () => {
   const { address } = useAccount()
-  const { pendingBridgeTransactions }: BridgeState = useBridgeState()
+  const { pendingBridgeTransactions }: TransactionsState =
+    useTransactionsState()
   return (
     <>
       {pendingBridgeTransactions.map(

diff --git a/packages/synapse-interface/components/Portfolio/Portfolio.tsx b/packages/synapse-interface/components/Portfolio/Portfolio.tsx
@@ -24,11 +24,11 @@ import { resetTransactionsState } from '@/slices/transactions/actions'
 import { PortfolioState } from '@/slices/portfolio/reducer'
 import { useBridgeState } from '@/slices/bridge/hooks'
 import { BridgeState } from '@/slices/bridge/reducer'
-import { isValidAddress } from '@/utils/isValidAddress'
-import { Activity } from './Activity'
-import { ViewSearchAddressBanner } from './SearchBar'
 import { resetBridgeInputs } from '@/slices/bridge/actions'
 import { resetReduxCache } from '@/slices/application/actions'
+import { isValidAddress } from '@/utils/isValidAddress'
+import { ViewSearchAddressBanner } from './SearchBar'
+import { Activity } from './Activity'
 
 export const Portfolio = () => {
   const dispatch = useAppDispatch()

diff --git a/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx
@@ -1,13 +1,11 @@
 import { useState, useEffect, useMemo } from 'react'
 import { useAccount, Address } from 'wagmi'
 import { Chain, Token } from '@/utils/types'
-import { useBridgeState } from '@/slices/bridge/hooks'
 import { useTransactionsState } from '@/slices/transactions/hooks'
 import { usePortfolioState } from '@/slices/portfolio/hooks'
 import { PortfolioState } from '@/slices/portfolio/reducer'
-import { BridgeState } from '@/slices/bridge/reducer'
 import { TransactionsState } from '@/slices/transactions/reducer'
-import { PendingBridgeTransaction } from '@/slices/bridge/actions'
+import { PendingBridgeTransaction } from '@/slices/transactions/actions'
 import { BridgeTransaction } from '@/slices/api/generated'
 import { getTimeMinutesBeforeNow } from '@/utils/time'
 import { TransactionType } from './Transaction'
@@ -18,7 +16,6 @@ import { checkTransactionsExist } from '@/utils/checkTransactionsExist'
 
 export const MostRecentTransaction = () => {
   const { address } = useAccount()
-  const { pendingBridgeTransactions }: BridgeState = useBridgeState()
   const {
     userHistoricalTransactions,
     isUserHistoricalTransactionsLoading,
@@ -27,6 +24,7 @@ export const MostRecentTransaction = () => {
     pendingAwaitingCompletionTransactions,
     fallbackQueryHistoricalTransactions,
     fallbackQueryPendingTransactions,
+    pendingBridgeTransactions,
   }: TransactionsState = useTransactionsState()
   const { searchInput, searchedBalancesAndAllowances }: PortfolioState =
     usePortfolioState()

diff --git a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx
@@ -5,7 +5,7 @@ import { useAppDispatch } from '@/store/hooks'
 import {
   removePendingBridgeTransaction,
   updatePendingBridgeTransaction,
-} from '@/slices/bridge/actions'
+} from '@/slices/transactions/actions'
 import { BridgeType } from '@/slices/api/generated'
 import { getTimeMinutesFromNow } from '@/utils/time'
 import { ARBITRUM, ETH } from '@/constants/chains/master'

diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
@@ -56,26 +56,21 @@ import { Address, zeroAddress } from 'viem'
 import { stringToBigInt } from '@/utils/bigint/format'
 import { Warning } from '@/components/Warning'
 import { useAppDispatch } from '@/store/hooks'
-import { NetworkTokenBalancesAndAllowances } from '@/utils/actions/fetchPortfolioBalances'
 import {
   fetchAndStoreSingleTokenAllowance,
-  fetchAndStoreSingleTokenBalance,
   useFetchPortfolioBalances,
 } from '@/slices/portfolio/hooks'
 import {
   updatePendingBridgeTransaction,
   addPendingBridgeTransaction,
   removePendingBridgeTransaction,
-  PendingBridgeTransaction,
-} from '@/slices/bridge/actions'
+} from '@/slices/transactions/actions'
 import { getTimeMinutesFromNow } from '@/utils/time'
-import { FetchState } from '@/slices/portfolio/actions'
 import { updateSingleTokenAllowance } from '@/slices/portfolio/actions'
 import { FromChainListOverlay } from '@/components/StateManagedBridge/FromChainListOverlay'
 import { ToChainListOverlay } from '@/components/StateManagedBridge/ToChainListOverlay'
 import { FromTokenListOverlay } from '@/components/StateManagedBridge/FromTokenListOverlay'
 import { ToTokenListOverlay } from '@/components/StateManagedBridge/ToTokenListOverlay'
-import { checkTransactionsExist } from '@/utils/checkTransactionsExist'
 
 const StateManagedBridge = () => {
   const { address } = useAccount()
@@ -102,9 +97,7 @@ const StateManagedBridge = () => {
     toChainIds,
     fromTokens,
     toTokens,
-    pendingBridgeTransactions,
   }: BridgeState = useBridgeState()
-
   const {
     showSettingsSlideOver,
     showDestinationAddress,

diff --git a/packages/synapse-interface/slices/bridge/actions.ts b/packages/synapse-interface/slices/bridge/actions.ts
@@ -1,42 +1,12 @@
 import { createAction } from '@reduxjs/toolkit'
 
-import { Chain, Token } from '@/utils/types'
-
-export interface PendingBridgeTransaction {
-  id: number
-  originChain: Chain
-  originToken: Token
-  originValue: string
-  destinationChain: Chain
-  destinationToken: Token
-  transactionHash?: string
-  timestamp: number
-  isSubmitted: boolean
-  estimatedTime: number
-  bridgeModuleName: string
-}
-
-export const addPendingBridgeTransaction =
-  createAction<PendingBridgeTransaction>('bridge/addPendingBridgeTransaction')
-export const updatePendingBridgeTransaction = createAction<{
-  id: number
-  timestamp: number
-  transactionHash: string
-  isSubmitted: boolean
-}>('bridge/updatePendingBridgeTransaction')
-export const removePendingBridgeTransaction = createAction<number>(
-  'bridge/removePendingBridgeTransaction'
-)
-export const updatePendingBridgeTransactions = createAction<
-  PendingBridgeTransaction[]
->('bridge/updatePendingBridgeTransactions')
-export const resetBridgeInputs = createAction<void>('bridge/resetBridgeInputs')
-export const resetFetchedBridgeQuotes = createAction<void>(
-  'bridge/resetFetchedBridgeQuotes'
-)
 export const updateDebouncedFromValue = createAction<string>(
   'bridge/updateDebouncedFromValue'
 )
 export const updateDebouncedToTokensFromValue = createAction<string>(
   'bridge/updateDebouncedToTokensFromValue'
 )
+export const resetBridgeInputs = createAction<void>('bridge/resetBridgeInputs')
+export const resetFetchedBridgeQuotes = createAction<void>(
+  'bridge/resetFetchedBridgeQuotes'
+)
diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts
@@ -13,12 +13,7 @@ import { getToChainIds } from '@/utils/routeMaker/getToChainIds'
 import { getToTokens } from '@/utils/routeMaker/getToTokens'
 import { findTokenByRouteSymbol } from '@/utils/findTokenByRouteSymbol'
 import {
-  PendingBridgeTransaction,
-  addPendingBridgeTransaction,
-  removePendingBridgeTransaction,
   resetFetchedBridgeQuotes,
-  updatePendingBridgeTransaction,
-  updatePendingBridgeTransactions,
   resetBridgeInputs,
   updateDebouncedFromValue,
   updateDebouncedToTokensFromValue,
@@ -47,7 +42,6 @@ export interface BridgeState {
   isLoading: boolean
   deadlineMinutes: number | null
   destinationAddress: Address | null
-  pendingBridgeTransactions: PendingBridgeTransaction[]
 }
 
 const {
@@ -85,7 +79,6 @@ export const initialState: BridgeState = {
   isLoading: false,
   deadlineMinutes: null,
   destinationAddress: null,
-  pendingBridgeTransactions: [],
 }
 
 export const bridgeSlice = createSlice({
@@ -481,57 +474,6 @@ export const bridgeSlice = createSlice({
           state.debouncedToTokensFromValue = action.payload
         }
       )
-      .addCase(
-        addPendingBridgeTransaction,
-        (state, action: PayloadAction<PendingBridgeTransaction>) => {
-          state.pendingBridgeTransactions = [
-            action.payload,
-            ...state.pendingBridgeTransactions,
-          ]
-        }
-      )
-      .addCase(
-        updatePendingBridgeTransaction,
-        (
-          state,
-          action: PayloadAction<{
-            id: number
-            timestamp: number
-            transactionHash: string
-            isSubmitted: boolean
-          }>
-        ) => {
-          const { id, timestamp, transactionHash, isSubmitted } = action.payload
-          const transactionIndex = state.pendingBridgeTransactions.findIndex(
-            (transaction) => transaction.id === id
-          )
-
-          if (transactionIndex !== -1) {
-            state.pendingBridgeTransactions =
-              state.pendingBridgeTransactions.map((transaction, index) =>
-                index === transactionIndex
-                  ? { ...transaction, transactionHash, isSubmitted, timestamp }
-                  : transaction
-              )
-          }
-        }
-      )
-      .addCase(
-        removePendingBridgeTransaction,
-        (state, action: PayloadAction<number>) => {
-          const idTimestampToRemove = action.payload
-          state.pendingBridgeTransactions =
-            state.pendingBridgeTransactions.filter(
-              (transaction) => transaction.id !== idTimestampToRemove
-            )
-        }
-      )
-      .addCase(
-        updatePendingBridgeTransactions,
-        (state, action: PayloadAction<PendingBridgeTransaction[]>) => {
-          state.pendingBridgeTransactions = action.payload
-        }
-      )
       .addCase(resetBridgeInputs, (state) => {
         state.fromChainId = initialState.fromChainId
         state.fromToken = initialState.fromToken

diff --git a/packages/synapse-interface/slices/portfolio/updater.tsx b/packages/synapse-interface/slices/portfolio/updater.tsx
@@ -1,25 +1,18 @@
 import { useEffect } from 'react'
+import { useAccount } from 'wagmi'
 import { Address } from '@wagmi/core'
-import { watchPendingTransactions, waitForTransaction } from '@wagmi/core'
 import { useAppDispatch } from '@/store/hooks'
-import { useBridgeState } from '../bridge/hooks'
 import { useTransactionsState } from '../transactions/hooks'
 import { TransactionsState } from '../transactions/reducer'
-import { BridgeState } from '../bridge/reducer'
 import { fetchAndStoreSingleNetworkPortfolioBalances } from './hooks'
-
-import { useAccount } from 'wagmi'
-import {
-  PendingBridgeTransaction,
-  updatePendingBridgeTransaction,
-} from '../bridge/actions'
+import { PendingBridgeTransaction } from '../transactions/actions'
 import { BridgeTransaction } from '../api/generated'
 
 export default function Updater(): null {
   const dispatch = useAppDispatch()
   const { address } = useAccount()
-  const { pendingBridgeTransactions }: BridgeState = useBridgeState()
   const {
+    pendingBridgeTransactions,
     userHistoricalTransactions,
     isUserHistoricalTransactionsLoading,
   }: TransactionsState = useTransactionsState()

diff --git a/packages/synapse-interface/slices/transactions/actions.ts b/packages/synapse-interface/slices/transactions/actions.ts
@@ -1,6 +1,38 @@
 import { createAction } from '@reduxjs/toolkit'
 
 import { BridgeTransaction } from '../api/generated'
+import { Chain, Token } from '@/utils/types'
+
+export interface PendingBridgeTransaction {
+  id: number
+  originChain: Chain
+  originToken: Token
+  originValue: string
+  destinationChain: Chain
+  destinationToken: Token
+  transactionHash?: string
+  timestamp: number
+  isSubmitted: boolean
+  estimatedTime: number
+  bridgeModuleName: string
+}
+
+export const addPendingBridgeTransaction =
+  createAction<PendingBridgeTransaction>(
+    'transactions/addPendingBridgeTransaction'
+  )
+export const updatePendingBridgeTransaction = createAction<{
+  id: number
+  timestamp: number
+  transactionHash: string
+  isSubmitted: boolean
+}>('transactions/updatePendingBridgeTransaction')
+export const removePendingBridgeTransaction = createAction<number>(
+  'transactions/removePendingBridgeTransaction'
+)
+export const updatePendingBridgeTransactions = createAction<
+  PendingBridgeTransaction[]
+>('transactions/updatePendingBridgeTransactions')
 
 export const updateUserHistoricalTransactions = createAction<
   BridgeTransaction[]