as I just said the issue persists, same problem.
regarding the link … that’s weird hmm…
Looks like an issue with that browser, I had this issue on Firefox as well. It works on Chrome/Edge. Try them or
https://ethereum-boilerplate.github.io/ethereum-boilerplate/
So the issue is not related to your local deployment of the boilerplate or similar code, that was the idea behind trying this. Try resetting your MetaMask account in Settings > Advanced and try MetaMask in a different browser.
done that same result
A few more things to try, change the BSC RPC in MetaMask, try a different wallet with BNB (can send some from this wallet to another one).
Works on my end. Only had issues trying to click the Swap button.
What in the heck…lol ohhkay not sure what to do… any advice on how to make those error messages more descriptive (like the boilerplate demo test we did) would be appreciated
If you mean the alert e.g. [object Object], you can try catch or change how they do it in the boilerplate code.
Well I’ll have a look at that then I guess, I wonder what the issue is. Did you use mobile? I just had a friend try it and he gets object object error , he may have been on my wifi network though… but that doesn’t makes sense because I have no issues buying other tokens.
No, I get that error when I put in an amount larger than my balance on desktop. Boilerplate uses alerts by default.
I just tried it on my 5g data plan in metamask browser after account reset and deleted cookies. Still same error.
okay so further testing with other peoples computers, and different networks on https://ethereum-boilerplate.github.io/ethereum-boilerplate/ concludes that if you buy with less than 0.01 it works but between 0.02bnb and 0.9bnb its gives the error but for whatever reason 0.1bnb works. this should be reproducible. how much have you been trying?
Unfortunately I cannot reproduce that, 0.04 BNB swap is prompting fine. Very odd, you said 0.01 wasn’t working and now it is. Hopefully someone else can chime in with a solution or something else to try.
I did not, I said amounts above 0.01 don’t work and I was testing 0.04
its soo weird i dont get how 0.04 works for you when i’ve tried with multiple people , multiple wallets , on different ISP’s
Still have this issue, and have reports from multiple people who have tested. would be great to get a lead on whats happening here.
Not sure if you’ve done this but try initiating a static swap request with the 1inch plugin and do this within the same project to see if it works. If it doesn’t, then again in a separate, new project with just the swap to simulate/do the same thing in the boilerplate.
Updated to get past immediate errors for slippage (may still have issues):
DEX.jsx
import { useState, useEffect, useMemo } from "react";
import { useMoralis } from "react-moralis";
import InchModal from "./components/InchModal";
import useInchDex from "hooks/useInchDex";
import { Button, Card, Image, Input, InputNumber, Modal } from "antd";
import Text from "antd/lib/typography/Text";
import { ArrowDownOutlined } from "@ant-design/icons";
import { useTokenPrice } from "react-moralis";
import { tokenValue } from "helpers/formatters";
import { getWrappedNative } from "helpers/networks";
// import { useOneInchQuote } from "react-moralis";
const styles = {
card: {
width: "430px",
boxShadow: "0 0.5rem 1.2rem rgb(189 197 209 / 20%)",
border: "1px solid #e7eaf3",
borderRadius: "1rem",
fontSize: "16px",
fontWeight: "500",
},
input: {
padding: "0",
fontWeight: "500",
fontSize: "23px",
display: "block",
width: "100%",
},
priceSwap: {
display: "flex",
justifyContent: "space-between",
fontSize: "15px",
color: "#434343",
marginTop: "8px",
padding: "0 10px",
},
};
const nativeAddress = "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
const chainIds = {
"0x1": "eth",
"0x38": "bsc",
"0x89": "polygon",
};
const getChainIdByName = (chainName) => {
for (let chainId in chainIds) {
if (chainIds[chainId] === chainName) return chainId;
}
};
const IsNative = (address) =>
address === "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
function DEX({ chain, customTokens = {}, slippage }) {
const { trySwap, tokenList, getQuote } = useInchDex(chain);
const { Moralis, isInitialized, chainId } = useMoralis();
const [isFromModalActive, setFromModalActive] = useState(false);
const [isToModalActive, setToModalActive] = useState(false);
const [fromToken, setFromToken] = useState();
const [toToken, setToToken] = useState();
const [fromAmount, setFromAmount] = useState();
const [quote, setQuote] = useState();
const [currentTrade, setCurrentTrade] = useState();
const { fetchTokenPrice } = useTokenPrice();
const [tokenPricesUSD, setTokenPricesUSD] = useState({});
const [newslippage, setSlippage] = useState(slippage);
const tokens = useMemo(() => {
return { ...customTokens, ...tokenList };
}, [customTokens, tokenList]);
const fromTokenPriceUsd = useMemo(
() =>
tokenPricesUSD?.[fromToken?.["address"]]
? tokenPricesUSD[fromToken?.["address"]]
: null,
[tokenPricesUSD, fromToken],
);
const toTokenPriceUsd = useMemo(
() =>
tokenPricesUSD?.[toToken?.["address"]]
? tokenPricesUSD[toToken?.["address"]]
: null,
[tokenPricesUSD, toToken],
);
const fromTokenAmountUsd = useMemo(() => {
if (!fromTokenPriceUsd || !fromAmount) return null;
return `~$ ${(fromAmount * fromTokenPriceUsd).toFixed(4)}`;
}, [fromTokenPriceUsd, fromAmount]);
const toTokenAmountUsd = useMemo(() => {
if (!toTokenPriceUsd || !quote) return null;
return `~$ ${(
Moralis?.Units?.FromWei(quote?.toTokenAmount, quote?.toToken?.decimals) *
toTokenPriceUsd
).toFixed(4)}`;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [toTokenPriceUsd, quote]);
function changeSlippage(e) {
setSlippage(e.target.value);
}
// tokenPrices
useEffect(() => {
if (!isInitialized || !fromToken || !chain) return null;
const validatedChain = chain ? getChainIdByName(chain) : chainId;
const tokenAddress = IsNative(fromToken["address"])
? getWrappedNative(validatedChain)
: fromToken["address"];
fetchTokenPrice({
params: { chain: validatedChain, address: tokenAddress },
onSuccess: (price) =>
setTokenPricesUSD({
...tokenPricesUSD,
[fromToken["address"]]: price["usdPrice"],
}),
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [chain, isInitialized, fromToken]);
useEffect(() => {
if (!isInitialized || !toToken || !chain) return null;
const validatedChain = chain ? getChainIdByName(chain) : chainId;
const tokenAddress = IsNative(toToken["address"])
? getWrappedNative(validatedChain)
: toToken["address"];
fetchTokenPrice({
params: { chain: validatedChain, address: tokenAddress },
onSuccess: (price) =>
setTokenPricesUSD({
...tokenPricesUSD,
[toToken["address"]]: price["usdPrice"],
}),
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [chain, isInitialized, toToken]);
useEffect(() => {
if (!tokens || fromToken) return null;
setFromToken(tokens[nativeAddress]);
}, [tokens, fromToken]);
const ButtonState = useMemo(() => {
if (chainIds?.[chainId] !== chain)
return { isActive: false, text: `Switch to ${chain}` };
if (!fromAmount) return { isActive: false, text: "Enter an amount" };
if (fromAmount && currentTrade) return { isActive: true, text: "Swap" };
return { isActive: false, text: "Select tokens" };
}, [fromAmount, currentTrade, chainId, chain]);
useEffect(() => {
if (fromToken && toToken && fromAmount)
setCurrentTrade({ fromToken, toToken, fromAmount, chain, newslippage });
}, [toToken, fromToken, fromAmount, chain, newslippage]);
useEffect(() => {
if (currentTrade) getQuote(currentTrade).then((quote) => setQuote(quote));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentTrade]);
const PriceSwap = () => {
const Quote = quote;
if (!Quote || !tokenPricesUSD?.[toToken?.["address"]]) return null;
if (Quote?.statusCode === 400) return <>{Quote.message}</>;
console.log(Quote);
const { fromTokenAmount, toTokenAmount } = Quote;
const { symbol: fromSymbol } = fromToken;
const { symbol: toSymbol } = toToken;
const pricePerToken = parseFloat(
tokenValue(fromTokenAmount, fromToken["decimals"]) /
tokenValue(toTokenAmount, toToken["decimals"]),
).toFixed(6);
return (
<Text style={styles.priceSwap}>
Price:{" "}
<Text>{`1 ${toSymbol} = ${pricePerToken} ${fromSymbol} ($${tokenPricesUSD[
[toToken["address"]]
].toFixed(6)})`}</Text>
</Text>
);
};
return (
<>
<Card style={styles.card} bodyStyle={{ padding: "18px" }}>
<Card
style={{ borderRadius: "1rem" }}
bodyStyle={{ padding: "0.8rem" }}
>
<div
style={{ marginBottom: "5px", fontSize: "14px", color: "#434343" }}
>
From
</div>
<div
style={{
display: "flex",
flexFlow: "row nowrap",
}}
>
<div>
<InputNumber
bordered={false}
placeholder="0.00"
style={{ ...styles.input, marginLeft: "-10px" }}
onChange={setFromAmount}
value={fromAmount}
/>
<Text style={{ fontWeight: "600", color: "#434343" }}>
{fromTokenAmountUsd}
</Text>
</div>
<Button
style={{
height: "fit-content",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderRadius: "0.6rem",
padding: "5px 10px",
fontWeight: "500",
fontSize: "17px",
gap: "7px",
border: "none",
}}
onClick={() => setFromModalActive(true)}
>
{fromToken ? (
<Image
src={
fromToken?.logoURI ||
"https://etherscan.io/images/main/empty-token.png"
}
alt="nologo"
width="30px"
preview={false}
style={{ borderRadius: "15px" }}
/>
) : (
<span>Select a token</span>
)}
<span>{fromToken?.symbol}</span>
<Arrow />
</Button>
</div>
</Card>
<div
style={{ display: "flex", justifyContent: "center", padding: "10px" }}
>
<ArrowDownOutlined />
</div>
<Card
style={{ borderRadius: "1rem" }}
bodyStyle={{ padding: "0.8rem" }}
>
<div
style={{ marginBottom: "5px", fontSize: "14px", color: "#434343" }}
>
To
</div>
<div
style={{
display: "flex",
flexFlow: "row nowrap",
}}
>
<div>
<Input
bordered={false}
placeholder="0.00"
style={styles.input}
readOnly
value={
quote
? parseFloat(
Moralis?.Units?.FromWei(
quote?.toTokenAmount,
quote?.toToken?.decimals,
),
).toFixed(6)
: ""
}
/>
<Text style={{ fontWeight: "600", color: "#434343" }}>
{toTokenAmountUsd}
</Text>
</div>
<Button
style={{
height: "fit-content",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderRadius: "0.6rem",
padding: "5px 10px",
fontWeight: "500",
fontSize: "17px",
gap: "7px",
border: "none",
}}
onClick={() => setToModalActive(true)}
type={toToken ? "default" : "primary"}
>
{toToken ? (
<Image
src={
toToken?.logoURI ||
"https://etherscan.io/images/main/empty-token.png"
}
alt="nologo"
width="30px"
preview={false}
style={{ borderRadius: "15px" }}
/>
) : (
<span>Select a token</span>
)}
<span>{toToken?.symbol}</span>
<Arrow />
</Button>
</div>
</Card>
{quote && (
<div>
<Text
style={{
display: "flex",
justifyContent: "space-between",
fontSize: "15px",
color: "#434343",
marginTop: "8px",
padding: "0 10px",
}}
>
Estimated Gas: <Text>{quote?.estimatedGas}</Text>
</Text>
<PriceSwap />
</div>
)}
<div
style={{
display: "flex",
justifyContent: "space-between",
padding: "5px 10px",
}}
>
<label htmlFor="">Slippage</label>
<input
type="range"
min="0"
onChange={changeSlippage}
value={newslippage}
max="50"
/>
<input
type="number"
onChange={changeSlippage}
value={newslippage}
max="50"
min="0"
name=""
placeholder="slippage"
id=""
/>
</div>
<Button
type="primary"
size="large"
style={{
width: "100%",
marginTop: "15px",
borderRadius: "0.6rem",
height: "50px",
}}
onClick={() => trySwap(currentTrade)}
disabled={!ButtonState.isActive}
>
{ButtonState.text}
</Button>
</Card>
<Modal
title="Select a token"
visible={isFromModalActive}
onCancel={() => setFromModalActive(false)}
bodyStyle={{ padding: 0 }}
width="450px"
footer={null}
>
<InchModal
open={isFromModalActive}
onClose={() => setFromModalActive(false)}
setToken={setFromToken}
tokenList={tokens}
/>
</Modal>
<Modal
title="Select a token"
visible={isToModalActive}
onCancel={() => setToModalActive(false)}
bodyStyle={{ padding: 0 }}
width="450px"
footer={null}
>
<InchModal
open={isToModalActive}
onClose={() => setToModalActive(false)}
setToken={setToToken}
tokenList={tokens}
/>
</Modal>
</>
);
}
export default DEX;
const Arrow = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
strokeWidth="2"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<polyline points="6 9 12 15 18 9" />
</svg>
);
useInchDex.js line 73
slippage: params.newslippage ? params.newslippage : 1,
App.jsx line 98
<Tabs.TabPane tab={<span>Ethereum</span>} key="1">
<DEX chain="eth" slippage={12} />
</Tabs.TabPane>
<Tabs.TabPane tab={<span>Binance Smart Chain</span>} key="2">
<DEX chain="bsc" slippage={12} />
</Tabs.TabPane>
<Tabs.TabPane tab={<span>Polygon</span>} key="3">
<DEX chain="polygon" slippage={12} />
</Tabs.TabPane>
Downloaded fresh Boilerplate again, 1inch plugin installed, added the slippage bar via code from glad. still getting same error on every device I try. and also with the online demo on github https://ethereum-boilerplate.github.io/ethereum-boilerplate
seems others have had similar problem, hey look he’s trying to buy with 0.04
Swap using 1inch plugin in BSC chain
and here
Error when using 1inch Dex in ethereum-boilerplate
and here
1inch Plugin Swap Issue
Notice 17 decimals on the left and 18 on the right…
it WILL process a transaction of 0.03 or less bnb to busd
it WILL NOT process a transaction of 0.04 bnb to busd, says i dont have enough… I do
gives this error
{"error":true,"data":"{\n \"statusCode\": 500,\n \"message\": \"Not enough 0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE. Amount: 40000000000000000. Balance: 381274379930801537.\"\n}"}
but it WILL process a transaction of 0.1 bnb to busd
Turns out it was a bug in Moralis 1inch plugin. Up date to latest version for fix.
3 Likes