Update aa provider

Author: duanyytop

package.json

@@ -42,6 +42,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "rollup-plugin-node-polyfills": "^0.2.1",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.3.3",
     "vite": "^4.5.1",

pnpm-lock.yaml

@@ -6,6 +6,7 @@ import { useAaAddress, useCurrentAddress, useUpdateAaAddress } from "../hooks/us
 import { JoySigner } from "../evm-aa/signer";
 import { getAAProvider } from "../evm-aa/provider";
 import { ECDSAProvider } from "@zerodev/sdk";
+import { useEffect } from "react";
 
 // The NFT contract we will be interacting with
 const contractAddress = '0x34bE7f35132E97915633BC1fc020364EA5134863'
@@ -26,15 +27,17 @@ export const EvmAA = () => {
   const [signLoading, setSignLoading] = useState(false);
   const [mintLoading, setMintLoading] = useState(false);
 
+  useEffect(() => {
+    const init = async () => {
+      const signer = new JoySigner(webApp, address as Hex);
+      setProvider(await getAAProvider(signer));
+    };
+    init();
+  }, [address, webApp]);
+
   const onCreate = async () => {
     setCreateLoading(true);
-    const signer = new JoySigner(webApp, address as Hex);
-    const aaProvider = await getAAProvider(signer);
-    setProvider(aaProvider);
-    const aaAddr = await aaProvider.account?.getAddress();
-    if (aaAddr) {
-      signer.setAaAddress(aaAddr);
-    }
+    const aaAddr = await provider?.account?.getAddress();
     updateAaAddress(aaAddr);
     setCreateLoading(false);
   };

src/components/EvmAA.tsx

@@ -6,7 +6,6 @@ import { ConnectResp, SignResp, USER_REJECTED, api } from "../api";
 
 export class JoySigner implements SmartAccountSigner {
   address: Hex;
-  aaAddress: Hex | undefined;
   webApp: WebApp | undefined;
 
   signerType = "local";
@@ -26,14 +25,10 @@ export class JoySigner implements SmartAccountSigner {
     }
   }
 
-  setAaAddress = (aaAddress: Hex) => {
-    this.aaAddress = aaAddress
-  }
-
   readonly getAddress: () => Promise<Hex> = async () => {
-    if (this.aaAddress) {
+    if (this.address) {
       return new Promise((resolve) => {
-        resolve(this.aaAddress as Hex)
+        resolve(this.address as Hex);
       })
     }
     const promise = new Promise<Hex>((resolve, reject) => {

src/evm-aa/signer.ts

@@ -1,4 +1,4 @@
-import { atom, useAtomValue, useSetAtom } from 'jotai'
+import { useAtomValue, useSetAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 import { Hex } from 'viem';
 
@@ -7,6 +7,6 @@ export const useCurrentAddress = () => useAtomValue(addressAtom);
 export const useUpdateAddress = () => useSetAtom(addressAtom);
 
 
-const aaAddressAtom = atom<Hex | undefined>(undefined);
+const aaAddressAtom = atomWithStorage<Hex | undefined>("joyid:aa-address", undefined);
 export const useAaAddress = () => useAtomValue(aaAddressAtom);
 export const useUpdateAaAddress = () => useSetAtom(aaAddressAtom);

src/hooks/useAccount.ts

@@ -2,6 +2,7 @@ import {defineConfig} from "vite";
 import react from "@vitejs/plugin-react";
 import mkcert from "vite-plugin-mkcert";
 import {NodeGlobalsPolyfillPlugin} from "@esbuild-plugins/node-globals-polyfill";
+import rollupNodePolyFill from "rollup-plugin-node-polyfills";
 import {esbuildCommonjs, viteCommonjs} from "@originjs/vite-plugin-commonjs";
 
 const plugins: any[] = [
@@ -40,6 +41,13 @@ export default defineConfig(({mode}) => {
     },
     build: {
       assetsInlineLimit: 5000,
+      rollupOptions: {
+        plugins: [
+          // Enable rollup polyfills plugin
+          // used during production bundling
+          rollupNodePolyFill(),
+        ],
+      },
     },
     optimizeDeps: {
       esbuildOptions: {