Doubts with "Programming Token Swaps in 10 Minutes"

Moralis General
#1

Hi - I was following along the " Programming Token Swaps in 10 Minutes" tutorial with the 1INCH plugin and tried to quiclky expand functionality to build a regular swap interface as exercise.

I came across 2 doubts:

  1. When the user has logged in using metamask, how can I detect the chain he’s currently logged in to? I would need to know this so I can show the proper list of tokens available on that chain.

  2. The second doubt I have is not Moralis related but I haven’t been able to solve this issue:
    Whenever I get the full list of tokens on any chain using the Moralis.Plugins.oneInch.getSupportedTokens() function I get an object and iterate through it to create the options for my HTML select elements. The problem is that I can’t get the list of options to be added in both select elements (swap from token & swap to token). Only one of the selects is filled with the options and the other stays empty. I have tried many ways now and haven’t found a way to fill both selects so the user can select from which token they want to swap and to what token.

I’ve uploaded my code here:
https://simple-swap-dapp.netlify.app/
And the github repo is here:
https://github.com/mawmawmaw/simple-swap-dapp

There’s a function in the file “main.js” in line 76 called “buildDropDowns” that should do the work but it doesn’t :frowning:

Hope someone can take a look at these and help me out :slight_smile:
Much thanks in advance!

#2

You can check how to get the chain id in this implementation mentioned over here -

As of this, I have to dive a little into your code to check it out. Do give us some time.

Thanks.

#3

There seems to be an issue of overriding the first select element when both of them have the same options. Weird error but probably some HTML issue. I would ask you to explore it yourself and find the issue.

I tried this and found that if even one element is different, all the options render properly -

function buildDropDowns(tokenOptionsList){
    console.log(tokenOptionsList)

    let selects = document.getElementById("select-token-dropdown");

    // for(var i=0; i<selects.length; i++) {
        for(var j= 0; j<tokenOptionsList.length; j++) {
          selects[1].options.add(tokenOptionsList[j]);
          selects[0].options.add(tokenOptionsList[j+1]);
        }
        console.log(selects)
    //   }
}
#4

hey Malik where do i add the drop down code in the token swap code?kindly assist

#5

some help from some who has implemented the drop down menu