WikiReact ComponentsWallet UI Components

Wallet UI Components

UI components to speed up your app development.

Mesh provides a collection of useful UI components, so you can easily include web3 functionality and convenient utilities for your application

Connect Wallet

In order for apps to communicate with the user’s wallet, we need a way to connect to their wallet.

Dark Mode

Dark mode is built into the library. Simply toggling the dark class will enable it automatically. You can try switching between dark and light modes using the control at the bottom left of the documentation.

Persist user session

The library automatically handles saving and reconnecting the user’s last connected wallet.

Headless Wallet - Customization

For more customization, you can easily build your own wallet connection component. If you are using React, the React hooks will be useful. You may also take reference from this component.

Connect Wallet Component

The wallet component is currently supported only in the Google Chrome browser.

import { MidnightWallet } from "@meshsdk/midnight-react";
 
export default function Home() {
  return (    
    <MidnightWallet />      
  );
}
ℹ️

Output of the component