Aptos Wallet Adapter mui design
npm install @aptos-labs/wallet-adapter-mui-designPackage for wallet selector modal using Material-UI (MUI). 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
``bash`
npm install @aptos-labs/wallet-adapter-mui-design
On the page you want to include the wallet connect button, import the WalletConnector module.
`tsx
import { WalletConnector } from "@aptos-labs/wallet-adapter-mui-design";
// ...
return
`
That would add a Connect Wallet button when clicked opens up a wallet selector modal.
`tsx
import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
import { WalletConnector } from "@aptos-labs/wallet-adapter-mui-design";
import { Network } from "@aptos-labs/ts-sdk";
function App() {
return (
onError={(error) => console.error(error)}
>
);
}
`
The main component that provides the wallet connection button and modal.
`tsx
import { WalletConnector } from "@aptos-labs/wallet-adapter-mui-design";
`
The MUI components can be styled using the standard MUI theming system. Wrap your app with a ThemeProvider to customize colors, typography, and other design tokens.
`tsx
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { WalletConnector } from "@aptos-labs/wallet-adapter-mui-design";
const theme = createTheme({
palette: {
primary: {
main: "#1976d2",
},
},
});
function App() {
return (
);
}
``
- @aptos-labs/wallet-adapter-react - React provider and hooks
- @aptos-labs/wallet-adapter-ant-design - Ant Design alternative
Apache-2.0