diff --git a/components/UserCard.tsx b/components/UserCard.tsx
index e451b20..ad75e9e 100644
--- a/components/UserCard.tsx
+++ b/components/UserCard.tsx
@@ -1,83 +1,60 @@
"use client";
-import { publicClient } from "@/client";
-import { useAccountContext } from "@/context/AccountContext";
-import { useSignerContext } from "@/context/SignerContext";
+import {
+ useAddPasskey,
+ useBundlerClient,
+ useExportAccount,
+ useLogout,
+ useSignMessage,
+ useSmartAccountClient,
+ useUser,
+} from "@alchemy/aa-alchemy/react";
import { useForm } from "@tanstack/react-form";
-import { useMutation } from "@tanstack/react-query";
import { zodValidator } from "@tanstack/zod-form-adapter";
+import { useCallback, useState } from "react";
import { z } from "zod";
-const TurnkeyExportWalletContainerId = "turnkey-export-wallet-container-id";
-const TurnkeyExportWalletElementId = "turnkey-export-wallet-element-id";
-
-const iframeCss = `
-iframe {
- box-sizing: border-box;
- width: 100%;
- height: 120px;
- border-radius: 8px;
- border-width: 1px;
- border-style: solid;
- border-color: rgba(216, 219, 227, 1);
- padding: 20px;
-}
-`;
-
export const UserCard = () => {
- const { signer, user, account } = useSignerContext();
- const { provider } = useAccountContext();
+ const bundlerClient = useBundlerClient();
+ const { client, isLoadingClient } = useSmartAccountClient({
+ type: "MultiOwnerModularAccount",
+ });
+ const user = useUser();
- const { mutate: signMessage, data: { signature, isValid } = {} } =
- useMutation({
- mutationFn: async (msg: string) => {
- return provider
- .signMessageWith6492({ message: msg })
- .then(async (signature) => {
- return {
- signature,
- isValid: await publicClient
- .verifyMessage({
- address: provider.getAddress(),
- message: msg,
- signature,
- })
- .catch((e: any) => {
- console.log("error verifying signature, ", e);
- return false;
- }),
- };
- });
- },
- });
+ const { signMessageAsync, signedMessage } = useSignMessage({ client });
+ const [isValid, setIsValid] = useState
(false);
+ const signMessageAndVerify = useCallback(
+ async ({ message }: { message: string }) => {
+ if (!client) {
+ return;
+ }
- const { mutate, isPending, data } = useMutation({
- mutationFn: async () =>
- signer.exportWallet({
- iframeContainerId: TurnkeyExportWalletContainerId,
- iframeElementId: TurnkeyExportWalletElementId,
- }),
- });
+ const signature = await signMessageAsync({ message });
+ const isValid = await bundlerClient.verifyMessage({
+ message,
+ signature,
+ address: client.getAddress(),
+ });
- const { mutate: addPasskey } = useMutation({
- mutationFn: async () => signer.addPasskey({}),
- onSuccess: (data) => {
- console.log(data);
- },
- });
+ setIsValid(isValid);
- const { mutate: logout } = useMutation({
- mutationFn: async () => signer.disconnect(),
- onSuccess: () => {
- window.location.reload();
+ return { signature, isValid };
},
- });
+ [bundlerClient, client, signMessageAsync]
+ );
+
+ const { exportAccount, isExporting, isExported, ExportAccountComponent } =
+ useExportAccount();
+
+ const { addPasskey } = useAddPasskey();
+
+ const { logout } = useLogout({ onSuccess: window.location.reload });
const form = useForm({
defaultValues: {
message: "",
},
validatorAdapter: zodValidator,
- onSubmit: ({ value }) => signMessage(value.message),
+ onSubmit: ({ value }) => signMessageAndVerify({ message: value.message }),
});
return (
@@ -98,7 +75,7 @@ export const UserCard = () => {
Signer Address
@@ -144,7 +121,7 @@ export const UserCard = () => {
{({ canSubmit, isSubmitting }) => (
diff --git a/context/AccountContext.tsx b/context/AccountContext.tsx
deleted file mode 100644
index 53dfe67..0000000
--- a/context/AccountContext.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client";
-
-import { publicClient } from "@/client";
-import type { MultiOwnerModularAccount } from "@alchemy/aa-accounts";
-import {
- AlchemySigner,
- createAlchemySmartAccountClient,
-} from "@alchemy/aa-alchemy";
-import { PropsWithChildren, createContext, useContext, useState } from "react";
-import type { Chain, Transport } from "viem";
-
-type AccountContextType = {
- provider: ReturnType<
- typeof createAlchemySmartAccountClient<
- Transport,
- Chain,
- MultiOwnerModularAccount