give your token a value and increase slippage. (with or without slippage changer).
Create a liquidity pool in for your custom token in one of the existing DEX aggregated by 1inch and be an intial liquidity provider. You can set the price of the token by having 50% of the token and 50% of other token (e.g. BNB) both with the same value. Once a liquidity pool exist, a price could be calculated from that, and it’ll automatically be supported by 1inch as well 
Just remember the reason why these tokens have price are the supply of the token within the liquidity pool, not some data gained from website such as CMC or Coingecko because they’re separate.
2 Likes
Can someone explain a better where this code need to be pasted
// Adding custom tokens
const customTokens = {
"0x2180F5cC1ddf117640963AE91868948bd3EF6838": {
address: "0x2180F5cC1ddf117640963AE91868948bd3EF6838",
decimals: 9,
logoURI:
"https://assets.coingecko.com/coins/images/20985/small/_VoQPDDs_400x400.jpg?1638168643",
name: "AscensionArcade",
symbol: "AAT",
},
};
when I try to put code in DEX.jsx I always getting this
src/components/DEX/DEX.jsx
Line 173:7: Insert `··` prettier/prettier
Line 278:23: Insert `··` prettier/prettier
Line 279:25: Insert `··` prettier/prettier
Line 280:1: Replace `························` with `··························` prettier/prettier
Line 281:23: Insert `··` prettier/prettier
Line 282:1: Insert `··` prettier/prettier
Thank you but this not working I dont know why
Does this code going to dex.jsx or useinchdex.js I m confused about diffrent answers…Thank you
It goes to useinchdex.js in setTokens
yes but then I have problem with compile with .then((tokens)
can you share your code what working for you that I can see where I have mistake.
I Solve problem with prettier
1.first open prettierrc and delete code only leave { }
2.second open prettierignore and add this line code src/
then is problem solved with compile.
you can just yarn format to format with prettier, but that works too
The addition of prettier is mainly to enforce good code styling
If I add custom token code how I can make that that token If working on bsc network only can be showed on binance smart chain not on eth and polygon?
hey bro, mine saying “‘tokens’ is defined but never used.”
please help
You can ignore this warning or just comment out the line where tokens is defined.
1 Like
hello with this code i only see the custom token on the list and without the above code i get this error in the image when hit SWAP
I AM GETTING this in console
Can we see your code, and what have you changed to the boilerplate? You can also click into the oneInch_swap 400 error to see what the error response is.
here’s my code, onclick it pops out the error box with also that error in console 
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 (
<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>
)}
<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>
);
also when i add custom token, in the selection dropdown only my token shows on the list, rest of the tokens are gone, where do i place the custom code.
const customTokens = {
"0x2180F5cC1ddf117640963AE91868948bd3EF6838": {
address: "0x2180F5cC1ddf117640963AE91868948bd3EF6838",
decimals: 9,
logoURI:
"https://assets.coingecko.com/coins/images/20985/small/_VoQPDDs_400x400.jpg?1638168643",
name: "AscensionArcade",
symbol: "AAT",
},
};