Designing dApp Architecture: From Smart Contracts to UX

Designing dApp Architecture

Recently, a DeFi protocol team approached us: their frontend made 20 separate RPC calls on every page load, resulting in a 5–7 second delay. The root cause was that the smart contracts weren't designed with frontendability in mind—missing view functions and sparse events. We redesigned the architecture, integrated Multicall3, and reduced requests to a single one, cutting load time to 400 ms. Designing a dApp starts not with choosing a framework, but with analyzing how users will interact with the app. A common mistake is developing the frontend in isolation from the contracts. We ensure every layer—from smart contracts to UX flows—works as a unified whole.

How We Design Secure dApp Architecture

The first step is selecting standards and patterns for smart contracts. We use Solidity 0.8.x with overflow protection, explicit require and revert with messages, and proven libraries (OpenZeppelin). Each contract is audited with static analyzer Slither and fuzzer Echidna. This reduces risk of reentrancy, flash loan attacks, and other vulnerabilities. Typical gas savings after optimization are 30–50% compared to naive implementations.

Why Frontendability Is Critical for DeFi

Contracts must be friendly for the frontend. That means:

• Rich Events for every meaningful action (transfer, balance change, parameter update).
• View functions for gasless reads (e.g., totalAssets, balanceOf).
• Compatibility with Multicall3 — so the frontend can fetch dozens of values in one RPC request.

Data Fetching Architecture

We use a multi-level data loading system:

• Realtime: WebSocket to RPC or Alchemy SDK.
• Recent history: The Graph (subgraph).
• Historical analytics: Self-hosted PostgreSQL indexer.
• Prices: CoinGecko API + Chainlink on-chain.

According to The Graph documentation, subgraphs can process up to 1000 events per second. For one client, we configured an index that processed 3 million events in 2 minutes.

How We Implement Transaction Flow UX

User experience during transaction submission is a frequent source of errors. We design four states:

• IDLE: button ready.
• WAITING_WALLET: user confirms in wallet.
• CONFIRMING: transaction in mempool.
• SUCCESS or ERROR: final state.

Example with wagmi:

function DepositButton({ amount }: { amount: bigint }) {
  const { data: hash, writeContract, isPending } = useWriteContract();
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash });
  
  const status = isPending ? "WAITING_WALLET" 
               : isConfirming ? "CONFIRMING" 
               : isSuccess ? "SUCCESS" 
               : "IDLE";
  
  return (
    <button
      onClick={() => writeContract({ address: POOL, abi, functionName: "deposit", args: [amount] })}
      disabled={status !== "IDLE"}
    >
      {status === "WAITING_WALLET" && "Confirm in wallet..."}
      {status === "CONFIRMING" && "Confirming..."}
      {status === "SUCCESS" && "Deposited!"}
      {status === "IDLE" && "Deposit"}
    </button>
  );
}

State Management and Batching

For data reads, we use TanStack Query with refetchInterval (30 seconds for sensitive data) and Multicall3 to batch requests:

import { multicall } from "viem/actions";

const results = await multicall(client, {
  contracts: [
    { address: TOKEN_A, abi: ERC20_ABI, functionName: "balanceOf", args: [user] },
    { address: TOKEN_B, abi: ERC20_ABI, functionName: "balanceOf", args: [user] },
    { address: POOL, abi: POOL_ABI, functionName: "totalAssets" },
  ],
});

Wallet Connection

We configure RainbowKit with support for main networks and wallets:

import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { arbitrum, mainnet, base } from "wagmi/chains";

const config = getDefaultConfig({
  appName: "MyDApp",
  projectId: WALLETCONNECT_PROJECT_ID,
  chains: [mainnet, arbitrum, base],
  wallets: [
    { groupName: "Popular", wallets: [metaMaskWallet, coinbaseWallet, walletConnectWallet] },
  ],
});

Architecture Approach Comparison

Indexing Method Comparison

Project Work Process

1. Analysis — studying business logic, user scenarios.
2. Design — contract architecture, event specification, data flow diagrams.
3. Implementation — writing contracts (Solidity/Rust), frontend (React + wagmi + RainbowKit), indexers.
4. Testing — unit tests (Foundry), fuzzing, integration tests (Tenderly, Hardhat).
5. Deployment — deploying with verify on Etherscan, setting up Tenderly Dashboard.
6. Support — transaction monitoring, contract upgrades via proxy, gas optimization.

Timelines and What's Included

Timelines: from 2 to 6 weeks depending on complexity. Cost is calculated individually — contact us to get an estimate. Included:

• Architectural documentation (diagrams, specifications).
• Source code of contracts with comments.
• Frontend stack with configuration (wagmi, RainbowKit).
• Access to Tenderly project and alerts.
• Team training on the codebase.

Typical dApp Design Mistakes

• Lack of Multicall3 — frontend makes 10–20 separate requests, increasing load time by 3–5x.
• Weak Events — without details on balance transfers, analytics is hard to build.
• Ignoring transaction UX — user doesn't see intermediate states and clicks the button again, causing duplicate transactions.
• Choosing the wrong indexer — The Graph is fast for millions of events, but for custom aggregation a self-hosted solution is better.

Our team's experience — 5+ years in Web3, 10+ implemented projects (DeFi, NFT, gaming). We guarantee clean code and adherence to best practices. Get a consultation on your dApp architecture — contact us via email or Telegram. Contact us to discuss your project — we'll prepare architectural documentation within 2 days.

Blockchain Consulting Services: Strategy, Tokenomics, and Tech Stack Selection

Half of blockchain projects that come to us with already written code end up rewriting the architecture within the first year. The reasons are the same: chose Ethereum mainnet for prototyping without checking unit economics — gas makes the product unprofitable; created a governance token without a value capture model — price collapses six months after TGE; or chose Solana for throughput without considering that the team writes in Solidity, not Rust. On one project with 2000 lines of Solidity contracts, we saved the client significant rework costs by switching them to Arbitrum in time.

Consulting is a structured process that answers specific questions before the first line of code is written. Our experience (10+ years in blockchain engineering, 50+ projects delivered) shows that the right architecture at the start saves up to 60% of iteration time. For a personalized consulting fee estimate, contact us.

How to Choose a Blockchain for a Web3 Product?

The deciding factor is the product's transaction model. If daily volume is less than 100 transactions, Ethereum mainnet works, but you overpay for security. Consider Polygon PoS (transaction cost ~$0.001, finality 2–3 seconds, 100% EVM-compatible). If volume is 1,000–100,000 transactions per day and users are sensitive to gas, use Arbitrum One or Optimism. Both are EVM-compatible; transaction cost on Arbitrum ~$0.05–0.15, Optimism ~$0.05–0.10. Arbitrum uses Nitro (WASM-based fraud proofs), Optimism uses Bedrock with OP Stack. Withdrawal window: 7 days for both (optimistic rollup finality). For projects needing instant finality, consider Arbitrum Nova (AnyTrust, cheaper, less decentralized) or ZK rollups.

If you need throughput > 10,000 TPS and latency < 1 second, Solana (400ms block time, ~4,000 TPS sustained, up to 65,000 peak). But: Rust + Anchor instead of Solidity, account model instead of contract storage, learning curve for the team of 3–6 months. Solana has had several downtime incidents — a risk for financial applications. If you need transaction privacy, consider Aztec Network (ZK rollup with private state), Polygon zkEVM with privacy extensions, or Aleo (ZK-native L1 on Leo language). Choosing the wrong network may lead to expensive rework and loss of market window — we see this in every second due diligence.

"Most mistakes in network selection stem from ignoring unit economics — gas can destroy product margins" — from our practice.

Why Do Most Projects Lose Market Capitalization?

Most tokenomics models we analyze have one of three problems.

Problem 1: Token without utility. Governance tokens without fee capture or real decisions are just speculative assets. Compound COMP: 99% of holders never voted. The "vote-escrowed" model (veCRV Curve, vePENDLE) ties voting to lock-up, increasing participation because lockers receive real fee shares.

Problem 2: Inflation without demand sink. Staking rewards without a burning mechanism = constant dilution. EIP-1559 on Ethereum burns base fees, creating deflationary pressure when network usage is high. For application tokens: fee burning (part of protocol fees go to buyback+burn), lock-up mechanisms (reduce circulating supply), real yield (fees distributed to stakers instead of inflationary rewards).

Problem 3: Incorrect vesting for team and investors. Six-month cliff + 18-month linear vesting is standard for private rounds. But if TGE is at a high FDV, the team holds 20%, and the first unlock is in six months — tokens worth a large amount hit the market over two years. The market discounts this from day one. A healthier structure: 12-month cliff, 36-month vesting, with on-chain enforcement via a TokenVesting contract (OpenZeppelin VestingWallet or custom with revoke capability for advisor's unearned tokens).

Tokenomics simulation: We build an agent-based model in Python (Mesa framework) or use TokenSPICE. Parameters: user growth rate, retention, fee per user, staking ratio, selling pressure from unlocks. Result: forecast circulating supply, fee revenue, APY for stakers — in dynamics over 36 months. I guarantee the model accounts for worst-case scenarios — rare in the consulting market.

How Does the Tech Stack Affect Development Speed?

Stack choice determines iteration speed and hiring pool. Our team's certified professionals work with Solidity, Rust, Move, Vyper.

Solidity + Hardhat vs Foundry. Foundry wins for serious contracts: Forge tests in Solidity (no context switching), fuzzing built-in (forge fuzz), fork testing with one command (vm.createFork), gas snapshots for regression. Hardhat remains for TypeScript-heavy tests or when plugin ecosystem is needed (ethers-hardhat, hardhat-deploy). Combination: Foundry for unit/fuzz, Hardhat for deployment scripts.

Frontend: ethers.js vs wagmi/viem. ethers.js v5 is monolithic. wagmi v2 + viem is React-first, type-safe (viem generates TypeScript types from ABI), works better with React Query, supports EIP-1193 providers out of the box. For new React projects, use wagmi/viem. For existing ones with ethers.js, don't migrate just for migration's sake.

Indexing: The Graph (decentralized, subgraphs in AssemblyScript) vs Ponder (TypeScript-native indexer, good for in-house deployment) vs Moralis/Alchemy SDK (managed, fast setup, vendor lock-in). The Graph is standard for protocols needing a decentralized indexing layer. Ponder is for teams wanting control and TypeScript without AssemblyScript.

What Is the Consulting Process?

1. Discovery session (3–5 business days) — audit of current state, team interviews, requirements gathering. Result: hypotheses on stack and tokenomics.
2. Technical due diligence (if product exists) — surface-level audit of contracts, backend architecture, tokenomics model.
3. Development of Architecture Decision Record (ADR) — document with trade-offs on network, stack, tokenomics.
4. Building a tokenomics model with simulation — agent-based simulation over 36 months.
5. Delivery of documentation and templates — ADR, scripts, boilerplate repository, team training (2–4 hours).

Engagement model: fixed retainer (monthly, 20–40 hours) or project-based (deliverable-based). For pre-seed/seed startups, project-based format avoids diluting budget on a constant retainer.

What Is Included in the Work?

Timelines and Cost Guidelines

• Discovery + ADR — from 1 to 2 weeks. Cost: calculated individually.
• Full tokenomics (model + simulation + documentation) — from 3 to 6 weeks.
• Tech stack audit of existing project — from 1 to 3 weeks.
• Ongoing advisory retainer — from 3 months (minimum horizon for meaningful impact).

Choosing the wrong network or tokenomics early on can cost a project tens of thousands in rework — every second discovery session confirms this. Contact us for an expert assessment of your project in a free 60-minute briefing. Book a consultation — and we'll show you how to avoid common mistakes. For an individual cost and timeline estimate, leave a request on our website.