DEV Community: Jeff Gatbonton

Technical Frontend Deep Dives for Web3 Developers

Jeff Gatbonton — Mon, 23 Jun 2025 00:07:48 +0000

If you’re like me—a frontend dev who cut their teeth on design and found their freedom in crypto—then you know that building for Web3 is a constant tug-of-war between complexity and elegance.

In this post, I’m diving into three of the most important frontend techniques that have helped me scale real-world dApps without losing sleep (or my users).

1. Using Zustand/Jotai in Production Crypto dApps

Global state in Web3 isn’t just UI fluff—it can represent real token balances, on-chain auth, wallet connections, and smart contract interactions.

Why Not Redux?

Redux is a beast. It’s overkill for the lean, reactive needs of most Web3 dApps. Zustand and Jotai, on the other hand, give you atomic state management with way less boilerplate.

Zustand in Practice:

import { create } from 'zustand';

const useWalletStore = create((set) => ({
  address: null,
  setAddress: (addr) => set({ address: addr }),
  chainId: null,
  setChainId: (id) => set({ chainId: id }),
}));

No reducers. No context spaghetti. Just composable, lightweight state.

Bonus: Persistence and Middleware

Zustand supports middleware for persisting to localStorage, syncing across tabs, or debugging without extra setup.

Jotai is even more atomic—ideal for when you want to isolate individual pieces of state (like specific token values or component-scoped loading flags).

2. SSR & Caching in Next.js for Blockchain-Based Frontends

Let’s be real: most Web3 devs skip SSR. They slap up a bunch of useEffects and call it a day. But if you want SEO, faster Time to First Byte, or robust UX for unauthenticated users, server-side rendering matters.

Common Pitfalls:

Token balances fetched client-side only? Goodbye to instant feedback.
Wallet-dependent UI flickering on page load? UX killer.

Solution: Hybrid Rendering + Caching

Here’s what works for me:

getServerSideProps to fetch general data (e.g. token stats, protocol metrics)
SWR on the client to hydrate and revalidate wallet-specific data
Edge caching using Vercel or custom headers

export async function getServerSideProps() {
  const prices = await fetchTokenPrices();
  return {
    props: { prices },
  };
}

Remember: blockchain data doesn’t change every second. Cache it wisely, rehydrate it fast.

3. Leveraging GraphQL in Web3 Apps with Live Token Data

REST is a relic. GraphQL is how you tame on-chain chaos and offer your UI exactly what it needs.

Why GraphQL?

Fine-grained queries = less overfetching
Combine multiple contracts/subgraphs into one UI layer
Cleaner typings when using codegen (e.g. graphql-codegen)

Tools I Use:

The Graph Protocol (Subgraph APIs)
Apollo Client for caching and reactive updates
Satsuma/Subgrounds for querying across multiple chains

Example:

query GetTokenHolders($id: String!) {
  token(id: $id) {
    id
    symbol
    holders(first: 10) {
      id
      balance
    }
  }
}

Pair this with useQuery in Apollo and you have real-time token data piped into a responsive, cache-aware UI.

Final Thoughts: Build Like It’s the New Internet

Web3 isn’t a trend—it’s a rewrite of how value, identity, and code interact. But if the frontend sucks, no one cares what your protocol does.

Zustand gives you composability. Next.js gives you speed. GraphQL gives you control. Combine these and you can build experiences that feel like magic—even when your users have no idea they just signed a transaction or bridged assets across chains.

Design like an artist. Code like an engineer. Think like a rebel. That’s the frontend crypto stack.

UI/UX in Web3

Jeff Gatbonton — Thu, 29 May 2025 23:58:40 +0000

I used to plate duck confit and brûlée creme in the underbelly of Toronto's kitchens, blasting punk and painting walls with tattoos. Today, I push pixels and code for decentralized applications. If you think the jump from culinary arts to code is wild, try going from Web2 to Web3 UX.

As a self-taught designer-turned-frontend developer, I’ve lived through the chaotic beauty of the early web. But nothing prepared me for designing in Web3. It's not just harder—it's a fundamentally different beast. Here's what I've learned from the trenches of crypto UI/UX design.

Why Designing for Wallet UX is 10x Harder than Web2

In Web2, auth is simple. OAuth, cookies, sessions. You know the drill.

In Web3? Your user is their wallet. That wallet could be MetaMask, Phantom, Rabby, or a cold storage Ledger buried in a hardware drawer. Each wallet behaves differently. There's no consistent design standard, no native onboarding flow, and zero margin for error.

You can’t just say “Connect Wallet” and call it a day. You need to:

Detect installed wallets (and gracefully handle when there are none)

Guide users through complex, unfamiliar signing flows

Communicate gas fees, network switching, and failed transactions without losing trust

Handle multi-chain realities (good luck if you're bridging assets or supporting L2s)

Every modal matters. Every interaction risks abandonment. This is design in an adversarial environment. UX is not a layer on top—it is the protocol.

Breaking Down the UX Failures of Major dApps (and How to Fix Them)

Let's not name names, but here are the repeat offenders I see in big-name dApps:

Wallet Connection Dead Ends

Nothing screams "bounce" like landing on a dApp that greets you with a broken Connect Wallet button. This happens more often than you'd believe. Fix: detect wallet presence, offer fallbacks, and never assume MetaMask is the default.

Gas Fee Ambiguity

"Why did that cost $37?" is not a good post-onboarding sentiment. Many apps abstract fees to the point of confusion. Users need transparent previews, cost estimators, and fallback paths.

No State Management for On-Chain Events

Your user clicks "Stake." The transaction spins. Nothing happens. You lost them. Fix: use robust on-chain listeners, show pending states, and provide confirmations.

Unclear Transaction Purposes

Asking a user to sign an arbitrary message without explaining why? That's not trustless UX. That's lazy design.

Mobile? What Mobile?

Too many dApps are built desktop-first. Yet in emerging markets, most users are mobile-only. Progressive enhancements and mobile-first design aren’t optional. They’re survival.

How to Design a Seamless Onboarding Flow for Web3 Without Losing Users

The traditional SaaS funnel? It's dead here. Your user doesn’t want to "sign up." They want to interact, swap, mint, or stake — now.

Here’s how to onboard without losing your user:

Progressive DisclosureDon’t show users 8 wallet options at once. Detect their environment and suggest the most likely wallet. Simplify decision trees.

Pre-Onboarding EducationBrief walkthroughs, ghost tooltips, and inline help text can teach without preaching. Show users what "signing" does before they’re asked to do it.

Friction Isn’t Always BadSometimes, a tiny delay (e.g. animation during wallet switching) is good. It reduces panic. Create UX that feels confident and guided.

Track UX Drop-Off PointsAnalytics still matter. Where are users leaving? Where are they hesitating? Use this to iterate your flow like you would in Web2.

Fail Loud, But FriendlyWhen things go wrong (and they will), don’t hide it. Surface helpful error messages. Encourage retries. Offer backup options.

Final Thoughts: Design Like a Crypto Punk

Web3 is chaotic, unregulated, full of scams, innovation, and promise. It's punk rock. It's permissionless. It forces you to build trust through UX, not marketing.

To design in Web3 is to rebel against the status quo of Web2 design systems. It means embracing broken standards and still finding ways to guide, educate, and delight users. If you're a designer or frontend dev making the leap, prepare to unlearn everything.

Remember: frictionless doesn’t mean trustless. And in Web3, the best UX earns the user’s trust at every interaction.

We’re not just building products. We’re building new paradigms. And that’s a frontier worth designing for.