Doubts with "Programming Token Swaps in 10 Minutes"

[mawmawmaw]

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

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

[malik]

@mawmawmaw

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

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

Programatically switch the selected Metamask network

Hey @randomw1zard In all examples I use web3 from Moralis SDK: const web3 = await Moralis.Web3.enable(); Here is an example how to get chain id in hex and decimal styles const chainIdHex = web3.currentProvider.chainId; const chainIdDec = await web3.eth.getChainId(); console.log(chainIdHex); console.log(chainIdDec); Code to change network in Injected providers: try { await web3.currentProvider.request({ method: "wallet_switchEthereumCha…

@mawmawmaw

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

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

Thanks.

[malik]

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

[mokua254]

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

[mokua254]

@malik

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

some help from some who has implemented the drop down menu