From 1508d7dc184600cbd6683fff0d48cd4abdb13839 Mon Sep 17 00:00:00 2001 From: Ajay Vasisht <43521356+avasisht23@users.noreply.github.com> Date: Thu, 18 Apr 2024 18:09:13 -0400 Subject: [PATCH] feat: update useAuthenticate and useAccount to include mutation args (#592) --- .../alchemy/src/react/hooks/useAccount.ts | 22 ++++++++++--------- .../src/react/hooks/useAuthenticate.ts | 11 +++++++++- site/react/useAccount.md | 4 ++++ site/react/useAuthenticate.md | 4 ++++ .../getting-started/setup-app/providers.tsx | 2 +- site/snippets/react/login.tsx | 9 +++++++- site/snippets/react/useAccount.tsx | 7 ++++++ 7 files changed, 46 insertions(+), 13 deletions(-) diff --git a/packages/alchemy/src/react/hooks/useAccount.ts b/packages/alchemy/src/react/hooks/useAccount.ts index 3cb4ef8c2c..4a3d1b2913 100644 --- a/packages/alchemy/src/react/hooks/useAccount.ts +++ b/packages/alchemy/src/react/hooks/useAccount.ts @@ -12,10 +12,15 @@ import { defaultAccountState, type SupportedAccount, type SupportedAccountTypes, + type SupportedAccounts, } from "../../config/index.js"; import { useAlchemyAccountContext } from "../context.js"; +import type { BaseHookMutationArgs } from "../types.js"; import { useSignerStatus } from "./useSignerStatus.js"; +export type UseAccountMutationArgs = + BaseHookMutationArgs | SupportedAccounts, void>; + export type UseAccountResult = { account?: SupportedAccount; isLoadingAccount: boolean; @@ -24,15 +29,16 @@ export type UseAccountResult = { export type UseAccountProps = GetAccountParams & { skipCreate?: boolean; - }; + } & UseAccountMutationArgs; export function useAccount( params: UseAccountProps ): UseAccountResult { + const { type, accountParams, skipCreate, ...mutationArgs } = params; const { config, queryClient } = useAlchemyAccountContext(); const status = useSignerStatus(); const account = useSyncExternalStore( - watchAccount(params.type, config), + watchAccount(type, config), () => getAccount(params, config), defaultAccountState ); @@ -40,21 +46,17 @@ export function useAccount( const { mutate, isPending } = useMutation( { mutationFn: async () => account?.account ?? createAccount(params, config), - mutationKey: ["createAccount", params.type], + mutationKey: ["createAccount", type], + ...mutationArgs, }, queryClient ); useEffect(() => { - if ( - !params.skipCreate && - status.isConnected && - !account?.account && - !isPending - ) { + if (!skipCreate && status.isConnected && !account?.account && !isPending) { mutate(); } - }, [account, isPending, mutate, params.skipCreate, status]); + }, [account, isPending, mutate, skipCreate, status]); return { account: account.status === "READY" ? account?.account : undefined, diff --git a/packages/alchemy/src/react/hooks/useAuthenticate.ts b/packages/alchemy/src/react/hooks/useAuthenticate.ts index b2a4b37ad1..15639dfea7 100644 --- a/packages/alchemy/src/react/hooks/useAuthenticate.ts +++ b/packages/alchemy/src/react/hooks/useAuthenticate.ts @@ -5,15 +5,23 @@ import { ClientOnlyPropertyError } from "../../config/errors.js"; import type { User } from "../../signer/index.js"; import type { AuthParams } from "../../signer/signer.js"; import { useAlchemyAccountContext } from "../context.js"; +import type { BaseHookMutationArgs } from "../types.js"; import { useSigner } from "./useSigner.js"; +export type UseAuthenticateMutationArgs = BaseHookMutationArgs< + User, + AuthParams +>; + export type UseAuthenticateResult = { authenticate: UseMutateFunction; isPending: boolean; error: Error | null; }; -export function useAuthenticate(): UseAuthenticateResult { +export function useAuthenticate( + mutationArgs?: UseAuthenticateMutationArgs +): UseAuthenticateResult { const { queryClient } = useAlchemyAccountContext(); const signer = useSigner(); @@ -30,6 +38,7 @@ export function useAuthenticate(): UseAuthenticateResult { return signer.authenticate(authParams); }, + ...mutationArgs, }, queryClient ); diff --git a/site/react/useAccount.md b/site/react/useAccount.md index b4b10be66a..64ec2a40e8 100644 --- a/site/react/useAccount.md +++ b/site/react/useAccount.md @@ -66,6 +66,10 @@ An optional param object based on the `type` property passed in above. It allows An optional param that allows you to avoid creating a new instance of the account. This is useful if you know your account has already been created and cached locally. +### ...mutationArgs + + + ## Return Type ```ts diff --git a/site/react/useAuthenticate.md b/site/react/useAuthenticate.md index 12d7b022c3..9bb47a1173 100644 --- a/site/react/useAuthenticate.md +++ b/site/react/useAuthenticate.md @@ -32,6 +32,10 @@ import { useAuthenticate } from "@alchemy/aa-alchemy/react"; <<< @/snippets/react/login.tsx +## Params + + + ## Return Type ```ts diff --git a/site/snippets/getting-started/setup-app/providers.tsx b/site/snippets/getting-started/setup-app/providers.tsx index f68d8a1dd1..4be0d1ca86 100644 --- a/site/snippets/getting-started/setup-app/providers.tsx +++ b/site/snippets/getting-started/setup-app/providers.tsx @@ -9,7 +9,7 @@ import { PropsWithChildren, Suspense } from "react"; export const Providers = (props: PropsWithChildren) => { const queryClient = new QueryClient(); const config = createConfig({ - rpcUrl: "/api/rpc", + rpcUrl: "/api/rpc", // this will proxy requests through the app's backend via NextJS routing to hide the Alchemy API key chain: arbitrumSepolia, }); diff --git a/site/snippets/react/login.tsx b/site/snippets/react/login.tsx index 7c80eff326..4d7ebfee6f 100644 --- a/site/snippets/react/login.tsx +++ b/site/snippets/react/login.tsx @@ -3,7 +3,14 @@ import { useState } from "react"; export function Login() { const [email, setEmail] = useState(""); - const { authenticate, isPending } = useAuthenticate(); + const { authenticate, isPending } = useAuthenticate({ + onSuccess: (user) => { + // [optional] Do something with the user info + }, + onError: (error) => { + // [optional] Do something with the error + }, + }); return (
diff --git a/site/snippets/react/useAccount.tsx b/site/snippets/react/useAccount.tsx index 384ae8b205..6278c8c111 100644 --- a/site/snippets/react/useAccount.tsx +++ b/site/snippets/react/useAccount.tsx @@ -5,6 +5,13 @@ export function ComponentUsingAccount() { const { isLoadingAccount, account } = useAccount({ type: "LightAccount", // alternatively pass in "MultiOwnerModularAccount", accountParams: {}, // optional param for overriding any account specific properties + skipCreate: false, // optional param to skip creating the account + onSuccess: (account) => { + // [optional] Do something with the account + }, + onError: (error) => { + // [optional] Do something with the error + }, }); if (isLoadingAccount || !account) {