Frontend Architecture

Technical overview of SonicClout's frontend architecture with Sonic integration

SonicClout's frontend is built with modern web technologies, focusing on performance, user experience, and seamless integration with the Sonic blockchain. This documentation outlines the technical architecture, key components, and design patterns used in the application.

Technology Stack

The SonicClout frontend uses:

Next.js 14 - React framework with app router for routing and server components
TypeScript - For type safety and better developer experience
TailwindCSS - For styling and responsive design
React Context API - For state management
Sonic SDK - For Sonic blockchain interaction
Solana Web3.js - For base Solana compatibility
Wallet Adapter - Modified for Sonic wallet connections
ShadcnUI - For UI components with a custom theme

Application Structure

app/
├── components/    # Reusable UI components
├── context/       # Context providers for state management
├── app/           # Pages and routes (Next.js app router)
├── lib/           # Utilities and services
│   ├── services/  # Blockchain service integrations
│   ├── hooks/     # Custom React hooks
│   └── utils/     # Helper functions
└── public/        # Static assets

Key Components

App Router Structure

SonicClout uses Next.js App Router, organizing routes as folders:

app/
├── page.tsx              # Home page
├── layout.tsx            # Root layout with common elements
├── profile/              # User profile pages
│   └── page.tsx
├── trading/              # Trading interface
│   └── page.tsx
├── vesting/              # Vesting management
│   └── page.tsx
└── bonds/                # Bonds marketplace
    └── page.tsx

Context Providers

The app uses React Context API for state management:

Global Context

// context/GlobalContext.tsx
export interface GlobalContextType {
  isDarkMode: boolean;
  toggleDarkMode: () => void;
  isMobileMenuOpen: boolean;
  setMobileMenuOpen: (isOpen: boolean) => void;
}

Network Context

// context/NetworkContext.tsx
export interface NetworkContextType {
  network: 'sonic-mainnet' | 'sonic-devnet' | 'solana-mainnet' | 'solana-devnet';
  setNetwork: (network: 'sonic-mainnet' | 'sonic-devnet' | 'solana-mainnet' | 'solana-devnet') => void;
}

SEGA Context

// context/SEGAContext.tsx
export interface SEGAContextType {
  pools: Pool[];
  userLiquidity: UserLiquidity[];
  tokenList: Token[];
  fetchPools: () => Promise<void>;
  fetchUserLiquidity: () => Promise<void>;
  addLiquidity: (poolId: string, amountA: number, amountB: number) => Promise<boolean>;
  removeLiquidity: (poolId: string, percentage: number) => Promise<boolean>;
  createPool: (tokenA: string, tokenB: string, fee: number) => Promise<boolean>;
  swap: (tokenIn: string, tokenOut: string, amountIn: string, slippage: number) => Promise<boolean>;
  getSwapQuote: (tokenIn: string, tokenOut: string, amountIn: string, slippage: number) => Promise<SwapResponse | null>;
}

Sonic Vesting Context

// context/SonicVestingContext.tsx
export interface SonicVestingContextType {
  // State
  vestingSchedules: VestingSchedule[];
  selectedVestingId: number | null;
  
  // Actions
  initialize: () => Promise<void>;
  createVestingSchedule: (params: VestingParams) => Promise<number>;
  checkVestingMilestones: (vestingId: number) => Promise<boolean>;
  withdrawVestedTokens: (vestingId: number) => Promise<string>;
  fetchVestingSchedules: () => Promise<void>;
}

UI Components

SonicClout's UI is built with reusable components:

Navbar.tsx - Main navigation bar
MobileMenu.tsx - Responsive menu for mobile devices
SideNav.tsx - Side navigation for dashboard views

Wallet Integration

WalletConnectButton.tsx - Button for connecting Sonic-compatible wallets
WalletModal.tsx - Modal for selecting wallet providers
WalletDetails.tsx - Component displaying wallet info
NetworkSelector.tsx - Switch between Sonic and Solana networks

Trading Interface

TradingView.tsx - Main trading interface
OrderBook.tsx - Displays buy/sell orders
SwapInterface.tsx - Interface for token swaps
PoolsList.tsx - Lists available liquidity pools

Content Components

ContentCard.tsx - Displays tokenized content
CreatorProfile.tsx - Shows creator information
ContentFeed.tsx - Feed of tokenized content

State Management

SonicClout uses a hybrid state management approach:

React Context API - For global state and blockchain interactions
React Query - For data fetching, caching, and synchronization
Local Component State - For UI-specific state
URL State - For shareable and persistent UI state

Blockchain Integration

Wallet Connection

Wallet connection is handled through a modified Solana Wallet Adapter for Sonic:

// app/Providers.tsx
export function Providers({ children }: { children: ReactNode }) {
  const wallets = useMemo(
    () => [
      new BackpackWalletAdapter(),
      new OKXWalletAdapter(),
      new NightlyWalletAdapter(),
      new BytbitWalletAdapter(),
      // Legacy Solana wallets with limited Sonic support
      new PhantomWalletAdapter(),
      new SolflareWalletAdapter(),
    ],
    []
  );

  return (
    <WalletProvider wallets={wallets} autoConnect>
      <ConnectionProvider endpoint={getSonicEndpoint()}>
        {/* Other providers */}
        {children}
      </ConnectionProvider>
    </WalletProvider>
  );
}

// Helper function to get appropriate endpoint
function getSonicEndpoint() {
  const network = localStorage.getItem('network') || 'sonic-mainnet';
  
  const endpoints = {
    'sonic-mainnet': 'https://mainnet.sonic.game/rpc',
    'sonic-devnet': 'https://devnet.sonic.game/rpc',
    'solana-mainnet': 'https://api.mainnet-beta.solana.com',
    'solana-devnet': 'https://api.devnet.solana.com',
  };
  
  return endpoints[network];
}

Service Layer

The app uses service classes to interact with smart contracts on Sonic:

// app/lib/services/sonicVestingService.ts
export async function createVesting(
  connection: Connection,
  wallet: WalletContextState,
  params: VestingParams
): Promise<number> {
  // Implementation for Sonic chain
}

// app/lib/services/tokenFactoryService.ts
export async function createToken(
  connection: Connection,
  wallet: WalletContextState,
  params: TokenParams
): Promise<string> {
  // Implementation for Sonic chain
}

Styling and Theming

SonicClout uses TailwindCSS with a custom theme:

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
    
    --primary: 266 73% 64%;
    --primary-foreground: 0 0% 100%;
    
    /* Additional theme variables */
  }
}

UI Components Library

The application uses ShadcnUI components with customizations:

// components/ui/button.tsx
const Button = React.forwardRef<
  HTMLButtonElement,
  React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
>(({ className, variant, size, ...props }, ref) => {
  return (
    <button
      className={cn(buttonVariants({ variant, size, className }))}
      ref={ref}
      {...props}
    />
  );
});

Sonic-Specific Integrations

Sonic SDK Integration

The application integrates with Sonic's SDK for blockchain interaction:

// lib/sonic.ts
import { SonicConnection } from '@sonic-game/web3.js';
import { createSonicTransaction } from '@sonic-game/transactions';

export function initializeSonicConnection(endpoint: string): SonicConnection {
  return new SonicConnection(endpoint, {
    commitment: 'confirmed',
    confirmTransactionInitialTimeout: 60000,
  });
}

export async function executeSonicTransaction(
  connection: SonicConnection,
  transaction: Transaction,
  signers: Keypair[]
): Promise<string> {
  const sonicTx = await createSonicTransaction(transaction);
  // Process on Sonic chain...
}

Metaplex Integration

For NFT functionality on Sonic:

// lib/metaplex.ts
import { Metaplex } from '@metaplex-foundation/js';
import { sonicCluster } from '@sonic-game/web3.js';

export function createMetaplex(connection: Connection, wallet: Wallet): Metaplex {
  return Metaplex.make(connection)
    .use(walletAdapterIdentity(wallet))
    .use(sonicCluster());
}

Performance Optimizations

SonicClout implements several performance optimizations:

Code Splitting - Using Next.js dynamic imports
Image Optimization - Using Next.js Image component
Server Components - For improved initial load time
Memoization - Using React.memo and useMemo for expensive calculations
Virtualization - For long lists using react-window
Sonic RPC Optimizations - Leveraging Sonic's high-throughput infrastructure

Responsive Design

The application is fully responsive, implementing:

Mobile-first approach - Base styles for mobile, then expand
Breakpoint-based layouts - Using Tailwind's responsive modifiers
Adaptive UI - Different interfaces for different screen sizes
Touch-friendly controls - Larger tap targets on mobile

Development Workflow

Getting Started

# Clone the repository
git clone https://github.com/sonicclout/frontend.git
cd frontend

# Install dependencies
yarn install

# Start development server
yarn dev

Environment Setup

Create a .env.local file with:

NEXT_PUBLIC_SONIC_RPC_ENDPOINT=https://mainnet.sonic.game/rpc
NEXT_PUBLIC_DEFAULT_NETWORK=sonic-mainnet

Testing Strategy

SonicClout employs several testing strategies:

Unit Tests - Using Jest for utility functions
Component Tests - Using React Testing Library
Integration Tests - For complex component interactions
End-to-End Tests - Using Cypress for critical user flows
Sonic-specific Tests - Ensure compatibility with Sonic chain

Deployment

The SonicClout frontend is deployed using Vercel:

Preview Deployments - For pull requests
Staging Environment - For pre-production testing
Production Environment - For the live site

Next Steps

Review the API reference for all available endpoints
Learn about smart contracts powering the platform
Explore content tokenization from a user perspective

PreviousSmart Contracts NextAPI Reference

Last updated 3 months ago