How to display account address and button text dynamically?

Question

While using the @solana/wallet-adapter-react-ui package, I noticed that if you children to WalletMultiButton, like so:

<WalletMultiButton>Click me!</WalletMultiButton>

that, once you connect your wallet, the "Click me!" text will overwrite the account address that is displayed.

I opened this github issue (along with a PR) to see if there was a way to display your own unique button text without overwriting the account address.

Or even better, is there a way to add button text and an account address, which you can manage the CSS of, with the current implementation of WalletMultiButton?

Answer 1

If you want your own custom text AFAIK the only way doing it is by fetching the account address from the useWallet context

const { publicKey } = useWallet();

and change

<WalletMultiButton>Click me!</WalletMultiButton>

to

<WalletMultiButton>Click me! {publicKey?.toBase58()}</WalletMultiButton>

And to manage the CSS you will have to create a wallet_style.css file where you overwite the style of the WalletMultiButton.