Dappness

DeFi App Template - Dappie

An opinionated DeFi app template for building Dapps in 2025.

By Gareth on 22nd Oct, 2024

Introducing Dappie - an opinionated DeFi web app template.

I've been building DeFi apps for 4+ years. I joined Balancer back in 2021 to lead and build the v2 application for the protocol. We learnt a lot about what works and what doesn't when building DeFi apps. We then applied those learnings when building out v3 in 2024. I've since built out several other DeFi apps for large protocols as a contractor. Dappie is the consolidation of everything I've learnt about building Dapps for top teir DeFi protocols.

Simply, Dappie is a NextJs app that takes the complexity out of building a DeFi apps.

The template allows you to focus on building flows and interactions unique to your protocol rather than the typical and cumbersome plumbing also required to build out execptional web3 apps.

Key features:

  • Choose your wallet provider (RainbowKit or ConnectKit, for now...)
  • Simple transaction execution hook-ups.
  • Simple multi-step transaction flow configuration.
  • Multi-network native.
  • Token metadata (for the tokens you care about).
  • Token pricing.
  • DeFi/token number formatting and utilities.
  • Private RPC support.
  • Admin UI to control configuration.

In this post I will walk through each technical choice and explain why it was made. If you'd like to use Dappie before it's public, please reach out to gareth@dappness.com.

Tech choices

NextJS

I talk about why NextJS is a good choice in my post about how to build a DeFi app in 2024. It primarily comes down to using React for the ecosystem, especially around web3 tooling and for future hiring / collaboration. It also makes deployment a breeze with Vercel. Yes, Vercel can be expensive if your app gets complex and heavily used, but most won't run into these issues. You want to spend as much time as possible focused on your DeFi UX, not on devops. If cost ever does become and issue (I doubt it will) you can deploy a NextJS app to a VPS.

NextUI

NextUI is a component library based on TailwindCSS. There are many options for react component libraries but I've found that NextUI handles the tradeoff between control and ease of use in the best way, with the nicest default styles. You can completely customise the look and feel of your app by modifying the tailwind theme.

Note: Dappie is an opinionated template. We have purposfully picked a component library so that higher level UI flows are easier to configure and construct.

Viem/Wagmi

Viem is a Typescript library for interacting with EVM blockchains. It is the industry standard in it's space.

Wagmi is a library which sits on top of Viem and provides useful react hooks for web3 apps. Again, Wagmi is the industry standard for this type of functionality.

RainbowKit or ConnectKit

There are many wallet providers, from our perspective the best options at the moment are RainbowKit and ConnectKit. For that reason you can choose which wallet provider you use when you set up Dappie.

It's possible that the technology around how users connect to and interact with Dapps will change over the next couple of years. So we have built Dappie in such a way that we can add more options here in the future. In particular we'd like to make sure Dappie keeps up with and or pioneers chain abstraction tooling which may require a different type of wallet provider.

Server/database

The serverside tech choices are heavily inspired by the T3 stack. This side of the app is much less about web3 and is simply some tooling for maintaining application state.

Vercel Postgres

Vercel Postgres is just a typical web2 database integration. You may wonder why this is needed in a web3 app. Typically, you will need to maintain some application state that is not stored onchain. In protocols we have worked with this often results in a fully fledged and separate API. In our opinion 99% of use cases would be better off with a fullstack solution and so we have leveraged NextJS's serverside to maintain useful state like token metadata, pricing and admin settings.

Drizzle

Drizzle is an ORM for TypeScript, that allows you to define your database schema and models.

tRPC

tRPC allows us to write end-to-end typesafe APIs without any code generation or runtime bloat. It uses TypeScript’s great inference to infer your API router’s type definitions and lets you call your API procedures from your frontend with full typesafety and auto-completion.

Key features

Wallet providers

That's right, providers not provider. Dappie gives you a choice because there's no clear winner in this space and it's rapidly evolving. When you set up your Dappie app you will be able to select which wallet provider you want to use. You can then switch wallet providers from the admin page in the future if we add new providers or you want to try an alternative.

Simple transactions

Dappie makes it easy to set up and execute transactions. In particular it makes it very easy to intergrate contracts and their functions.

Simple multi-step transaction flows

Multi-step transaction flows are hard to avoid when building dapps for complex protcols. Dappie makes it easy to construct these flows.

Transaction batching

In some cases it's possible to condense multistep transaction flows into a single transaction. Dappie makes it easy to do this too.

Admin UI

The admin UI allows you to control how your Dapp works. Switch out wallet providers, define supported networks, add tokenlists, etc.

Ideas for future improvements

  • Chain abstraction - build in chain abstraction where a user's wallet balances are chain aggregated and they can use the sum to perform actions.