useExportAccount
The useExportAccount
hook exports the user's Embedded Account's recovery details to be viewable on the application.
WARNING
This requires your user to be logged in. See useAuthenticate
for more details.
Import
import { useExportAccount } from "@alchemy/aa-alchemy/react";
Usage
import { useExportAccount } from "@alchemy/aa-alchemy/react";
export function ComponentWithExportAccount() {
/**
* Assumes the app has context of a signer with an authenticated user
* by using the `AlchemyAccountProvider` from `@alchemy/aa-alchemy/react`.
*/
const { exportAccount, isExported, isExporting, ExportAccountComponent } =
useExportAccount({
onSuccess: (hasSuccessfullyExported) => {
// [optional] Do something after the account credentials have been exported
},
onError: (error) => {
// [optional] Do something with the error
},
// [optional] ...additional mutationArgs
});
return (
<div>
{!isExported ? (
<button onClick={() => exportAccount()} disabled={isExporting}>
Export Account
</button>
) : (
<strong>Seed Phrase</strong>
)}
<ExportAccountComponent className="w-full" isExported={isExported} />
</div>
);
}
Params
An object containing the following fields.
params
An optional config object containing iframeContainerId
as the container ID for the iframe that reveals the account's recovery details, and an [optional] iframeElementId
as the element ID for the iframe that reveals the account's recovery details. Defaults to turnkey-export-iframe
.
If params
is not passed in, the default iframe config will just have an iframeContainerId
that defaults to alchemy-signer-iframe-container
.
...mutationArgs
You can optionally specify any of the React Query useMutation
parameters as parameters to this hook.
Return Type
import { type UseExportAccountResult } from "@alchemy/aa-alchemy/react";
Returns an object containing the following state.
exportAccount
UseMutateFunction
A React query mutation function to export the user's account recovery details. It returns a boolean
to flag whether or not the account's private key or recovery phrase was correctly exported.
isExported
boolean
A flag that determines whether the account recovery details were successfully exported and now viewable in the application.
ExportAccountComponent
JSX.Element
A React component you can use to render the exported account recovery details in an iFrame. It takes in props to determine the the styling of the iframee and parent element, and a boolean flag to show the details if they successfully rendered using the mutation function above.
isExporting
boolean
A flag that determines whether the mutation is still running or not.
error
Error | null
A field that relays any errors from the mutation. It is null if there is no error.