Configuration
Customize the YaniPay SDK and UI components for your application.
Pourquoi Configurer
La configuration du SDK YaniPay est essentielle pour adapter la plateforme à vos besoins spécifiques. Une bonne configuration garantit la sécurité, optimise les performances, et permet une personnalisationcomplète de l'expérience utilisateur.
Que vous développiez une application DeFi complexe ou une simple intégration de paiement, YaniPay offre des options de configuration flexibles pour s'adapter à tous les cas d'usage - du prototype rapide au déploiement enterprise-grade.
Configuration as Code
Cas d'Utilisation
Configure le SDK YaniPay pour une application multi-tenant avec différentes clés API par environnement.
✓ Déploiement simplifié grâce à la configuration centralisée par environnement
Met en place les paramètres de sécurité et de rate limiting pour le passage en production.
✓ Application sécurisée avec 99.9% uptime et protection contre les abus
Personnalise le thème du SDK pour matcher l'identité visuelle du client partenaire.
✓ Intégration white-label réussie en moins d'une journée
Configure les paramètres de vérification de signature et les contrats autorisés.
✓ Zero incident de phishing grâce au filtrage des contrats
Architecture de Configuration
La configuration YaniPay suit une architecture en couches qui permet une grande flexibilité tout en maintenant la cohérence :
Override par Environnement
SDK Configuration
The SDK can be configured during initialization with various options:
1 import { apiGet, apiPost } from '@/lib/api/client'; 2 import { getCurrentUser } from '@/lib/auth'; 3 4 // Configuration réseau YaniChain 5 export const YANIPAY_CONFIG = { 6 // Network selection 7 network: process.env.NEXT_PUBLIC_YANIPAY_NETWORK ?? 'mainnet', 8 9 // Custom RPC endpoint 10 rpcUrl: process.env.NEXT_PUBLIC_YANICHAIN_RPC_URL ?? 'https://rpc.yanichain.com', 11 12 // Request timeout in milliseconds 13 timeout: 30000, 14 15 // Retry configuration 16 retry: { 17 maxRetries: 3, 18 retryDelay: 1000, 19 retryOn: [429, 500, 502, 503, 504], 20 }, 21 22 // Logging configuration 23 logging: { 24 level: process.env.NODE_ENV === 'development' ? 'debug' : 'info', 25 prefix: '[YaniPay]', 26 }, 27 28 // Cache configuration 29 cache: { 30 enabled: true, 31 ttl: 60000, // Cache TTL in milliseconds 32 maxSize: 100, // Maximum cache entries 33 }, 34 } as const; 35 36 // Exemple d'appel API typé 37 export async function getWalletBalance(address: string) { 38 return apiGet<{ balance: string; symbol: string }>(`/api/blockchain/balance/${address}`); 39 }
Provider Configuration
The React provider accepts additional configuration for UI components:
1 'use client'; 2 3 import { SessionProvider } from 'next-auth/react'; 4 import { CartProvider } from '@/components/CartProvider'; 5 6 // Configuration WalletConnect (chargé dynamiquement sur /blockchain et /defi) 7 // Voir components/ClientLayout.tsx pour le chargement conditionnel du Web3Provider 8 const walletConfig = { 9 // Supported connectors — wagmi injected() uniquement (pas @metamask/sdk) 10 connectors: ['injected', 'walletconnect'], 11 12 // Auto-connect on page load 13 autoConnect: true, 14 15 // WalletConnect configuration 16 walletConnect: { 17 projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!, 18 }, 19 } as const; 20 21 export function Providers({ children }: { children: React.ReactNode }) { 22 return ( 23 <SessionProvider> 24 <CartProvider> 25 {children} 26 </CartProvider> 27 </SessionProvider> 28 ); 29 }
Theming
Customize the appearance of YaniPay UI components:
1 /* Design System YaniPay — Tokens de couleur */ 2 :root { 3 /* Palette principale */ 4 --color-primary: #FDB62E; /* Orange YaniPay */ 5 --color-secondary: #748BC5; /* Bleu YaniPay */ 6 --color-accent-rose: #F16878; /* Rose YaniPay */ 7 --color-accent-green: #50C878; /* Vert YaniPay */ 8 9 /* Backgrounds Dark */ 10 --bg-page: #070707; 11 --bg-nav: #121B24; 12 --bg-card: #0D0F18; 13 --bg-featured: #010A12; 14 15 /* Backgrounds Light */ 16 --bg-page-light: #FFFFFF; 17 --bg-card-light: #F2F2F2; 18 --bg-section-light: #EEEEEE; 19 20 /* Typography */ 21 --font-sans: 'Noto Sans', 'Inter', system-ui, sans-serif; 22 --font-heading: 'Rubik', sans-serif; 23 24 /* Border radius (Shadcn tokens) */ 25 --radius: 0.5rem; 26 } 27 28 /* Tailwind CSS v4 — classes utilitaires critiques */ 29 .card-padding { padding: 2rem; } /* p-8 */ 30 .section-padding { padding: 4rem 0; } /* py-16 */
Dark Mode
Built-in dark theme support
CSS Variables
Full CSS customization
Tailwind Ready
Works with Tailwind CSS
Network Configuration
Configure network-specific settings:
1 // Configuration des réseaux YaniChain — pas de dépendance externe 2 export interface NetworkConfig { 3 chainId: number; 4 name: string; 5 rpcUrl: string; 6 explorerUrl: string; 7 nativeCurrency: { name: string; symbol: string; decimals: number }; 8 contracts?: Record<string, string>; 9 faucetUrl?: string; 10 } 11 12 export const networks: Record<string, NetworkConfig> = { 13 mainnet: { 14 chainId: 1, 15 name: 'YaniChain Mainnet', 16 rpcUrl: 'https://rpc.yanichain.com', 17 explorerUrl: 'https://explorer.yanichain.com', 18 nativeCurrency: { 19 name: 'YANICoin', 20 symbol: 'YANI', 21 decimals: 18, 22 }, 23 contracts: { 24 router: '0x1234567890abcdef1234567890abcdef12345678', 25 factory: '0xabcdef1234567890abcdef1234567890abcdef12', 26 staking: '0x5678901234abcdef5678901234abcdef56789012', 27 governance: '0x9012345678abcdef9012345678abcdef90123456', 28 }, 29 }, 30 testnet: { 31 chainId: 1001, 32 name: 'YaniChain Testnet', 33 rpcUrl: 'https://testnet-rpc.yanichain.com', 34 explorerUrl: 'https://testnet-explorer.yanichain.com', 35 nativeCurrency: { 36 name: 'Test YANI', 37 symbol: 'tYANI', 38 decimals: 18, 39 }, 40 faucetUrl: 'https://faucet.yanichain.com', 41 }, 42 }; 43 44 // Dynamic network selection 45 export function getNetwork(env: string): NetworkConfig { 46 return networks[env] || networks.testnet; 47 }
Security Settings
Configuration Production Obligatoire
Configure security features for production:
1 // Configuration sécurité YaniPay — lib/rate-limit.ts + middleware 2 import { apiRateLimit, authRateLimit, strictRateLimit } from '@/lib/rate-limit'; 3 import { getCurrentUser } from '@/lib/auth'; 4 5 // Paramètres de sécurité centralisés 6 export const SECURITY_CONFIG = { 7 // Vérification de signature HMAC-SHA256 (webhooks Onfido) 8 verifySignatures: true, 9 10 // Valeur maximale sans confirmation supplémentaire (en YANI) 11 maxAutoApproveValue: 100, 12 13 // Seuil pour confirmation haute valeur 14 highValueThreshold: 1000, 15 16 // Adresses de contrats autorisées (anti-phishing) 17 allowedContracts: [ 18 '0x1234567890abcdef1234567890abcdef12345678', // YaniPaymentRouter 19 '0xabcdef1234567890abcdef1234567890abcdef12', // YANICoin ERC-20 20 ], 21 22 // Session timeout (millisecondes) 23 sessionTimeout: 30 * 60 * 1000, // 30 minutes 24 } as const; 25 26 // Rate limiters appliqués par route (voir .claude/rules/11-security.md) 27 // - Auth routes : authRateLimit (5 req / 15 min) 28 // - Register/KYC/phone : strictRateLimit (10 req / min) 29 // - Payment/API : apiRateLimit (100 req / 15 min) 30 export { apiRateLimit, authRateLimit, strictRateLimit };
Performance Optimization
1 // Optimisation de performance — Next.js 16 + React 19 patterns 2 import dynamic from 'next/dynamic'; 3 import { apiGet } from '@/lib/api/client'; 4 5 // Paramètres de performance 6 export const PERFORMANCE_CONFIG = { 7 // Batching des requêtes (implémenté dans lib/api/client.ts) 8 batchRequests: true, 9 batchInterval: 50, // ms 10 11 // WebSocket pour les mises à jour en temps réel (YaniChain events) 12 useWebSocket: true, 13 wsReconnectInterval: 5000, 14 15 // Prefetch des données fréquentes 16 prefetch: ['prices', 'pairs'], 17 18 // Lazy load pour les features non-critiques 19 lazyLoad: { 20 governance: true, 21 farming: true, 22 }, 23 24 // Gestion mémoire 25 maxCacheSize: 50 * 1024 * 1024, // 50 Mo 26 gcInterval: 300000, // 5 minutes 27 } as const; 28 29 // Chargement dynamique (code splitting Next.js) 30 // IMPORTANT: Web3Provider uniquement sur /blockchain et /defi 31 export const BlockchainPanel = dynamic( 32 () => import('@/components/blockchain/BlockchainAdminClient'), 33 { loading: () => null, ssr: false } 34 );
TypeScript Configuration
Ensure proper TypeScript support:
{
"compilerOptions": {
"target": "ES2022",
"lib": ["dom", "dom.iterable", "ES2022"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [{ "name": "next" }],
"paths": {
"@/*": ["./*"],
"@platform/*": ["./apps/platform/*"],
"@agents/*": ["./agents/src/*"],
"@claude/*": ["./.claude/*"]
}
},
"exclude": [
"node_modules",
"blockchain",
"mobile"
]
}Références
Documentation officielle et best practices pour la configuration :
Configuration Validée
Next.js Environment Variables
Gestion sécurisée des clés
OWASP Security Guide
Best practices sécurité
TypeScript TSConfig
Configuration TypeScript
WalletConnect Docs
Intégration wallets
Related Resources
Last updated: 2026-04-01