Krenno
All projectsCase study
Mobile AppFintech2024iOSAndroidWeb

DC Pay

One wallet. Every on-chain action that matters.

A global wallet for instant payments, swaps, and on-chain earning.

View on GitHub

Client

Krenno Labs

Engagement

internal

Duration

5 weeks

Team

3 people

Krenno roleProduct strategyUX and visual designCross-platform mobile engineeringAuthentication and account recovery+2 more
Positioning

Why this product exists

DC Pay turns fragmented crypto activity — sending funds, buying assets, swapping on DEX venues, staking ETH, browsing dApps, and tracking market narratives — into a coherent consumer product with banking-grade visual trust and a serious information architecture.

DC Pay shows that Krenno can design and ship a dense fintech product — authentication, multi-wallet management, payments, DEX swaps, staking, discovery, and a dApp browser — as one coherent system rather than a pile of screens. The work proves we can take a high-stakes consumer category, give it a real information architecture and design system, and deliver it across mobile, desktop, and web from a single Flutter codebase. For the next client, that means Krenno can own product, UX, and cross-platform engineering for wallets, payments, and other trust-critical financial products.

Built for

  • Retail crypto holders who want send, receive, buy, and sell in one place
  • DeFi users who swap, stake, lend, and browse dApps from a mobile wallet
  • Fintech teams that need a production-quality wallet experience across iOS, Android, and web
  • Consumer product companies entering payments, digital assets, or Web3 without splitting engineering into three native teams
The story

Challenge, approach, solution

01

The Challenge

Crypto products fail when they feel either too thin or too chaotic. Users need a wallet that is as trustworthy as a banking app, yet they also expect send, receive, buy, sell, swap, staking, NFTs, news, and a dApp browser in the same place. Most products either hide that complexity behind a single balance screen or dump every protocol into an unreadable menu. DC Pay had to solve both problems at once: present a complete commercial wallet, and keep the experience calm enough that first-time users would still complete login, create a wallet, and move value.

02

Our Approach

We treated DC Pay as a consumer product, not a protocol demo. The work started with a five-surface information architecture — Home, Swap, Earn, Discover, Browser — so every major job has a primary home instead of competing for the same screen. A shared component system (app bars, inputs, search, asset rows, circular actions, empty states) keeps the visual language consistent as the product expands. Authentication is a complete account journey, not a login button: register, social sign-in, password recovery, email OTP, and a confirmed password-reset state. Wallet creation and import sit in front of the operating product so custody and usage are distinct moments.

03

The Solution

DC Pay is a multi-coin wallet and on-chain operating system in one application. Users authenticate, create or restore a wallet from a secret phrase, then manage ETH, BTC, USDT, USDC, DAI, and NFTs from a single home. From there they send and receive, buy and sell across networks, swap through DEX venues with allowance and routing controls, stake ETH with pooled staking, follow markets and campaigns in Discover, and open categorized dApps in Browser. Settings, notifications, transaction history, and per-asset detail screens complete the product so it reads as a finished financial application rather than a collection of wallet utilities.

Experience

The Experience

A new user lands on a branded welcome screen and chooses Login or Register. After email and password — or Google, Apple, or Facebook — they enter the wallet shell. Home asks them to create a new wallet from a secret phrase or import an existing one, then presents a portfolio with Crypto and NFT views, a live balance, and the five core actions: Send, Receive, Buy, Sell, History. Swap is a two-leg trade surface with asset selection, DEX source, and settings for allowances and Thorchain streams. Earn explains native staking, APR, and unstaking windows before a Stake Now confirmation. Discover mixes featured campaigns, trending news, meme coins, lending markets, BSC assets, and DeFi venues. Browser is a searchable dApp directory grouped into History, New DApps, DeFi, Popular, Yield, Games, Security, Marketplaces, Smart Chains, Exchanges, Staking, Utility, and Social. Throughout, settings, notifications, and address copy/QR stay one tap away.

Product

What we built into the product

Account and recovery

Full consumer auth: email/password login and registration, Google, Apple, and Facebook sign-in, forgot-password with email OTP, unique new-password rules, and a confirmed success state before returning to login.

Multi-coin wallet management

Create a wallet from a secret phrase or import an existing one, switch between multi-coin wallets, and hold ETH, BTC, USDT, USDC, DAI, and NFTs in a single portfolio with Crypto and NFT tabs.

Send, receive, buy, and sell

A payments suite for moving value: send crypto, receive across networks with searchable asset lists, buy popular assets such as BTC and ETH, sell holdings, and inspect per-network receive addresses.

DEX swap with routing controls

A dedicated swap surface for trading from one asset into another, with DEX source selection, asset pickers, connect-wallet confirmation, token approval messaging, unlimited-allowance controls, and Thorchain stream routing for better quotes.

Native staking and earn

Stake ETH through pooled staking with clear rules for earning start, unstaking windows, gas, and estimated APR. Earn lists ETH, BTC, USDT, USDC, and DAI with native staking entry points from both Earn and asset detail.

Market discovery

A content and markets hub covering featured campaigns, trending news with tagged assets, staking yields, meme coins, lending and borrowing tokens, BNB Smart Chain assets, and DeFi venues such as PancakeSwap.

Categorized dApp browser

Search or enter a dApp URL, then browse History, New DApps, DeFi, Popular, Yield, Games, Security, NFT marketplaces, Smart Chains, Exchanges, Staking, Utility, and Social so Web3 activity stays structured instead of becoming an open-ended webview.

Also included

Asset detail and transaction history

Per-asset screens with balance, fiat value, and send/receive/buy/stake actions, plus a transaction history surface with an explorer fallback when a transfer is not yet visible in-app.

Notifications and empty states

A dedicated notifications inbox with refresh, plus designed empty states for NFTs, history, send, and alerts so the product still feels finished when a wallet is new.

Preferences, support, and social presence

Settings for appearance, preferences, support, help center, and about, plus outbound links to X, Telegram, Facebook, Reddit, YouTube, and Instagram for a complete consumer brand surface.

Shared design system

Reusable app bars, search fields, inputs with password visibility, primary buttons, asset rows, circular payment actions, toggles, and navigation chrome so new wallet surfaces inherit the same visual and interaction language.

Gallery

Product surfaces

Visual placeholders mark where final screens and captures will live. Drop assets at the paths shown on each tile.

Home. Wallet create/import, portfolio, Crypto/NFT views, send, receive, buy, sell, history, addresses, and notifications.

Swap. DEX trade surface with asset selection, routing source, allowances, and Thorchain stream settings.

Earn. Native staking list and ETH stake flow with provider disclosures.

Discover

Featured campaigns, news, meme coins, lending, smart chain, and DeFi discovery.

Browser

Searchable, categorized dApp directory across DeFi, NFTs, games, exchanges, and utilities.

Engineering

How it's built

DC Pay is a client-first, feature-modular Flutter application. Launch presents an unauthenticated welcome flow. Successful login or registration enters a persistent five-tab shell that owns the authenticated product. Each tab is a vertical: Home (portfolio, payments, wallets, addresses, notifications, history), Swap (quote, asset selection, settings), Earn (staking list and stake confirmation), Discover (campaigns, news, markets), and Browser (searchable dApp categories). Shared widgets live in a common components layer so app bars, search, inputs, and asset rows stay identical across verticals. Settings is a cross-cutting surface reachable from the shell. Authentication, wallet lifecycle, and operating features are therefore separate layers: identity, custody, then usage. A request in this product is a user intent — send, swap, stake, open a dApp — that is routed to a dedicated screen with its own state, then returned to the tab that originated it.

feature-modularcross-platformAPI-ready clientsecure authentication flowdesign-system drivenmulti-surface information architecture

Decision

Organize the product as five primary surfaces instead of a single dashboard with nested menus.

A wallet that includes payments, DEX, staking, markets, and dApps cannot keep every job on one home screen without becoming noisy.

Users always know where to go for a given job, and the product can grow a vertical without rewriting navigation.

Decision

Build a shared component library before expanding screen count.

The inventory is large: auth, portfolio, payments, swap, earn, discovery, and browser. Duplicated chrome would fracture trust.

New screens inherit the same spacing, type, and controls, which is what makes the product feel like one system.

Decision

Separate account identity from wallet custody.

Login proves who the user is; a secret phrase proves what they control. Mixing those steps confuses first-time users and raises risk.

Auth can use Firebase and social providers while wallet create/import remains an explicit custody moment.

Stack

DC Pay is a Flutter application with a feature-modular client architecture, Material 3 theming, and Firebase Authentication as the account layer. The stack is chosen so one codebase can deliver a dense fintech product on iOS, Android, web, and desktop without splitting design or engineering. Persistent tab navigation, a shared widget library, and OTP-backed recovery give the product the structure of a commercial wallet rather than a single-screen demo.

FlutterDartMaterial 3Google Fonts (Urbanist)Persistent bottom navigationFont AwesomeFirebase AuthenticationFlutter multi-platform targetsNative splash and launcher pipelineEmail OTP recoveryCredential hygieneSwap allowance controlsWallet creation and importSocial identity providersDEX venues (Uniswap and Thorchain)Pooled ETH staking (Kiln)dApp ecosystem directoryOTP input components
Process

From brief to shipped product

  1. 01Discovery

    Mapped the jobs a retail crypto user actually performs — hold, send, buy, swap, stake, follow markets, open dApps — and identified the failure mode of stuffing all of them onto a Trust-style home screen. Defined a five-surface IA and a brand system (deep purple, peach, Urbanist) that would make a dense wallet feel like a premium payments product.

  2. 02Design

    Designed a complete consumer journey: branded splash and welcome, auth and recovery, wallet create/import, then the operating shell. Built a reusable visual language for balances, circular payment actions, asset rows, campaign cards, news tags, and empty states so later surfaces would not invent their own UI.

  3. 03Development

    Implemented the product as Flutter feature modules with a shared components layer and a persistent tab shell. Wired auth, wallet, payments, swap, earn, discover, and browser into one navigable application, including OTP recovery, social login entry points, and swap/staking settings.

  4. 04Testing

    Walked every primary path as a first-time user and as a returning holder: register, recover password, create a wallet, send/receive/buy/sell, swap with settings, stake ETH, browse Discover categories, and open dApp directories. Validated empty states, back navigation from nested screens, and tab persistence.

  5. 05Launch

    Packaged the product with native splash screens, launcher icons, and multi-platform Flutter targets so DC Pay presents as a store-ready wallet on iOS, Android, web, and desktop rather than a development build.

Challenges

Hard problems, clear outcomes

Breadth without noise

Problem

A commercial wallet has to feel as trustworthy as a banking app while still exposing swap, staking, NFTs, news, and a dApp directory. Putting all of that on one screen makes the product look unfinished or overwhelming.

Approach

We designed a five-surface information architecture and a shared component system so each job has a primary home, and every screen still looks like it belongs to the same product.

Outcome

DC Pay reads as a complete consumer platform: payments, DeFi, and discovery are all present, and the interface stays calm enough for a first-time user to finish onboarding.

Trust-grade account recovery next to custody

Problem

Wallet products often ship a login screen and ignore recovery, or they mix account credentials with seed phrases. Either choice breaks trust.

Approach

We built a full identity journey — register, social login, email OTP, unique new password, success confirmation — and kept wallet create/import as a separate custody step after authentication.

Outcome

Users can recover an account without confusing that process with restoring keys, which is the standard a financial product is judged against.

Making DEX and staking understandable

Problem

Swaps involve allowances, routing, and venue choice. Staking involves lockups, APR estimates, and a pooling provider. Raw protocol UI loses retail users.

Approach

Swap became a two-card trade with explicit DEX source, approval copy, and settings for unlimited allowances and Thorchain streams. Stake became an amount entry plus a disclosure card covering earning start, unstaking delay, gas, Kiln, and APR variability.

Outcome

DeFi actions sit inside the same visual system as send and receive, so advanced activity does not feel like a different product.

A dApp browser that is still a product

Problem

Open webviews turn a wallet into a poorly branded browser. Users cannot find DeFi, NFTs, or games, and the product loses its information architecture.

Approach

Browser is a searchable, categorized directory — History, New DApps, DeFi, Popular, Yield, Games, Security, Marketplaces, Smart Chains, Exchanges, Staking, Utility, Social — with a URL field for direct entry.

Outcome

Web3 access is structured like a marketplace, which keeps DC Pay in control of discovery while still allowing power users to go anywhere.

Proof

What this work proves

DC Pay presents as a finished multi-surface wallet: authentication and recovery, multi-coin custody, payments, DEX swaps, native staking, market discovery, and a categorized dApp browser, all from one Flutter codebase targeting six platforms. The product gives Krenno a concrete demonstration of fintech UX, cross-platform engineering, and the ability to turn a crowded crypto feature set into a coherent consumer application.

Product design for trust-critical fintechCross-platform mobile engineeringAuthentication and account-recovery architectureMulti-surface information architectureDesign systems and component librariesCrypto wallet and payments workflowsDeFi productization (swap, stake, dApps)Empty-state and onboarding designBrand systems for consumer financial products

What's next

Advanced portfolio analytics

Extend the wallet with allocation, performance history, and risk views so users can manage holdings with the same clarity they already get from send, swap, and earn.

Intelligent market guidance

Add an assistant that explains campaigns, news, and DeFi venues in Discover and Browser, then suggests next actions such as stake, swap, or follow an asset.

Real-time transaction alerts

Grow the notifications inbox into live payment, swap, and staking alerts so users hear about inbound funds and confirmed trades without opening the app.

Have something in mind?

Tell us about your product and we'll help you ship something worth putting on this page.

→Start a project

Next project

Fenstra

A visual commerce platform that turns custom doors and windows into a guided buying experience.

View case study