Aptos Wallet Adapter Selector Ant Design

Package for wallet selector modal using Ant Design. Includes a wallet connect button when clicked, opens up a wallet select modal.

If wallet is already connected, the button would display the connected account address truncated (i.e 0x123...abc), in that case, clicking the button would disconnect the wallet.

Usage

Make sure you have @aptos-labs/wallet-adapter-react installed

npm install @aptos-labs/wallet-adapter-ant-design

on index.tsx / _app.tsx import the ant-design package .css file as

// If you use a local css file in your app, import it before the package's file as order matters
import "./my-style-file.css";

import "@aptos-labs/wallet-adapter-ant-design/dist/index.css";

On the page you want to include the wallet connect button, import the WalletSelector module.

import { WalletSelector } from "@aptos-labs/wallet-adapter-ant-design";
...
return (
  <WalletSelector />
)

That would add a Connect Wallet button when clicked opens up a wallet selector modal.

Override styles

You can override these classes

.wallet-selector-modal
.wallet-selector-icon
.wallet-selector-text
.wallet-menu-wrapper
.wallet-name-wrapper
.wallet-connect-button
.wallet-connect-install
.wallet-button
.wallet-modal-title
.aptos-connect-button
.aptos-connect-privacy-policy-wrapper
.aptos-connect-privacy-policy-text
.aptos-connect-privacy-policy-link
.aptos-connect-powered-by
.about-aptos-connect-trigger-wrapper
.about-aptos-connect-trigger
.about-aptos-connect-header
.about-aptos-connect-graphic-wrapper
.about-aptos-connect-text-wrapper
.about-aptos-connect-title
.about-aptos-connect-description
.about-aptos-connect-footer-wrapper
.about-aptos-connect-screen-indicators-wrapper
.about-aptos-connect-screen-indicator

For example, to override the connect wallet button background color, you can use the .wallet-button class in your local .css file

.wallet-button{
  background-color: red;
}