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

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;

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

🚀 Time till launch 🚀

You Own: {tokensOwned}

{!isConnected && ( )}

); }

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(

<section className={'PaymentTyeBtn'} style={{marginBottom:'-10px'}} > {paymentOP.map((payOP) =>( <PaymentType payOP={payOP} onSelected={onSelected} key = {payOP.ID}/>))} ) }

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} /> ))}

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}}

anza-xyz / wallet-adapter

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

You Own: {tokensOwned}