Review & Custom RPC (#5)

package.json

@@ -26,14 +26,9 @@
     "@tanstack/react-query": "^5.25.0",
     "bottleneck": "^2.19.5",
     "buffer": "^6.0.3",
-    "ethers": "^6.11.1",
-    "global": "^4.4.0",
     "lodash": "^4.17.21",
-    "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "stream-browserify": "^3.0.0",
     "typescript": "^5.4.2",
     "viem": "2.x",
     "wagmi": "^2.5.7"

src/App.tsx

@@ -1,20 +1,21 @@
+import "@css/index.css";
 import "@mantine/core/styles.css";
 import "@rainbow-me/rainbowkit/styles.css";
-import "@css/index.css";
 
 import { MantineProvider } from "@mantine/core";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
 
-import { config, myRainbowExtendedTheme } from "@configs/rainbow.config";
+import { getConfig, myRainbowExtendedTheme } from "@configs/rainbow.config";
 import { theme } from "./theme";
 
 // Components
 import { Index } from "@pages/Index";
 
 const queryClient = new QueryClient();
 const App = () => {
+  const config = getConfig(undefined);
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>

src/components/Journey.model.ts

@@ -1,10 +1,10 @@
 import { predictStealthSafeAddressWithBytecode } from "@fluidkey/stealth-account-kit";
-import { formatUnits } from "viem";
 import { GetBalanceReturnType, getBalance } from "@wagmi/core";
 import { isEmpty } from "lodash";
+import { formatUnits } from "viem";
 
 // Config
-import { TokenDeployments, config } from "@configs/rainbow.config";
+import { TokenDeployments, getConfig } from "@configs/rainbow.config";
 import {
   SAFE_PROXY_BYTECODE,
   SupportedChainIds,
@@ -25,8 +25,8 @@ const balanceOrder = ["ETH", "USDT", "USDC", "DAI"];
 const chainNativeCurrencies = ["SEP"]; // Add any native currencies here that will be represented as ETH
 
 const limiter = new Bottleneck({
-  minTime: 50, // minimum time (in ms) between requests
-  maxConcurrent: 30, // maximum concurrent requests
+  minTime: 200, // minimum time (in ms) between requests
+  maxConcurrent: 10, // maximum concurrent requests
 });
 
 export const scheduleRequest = <T>(call: () => Promise<T>) => {
@@ -81,7 +81,9 @@ const filterSettledBalances = (
     });
 };
 
-const getBalances = async (address: Address, chainId: SupportedChainId) => {
+const getBalances = async (address: Address, chainId: SupportedChainId, customTransport?: string) => {
+  const config = getConfig(customTransport);
+
   const ETHBalance = getBalance(config, {
     address: address,
     chainId: chainId,
@@ -126,7 +128,8 @@ export const createCSVEntry = async (
       stealthSafeAddress,
       params.settings.chainId > 0
         ? (params.settings.chainId as SupportedChainId)
-        : params.activeChainId
+        : params.activeChainId,
+      params.settings.customTransport
     );
     const settledBalances = filterSettledBalances(balances);
     const filledBalances = fillRejectedBalances(settledBalances);

src/components/RecoverAddressesJourneyStep.tsx

@@ -1,22 +1,22 @@
-import { useEffect, useState } from "react";
 import {
   extractViewingPrivateKeyNode,
   generateEphemeralPrivateKey,
   generateStealthAddresses,
 } from "@fluidkey/stealth-account-kit";
-import { privateKeyToAccount } from "viem/accounts";
 import {
   Box,
   Button,
   Code,
   Collapse,
+  Grid,
   NumberInput,
   Progress,
   Switch,
   TextInput,
-  Grid,
 } from "@mantine/core";
 import { IconArrowLeft, IconList } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { privateKeyToAccount } from "viem/accounts";
 
 import { StepContent } from "@components/StepContent";
 import { CopyWithCheckButton } from "@components/common/CopyButton";
@@ -51,7 +51,7 @@ export const RecoverAddressesJourneyStep = (props: ComponentProps) => {
     useState<FluidKeyStealthSafeAddressGenerationParams>({
       chainId: 0,
       startNonce: 0,
-      endNonce: 5,
+      endNonce: 100,
       safeVersion: "1.3.0",
       useDefaultAddress: true,
       exportPrivateKeys: true,
@@ -289,6 +289,13 @@ export const RecoverAddressesJourneyStep = (props: ComponentProps) => {
                       : "Invalid chain ID"
                   }
                 />
+                <TextInput
+                  label="Custom RPC URL"
+                  placeholder="https://rpc.example.com"
+                  onChange={(v) =>
+                    handleSettingsChange("customTransport", v.target.value)
+                  }
+                />
                 <TextInput
                   label="Safe Version"
                   placeholder={settings.safeVersion}

src/configs/rainbow.config.ts

@@ -1,5 +1,5 @@
-import { merge } from "lodash";
 import { Theme, getDefaultConfig, lightTheme } from "@rainbow-me/rainbowkit";
+import { merge } from "lodash";
 import { HttpTransportConfig, http } from "viem";
 import {
   arbitrum,
@@ -23,21 +23,23 @@ const httpTransportConfig: HttpTransportConfig = {
   retryDelay: 10000, // attempt to retry after 10 seconds if rate limited or errors for some reason
 };
 
-export const config = getDefaultConfig({
-  appName: "SARA",
-  projectId:
-    import.meta.env.WALLET_CONNECT_CLOUD_PROJECT_ID ?? "YOUR_PROJECT_ID",
-  chains: [mainnet, polygon, optimism, arbitrum, base, gnosis, sepolia],
-  transports: {
-    [mainnet.id]: http(undefined, httpTransportConfig),
-    [polygon.id]: http(undefined, httpTransportConfig),
-    [optimism.id]: http(undefined, httpTransportConfig),
-    [arbitrum.id]: http(undefined, httpTransportConfig),
-    [base.id]: http(undefined, httpTransportConfig),
-    [gnosis.id]: http(undefined, httpTransportConfig),
-    [sepolia.id]: http(undefined, httpTransportConfig),
-  },
-});
+export function getConfig(transport: string | undefined) {
+  return getDefaultConfig({
+    appName: "SARA",
+    projectId:
+      import.meta.env.WALLET_CONNECT_CLOUD_PROJECT_ID ?? "YOUR_PROJECT_ID",
+    chains: [mainnet, polygon, optimism, arbitrum, base, gnosis, sepolia],
+    transports: {
+      [mainnet.id]: http(transport, httpTransportConfig),
+      [polygon.id]: http(transport, httpTransportConfig),
+      [optimism.id]: http(transport, httpTransportConfig),
+      [arbitrum.id]: http(transport, httpTransportConfig),
+      [base.id]: http(transport, httpTransportConfig),
+      [gnosis.id]: http(transport, httpTransportConfig),
+      [sepolia.id]: http(transport, httpTransportConfig),
+    },
+  });
+}
 
 export const TokenDeployments: {
   [key in SupportedChainId]: {

src/pages/Index.tsx

@@ -1,14 +1,14 @@
-import { useState } from "react";
 import { Button } from "@mantine/core";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { IconBrandGithub } from "@tabler/icons-react";
+import { useState } from "react";
 
+import { Journey } from "@components/Journey";
+import { StealthAddressStickyTable } from "@components/StealthAddressStickyTable";
 import { Card } from "@components/common/Card";
+import { Footer } from "@components/common/Footer";
 import { Header } from "@components/common/Header";
 import { Section } from "@components/common/Section";
-import { Footer } from "@components/common/Footer";
-import { StealthAddressStickyTable } from "@components/StealthAddressStickyTable";
-import { Journey } from "@components/Journey";
 
 import { Address } from "@typing/index";
 
@@ -59,7 +59,7 @@ export const Index = () => {
         <p>
           Learn more about the mission, values, and the team behind{" "}
           <a href="https://fluidkey.com" target="_blank">
-            FluidKey
+            Fluidkey
           </a>
           .
         </p>

src/types/index.ts

@@ -15,6 +15,7 @@ export type FluidKeyStealthSafeAddressGenerationParams = {
   safeVersion: SafeVersion;
   useDefaultAddress: boolean;
   exportPrivateKeys?: boolean;
+  customTransport?: string | undefined;
 };
 
 export type CreateCSVEntryParams = {