Multi-Chain Smart Account Display

Display smart account addresses across multiple chains to verify they match.

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

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

  // Create smart account for chain A with multi-chain support
  const smartAccountAQuery = useSmartAccount({
    chainId: rollupA.id,
    multiChainIds: [rollupA.id, rollupB.id]
  });

  // Create smart account for chain B with multi-chain support
  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;

  // Both accounts will have the same address
  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>
  );
}