12 / 16Module 3: The frontend applicationIntermediate
Part 3: Registering accounts
Managing assets requires an account. This lesson walks through how the asset management template handles account creation.
To create an account, FT4 provides registerAccount.
import { useCallback, useState } from "react";import { AuthFlag, createSingleSigAuthDescriptorRegistration, registerAccount, registrationStrategy,} from "@chromia/ft4";import { useEvmKeyStore, useFtAccounts, usePostchainClient,} from "@chromia/react";import { IClient } from "postchain-client";import { useAccount } from "wagmi";import { publicClientConfig as clientConfig } from "@/utils/generate-client-config";export const useChromiaAccount = ({ onAccountCreated,}: { onAccountCreated?: () => void;} = {}) => { const [isLoading, setIsLoading] = useState(false); const [tried, setTried] = useState(false); const { address: ethAddress } = useAccount(); const { data: client } = usePostchainClient({ config: clientConfig }); const { data: keyStore } = useEvmKeyStore(); const { mutate, data: ftAccounts } = useFtAccounts({ clientConfig }); const createAccount = useCallback(async () => { try { setIsLoading(true); if (!ethAddress || !keyStore || !client) return; const ad = createSingleSigAuthDescriptorRegistration( [AuthFlag.Account, AuthFlag.Transfer], keyStore.id, ); await registerAccount( client as IClient, keyStore, registrationStrategy.open(ad), ); await mutate(); onAccountCreated?.(); } catch (e) { console.error(e); } finally { setIsLoading(false); setTried(true); } }, [client, ethAddress, keyStore, mutate, onAccountCreated]); return { createAccount, isLoading, tried, account: ftAccounts?.[0], hasAccount: !!ftAccounts?.length, };};Written for this site from Chromia’s public course. Code samples are the course’s own.