[SOLVED] Having Problem to get token list in modal drop down menu

Technical Issue Reporting
#1

Hey Guys Having been following the tutorials on youtube and notice some changes in the codes.
managed to get this far but now failing to get the token in the 1st modal select option

any help here would be much appreciated

/** Connect to Moralis server */
const serverUrl = “xxxx”;
const appId = “xxxxx”;
Moralis.start({ serverUrl, appId });

async function init(){
await Moralis.initPlugins();
const web3Provider = await Moralis.enableWeb3();
// Get a (ethers.js) web3Provider

}

async function ListAvailableTokes(){
const result = await Moralis.Plugins.oneInch.getSupportedTokens({
chain: ‘bsc’, // The blockchain you want to use (eth/bsc/polygon)
});
console.log(tokens);
const tokens = result.tokens;
let parent = document.getElementById(“token_list”);
for (const bscAddress in tokens){
let token = tokens [address];
let div = document.createElement(“div”);
div.className = “token row”;
let html = <img class="token_list_img" src="${token.logoURI}"> <span class="token_list_text">${token.symbol}</span> ;
div.innerHTML = html;
div.onclick = () => {
selectToken(address);
};
parent.appendChild(div);
}
}
/** Add from here down */
async function login() {
let user = Moralis.User.current();
if (!user) {
try {user = await Moralis.authenticate({ signingMessage: “Welcome to Nektr” })
console.log(user)
}
catch(error) {
console.log(error)
}
}
}

async function logOut() {
await Moralis.User.logOut();
console.log(“logged out”);
}
function openmodal(){
document.getElementById(“token_modal”).style.display=“block”
}
function closemodal(){
document.getElementById(“token_modal”).style.display=“none”
}
init();

document.getElementById(“modal_close”).onclick = closemodal;
document.getElementById(“to_select_amount”).onclick = openmodal;
document.getElementById(“btn-login”).onclick = login;
document.getElementById(“btn-logout”).onclick = logOut;

INDEX FILE:

Nektr DX V1 
      <div class="container-fluid">
        <img class="Logo" src="Pictures/android-chrome-192x192.png" width="50px" height="50px">
        <a class="navbar-brand" href="#">Nektr DEX v1</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse " id="navbarSupportedContent" style="justify-content: center;">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0 " justify-content: center;> </ul>
          <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Swap</a>
            </li>
            <li class="nav-item">
             <a class="nav-link" href="#">Wallet</a>
          </li>
            <li class="nav-item">
            <a class="nav-link" href="#">NFTS</a>
           </li>
        </div>
        <div>
             <button id="btn-login" class="btn btn-outline-primary my-2 my-sm-0">Metamask Login</button>
             <button id="btn-logout" class="btn btn-outline-primary my-2 my-sm-0">Logout</button>
        </div>
     </div>
  </nav>
  <div calss="contrainer">
      <div class="row">
          <div class="col col-md-6 offset-md-3" id="window">
              <h4>Swap</h4>
              <div id="form">
                  <div class="swapbox">
                      <div class="select amount token_select" id="to_select_amount" style="width: 50%; float: left;"> ETH

                      </div>
                      <div class="select amount" id="select_from_amount" style="width: 50%; float: left;">
                          <input class="number form-control" placeholder="amount" id="from_amout" >
                      </div>
                    </div>
                  <div class="swapbox">
                     <div class="select amount token_select" id="from_select_amount" style="width: 50%; float: left;"> BNB

                      </div>
                     <div class="select amount" id="select_to_amount" style="width: 50%; float: left;">
                         <input class="number form-control" placeholder="amount" id="from_amout">
                     </div>
                    </div>
                    <button id="btn-Transfer" class="btn btn-outline-primary btn-block">Transfer</button>
                </div>
            </div>
        </div>
     </div>
     <div class="modal" id="token_modal" tabindex="-1" >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Select Token</h5>
              <button id="modal_close"type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div id="token_list"></div>
            </div>
         </div>
        </div>
      </div>

  <script type="text/javascript" src="./main.js"></script>
#2

you get an error, or what happens?

#3

no errors just that the token list wont show up in the drop down menu in modal

#4

Screenshot 2022-03-11 at 8.32.58 AM
Screenshot 2022-03-11 at 8.32.58 AM2160×1352 129 KB

#5

Problem Solved i missed the await ListAvailableTokes(); in the init function .

Glad i can now continue with the development .

2 Likes