Refactor MP bridge history to chunked per-chain log sync

.gitignore

@@ -19,4 +19,5 @@ yalc.lock
 .continueignore
 e2e.log
 docs/specs/**
-codex-resume
+codex-resume
+.bounties

packages/good-design/src/apps/bridge/mpbridge/MPBBridgeController.tsx

@@ -3,23 +3,27 @@ import { VStack } from "native-base";
 
 import { MPBBridge } from "./MPBBridge";
 import { useMPBBridgeFeatureController } from "./feature/useMPBBridgeFeatureController";
+import type { MPBBridgeReadOnlyUrls } from "./types";
 
 interface IMPBBridgeControllerProps {
   withHistory?: boolean;
   onBridgeStart?: () => void;
   onBridgeSuccess?: () => void;
   onBridgeFailed?: (e: Error) => void;
+  bridgeReadOnlyUrls?: MPBBridgeReadOnlyUrls;
 }
 
 export const MPBBridgeController: React.FC<IMPBBridgeControllerProps> = ({
   onBridgeStart,
   onBridgeSuccess,
-  onBridgeFailed
+  onBridgeFailed,
+  bridgeReadOnlyUrls
 }) => {
   const bridgeProps = useMPBBridgeFeatureController({
     onBridgeStart,
     onBridgeSuccess,
-    onBridgeFailed
+    onBridgeFailed,
+    bridgeReadOnlyUrls
   });
 
   return (

packages/good-design/src/apps/bridge/mpbridge/TransactionHistory.tsx

@@ -1,38 +1,105 @@
 import React from "react";
-import { Box, Spinner, Text, VStack } from "native-base";
+import { Box, Button, HStack, Spinner, Text, VStack } from "native-base";
+import { ExplorerLink } from "../../../core";
 import { BridgeTransactionList } from "./MPBBridgeTransactionCard";
+import { capitalizeChain, getChainName } from "./utils";
 
 interface TransactionHistoryProps {
   realTransactionHistory: any[];
   historyLoading: boolean;
+  historyRefreshing: boolean;
+  historyErrorsByChain: Record<number, string>;
+  explorerChainId?: number;
+  explorerAddress?: string;
+  onRefresh: () => void;
   onTxDetailsPress: (tx: any) => void;
 }
 
 export const TransactionHistory: React.FC<TransactionHistoryProps> = ({
   realTransactionHistory,
   historyLoading,
+  historyRefreshing,
+  historyErrorsByChain,
+  explorerChainId,
+  explorerAddress,
+  onRefresh,
   onTxDetailsPress
 }) => {
+  const errorEntries = Object.entries(historyErrorsByChain || {});
+  const hasTransactionHistory = realTransactionHistory.length > 0;
+
   return (
     <VStack space={4} width="100%">
-      <Text fontFamily="heading" fontSize="xl" fontWeight="700" color="goodBlue.600">
-        Recent Transactions
-      </Text>
+      <HStack justifyContent="space-between" alignItems="center" space={3}>
+        <Text fontFamily="heading" fontSize="xl" fontWeight="700" color="goodBlue.600">
+          Recent Transactions
+        </Text>
+        <Button
+          variant="outline"
+          size="sm"
+          borderColor="goodBlue.500"
+          _text={{ color: "goodBlue.500", fontWeight: "600" }}
+          isDisabled={historyLoading || historyRefreshing}
+          isLoading={historyRefreshing}
+          onPress={onRefresh}
+        >
+          Refresh
+        </Button>
+      </HStack>
+      <VStack space={1}>
+        <Text fontSize="xs" color="goodGrey.600">
+          History builds as you use this bridge. We check up to the latest 5,000 blocks on each supported network.
+        </Text>
+        <Text fontSize="xs" color="goodGrey.500">
+          Older transactions or activity from another device may not appear.
+        </Text>
+        {explorerChainId && explorerAddress ? (
+          <ExplorerLink
+            chainId={explorerChainId}
+            addressOrTx={explorerAddress}
+            text="View this wallet on the connected network explorer"
+            fontStyle={{ fontSize: "xs", fontFamily: "subheading", fontWeight: 600 }}
+          />
+        ) : null}
+      </VStack>
+      {historyRefreshing && !historyLoading ? (
+        <HStack alignItems="center" space={2}>
+          <Spinner size="sm" color="goodBlue.500" />
+          <Text fontSize="xs" color="goodGrey.600">
+            Refreshing transaction history...
+          </Text>
+        </HStack>
+      ) : null}
+      {errorEntries.length > 0 ? (
+        <Box p={4} bg="yellow.50" borderRadius="lg" borderWidth="1" borderColor="yellow.200">
+          <VStack space={2}>
+            <Text fontSize="sm" color="yellow.800" fontWeight="600">
+              Some transaction history could not be refreshed.
+            </Text>
+            {errorEntries.map(([chainId]) => (
+              <Text key={chainId} fontSize="xs" color="yellow.700">
+                Could not fetch history for {capitalizeChain(getChainName(Number(chainId)))} at this time. You can try
+                to reload or try later.
+              </Text>
+            ))}
+          </VStack>
+        </Box>
+      ) : null}
       {historyLoading ? (
         <Box p={6} bg="goodGrey.50" borderRadius="lg" alignItems="center">
           <Spinner size="sm" color="goodBlue.500" />
           <Text mt={3} fontSize="sm" color="goodGrey.600">
             Loading transaction history...
           </Text>
         </Box>
-      ) : realTransactionHistory.length > 0 ? (
+      ) : hasTransactionHistory ? (
         <Box maxH="400px" overflowY="auto">
           <BridgeTransactionList transactions={realTransactionHistory} onTxDetailsPress={onTxDetailsPress} />
         </Box>
       ) : (
         <Box p={6} bg="goodGrey.50" borderRadius="lg" alignItems="center">
           <Text fontSize="sm" color="goodGrey.600" textAlign="center">
-            No recent bridge transactions found
+            No bridge transactions found in the latest 5,000 blocks
           </Text>
           <Text fontSize="xs" color="goodGrey.500" mt={2} textAlign="center">
             Make sure your wallet is connected to see your bridge transactions

packages/good-design/src/apps/bridge/mpbridge/feature/useMPBBridgeFeatureController.ts

@@ -3,21 +3,23 @@ import { useEthers } from "@usedapp/core";
 import { ethers } from "ethers";
 import { useMPBBridgeFlow, useG$Decimals, SupportedChains, VALIDATION_REASONS } from "@gooddollar/web3sdk-v2";
 
-import { BridgeProvider, MPBBridgeProps } from "../types";
+import { BridgeProvider, MPBBridgeProps, MPBBridgeReadOnlyUrls } from "../types";
 import { getDefaultTargetChain } from "../utils/chainHelpers";
 
 interface UseMPBBridgeFeatureControllerParams {
   onBridgeStart?: () => void;
   onBridgeSuccess?: () => void;
   onBridgeFailed?: (e: Error) => void;
+  bridgeReadOnlyUrls?: MPBBridgeReadOnlyUrls;
 }
 
 const ZERO_FEE = { nativeFee: ethers.BigNumber.from(0), zroFee: ethers.BigNumber.from(0) };
 
 export const useMPBBridgeFeatureController = ({
   onBridgeStart,
   onBridgeSuccess,
-  onBridgeFailed
+  onBridgeFailed,
+  bridgeReadOnlyUrls
 }: UseMPBBridgeFeatureControllerParams): MPBBridgeProps => {
   const { chainId, account } = useEthers();
   const [bridgeProvider, setBridgeProvider] = useState<BridgeProvider>("layerzero");
@@ -176,6 +178,7 @@ export const useMPBBridgeFeatureController = ({
     onBridgeStart: onBridgeStartHandler,
     onBridgeFailed,
     onBridgeSuccess,
+    bridgeReadOnlyUrls,
     bridgeProvider,
     onBridgeProviderChange: setBridgeProvider
   };

packages/good-design/src/apps/bridge/mpbridge/feature/useMPBBridgeViewController.ts

@@ -1,4 +1,5 @@
 import { useEffect, useCallback, useState, useMemo, useRef } from "react";
+import { useEthers } from "@usedapp/core";
 import { SupportedChains, deriveMPBBridgeFlowState } from "@gooddollar/web3sdk-v2";
 import { ethers } from "ethers";
 
@@ -17,6 +18,12 @@ import { useMPBBridgeUiState } from "./useMPBBridgeUiState";
 
 const DEBOUNCE_MS = 300;
 const TRANSACTION_HISTORY_DEBOUNCE_MS = 2000;
+const BRIDGE_HISTORY_CHAIN_IDS: SupportedChains[] = [
+  SupportedChains.CELO,
+  SupportedChains.FUSE,
+  SupportedChains.MAINNET,
+  SupportedChains.XDC
+];
 
 const FLOW_PENDING_STATES = new Set([
   "awaiting_network_switch",
@@ -113,6 +120,11 @@ export interface MPBBridgeViewModel {
   transactionHistoryProps: {
     realTransactionHistory: any[];
     historyLoading: boolean;
+    historyRefreshing: boolean;
+    historyErrorsByChain: Record<number, string>;
+    explorerChainId?: number;
+    explorerAddress?: string;
+    onRefresh: () => void;
     onTxDetailsPress: (tx: any) => void;
   };
 }
@@ -131,9 +143,11 @@ export const useMPBBridgeViewController = ({
   onBridgeStart,
   onBridgeFailed,
   onBridgeSuccess,
+  bridgeReadOnlyUrls,
   bridgeProvider: propBridgeProvider,
   onBridgeProviderChange
 }: MPBBridgeProps): MPBBridgeViewModel => {
+  const { account, chainId } = useEthers();
   const [isBridging, setBridging] = useState(false);
   const [localBridgeProvider, setLocalBridgeProvider] = useState<BridgeProvider>("axelar");
   const bridgeProvider = propBridgeProvider || localBridgeProvider;
@@ -162,7 +176,8 @@ export const useMPBBridgeViewController = ({
     closeAllDropdowns
   } = useMPBBridgeUiState();
 
-  const { realTransactionHistory, historyLoading } = useDebouncedTransactionHistory(TRANSACTION_HISTORY_DEBOUNCE_MS);
+  const { realTransactionHistory, historyLoading, historyRefreshing, historyErrorsByChain, refreshHistory } =
+    useDebouncedTransactionHistory(TRANSACTION_HISTORY_DEBOUNCE_MS, bridgeReadOnlyUrls, BRIDGE_HISTORY_CHAIN_IDS);
   const { getBalanceForChain } = useChainBalances();
 
   const gdValue = getBalanceForChain(sourceChain);
@@ -380,6 +395,7 @@ export const useMPBBridgeViewController = ({
       successHandled.current = true;
       setBridgingStatus(effectiveFlow.statusLabel || "Bridge completed successfully!");
       setBridging(false);
+      refreshHistory?.();
 
       if (!successModalOpen && !successModalDismissedRef.current) {
         setSuccessModalOpen(true);
@@ -435,6 +451,7 @@ export const useMPBBridgeViewController = ({
     successModalOpen,
     onBridgeSuccess,
     onBridgeFailed,
+    refreshHistory,
     setBridging,
     setBridgingStatus,
     setSuccessModalOpen,
@@ -598,6 +615,11 @@ export const useMPBBridgeViewController = ({
     transactionHistoryProps: {
       realTransactionHistory: recentTransactions,
       historyLoading,
+      historyRefreshing,
+      historyErrorsByChain,
+      explorerChainId: chainId,
+      explorerAddress: account,
+      onRefresh: refreshHistory,
       onTxDetailsPress
     }
   };

packages/good-design/src/apps/bridge/mpbridge/hooks.ts

@@ -3,7 +3,7 @@ import { CurrencyValue } from "@usedapp/core";
 import { useG$Amounts, useProductionG$Balance, G$Amount, useGetEnvChainId } from "@gooddollar/web3sdk-v2";
 import { BigNumber } from "ethers";
 import { fetchBridgeFees, useMPBBridgeHistory } from "@gooddollar/web3sdk-v2";
-import type { IMPBFees, IMPBLimits } from "./types";
+import type { IMPBFees, IMPBLimits, MPBBridgeHistoryChainIds, MPBBridgeReadOnlyUrls } from "./types";
 import { convertTransaction } from "./utils";
 
 const CACHE_KEY = "mpb-bridge-fees-cache";
@@ -175,8 +175,21 @@ export const useChainBalances = () => {
   return { getBalanceForChain };
 };
 
-export const useDebouncedTransactionHistory = (delay = 1000) => {
-  const { historySorted: realTransactionHistory } = useMPBBridgeHistory() ?? {};
+export const useDebouncedTransactionHistory = (
+  delay = 1000,
+  bridgeReadOnlyUrls?: MPBBridgeReadOnlyUrls,
+  bridgeHistoryChainIds?: MPBBridgeHistoryChainIds
+) => {
+  const {
+    historySorted: realTransactionHistory,
+    initialLoading,
+    refreshing,
+    errorsByChain,
+    refreshHistory
+  } = useMPBBridgeHistory({
+    readOnlyUrls: bridgeReadOnlyUrls,
+    chainIds: bridgeHistoryChainIds
+  }) ?? {};
   const [debouncedHistory, setDebouncedHistory] = useState(realTransactionHistory);
   const timeoutRef = useRef<NodeJS.Timeout>();
 
@@ -190,7 +203,10 @@ export const useDebouncedTransactionHistory = (delay = 1000) => {
 
   return {
     realTransactionHistory: debouncedHistory,
-    historyLoading: !realTransactionHistory
+    historyLoading: Boolean(initialLoading),
+    historyRefreshing: Boolean(refreshing),
+    historyErrorsByChain: errorsByChain || {},
+    refreshHistory: refreshHistory || (() => undefined)
   };
 };
 

packages/good-design/src/apps/bridge/mpbridge/index.ts

@@ -2,7 +2,15 @@ export { MPBBridge } from "./MPBBridge";
 export { MPBBridgeController } from "./MPBBridgeController";
 export { useMPBBridgeFeatureController } from "./feature/useMPBBridgeFeatureController";
 export { BridgeTransactionCard, BridgeTransactionList } from "./MPBBridgeTransactionCard";
-export type { MPBBridgeProps, IMPBLimits, IMPBFees, BridgeProvider, BridgeTransaction } from "./types";
+export type {
+  MPBBridgeProps,
+  MPBBridgeHistoryChainIds,
+  MPBBridgeReadOnlyUrls,
+  IMPBLimits,
+  IMPBFees,
+  BridgeProvider,
+  BridgeTransaction
+} from "./types";
 
 export { ChainSelector } from "./ChainSelector";
 export { BridgeProviderSelector } from "./BridgeProviderSelector";

packages/good-design/src/apps/bridge/mpbridge/types.ts

@@ -1,7 +1,11 @@
 import { BigNumber } from "ethers";
+import type { SupportedChains } from "@gooddollar/web3sdk-v2";
 
 export type BridgeProvider = "axelar" | "layerzero";
 
+export type MPBBridgeReadOnlyUrls = Partial<Record<number, string>>;
+export type MPBBridgeHistoryChainIds = SupportedChains[];
+
 export type BridgeTransaction = {
   id: string;
   transactionHash: string;
@@ -62,6 +66,7 @@ export interface MPBBridgeProps {
   onBridgeStart?: (sourceChain: string, targetChain: string) => Promise<void>;
   onBridgeFailed?: (error: Error) => void;
   onBridgeSuccess?: () => void;
+  bridgeReadOnlyUrls?: MPBBridgeReadOnlyUrls;
   bridgeProvider?: BridgeProvider;
   onBridgeProviderChange?: (provider: BridgeProvider) => void;
 }

packages/good-design/src/apps/bridge/mpbridge/utils/transactionHelpers.test.ts

@@ -0,0 +1,30 @@
+import { TransactionStatus } from "@usedapp/core";
+
+import { createTransactionDetails } from "./transactionHelpers";
+
+jest.mock("@gooddollar/web3sdk-v2", () => ({
+  getSourceChainId: jest.fn(() => 42220)
+}));
+
+describe("createTransactionDetails", () => {
+  it("sets a date for the submitted transaction details", () => {
+    const date = new Date("2026-07-07T10:00:00.000Z");
+
+    const transaction = createTransactionDetails({
+      amountWei: "10000000000000000000",
+      sourceChain: "celo",
+      targetChain: "xdc",
+      bridgeProvider: "layerzero",
+      bridgeStatus: {
+        status: "Success",
+        transaction: { hash: "0xbridge" }
+      } as Partial<TransactionStatus>,
+      bridgeToTxHash: undefined,
+      date
+    });
+
+    expect(transaction.date).toBe(date);
+    expect(transaction.transactionHash).toBe("0xbridge");
+    expect(transaction.amount).toBe("10.00");
+  });
+});

packages/good-design/src/apps/bridge/mpbridge/utils/transactionHelpers.ts

@@ -11,10 +11,11 @@ interface CreateTransactionDetailsParams {
   bridgeProvider: string;
   bridgeStatus: Partial<TransactionStatus> | undefined;
   bridgeToTxHash: string | undefined;
+  date?: Date;
 }
 
 export const createTransactionDetails = (params: CreateTransactionDetailsParams): BridgeTransaction => {
-  const { amountWei, sourceChain, targetChain, bridgeProvider, bridgeStatus, bridgeToTxHash } = params;
+  const { amountWei, sourceChain, targetChain, bridgeProvider, bridgeStatus, bridgeToTxHash, date } = params;
 
   const amountBN = ethers.BigNumber.from(amountWei || "0");
   const amountFormatted = utils.formatEther(amountBN);
@@ -37,6 +38,7 @@ export const createTransactionDetails = (params: CreateTransactionDetailsParams)
     amount: parseFloat(amountFormatted).toFixed(2),
     bridgeProvider: bridgeProvider as "axelar" | "layerzero",
     status,
+    date: date ?? new Date(),
     chainId: sourceChainId
   };
 };