feat: Add safe wallet support

.env.sample

@@ -9,5 +9,7 @@ NEXT_PUBLIC_ARBITRUM_GOERLI_RPC_URL=
 NEXT_PUBLIC_ARBITRUM_NOVA_RPC_URL=
 NEXT_PUBLIC_ARBITRUM_SEPOLIA_RPC_URL=
 
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=
+
 NEXT_PUBLIC_LOCAL_ETHEREUM_RPC_URL=http://localhost:8545
 NEXT_PUBLIC_LOCAL_ARBITRUM_RPC_URL=http://localhost:8547

.nvmrc

@@ -1 +1 @@
-16.18.1
+18

next.config.js

@@ -1 +1,12 @@
-module.exports = {};
+module.exports = {
+  webpack: (config, context) => {
+    if (config.plugins) {
+      config.plugins.push(
+        new context.webpack.IgnorePlugin({
+          resourceRegExp: /^(lokijs|pino-pretty|encoding)$/,
+        }),
+      );
+    }
+    return config;
+  },
+};

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@arbitrum/sdk": "^3.1.12",
     "@ethersproject/bignumber": "^5.1.1",
+    "@rainbow-me/rainbowkit": "^0.12.16",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
@@ -16,7 +17,7 @@
     "react-feather": "^2.0.10",
     "react-tooltip": "^5.5.1",
     "typescript": "^4.4.2",
-    "wagmi": "^0.8.10"
+    "wagmi": "^0.12.18"
   },
   "engines": {
     "node": ">=16"

src/app/global.css

@@ -89,6 +89,8 @@ main {
   max-width: 740px;
   gap: 10px;
   margin-bottom: var(--space-xl);
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .form-inner {

src/app/page.tsx

@@ -1,5 +1,5 @@
 import { NextPage } from 'next';
-import { WagmiProvider } from '@/components/WagmiProvider';
+import { Providers } from '@/components/Providers';
 import { Logo } from '@/components/Logo';
 import { Form } from '@/components/Form';
 
@@ -12,9 +12,9 @@ const PageIndex: NextPage = () => {
       </header>
 
       <main>
-        <WagmiProvider>
+        <Providers>
           <Form />
-        </WagmiProvider>
+        </Providers>
       </main>
     </>
   );

src/app/recover-funds/[address]/RecoverFunds.tsx

@@ -1,13 +1,10 @@
-'use client';
-import { Address } from '@arbitrum/sdk';
-import { BigNumber, utils, constants } from 'ethers';
-import { useNetwork } from 'wagmi';
-import { getProviderFromChainId, getTargetChainId } from '@/utils';
+import { BigNumber, utils } from 'ethers';
 import '../style.css';
 
 export interface OperationInfo {
   balanceToRecover: BigNumber;
   aliasedAddress: string;
+  chainId: string;
 }
 
 export const hasBalanceOverThreshold = (balanceToRecover: BigNumber) => {
@@ -16,59 +13,19 @@ export const hasBalanceOverThreshold = (balanceToRecover: BigNumber) => {
   return balanceToRecover.gte(BigNumber.from(5_000_000_000_000_000));
 };
 
-export async function getData(
-  chainID: number,
-  address: string,
-): Promise<OperationInfo | null> {
-  // First, obtain the aliased address of the signer
-  const destinationAddress = new Address(address);
-  const { value: aliasedAddress } = destinationAddress.applyAlias();
-
-  // And get its balance to find out the amount we are transferring
-  try {
-    const l2Provider = getProviderFromChainId(chainID);
-    const aliasedSignerBalance = await l2Provider.getBalance(aliasedAddress);
-
-    return {
-      balanceToRecover: hasBalanceOverThreshold(aliasedSignerBalance)
-        ? aliasedSignerBalance
-        : constants.Zero,
-      aliasedAddress,
-    };
-  } catch (e) {
-    return {
-      balanceToRecover: constants.Zero,
-      aliasedAddress,
-    };
-  }
-}
-
 type Props = {
   operationInfo: OperationInfo;
   address: string;
 };
 const RecoverFunds = ({ operationInfo, address }: Props) => {
-  const { chain } = useNetwork();
-  const targetChainID = getTargetChainId(chain?.id);
-
-  // No funds to recover
-  if (!hasBalanceOverThreshold(operationInfo.balanceToRecover)) {
-    return (
-      <div className="funds-message">
-        There are no funds stuck on {operationInfo.aliasedAddress}
-        <br />
-        (Alias of {address}) on this network
-        {targetChainID ? ` (${targetChainID})` : ''}.
-      </div>
-    );
-  }
+  const l2ChainId = operationInfo.chainId;
 
   return (
     <div className="funds-message">
       There are {utils.formatEther(operationInfo.balanceToRecover)} ETH on{' '}
       {operationInfo.aliasedAddress}
       <br />
-      (Alias of {address}).
+      (Alias of {address}) on this network {l2ChainId ?? ''}.
     </div>
   );
 };

src/app/recover-funds/[address]/RecoverFundsButton.tsx

@@ -8,7 +8,7 @@ import {
 } from '@arbitrum/sdk';
 import { Inbox__factory } from '@arbitrum/sdk/dist/lib/abi/factories/Inbox__factory';
 import { getBaseFee } from '@arbitrum/sdk/dist/lib/utils/lib';
-import { useNetwork, useSigner } from 'wagmi';
+import { goerli, mainnet, sepolia, useNetwork, useSigner } from 'wagmi';
 import { getProviderFromChainId, getTargetChainId } from '@/utils';
 import { BigNumber } from 'ethers';
 
@@ -143,16 +143,20 @@ function RecoverFundsButton({
 
   if (!signer) return null;
 
-  if (chain?.id !== 1 && chain?.id !== 5) {
+  if (
+    chain?.id !== mainnet.id &&
+    chain?.id !== goerli.id &&
+    chain?.id !== sepolia.id
+  ) {
     return (
       <div>Unknown L1 chain id. This chain is not supported by this tool</div>
     );
   }
 
-  if (chain?.id !== chainID) {
+  if (getTargetChainId(chain?.id) !== chainID) {
     return (
       <div>
-        To recover funds, connect to chain ${chain?.id} (${chain?.name})
+        To recover funds, connect to chain {chain?.id} ({chain?.name})
       </div>
     );
   }

src/app/recover-funds/[address]/page.tsx

@@ -1,53 +1,78 @@
 'use client';
-import { getTargetChainId } from '@/utils';
-import { utils } from 'ethers';
+import { supportedL2Networks } from '@/utils/network';
+import { Address } from '@arbitrum/sdk';
+import { constants, utils } from 'ethers';
 import dynamic from 'next/dynamic';
 import React, { useEffect, useState } from 'react';
 import { useNetwork } from 'wagmi';
-import {
-  getData,
-  hasBalanceOverThreshold,
-  OperationInfo,
-} from './RecoverFunds';
+import { hasBalanceOverThreshold, OperationInfo } from './RecoverFunds';
 import { RecoverFundsButton } from './RecoverFundsButton';
+import { JsonRpcProvider } from '@ethersproject/providers';
 
 const RecoverFunds = dynamic(() => import('./RecoverFunds'), {
   ssr: false,
 });
 
-const RecoverFundsPage = ({
-  params: { address },
-}: {
-  params: { address: string };
-}) => {
-  const { chain } = useNetwork();
-  const [operationInfo, setOperationInfo] = useState<OperationInfo | null>(
-    null,
-  );
-  const [destinationAddress, setDestinationAddress] = useState<string | null>(
-    null,
-  );
+type OperationInfoByChainId = {
+  [chainId: string]: OperationInfo;
+};
+async function getOperationInfoByChainId(
+  address: string,
+): Promise<OperationInfoByChainId> {
+  // First, obtain the aliased address of the signer
+  const destinationAddress = new Address(address);
+  const { value: aliasedAddress } = destinationAddress.applyAlias();
 
-  const targetChainID = getTargetChainId(chain?.id);
+  // And get its balance to find out the amount we are transferring
+  const operationInfoPromises = Object.entries(supportedL2Networks).map(
+    async ([chainId, rpcURL]) => {
+      const l2Provider = new JsonRpcProvider(rpcURL);
 
-  useEffect(() => {
-    if (!targetChainID) {
-      return;
-    }
+      try {
+        const aliasedSignerBalance = await l2Provider.getBalance(
+          aliasedAddress,
+        );
 
-    getData(targetChainID, address).then((data) => {
-      setOperationInfo(data);
-    });
-  }, [address, targetChainID]);
+        return {
+          balanceToRecover: hasBalanceOverThreshold(aliasedSignerBalance)
+            ? aliasedSignerBalance
+            : constants.Zero,
+          aliasedAddress,
+          chainId,
+        };
+      } catch (e) {
+        return {
+          balanceToRecover: constants.Zero,
+          aliasedAddress,
+          chainId,
+        };
+      }
+    },
+  );
 
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    const value = e.target.value;
-    setDestinationAddress(value);
-  };
+  const result = Promise.all(operationInfoPromises);
+  return result.then((operationInfo) => {
+    return operationInfo.reduce(
+      (acc, info) => ({
+        ...acc,
+        [info.chainId]: info,
+      }),
+      {},
+    );
+  });
+}
 
-  if (!operationInfo) {
-    return;
-  }
+function RecoverFundsDetail({
+  operationInfo,
+  address,
+}: {
+  operationInfo: OperationInfo;
+  address: string;
+}) {
+  const { chain } = useNetwork();
+  const [destinationAddress, setDestinationAddress] = useState<string | null>(
+    null,
+  );
 
   const hasBalanceToRecover = hasBalanceOverThreshold(
     operationInfo.balanceToRecover,
@@ -58,6 +83,15 @@ const RecoverFundsPage = ({
     utils.isAddress(destinationAddress) &&
     operationInfo.aliasedAddress;
 
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const value = e.target.value;
+    setDestinationAddress(value);
+  };
+
+  if (!hasBalanceOverThreshold(operationInfo.balanceToRecover)) {
+    return null;
+  }
+
   return (
     <>
       <RecoverFunds address={address} operationInfo={operationInfo} />
@@ -73,14 +107,64 @@ const RecoverFundsPage = ({
       )}
       {hasBalanceToRecover && hasDestinationAddress && (
         <RecoverFundsButton
-          chainID={chain.id}
+          chainID={Number(operationInfo.chainId)}
           balanceToRecover={operationInfo.balanceToRecover}
           destinationAddress={destinationAddress}
           addressToRecoverFrom={address}
         />
       )}
     </>
   );
+}
+
+const RecoverFundsPage = ({
+  params: { address },
+}: {
+  params: { address: string };
+}) => {
+  const [operationInfos, setOperationInfos] =
+    useState<OperationInfoByChainId | null>(null);
+
+  useEffect(() => {
+    getOperationInfoByChainId(address).then((operationInfoByChainId) => {
+      setOperationInfos(operationInfoByChainId);
+    });
+  }, [address]);
+
+  if (!operationInfos) {
+    return;
+  }
+
+  // No balance to recover on any chains
+  if (
+    Object.keys(operationInfos).every(
+      (chainId) =>
+        !hasBalanceOverThreshold(operationInfos[chainId].balanceToRecover),
+    )
+  ) {
+    const aliasedAddress =
+      operationInfos[Object.keys(operationInfos)[0]].aliasedAddress;
+
+    return (
+      <div className="funds-message">
+        There are no funds stuck on {aliasedAddress}
+        <br />
+        (Alias of {address}) on Arbitrum networks
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {Object.keys(operationInfos).map((chainId) => (
+        <RecoverFundsDetail
+          address={address}
+          operationInfo={operationInfos[chainId]}
+          key={chainId}
+        />
+      ))}
+    </>
+  );
 };
 
 export default RecoverFundsPage;