Get a Smart Account Address

In this tutorial you will render your connected wallet's smart account address for Rollup A.

Prerequisites

Before using useSmartAccount, complete the Ethera SDK setup:

• Wrap your app with WagmiProvider, QueryClientProvider, and ComposeProvider.
• Create a compose config with createComposeConfig(...).
• Configure accountAbstractionContracts for the chain you are querying.

Display Smart Account Address

import { useSmartAccount } from '@ssv-labs/ethera-sdk/react';
import { rollupA, rollupB } from '@ssv-labs/ethera-sdk';
import { useAccount } from 'wagmi';

function SmartAccountDisplay() {
  const { isConnected } = useAccount();

  // multiChainIds is optional for single-chain usage.
  const smartAccountQuery = useSmartAccount({
    chainId: rollupA.id,
    multiChainIds: [rollupA.id, rollupB.id],
  });

  if (!isConnected) {
    return <div>Please connect your wallet</div>;
  }

  if (smartAccountQuery.isLoading) {
    return <div>Creating smart account...</div>;
  }

  if (smartAccountQuery.isError) {
    const errorMessage =
      smartAccountQuery.error instanceof Error
        ? smartAccountQuery.error.message
        : 'Could not load smart account';

    return <div>Failed to create smart account: {errorMessage}</div>;
  }

  // Address is available at smartAccountQuery.data?.account?.address (not data?.address).
  const smartAccountAddress = smartAccountQuery.data?.account?.address;

  return (
    <div>
      <h2>Your Smart Account</h2>
      <p>Address: {smartAccountAddress}</p>
    </div>
  );
}