How do I remove the drop down menu from the walletmultibutton and get it to open a popup like on the demo link?

[keolamation]

my app.js
`import React, { useState, useEffect } from 'react';
import './App.css';
import './index.css';
import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
import AppWalletProvider from './AppWalletProvider';
import { ConnectionProvider, WalletProvider, useWallet } from '@solana/wallet-adapter-react';
import FetchConnection from './components/FetchConnection';
//import { CustomConnectModal } from './components/CustomConnectModal'; // Import the custom wallet modal

import { clusterApiUrl } from '@solana/web3.js';
import {
PhantomWalletAdapter,
SolflareWalletAdapter,
TorusWalletAdapter,
LedgerWalletAdapter
} from '@solana/wallet-adapter-wallets';

/*
import React from 'react';
import './App.css';
import './index.css';
import { useState } from 'react';
import WalletButton from './components/WalletButton';
import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { clusterApiUrl } from '@solana/web3.js';
import {
PhantomWalletAdapter,
SolflareWalletAdapter,
TorusWalletAdapter,
LedgerWalletAdapter
} from '@solana/wallet-adapter-wallets';
*/

//import { useImmer } from 'use-immer';
//import { Progress } from 'antd';

const wallets = [
new PhantomWalletAdapter(),
new SolflareWalletAdapter(),
new TorusWalletAdapter(),
new LedgerWalletAdapter()
];

const PaymentTypes = [
{
ID: 1,
PaymentName: 'Solana',
NameBrev: 'SOL',
USDRate: 172.11,
IconImg:'./images/Solana_Icon200px.png',
IsSelected: false,
},
{
ID: 2,
PaymentName: 'United States Dollar Coin',
NameBrev: 'USDC',
USDRate: 1,
IconImg:'./images/USDC_Icon200px.png',
IsSelected: false,
},
{
ID: 3,
PaymentName: 'United States Dollar',
NameBrev: 'FIAT',
USDRate: 1,
IconImg:'./images/FIAT_Icon200px.png',
IsSelected: false,
},
];

const InputFields = [
{
id: 1,
type:'currency',
value: '',
placeholder: 'Enter amount',
},
{
id: 2,
type:'token',
value: '',
placeholder: 'Enter amount',
},
];

const presaleRate = 0.34;

export default function App() {

const [currencyVal, setCurrencyVal] = useState('');
const [tokenAmount, setTokenAmount] = useState('');
const [PaymentOptionsLi, renderList] = useState(PaymentTypes);
const [isConnected, setConnected] = useState(false);
const wallet = useWallet();

//const InputFArr = InputFields;

useEffect(() => {
setConnected(wallet.connected);
}, [wallet.connected]);

function handleSelected(id){
renderList(PaymentOptionsLi => PaymentOptionsLi.map(PaymentOption => PaymentOption.ID === id?{...PaymentOption, IsSelected: true} :{...PaymentOption, IsSelected: false}));
resetInputValues();
}

const selectedPaymentType = PaymentOptionsLi.find(option => option.IsSelected);


function handleCurrencyChange(event){
  const value = parseFloat(event.target.value);
  setCurrencyVal(value);
  if (selectedPaymentType) {
    const newTokenAmount = (value * selectedPaymentType.USDRate) / presaleRate;
    setTokenAmount(newTokenAmount.toFixed(2));
  }
}

function handleTokenChange(event) {
  const value = parseFloat(event.target.value);
  setTokenAmount(value);
  if (selectedPaymentType) {
    const newCurrencyVal = (value * presaleRate) / selectedPaymentType.USDRate;
    setCurrencyVal(newCurrencyVal.toFixed(2));
}

}

//index through the the inputs
//used when someone selects new exchange button.

function resetInputValues(){
setCurrencyVal('');
setTokenAmount('');
}
//used when someone puts something into the input 'numbers only'
//should update both fields and the you get: displays.

let tokensOwned = 0;

const handleMainButtonClick = () => {
if (isConnected) {
console.log("Buying...");
} else {
const walletButton = document.querySelector('.wallet-adapter-button');
if (walletButton) walletButton.click();
}
};

return (
<ConnectionProvider endpoint={clusterApiUrl('mainnet-beta')}>

<p className='LaunchHeader'style={{marginTop:'5px',marginBottom:'5px'}}>
🚀 Time till launch 🚀

    <h3 style={{color: 'whitesmoke', fontSize: 'medium', textAlign: 'center', 
    marginTop:'6px',marginBottom:'6px',fontWeight:350}}>
    You Own: {tokensOwned}
  </h3>
  
 
  <PaymentList paymentOP = {PaymentOptionsLi} onSelected={handleSelected}/>
  

 
  

 <div>
  <h5>
      
  </h5>
  <Inputlist
    inputFields={InputFields}
    currencyVal={currencyVal}
    tokenAmount={tokenAmount}
    handleCurrencyChange={handleCurrencyChange}
    handleTokenChange={handleTokenChange}

  />
 </div>
 <div>
 <button className="MainButton" onClick={handleMainButtonClick}>
                            {isConnected ? "Buy" : 'Connect Wallet'}
</button>
{!isConnected && (
                            <WalletMultiButton style={{ display: 'none' }} />
                        )}                

 </div>

 <div>
 <FetchConnection setConnected={setConnected} />
 </div>
 
</div>
</AppWalletProvider>
</WalletModalProvider>
</WalletProvider>

);
}

function ICOprogress(){

let TokensSold = 0;
let TokenPool = 30000000;
const ProgressRate = (TokensSold / TokenPool) * 100;

return(

Tokens sold: {TokensSold} / {TokenPool}

) }

function CountDownTimer(){
return(

90:00:00:00

) }

function PaymentList({paymentOP,onSelected}){

//let PaymentsSel = PaymentOptionsLi;

return(

{paymentOP.map((payOP) =>( ))}

) }

function PaymentType({payOP,onSelected}){

//let PaymentOp = {PaymentOptionsLi};

console.log('contents of PaymentOP are,',payOP);
return(
<li style ={{display:'inline'}}>
<button className={PaymentTyeBtn ${payOP.IsSelected ? "Enabled" : "Disabled"}} onClick={()=> onSelected(payOP.ID)}>
<img className = 'icon' src={${payOP.IconImg}}style={{position:'relative',top:'5%',marginLeft:'-4px'}}>

  </img>
  <p style={{display:'inline',position:'relative',top:'-5%',paddingRight:'5px'}}>
  {`${payOP.NameBrev}`}
  </p>
  </button>


</li>

)
}

function Inputlist({inputFields, currencyVal, tokenAmount,handleCurrencyChange, handleTokenChange}){
return (
<div style={{ marginTop: '5px',display:'flex', marginLeft:'11px'}}>
{inputFields.map(field => (
<InputField
key={field.id}
type={field.type}
value={field.type === 'currency' ? currencyVal : tokenAmount}
placeholder={field.placeholder}
handleChange={field.type === 'currency' ? handleCurrencyChange : handleTokenChange}
/>
))}

);
}

function InputField({type, value, placeholder,handleChange}){

return (
<div style={{display:'inline'}}>
<p style={{marginBottom:'2px',color:'white',marginTop:'2px',marginLeft:'12px',fontSize:'11px'}}>
{type === 'currency'? YOU PAY: ${value} : YOU GET: ${value}}

<input
className='ICOinputField'
style={{display:'inline'}}
type='number'
value={value}
onChange={handleChange}
placeholder={placeholder}
/>

);
}

function ConnectedWalletFooter(){

Wallet connected: N/A }

/*

Wallet connected: N/A */

/*

  <button className ='Enabled'>
    
    SOL

  </button>
  <button className ='Disabled'>
    USDC
  </button>
  <button className ='Disabled'>
    FIAT
  </button>

*/

/* old reference to custom wallet button.

*/`

how it looks:

I want to know how to remove that drop down list, it's annoying and messes up formatting..

Basically I'd like it to function how it does on the demo

https://anza-xyz.github.io/wallet-adapter/example/ personally i like how you can just press the "wallet connected: " to disconnect a bit more but I really hate how the vanilla option list looks like ,

I'd prefer some sort of step by step to get the physical appearance I'm looking for.

Additional context
Add any other context or screenshots about the feature request here.

[github-actions]

Hi @keolamation,

Thanks for your question!

We want to make sure to keep signal strong in the GitHub issue tracker – to make sure that it remains the best place to track issues that affect the development of Wallet Adapter itself.

Questions like yours deserve a purpose-built Q & A forum. Unless there exists evidence that this is a bug with Wallet Adapter itself, please post your question to the Solana Stack Exchange using this link:

https://solana.stackexchange.com/questions/ask

---

This automated message is a result of having added the ‘question’ tag.