Echo Account Component

The Echo Account component is a comprehensive user account management interface that provides everything you need for user authentication, balance display, and account management in your Echo applications.

Overview

The Echo Account component includes:

User authentication status - Shows login/logout functionality
Balance display - Real-time user balance with currency formatting
Top-up functionality - Easy way for users to add funds
User profile management - Avatar, name, and account details
Responsive design - Works on desktop and mobile devices

Installation

React Version

pnpm dlx shadcn@latest add https://echo-components.com/r/echo-account-react.json

Next.js Version

pnpm dlx shadcn@latest add https://echo-components.com/r/echo-account-next.json

Basic Usage

React

import { EchoAccount } from '@/components/echo-account-react';

export default function MyApp() {
  return (
    <div>
      <h1>My Echo App</h1>
      <EchoAccount />
    </div>
  );
}

Next.js

import { EchoAccount } from '@/components/echo-account-next';

export default function MyApp() {
  return (
    <div>
      <h1>My Echo App</h1>
      <EchoAccount />
    </div>
  );
}

Component Structure

The Echo Account component is composed of several sub-components:

EchoAccountButton

The main button that triggers the account popover:

import { EchoAccountButton } from '@/components/echo-account-button/echo-account';
import { useEcho } from '@merit-systems/echo-react-sdk';

// Usage with Echo context
const echo = useEcho();
return <EchoAccountButton echo={echo} />;

EchoPopover

The popover container that holds the account interface:

import { EchoPopover } from '@/components/echo-account-button/echo-popover';

Balance Component

Displays the user's current balance:

import { Balance } from '@/components/echo-account-button/balance';

TopUpButton

Handles adding funds to the user's account:

import { TopUpButton } from '@/components/echo-account-button/top-up-button';

Customization

Styling

You can customize the appearance using Tailwind classes:

<EchoAccount className="custom-account-styles" />

Custom Props

The component accepts various props for customization:

interface EchoAccountProps {
  className?: string;
  showBalance?: boolean;
  showTopUp?: boolean;
  variant?: 'default' | 'compact' | 'minimal';
}

Example with Custom Props

<EchoAccount 
  className="my-custom-styles"
  showBalance={true}
  showTopUp={true}
  variant="compact"
/>

Advanced Usage

Custom Account Button

You can create a custom account button with your own styling:

import { EchoAccountButton } from '@/components/echo-account-button/echo-account';
import { useEcho } from '@merit-systems/echo-react-sdk';

function CustomAccountButton() {
  const echo = useEcho();
  
  return (
    <EchoAccountButton 
      echo={echo}
      className="bg-custom-primary text-white rounded-lg px-4 py-2"
    />
  );
}

Standalone Components

You can use individual components for custom layouts:

import { Balance } from '@/components/echo-account-button/balance';
import { TopUpButton } from '@/components/echo-account-button/top-up-button';

function CustomAccountLayout() {
  return (
    <div className="flex items-center gap-4">
      <Balance />
      <TopUpButton />
    </div>
  );
}