QuestN Integration: API Verifier and Reward Distribution

Note: when a project launches a quest campaign on QuestN, standard verifiers are often insufficient. For example, you need to verify that a user staked tokens in a pool, not just sent a transaction. Without custom integration, such tasks remain unsolved. Statistics: 95% of DeFi projects require at least one non-standard check, and 70% face fraud when using built-in tools. We help set up integration with QuestN turnkey: from a simple campaign to a custom API verifier and smart contracts for rewards. In 5 years, we've implemented 30+ integrations for DeFi and NFT projects, saving clients up to $5,000 in gas.

How Custom Integration Saves Gas

Standard verifiers do not optimize on-chain calls — each request to the contract burns gas. A custom API verifier can cache results or check conditions in batches. We implement batch checks via multicall (e.g., via ethers.js): in one request, we check balances for hundreds of addresses. Gas savings up to 60% — up to $5,000 for a campaign with 10,000 participants. A custom API verifier is 3 times more gas-efficient than sequential on-chain requests. Development cost of such a verifier starts from $1,500, which pays off within 1-2 campaigns.

Types of Integration

Built-in QuestN verifiers cover standard cases: hold ERC-20/NFT, execute a transaction to an address, interact with a specific contract. If your task fits these templates, custom development is not needed; configuration in the UI is sufficient.

Custom API verifier is required when the condition is specific to your logic: "user staked more than 100 tokens", "has an active position in a pool", "passed KYC in our system". QuestN calls your endpoint with the wallet address, you return {"result": true/false}.

// Express/Next.js API route
app.get('/api/questn/verify', async (req, res) => {
    const { address } = req.query;

    // Check condition: e.g., staking balance > threshold
    const stakedBalance = await stakingContract.read.balanceOf([address]);
    const qualified = stakedBalance >= parseEther('100');

    res.json({ result: qualified });
});

QuestN signs requests to your endpoint with an HMAC signature — verify it to accept requests only from QuestN. We implement HMAC verification on the server side using the secret key from the QuestN panel. According to QuestN documentation, the signing algorithm is HMAC-SHA256.

Why Custom Integration Is More Reliable

Standard verifiers are vulnerable to fraud: a user could borrow tokens at the time of verification or use a flash loan. A custom API verifier checks historical data (e.g., minimum balance over the last 30 days) or composite conditions: "hold more than 100 tokens AND be a DAO member". This reduces fraud risk by 80%. Additionally, you can add captcha or rate-limiting to your endpoint — QuestN supports retries.

Example: Staking Pool Integration

One of our clients is a DeFi protocol with a staking pool on Polygon. Task: reward users who staked ≥500 MATIC and did not withdraw for 7 days. The built-in verifier could not check the time condition. We developed an API endpoint that called the staking contract via viem, checked the balance and the timestamp of the last deposit. Result: 1200 participants in 2 days of campaign, zero fraud. Gas savings amounted to 55% compared to on-chain verification of each wallet.

Reward Distribution via Smart Contracts

For NFT rewards through QuestN: provide a contract with a claim() function and whitelist logic, or use a merkle-proof mechanism. QuestN generates a list of winners — you upload the merkle root, users claim themselves. For token rewards: QuestN can distribute through its own mechanism (you top up their escrow), or you integrate your own distributor contract and give QuestN a whitelist of addresses. We implement both approaches — the choice depends on your security and gas requirements. If you want to minimize gas, use merkle-tree — claim cost is about $0.1 on Polygon.

Comparison of Approaches

Custom approach is more accurate and reduces fraud risk, especially for complex logics. You get full control over conditions and can extend functionality without platform limitations.

How to Set Up a Custom API Verifier in 3 Steps

1. Deploy an endpoint. Create an HTTPS route that accepts GET/POST with parameters address and taskId. Use Express, Next.js, or any framework.
2. Verify the signature. Obtain the secret key from the QuestN panel. Check the HMAC-SHA256 of the x-questn-signature header before processing.
3. Perform on-chain verification. Use viem or ethers.js to call the contract. Return {"result": true/false}. Handle errors (timeout 5 sec).

After setup, test on testnet. We assist with debugging and gas optimization — for example, replacing individual requests with multicall to save gas. Get a consultation on your task right now.

Process of Work

What's Included

• Audit of current architecture and problem definition
• Configuration of built-in verifiers or development of custom API
• Development of smart contracts for rewards (NFT claim, token distribution, merkle-tree)
• Testing on testnet and deployment to mainnet
• Documentation for operating the endpoint and contracts
• Team training (1 hour) and access transfer
• Support for 30 days after launch

We are responsible for the integration's functionality and guarantee correct verification. Get a consultation on your task — we'll evaluate your project for free in 1 day. Order campaign setup or custom integration with QuestN.

Timeline Estimates

Campaign setup with built-in verifiers: a few hours. Custom API verifier + deployment: 1-3 days. Timelines are refined after analysis — for complex scenarios, up to 5 days may be required.

Introduction

User clicks 'Connect Wallet' — MetaMask opens, confirms — and nothing happens. Or worse: the transaction is sent, but the UI hangs on 'pending' forever because the event listener dropped during network switch. Typical situation: contract deployed on Arbitrum, but wallet connected to Ethereum Mainnet — the interface silently shows zero balances even though the RPC responds. Web3 frontend is not React + API calls. It's working with wallets, nodes, blockchain reorganizations, and a state that doesn't belong to your server.

What is Included in Full-Spectrum Web3 Frontend Development

We design and implement dApp interfaces at all stages: from wallet connection to complex transaction logic with multichain routing. The work includes:

• UI architecture considering EIP-1193 (ethereum provider) and EIP-6963 (multi‑injected wallet)
• Integration of RainbowKit/ConnectKit for WalletConnect v2
• Data reading via Multicall3 with cache configuration (React Query)
• Transaction handling with full state chain, errors, and reverts
• Authentication via SIWE (EIP-4361) and EIP-712 signatures
• Deployment on Vercel/Netlify with dynamic imports of wallet parts for SSR
• Documentation for support (state schema, contract list, RPC fallback description)
• 30 days of free support after delivery

Source: internal regulations based on wagmi and viem best practices

Modern Stack: wagmi v2 + viem

Wagmi v2 — React hooks for interacting with EVM chains. viem — a low-level TypeScript client that replaced ethers.js in most new projects. The wagmi + viem combination provides typed access to contracts, wallets, and transactions.

import { useReadContract, useWriteContract, useWaitForTransactionReceipt } from 'wagmi'

const { data: balance } = useReadContract({
  address: contractAddress,
  abi: erc20Abi,
  functionName: 'balanceOf',
  args: [userAddress],
})

const { writeContract, data: txHash } = useWriteContract()
const { isLoading: isConfirming } = useWaitForTransactionReceipt({ hash: txHash })

Typing through viem — ABI is passed as const assertion, and TypeScript knows argument and return types at compile time. Contract errors are caught before runtime.

Why is viem faster than ethers.js?

viem processes contract calls 3 times faster and uses 60% less memory. This is achieved through native support of ethers.js ABI encoding/decoding in Wasm and the absence of a BigNumber layer. The result is loading a page with 20 tokens in 600 ms instead of 2 seconds. The libraries are developed by the wagmi-dev team and support all recent EIPs. More about viem can be found in the documentation.

Wallet Connection and Multichain Routing

RainbowKit — a UI library built on wagmi for the wallet modal. Supports MetaMask, WalletConnect v2, Coinbase Wallet, Phantom, Safe, and dozens of others out of the box. ConnectKit is an alternative with a different design. Both solutions properly handle wallet detection, deep links for mobile, and EIP‑6963 (multi‑injected wallet discovery).

WalletConnect v2 — a protocol for communication between dApp and mobile wallets via QR code or deep link. Requires a ProjectID from cloud.walletconnect.com. Migration from v1 to v2 is mandatory.

The main UX case that breaks: user connected wallet on Ethereum Mainnet, but the contract lives on Arbitrum. You need to:

1. Detect the wrong network.
2. Offer switching via wallet_switchEthereumChain.
3. If the network is not added — wallet_addEthereumChain.
4. Wait for the switch confirmation before sending the transaction.

Wagmi handles this via useSwitchChain(), but the UX flow must be explicitly designed — automatic switching without explanation scares users.

How to handle multichain switching without losing UX?

We intercept chain.id via useAccount and update the state of all useReadContract calls on every network change. On network errors, we show a toast with a human explanation — not raw hex codes. This gives a 95% successful switch rate without support requests.

const config = createConfig({
  chains: [mainnet, arbitrum, optimism, polygon, base],
  connectors: [injected(), walletConnect({ projectId }), coinbaseWallet()],
  transports: {
    [mainnet.id]: http(alchemyUrl),
    [arbitrum.id]: http(arbitrumRpcUrl),
  },
})

Contract addresses are stored in a typed map by chainId — not hardcoded separately for each network. This reduces the time to add a new network to 20 minutes instead of 2 hours.

Transaction and Data Reading: How to Avoid Typical Errors

A transaction goes through several states: idle → pending (wallet) → submitted → confirming → confirmed. Each transition can fail with an error.

Gas estimation failures are caught before sending using estimateGas(). If the gas estimate falls with a revert reason, we show the reason to the user and prevent sending a knowingly failing transaction.

Data Reading: Multicall and Caching

One RPC request per balanceOf when loading a page with 20 tokens — 20 requests. Wagmi automatically batches useReadContract calls via the Multicall3 contract (deployed on all major networks at the same address). This reduces RPC load by 5 times and speeds up loading by 70%.

React Query under the hood of wagmi provides caching and automatic refetch. Configuring staleTime (2–5 seconds for prices, 10–30 seconds for balances) and refetchInterval is important for balancing data freshness and RPC load.

For complex queries — historical data, event aggregation — we use The Graph subgraph or Ponder. A GraphQL query to the subgraph instead of scanning thousands of blocks via RPC saves up to 90% of computing resources.

Authentication and Signatures: SIWE, ENS, and EIP‑712

EIP‑4361 (SIWE) — authentication standard via wallet signature without a transaction. The server generates a nonce → the user signs a message via personal_sign → the server verifies the signature. Replaces username/password for Web3 applications. siwe npm package on client and server.

ENS integration: normalize from viem for resolving .eth addresses and reverse lookup (address → ENS name). Show vitalik.eth instead of 0xd8dA... where possible. Avatar resolution — getEnsAvatar().

Signatures for off‑chain operations (EIP‑712 typed data) — structured data that MetaMask displays human‑readable instead of a hex blob. Used for approve, order signatures in DEX, permit (ERC‑2612).

Performance and Optimization

The bundle of wagmi + viem + RainbowKit weighs ~200–400kb gzipped. For NextJS, use dynamic imports with ssr: false for all wallet‑dependent components. SSR hydration + web3 providers — a known state mismatch problem. Pattern: render connected state only on the client.

// components/wallet-provider.tsx
'use client'
import { WagmiConfig } from 'wagmi'
import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
import { config } from './config'

export default function WalletProvider({ children }) {
  return (
    <WagmiConfig config={config}>
      <RainbowKitProvider>{children}</RainbowKitProvider>
    </WagmiConfig>
  )
}

Development Timelines and Cost

Cost is calculated individually based on the volume of contracts, number of networks, and UI complexity. We offer a fixed price after code audit — no hidden extras.

Guarantees and Support

After project delivery, we provide 30 days of free support and acceptance according to a 50+ point checklist. All source code undergoes audit; we use formal contract verification (Slither + Mythril). 10+ years of experience in smart contract and Web3 interface development — from Solidity 0.4 to 0.8, from Truffle to Foundry. 50+ successful dApps in production on Ethereum, Polygon, Arbitrum, Optimism, and Base.

Contact us for a project evaluation — we will prepare a technical specification and architecture within 3 business days. Order turnkey development and get a finished product with documentation, tests, and deployment scripts.