> ## Documentation Index
> Fetch the complete documentation index at: https://docs.incentiv.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Incentiv dApp SDK Example

> A minimal **React + TypeScript** demo that shows how to integrate the Incentiv dApp SDK in a modern front‑end stack.

## Tech stack

| Tool              | Purpose                              |
| ----------------- | ------------------------------------ |
| Vite              | Development server and bundler       |
| React 18          | UI framework                         |
| TypeScript        | Type safety                          |
| Tailwind CSS      | Utility‑first styling                |
| ethers v5         | Ethereum RPC + contract ABI bindings |
| Incentiv dApp SDK | Proprietary signing & submission     |

***

## Quick start

```bash theme={null}
# 1. Clone the SDK repository
git clone https://github.com/IncentivNetwork/dapp-sdk.git
cd incentiv-dapp-sdk

# 2. Build the SDK – this creates the dist/ folder required for the example to work
npm install
npm run build

# 3. Go to the example folder
cd example

# 4. Install example dependencies – the SDK is pulled from the parent folder via the "file:" reference in package.json
npm install

# 5. Run the dev server (default: http://localhost:5173)
npm run dev
```

> **Note on dependencies** You do **not** need to install `@incentiv/dapp-sdk` separately when using this example. The `package.json` already references the SDK via `"file:.."`, which points one directory up to the local source. If you publish or move the example outside the monorepo, change that line to `"@incentiv/dapp-sdk": "^x.y.z"` and re‑install.

***

## Configuration

Network and contract settings live in **`src/config.ts`**:

```typescript theme={null}
const Config = {
  Environments: {
    Local:   { Portal: "http://localhost:8080", RPC: "https://rpc2.testnet.incentiv.io", Contract: "0x…" },
    TestnetBeta: { Portal: "https://testnet.incentiv.net", RPC: "https://rpc1.testnet.incentiv.net", Contract: "0x…" },
	TestnetAlpha: { Portal: "https://testnet.incentiv.io", RPC: "https://rpc2.testnet.incentiv.io", Contract: "0x…" }
  },
  ABI: [ /* simplified Storage ABI */ ]
};
```

Switch environments in **`src/App.tsx`** by modifying:

```ts theme={null}
const Environment = Config.Environments.Testnet;
```

***

## App anatomy

### 1. `src/App.tsx`

* **`handleConnect`** – asks the SDK for an account address and sets up the provider & signer.
* **`handleFetchData`** – reads `storedValue()` and `lastSetter()` from the Storage contract.
* **`handleSubmit`** – calls `setValue()`; the SDK opens the Portal for signing and then shows a success/error modal.
* A `useEffect` hook listens for new blocks and keeps the UI in sync.

### 2. `src/components/Modal.tsx`

Reusable modal component used for success/error feedback.

***

## Runtime flow

```mermaid theme={null}
sequenceDiagram
    participant User
    participant Example dApp
    participant Portal Popup

    User->>Example dApp: Click **Connect Wallet**
    Example dApp->>Portal Popup: window.open(CONNECT)
    Portal Popup-->>Example dApp: CONNECT_RESOLVED (address)
    loop each block
        Example dApp->>RPC: eth_call storedValue
    end
    User->>Example dApp: Submit **Set Value**
    Example dApp->>Portal Popup: window.open(CALL)
    Portal Popup-->>Example dApp: CALL_EXECUTED (userOpHash)
```

## Troubleshooting

| Symptom                              | Possible cause & fix                                            |
| ------------------------------------ | --------------------------------------------------------------- |
| Pop‑up opens then closes immediately | The user closed it or rejected the Portal request.              |
| `Popup closed` error in console      | Same as above – re‑try and approve the Portal prompt.           |
| `Failed to connect wallet`           | Wrong Portal URL in `config.ts` or you’re on a different chain. |

***

## Production build

```bash theme={null}
npm run build   # Output files are written to /dist
npm run preview # Preview the production build locally
```

Ensure your production host allows pop‑ups for the Incentiv Portal domain.

***

## Video: Incentiv dApp SDK Example

<iframe width="560" height="315" src="https://www.youtube.com/embed/YZxNG00gXQg" title="Incentiv dApp SDK" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

## License

MIT – provided “as‑is” for educational purposes.