refactor dynamic import for ens & sns

Author: Dangoz

src/app/profile/edit/components/WalletLinkForm.tsx

@@ -5,9 +5,11 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { Loader2, Info, Shield, ArrowRight } from "lucide-react";
-import { isAddress as isEvmAddress } from "viem"; // For ETH address validation
-import { normalize } from "viem/ens";
-import { viemClient } from "@/lib/walletLinking/viem";
+import {
+  getViemClient,
+  isAddress as isEvmAddressAsync,
+  normalizeEns,
+} from "@/lib/walletLinking/viem";
 import { LinkedWallet } from "@/lib/walletLinking/readmeUtils";
 import { resolveSolDomain } from "@/lib/walletLinking/sns";
 
@@ -51,19 +53,26 @@ export function WalletLinkForm({
     setEthAddress(ethWallet?.address || "");
     setSolAddress(solWallet?.address || "");
 
-    if (!ethWallet?.address || isEvmAddress(ethWallet.address)) {
-      setIsEthValid(true);
-      setEthAddressError("");
-    } else {
-      setIsEthValid(false);
-    }
+    // Validate initial addresses asynchronously
+    const validateInitialAddresses = async () => {
+      if (ethWallet?.address) {
+        const isValid = await isEvmAddressAsync(ethWallet.address);
+        setIsEthValid(isValid);
+        if (!isValid) {
+          setEthAddressError("Invalid Ethereum address");
+        }
+      }
 
-    if (!solWallet?.address || SOL_ADDRESS_REGEX.test(solWallet.address)) {
-      setIsSolValid(true);
-      setSolAddressError("");
-    } else {
-      setIsSolValid(false);
-    }
+      if (solWallet?.address) {
+        const isValid = SOL_ADDRESS_REGEX.test(solWallet.address);
+        setIsSolValid(isValid);
+        if (!isValid) {
+          setSolAddressError("Invalid Solana address");
+        }
+      }
+    };
+
+    validateInitialAddresses();
   }, [wallets]);
 
   useEffect(() => {
@@ -73,12 +82,16 @@ export function WalletLinkForm({
       return;
     }
 
-    const isEVMValid = isEvmAddress(ethAddress);
-    const isENSValid = ENS_NAME_REGEX.test(ethAddress);
-    setIsEthValid(isEVMValid || isENSValid);
-    setEthAddressError(
-      isEVMValid || isENSValid ? "" : "Invalid Ethereum address or ENS name.",
-    );
+    const validateEthAddress = async () => {
+      const isEVMValid = await isEvmAddressAsync(ethAddress);
+      const isENSValid = ENS_NAME_REGEX.test(ethAddress);
+      setIsEthValid(isEVMValid || isENSValid);
+      setEthAddressError(
+        isEVMValid || isENSValid ? "" : "Invalid Ethereum address or ENS name.",
+      );
+    };
+
+    validateEthAddress();
   }, [ethAddress]);
 
   useEffect(() => {
@@ -107,11 +120,13 @@ export function WalletLinkForm({
 
     if (ethAddress) {
       const isENSValid = ENS_NAME_REGEX.test(ethAddress);
-      const address = isENSValid
-        ? await viemClient.getEnsAddress({
-            name: normalize(ethAddress),
-          })
-        : ethAddress;
+      let address: string | null = ethAddress;
+
+      if (isENSValid) {
+        const viemClient = await getViemClient();
+        const normalizedName = await normalizeEns(ethAddress);
+        address = await viemClient.getEnsAddress({ name: normalizedName });
+      }
 
       // If the address is not found, set the error and return
       if (!address) {

src/lib/walletLinking/sns.ts

@@ -1,6 +1,3 @@
-import { Connection } from "@solana/web3.js";
-import { getDomainKeySync, NameRegistryState } from "@bonfida/spl-name-service";
-
 // Array of RPC endpoints to try in order
 const RPC_ENDPOINTS = [
   "https://api.mainnet-beta.solana.com", // Public Solana RPC
@@ -10,10 +7,13 @@ const RPC_ENDPOINTS = [
 
 /**
  * Gets the first working RPC endpoint by testing connectivity
+ * @param Connection - The Solana Connection class from dynamic import
  * @returns Promise<string> The first working RPC endpoint URL
  * @throws Will throw an error if no endpoints are accessible
  */
-async function getWorkingRpcEndpoint(): Promise<string> {
+async function getWorkingRpcEndpoint(
+  Connection: typeof import("@solana/web3.js").Connection,
+): Promise<string> {
   for (const endpoint of RPC_ENDPOINTS) {
     try {
       const connection = new Connection(endpoint, "confirmed");
@@ -35,9 +35,16 @@ async function getWorkingRpcEndpoint(): Promise<string> {
  * @returns A Promise that resolves to the PublicKey of the domain owner
  * @throws Will throw an error if the domain doesn't exist or if there's a network issue
  */
-export async function resolveSolDomain(domain: string) {
+export async function resolveSolDomain(domain: string): Promise<string | null> {
   try {
-    const workingEndpoint = await getWorkingRpcEndpoint();
+    // Import all Solana dependencies dynamically
+    const [{ Connection }, { getDomainKeySync, NameRegistryState }] =
+      await Promise.all([
+        import("@solana/web3.js"),
+        import("@bonfida/spl-name-service"),
+      ]);
+
+    const workingEndpoint = await getWorkingRpcEndpoint(Connection);
     const connection = new Connection(workingEndpoint);
 
     const { pubkey } = getDomainKeySync(domain);

src/lib/walletLinking/viem.ts

@@ -1,7 +1,26 @@
-import { createPublicClient, http } from "viem";
-import { mainnet } from "viem/chains";
+import type { PublicClient } from "viem";
 
-export const viemClient = createPublicClient({
-  chain: mainnet,
-  transport: http(),
-});
+let viemClient: PublicClient | null = null;
+
+export async function getViemClient(): Promise<PublicClient> {
+  if (!viemClient) {
+    const { createPublicClient, http } = await import("viem");
+    const { mainnet } = await import("viem/chains");
+
+    viemClient = createPublicClient({
+      chain: mainnet,
+      transport: http(),
+    });
+  }
+  return viemClient;
+}
+
+export async function isAddress(address: string): Promise<boolean> {
+  const { isAddress } = await import("viem");
+  return isAddress(address);
+}
+
+export async function normalizeEns(name: string): Promise<string> {
+  const { normalize } = await import("viem/ens");
+  return normalize(name);
+}