Front-End Integration

OmniSocial’s frontend stack is designed to be developer-friendly, modular, and easy to integrate into external applications or extend with new features.

Whether you're building a social experience, DAO dashboard, or custom interaction layer, this guide will walk you through the essential tools and patterns.

🛠️ Tech Stack Overview

• Framework: Next.js 14 (App Router)

• Styling: Tailwind CSS (with shadcn/ui components)

• Wallet Integration: wagmi + viem + @rainbow-me/rainbowkit

• Contracts: Ethers-compatible, deployed on Polygon zkEVM

• i18n: next-i18next for localization support

• State: Zustand for global app state

• Animations: Framer Motion

🔗 Connecting Wallets

We use wagmi with RainbowKit to allow seamless wallet connection and transaction signing.

import { useAccount, useConnect, useDisconnect } from 'wagmi';

const WalletStatus = () => {
  const { address, isConnected } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();

  return (
    <div>
      {isConnected ? (
        <>
          <p>Connected: {address}</p>
          <button onClick={() => disconnect()}>Disconnect</button>
        </>
      ) : (
        connectors.map((connector) => (
          <button key={connector.id} onClick={() => connect({ connector })}>
            Connect {connector.name}
          </button>
        ))
      )}
    </div>
  );
};

🧩 Provided Components & Hooks

OmniSocial exports several reusable components and React hooks for interacting with the dApp.

🌐 Examples

• PersonaSwitcher: Display and switch between PersonaNFTs

• ReputationBar: Visualize user's rep across domains

• ProposalList: Display proposals from a DAO

• useOmniWallet(): Hook to get OmniWallet instance and execute actions

• useCreatePersona(): Hook to mint a new PersonaNFT

• useCastVote(): Hook to cast a vote in DAO proposal

All components follow the Tailwind utility-first design system and are fully responsive.

🧪 Calling Smart Contracts

OmniSocial uses viem under the hood for typed contract calls. Example:

import { useContractWrite } from 'wagmi';
import { OMNI_WALLET_ABI, OMNI_WALLET_ADDRESS } from '@/lib/contracts';

const { write: createPersona } = useContractWrite({
  address: OMNI_WALLET_ADDRESS,
  abi: OMNI_WALLET_ABI,
  functionName: 'createPersona',
  args: ['creatorDAO', 'coolhandle'],
});

Most calls are wrapped in hooks for safety and UI integration, but advanced users can import ABIs directly from /lib/contracts.

🎨 Styling & Design System

We follow a clean, minimalist aesthetic using Tailwind + shadcn/ui.

Example Tailwind snippet for a Persona Card:

<div className="bg-white dark:bg-zinc-900 rounded-2xl p-4 shadow-lg space-y-2">
  <img src="/avatar.png" className="w-16 h-16 rounded-full" />
  <p className="text-xl font-bold">@coolhandle</p>
  <div className="text-sm text-zinc-500">Reputation: 1234</div>
</div>

You can import and customize UI primitives from:

import { Button, Card, Dialog } from '@/components/ui';

🌍 Multi-language Support

OmniSocial uses next-i18next for localization.

Add a new language:

1. Add your locale file to /public/locales/{lang}/common.json

2. Update next-i18next.config.js with the new locale.

3. Use useTranslation() hook in your components:

import { useTranslation } from 'next-i18next';

const { t } = useTranslation();

return <h1>{t('welcome')}</h1>;

🚀 Quick Start: Run Frontend Locally

git clone https://github.com/OmniSocialBlockchain/omnisocial-frontend
cd omnisocial-frontend
yarn install
yarn dev

Make sure your .env.local contains the RPC endpoint and contract addresses:

NEXT_PUBLIC_RPC_URL=https://rpc.zkevm-testnet.example
NEXT_PUBLIC_CONTRACT_OMNIWALLET=0x...

📁 Key Directories

Path	Description
/components	React UI components (cards, layouts, etc.)
/hooks	Wagmi/viem logic and reusable calls
/pages or /app	Next.js routes
/lib/contracts	ABI and address definitions
/public/locales	i18n translation files