Frontend DApp

Overview

SynthFi automatically generates a complete frontend DApp alongside every smart contract. This gives you a ready-to-use interface to interact with your Solana program on Devnet — no extra setup required.

This section explains how the DApp works, how it's structured, and how to connect it to your deployed contract.

---

What’s Included in the Frontend

Feature	Description
Phantom Wallet integration	Built using @solana/wallet-adapter
Live contract interaction	Read/write data to your deployed Anchor program
Token-based actions	Stake, withdraw, claim, unlock — depending on prompt
Configurable UI	Pre-styled using Tailwind CSS, editable
State-aware rendering	Shows connected wallet address, program state, and token balances

---

How It Works

✅ 1. Wallet Adapter Integration

SynthFi supports Phantom Wallet via Solana’s official adapter:

tsxCopyEditimport {
  ConnectionProvider,
  WalletProvider
} from '@solana/wallet-adapter-react';
import {
  PhantomWalletAdapter
} from '@solana/wallet-adapter-wallets';

const wallets = [new PhantomWalletAdapter()];

This allows one-click wallet connection and persistent session handling.

---

✅ 2. Program Connection

The DApp connects to your deployed program using:

• Program ID from your .env:

  envCopyEditNEXT_PUBLIC_PROGRAM_ID=your_program_id

• The Anchor IDL

• Solana Devnet cluster

tsxCopyEditconst connection = new Connection(clusterApiUrl("devnet"));
const program = new anchor.Program(idl, programId, provider);

---

✅ 3. Account Handling & UI Actions

Depending on your contract type, the DApp UI includes:

• Stake/unstake buttons

• Claim rewards

• View time-locked state

• Admin-only controls (if configured)

• Error + success messaging via toasts

---

✅ 4. Responsive, Themed UI

• Uses Tailwind CSS for layout and styling

• Dark mode UI by default

• Mobile-friendly layouts with auto-wrapping

You can easily re-theme it for your own brand.

---

Project Structure

bashCopyEdit/pages               → DApp routes (e.g. index.tsx)
/components          → UI elements (buttons, wallet connect, layout)
/lib                 → Wallet context, IDL loading, hooks
/public              → Static assets
.env.local           → Config for program ID and network

---

Test Before Deploy

You can test the UI locally even before deploying to Devnet.

Just run:

bashCopyEditnpm run dev

Set your .env with a mock or placeholder Program ID. The app will still render the interface and allow wallet connection.

---

After Deployment

Once you’ve deployed the contract to Devnet (via Anchor or Launchpad):

1. Update .env.local with your Program ID

2. Restart the app

3. The frontend will now interact live with your deployed contract

envCopyEditNEXT_PUBLIC_PROGRAM_ID=6Ajkd3...AbC9

---

What’s Coming Soon

• Dynamic IDL loading via Launchpad output

• Auto-generated testnet DApp hosting

• Option to export DApp to GitHub or IPFS

• Template-based UI customization (e.g. DAO, vesting, staking themes)