README.md

Aptos Wallet Adapter Selector MUI Design

Package 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.

Installation

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

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

Usage

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

import { WalletConnector } from "@aptos-labs/wallet-adapter-mui-design";

// ...

return <WalletConnector />;

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

Full Example

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 (
    <AptosWalletAdapterProvider
      dappConfig={{ network: Network.MAINNET }}
      onError={(error) => console.error(error)}
    >
      <WalletConnector />
    </AptosWalletAdapterProvider>
  );
}

Components

WalletConnector

The main component that provides the wallet connection button and modal.

import { WalletConnector } from "@aptos-labs/wallet-adapter-mui-design";

<WalletConnector />

Customization

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.

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 (
    <ThemeProvider theme={theme}>
      <WalletConnector />
    </ThemeProvider>
  );
}

Related Packages

• @aptos-labs/wallet-adapter-react - React provider and hooks
• @aptos-labs/wallet-adapter-ant-design - Ant Design alternative

License

Apache-2.0