Hello Yomoo, itās ok. Itās sorted now. I basically did not capitalize Swapbox_select in my CSS code. All fine now.
Thanks
Hello Yomoo, itās ok. Itās sorted now. I basically did not capitalize Swapbox_select in my CSS code. All fine now.
Thanks
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?
Thanks for your quick response Qudusayo, sorry to bother u, which particular place will i add it to?
You add it to the result object returned from Moralis.Plugins.oneInch.getSupportedTokens
Hi Qudusayo,please can you explain in a layman term how to add token to my dex swapbox. i am new to programming.
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
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ā¦
Are the tokens youāre trying to add a custom token ?
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?
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.
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ā¦
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 ?
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ā¦
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
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 });
The server of moralis are connectedā¦ they are both on javascript fileā¦
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.
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;
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.