Dashboard Overview

The Yeld dashboard is your central hub for managing your business and payments.

**Main Layout Components:**

```tsx
// DashboardPage component structure
<div className="grid gap-10 lg:grid-cols-2">
  {/* Left Column - Primary Actions */}
  <div className="flex min-h-[60vh] flex-col justify-center gap-10 px-6">
    {/* Balance Display */}
    <BalanceCard />
    
    {/* Action Buttons */}
    <div className="flex flex-wrap items-center gap-4">
      <Button onClick={createCheckoutLink}>Accept</Button>
      <SendReceiveDialogs />
    </div>
    
    {/* Holdings Panel */}
    <HoldingsPanel walletAddress={wallet.address} />
  </div>
  
  {/* Right Column - Activity & Details */}
  <div className="hidden min-h-[60vh] flex-col gap-6 md:flex">
    {/* Activity Feed */}
    <ActivityPanel />
    
    {/* Deposit Address */}
    <WalletInfoPanel wallet={wallet} />
  </div>
</div>
```

The balance card shows your available balance across all connected wallets.

**Features:**
- **Total Balance**: USD equivalent of all holdings
- **Network Selector**: Switch between Base, Ethereum, etc.
- **Token Breakdown**: View individual token balances

**Balance Calculation:**
```typescript
// Using the price utility
import { getRealtimePrices, usdForSymbol } from "@/lib/prices";

const prices = await getRealtimePrices();

const totalBalance = holdings.reduce((sum, holding) => {
  const usdValue = usdForSymbol({
    symbol: holding.symbol,
    balance: holding.balance,
    prices,
  });
  return sum + (usdValue || 0);
}, 0);
```

View your token holdings across different networks.

**Supported Holdings:**
- Native ETH (on each chain)
- USDC stablecoin
- Other supported tokens

**Holdings Data Structure:**
```typescript
type HoldingsToken = {
  symbol: string;
  name: string;
  decimals: number;
  address: `0x${string}` | "native";
  usdStable?: boolean;
};

type HoldingsNetwork = {
  key: string;
  name: string;
  icon: HoldingsNetworkIcon;
  testnet?: boolean;
  tokens: HoldingsToken[];
};
```

**Networks Supported:**
- Base (mainnet & Sepolia)
- Ethereum (mainnet & Sepolia)
- Arbitrum (mainnet & Sepolia)
- Optimism (Sepolia)
- Robinhood Chain (mainnet & testnet)

Track all transactions in real-time.

**Transaction Types:**
- **Incoming**: Payments received from customers
- **Outgoing**: Payments sent to vendors or withdrawals

**Transaction Data:**
```typescript
type Transaction = {
  id: string;
  type: "incoming" | "outgoing";
  amount: number;
  currency: string;
  status: "pending" | "confirmed" | "failed";
  txHash?: string;
  createdAt: Date;
  network: string;
};
```

**Status Indicators:**
- Pending: Awaiting blockchain confirmation
- Verifying: Being processed by the system
- Confirmed: Successfully completed
- Failed: Transaction failed

Manage your business wallet addresses.

**Deposit Address:**
- Each business has a unique deposit address
- Address is derived from your master mnemonic
- Same address across all transactions (for simplicity)

**Derivation:**
```typescript
import { deriveBusinessAddress, derivationPath } from "@/lib/evm";

// Derive address for business index
function getBusinessAddress(index: number) {
  return deriveBusinessAddress(index);
}

// Derivation path: m/44'/60'/0'/0/${index}
function getPath(index: number) {
  return derivationPath(index);
}
```

**Wallet Info Display:**
- Full address with copy button
- Network indicator (Base Sepolia, etc.)
- Explorer link for transaction history