Wallet Components

# ATTENTION : @yanipay/ui et @yanipay/sdk ne sont PAS publiés sur npm.
# Ces composants sont internes au projet YaniPay.
# Pour les utiliser, importez depuis les chemins internes :
#
# import { ConnectWallet, WalletManager } from '@/components/blockchain';
# import { WalletStatusBanner } from '@/components/dashboard/defi/WalletStatusBanner';
# import { useAccount, useYaniTokenBalance } from '@/lib/web3';

1
// NOTE : Pas de WalletProvider standalone depuis @yanipay/ui.
2
// Le provider Web3 est un import dynamique dans components/ClientLayout.tsx
3
// pour éviter les crashs @metamask/sdk sur les pages non-Web3.
4
//
5
// Règle de sécurité critique (voir .claude/rules/06-web3-safety.md) :
6
// - Web3Provider NE DOIT PAS être importé statiquement dans les layouts dashboard/admin/pro
7
// - Il ne charge que sur /blockchain et /defi via dynamic import
8
9
// Chemin réel : components/ClientLayout.tsx
10
import dynamic from 'next/dynamic';
11
12
// Import dynamique — Web3 ne se charge que sur les pages blockchain/defi
13
const Web3Provider = dynamic(
14
  () => import('@/components/blockchain/Web3Provider'),
15
  { ssr: false }
16
);
17
18
// Config wagmi utilisée dans lib/web3/config.ts
19
import { createConfig, http } from 'wagmi';
20
import { injected } from 'wagmi/connectors'; // PAS metaMask() — pas de @metamask/sdk
21
22
export const wagmiConfig = createConfig({
23
  chains: [/* YaniChain + Sepolia */],
24
  connectors: [
25
    injected(),      // MetaMask, Rabby, etc.
26
    // walletConnect() pour mobile (via WalletConnect v2)
27
  ],
28
  transports: {
29
    // ...
30
  },
31
});

1
// NOTE : Pas de WalletBalance standalone dans @yanipay/ui (inexistant).
2
// Les balances sont lues on-chain via les hooks wagmi/web3.
3
// Chemin réel : app/(dashboard)/dashboard/defi/wallets-externes/PageContent.tsx
4
5
'use client';
6
7
import { useAccount, useBalance, useYaniTokenBalance } from '@/lib/web3';
8
import { formatEther } from 'viem';
9
10
export function WalletBalanceDisplay() {
11
  const { address, isConnected } = useAccount();
12
13
  // Balance native (ETH/YANI natif)
14
  const { data: nativeBalance } = useBalance({ address });
15
16
  // Balance token YANI (ERC-20)
17
  const { data: yaniBalance, isLoading } = useYaniTokenBalance();
18
19
  if (!isConnected) {
20
    return <p className="text-gray-500">Connectez votre wallet pour voir vos balances</p>;
21
  }
22
23
  return (
24
    <div className="space-y-3">
25
      <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
26
        <span className="font-semibold">YANI</span>
27
        <span>{isLoading ? '...' : parseFloat(formatEther(yaniBalance ?? 0n)).toFixed(4)}</span>
28
      </div>
29
      <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
30
        <span className="font-semibold">{nativeBalance?.symbol ?? 'ETH'}</span>
31
        <span>{parseFloat(nativeBalance?.formatted ?? '0').toFixed(4)}</span>
32
      </div>
33
    </div>
34
  );
35
}
36
37
// Balances via API REST (wallets internes YaniPay)
38
// GET /api/wallets → liste des wallets + balances
39
// GET /api/defi/wallets → wallets DeFi externes liés
40
import { apiGet } from '@/lib/api/client';
41
42
async function loadWalletBalances() {
43
  return apiGet('/api/wallets');
44
}

1
// NOTE : Le composant réel est dans components/blockchain/ConnectWallet.tsx
2
// Il utilise wagmi (injected + WalletConnect), PAS @yanipay/ui.
3
4
// Chemin réel : components/blockchain/ConnectWallet.tsx
5
import { ConnectWallet } from '@/components/blockchain';
6
7
// Usage dans les pages DeFi (ex: wallets-externes)
8
export function WalletConnectionSection() {
9
  return (
10
    <div className="flex items-center gap-4">
11
      {/* Bouton de connexion wallet — supporte MetaMask, WalletConnect */}
12
      <ConnectWallet />
13
    </div>
14
  );
15
}
16
17
// WalletManager pour la gestion complète des wallets liés
18
import { WalletManager } from '@/components/blockchain';
19
20
export function WalletManagementPage() {
21
  return (
22
    <div>
23
      {/* Gestion des wallets externes associés au compte YaniPay */}
24
      {/* Composant : components/blockchain/WalletManager.tsx */}
25
      <WalletManager />
26
    </div>
27
  );
28
}
29
30
// Bouton compact pour le header du dashboard
31
import { DashboardWalletButton } from '@/components/blockchain';
32
33
export function DashboardHeader() {
34
  return (
35
    <header className="flex items-center justify-between p-4">
36
      <span>YaniPay</span>
37
      {/* Affiche l'adresse + avatar + menu déconnexion */}
38
      <DashboardWalletButton />
39
    </header>
40
  );
41
}

1
// NOTE : Pas de useWallet() dans @yanipay/ui (inexistant).
2
// La connexion wallet utilise wagmi v2 + les hooks custom de lib/web3.
3
4
// Imports réels dans la codebase YaniPay :
5
import {
6
  useAccount,         // adresse + isConnected
7
  useBalance,         // balance native (ETH/YANI natif)
8
  useYaniTokenBalance, // balance token YANI ERC-20
9
  useDisconnect,      // déconnexion
10
} from '@/lib/web3';
11
12
// useSignMessage et useSendTransaction viennent directement de wagmi
13
import { useSignMessage, useSendTransaction } from 'wagmi';
14
import { parseEther } from 'viem';
15
16
export function useWalletData() {
17
  const { address, isConnected } = useAccount();
18
  const { data: yaniBalance } = useYaniTokenBalance();
19
  const { data: nativeBalance } = useBalance({ address });
20
  const { disconnect } = useDisconnect();
21
22
  if (!isConnected) {
23
    return { status: 'disconnected' as const };
24
  }
25
26
  return {
27
    status: 'connected' as const,
28
    address,
29
    yaniBalance: yaniBalance ? parseFloat(yaniBalance.toString()) / 1e18 : 0,
30
    nativeBalance: nativeBalance?.formatted ?? '0',
31
    disconnect,
32
  };
33
}
34
35
// Signer un message (authentification)
36
export function useWalletAuth() {
37
  const { address } = useAccount();
38
  const { signMessageAsync } = useSignMessage();
39
40
  async function signLoginMessage() {
41
    const message = `Connexion YaniPay\nAdresse: ${address}\nTimestamp: ${Date.now()}`;
42
    const signature = await signMessageAsync({ message });
43
    return { message, signature };
44
  }
45
46
  return { signLoginMessage };
47
}
48
49
// Envoyer une transaction (ex: transfer YANI)
50
export function useWalletTransfer() {
51
  const { sendTransactionAsync } = useSendTransaction();
52
53
  async function sendNative(to: string, amountEth: string) {
54
    const hash = await sendTransactionAsync({
55
      to: to as `0x${string}`,
56
      value: parseEther(amountEth),
57
    });
58
    return hash;
59
  }
60
61
  return { sendNative };
62
}