From 83666553f08f3d1367ef82173028a8d5ed14e926 Mon Sep 17 00:00:00 2001
From: moldy <michael.moldoveanu@alchemy.com>
Date: Tue, 24 Oct 2023 11:18:38 -0400
Subject: [PATCH 1/2] docs: update the magic docs to highlight signer creation
 is async

---
 site/snippets/magic.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/site/snippets/magic.ts b/site/snippets/magic.ts
index 31b94cb6da..8d01eb489e 100644
--- a/site/snippets/magic.ts
+++ b/site/snippets/magic.ts
@@ -9,10 +9,9 @@ const MAGIC_API_KEY = "pk_test_...";
 export const magic = new Magic(MAGIC_API_KEY);
 
 // a viem wallet client that wraps magic for utility methods
-// NOTE: this isn't necessary since you can just use the `magic.rpcProvider`
-// directly, but this makes things much easier
+// NOTE: because this is async, you will need to put this in a useEffect hook if using React
 export const magicClient = createWalletClient({
-  transport: custom(magic.rpcProvider),
+  transport: custom(await magic.wallet.getProvider()),
 });
 
 // a smart account signer you can use as an owner on ISmartContractAccount
@@ -20,3 +19,8 @@ export const magicSigner: SmartAccountSigner = new WalletClientSigner(
   magicClient,
   "magic" // signerType
 );
+
+// NOTE: before you can use the above signer as an owner, you need to authenticate the user first
+// for example:
+await magic.wallet.connectWithUI();
+// for more details see the docs: https://magic.link/docs/dedicated/overview

From 9da5d5b0df7967efb427d130cc504dcd4d118e25 Mon Sep 17 00:00:00 2001
From: moldy <michael.moldoveanu@alchemy.com>
Date: Tue, 24 Oct 2023 11:18:38 -0400
Subject: [PATCH 2/2] docs: update the magic docs to highlight signer creation
 is async

---
 site/smart-accounts/signers/magic.md |  6 ++++--
 site/snippets/magic.ts               | 27 +++++++++++++--------------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/site/smart-accounts/signers/magic.md b/site/smart-accounts/signers/magic.md
index ff96bb35a8..6d87f3a96e 100644
--- a/site/smart-accounts/signers/magic.md
+++ b/site/smart-accounts/signers/magic.md
@@ -52,9 +52,11 @@ import {
   getDefaultLightAccountFactory,
 } from "@alchemy/aa-accounts";
 import { sepolia } from "viem/chains";
-import { magicSigner } from "./magic";
+import { createMagicSigner } from "./magic";
 
 const chain = sepolia;
+// NOTE: the below is async because it depends on creating a magic signer. You can choose to break that up how you want
+// eg. use a useEffect + useState to create the signer and then pass it down to the provider
 const provider = new AlchemyProvider({
   apiKey: "ALCHEMY_API_KEY",
   chain,
@@ -64,7 +66,7 @@ const provider = new AlchemyProvider({
     new LightSmartContractAccount({
       entryPointAddress: "0x...",
       chain: rpcClient.chain,
-      owner: magicSigner,
+      owner: await createMagicSigner(),
       factoryAddress: getDefaultLightAccountFactory(chain),
       rpcClient,
     })
diff --git a/site/snippets/magic.ts b/site/snippets/magic.ts
index 8d01eb489e..5bc709000c 100644
--- a/site/snippets/magic.ts
+++ b/site/snippets/magic.ts
@@ -1,4 +1,4 @@
-import { WalletClientSigner, type SmartAccountSigner } from "@alchemy/aa-core";
+import { WalletClientSigner } from "@alchemy/aa-core";
 import { Magic } from "magic-sdk";
 import { createWalletClient, custom } from "viem";
 
@@ -8,19 +8,18 @@ const MAGIC_API_KEY = "pk_test_...";
 // instantiate Magic SDK instance
 export const magic = new Magic(MAGIC_API_KEY);
 
-// a viem wallet client that wraps magic for utility methods
 // NOTE: because this is async, you will need to put this in a useEffect hook if using React
-export const magicClient = createWalletClient({
-  transport: custom(await magic.wallet.getProvider()),
-});
+export const createMagicSigner = async () => {
+  // 1. Authenticate the user (for other methods see magic docs https://magic.link/docs/dedicated/overview)
+  await magic.wallet.connectWithUI();
 
-// a smart account signer you can use as an owner on ISmartContractAccount
-export const magicSigner: SmartAccountSigner = new WalletClientSigner(
-  magicClient,
-  "magic" // signerType
-);
+  // 2. create a wallet client
+  const magicClient = createWalletClient({
+    transport: custom(await magic.wallet.getProvider()),
+  });
 
-// NOTE: before you can use the above signer as an owner, you need to authenticate the user first
-// for example:
-await magic.wallet.connectWithUI();
-// for more details see the docs: https://magic.link/docs/dedicated/overview
+  return new WalletClientSigner(
+    magicClient,
+    "magic" // signerType
+  );
+};