Hi @Hacker
This bug was fixed on the latest version. Pull the latest version or you can fix it yourself: ethereum-boilerplate\src\components\DEX\DEX.jsx. Change the code in the useEffect hook on 125th line to:
useEffect(() => {
if (!tokens || fromToken) return null;
setFromToken(tokens[nativeAddress]);
}, [tokens, fromToken]);
@Yomoo This code is what I have in my build. Nothing to change.
useEffect(() => {
if (!tokens || fromToken) return null;
setFromToken(tokens[nativeAddress]);
}, [tokens, fromToken]);
Post full code of the component
This is my 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 = {} }) {
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 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]);
// 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 });
}, [toToken, fromToken, fromAmount, chain]);
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 (
Price:{" "}
{1 ${toSymbol} = ${pricePerToken} ${fromSymbol} ($${tokenPricesUSD[[toToken["address"]]].toFixed(6)})}
);
};
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
style={{
display: “flex”,
flexFlow: “row nowrap”,
}}
>
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" />
Can you please tell me where the code is in the boilerplate to create NFT? I learn how to sell, buy NFT from youtube. But user should be able to create NFT collection and upload NFT. Is that in the boilerplate? where?
Thank you.
Hi everyone,
I am new to this amazing community. A few weeks ago I was testing the Ethereum-boilerplate and It was working fine for me. Yesterday, and after the new update, I start have issuing deploying the new git on Vercel.com.
I have too many warnings and errors completing the deployment.
Here is my log!
Treating warnings as errors because process.env.CI = true.
Failed to compile.
Module not found: Can’t resolve ‘contracts/contractInfo.json’ in ‘/vercel/path0/src/components/Contract’
Error: Command “react-scripts build” exited with 1
I am not really sure, how I can generate another contracts/contractInfo.json
I was not able to fix this issue. Any luck from your end?
Hi @jphoto
Basic ethereum-boilerplate doesn’t have this functionality, it’s in the NFT marketplace boilerplate. Take a look at https://www.youtube.com/watch?v=WZWCzsB1xUE&list=PLFPZ8ai7J-iR4F882O2mBjqydynG9iDZS
Hi @Cedro
For now, you need to enable deploy functionality even with warning messages(normal practice). There is a detailed guide: https://github.com/vercel/vercel/discussions/5566#discussioncomment-566413
The previous version had no warnings, but this one has them. We will disable them in the coming version
i faced this error each time i use yarn start
C:\Users\USER\Desktop\NFTDevelopment\NFT> yarn start
yarn run v1.22.17
warning package.json: No license field
error Command "start" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Hi Yomoo,
I was able to fix this by uploading my contract [contractInfo.json] to the repo before deploying. Now it’s working just fine. Was that right?
it’s also a possible solution. Because the component checks if contractInfo.json exists
Hmm, I guess it’s better to add a blank contractInfo.json to the boilerplate. Thank you @Cedro for the idea.
blank contractInfo.json didn’t work for me. I had to deploy a new contract and upload the new contractInfo.json to this directory */ethereum-boilerplate/src/contracts/contractInfo.json.
Add [ CI=false npm run build] in the build command.
Yarn install.
Now its working just fine.
it works now but i saw this warning message in my terminal
./src/components/Contract/ContractResolver.jsx
Module not found: Can't resolve 'contracts/contractInfo.json' in 'C:\Users\USER\Desktop\NFTDevelopment\NFT\ethereum-boilerplate\src\components\Contract'
src\components\Account\Account.jsx
Line 47:70: 'web3' is assigned a value but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
So you guys are great! I have this working fine on my local machine.
Now I’m trying to run it on a linux server. Is there anything obvious I need to change?
Thank you!
This was fixed on the new version
