Mina Wallet Adapter for zkApps

There are two possible options to quickly add the Mina Wallet Adapter to your zkApps.

Option 1: Starter-Kits

The easiest way to start using the Mina Wallet Adapter is to build upon the starter-kit projects. There are starter-kits for various JavaScript frameworks; choose any compatible with your zkApp.

npx degit mina-wallet-adapter/starter-kit-react my-zkapp
cd my-zkapp

Option 2: Manual Installation

Manually add the Mina Wallet Adapter to your pre-existing zkApp project.

Add dependency

Install the following dependency in your project. Only a single package is required.

npm install @mina-wallet-adapter/ui-react

Import components

the default mode requires just WalletProvider and WalletMultiButton. The wallet-adapter.css file is optional and just for the default theme. Feel free to customize its CSS styles or replace the file with a project-specific stylesheet.

App.tsx

import { WalletProvider, WalletMultiButton } from "@mina-wallet-adapter/ui-react";
import "@mina-wallet-adapter/ui-react/dist/wallet-adapter.css";

Use in App

Use WalletProvider as the root of your App to set up the necessary context object for your React app. The WalletMultiButton shows the user a button to connect and a modal to select available wallets from. It automatically uses the connection state to display appropriate components.

App.tsx

function App() {
  return (
    <WalletProvider>
      <WalletMultiButton />
      <YourApp />
    </WalletProvider>
  );
}

Wrap your app with the WalletProvider so that you can use other components and hooks underneath it.

That's it

You can now start adding the useWallet hook for more advanced features.

Getting Started Integrate in Wallets