# 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:

```tsx
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`:

  ```env
  envCopyEditNEXT_PUBLIC_PROGRAM_ID=your_program_id
  ```
* The Anchor IDL
* Solana Devnet cluster

```tsx
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:

```bash
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

```env
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)