Termine

Haunt3D

Dashboard crypto immersif avec une esthetique sombre et futuriste. Suivi en temps reel des portefeuilles Web3, visualisation avancee des tokens, NFTs et protocoles DeFi. Interface intuitive pensee pour les degens et les traders crypto.

Role Full-Stack / Web3

Type Crypto Dashboard

Annee 2024

Stack Next.js / Web3

Voir le site GitHub

♦

Next.js 14

Framework React

★

Ethers.js / Wagmi

Web3 Integration

▲

TradingView

Charts avances

●

Tailwind CSS

Styling

◆

Alchemy / Infura

RPC Providers

◼

WalletConnect

Auth Web3

Portfolio Tracking

Suivi en temps reel de la valeur du portefeuille avec historique de performance et PnL detaille.

Multi-Wallet

Connexion simultanée de plusieurs wallets (MetaMask, WalletConnect, Coinbase) avec vue agrégée.

NFT Gallery

Galerie NFT avec metadonnees, floor price et estimation de la valeur de la collection.

DeFi Tracker

Monitoring des positions DeFi : staking, lending, liquidity pools avec APY en temps reel.

Alertes & Notifications

Systeme d'alertes configurable sur les mouvements de prix, whale activity et gas tracker.

Multi-Chain

Support des principales blockchains : Ethereum, Polygon, BSC, Arbitrum, Optimism, Solana.

Research & UX

Benchmark des dashboards crypto existants (Zapper, DeBank, Zerion). Definition de l'UX avec focus sur la lisibilite et le dark mode immersif.

Architecture Web3

Integration des providers RPC, configuration de Wagmi/Ethers.js, gestion des connexions wallet et des appels multi-chain.

Data & Visualisation

Mise en place des flux de donnees en temps reel, graphiques TradingView, tables de tokens et portfolio analytics.

Deploy & Optimisation

Deploiement sur Vercel avec SSR, optimisation des requetes blockchain avec caching et rate limiting intelligent.

            
            
            
            hooks/usePortfolio.ts
          
import { useAccount, useBalance } from 'wagmi';
import { useQuery } from '@tanstack/react-query';
export function usePortfolio() {
  const { address, isConnected } = useAccount();
  const { data: balance } = useBalance({ address });
  const { data: tokens } = useQuery({
    queryKey: ['tokens', address],
    queryFn: () => fetchTokenBalances(address!),
    enabled: isConnected && !!address,
  });
  const totalValue = tokens?.reduce(
    (sum, t) => sum + t.balance * t.price, 0
  );
  return { balance, tokens, totalValue, isConnected };
}