React Components

Component Library

Bibliothèque de composants React prêts à l'emploi pour construire des interfaces DeFi modernes et accessibles.

Overview

La bibliothèque de composants YaniPay fournit des éléments UI réutilisables conçus spécifiquement pour les applications DeFi et fintech. Tous les composants suivent les principes du Design System YaniPay.

30+ Components

Wallet, Staking, Swap, et composants UI de base

Glassmorphism

Design moderne avec blur et transparence

Composable

Construisez des interfaces complexes facilement

Installation

Ajouter des composants Shadcnbash

# Ajouter des composants Shadcn UI (méthode recommandée)
pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add card
pnpm dlx shadcn@latest add input
pnpm dlx shadcn@latest add dialog

# Les composants sont installés dans components/ui/
# Ne PAS modifier les fichiers dans components/ui/

Setup Provider

Enveloppez votre application avec le provider pour activer le theming :

app/layout.tsxtsx

import { SessionProvider } from 'next-auth/react';
import { CartProvider } from '@/components/CartProvider';
import { Toaster } from '@/components/ui/sonner';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        <SessionProvider>
          <CartProvider>
            {children}
            <Toaster />
          </CartProvider>
        </SessionProvider>
      </body>
    </html>
  );
}

Component Categories

Les composants sont organisés en catégories fonctionnelles :

Wallet Components

Connect wallet, balances, transaction history, and address display

WalletConnectWalletBalanceAddressDisplayTransactionList

Staking Components

Stake, unstake, rewards display, and validator selection

StakingCardValidatorListRewardsDisplayStakeForm

Swap Components

Token swap interface, price display, and liquidity info

SwapCardTokenSelectPriceImpactSlippageSettings

Theming

Les composants supportent le theming via CSS variables et le Design System YaniPay :

Custom Themecss

:root {
  /* Primary colors */
  --yp-primary: theme('colors.emerald.500');
  --yp-primary-hover: theme('colors.emerald.600');

  /* Surfaces */
  --yp-surface: rgba(15, 23, 42, 0.8);
  --yp-surface-hover: rgba(15, 23, 42, 0.9);

  /* Borders */
  --yp-border: rgba(255, 255, 255, 0.1);
  --yp-border-hover: rgba(255, 255, 255, 0.2);

  /* Text */
  --yp-text-primary: rgba(255, 255, 255, 1);
  --yp-text-secondary: rgba(255, 255, 255, 0.6);

  /* Gradients */
  --yp-gradient-primary: linear-gradient(to right, var(--yp-primary), theme('colors.cyan.500'));
}

Component Examples

Voici quelques composants UI de base utilisés dans la plateforme :

Glass Surface Content

GlassSurface

Glassmorphism container with blur and transparency

GradientButton

Primary action button with emerald-cyan gradient

ActivePendingError

Badge

Status and category indicators

Total Balance

$12,450.00

+5.2% this week

StatCard

Display key metrics with icons and trends

Usage Example

Exemple DeFi Dashboardtsx

'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
// Composants blockchain chargés dynamiquement (uniquement sur /blockchain et /defi)
import dynamic from 'next/dynamic';

const BlockchainStats = dynamic(
  () => import('@/components/blockchain/BlockchainAdminClient').then(m => m.LiveStatsPanel),
  { ssr: false, loading: () => <p className="text-white/60">Chargement...</p> }
);

export default function DeFiDashboard() {
  return (
    <div className="rounded-2xl border border-white/10 bg-slate-900/80 p-6 backdrop-blur-xl">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold text-white">DeFi Dashboard</h1>
        <Badge variant="outline" className="border-emerald-500/50 text-emerald-400">
          YaniChain Mainnet
        </Badge>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="border-white/10 bg-white/5">
          <CardHeader>
            <CardTitle className="text-sm text-white/60">Wallet Balance</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold text-white">1 250.00 YANI</p>
            <p className="text-xs text-emerald-400 mt-1">+5.2% cette semaine</p>
          </CardContent>
        </Card>

        <BlockchainStats />
      </div>

      <div className="mt-6 flex justify-end">
        <Button className="bg-gradient-to-r from-emerald-500 to-cyan-500 text-white">
          Voir les positions
        </Button>
      </div>
    </div>
  );
}

Next Steps

Wallet Components

Connexion wallet et affichage des soldes

Design System

Tokens de design et guidelines

Last updated: 2026-04-01

React Components

Component Library

Bibliothèque de composants React prêts à l'emploi pour construire des interfaces DeFi modernes et accessibles.

Design System View on GitHub

Overview

30+ Components

Wallet, Staking, Swap, et composants UI de base

Glassmorphism

Design moderne avec blur et transparence

Composable

Construisez des interfaces complexes facilement

Installation

Ajouter des composants Shadcnbash

# Ajouter des composants Shadcn UI (méthode recommandée)
pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add card
pnpm dlx shadcn@latest add input
pnpm dlx shadcn@latest add dialog

# Les composants sont installés dans components/ui/
# Ne PAS modifier les fichiers dans components/ui/

Setup Provider

Enveloppez votre application avec le provider pour activer le theming :

app/layout.tsxtsx

import { SessionProvider } from 'next-auth/react';
import { CartProvider } from '@/components/CartProvider';
import { Toaster } from '@/components/ui/sonner';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        <SessionProvider>
          <CartProvider>
            {children}
            <Toaster />
          </CartProvider>
        </SessionProvider>
      </body>
    </html>
  );
}

Component Categories

Les composants sont organisés en catégories fonctionnelles :

Wallet Components

Connect wallet, balances, transaction history, and address display

WalletConnectWalletBalanceAddressDisplayTransactionList

Staking Components

Stake, unstake, rewards display, and validator selection

StakingCardValidatorListRewardsDisplayStakeForm

Swap Components

Token swap interface, price display, and liquidity info

SwapCardTokenSelectPriceImpactSlippageSettings

Theming

Les composants supportent le theming via CSS variables et le Design System YaniPay :

Custom Themecss

:root {
  /* Primary colors */
  --yp-primary: theme('colors.emerald.500');
  --yp-primary-hover: theme('colors.emerald.600');

  /* Surfaces */
  --yp-surface: rgba(15, 23, 42, 0.8);
  --yp-surface-hover: rgba(15, 23, 42, 0.9);

  /* Borders */
  --yp-border: rgba(255, 255, 255, 0.1);
  --yp-border-hover: rgba(255, 255, 255, 0.2);

  /* Text */
  --yp-text-primary: rgba(255, 255, 255, 1);
  --yp-text-secondary: rgba(255, 255, 255, 0.6);

  /* Gradients */
  --yp-gradient-primary: linear-gradient(to right, var(--yp-primary), theme('colors.cyan.500'));
}

Component Examples

Voici quelques composants UI de base utilisés dans la plateforme :

Glass Surface Content

GlassSurface

Glassmorphism container with blur and transparency

GradientButton

Primary action button with emerald-cyan gradient

ActivePendingError

Badge

Status and category indicators

Total Balance

$12,450.00

+5.2% this week

StatCard

Display key metrics with icons and trends

Usage Example

Exemple DeFi Dashboardtsx

'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
// Composants blockchain chargés dynamiquement (uniquement sur /blockchain et /defi)
import dynamic from 'next/dynamic';

const BlockchainStats = dynamic(
  () => import('@/components/blockchain/BlockchainAdminClient').then(m => m.LiveStatsPanel),
  { ssr: false, loading: () => <p className="text-white/60">Chargement...</p> }
);

export default function DeFiDashboard() {
  return (
    <div className="rounded-2xl border border-white/10 bg-slate-900/80 p-6 backdrop-blur-xl">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold text-white">DeFi Dashboard</h1>
        <Badge variant="outline" className="border-emerald-500/50 text-emerald-400">
          YaniChain Mainnet
        </Badge>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="border-white/10 bg-white/5">
          <CardHeader>
            <CardTitle className="text-sm text-white/60">Wallet Balance</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold text-white">1 250.00 YANI</p>
            <p className="text-xs text-emerald-400 mt-1">+5.2% cette semaine</p>
          </CardContent>
        </Card>

        <BlockchainStats />
      </div>

      <div className="mt-6 flex justify-end">
        <Button className="bg-gradient-to-r from-emerald-500 to-cyan-500 text-white">
          Voir les positions
        </Button>
      </div>
    </div>
  );
}

Next Steps

Wallet Components

Connexion wallet et affichage des soldes

Design System

Tokens de design et guidelines

Last updated: 2026-04-01