dApp-kit v2: A framework-agnostic toolkit for building dApps

[williamrobertson13]

dApp-kit v2: A framework-agnostic toolkit for building dApps

Since the initial release of dApp-kit, we've received valuable feedback from the builder community and have identified several pain points dApp builders commonly encounter. This post outlines our work-in-progress design and goals for the next-generation version of dApp Kit, built to be framework-agnostic, highly customizable, and focused on delivering a significantly improved developer experience.

Problems

• Tightly coupled to React: dApp Kit is highly coupled to React which creates several limitations:
  • Developers using frameworks like Vue, Svelte, and Angular can't adopt dApp Kit in its current form
  • The provided bindings for queries and mutations are restricted to Tanstack Query which constrains technology choices
  • State is only available within the React render tree, making some framework patterns such as data prefetching impossible
• Challenging developer experience: The overall developer experience can be difficult to navigate, especially when trying to integrate with other libraries or customize behavior beyond the defaults
  • Multi-network support in dApps is complicated to set up with separated concepts of networks, chains, and clients
  • Integrating with other libraries can be challenging regarding type safety and avoiding dependencies on dApp Kit
• Unpolished UI/UX: The UI components offer a basic user experience that often falls short of modern design expectations
• Limited theming/customization: UI components like the connect modal are hard to customize without re-implementing them

What we're building to solve these problems

The next-generation version is split into two major pieces: a framework-agnostic core for state management and set of highly themable UI components. This architecture will provide a composable foundation for builders, especially those looking to build on top of dApp Kit without having to re-create the core logic from scratch.

State management
The core state management logic is built using Nanostores, a small, reactive state management library that works across all popular web frameworks and can be accessed anywhere. dApp Kit will automatically register a store on the globalThis instance that can be accessed using the getDefaultStore method. Below is an example of how one might integrate dApp Kit in a Vue app to display a list of the registered wallets:

<script lang="ts" setup>
import { useStore } from '@nanostores/vue';
import { getDefaultStore, getWalletUniqueIdentifier } from '@mysten/dapp-kit-next';

// This will contain all of the reactive state and public methods for interacting with wallets:
const dAppKitStore = getDefaultStore();

const wallets = useStore(dAppKitStore.$wallets);
</script>

<template>
  <div>
    <ul v-if="wallets.length > 0">
      <li v-for="wallet in wallets" :key="getWalletUniqueIdentifier(wallet)">
        {{ wallet.name }}
      </li>
    </ul>
    <p v-else>No registered wallets</p>
  </div>
</template>

UI components
We're introducing framework-agnostic web components for core UI elements like the connect modal and button. These components are built using web standards and can be dropped into any frontend stack without extra dependencies. Below is another example in Vue of how to leverage the pre-built UI components:

<script lang="ts" setup>
import '@mysten/dapp-kit-next';
</script>

<template>
  <dapp-kit-connect-button>Connect</dapp-kit-connect-button>
</template>

Future React support
As dApp Kit originally launched as a library for React, we hope to provide a similar experience for developers in the new version of dApp Kit. We are still discussing specifics so there will be more to share in the near future; we are notably looking into providing utilities for data fetching patterns, shadcn registries for React-specific components, and other useful hooks and wrappers to streamline development. Any additional feedback or suggestions are much appreciated!

Other notable changes/mentions

• We'll be moving transaction execution from the dApp side to the wallet as a more consistent default
  • As a consequence of this, we'll be deprecating reportTransactionEffects from the wallet standard
• There will be automatic typings for extended clients throughout the library via module augmentation

[MrBns]

this will be awesome. waiting for update on this issue.

[MrBns]

what is the update on this. is Sui that much inactive ?

[hayes-mysten]

We don't have any specific updates to share, but all the work is being done in the open, and you can see the current state of things in this repo (under dapp-kit-next). There have been over 100 PRs in this repo since this discussion was created, so I wouldn't say it's inactive.

This is a large and complex project, and building good tools and libraries takes time