fix: build (#35)

.gitignore

@@ -45,7 +45,7 @@ yarn-error.log*
 # local env files
 
 .env
-.env\*.local
+.env.local
 
 # vercel
 

front/.env.example

@@ -1,2 +1,3 @@
 STACKUP_BUNDLER_API_KEY=""
 RELAYER_PRIVATE_KEY=""
+NEXT_PUBLIC_RP_DOMAIN="

front/src/libs/smart-wallet/SmartWalletProvider.tsx

@@ -2,8 +2,9 @@
 
 import React, { useContext } from "react";
 import { useSmartWalletHook } from "@/libs/smart-wallet/hook/useSmartWalletHook";
-import { WagmiConfig, createConfig } from "wagmi";
-import { smartWallet } from "./service/smart-wallet";
+import { WagmiConfig, configureChains, createConfig } from "wagmi";
+import { publicProvider } from "wagmi/providers/public";
+import { baseGoerli } from "viem/chains";
 
 type UseSmartWallet = ReturnType<typeof useSmartWalletHook>;
 
@@ -18,9 +19,12 @@ export const useWalletConnect = (): UseSmartWallet => {
 
 export function SmartWalletProvider({ children }: { children: React.ReactNode }) {
   const smartWalletValue = useSmartWalletHook();
+
+  const { publicClient } = configureChains([baseGoerli], [publicProvider()]);
+
   const wagmiConfig = createConfig({
     autoConnect: true,
-    publicClient: smartWallet.client,
+    publicClient: publicClient,
   });
 
   return (

front/src/libs/smart-wallet/service/decorators/index.ts

@@ -19,7 +19,7 @@ export type SmartWalletActions = {
   getUserOperationReceipt: (args: any) => Promise<GetUserOperationReceiptReturnType>;
   getIsValidSignature: (args: any) => Promise<GetIsValidSignatureReturnType>;
   waitForUserOperationReceipt: (args: any) => Promise<GetUserOperationReceiptReturnType>;
-} & PublicActions;
+};
 
 export function smartWalletActions(client: Client): SmartWalletActions {
   return {

front/src/libs/smart-wallet/service/smart-wallet.ts

@@ -22,12 +22,7 @@ export type SmartWalletClient<chain extends Chain | undefined = Chain | undefine
 > &
   PublicClient;
 
-export const createSmartWalletClient = <
-  transport extends Transport,
-  chain extends Chain | undefined = undefined,
->(
-  parameters: PublicClientConfig<transport, chain>,
-): SmartWalletClient => {
+export const createSmartWalletClient = (parameters: PublicClientConfig): SmartWalletClient => {
   const { key = "public", name = "Smart Wallet Client" } = parameters;
   const client = createPublicClient({
     ...parameters,
@@ -39,7 +34,6 @@ export const createSmartWalletClient = <
 
 class SmartWallet {
   private _client: SmartWalletClient;
-  private static _instance: SmartWallet;
   private _isInitiated: boolean = false;
 
   constructor() {

front/src/libs/web-authn/service/web-authn.ts

@@ -66,8 +66,8 @@ export class WebAuthn {
     const options: PublicKeyCredentialCreationOptions = {
       timeout: 60000,
       rp: {
-        name: "hocuspocusxyz",
-        id: "f445-2001-861-8ac1-ad50-b08d-6c0b-7168-132a.ngrok-free.app",
+        name: "passkeys-4337/smart-wallet",
+        id: window.location.hostname,
       },
       user: {
         id: this._generateRandomBytes(),
@@ -127,7 +127,7 @@ export class WebAuthn {
       challenge: challenge
         ? Buffer.from(challenge.slice(2), "hex")
         : Uint8Array.from("random-challenge", (c) => c.charCodeAt(0)),
-      rpId: "f445-2001-861-8ac1-ad50-b08d-6c0b-7168-132a.ngrok-free.app",
+      rpId: window.location.hostname,
       userVerification: "preferred",
     } as PublicKeyCredentialRequestOptions;
 

front/src/providers/MeProvider/index.tsx

@@ -18,9 +18,7 @@ export type Me = {
 function useMeHook() {
   const [isLoading, setIsLoading] = useState(false);
   const [me, setMe] = useState<Me | null>(null);
-  const [isReturning, setIsReturning] = useState(
-    Boolean(localStorage.getItem("hocuspocus.returning")),
-  );
+  const [isReturning, setIsReturning] = useState(false);
 
   function disconnect() {
     localStorage.removeItem("hocuspocus.me");
@@ -93,6 +91,15 @@ function useMeHook() {
     }
     setMe(JSON.parse(me));
   }, []);
+
+  useEffect(() => {
+    const returning = localStorage.getItem("hocuspocus.returning");
+    if (!returning) {
+      return;
+    }
+    setIsReturning(true);
+  }, []);
+
   return {
     isLoading,
     me,

front/src/providers/ModalProvider/index.tsx

@@ -101,11 +101,15 @@ export function ModalProvider({ children }: { children: React.ReactNode }) {
     setIsPortalMounted(true);
   }, []);
 
-  const radixElement = document.getElementsByClassName("radix-themes")[0];
+  let radixElement: HTMLElement | null = null;
+  if (isPortalMounted) {
+    radixElement = document.getElementsByClassName("radix-themes")[0] as HTMLElement;
+  }
+
   return (
     <ModalContext.Provider value={modalValue}>
       {children}
-      {isPortalMounted && (
+      {isPortalMounted && radixElement && (
         <PortalContainer $isOpen={modalValue.isOpen} container={radixElement as HTMLElement}>
           <Overlay $isOpen={modalValue.isBackdrop} onClick={() => modalValue.close()} />
           <Modal $isOpen={modalValue.isOpen}>{modalValue.content}</Modal>

front/src/providers/TransactionProvider/index.tsx

@@ -8,23 +8,20 @@ const useTxHook = () => {
   const [txs, setTxs] = useState<Array<Log> | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
 
-  const { keyId } = useMe();
-
-  const getLastTxs = useCallback(
-    async (keyId: Hex) => {
-      setLoading(true);
-      const res = await fetch(`/api/users/${keyId}/txs`);
-      const resJson = await res.json();
-      setTxs(resJson.logs);
-      setLoading(false);
-    },
-    [keyId],
-  );
+  const { me } = useMe();
+
+  const getLastTxs = useCallback(async (keyId: Hex) => {
+    setLoading(true);
+    const res = await fetch(`/api/users/${keyId}/txs`);
+    const resJson = await res.json();
+    setTxs(resJson.logs);
+    setLoading(false);
+  }, []);
 
   useEffect(() => {
-    if (!keyId) return;
-    getLastTxs(keyId);
-  }, [keyId, getLastTxs]);
+    if (!me?.keyId) return;
+    getLastTxs(me.keyId);
+  }, [me?.keyId, getLastTxs]);
 
   useEffect(() => {}, [txs]);