Fix/combo input field merge conflict

.env.example

@@ -2,4 +2,5 @@ VITE_WALLET_CONNECT_PROJECT_ID=""
 VITE_ALCHEMY_API_KEY="" # alchemy api key. https://www.alchemy.com/
 VITE_CHAINS="1337,8453" #comma separated list of chain ids. (ex: "1337,8543")
 VITE_BASE_ENDPOINT="pinto.money" # base endpoint domain
-VITE_TENDERLY_RPC_URL="" # rpc url for pointing towards tenderly RPC for testing. Add chainId 41337 to VITE_CHAINS
+VITE_TENDERLY_RPC_URL="" # rpc url for pointing towards tenderly RPC for testing. Add chainId 41337 to VITE_CHAINS
+VITE_PRIVY_APP_ID="" # privy app id from dashboard.privy.io

.gitignore

@@ -20,6 +20,7 @@ dist-ssr
 
 # Editor directories and files
 .vscode/*
+.kiro
 !.vscode/extensions.json
 .idea
 .DS_Store

package.json

@@ -23,6 +23,9 @@
     "@hookform/resolvers": "^3.9.0",
     "@netlify/functions": "^2.8.1",
     "@number-flow/react": "^0.5.9",
+    "@privy-io/react-auth": "^3.6.0",
+    "@privy-io/wagmi": "^2.0.2",
+    "@privy-io/wagmi-connector": "^0.1.13",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.1",
@@ -120,7 +123,9 @@
     "@babel/runtime": "^7.26.10",
     "brace-expansion": "^2.0.2",
     "micromatch": "^4.0.8",
-    "cross-spawn": "7.0.6"
+    "cross-spawn": "7.0.6",
+    "viem": "^2.33.1",
+    "ox": "^0.8.1"
   },
   "packageManager": "yarn@4.5.0"
 }

src/Web3Provider.tsx

@@ -1,3 +1,4 @@
+import { PrivyProvider, usePrivy, useWallets } from "@privy-io/react-auth";
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 import { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
@@ -6,8 +7,13 @@ import { ConnectKitProvider } from "connectkit";
 import { atom, useAtom } from "jotai";
 import { ReactNode, useEffect, useMemo } from "react";
 import { createTestClient } from "viem";
-import { http, WagmiProvider, createConfig } from "wagmi";
+import { http, WagmiProvider, createConfig, createStorage } from "wagmi";
+import type { CreateConnectorFn } from "wagmi";
 import { mock } from "wagmi/connectors";
+import { useAutoReconnect } from "./hooks/wallet/useAutoReconnect";
+import { usePrivySync } from "./hooks/wallet/usePrivySync";
+import { privyConfig } from "./utils/privy/privy.config";
+import { getPrivyEmbeddedWallet, getPrivyLogout } from "./utils/privy/privyRefs";
 import { isValidAddress } from "./utils/string";
 import { isLocalhost, isNetlifyPreview, isProd } from "./utils/utils";
 import {
@@ -16,7 +22,8 @@ import {
   localhostNetwork as localhost,
   tenderlyTestnetNetwork as testnet,
 } from "./utils/wagmi/chains";
-import config from "./utils/wagmi/config";
+import { buildBaseConfigParams } from "./utils/wagmi/config";
+import { privy as privyConnector } from "./utils/wagmi/connectors/privy";
 
 // biome-ignore lint/suspicious/noExplicitAny: React Query needs this to serialize BigInts
 (BigInt.prototype as any).toJSON = function () {
@@ -38,10 +45,14 @@ const localStoragePersister = createSyncStoragePersister({
 });
 
 export const Web3Provider = ({ children }: { children: ReactNode }) => {
-  const config = useEnvConfig();
+  const privyAppId = import.meta.env.VITE_PRIVY_APP_ID;
+
+  if (!privyAppId) {
+    console.warn("VITE_PRIVY_APP_ID is not set. Privy email/social login will not work.");
+  }
 
   return (
-    <WagmiProvider config={config}>
+    <PrivyProvider appId={privyAppId || ""} config={privyConfig}>
       {/**
        * If the cache that is found has a different buster string than what is set here, it will be discarded.
        * Should be changed whenever there's a significant change in the subgraphs.
@@ -52,51 +63,103 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => {
         client={queryClient}
         persistOptions={{ persister: localStoragePersister, buster: "20250501" }}
       >
-        <MockConnectorManager />
-        <ConnectKitProvider
-          mode="light"
-          customTheme={{
-            "--ck-font-family": "Pinto",
-            "--ck-border-radius": "24px",
-            "--ck-body-color": "#404040",
-            "--ck-body-background": "#FCFCFC",
-            "--ck-modal-box-shadow": "0px 0px 0px 1px rgb(217, 217, 217)",
-            "--ck-overlay-backdrop-filter": "blur(2px)",
-            "--ck-overlay-background": "rgb(255 255 255 / 0.5)",
-            "--ck-primary-button-font-weight": "400",
-            "--ck-primary-button-box-shadow": "0px 0px 0px 1px rgb(217, 217, 217)",
-            "--ck-primary-button-background": "#FCFCFC",
-            "--ck-primary-button-hover-background": "#EBEBEB",
-            "--ck-secondary-button-background": "#FCFCFC",
-            "--ck-secondary-button-hover-background": "#EBEBEB",
-            "--ck-secondary-button-box-shadow": "0px 0px 0px 1px rgb(217, 217, 217)",
-            "--ck-spinner-color": "rgb(36 102 69)",
-            "--ck-qr-border-color": "rgb(217, 217, 217)",
-            "--ck-qr-dot-color": "rgb(36 102 69)",
-            "--ck-body-divider": "rgb(217, 217, 217)",
-          }}
-          options={{
-            initialChainId: getDefaultChainId(),
-            avoidLayoutShift: true,
-            hideNoWalletCTA: true,
-            hideQuestionMarkCTA: true,
-            enforceSupportedChains: true,
-          }}
-        >
-          {children}
-        </ConnectKitProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
+        <WagmiProviderWrapper>{children}</WagmiProviderWrapper>
       </PersistQueryClientProvider>
-    </WagmiProvider>
+    </PrivyProvider>
   );
 };
 
-// New component to handle mock connector logic
+function getDefaultChainId() {
+  if (isProd()) {
+    return base.id;
+  }
+  if (isNetlifyPreview()) {
+    return !!TENDERLY_RPC_URL ? testnet.id : base.id;
+  }
+  return localhost.id;
+}
+
+/**
+ * Stable wagmi config for non-localhost environments
+ * Config instance never changes to preserve wagmi's storage state
+ * Privy connector uses global refs that can be updated without recreating config
+ */
+const stableBaseConfig = createConfig(
+  buildBaseConfigParams({
+    additionalConnectors: [
+      privyConnector({
+        getEmbeddedWallet: getPrivyEmbeddedWallet,
+        logout: () => {
+          const logout = getPrivyLogout();
+          return logout ? logout() : Promise.resolve();
+        },
+      }),
+    ],
+  }),
+);
+
+const connectKitTheme = {
+  "--ck-font-family": "Pinto",
+  "--ck-border-radius": "24px",
+  "--ck-body-color": "#404040",
+  "--ck-body-background": "#FCFCFC",
+  "--ck-modal-box-shadow": "0px 0px 0px 1px rgb(217, 217, 217)",
+  "--ck-overlay-backdrop-filter": "blur(2px)",
+  "--ck-overlay-background": "rgb(255 255 255 / 0.5)",
+  "--ck-primary-button-font-weight": "400",
+  "--ck-primary-button-box-shadow": "0px 0px 0px 1px rgb(217, 217, 217)",
+  "--ck-primary-button-background": "#FCFCFC",
+  "--ck-primary-button-hover-background": "#EBEBEB",
+  "--ck-secondary-button-background": "#FCFCFC",
+  "--ck-secondary-button-hover-background": "#EBEBEB",
+  "--ck-secondary-button-box-shadow": "0px 0px 0px 1px rgb(217, 217, 217)",
+  "--ck-spinner-color": "rgb(36 102 69)",
+  "--ck-qr-border-color": "rgb(217, 217, 217)",
+  "--ck-qr-dot-color": "rgb(36 102 69)",
+  "--ck-body-divider": "rgb(217, 217, 217)",
+};
+
+const connectKitOptions = {
+  initialChainId: getDefaultChainId(),
+  avoidLayoutShift: true,
+  hideNoWalletCTA: true,
+  hideQuestionMarkCTA: true,
+  enforceSupportedChains: true,
+};
+
+function WagmiProviderWrapper({ children }: { children: ReactNode }) {
+  const wagmiConfig = useEnvConfig(stableBaseConfig);
+
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <MockConnectorManager />
+      <ConnectionManager />
+      <ConnectKitProvider mode="light" customTheme={connectKitTheme} options={connectKitOptions}>
+        {children}
+      </ConnectKitProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </WagmiProvider>
+  );
+}
+
+/**
+ * Manages wallet connection lifecycle
+ * Handles auto-reconnect and Privy sync
+ */
+function ConnectionManager() {
+  useAutoReconnect();
+  usePrivySync();
+  return null;
+}
+
+/**
+ * Manages mock connector for localhost development
+ * Impersonates accounts for testing
+ */
 function MockConnectorManager() {
   const [mockAddress] = useAtom(mockAddressAtom);
   const isLocal = isLocalhost();
 
-  // Impersonate account whenever mockAddress changes
   useEffect(() => {
     if (isLocal && isValidAddress(mockAddress)) {
       anvilTestClient.impersonateAccount({ address: mockAddress });
@@ -106,51 +169,57 @@ function MockConnectorManager() {
   return null;
 }
 
-// Add atom for mock address with stored value or default
-export const mockAddressAtom = atom<`0x${string}`>(
-  // default to local storage
-  (localStorage.getItem("mockAddress") as `0x${string}`) ||
-    null ||
-    // if none in local storage, use env variable
-    "0x",
-);
+export const mockAddressAtom = atom<`0x${string}`>((localStorage.getItem("mockAddress") as `0x${string}`) || "0x");
 
 export const anvilTestClient = createTestClient({
   mode: "anvil",
   chain: localhost,
   transport: http(),
 });
 
-const getDefaultChainId = () => {
-  if (isProd()) {
-    return base.id;
-  }
-  if (isNetlifyPreview()) {
-    return !!TENDERLY_RPC_URL ? testnet.id : base.id;
-  }
-  return localhost.id;
-};
-
-// Create config with current mock address value
-const useEnvConfig = () => {
+/**
+ * Creates wagmi config based on environment
+ * - Localhost: Uses mock connector with impersonation
+ * - Other environments: Uses stable base config
+ */
+function useEnvConfig(stableBaseConfig: ReturnType<typeof createConfig>) {
   const [mockAddress] = useAtom(mockAddressAtom);
   const isLocal = isLocalhost();
+  const { logout: privyLogout } = usePrivy();
+  const wallets = useWallets();
+  const walletsArray = Array.isArray(wallets) ? wallets : wallets?.wallets || [];
+  const embeddedWallet = walletsArray.find((w) => w.walletClientType === "privy");
 
   const localConfig = useMemo(() => {
     if (!isValidAddress(mockAddress)) {
       return undefined;
     }
 
+    const connectors: CreateConnectorFn[] = [
+      mock({ accounts: [mockAddress], features: { defaultConnected: true, reconnect: true } }),
+    ];
+
+    if (embeddedWallet && privyLogout) {
+      connectors.push(
+        privyConnector({
+          getEmbeddedWallet: () => embeddedWallet,
+          logout: privyLogout,
+        }),
+      );
+    }
+
     return createConfig({
-      connectors: [mock({ accounts: [mockAddress], features: { defaultConnected: true, reconnect: true } })],
+      connectors,
       chains: [localhost, base],
       client() {
         return anvilTestClient;
       },
+      storage: createStorage({
+        storage: typeof window !== "undefined" ? window.localStorage : undefined,
+      }),
+      ssr: false,
     });
-  }, [mockAddress]);
-
-  const envConfig = isLocal && localConfig ? localConfig : config;
+  }, [mockAddress, embeddedWallet, privyLogout]);
 
-  return envConfig;
-};
+  return isLocal && localConfig ? localConfig : stableBaseConfig;
+}

src/components/AutoConnectFirstConnector.tsx

@@ -0,0 +1,39 @@
+import { isDev } from "@/utils/utils";
+import { useEffect } from "react";
+import { useConnect } from "wagmi";
+
+/**
+ * AutoConnectFirstConnector Component
+ *
+ * Automatically connects to the first available wagmi connector when:
+ * - Status is "idle" (not connected)
+ * - Connectors array has at least one connector
+ * - Component is mounted
+ *
+ * This is useful for development/testing purposes.
+ * Can be conditionally rendered based on environment (e.g., only in dev mode).
+ *
+ * Usage:
+ * ```tsx
+ * {isDev() && <AutoConnectFirstConnector />}
+ * ```
+ */
+export default function AutoConnectFirstConnector() {
+  const { connectors, connectAsync, status } = useConnect();
+
+  useEffect(() => {
+    if (!isDev()) {
+      return;
+    }
+
+    if (status === "idle" && connectors.length > 0) {
+      const firstConnector = connectors[0];
+      connectAsync({ connector: firstConnector }).catch((error) => {
+        console.error("AutoConnectFirstConnector: Auto-connect failed", error);
+      });
+    }
+  }, [connectors, status, connectAsync]);
+
+  // This component doesn't render anything
+  return null;
+}