Incentiv dApp SDK Example

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

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

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:

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.

Reusable modal component used for success/error feedback.

Runtime flow

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

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

License

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

Main

Architecture

Building on Incentiv

Tools

Incentiv dApp SDK Example

Tech stack

Quick start

Configuration

App anatomy

1. `src/App.tsx`

Runtime flow

Troubleshooting

Production build

Video: Incentiv dApp SDK Example

License

​Tech stack

​Quick start

​Configuration

​App anatomy

​1. src/App.tsx

​2. src/components/Modal.tsx

​Runtime flow

​Troubleshooting

​Production build

​Video: Incentiv dApp SDK Example

​License

Tech stack

Quick start

Configuration

App anatomy

1. `src/App.tsx`

2. `src/components/Modal.tsx`

Runtime flow

Troubleshooting

Production build

Video: Incentiv dApp SDK Example

License