How to customize dropdown of WalletMultiButton

Question

There is the common wallet adapter component: WalletMultiButton.

Does anyone know how I can customize it with more rows, just like Magic Eden:

Currently I only have the default rows:

Although I was wondering how can I integrate extra rows into it? Or do I have to build the component from scratch?

Answer 1

I think you will need to design a custom dropdown. You can copy the library's dropdown UI code and attach functionality accordingly.

Dropdown UI: code link

Code Snippet form library:

<div className="wallet-adapter-dropdown">
    <Button
        aria-expanded={active}
        className="wallet-adapter-button-trigger"
        style={{ pointerEvents: active ? 'none' : 'auto', ...props.style }}
        onClick={openDropdown}
        startIcon={<WalletIcon wallet={wallet} />}
        {...props}
    >
        {content}
    </Button>
    <ul
        aria-label="dropdown-list"
        className={`wallet-adapter-dropdown-list ${active && 'wallet-adapter-dropdown-list-active'}`}
        ref={ref}
        role="menu"
    >
        <li onClick={copyAddress} className="wallet-adapter-dropdown-list-item" role="menuitem">
            {copied ? 'Copied' : 'Copy address'}
        </li>
        <li onClick={openModal} className="wallet-adapter-dropdown-list-item" role="menuitem">
            Change wallet
        </li>
        <li onClick={disconnect} className="wallet-adapter-dropdown-list-item" role="menuitem">
            Disconnect
        </li>
    </ul>
</div>

Answer 2

So to modify it

npm install --save \
@solana/wallet-adapter-base \
@solana/wallet-adapter-react \
@solana/wallet-adapter-react-ui \
@solana/wallet-adapter-wallets \
@solana/web3.js \
react

From all this list of packages you have to not install @solana/wallet-adapter-react-ui cause that is going to contain the default implementation of wallet adapter and it's stying. Now from here you have to build your own implementation of it by looking at how the already existing one work. There are 3 different implementation for different design libraries. Better look at it's implementation and look at how you want to design and implement it your way. here is the link to the UI packages here