@aptos-labs/wallet-adapter-ant-design
Version:
Aptos Wallet Adapter ant-design
76 lines (58 loc) • 2.13 kB
Markdown
# Aptos Wallet Adapter Selector Ant Design
Package for wallet selector modal using [Ant Design](https://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](../wallet-adapter-react/README.md) 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;
}
```
