Skip to main content

​
What you’ll learn

  • Connecting to the Incentiv Portal and retrieving the user’s account address
  • Creating an ethers provider and the SDK’s IncentivSigner
  • Reading on‑chain state from a simple Storage contract
  • Triggering a transaction that opens the Portal pop‑up and submits an ERC‑4337 UserOperation
  • React hooks for real‑time UI updates

​
Tech stack

ToolPurpose
ViteDevelopment server and bundler
React 18UI framework
TypeScriptType safety
Tailwind CSSUtility‑first styling
ethers v5Ethereum RPC + contract ABI bindings
Incentiv dApp SDKProprietary signing & submission

​
Quick start

# 1. Clone the SDK repository
git clone https://github.com/IncentivNetwork/incentiv-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.

​
2. src/components/Modal.tsx

Reusable modal component used for success/error feedback.

​
Runtime flow

​
Troubleshooting

SymptomPossible cause & fix
Pop‑up opens then closes immediatelyThe user closed it or rejected the Portal request.
Popup closed error in consoleSame as above – re‑try and approve the Portal prompt.
Failed to connect walletWrong 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.