Basic Smart Account Usage

Display a smart account address and connection status.

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

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

  // The hook returns a query object - access .data and .isLoading from it
  // Note: multiChainIds is required for cross-chain functionality
  const smartAccountQuery = useSmartAccount({
    chainId: rollupA.id,
    multiChainIds: [rollupA.id, rollupB.id],
  });

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

  // Access isLoading from the query object
  if (smartAccountQuery.isLoading) {
    return <div>Creating smart account...</div>;
  }

  // Access the account address via data?.account.address
  // The structure is: query.data.account.address (not query.data.address)
  const smartAccountAddress = smartAccountQuery.data?.account?.address;

  return (
    <div>
      <h2>Your Smart Account</h2>
      {smartAccountAddress ? (
        <p>Address: {smartAccountAddress}</p>
      ) : (
        <p>No smart account found</p>
      )}
    </div>
  );
}