feat: store withdrawal statuses in local storage

packages/arb-token-bridge-ui/src/util/CommonUtils.ts

@@ -1,3 +1,33 @@
+let localStoragePromise = Promise.resolve()
+
+export function addToLocalStorageObjectSequentially({
+  localStorageKey,
+  localStorageValue
+}: {
+  localStorageKey: string
+  localStorageValue: Record<string, string | number | boolean>
+}) {
+  localStoragePromise = localStoragePromise.then(() => {
+    const localStorageItem = localStorage.getItem(localStorageKey)
+
+    if (!localStorageItem) {
+      localStorage.setItem(
+        localStorageKey,
+        JSON.stringify({ ...localStorageValue })
+      )
+      return
+    }
+
+    localStorage.setItem(
+      localStorageKey,
+      JSON.stringify({
+        ...JSON.parse(localStorageItem),
+        ...localStorageValue
+      })
+    )
+  })
+}
+
 export function shortenAddress(address: string) {
   const addressLength = address.length
 

packages/arb-token-bridge-ui/src/util/withdrawals/helpers.ts

@@ -19,6 +19,7 @@ import {
 } from '../../hooks/arbTokenBridge.types'
 import { getExecutedMessagesCacheKey } from '../../hooks/useArbTokenBridge'
 import { fetchNativeCurrency } from '../../hooks/useNativeCurrency'
+import { addToLocalStorageObjectSequentially } from '../CommonUtils'
 
 /**
  * `l2TxHash` exists on result from subgraph
@@ -107,13 +108,15 @@ export async function getOutgoingMessageState(
   l2Provider: Provider,
   l2ChainID: number
 ) {
+  const localStorageKey = 'arbitrum:bridge:executed-messages'
+
   const cacheKey = getExecutedMessagesCacheKey({
     event,
     l2ChainId: l2ChainID
   })
 
   const executedMessagesCache = JSON.parse(
-    localStorage.getItem('arbitrum:bridge:executed-messages') || '{}'
+    localStorage.getItem(localStorageKey) || '{}'
   )
   if (executedMessagesCache[cacheKey]) {
     return OutgoingMessageState.EXECUTED
@@ -122,7 +125,16 @@ export async function getOutgoingMessageState(
   const messageReader = new ChildToParentMessageReader(l1Provider, event)
 
   try {
-    return await messageReader.status(l2Provider)
+    const status = await messageReader.status(l2Provider)
+
+    if (status === OutgoingMessageState.EXECUTED) {
+      addToLocalStorageObjectSequentially({
+        localStorageKey,
+        localStorageValue: { [cacheKey]: true }
+      })
+    }
+
+    return status
   } catch (error) {
     return OutgoingMessageState.UNCONFIRMED
   }