Chromia
Start Building

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.

asset_management/src/hooks/chromia-hooks.ts
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.