Doubts with "Programming Token Swaps in 10 Minutes"

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!

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.

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