ghostchain/ghost-dao-interface
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change dai naming to reserve; flexible network representation

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2025-11-04 14:40:21 +03:00
parent 3113810d5c
commit e153760532
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
21 changed files with 295 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "ghost-dao-interface", "name": "ghost-dao-interface",
"private": true, "private": true,
"version": "0.3.3", "version": "0.3.4",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

27
src/assets/tokens/ETC.svg Normal file
View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="uuid-723be126-5781-41fb-bcc4-bdb45b6b02eb" data-name="EthereumClassic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.4 490.4">
<defs>
<style>
.uuid-a01d8d83-9865-40b4-947f-2b6803a6d620 {
fill: #0b8311;
}
.uuid-2015837c-ff9d-4f6a-bb1d-31a3faa20f59 {
fill: #3ab83a;
}
.uuid-dcb9c215-f551-46cc-8a77-32519c324ec8 {
fill: #146714;
}
</style>
</defs>
<g id="uuid-2f5b15ae-2601-440f-a162-6e46c060a66e" data-name="EthereumClassicLogo">
<path id="uuid-4255207d-9c11-4e06-b23d-b1e6c0b336cf" data-name="EthereumClassicBackground" d="m245.2,490.4c135.4,0,245.2-109.8,245.2-245.2S380.6,0,245.2,0,0,109.8,0,245.2c.1,135.4,109.8,245.2,245.2,245.2Z"/>
<g id="uuid-95ae1854-3c20-440e-b7f3-d33adda6d257" data-name="EthereumClassicIcon">
<path id="uuid-b0109fdc-5144-47e3-be85-fe9368b87b3b" data-name="path1599" class="uuid-2015837c-ff9d-4f6a-bb1d-31a3faa20f59" d="m144.29,259.73c35.56,18.89,72.67,38.65,101.33,53.95l100.5-53.95c-36.39,54.06-66.71,99.06-100.5,148.87-33.85-49.7-71.23-104.54-101.33-148.87Zm3.87-14.91l97.57-52.07,96.3,51.69-96.25,52.12-97.63-51.74Zm97.46-68.75l-101.33,53.34,100.89-147.71,100.94,148.04-100.5-53.67Z"/>
<path id="uuid-4d16a1f3-17b9-4f57-9e83-11954024333f" data-name="path1593" class="uuid-a01d8d83-9865-40b4-947f-2b6803a6d620" d="m245.61,313.68l100.5-53.95c-36.39,54.06-100.5,148.87-100.5,148.87v-94.92Zm.11-120.93l96.3,51.69-96.25,52.12-.05-103.81Zm-.11-16.68l-.44-94.37,100.94,148.04-100.5-53.67Z"/>
<path id="uuid-957b728e-6255-4f68-ab1c-d23105c266ea" data-name="path1603" class="uuid-a01d8d83-9865-40b4-947f-2b6803a6d620" d="m148.15,244.82l97.58,8.01,96.3-8.34-96.25,52.13-97.63-51.8Z"/>
<path id="uuid-6bf52594-e28e-460d-a05f-c1fb25c91e38" data-name="path1606" class="uuid-dcb9c215-f551-46cc-8a77-32519c324ec8" d="m245.72,252.83l96.3-8.34-96.25,52.13-.05-43.79Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

43
src/assets/tokens/ETH.svg
View File

@ -1,13 +1,36 @@
<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 32 32"> <?xml version="1.0" encoding="UTF-8"?>
<g fill="none" fill-rule="evenodd"> <svg id="uuid-39ebc51d-db02-45d2-ad4b-e7ae31bb915b" data-name="Ethereum" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
<circle cx="16" cy="16" r="16" fill="#627EEA"/> <defs>
<g fill="#FFF" fill-rule="nonzero"> <style>
<path fill-opacity=".602" d="M16.498 4v8.87l7.497 3.35z"/> .uuid-e080659c-91a4-4965-9905-603394020b2c {
<path d="M16.498 4L9 16.22l7.498-3.35z"/> fill: #fff;
<path fill-opacity=".602" d="M16.498 21.968v6.027L24 17.616z"/> }
<path d="M16.498 27.995v-6.028L9 17.616z"/>
<path fill-opacity=".2" d="M16.498 20.573l7.497-4.353-7.497-3.348z"/> .uuid-ca9afedd-40fd-4006-99f9-d2c3cf46bc21 {
<path fill-opacity=".602" d="M9 16.22l7.498 4.353v-7.701z"/> fill: #627eea;
}
.uuid-bb37a35d-b2ce-440e-86f6-0142a60ec718 {
fill: rgba(255, 255, 255, .2);
}
.uuid-933ff958-c1b5-4023-94a9-0cca9b4aab50 {
fill: rgba(255, 255, 255, .6);
}
</style>
</defs>
<g id="uuid-c49657cc-831e-4816-83c0-b3ceca5eead0" data-name="Ethereum">
<g id="uuid-559a2235-ac8a-4942-be49-ac3193ebd3cd" data-name="EthereumBackground">
<circle class="uuid-ca9afedd-40fd-4006-99f9-d2c3cf46bc21" cx="125" cy="125" r="122.5"/>
<path class="uuid-e080659c-91a4-4965-9905-603394020b2c" d="m125,5c32.05,0,62.19,12.48,84.85,35.15,22.67,22.66,35.15,52.8,35.15,84.85s-12.48,62.19-35.15,84.85-52.8,35.15-84.85,35.15-62.19-12.48-84.85-35.15C17.48,187.19,5,157.05,5,125s12.48-62.19,35.15-84.85C62.81,17.48,92.95,5,125,5m0-5C55.96,0,0,55.96,0,125s55.96,125,125,125,125-55.96,125-125S194.04,0,125,0h0Z"/>
</g>
<g id="uuid-0bd28738-f2c4-4934-8365-8668de7b64ac" data-name="EthereumIcon">
<path class="uuid-933ff958-c1b5-4023-94a9-0cca9b4aab50" d="m128.89,31.25v69.3l58.57,26.17-58.57-95.47Z"/>
<path class="uuid-e080659c-91a4-4965-9905-603394020b2c" d="m128.89,31.25l-58.58,95.47,58.58-26.17V31.25Z"/>
<path class="uuid-933ff958-c1b5-4023-94a9-0cca9b4aab50" d="m128.89,171.62v47.09l58.61-81.09-58.61,34Z"/>
<path class="uuid-e080659c-91a4-4965-9905-603394020b2c" d="m128.89,218.71v-47.09l-58.58-33.99,58.58,81.09Z"/>
<path class="uuid-bb37a35d-b2ce-440e-86f6-0142a60ec718" d="m128.89,160.73l58.57-34.01-58.57-26.16v60.16Z"/>
<path class="uuid-933ff958-c1b5-4023-94a9-0cca9b4aab50" d="m70.31,126.72l58.58,34.01v-60.16l-58.58,26.16Z"/>
</g> </g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 617 B

After

Width:  |  Height:  |  Size: 2.0 KiB

36
src/assets/tokens/wETH.svg
View File

@ -1,36 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="uuid-39ebc51d-db02-45d2-ad4b-e7ae31bb915b" data-name="Ethereum" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
<defs>
<style>
.uuid-e080659c-91a4-4965-9905-603394020b2c {
fill: #fff;
}
.uuid-ca9afedd-40fd-4006-99f9-d2c3cf46bc21 {
fill: #627eea;
}
.uuid-bb37a35d-b2ce-440e-86f6-0142a60ec718 {
fill: rgba(255, 255, 255, .2);
}
.uuid-933ff958-c1b5-4023-94a9-0cca9b4aab50 {
fill: rgba(255, 255, 255, .6);
}
</style>
</defs>
<g id="uuid-c49657cc-831e-4816-83c0-b3ceca5eead0" data-name="Ethereum">
<g id="uuid-559a2235-ac8a-4942-be49-ac3193ebd3cd" data-name="EthereumBackground">
<circle class="uuid-ca9afedd-40fd-4006-99f9-d2c3cf46bc21" cx="125" cy="125" r="122.5"/>
<path class="uuid-e080659c-91a4-4965-9905-603394020b2c" d="m125,5c32.05,0,62.19,12.48,84.85,35.15,22.67,22.66,35.15,52.8,35.15,84.85s-12.48,62.19-35.15,84.85-52.8,35.15-84.85,35.15-62.19-12.48-84.85-35.15C17.48,187.19,5,157.05,5,125s12.48-62.19,35.15-84.85C62.81,17.48,92.95,5,125,5m0-5C55.96,0,0,55.96,0,125s55.96,125,125,125,125-55.96,125-125S194.04,0,125,0h0Z"/>
</g>
<g id="uuid-0bd28738-f2c4-4934-8365-8668de7b64ac" data-name="EthereumIcon">
<path class="uuid-933ff958-c1b5-4023-94a9-0cca9b4aab50" d="m128.89,31.25v69.3l58.57,26.17-58.57-95.47Z"/>
<path class="uuid-e080659c-91a4-4965-9905-603394020b2c" d="m128.89,31.25l-58.58,95.47,58.58-26.17V31.25Z"/>
<path class="uuid-933ff958-c1b5-4023-94a9-0cca9b4aab50" d="m128.89,171.62v47.09l58.61-81.09-58.61,34Z"/>
<path class="uuid-e080659c-91a4-4965-9905-603394020b2c" d="m128.89,218.71v-47.09l-58.58-33.99,58.58,81.09Z"/>
<path class="uuid-bb37a35d-b2ce-440e-86f6-0142a60ec718" d="m128.89,160.73l58.57-34.01-58.57-26.16v60.16Z"/>
<path class="uuid-933ff958-c1b5-4023-94a9-0cca9b4aab50" d="m70.31,126.72l58.58,34.01v-60.16l-58.58,26.16Z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

18
src/components/Token/Token.jsx
View File

@ -5,7 +5,8 @@ import FtsoIcon from "../../assets/tokens/FTSO.svg?react";
import StnkIcon from "../../assets/tokens/STNK.svg?react"; import StnkIcon from "../../assets/tokens/STNK.svg?react";
import GhstIcon from "../../assets/tokens/GHST.svg?react"; import GhstIcon from "../../assets/tokens/GHST.svg?react";
import DaiIcon from "../../assets/tokens/DAI.svg?react"; import DaiIcon from "../../assets/tokens/DAI.svg?react";
import WethIcon from "../../assets/tokens/wETH.svg?react"; import EthIcon from "../../assets/tokens/ETH.svg?react";
import EtcIcon from "../../assets/tokens/ETC.svg?react";
import UnknownIcon from "../../assets/tokens/Unknown.svg?react"; import UnknownIcon from "../../assets/tokens/Unknown.svg?react";
const PREFIX = "Token"; const PREFIX = "Token";
@ -23,8 +24,7 @@ const StyledSvgIcon = styled(SvgIcon)(() => ({
}, },
})); }));
const Token = ({ name, viewBox = "0 0 260 260", fontSize = "large", ...props }) => { export const parseKnownToken = (name) => {
const parseKnownToken = (name) => {
let icon; let icon;
switch (name?.toUpperCase()) { switch (name?.toUpperCase()) {
case "FTSO": case "FTSO":
@ -52,13 +52,16 @@ const Token = ({ name, viewBox = "0 0 260 260", fontSize = "large", ...props })
icon = DaiIcon; icon = DaiIcon;
break; break;
case "ETH": case "ETH":
icon = WethIcon; icon = EthIcon;
break; break;
case "WETH": case "WETH":
icon = WethIcon; icon = EthIcon;
break; break;
case "METC": case "METC":
icon = WethIcon; icon = EtcIcon;
break;
case "WETC":
icon = EtcIcon;
break; break;
default: default:
icon = UnknownIcon; icon = UnknownIcon;
@ -66,9 +69,10 @@ const Token = ({ name, viewBox = "0 0 260 260", fontSize = "large", ...props })
return icon; return icon;
} }
const Token = ({ name, viewBox = "0 0 260 260", fontSize = "large", ...props }) => {
return ( return (
<StyledSvgIcon <StyledSvgIcon
viewBox={viewBox} inheritViewBox
fontSize={fontSize} fontSize={fontSize}
component={parseKnownToken(name)} component={parseKnownToken(name)}
{...props} {...props}

6
src/components/TopBar/SelectNetwork.jsx
View File

@ -9,7 +9,7 @@ import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select'; import Select from '@mui/material/Select';
import { isNetworkAvailable } from "../../constants"; import { isNetworkAvailable } from "../../constants";
import EthIcon from "../../assets/tokens/ETH.svg?react"; import { parseKnownToken } from "../../components/Token/Token";
import { useSwitchChain } from 'wagmi'; import { useSwitchChain } from 'wagmi';
import toast from "react-hot-toast"; import toast from "react-hot-toast";
@ -53,11 +53,11 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, s
} }
}} }}
> >
{chains.map(chain => { {chains.map((chain, i) => {
return ( return (
<MenuItem key={chain.name} value={chain.id}> <MenuItem key={chain.name} value={chain.id}>
<Box gap="10px" display="flex" flexDirection="row" alignItems="center"> <Box gap="10px" display="flex" flexDirection="row" alignItems="center">
<SvgIcon component={EthIcon} viewBox="0 0 32 32" /> <SvgIcon component={parseKnownToken(chain?.nativeCurrency?.symbol)} inheritViewBox />
{!small && <Typography>{chain.name}</Typography>} {!small && <Typography>{chain.name}</Typography>}
</Box> </Box>
</MenuItem> </MenuItem>

6
src/components/TopBar/Wallet/InitialWalletView.tsx
View File

@ -22,7 +22,7 @@ import { PrimaryButton, SecondaryButton } from "../../Button";
import ArrowUpIcon from "../../../assets/icons/arrow-up.svg?react"; import ArrowUpIcon from "../../../assets/icons/arrow-up.svg?react";
import { formatCurrency, shorten } from "../../../helpers"; import { formatCurrency, shorten } from "../../../helpers";
import { DecimalBigNumber } from "../../../helpers/DecimalBigNumber"; import { DecimalBigNumber } from "../../../helpers/DecimalBigNumber";
import { DAI_ADDRESSES, FTSO_ADDRESSES } from "../../../constants/addresses"; import { RESERVE_ADDRESSES, FTSO_ADDRESSES } from "../../../constants/addresses";
import { useAccount, useDisconnect } from "wagmi"; import { useAccount, useDisconnect } from "wagmi";
@ -156,9 +156,9 @@ function InitialWalletView({ isWalletOpen, address, chainId, onClose }) {
> >
<SecondaryButton <SecondaryButton
fullWidth fullWidth
onClick={() => onBtnClick("uniswap", DAI_ADDRESSES[chainId], FTSO_ADDRESSES[chainId])} onClick={() => onBtnClick("uniswap", RESERVE_ADDRESSES[chainId], FTSO_ADDRESSES[chainId])}
> >
<Typography>{`${tokens?.ftso?.symbol}-${tokens?.dai?.symbol} on Uniswap`}</Typography> <Typography>{`${tokens?.ftso?.symbol}-${tokens?.reserve?.symbol} on Uniswap`}</Typography>
</SecondaryButton> </SecondaryButton>
</Box> </Box>

70
src/components/TopBar/Wallet/Token.tsx
View File

@ -13,6 +13,8 @@ import { ChangeEvent, useState, useEffect } from "react";
import { useNavigate, createSearchParams } from "react-router-dom"; import { useNavigate, createSearchParams } from "react-router-dom";
import { useQuery } from "react-query"; import { useQuery } from "react-query";
import { formatCurrency, formatNumber } from "../../../helpers"; import { formatCurrency, formatNumber } from "../../../helpers";
import { tokenNameConverter } from "../../../helpers/tokenConverter";
import { isNetworkLegacy } from "../../../constants";
import GhostStyledIcon from "../../Icon/GhostIcon"; import GhostStyledIcon from "../../Icon/GhostIcon";
import TokenStack from "../../TokenStack/TokenStack"; import TokenStack from "../../TokenStack/TokenStack";
@ -68,7 +70,7 @@ export const Token = (props) => {
onAddTokenToWallet, onAddTokenToWallet,
expanded, expanded,
onChangeExpanded, onChangeExpanded,
daiAddress, reserveAddress,
onClose, onClose,
isPool isPool
} = props; } = props;
@ -76,7 +78,7 @@ export const Token = (props) => {
const navigate = useNavigate(); const navigate = useNavigate();
const useLink = (symbol, fromAddress, toAddress, isPool) => { const useLink = (symbol, fromAddress, toAddress, isPool) => {
if (symbol.toUpperCase() === "GDAI") { if (symbol.toUpperCase() === "RESERVE") {
navigate({ pathname: "/faucet" }) navigate({ pathname: "/faucet" })
} else { } else {
navigate({ navigate({
@ -130,10 +132,10 @@ export const Token = (props) => {
<Typography>Add to Wallet</Typography> <Typography>Add to Wallet</Typography>
</PrimaryButton> </PrimaryButton>
<SecondaryButton <SecondaryButton
onClick={() => useLink(symbol, daiAddress, address, isPool)} onClick={() => useLink(symbol, reserveAddress, address, isPool)}
fullWidth fullWidth
> >
<Typography>Get on {symbol.toUpperCase() === "GDAI" ? "Faucet" : "Uniswap"}</Typography> <Typography>Get on {symbol?.toUpperCase() === "RESERVE" ? "Faucet" : "Uniswap"}</Typography>
</SecondaryButton> </SecondaryButton>
</Box> </Box>
</Box> </Box>
@ -147,10 +149,10 @@ const sumObjValues = (obj: Record<string, string> = {}) =>
export const useWallet = (chainId, userAddress) => { export const useWallet = (chainId, userAddress) => {
const { const {
balance: daiBalance, balance: reserveBalance,
refetch: daiRefetch, refetch: reserveRefetch,
contractAddress: daiAddress, contractAddress: reserveAddress,
} = useBalance(chainId, "GDAI", userAddress); } = useBalance(chainId, "RESERVE", userAddress);
const { const {
balance: ftsoBalance, balance: ftsoBalance,
refetch: ftsoRefetch, refetch: ftsoRefetch,
@ -167,32 +169,34 @@ export const useWallet = (chainId, userAddress) => {
contractAddress: ghstAddress, contractAddress: ghstAddress,
} = useBalance(chainId, "GHST", userAddress); } = useBalance(chainId, "GHST", userAddress);
const { const {
balance: lpDaiFtsoBalance, balance: lpReserveFtsoBalance,
refetch: lpDaiFtsoRefetch, refetch: lpReserveFtsoRefetch,
contractAddress: lpDaiFtsoBalanceAddress, contractAddress: lpReserveFtsoBalanceAddress,
} = useBalance(chainId, "GDAI_FTSO", userAddress); } = useBalance(chainId, "RESERVE_FTSO", userAddress);
const daiPrice = useDaiPrice(chainId); const reservePrice = useDaiPrice(chainId);
const ftsoPrice = useFtsoPrice(chainId); const ftsoPrice = useFtsoPrice(chainId);
const stnkPrice = useStnkPrice(chainId); const stnkPrice = useStnkPrice(chainId);
const ghstPrice = useGhstPrice(chainId); const ghstPrice = useGhstPrice(chainId);
const lpDaiFtsoPrice = useLpValuation(chainId, "GDAI_FTSO", 1000000000000000000n); const lpReserveFtsoPrice = useLpValuation(chainId, "RESERVE_FTSO", 1000000000000000000n);
const { symbol: daiSymbol } = useTokenSymbol(chainId, "GDAI"); const { symbol: reserveSymbol } = useTokenSymbol(chainId, "RESERVE");
const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO"); const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO");
const { symbol: stnkSymbol } = useTokenSymbol(chainId, "STNK"); const { symbol: stnkSymbol } = useTokenSymbol(chainId, "STNK");
const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST"); const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");
const { symbol: lpDaiFtsoSymbol } = useTokenSymbol(chainId, "GDAI_FTSO"); const { symbol: lpReserveFtsoSymbol } = useTokenSymbol(chainId, "RESERVE_FTSO");
const tokens = { const tokens = {
dai: { reserve: {
symbol: daiSymbol, symbol: reserveSymbol,
address: daiAddress, address: reserveAddress,
balance: daiBalance, balance: reserveBalance,
price: daiPrice, price: reservePrice,
icons: ["GDAI"], icons: isNetworkLegacy(chainId) ? ["GDAI"] : [tokenNameConverter(chainId, reserveSymbol)],
externalUrl: "https://ghostchain.io/wp-content/uploads/2025/03/gDAI.svg", externalUrl: isNetworkLegacy(chainId)
refetch: daiRefetch, ? "https://ghostchain.io/wp-content/uploads/2025/03/gDAI.svg"
: "https://ghostchain.io/wp-content/uploads/2025/11/6A-Classic-ETC-Token.svg",
refetch: reserveRefetch,
}, },
ftso: { ftso: {
symbol: ftsoSymbol, symbol: ftsoSymbol,
@ -221,15 +225,15 @@ export const useWallet = (chainId, userAddress) => {
externalUrl: "https://ghostchain.io/wp-content/uploads/2025/03/GHST.svg", externalUrl: "https://ghostchain.io/wp-content/uploads/2025/03/GHST.svg",
refetch: ghstRefetch, refetch: ghstRefetch,
}, },
daiFtso: { reserveFtso: {
isPool: true, isPool: true,
symbol: lpDaiFtsoSymbol, symbol: lpReserveFtsoSymbol,
address: lpDaiFtsoBalanceAddress, address: lpReserveFtsoBalanceAddress,
balance: lpDaiFtsoBalance, balance: lpReserveFtsoBalance,
price: lpDaiFtsoPrice, price: lpReserveFtsoPrice,
icons: ["GDAI", "FTSO"], icons: ["FTSO", isNetworkLegacy(chainId) ? "GDAI" : tokenNameConverter(chainId, reserveSymbol)],
externalUrl: "https://ghostchain.io/wp-content/uploads/2025/03/uni-v2.svg", externalUrl: "https://ghostchain.io/wp-content/uploads/2025/03/uni-v2.svg",
refetch: lpDaiFtsoRefetch, refetch: lpReserveFtsoRefetch,
} }
}; };
@ -246,12 +250,12 @@ export const useWallet = (chainId, userAddress) => {
export const Tokens = ({ address, tokens, onClose }) => { export const Tokens = ({ address, tokens, onClose }) => {
const [expanded, setExpanded] = useState(null); const [expanded, setExpanded] = useState(null);
const alwaysShowTokens = [tokens.dai, tokens.ftso, tokens.stnk, tokens.ghst, tokens.daiFtso]; const alwaysShowTokens = [tokens.reserve, tokens.ftso, tokens.stnk, tokens.ghst, tokens.reserveFtso];
const tokenProps = (token) => ({ const tokenProps = (token) => ({
...token, ...token,
expanded: expanded === token.symbol, expanded: expanded === token.symbol,
daiAddress: tokens.dai.address, reserveAddress: tokens.reserve.address,
onChangeExpanded: (e, isExpanded) => setExpanded(isExpanded ? token.symbol : null), onChangeExpanded: (e, isExpanded) => setExpanded(isExpanded ? token.symbol : null),
onAddTokenToWallet: () => addTokenToWallet(token, address), onAddTokenToWallet: () => addTokenToWallet(token, address),
onClose: () => onClose(), onClose: () => onClose(),

2
src/config.js
View File

@ -8,7 +8,7 @@ const mordor = defineChain({
nativeCurrency: { nativeCurrency: {
decimals: 18, decimals: 18,
name: 'METC', name: 'METC',
symbol: 'METC', symbol: 'mETC',
}, },
rpcUrls: { rpcUrls: {
default: { http: ['https://rpc.mordor.etccooperative.org'] }, default: { http: ['https://rpc.mordor.etccooperative.org'] },

2
src/constants/addresses.js
View File

@ -30,7 +30,7 @@ export const FTSO_STNK_LP_ADDRESSES = {
[NetworkId.TESTNET_MORDOR]: "0x0000000000000000000000000000000000000000", [NetworkId.TESTNET_MORDOR]: "0x0000000000000000000000000000000000000000",
} }
export const DAI_ADDRESSES = { export const RESERVE_ADDRESSES = {
[NetworkId.TESTNET_SEPOLIA]: "0x5f63a27a9214a0352F2EF8dAF1eD4974d713192B", [NetworkId.TESTNET_SEPOLIA]: "0x5f63a27a9214a0352F2EF8dAF1eD4974d713192B",
[NetworkId.TESTNET_HOODI]: "0x80c6676c334BCcE60b3CC852085B72143379CE58", [NetworkId.TESTNET_HOODI]: "0x80c6676c334BCcE60b3CC852085B72143379CE58",
[NetworkId.TESTNET_MORDOR]: "0x6af91B3763b5d020E0985f85555EB50e5852d7AC", [NetworkId.TESTNET_MORDOR]: "0x6af91B3763b5d020E0985f85555EB50e5852d7AC",

8
src/containers/Dex/Dex.jsx
View File

@ -26,7 +26,7 @@ import { Tab, Tabs } from "../../components/Tabs/Tabs";
import { import {
UNISWAP_V2_ROUTER, UNISWAP_V2_ROUTER,
UNISWAP_V2_FACTORY, UNISWAP_V2_FACTORY,
DAI_ADDRESSES, RESERVE_ADDRESSES,
FTSO_ADDRESSES, FTSO_ADDRESSES,
} from "../../constants/addresses"; } from "../../constants/addresses";
import { useTokenSymbol } from "../../hooks/tokens"; import { useTokenSymbol } from "../../hooks/tokens";
@ -56,7 +56,7 @@ const Dex = ({ chainId, address, connect }) => {
const [slippage, setSlippage] = useState(localStorage.getItem("dex-slippage") || "5"); const [slippage, setSlippage] = useState(localStorage.getItem("dex-slippage") || "5");
const [formatDecimals, setFormatDecimals] = useState(localStorage.getItem("dex-decimals") || "5"); const [formatDecimals, setFormatDecimals] = useState(localStorage.getItem("dex-decimals") || "5");
const [tokenAddressTop, setTokenAddressTop] = useState(DAI_ADDRESSES[chainId]); const [tokenAddressTop, setTokenAddressTop] = useState(RESERVE_ADDRESSES[chainId]);
const [tokenAddressBottom, setTokenAddressBottom] = useState(FTSO_ADDRESSES[chainId]); const [tokenAddressBottom, setTokenAddressBottom] = useState(FTSO_ADDRESSES[chainId]);
const { symbol: tokenNameTop } = useTokenSymbol(chainId, tokenAddressTop); const { symbol: tokenNameTop } = useTokenSymbol(chainId, tokenAddressTop);
@ -75,8 +75,8 @@ const Dex = ({ chainId, address, connect }) => {
setTokenAddressTop(currentQueryParameters.get("from")); setTokenAddressTop(currentQueryParameters.get("from"));
newQueryParameters.set("from", currentQueryParameters.get("from")); newQueryParameters.set("from", currentQueryParameters.get("from"));
} else { } else {
setTokenAddressTop(DAI_ADDRESSES[chainId]); setTokenAddressTop(RESERVE_ADDRESSES[chainId]);
newQueryParameters.set("from", DAI_ADDRESSES[chainId]); newQueryParameters.set("from", RESERVE_ADDRESSES[chainId]);
} }
if (currentQueryParameters.has("to")) { if (currentQueryParameters.has("to")) {

4
src/containers/Dex/SwapContainer.jsx
View File

@ -187,11 +187,11 @@ const SwapContainer = ({
> >
<Box width="100%" display="flex" justifyContent="space-between"> <Box width="100%" display="flex" justifyContent="space-between">
<Typography fontSize="12px" lineHeight="15px">Current price:</Typography> <Typography fontSize="12px" lineHeight="15px">Current price:</Typography>
<Typography fontSize="12px" lineHeight="15px">{formatCurrency(currentPrice, formatDecimals)}</Typography> <Typography fontSize="12px" lineHeight="15px">{formatCurrency(currentPrice, formatDecimals, tokenNameTop)}</Typography>
</Box> </Box>
<Box width="100%" display="flex" justifyContent="space-between"> <Box width="100%" display="flex" justifyContent="space-between">
<Typography fontSize="12px" lineHeight="15px">Next price:</Typography> <Typography fontSize="12px" lineHeight="15px">Next price:</Typography>
<Typography fontSize="12px" lineHeight="15px">{formatCurrency(nextPrice === "" ? currentPrice : nextPrice, formatDecimals)}</Typography> <Typography fontSize="12px" lineHeight="15px">{formatCurrency(nextPrice === "" ? currentPrice : nextPrice, formatDecimals, tokenNameTop)}</Typography>
</Box> </Box>
<Box width="100%" display="flex" justifyContent="space-between"> <Box width="100%" display="flex" justifyContent="space-between">
<Typography fontSize="12px" lineHeight="15px">Transaction deadline:</Typography> <Typography fontSize="12px" lineHeight="15px">Transaction deadline:</Typography>

20
src/containers/Dex/TokenModal.jsx
View File

@ -1,4 +1,5 @@
import { useState, useEffect, useMemo } from "react"; import { useState, useEffect, useMemo } from "react";
import { useConfig } from "wagmi";
import { import {
Divider, Divider,
Typography, Typography,
@ -20,7 +21,7 @@ import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
import { formatNumber } from "../../helpers/"; import { formatNumber } from "../../helpers/";
import { useBalance, useTokenSymbol } from "../../hooks/tokens"; import { useBalance, useTokenSymbol } from "../../hooks/tokens";
import { isNetworkLegacy } from "../../constants"; import { isNetworkLegacy } from "../../constants";
import { DAI_ADDRESSES, FTSO_ADDRESSES, STNK_ADDRESSES, GHST_ADDRESSES } from "../../constants/addresses"; import { RESERVE_ADDRESSES, FTSO_ADDRESSES, STNK_ADDRESSES, GHST_ADDRESSES } from "../../constants/addresses";
const TokenModal = ({ chainId, account, listOpen, setListOpen, setTokenAddress }) => { const TokenModal = ({ chainId, account, listOpen, setListOpen, setTokenAddress }) => {
const isSmallScreen = useMediaQuery("(max-width: 599px)"); const isSmallScreen = useMediaQuery("(max-width: 599px)");
@ -38,16 +39,19 @@ const TokenModal = ({ chainId, account, listOpen, setListOpen, setTokenAddress }
const { symbol: searchSymbol } = useTokenSymbol(chainId, address); const { symbol: searchSymbol } = useTokenSymbol(chainId, address);
const { balance: searchBalance } = useBalance(chainId, address, account); const { balance: searchBalance } = useBalance(chainId, address, account);
const { balance: daiBalance } = useBalance(chainId, "GDAI", account); const { balance: reserveBalance } = useBalance(chainId, "RESERVE", account);
const { balance: ftsoBalance } = useBalance(chainId, "FTSO", account); const { balance: ftsoBalance } = useBalance(chainId, "FTSO", account);
const { balance: stnkBalance } = useBalance(chainId, "STNK", account); const { balance: stnkBalance } = useBalance(chainId, "STNK", account);
const { balance: ghstBalance } = useBalance(chainId, "GHST", account); const { balance: ghstBalance } = useBalance(chainId, "GHST", account);
const { symbol: daiSymbol } = useTokenSymbol(chainId, "GDAI"); const { symbol: reserveSymbol } = useTokenSymbol(chainId, "RESERVE");
const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO"); const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO");
const { symbol: stnkSymbol } = useTokenSymbol(chainId, "STNK"); const { symbol: stnkSymbol } = useTokenSymbol(chainId, "STNK");
const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST"); const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");
const config = useConfig();
const nativeSymbol = config?.getClient()?.chain?.nativeCurrency?.symbol;
const searchToken = useMemo(() => { const searchToken = useMemo(() => {
return [{ return [{
name: searchSymbol, name: searchSymbol,
@ -60,10 +64,10 @@ const TokenModal = ({ chainId, account, listOpen, setListOpen, setTokenAddress }
const knownTokens = useMemo(() => { const knownTokens = useMemo(() => {
return [ return [
{ {
name: daiSymbol, name: reserveSymbol,
icons: isNetworkLegacy(chainId) ? ["GDAI"] : ["WETH"], icons: isNetworkLegacy(chainId) ? ["GDAI"] : [nativeSymbol],
balance: daiBalance, balance: reserveBalance,
address: DAI_ADDRESSES[chainId] address: RESERVE_ADDRESSES[chainId]
}, },
{ {
name: ftsoSymbol, name: ftsoSymbol,
@ -84,7 +88,7 @@ const TokenModal = ({ chainId, account, listOpen, setListOpen, setTokenAddress }
address: GHST_ADDRESSES[chainId] address: GHST_ADDRESSES[chainId]
} }
] ]
}, [daiSymbol, ftsoSymbol, stnkSymbol, ghstSymbol, daiBalance, ftsoBalance, stnkBalance, ghstBalance]); }, [reserveSymbol, ftsoSymbol, stnkSymbol, ghstSymbol, reserveBalance, ftsoBalance, stnkBalance, ghstBalance]);
useEffect(() => { useEffect(() => {
if (isAddress(userInput)) { if (isAddress(userInput)) {

42
src/containers/Faucet/Faucet.jsx
View File

@ -11,7 +11,7 @@ import TokenStack from "../../components/TokenStack/TokenStack";
import { PrimaryButton } from "../../components/Button"; import { PrimaryButton } from "../../components/Button";
import { Tab, Tabs } from "../../components/Tabs/Tabs"; import { Tab, Tabs } from "../../components/Tabs/Tabs";
import { DAI_ADDRESSES } from "../../constants/addresses"; import { RESERVE_ADDRESSES } from "../../constants/addresses";
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber"; import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
import { formatCurrency, formatNumber } from "../../helpers"; import { formatCurrency, formatNumber } from "../../helpers";
@ -44,14 +44,14 @@ const Faucet = ({ chainId, address, config, connect }) => {
symbol: "", symbol: "",
}) })
const daiConversionRate = useConversionRate(chainId, "GDAI"); const reserveConversionRate = useConversionRate(chainId, "RESERVE");
const accumulatedDonation = useAccumulatedDonation(chainId, "GDAI"); const accumulatedDonation = useAccumulatedDonation(chainId, "RESERVE");
const { balance: daiBalance, refetch: daiBalanceRefetch } = useTokenBalance(chainId, "GDAI", address); const { balance: reserveBalance, refetch: reserveBalanceRefetch } = useTokenBalance(chainId, "RESERVE", address);
const { data: nativeBalance, refetch: balanceRefetch } = useBalance({ address }); const { data: nativeBalance, refetch: balanceRefetch } = useBalance({ address });
const { data: contractBalance, refetch: contractBalanceRefetch } = useBalance({ address: DAI_ADDRESSES[chainId] }); const { data: contractBalance, refetch: contractBalanceRefetch } = useBalance({ address: RESERVE_ADDRESSES[chainId] });
const { totalSupply: reserveTotalSupply, refetch: refetchReserveTotalSupply } = useTotalSupply(chainId, "GDAI"); const { totalSupply: reserveTotalSupply, refetch: refetchReserveTotalSupply } = useTotalSupply(chainId, "RESERVE");
const { symbol: faucetSymbol } = useTokenSymbol(chainId, "GDAI"); const { symbol: reserveSymbol } = useTokenSymbol(chainId, "RESERVE");
useEffect(() => { useEffect(() => {
ReactGA.send({ hitType: "pageview", page: "/faucet" }); ReactGA.send({ hitType: "pageview", page: "/faucet" });
@ -93,10 +93,10 @@ const Faucet = ({ chainId, address, config, connect }) => {
}, [amount, balance, nativeInfo]) }, [amount, balance, nativeInfo])
const estimatedAmountIn = useMemo(() => { const estimatedAmountIn = useMemo(() => {
const rate = new DecimalBigNumber(daiConversionRate.toString(), 0); const rate = new DecimalBigNumber(reserveConversionRate.toString(), 0);
const value = new DecimalBigNumber(amount, nativeInfo.decimals); const value = new DecimalBigNumber(amount, nativeInfo.decimals);
return value.mul(rate); return value.mul(rate);
}, [amount, daiConversionRate, nativeInfo]); }, [amount, reserveConversionRate, nativeInfo]);
const contractBalanceFree = useMemo(() => { const contractBalanceFree = useMemo(() => {
const realContractBalance = contractBalance ? contractBalance.value : 0n; const realContractBalance = contractBalance ? contractBalance.value : 0n;
@ -129,7 +129,7 @@ const Faucet = ({ chainId, address, config, connect }) => {
} }
await balanceRefetch(); await balanceRefetch();
await daiBalanceRefetch(); await reserveBalanceRefetch();
await contractBalanceRefetch(); await contractBalanceRefetch();
await refetchReserveTotalSupply(); await refetchReserveTotalSupply();
setAmount(""); setAmount("");
@ -159,7 +159,7 @@ const Faucet = ({ chainId, address, config, connect }) => {
<meta name="twitter:image" content="https://ghostchain.io/wp-content/uploads/2025/03/ghostFaucet-Featured_Image.png" /> <meta name="twitter:image" content="https://ghostchain.io/wp-content/uploads/2025/03/ghostFaucet-Featured_Image.png" />
</Helmet> </Helmet>
<PageTitle name={`${faucetSymbol} Faucet`} subtitle={`Swap Sepolia ${nativeInfo.symbol} for ${faucetSymbol}.`} /> <PageTitle name={`${reserveSymbol} Faucet`} subtitle={`Swap Sepolia ${nativeInfo.symbol} for ${reserveSymbol}.`} />
<Container <Container
style={{ style={{
paddingLeft: isSmallScreen || isVerySmallScreen ? "0" : "3.3rem", paddingLeft: isSmallScreen || isVerySmallScreen ? "0" : "3.3rem",
@ -188,7 +188,7 @@ const Faucet = ({ chainId, address, config, connect }) => {
</Tabs> </Tabs>
{!isSemiSmallScreen && <PrimaryButton {!isSemiSmallScreen && <PrimaryButton
variant="text" variant="text"
href={`${scanInfo.url}/token/${DAI_ADDRESSES[chainId]}`} href={`${scanInfo.url}/token/${RESERVE_ADDRESSES[chainId]}`}
> >
Check on {scanInfo.name} Check on {scanInfo.name}
</PrimaryButton>} </PrimaryButton>}
@ -211,14 +211,14 @@ const Faucet = ({ chainId, address, config, connect }) => {
{!isMint && <SwapCard {!isMint && <SwapCard
id={`faucet-sepolia-eth`} id={`faucet-sepolia-eth`}
inputWidth={isVerySmallScreen ? "100px" : isSemiSmallScreen ? "180px" : "250px"} inputWidth={isVerySmallScreen ? "100px" : isSemiSmallScreen ? "180px" : "250px"}
tokenName={faucetSymbol} tokenName={reserveSymbol}
token={<TokenStack tokens={[faucetSymbol]} sx={{ fontSize: "21px" }} />} token={<TokenStack tokens={[reserveSymbol]} sx={{ fontSize: "21px" }} />}
info={`${formatCurrency(daiBalance.toString(), 4, faucetSymbol)}`} info={`${formatCurrency(reserveBalance.toString(), 4, reserveSymbol)}`}
value={amount} value={amount}
onChange={event => setAmount(event.currentTarget.value)} onChange={event => setAmount(event.currentTarget.value)}
inputProps={{ "data-testid": "fromInput" }} inputProps={{ "data-testid": "fromInput" }}
endString={"Max"} endString={"Max"}
endStringOnClick={() => setAmount(daiBalance.toString())} endStringOnClick={() => setAmount(reserveBalance.toString())}
/>} />}
<Box <Box
mb="20px" mb="20px"
@ -231,15 +231,15 @@ const Faucet = ({ chainId, address, config, connect }) => {
<> <>
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">{nativeInfo.symbol} multiplier:</Typography>} {!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">{nativeInfo.symbol} multiplier:</Typography>}
<Typography fontSize="12px" lineHeight="15px">{formatNumber(daiConversionRate, 2)}</Typography> <Typography fontSize="12px" lineHeight="15px">{formatNumber(reserveConversionRate, 2)}</Typography>
</Box> </Box>
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">You will get:</Typography>} {!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">You will get:</Typography>}
<Typography fontSize="12px" lineHeight="15px">{formatCurrency(estimatedAmountIn, 5, faucetSymbol)}</Typography> <Typography fontSize="12px" lineHeight="15px">{formatCurrency(estimatedAmountIn, 5, reserveSymbol)}</Typography>
</Box> </Box>
<Box display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Your {faucetSymbol} balance:</Typography>} {!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Your {reserveSymbol} balance:</Typography>}
<Typography fontSize="12px" lineHeight="15px">{formatCurrency(daiBalance, 5, faucetSymbol)}</Typography> <Typography fontSize="12px" lineHeight="15px">{formatCurrency(reserveBalance, 5, reserveSymbol)}</Typography>
</Box> </Box>
</> </>
)} )}
@ -267,7 +267,7 @@ const Faucet = ({ chainId, address, config, connect }) => {
preparedAmount?._value === 0n || preparedAmount?._value === 0n ||
isPending || isPending ||
(isMint && balance?.lt(preparedAmount)) || (isMint && balance?.lt(preparedAmount)) ||
(!isMint && daiBalance?.lt(preparedAmount)) (!isMint && reserveBalance?.lt(preparedAmount))
) )
} }
loading={isPending} loading={isPending}

21
src/containers/Stake/components/FarmPools.jsx
View File

@ -16,34 +16,33 @@ import { SecondaryButton } from "../../../components/Button";
import TokenStack from "../../../components/TokenStack/TokenStack"; import TokenStack from "../../../components/TokenStack/TokenStack";
import { DecimalBigNumber } from "../../../helpers/DecimalBigNumber"; import { DecimalBigNumber } from "../../../helpers/DecimalBigNumber";
import { formatCurrency } from "../../../helpers"; import { formatCurrency } from "../../../helpers";
import { tokenNameConverter } from "../../../helpers/tokenConverter";
import { isNetworkLegacy } from "../../../constants";
import { useLpValuation } from "../../../hooks/treasury"; import { useLpValuation } from "../../../hooks/treasury";
import { useTotalSupply, useTokenSymbol } from "../../../hooks/tokens"; import { useTotalSupply, useTokenSymbol } from "../../../hooks/tokens";
import { import { RESERVE_ADDRESSES, FTSO_ADDRESSES } from "../../../constants/addresses";
DAI_ADDRESSES,
FTSO_ADDRESSES,
} from "../../../constants/addresses";
const FarmPools = ({ chainId }) => { const FarmPools = ({ chainId }) => {
const isSmallScreen = useMediaQuery("(max-width: 775px)"); const isSmallScreen = useMediaQuery("(max-width: 775px)");
const { totalSupply: daiFtsoUniTotalSupply } = useTotalSupply(chainId, "GDAI_FTSO"); const { totalSupply: reserveFtsoUniTotalSupply } = useTotalSupply(chainId, "RESERVE_FTSO");
const daiFtsoUniValuation = useLpValuation(chainId, "GDAI_FTSO", daiFtsoUniTotalSupply._value); const reserveFtsoUniValuation = useLpValuation(chainId, "RESERVE_FTSO", reserveFtsoUniTotalSupply._value);
const { symbol: daiSymbol } = useTokenSymbol(chainId, "GDAI"); const { symbol: reserveSymbol } = useTokenSymbol(chainId, "RESERVE");
const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO"); const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO");
const pools = [ const pools = [
{ {
icons: ["FTSO", "GDAI"], icons: ["FTSO", isNetworkLegacy(chainId) ? "GDAI" : tokenNameConverter(chainId, reserveSymbol)],
name: `${ftsoSymbol}-${daiSymbol}`, name: `${ftsoSymbol}-${reserveSymbol}`,
dex: "Uniswap V2", dex: "Uniswap V2",
url: "/dex/uniswap", url: "/dex/uniswap",
tvl: daiFtsoUniValuation, tvl: reserveFtsoUniValuation,
params: createSearchParams({ params: createSearchParams({
pool: "true", pool: "true",
from: `${DAI_ADDRESSES[chainId]}`, from: `${RESERVE_ADDRESSES[chainId]}`,
to: `${FTSO_ADDRESSES[chainId]}`, to: `${FTSO_ADDRESSES[chainId]}`,
}) })
}, },

44
src/containers/TreasuryDashboard/components/TokenInfo.jsx
View File

@ -1,5 +1,5 @@
import { Grid, Box, Typography, useTheme } from "@mui/material"; import { Grid, Box, Typography, useTheme } from "@mui/material";
import { useAccount } from "wagmi"; import { useAccount, useConfig, useBalance as useBalanceNative } from "wagmi";
import { useNavigate, createSearchParams } from "react-router-dom"; import { useNavigate, createSearchParams } from "react-router-dom";
import Token from "../../../components/Token/Token"; import Token from "../../../components/Token/Token";
@ -15,6 +15,7 @@ import {
useGhstPrice, useGhstPrice,
useDaiPrice, useDaiPrice,
} from "../../../hooks/prices"; } from "../../../hooks/prices";
import { tokenNameConverter } from "../../../helpers/tokenConverter";
const TokenTab = ({ isMobileScreen, theme, tokenName, tokenUrl, tokenUrlParams, balance, price, description }) => { const TokenTab = ({ isMobileScreen, theme, tokenName, tokenUrl, tokenUrlParams, balance, price, description }) => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -75,20 +76,24 @@ const TokenInfo = ({ chainId, isMobileScreen }) => {
const theme = useTheme(); const theme = useTheme();
const { address } = useAccount(); const { address } = useAccount();
const config = useConfig();
const nativeSymbol = config?.getClient()?.chain?.nativeCurrency?.symbol;
const ftsoPrice = useFtsoPrice(chainId); const ftsoPrice = useFtsoPrice(chainId);
const stnkPrice = useStnkPrice(chainId); const stnkPrice = useStnkPrice(chainId);
const ghstPrice = useGhstPrice(chainId); const ghstPrice = useGhstPrice(chainId);
const daiPrice = useDaiPrice(chainId); const reservePrice = useDaiPrice(chainId);
const { symbol: daiSymbol } = useTokenSymbol(chainId, "GDAI"); const { symbol: reserveSymbol } = useTokenSymbol(chainId, "RESERVE");
const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO"); const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO");
const { symbol: stnkSymbol } = useTokenSymbol(chainId, "STNK"); const { symbol: stnkSymbol } = useTokenSymbol(chainId, "STNK");
const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST"); const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");
const { data: nativeBalance } = useBalanceNative({ address });
const { balance: ftsoBalance, contractAddress: ftsoAddress } = useBalance(chainId, "FTSO", address); const { balance: ftsoBalance, contractAddress: ftsoAddress } = useBalance(chainId, "FTSO", address);
const { balance: stnkBalance, contractAddress: stnkAddress } = useBalance(chainId, "STNK", address); const { balance: stnkBalance, contractAddress: stnkAddress } = useBalance(chainId, "STNK", address);
const { balance: ghstBalance, contractAddress: ghstAddress } = useBalance(chainId, "GHST", address); const { balance: ghstBalance, contractAddress: ghstAddress } = useBalance(chainId, "GHST", address);
const { balance: daiBalance, contractAddress: daiAddress } = useBalance(chainId, "GDAI", address); const { balance: reserveBalance, contractAddress: reserveAddress } = useBalance(chainId, "RESERVE", address);
return ( return (
<Grid container spacing={0} justifyContent={"center"}> <Grid container spacing={0} justifyContent={"center"}>
@ -97,7 +102,7 @@ const TokenInfo = ({ chainId, isMobileScreen }) => {
isMobileScreen={isMobileScreen} isMobileScreen={isMobileScreen}
tokenUrl="/dex/uniswap" tokenUrl="/dex/uniswap"
tokenUrlParams={createSearchParams({ tokenUrlParams={createSearchParams({
from: `${daiAddress}`, from: `${reserveAddress}`,
to: `${ftsoAddress}`, to: `${ftsoAddress}`,
})} })}
theme={theme} theme={theme}
@ -110,7 +115,7 @@ const TokenInfo = ({ chainId, isMobileScreen }) => {
isMobileScreen={isMobileScreen} isMobileScreen={isMobileScreen}
tokenUrl="/dex/uniswap" tokenUrl="/dex/uniswap"
tokenUrlParams={createSearchParams({ tokenUrlParams={createSearchParams({
from: `${daiAddress}`, from: `${reserveAddress}`,
to: `${stnkAddress}`, to: `${stnkAddress}`,
})} })}
theme={theme} theme={theme}
@ -123,7 +128,7 @@ const TokenInfo = ({ chainId, isMobileScreen }) => {
isMobileScreen={isMobileScreen} isMobileScreen={isMobileScreen}
tokenUrl="/dex/uniswap" tokenUrl="/dex/uniswap"
tokenUrlParams={createSearchParams({ tokenUrlParams={createSearchParams({
from: `${daiAddress}`, from: `${reserveAddress}`,
to: `${ghstAddress}`, to: `${ghstAddress}`,
})} })}
theme={theme} theme={theme}
@ -137,12 +142,29 @@ const TokenInfo = ({ chainId, isMobileScreen }) => {
tokenUrl={isNetworkLegacy(chainId) ? "/faucet" : "/wrapper"} tokenUrl={isNetworkLegacy(chainId) ? "/faucet" : "/wrapper"}
tokenUrlParams="" tokenUrlParams=""
theme={theme} theme={theme}
tokenName={daiSymbol} tokenName={reserveSymbol}
balance={daiBalance} balance={reserveBalance}
price={daiPrice} price={reservePrice}
description={`${ftsoSymbol} is backed by a treasury reserve of crypto assets, with ${daiSymbol} being the primary and most liquid asset.`} description={isNetworkLegacy(chainId)
? `${ftsoSymbol} is backed by a treasury reserve of crypto assets, with ${reserveSymbol} being the primary and most liquid asset.`
: `${reserveSymbol} is wrapped version of the native ${nativeSymbol} coin with a fixed ration 1:1 and fully ERC-20 compatible.`
}
/> />
</Box> </Box>
{!isNetworkLegacy(chainId) && (
<Box width="100%" mt="25px">
<TokenTab
isMobileScreen={true}
tokenUrl={isNetworkLegacy(chainId) ? "/faucet" : "/wrapper"}
tokenUrlParams=""
theme={theme}
tokenName={nativeSymbol}
balance={new DecimalBigNumber(nativeBalance?.value ?? 0n, 18)}
price={reservePrice}
description={`${nativeSymbol} is the original cryptocurrency of a blockchain, required for all basic network functions like transactions and smart contracts. It's the primary digital asset that operates without relying on any other blockchain's infrastructure. Thus it's the most reliable backing for the ${ftsoSymbol}.`}
/>
</Box>
)}
</Grid> </Grid>
) )
} }

28
src/containers/WethWrapper/WethWrapper.jsx
View File

@ -11,7 +11,7 @@ import TokenStack from "../../components/TokenStack/TokenStack";
import { PrimaryButton } from "../../components/Button"; import { PrimaryButton } from "../../components/Button";
import { Tab, Tabs } from "../../components/Tabs/Tabs"; import { Tab, Tabs } from "../../components/Tabs/Tabs";
import { DAI_ADDRESSES } from "../../constants/addresses"; import { RESERVE_ADDRESSES } from "../../constants/addresses";
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber"; import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
import { formatCurrency, formatNumber } from "../../helpers"; import { formatCurrency, formatNumber } from "../../helpers";
@ -45,9 +45,9 @@ const WethWrapper = ({ chainId, address, config, connect }) => {
symbol: "", symbol: "",
}) })
const { balance: daiBalance, refetch: daiBalanceRefetch } = useTokenBalance(chainId, "GDAI", address); const { balance: reserveBalance, refetch: reserveBalanceRefetch } = useTokenBalance(chainId, "RESERVE", address);
const { data: nativeBalance, refetch: balanceRefetch } = useBalance({ address }); const { data: nativeBalance, refetch: balanceRefetch } = useBalance({ address });
const { symbol: faucetSymbol } = useTokenSymbol(chainId, "GDAI"); const { symbol: reserveSymbol } = useTokenSymbol(chainId, "RESERVE");
useEffect(() => { useEffect(() => {
ReactGA.send({ hitType: "pageview", page: "/wrapper" }); ReactGA.send({ hitType: "pageview", page: "/wrapper" });
@ -109,7 +109,7 @@ const WethWrapper = ({ chainId, address, config, connect }) => {
} }
await balanceRefetch(); await balanceRefetch();
await daiBalanceRefetch(); await reserveBalanceRefetch();
setAmount(""); setAmount("");
setIsPending(false); setIsPending(false);
} }
@ -137,7 +137,7 @@ const WethWrapper = ({ chainId, address, config, connect }) => {
<meta name="twitter:image" content="https://ghostchain.io/wp-content/uploads/2025/03/ghostFaucet-Featured_Image.png" /> <meta name="twitter:image" content="https://ghostchain.io/wp-content/uploads/2025/03/ghostFaucet-Featured_Image.png" />
</Helmet> </Helmet>
<PageTitle name={`${faucetSymbol} Faucet`} subtitle={`Swap ${chainName} ${nativeInfo.symbol} for ${faucetSymbol}.`} /> <PageTitle name={`${reserveSymbol} Faucet`} subtitle={`Swap ${chainName} ${nativeInfo.symbol} for ${reserveSymbol}.`} />
<Container <Container
style={{ style={{
paddingLeft: isSmallScreen || isVerySmallScreen ? "0" : "3.3rem", paddingLeft: isSmallScreen || isVerySmallScreen ? "0" : "3.3rem",
@ -166,7 +166,7 @@ const WethWrapper = ({ chainId, address, config, connect }) => {
</Tabs> </Tabs>
{!isSemiSmallScreen && <PrimaryButton {!isSemiSmallScreen && <PrimaryButton
variant="text" variant="text"
href={`${scanInfo.url}/token/${DAI_ADDRESSES[chainId]}`} href={`${scanInfo.url}/token/${RESERVE_ADDRESSES[chainId]}`}
> >
Check on {scanInfo.name} Check on {scanInfo.name}
</PrimaryButton>} </PrimaryButton>}
@ -189,14 +189,14 @@ const WethWrapper = ({ chainId, address, config, connect }) => {
{!isMint && <SwapCard {!isMint && <SwapCard
id={`faucet-sepolia-eth`} id={`faucet-sepolia-eth`}
inputWidth={isVerySmallScreen ? "100px" : isSemiSmallScreen ? "180px" : "250px"} inputWidth={isVerySmallScreen ? "100px" : isSemiSmallScreen ? "180px" : "250px"}
tokenName={faucetSymbol} tokenName={reserveSymbol}
token={<TokenStack tokens={[faucetSymbol]} sx={{ fontSize: "21px" }} />} token={<TokenStack tokens={[reserveSymbol]} sx={{ fontSize: "21px" }} />}
info={`${formatCurrency(daiBalance.toString(), 4, faucetSymbol)}`} info={`${formatCurrency(reserveBalance.toString(), 4, reserveSymbol)}`}
value={amount} value={amount}
onChange={event => setAmount(event.currentTarget.value)} onChange={event => setAmount(event.currentTarget.value)}
inputProps={{ "data-testid": "fromInput" }} inputProps={{ "data-testid": "fromInput" }}
endString={"Max"} endString={"Max"}
endStringOnClick={() => setAmount(daiBalance.toString())} endStringOnClick={() => setAmount(reserveBalance.toString())}
/>} />}
<Box <Box
mb="20px" mb="20px"
@ -209,11 +209,11 @@ const WethWrapper = ({ chainId, address, config, connect }) => {
<> <>
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">You will get:</Typography>} {!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">You will get:</Typography>}
<Typography fontSize="12px" lineHeight="15px">{formatCurrency(estimatedAmountIn, 5, faucetSymbol)}</Typography> <Typography fontSize="12px" lineHeight="15px">{formatCurrency(estimatedAmountIn, 5, reserveSymbol)}</Typography>
</Box> </Box>
<Box display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Your {faucetSymbol} balance:</Typography>} {!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Your {reserveSymbol} balance:</Typography>}
<Typography fontSize="12px" lineHeight="15px">{formatCurrency(daiBalance, 5, faucetSymbol)}</Typography> <Typography fontSize="12px" lineHeight="15px">{formatCurrency(reserveBalance, 5, reserveSymbol)}</Typography>
</Box> </Box>
</> </>
)} )}
@ -237,7 +237,7 @@ const WethWrapper = ({ chainId, address, config, connect }) => {
preparedAmount?._value === 0n || preparedAmount?._value === 0n ||
isPending || isPending ||
(isMint && balance?.lt(preparedAmount)) || (isMint && balance?.lt(preparedAmount)) ||
(!isMint && daiBalance?.lt(preparedAmount)) (!isMint && reserveBalance?.lt(preparedAmount))
) )
} }
loading={isPending} loading={isPending}

10
src/helpers/tokenConverter.js Normal file
View File

@ -0,0 +1,10 @@
export const tokenNameConverter = (chainId, name) => {
if (name?.toUpperCase() === "WETH") {
switch (chainId) {
case 63:
name = "WETC"
break;
}
}
return name;
}

34
src/hooks/helpers.js
View File

@ -1,5 +1,5 @@
import { import {
DAI_ADDRESSES, RESERVE_ADDRESSES,
FTSO_ADDRESSES, FTSO_ADDRESSES,
STNK_ADDRESSES, STNK_ADDRESSES,
GHST_ADDRESSES, GHST_ADDRESSES,
@ -24,6 +24,9 @@ export const getTokenAbi = (name) => {
case "GDAI": case "GDAI":
abi = DaiAbi; abi = DaiAbi;
break; break;
case "RESERVE":
abi = DaiAbi;
break;
case "FTSO": case "FTSO":
abi = FatsoAbi; abi = FatsoAbi;
break; break;
@ -59,6 +62,9 @@ export const getTokenDecimals = (name) => {
case "GDAI": case "GDAI":
decimals = 18; decimals = 18;
break; break;
case "RESERVE":
decimals = 18;
break;
case "FTSO": case "FTSO":
decimals = 9; decimals = 9;
break; break;
@ -89,10 +95,13 @@ export const getTokenAddress = (chainId, name) => {
let address = name; let address = name;
switch (name?.toUpperCase()) { switch (name?.toUpperCase()) {
case "DAI": case "DAI":
address = DAI_ADDRESSES[chainId]; address = RESERVE_ADDRESSES[chainId];
break; break;
case "GDAI": case "GDAI":
address = DAI_ADDRESSES[chainId]; address = RESERVE_ADDRESSES[chainId];
break;
case "RESERVE":
address = RESERVE_ADDRESSES[chainId];
break; break;
case "FTSO": case "FTSO":
address = FTSO_ADDRESSES[chainId]; address = FTSO_ADDRESSES[chainId];
@ -115,9 +124,15 @@ export const getTokenAddress = (chainId, name) => {
case "GDAI_FTSO": case "GDAI_FTSO":
address = FTSO_DAI_LP_ADDRESSES[chainId]; address = FTSO_DAI_LP_ADDRESSES[chainId];
break; break;
case "RESERVE_FTSO":
address = FTSO_DAI_LP_ADDRESSES[chainId];
break;
case "WETH": case "WETH":
address = WETH_ADDRESSES[chainId]; address = WETH_ADDRESSES[chainId];
break; break;
case "WETC":
address = WETH_ADDRESSES[chainId];
break;
} }
return address; return address;
} }
@ -126,8 +141,8 @@ export const getTokenAddress = (chainId, name) => {
export const getTokenIcons = (chainId, address) => { export const getTokenIcons = (chainId, address) => {
let icons = [""]; let icons = [""];
switch (address) { switch (address) {
case DAI_ADDRESSES[chainId]: case RESERVE_ADDRESSES[chainId]:
icons = ["GDAI"]; icons = ["RESERVE"];
break; break;
case FTSO_ADDRESSES[chainId]: case FTSO_ADDRESSES[chainId]:
icons = ["FTSO"]; icons = ["FTSO"];
@ -139,7 +154,7 @@ export const getTokenIcons = (chainId, address) => {
icons = ["GHST"]; icons = ["GHST"];
break; break;
case FTSO_DAI_LP_ADDRESSES[chainId]: case FTSO_DAI_LP_ADDRESSES[chainId]:
icons = ["FTSO", "GDAI"]; icons = ["FTSO", "RESERVE"];
break; break;
} }
return icons; return icons;
@ -155,11 +170,14 @@ export const getBondNameDisplayName = (chainId, stringValue, tokenAddress) => {
export const getTokenPurchaseLink = (chainId, tokenAddress) => { export const getTokenPurchaseLink = (chainId, tokenAddress) => {
let purchaseUrl = "https://app.dao.ghostchain.io/#/dex/uniswap"; let purchaseUrl = "https://app.dao.ghostchain.io/#/dex/uniswap";
switch (tokenAddress) { switch (tokenAddress) {
case DAI_ADDRESSES[chainId]: case RESERVE_ADDRESSES[chainId]:
purchaseUrl = "https://app.dao.ghostchain.io/#/faucet"; purchaseUrl = "https://app.dao.ghostchain.io/#/faucet";
if (chainId == 63) {
purchaseUrl = "https://app.dao.ghostchain.io/#/wrapper";
}
break; break;
case FTSO_DAI_LP_ADDRESSES[chainId]: case FTSO_DAI_LP_ADDRESSES[chainId]:
purchaseUrl += `?pool=true&from=${DAI_ADDRESSES[chainId]}&to=${FTSO_ADDRESSES[chainId]}`; purchaseUrl += `?pool=true&from=${RESERVE_ADDRESSES[chainId]}&to=${FTSO_ADDRESSES[chainId]}`;
break; break;
} }
return purchaseUrl; return purchaseUrl;

15
src/hooks/prices/index.js
View File

@ -6,7 +6,7 @@ import { useUniswapV2PairReserves } from "../uniswapv2";
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber"; import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
import { import {
FTSO_DAI_LP_ADDRESSES, FTSO_DAI_LP_ADDRESSES,
DAI_ADDRESSES, RESERVE_ADDRESSES,
FTSO_ADDRESSES, FTSO_ADDRESSES,
CEX_TICKERS CEX_TICKERS
} from "../../constants/addresses"; } from "../../constants/addresses";
@ -69,7 +69,7 @@ export const useDaiPrice = (chainId) => {
.then(response => { .then(response => {
if ('data' in response) { if ('data' in response) {
const coinPrice = Number(response?.data?.amount ?? 0.0); const coinPrice = Number(response?.data?.amount ?? 0.0);
const priceInWei = Math.floor(coinPrice * 1e18); const priceInWei = Math.floor(coinPrice * 1e18 / 0.99);
setDaiPrice(new DecimalBigNumber(BigInt(priceInWei), 18)); setDaiPrice(new DecimalBigNumber(BigInt(priceInWei), 18));
} else if ('price' in response) { } else if ('price' in response) {
const coinPrice = Number(response?.price ?? 0.0); const coinPrice = Number(response?.price ?? 0.0);
@ -88,17 +88,10 @@ export const useDaiPrice = (chainId) => {
}; };
export const useFtsoPrice = (chainId) => { export const useFtsoPrice = (chainId) => {
const { reserves, tokens, refetch } = useUniswapV2PairReserves( const { reserves, tokens, refetch } = useUniswapV2PairReserves(chainId, FTSO_DAI_LP_ADDRESSES[chainId]);
chainId,
FTSO_DAI_LP_ADDRESSES[chainId],
9,
18,
"FTSO",
"GDAI",
);
const reservePrice = useDaiPrice(chainId); const reservePrice = useDaiPrice(chainId);
const reserveAddress = DAI_ADDRESSES[chainId]; const reserveAddress = RESERVE_ADDRESSES[chainId];
const ftsoAddress = FTSO_ADDRESSES[chainId]; const ftsoAddress = FTSO_ADDRESSES[chainId];
if (!reserveAddress || !ftsoAddress) { if (!reserveAddress || !ftsoAddress) {
return new DecimalBigNumber(0n, 9); return new DecimalBigNumber(0n, 9);

7
src/hooks/tokens/index.js
View File

@ -6,6 +6,7 @@ import { getTokenAbi, getTokenAddress, getTokenDecimals } from "../helpers";
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber"; import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
import { shorten } from "../../helpers"; import { shorten } from "../../helpers";
import { tokenNameConverter } from "../../helpers/tokenConverter";
import { config } from "../../config"; import { config } from "../../config";
export const useTotalSupply = (chainId, name) => { export const useTotalSupply = (chainId, name) => {
@ -68,7 +69,9 @@ export const useTokenSymbol = (chainId, name) => {
chainId: chainId, chainId: chainId,
}); });
const symbol = data ? data : ""; let symbol = data ? data : "";
symbol = tokenNameConverter(chainId, symbol);
return { symbol, refetch }; return { symbol, refetch };
} }
@ -240,8 +243,8 @@ export const depositNative = async (chainId, account, value) => {
chainId: chainId, chainId: chainId,
value: value value: value
}); });
const txHash = await writeContract(config, request); const txHash = await writeContract(config, request);
await waitForTransactionReceipt(config, { await waitForTransactionReceipt(config, {
hash: txHash, hash: txHash,
onReplaced: () => toast("WETH9 deposit transaction was replaced. Wait for inclusion please."), onReplaced: () => toast("WETH9 deposit transaction was replaced. Wait for inclusion please."),