Merge pull request #492 from hemilabs/allow-resync-tx-history

Allow resync tx history

webapp/app/[locale]/tunnel/transaction-history/_components/reloadHistory.tsx

@@ -0,0 +1,29 @@
+import { useTunnelHistory } from 'hooks/useTunnelHistory'
+import { useTranslations } from 'next-intl'
+
+const ReloadIcon = () => (
+  <svg fill="none" height={14} width={14} xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M2.917 4.667h-.584v.583h.584v-.583ZM3.5 2.334V1.75H2.333v.583H3.5ZM5.25 5.25h.583V4.083H5.25V5.25Zm5.257 6.417v.583h1.167v-.583h-1.167Zm.583-2.333h.584V8.75h-.584v.584ZM8.757 8.75h-.584v1.167h.584V8.75ZM7 11.084A4.083 4.083 0 0 1 2.917 7H1.75c0 2.9 2.35 5.25 5.25 5.25v-1.166Zm0-8.167A4.083 4.083 0 0 1 11.083 7h1.167c0-2.9-2.35-5.25-5.25-5.25v1.167ZM3.422 4.959A4.15 4.15 0 0 1 7 2.917V1.75a5.316 5.316 0 0 0-4.588 2.625l1.01.584ZM2.917 7c0-.173.01-.344.031-.511l-1.157-.144c-.027.215-.041.433-.041.655h1.167Zm8.166 0c0 .174-.01.344-.031.511l1.157.145c.027-.215.04-.434.04-.656h-1.166Zm-.505 2.041A4.15 4.15 0 0 1 7 11.084v1.166a5.316 5.316 0 0 0 4.588-2.624l-1.01-.585ZM2.333 2.333v2.334H3.5V2.334H2.333Zm.584 2.917H5.25V4.083H2.917V5.25Zm8.757 6.417V9.334h-1.167v2.333h1.167ZM11.09 8.75H8.757v1.167h2.333V8.75Z"
+      fill="#737373"
+    />
+  </svg>
+)
+
+export const ReloadHistory = function () {
+  const t = useTranslations()
+  const { resyncHistory } = useTunnelHistory()
+
+  return (
+    <button
+      className="flex cursor-pointer items-center gap-x-1 rounded-full bg-neutral-100 px-4 py-1"
+      onClick={resyncHistory}
+      type="button"
+    >
+      <ReloadIcon />
+      <span className="text-sm font-medium text-neutral-600">
+        {t('tunnel-page.transaction-history.column-headers.reload')}
+      </span>
+    </button>
+  )
+}

webapp/app/[locale]/tunnel/transaction-history/_components/transactionHistory.tsx

@@ -35,6 +35,7 @@ import { Amount } from './amount'
 import { Chain as ChainComponent } from './chain'
 import { DepositAction } from './depositAction'
 import { Paginator } from './paginator'
+import { ReloadHistory } from './reloadHistory'
 import { TxLink } from './txLink'
 import { TxStatus } from './txStatus'
 import { TxTime } from './txTime'
@@ -192,7 +193,7 @@ const columnsBuilder = (
       ) : (
         <WithdrawAction withdraw={row.original} />
       ),
-    header: () => <Header />,
+    header: () => <ReloadHistory />,
     id: 'action',
   },
 ]

webapp/context/tunnelHistoryContext/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { featureFlags } from 'app/featureFlags'
-import { useBitcoin } from 'hooks/useBitcoin'
 import { useHemi } from 'hooks/useHemi'
 import { useNetworks } from 'hooks/useNetworks'
 import { useSyncHistory } from 'hooks/useSyncHistory'
@@ -10,12 +9,11 @@ import {
   type HistoryReducerState,
 } from 'hooks/useSyncHistory/types'
 import dynamic from 'next/dynamic'
-import { createContext, useMemo, ReactNode } from 'react'
+import { createContext, ReactNode } from 'react'
 import { type RemoteChain } from 'types/chain'
 import {
   type DepositTunnelOperation,
   type EvmWithdrawOperation,
-  type WithdrawTunnelOperation,
 } from 'types/tunnel'
 import { useAccount } from 'wagmi'
 
@@ -58,6 +56,7 @@ type TunnelHistoryContext = {
     withdrawal: Omit<EvmWithdrawOperation, 'timestamp'>,
   ) => void
   deposits: DepositTunnelOperation[]
+  resyncHistory: () => void
   syncStatus: HistoryReducerState['status']
   updateDeposit: (
     deposit: DepositTunnelOperation,
@@ -74,6 +73,7 @@ export const TunnelHistoryContext = createContext<TunnelHistoryContext>({
   addDepositToTunnelHistory: () => undefined,
   addWithdrawalToTunnelHistory: () => undefined,
   deposits: [],
+  resyncHistory: () => undefined,
   syncStatus: 'idle',
   updateDeposit: () => undefined,
   updateWithdrawal: () => undefined,
@@ -86,12 +86,11 @@ type Props = {
 
 export const TunnelHistoryProvider = function ({ children }: Props) {
   const { address, isConnected } = useAccount()
-  const bitcoin = useBitcoin()
 
   const l2ChainId = useHemi().id
   const { remoteNetworks } = useNetworks()
 
-  const [history, dispatch] = useSyncHistory(l2ChainId)
+  const [history, dispatch, context] = useSyncHistory(l2ChainId)
 
   const historyChainSync = []
 
@@ -114,41 +113,8 @@ export const TunnelHistoryProvider = function ({ children }: Props) {
     )
   }
 
-  const value = useMemo(
-    () => ({
-      addDepositToTunnelHistory: (deposit: DepositTunnelOperation) =>
-        dispatch({ payload: deposit, type: 'add-deposit' }),
-      addWithdrawalToTunnelHistory: (withdrawal: WithdrawTunnelOperation) =>
-        dispatch({ payload: withdrawal, type: 'add-withdraw' }),
-      deposits: history.deposits
-        .filter(d => featureFlags.btcTunnelEnabled || d.chainId !== bitcoin.id)
-        .flatMap(d => d.content),
-      syncStatus: history.status,
-      updateDeposit: (
-        deposit: DepositTunnelOperation,
-        updates: Partial<DepositTunnelOperation>,
-      ) =>
-        dispatch({
-          payload: { deposit, updates },
-          type: 'update-deposit',
-        }),
-      updateWithdrawal: (
-        withdraw: WithdrawTunnelOperation,
-        updates: Partial<WithdrawTunnelOperation>,
-      ) =>
-        dispatch({
-          payload: { updates, withdraw },
-          type: 'update-withdraw',
-        }),
-      withdrawals: history.withdrawals
-        .filter(w => featureFlags.btcTunnelEnabled || w.chainId !== bitcoin.id)
-        .flatMap(w => w.content),
-    }),
-    [bitcoin.id, dispatch, history],
-  )
-
   return (
-    <TunnelHistoryContext.Provider value={value}>
+    <TunnelHistoryContext.Provider value={context}>
       {/* Move to web worker https://github.com/hemilabs/ui-monorepo/issues/487 */}
       {/* Track updates on bitcoin deposits, in bitcoin or in Hemi */}
       {featureFlags.btcTunnelEnabled && <BitcoinDepositsStatusUpdater />}