[SOLVED] Dex-like Uniswap

Moralis General
#4

Hello Yomoo, itā€™s ok. Itā€™s sorted now. I basically did not capitalize Swapbox_select in my CSS code. All fine now.

Thanks

#5

Hi Projek, Please i am setting up a dex and i have done all neccesasry but the problem is how do i add the list of all token and the images or icon to swap box?

#6
#7

Thanks for your quick response Qudusayo, sorry to bother u, which particular place will i add it to?

#8

You add it to the result object returned from Moralis.Plugins.oneInch.getSupportedTokens

#9

Hi Qudusayo,please can you explain in a layman term how to add token to my dex swapbox. i am new to programming.

#10

Hereā€™s a sample where FEG and SafeMoon is added to the token list https://github.com/Qudusayo/Dex/blob/fd7a3888bcb2e7cdd0df4dfe8e045fc6ccbb01a9/script.js#L24-L37

#11

Thanks for your feedbackā€¦ I have seen your github link, but in the dex tutorial on YouTube the guy didnā€™t add the token one by one as you mention in your GitHub. if i start adding all the token by each the code will be too large. I think there is code that comprises all the list of the tokensā€¦

#12

Are the tokens youā€™re trying to add a custom token ?

#13

Sorry for bothering you, i am trying to add most token on coinmarketcap. I want my dex to comprise many token for trading. pls what do you mean by custom token?

#14

Custom token is one that youā€™ve made or deployed with your own contract.

What DEXes tend to is have their own whitelist of verified tokens but allow you to use any contract (but will state that itā€™s unknown), so you could build your own list to use.

#15

After i have added those token to my Javascript file unfortunately they didnā€™t show in my select token on the dexā€¦ even the swap button is not clickableā€¦

#16

The token should be at the end of the token list if added, in case you canā€™t find them, you show how youā€™re doing it ?

#17

I copied your JavaScript source code from your Github it still the sameā€¦ the feg and safemoon token are not showing. Is there anything i am doing wrongā€¦

#18

Hi Qudusayo, I saw this error message in my consoleā€¦

uncaught (in promise) ReferenceError: serverUrl is not defined
at init (main.js:11:25)
at main.js:165:1

#19

Have a look in that file for serverUrl. You need your Moralis serverUrl and appId when you connect.

Connect with Vanilla JS - Moralis

const serverUrl = "https://xxxxx/server";
const appId = "YOUR_APP_ID";
Moralis.start({ serverUrl, appId });
#20

The server of moralis are connectedā€¦ they are both on javascript fileā€¦

#21

Ok have a look at where this error is coming; serverUrl is being used somewhere but it doesnā€™t exist. You can post a code snippet.

#22

let currentTrade = {};

let currentSelectSide;

let tokens;

async function init() {

await Moralis.start({ serverUrl, appId });

await Moralis.enableWeb3();

await listAvailableTokens();

currentUser = Moralis.User.current();

if (currentUser) {

document.getElementById("swap_button").disabled = false;

}

}

async function listAvailableTokens() {

const result = await Moralis.Plugins.oneInch.getSupportedTokens({

chain: "bsc", // The blockchain you want to use (eth/bsc/polygon)

});

tokens = result.tokens;

tokens[ā€œ0xacfc95585d80ab62f67a14c566c1b7a49fe91167ā€] = {

address: "0xacfc95585d80ab62f67a14c566c1b7a49fe91167",

decimals: 18,

logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/8397.png",

name: "FEG Token",

symbol: "FEG",

};

tokens[ā€œ0x42981d0bfbAf196529376EE702F2a9Eb9092fcB5ā€] = {

address: "0x42981d0bfbAf196529376EE702F2a9Eb9092fcB5",

decimals: 18,

logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/16162.png",

name: "SafeMoon V2",

symbol: "SafeMoon",

};

let parent = document.getElementById(ā€œtoken_listā€);

for (const address in tokens) {

let token = tokens[address];

let div = document.createElement("div");

div.setAttribute("data-address", address);

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);

}

}

function selectToken(address) {

closeModal();

console.log(tokens);

currentTrade[currentSelectSide] = tokens[address];

console.log(currentTrade);

renderInterface();

getQuote();

}

function renderInterface() {

if (currentTrade.from) {

document.getElementById("from_token_img").src = currentTrade.from.logoURI;

document.getElementById("from_token_text").innerHTML =

  currentTrade.from.symbol;

}

if (currentTrade.to) {

document.getElementById("to_token_img").src = currentTrade.to.logoURI;

document.getElementById("to_token_text").innerHTML = currentTrade.to.symbol;

}

}

async function login() {

try {

currentUser = Moralis.User.current();

if (!currentUser) {

  currentUser = await Moralis.authenticate();

}

document.getElementById("swap_button").disabled = false;

} catch (error) {

console.log(error);

}

}

function openModal(side) {

currentSelectSide = side;

document.getElementById(ā€œtoken_modalā€).style.display = ā€œblockā€;

}

function closeModal() {

document.getElementById(ā€œtoken_modalā€).style.display = ā€œnoneā€;

}

async function getQuote() {

if (

!currentTrade.from ||

!currentTrade.to ||

!document.getElementById("from_amount").value

)

return;

let amount = Number(

document.getElementById("from_amount").value *

  10 ** currentTrade.from.decimals

);

const quote = await Moralis.Plugins.oneInch.quote({

chain: "bsc", // The blockchain you want to use (eth/bsc/polygon)

fromTokenAddress: currentTrade.from.address, // The token you want to swap

toTokenAddress: currentTrade.to.address, // The token you want to receive

amount: amount,

});

console.log(quote);

document.getElementById(ā€œgas_estimateā€).innerHTML = quote.estimatedGas;

document.getElementById(ā€œto_amountā€).value =

quote.toTokenAmount / 10 ** quote.toToken.decimals;

}

async function trySwap() {

let address = Moralis.User.current().get(ā€œethAddressā€);

let amount = Number(

document.getElementById("from_amount").value *

  10 ** currentTrade.from.decimals

);

if (currentTrade.from.symbol !== ā€œBNBā€) {

const allowance = await Moralis.Plugins.oneInch.hasAllowance({

  chain: "bsc", // The blockchain you want to use (eth/bsc/polygon)

  fromTokenAddress: currentTrade.from.address, // The token you want to swap

  fromAddress: address, // Your wallet address

  amount: amount,

});

console.log(allowance);

if (!allowance) {

  await Moralis.Plugins.oneInch.approve({

    chain: "bsc", // The blockchain you want to use (eth/bsc/polygon)

    tokenAddress: currentTrade.from.address, // The token you want to swap

    fromAddress: address, // Your wallet address

  });

}

}

try {

let receipt = await doSwap(address, amount);

alert("Swap Complete");

} catch (error) {

console.log(error);

}

}

function doSwap(userAddress, amount) {

return Moralis.Plugins.oneInch.swap({

chain: "bsc", // The blockchain you want to use (eth/bsc/polygon)

fromTokenAddress: currentTrade.from.address, // The token you want to swap

toTokenAddress: currentTrade.to.address, // The token you want to receive

amount: amount,

fromAddress: userAddress, // Your wallet address

slippage: 1,

});

}

init();

document.getElementById(ā€œmodal_closeā€).onclick = closeModal;

document.getElementById(ā€œfrom_token_selectā€).onclick = () => {

openModal(ā€œfromā€);

};

document.getElementById(ā€œto_token_selectā€).onclick = () => {

openModal(ā€œtoā€);

};

document.getElementById(ā€œlogin_buttonā€).onclick = login;

document.getElementById(ā€œfrom_amountā€).onblur = getQuote;

document.getElementById(ā€œswap_buttonā€).onclick = trySwap;

#23

If that is the full file, then thereā€™s no serverUrl or appId variables, you need to set this up as I mentioned in the previous post.

1 Like