How I connected a React frontend to an ink! smart contract using Polkadot-API (PAPI)

AI

After an outcry, OpenAI swiftly rereleased 4o to paid users. But experts say it should not have removed the model so suddenly.

OpenAI’s decision to replace 4o with the more straightforward GPT-5 follows a steady drumbeat of news about the potentially harmful effects of extensive chatbot use. Reports of incidents in which ChatGPT sparked psychosis in users have been everywhere for the past few months, and in a blog post last week, OpenAI acknowledged 4o’s failure to…

AI

‘Cheapfake’ AI Celeb Videos Are Rage-Baiting People on YouTube

“They’re tweaking my voice or whatever they’re doing, tweaking their own voice to make it sound like me, and people are commenting on it like it is me and it ain’t me,” Washington recently told WIRED, when asked about AI. “I don’t have an Instagram account. I don’t have TikTok. I don’t have any of…

AI

GPT-5 Doesn’t Dislike You—It Might Just Need a Benchmark for Emotional Intelligence

Since the all-new ChatGPT launched on Thursday, some users have mourned the disappearance of a peppy and encouraging personality in favor of a colder, more businesslike one (a move seemingly designed to reduce unhealthy user behavior.) The backlash shows the challenge of building artificial intelligence systems that exhibit anything like real emotional intelligence. Researchers at…

AI

OpenAI Designed GPT-5 to Be Safer. It Still Outputs Gay Slurs

OpenAI is trying to make its chatbot less annoying with the release of GPT-5. And I’m not talking about adjustments to its synthetic personality that many users have complained about. Before GPT-5, if the AI tool determined it couldn’t answer your prompt because the request violated OpenAI’s content guidelines, it would hit you with a…

👋 Hey builders,
Have you ever tried connecting a frontend to a blockchain contract and felt like you were solving a Rubik’s cube in the dark? Yeah… me too. 😅

That’s why I wrote this guide, to walk you step-by-step through how I managed to connect a React + Vite frontend to an ink! smart contract using PAPI (Polkadot-API).
Spoiler alert: once I figured out the workflow, it felt less like rocket science and more like following a recipe. 🚀✨

Why this guide?

Instead of drowning in docs and scattered tutorials, I wanted a single walkthrough that shows:

How to build & deploy an ink! contract.
How to generate type-safe bindings with PAPI.
How to make a frontend talk to the contract through a wallet.

If you’ve been curious about ink! + PAPI but don’t know where to start, this article is for you. 🙌

Why PAPI?

Polkadot-API (PAPI) is the modern, modular JavaScript/TypeScript SDK for building dApps in the Polkadot ecosystem. It provides strong TypeScript support, a light-client-first approach, and SDKs (including an Ink! SDK) that generate typed bindings from contract metadata — making contract interactions safer and easier to write.

What I built

A small React + Vite app that:

Connects to a browser wallet (Polkadot.js / Talisman).
Reads a PSP22 contract balance (read-only query).
Sends a transfer (signed transaction).

The contract metadata is included in the repo and PAPI generated TypeScript descriptors were used to produce strongly typed calls.

Steps I followed (practical)

1. Build the ink! contract
Install cargo-contract and build:

cargo install cargo-contract --force
cargo contract build --release

cargo contract build produces the contract artifact and the metadata required by PAPI.

2. Generate PAPI descriptors from the .contract

I used the PAPI CLI to add my chain and the contract metadata:

pnpm papi add -w wss:// mychain
pnpm papi ink add ./path/to/.contract

This creates typed descriptors available as @polkadot-api/descriptors for import in the frontend. The Ink! tooling in PAPI generates types and helpers for dry-runs, deploys, queries, storage access and sending messages.

3. Frontend: create client & Ink SDK

In src/papiClient.ts:

import { createClient } from "polkadot-api";
import { withPolkadotSdkCompat } from "polkadot-api/polkadot-sdk-compat";
import { getWsProvider } from "polkadot-api/ws-provider/web";
import { createInkSdk } from "@polkadot-api/sdk-ink";
import { contracts, mychain } from "@polkadot-api/descriptors";

const client = createClient(
  withPolkadotSdkCompat(getWsProvider("wss://"))
);
const typedApi = client.getTypedApi(mychain);
const inkSdk = createInkSdk(typedApi, contracts.);
export { inkSdk };

This gives typed, chain-aware contract helpers.

4. Wallet connection & signer

I used PAPI’s pjs-signer helpers to connect the Polkadot.js/Talisman extension and obtain a polkadotSigner to sign transactions:

import { getInjectedExtensions, connectInjectedExtension } from "polkadot-api/pjs-signer";
const exts = getInjectedExtensions();
const selected = await connectInjectedExtension(exts[0]); // choose extension
const accounts = selected.getAccounts();
const signer = accounts[0].polkadotSigner;

The signer implements the PolkadotSigner interface that PAPI methods accept.

5. Query and send

Using the Ink SDK:

const instance = inkSdk.getContract(CONTRACT_ADDRESS);

// Query (dry-run)
const q = await instance.query("PSP22::balance_of", {
  origin: alice,
  data: { owner: alice },
});

// Send (signed tx)
const res = await instance.send("PSP22::transfer", {
  origin: alice,
  data: { to: bob, value: 100n },
}).signAndSubmit(signer);

The SDK exposes .query(...) and .send(...).signAndSubmit(...), very helpful for dry-runs and signed transactions.

Final notes & tips

Use the generated descriptors, they save time and reduce errors.
papi.how
Always use dry-runs (.query() or .dryRun()) before sending signed txs to check gas/storage cost.
papi.how
Do not commit private keys to the repo; use browser wallets for signing.
papi.how