improve bridge txn handling and provider setup

- add type safety to enhance code reliability - persist bridge txns to sync storage for better state management - refactor provider setup to improve configuration and maintenance - add a status column to bridge txns for clearer txn tracking
ten-protocol · Aug 26, 2024 · 9f881b7 · 9f881b7
1 parent 6c5844e
commit 9f881b7
Show file tree

Hide file tree

Showing 22 changed files with 196 additions and 155 deletions.
diff --git a/tools/bridge-frontend/package-lock.json b/tools/bridge-frontend/package-lock.json
diff --git a/tools/bridge-frontend/package.json b/tools/bridge-frontend/package.json
@@ -25,8 +25,10 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@tanstack/query-sync-storage-persister": "^5.52.2",
     "@tanstack/react-query": "^5.8.1",
     "@tanstack/react-query-devtools": "^5.8.1",
+    "@tanstack/react-query-persist-client": "^5.52.2",
     "@tanstack/react-table": "^8.10.7",
     "axios": "^1.6.1",
     "class-variance-authority": "^0.7.0",

diff --git a/tools/bridge-frontend/pages/_app.tsx b/tools/bridge-frontend/pages/_app.tsx
@@ -1,11 +1,7 @@
 import { useState } from "react";
 import { ThemeProvider } from "@/src/components/providers/theme-provider";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import {
-  QueryClient,
-  MutationCache,
-  QueryClientProvider,
-} from "@tanstack/react-query";
+import { QueryClient, MutationCache } from "@tanstack/react-query";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 import { Toaster } from "@/src/components/ui/toaster";
@@ -17,6 +13,8 @@ import { GOOGLE_ANALYTICS_ID } from "@/src/lib/constants";
 import { showToast } from "@/src/components/ui/use-toast";
 import { ToastType } from "@/src/types";
 import { WalletProvider } from "@/src/components/providers/wallet-provider";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 
 export default function App({ Component, pageProps }: AppProps) {
   const mutationCache = new MutationCache({
@@ -39,12 +37,17 @@ export default function App({ Component, pageProps }: AppProps) {
           queries: {
             refetchOnWindowFocus: false,
             staleTime: 300000,
+            gcTime: 1000 * 60 * 60 * 24, // 24 hours
           },
         },
         mutationCache,
       })
   );
 
+  const localStoragePersister = createSyncStoragePersister({
+    storage: typeof window !== "undefined" ? window.localStorage : null,
+  });
+
   return (
     <>
       <Script
@@ -89,7 +92,12 @@ export default function App({ Component, pageProps }: AppProps) {
         />
         <link rel="manifest" href="/favicon/site.webmanifest" />
       </HeadSeo>
-      <QueryClientProvider client={queryClient}>
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{
+          persister: localStoragePersister,
+        }}
+      >
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
@@ -103,7 +111,7 @@ export default function App({ Component, pageProps }: AppProps) {
             <ReactQueryDevtools initialIsOpen={false} />
           </WalletProvider>
         </ThemeProvider>
-      </QueryClientProvider>
+      </PersistQueryClientProvider>
     </>
   );
 }
diff --git a/tools/bridge-frontend/src/components/main-nav.tsx b/tools/bridge-frontend/src/components/main-nav.tsx
@@ -87,7 +87,7 @@ export const MainNav = ({
   ...props
 }: React.HTMLAttributes<HTMLElement>) => (
   <nav className={cn("flex items-center lg:space-x-6", className)} {...props}>
-    {NavLinks.map((navLink) => (
+    {NavLinks.map((navLink: NavLink) => (
       <div key={navLink.label} className="w-full flex items-center mr-4 p-2">
         {navLink.icon && <navLink.icon className="h-5 w-5 mr-2" />}
         <NavItem navLink={navLink} />

diff --git a/tools/bridge-frontend/src/components/modules/bridge/index.tsx b/tools/bridge-frontend/src/components/modules/bridge/index.tsx
@@ -138,7 +138,7 @@ export default function Dashboard() {
   );
 
   const handleSwitchNetwork = React.useCallback(
-    async (event: any) => {
+    async (event: React.MouseEvent<HTMLButtonElement>) => {
       event.preventDefault();
       try {
         switchNetwork();

diff --git a/tools/bridge-frontend/src/components/modules/bridge/percentage-buttons.tsx b/tools/bridge-frontend/src/components/modules/bridge/percentage-buttons.tsx
@@ -1,7 +1,11 @@
 import { PERCENTAGES } from "@/src/lib/constants";
 import { Button } from "../../ui/button";
 
-export const PercentageButtons = ({ setAmount }: any) => {
+export const PercentageButtons = ({
+  setAmount,
+}: {
+  setAmount: (amount: number) => void;
+}) => {
   return (
     <div className="flex items-center p-2">
       <div className="flex items-center space-x-2">

diff --git a/tools/bridge-frontend/src/components/modules/bridge/submit-button.tsx b/tools/bridge-frontend/src/components/modules/bridge/submit-button.tsx
@@ -6,7 +6,11 @@ export const SubmitButton = ({
   walletConnected,
   loading,
   fromTokenBalance,
-}: any) => {
+}: {
+  walletConnected: boolean;
+  loading: boolean;
+  fromTokenBalance: number;
+}) => {
   return (
     <div className="flex items-center justify-center mt-4">
       {walletConnected ? (

diff --git a/tools/bridge-frontend/src/components/modules/bridge/switch-network-button.tsx b/tools/bridge-frontend/src/components/modules/bridge/switch-network-button.tsx
@@ -1,7 +1,13 @@
 import { ArrowDownUpIcon } from "lucide-react";
 import { Button } from "../../ui/button";
 
-export const SwitchNetworkButton = ({ handleSwitchNetwork, loading }: any) => {
+export const SwitchNetworkButton = ({
+  handleSwitchNetwork,
+  loading,
+}: {
+  handleSwitchNetwork: React.MouseEventHandler<HTMLButtonElement>;
+  loading: boolean;
+}) => {
   return (
     <div className="flex items-center justify-center">
       <Button

diff --git a/tools/bridge-frontend/src/components/modules/bridge/token-select.tsx b/tools/bridge-frontend/src/components/modules/bridge/token-select.tsx
@@ -1,3 +1,4 @@
+import { IToken } from "@/src/types";
 import { FormField, FormItem, FormControl, FormMessage } from "../../ui/form";
 import {
   Select,
@@ -7,7 +8,13 @@ import {
   SelectValue,
 } from "../../ui/select";
 
-export const TokenSelect = ({ form, tokens }: any) => {
+export const TokenSelect = ({
+  form,
+  tokens,
+}: {
+  form: any;
+  tokens: IToken[];
+}) => {
   return (
     <FormField
       control={form.control}
@@ -21,7 +28,7 @@ export const TokenSelect = ({ form, tokens }: any) => {
               </SelectTrigger>
             </FormControl>
             <SelectContent side="top">
-              {tokens.map((token: any) => (
+              {tokens.map((token: IToken) => (
                 <SelectItem
                   key={token.value}
                   value={token.value}

diff --git a/tools/bridge-frontend/src/components/modules/transactions/columns.tsx b/tools/bridge-frontend/src/components/modules/transactions/columns.tsx
@@ -6,8 +6,6 @@ import { Badge, badgeVariants } from "@/src/components/ui/badge";
 import { statuses } from "@/src/components/modules/transactions/constants";
 import { DataTableColumnHeader } from "@/src/components/modules/common/data-table/data-table-column-header";
 import TruncatedAddress from "../common/truncated-address";
-import Link from "next/link";
-import { EyeOpenIcon } from "@radix-ui/react-icons";
 import { Transactions } from "@/src/types";
 
 export const columns: ColumnDef<Transactions>[] = [
@@ -80,14 +78,4 @@ export const columns: ColumnDef<Transactions>[] = [
     enableSorting: false,
     enableHiding: false,
   },
-  // {
-  //   id: "actions",
-  //   cell: ({ row }) => {
-  //     return (
-  //       <Link href={`/tx/personal/${row.original.transactionHash}`}>
-  //         <EyeOpenIcon className="h-5 w-5 text-muted-foreground hover:text-primary transition-colors cursor-pointer" />
-  //       </Link>
-  //     );
-  //   },
-  // },
 ];
diff --git a/tools/bridge-frontend/src/components/modules/transactions/constants.tsx b/tools/bridge-frontend/src/components/modules/transactions/constants.tsx
@@ -1,21 +1,22 @@
+import { TransactionStatus } from "@/src/types";
 import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons";
 import { HourglassIcon } from "lucide-react";
 
 export const statuses = [
   {
-    value: "Success",
+    value: TransactionStatus.Success,
     label: "Success",
     icon: CheckIcon,
     variant: "success",
   },
   {
-    value: "Failure",
+    value: TransactionStatus.Failure,
     label: "Failure",
     icon: Cross2Icon,
     variant: "destructive",
   },
   {
-    value: "Pending",
+    value: TransactionStatus.Pending,
     label: "Pending",
     icon: HourglassIcon,
     variant: "primary",

diff --git a/tools/bridge-frontend/src/components/modules/transactions/index.tsx b/tools/bridge-frontend/src/components/modules/transactions/index.tsx
@@ -5,44 +5,22 @@ import { getItem } from "@/src/lib/utils";
 import { useContractService } from "@/src/services/useContractService";
 import { ItemPosition } from "@/src/types";
 import useWalletStore from "@/src/stores/wallet-store";
+import { useQuery } from "@tanstack/react-query";
 
 export default function TransactionsComponent() {
   const { isL1ToL2 } = useWalletStore();
   const { getBridgeTransactions } = useContractService();
-  const [transactions, setTransactions] = React.useState<any[]>([]);
-  const [isTransactionsLoading, setIsTransactionsLoading] =
-    React.useState(true);
 
-  const getTransactions = async () => {
-    try {
-      const txns = await getBridgeTransactions();
-      setTransactions(txns);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const interval = React.useRef<any>();
-
-  const fetchTransactions = () => {
-    setIsTransactionsLoading(true);
-    getTransactions();
-    setIsTransactionsLoading(false);
-  };
-
-  React.useEffect(() => {
-    fetchTransactions();
-
-    interval.current = setInterval(() => {
-      getTransactions();
-    }, 10000);
-
-    return () => {
-      clearInterval(interval.current);
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const {
+    data: transactions = [],
+    isLoading: isTransactionsLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ["bridgeTransactions", isL1ToL2 ? "l1" : "l2"],
+    queryFn: () => getBridgeTransactions(),
+    refetchInterval: 10000,
+    refetchOnMount: true,
+  });
 
   const firstBatchHeight = getItem(transactions, "blockNumber");
   const lastBatchHeight = getItem(
@@ -70,7 +48,7 @@ export default function TransactionsComponent() {
       <DataTable
         columns={columns}
         data={transactions}
-        refetch={fetchTransactions}
+        refetch={refetch}
         total={transactions?.length}
         isLoading={isTransactionsLoading}
         noResultsText="transactions"

diff --git a/tools/bridge-frontend/src/lib/constants.ts b/tools/bridge-frontend/src/lib/constants.ts
@@ -40,8 +40,6 @@ export const getOptions = (query: {
 export const GOOGLE_ANALYTICS_ID =
   process.env.NEXT_PUBLIC_BRIDGE_GOOGLE_ANALYTICS_ID;
 
-export const privateKey = process.env.NEXT_PUBLIC_BRIDGE_PRIVATE_KEY;
-
 export const L1CHAINS = [
   {
     name: "Ethereum",