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.
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.
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;
}