Multi-Chain Smart Account Display

In this tutorial you will display your connected smart account address on Rollup A and Rollup B to confirm both addresses match.

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 chains you are querying.

Display Multi-Chain Smart Account Addresses

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

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

  // multiChainIds keeps both chain queries on the same multi-chain smart account context.
  const smartAccountAQuery = useSmartAccount({
    chainId: rollupA.id,
    multiChainIds: [rollupA.id, rollupB.id]
  });

  const smartAccountBQuery = useSmartAccount({
    chainId: rollupB.id,
    multiChainIds: [rollupA.id, rollupB.id]
  });

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

  if (smartAccountAQuery.isLoading || smartAccountBQuery.isLoading) {
    return <div>Loading smart accounts...</div>;
  }

  const addressA = smartAccountAQuery.data?.account?.address;
  const addressB = smartAccountBQuery.data?.account?.address;

  // With shared multiChainIds, both addresses are expected to match.
  const addressesMatch = addressA === addressB && addressA !== undefined;

  return (
    <div>
      <h2>Multi-Chain Smart Account</h2>
      <p>Chain A Address: {addressA || 'Not available'}</p>
      <p>Chain B Address: {addressB || 'Not available'}</p>
      <p>Addresses match: {addressesMatch ? '✅ Yes' : '❌ No'}</p>
    </div>
  );
}