Update DApps Connect wallet Step

stepxx_web3/step06_dapps/step01_connectWallet/README.md

@@ -1,11 +1,11 @@
 ## Overview
 
-We will be using a developer framework called ZERODEV for creating, using, and extending smart wallets powered by account abstraction (ERC-4337). 
+We will be using a developer framework called ZERODEV for creating, using, and extending smart wallets powered by account abstraction (ERC-4337).
 In this step we have used this framework to create ERC-4337 wallets using different thirdy-party social media logins.
 
-[Zerodev docs](https://docs.zerodev.app/) 
+[Zerodev docs](https://docs.zerodev.app/)
 
-### Required libraries 
+### Required libraries
 
 ```
 yarn add @zerodevapp
@@ -14,24 +14,26 @@ yarn add @zerodevapp/social-wallet
 
 ### Understanding code
 
-1) First create a project ID from zero dev's dashboard. The id being used in this step is a test id from zero dev, you can replace it with your own id.
-2) Initialize the signer 
+1. First create a project ID from zero dev's dashboard. The id being used in this step is a test id from zero dev, you can replace it with your own id.
+2. Initialize the signer
+
 ```
-import { getZeroDevSigner, getSocialWalletOwner } from '@zerodevapp/sdk'
+import { getZeroDevSigner, getRPCProviderOwner } from '@zerodevapp/sdk'
 import {SocialWallet} from '@zerodevapp/social-wallet';
 
+const polygonMumbaiChainId = 80001;
 const signer = await getZeroDevSigner({
        projectId: 'Enter-your-projectId',
-       owner: await getSocialWalletOwner('Enter-your-projectId', socialWallet)
+       owner: getRPCProviderOwner(await socialWallet.connect(polygonMumbaiChainId))
       })
 ```
-This piece of code with initialize the zerodev signer and prompt the user with a modal to login with one of their social media platforms.
 
-3) Read & write data from the newly created wallet address using zerodev signer
+This piece of code will initialize the zerodev signer and prompt the user with a modal to login with one of their social media platforms.
+
+3. Read & write data from the newly created wallet address using zerodev signer
 
 You can interact with the wallet using zerodev signer to read, write or send transactions to blockchain. In this example we have simply read the address of the newly created wallet account
 
 ```
 const userAddress = await signer.getAddress();
 ```
-

stepxx_web3/step06_dapps/step01_connectWallet/package.json

@@ -12,7 +12,7 @@
     "@types/node": "18.15.11",
     "@types/react": "18.0.31",
     "@types/react-dom": "18.0.11",
-    "@zerodevapp/sdk": "^2.2.10",
+    "@zerodevapp/sdk": "^3.1.0",
     "@zerodevapp/social-wallet": "^1.0.1",
     "cookie-cutter": "^0.2.0",
     "cookies-next": "^2.1.1",

stepxx_web3/step06_dapps/step01_connectWallet/src/components/connectButton/index.tsx

@@ -1,85 +1,87 @@
 "use client";
 
-import React, { useMemo, useState } from 'react'
-import { getZeroDevSigner, getSocialWalletOwner, ZeroDevSigner } from '@zerodevapp/sdk'
-import {
-  SocialWallet,
-} from '@zerodevapp/social-wallet';
-
+import React, { useMemo, useState } from "react";
+import { getRPCProviderOwner, getZeroDevSigner } from "@zerodevapp/sdk";
+import { SocialWallet } from "@zerodevapp/social-wallet";
 
 declare global {
   interface Window {
     ethereum: any;
   }
 }
 
-function ConnectButton() {
-
-
-
-  const [address, setAddress] = useState<string>()
-  const [loading, setLoading] = useState(false)
-
+const polygonMumbaiChainId = 80001;
 
-  console.log("user ", address)
+function ConnectButton() {
+  const [address, setAddress] = useState<string>();
+  const [loading, setLoading] = useState(false);
 
+  console.log("user ", address);
 
   const socialWallet = useMemo(() => {
-    return new SocialWallet()
-  }, [])
-
+    return new SocialWallet();
+  }, []);
 
   const createWallet = async () => {
-
     try {
-
-      setLoading(true)
+      setLoading(true);
 
       const signer = await getZeroDevSigner({
-        projectId: 'b5486fa4-e3d9-450b-8428-646e757c10f6',
-        owner: await getSocialWalletOwner('b5486fa4-e3d9-450b-8428-646e757c10f6', socialWallet)
-      })
-
+        projectId: "b5486fa4-e3d9-450b-8428-646e757c10f6",
+        owner: getRPCProviderOwner(
+          await socialWallet.connect(polygonMumbaiChainId)
+        ),
+      });
 
       const userAddress = await signer.getAddress();
-      setAddress(userAddress)
-
+      setAddress(userAddress);
+    } catch (e) {
+      console.log(e);
+    } finally {
+      setLoading(false);
     }
-    catch (e) {
-
-      console.log(e)
-    }
-    finally {
-      setLoading(false)
-    }
-
-  }
-
+  };
 
   const disconnect = async () => {
     await socialWallet.disconnect();
-    setAddress(undefined)
-
-
-  }
-
+    setAddress(undefined);
+  };
 
   return (
     <div>
-
       <div>
-        {!address && <button className='bg-gray-300 p-3' onClick={createWallet} disabled={loading}>{loading ? 'loading...' : 'Connect Wallet'}</button>}
-        {!!address &&
-          <button className='bg-gray-300 p-3' onClick={disconnect} disabled={loading}>Disconnect</button>
-        }
+        {!address && (
+          <button
+            className="bg-gray-300 p-3"
+            onClick={createWallet}
+            disabled={loading}
+          >
+            {loading ? "loading..." : "Connect Wallet"}
+          </button>
+        )}
+        {!!address && (
+          <button
+            className="bg-gray-300 p-3"
+            onClick={disconnect}
+            disabled={loading}
+          >
+            Disconnect
+          </button>
+        )}
       </div>
-      {!!address &&
+      {!!address && (
         <div>
-          <label> {`${address.substring(0, 6)}...${address.substring(address.length - 5, address.length)}`}</label>
+          <label>
+            {" "}
+            {`${address.substring(0, 6)}...${address.substring(
+              address.length - 5,
+              address.length
+            )}`}
+          </label>
         </div>
-      }
+      )}
     </div>
-  )
+  );
 }
 
-export default ConnectButton
+export default ConnectButton;