Yes, i have had similar issues with the chain selector as well. Intermittent issues displaying wallet address post-authentication. You can see what I am working on here - moralis rinkeby project on heroku
Are you able to share a repo? Everything seems fine with that deploy if I connect my wallet to it - wallet displays fine, chain selector works.
Hey, my Dapp is running but the swap isnt working. I can fetch the token symbols but when I press Swap nothing happens. Any Idea what the issue is ? Pictures are attached please have a look. Naga Swap - Dex
Do you have the latest version of the 1inch plugin installed? Error says address hasnât been provided, have you made changes to the DEX/Swap component? Which chain is this for (your screenshot shows youâre not authenticated/not on Ethereum.
Yes I have 0.31 installed. I took out the nft stuff but didnât temper with the swap component.
The latest version is 0.0.33, you can update it from your server > Plugins tab. If you still have issues you can share a repo of your project.
Donât know what my issue is at this point. Is it because i"m using js with jsx or my dapp is not connected to moralis token_img wonât display
what I did I remove the head part of the index.html and used react.fragment i canât get the tokens symbol icons to show. my website project is http://dessalines.io
yes itâs installed but no tokens showing up. this reference to id="from_token_img should get the image from oneinch?
It will be easier to help if you provide more code or a repo of your site.
<div class="swapbox">
<div class="swapbox_select token_select" id="from_token_select">
Token Select
<img class="token_image" id="from_token_img" />
<span id="from_token_text"></span>
</div>
<div class="swapbox_select">
<input class="number form-control" placeholder="amount" id="from_amount" />
</div>
</div>
<div class="swapbox">
<div class="swapbox_select token_select" id="to_token_select">
Token Select
<img class="token_image" id="to_token_img" />
<span id="to_token_text"></span>
</div>
````I wiil add the repo after build maybe the problem is im calling script type=âtext/javascriptâ src="./main.js"></script to connect with react. i did import main.js itâs not working either because swapbox extension is .jsx`
What do you mean connect with React? Your project doesnât seem to be using it.
Itâs not clear what youâre trying to do and what youâve done already, more details would help. Your swapbox code just has empty elements. Are you trying to update these in JavaScript?
type or paste code here
import React from âreactâ
const Swap = () => {
return (
<React.Fragment>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<button id="login_button" class="btn btn-outline-primary my-2 my-sm-0" type="submit" >Sign in with Metamask</button>
</div>
</nav>
<div className="flex w-full justify-center self-center items-center gradient-bg-transactions">
<div class="container">
<div class="row">
<div class="col col-md-6 offset-md-6" id="window">
<div id="form">
<div class="swapbox">
<div class="swapbox_select token_select" id="from_token_select">
Token Select
<img class="token_image" id="from_token_img" />
<span id="from_token_text"></span>
</div>
<div class="swapbox_select">
<input class="number form-control" placeholder="amount" id="from_amount" />
</div>
</div>
<div class="swapbox">
<div class="swapbox_select token_select" id="to_token_select">
Token Select
<img class="token_image" id="to_token_img" />
<span id="to_token_text"></span>
</div>
<div class="swapbox_select">
<input class="number form-control" placeholder="amount" id="to_amount" />
</div>
</div>
<div>Estimated Gas: <span id="gas_estimate"></span></div>
<button disabled class="btn btn-large btn-primary btn-block" id="swap_button">
Swap
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="token_modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select token</h5>
<button id="modal_close" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="token_list"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./main.js"></script>
</React.Fragment>
)
}
export default Swap
actually im bringing html to react so i used react.fragment
const appid
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: "eth", // The blockchain you want to use (eth/bsc/polygon)
});
tokens = result.tokens;
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: "eth", // 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 !== "ETH") {
const allowance = await Moralis.Plugins.oneInch.hasAllowance({
chain: "eth", // 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: "eth", // 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: "eth", // 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;
Hi everyone. Iâm just getting started with the boilerplate, and I ran into an issue with using the yarn command in VSCode. Every time I try to use the command this is the error I get:
Anyone who knows how to fix this? Thanks in advance.
Have you installed yarn? You can run this command npm install -g yarn.
Hi. I did that and tried again and still got the same answer
You can try restart your terminal to see if it works and run yarn -v to be sure if yarn is installed