small updates on the UI side

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2025-11-12 12:21:57 +03:00
parent 9f79182c37
commit b44b6f0c14
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
7 changed files with 34 additions and 23 deletions

View File

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

View File

@ -1,27 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?> <?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"> <svg id="uuid-61b3c585-44d6-4fd8-a0e7-6a5e76478eb1" data-name="uuid-70ba15fb-c44e-4945-a02a-8d07f94a9abb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 505 505">
<defs> <defs>
<style> <style>
.uuid-a01d8d83-9865-40b4-947f-2b6803a6d620 { .uuid-6437a6f0-42e0-4c9c-b0ef-b632253e989a {
fill: #fff;
}
.uuid-f6980b42-338a-476b-b4b3-c6f8474bfe6a {
fill: #0b8311; fill: #0b8311;
} }
.uuid-2015837c-ff9d-4f6a-bb1d-31a3faa20f59 { .uuid-cee5d69f-ecfa-41d4-b22b-62a3555cf216 {
fill: #3ab83a; fill: #3ab83a;
} }
.uuid-dcb9c215-f551-46cc-8a77-32519c324ec8 { .uuid-8c3bab1c-21e8-4834-aebc-42a28aaec68e {
fill: #146714; fill: #146714;
} }
</style> </style>
</defs> </defs>
<g id="uuid-2f5b15ae-2601-440f-a162-6e46c060a66e" data-name="EthereumClassicLogo"> <g fill="#222" data-name="uuid-3af91251-9afa-43cd-b331-1e6ceef8228b">
<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-38146a20-6896-4919-8709-3b8aa9b9b9de" data-name="uuid-bca144dc-fff0-427e-b9b1-33b0d4491804">
<g id="uuid-95ae1854-3c20-440e-b7f3-d33adda6d257" data-name="EthereumClassicIcon"> <g id="uuid-01777163-9cb4-4f63-8018-462f63cda4ae" data-name="uuid-d1a1e453-da74-40e2-920d-7662cd9352f5">
<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 d="m245.2,485.4c-64.14,0-124.44-24.99-169.8-70.36C30.05,369.68,5.05,309.36,5,245.2c0-64.15,24.99-124.46,70.36-169.84C120.73,29.98,181.05,5,245.2,5s124.47,24.99,169.84,70.36c45.37,45.37,70.36,105.69,70.36,169.84s-24.99,124.47-70.36,169.84-105.69,70.36-169.84,70.36h0Z"/>
<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 class="uuid-6437a6f0-42e0-4c9c-b0ef-b632253e989a" d="m245.2,10c31.75,0,62.55,6.22,91.54,18.48,28.01,11.85,53.16,28.81,74.77,50.41,21.61,21.61,38.57,46.76,50.41,74.77,12.26,28.99,18.48,59.79,18.48,91.54s-6.22,62.55-18.48,91.54c-11.85,28.01-28.81,53.16-50.41,74.77-21.61,21.61-46.76,38.57-74.77,50.41-28.99,12.26-59.79,18.48-91.54,18.48s-62.54-6.22-91.52-18.48c-28-11.85-53.14-28.81-74.74-50.41s-38.56-46.76-50.41-74.77c-12.27-28.99-18.5-59.79-18.52-91.54,0-31.75,6.22-62.55,18.48-91.54,11.85-28.01,28.81-53.16,50.41-74.77,21.61-21.61,46.76-38.57,74.77-50.41,28.99-12.26,59.79-18.48,91.54-18.48M245.21,0C109.8,0,0,109.8,0,245.2c.1,135.4,109.8,245.2,245.2,245.2s245.2-109.8,245.2-245.2S380.6,0,245.2,0h0Z"/>
<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"/> </g>
<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 id="uuid-91c9d373-1cb9-4018-9a6a-66437f262f1c" data-name="uuid-863b3aee-71cf-488d-8b5a-a2d97fac93c4">
<path id="uuid-538e9787-13a3-4271-8587-11f8527f9a71" data-name="uuid-10bd56be-0db7-4e24-bb20-a24d1c3cbcb7" class="uuid-cee5d69f-ecfa-41d4-b22b-62a3555cf216" 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.74h.01Zm97.46-68.75l-101.33,53.34,100.89-147.71,100.94,148.04-100.5-53.67h0Z"/>
<path id="uuid-4aa91baa-53f1-4f63-abbe-cf753f8525a0" data-name="uuid-4c5fd78b-71fb-4d56-83d4-a2022fef9f50" class="uuid-f6980b42-338a-476b-b4b3-c6f8474bfe6a" d="m245.61,313.68l100.5-53.95c-36.39,54.06-100.5,148.87-100.5,148.87v-94.92h0Zm.11-120.93l96.3,51.69-96.25,52.12-.05-103.81h0Zm-.11-16.68l-.44-94.37,100.94,148.04-100.5-53.67h0Z"/>
<path id="uuid-3febb173-485e-4b4e-92b6-b05cc7b0412b" data-name="uuid-3f7cae2c-d7bb-44d6-a6e9-cd80adc2aeac" class="uuid-f6980b42-338a-476b-b4b3-c6f8474bfe6a" d="m148.15,244.82l97.58,8.01,96.3-8.34-96.25,52.13-97.63-51.8h0Z"/>
<path id="uuid-df565d0e-a3cf-452f-80f6-2e6ea5ca4f56" data-name="uuid-e69b7837-4cf3-4793-a865-a26ad4121390" class="uuid-8c3bab1c-21e8-4834-aebc-42a28aaec68e" d="m245.72,252.83l96.3-8.34-96.25,52.13-.05-43.79h0Z"/>
</g>
</g> </g>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -60,7 +60,7 @@ export const parseKnownToken = (name) => {
case "METC": case "METC":
icon = EtcIcon; icon = EtcIcon;
break; break;
case "WETC": case "WMETC":
icon = EtcIcon; icon = EtcIcon;
break; break;
default: default:

View File

@ -82,6 +82,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
const [blockNumber, setBlockNumber] = useState(0); const [blockNumber, setBlockNumber] = useState(0);
const sliceString = (string, first, second) => { const sliceString = (string, first, second) => {
if (!string) return "";
return string.slice(0, first) + "..." + string.slice(second); return string.slice(0, first) + "..." + string.slice(second);
} }
@ -748,18 +749,18 @@ const Bridge = ({ chainId, address, config, connect }) => {
<Box maxWidth="506px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box maxWidth="506px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Box display="flex" flexDirection="row"> {!isVerySmallScreen && <Box display="flex" flexDirection="row">
<Typography fontSize="12px" lineHeight="15px">Finality Delay:</Typography> <Typography fontSize="12px" lineHeight="15px">Finality Delay:</Typography>
<InfoTooltip message="This period ensures that the transaction is securely added to the ledger and cannot be altered or canceled." /> <InfoTooltip message="The finality delay period guarantees that a bridging transaction becomes permanent and immutable on the GHOST Chain ledger." />
</Box>} </Box>}
<Typography fontSize="12px" lineHeight="15px">{finalityDelay} blocks</Typography> <Typography fontSize="12px" lineHeight="15px">{finalityDelay} blocks</Typography>
</Box> </Box>
<hr width="100%" /> <hr width="100%" />
<Box maxWidth="506px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box maxWidth="506px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Current Epoch:</Typography>} {!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Current GHOST Epoch:</Typography>}
<Typography fontSize="12px" lineHeight="15px">{currentSession ?? 0}</Typography> <Typography fontSize="12px" lineHeight="15px">{currentSession ?? 0}</Typography>
</Box> </Box>
<Box maxWidth="506px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box maxWidth="506px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Box display="flex" flexDirection="row"> {!isVerySmallScreen && <Box display="flex" flexDirection="row">
<Typography fontSize="12px" lineHeight="15px">Number of validators:</Typography> <Typography fontSize="12px" lineHeight="15px">Current Validators:</Typography>
<InfoTooltip message={<> <InfoTooltip message={<>
<Typography variant="subtitle1">Validators</Typography> <Typography variant="subtitle1">Validators</Typography>
<Box <Box

View File

@ -79,6 +79,7 @@ const TokenInfo = ({ chainId, isMobileScreen }) => {
const config = useConfig(); const config = useConfig();
const nativeSymbol = config?.getClient()?.chain?.nativeCurrency?.symbol; const nativeSymbol = config?.getClient()?.chain?.nativeCurrency?.symbol;
const networkName = config?.getClient()?.chain?.name;
const nativePrice = useNativePrice(chainId); const nativePrice = useNativePrice(chainId);
const ftsoPrice = useFtsoPrice(chainId); const ftsoPrice = useFtsoPrice(chainId);
@ -149,7 +150,7 @@ const TokenInfo = ({ chainId, isMobileScreen }) => {
price={reservePrice} price={reservePrice}
description={isNetworkLegacy(chainId) description={isNetworkLegacy(chainId)
? `${ftsoSymbol} is backed by a treasury reserve of crypto assets, with ${reserveSymbol} being the primary and most liquid asset.` ? `${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.` : `${reserveSymbol} (Wrapped ${nativeSymbol}) is an ERC-20 token that represents ${nativeSymbol} and is pegged 1:1 to the value of ${nativeSymbol}.`
} }
/> />
</Box> </Box>
@ -163,7 +164,7 @@ const TokenInfo = ({ chainId, isMobileScreen }) => {
tokenName={nativeSymbol} tokenName={nativeSymbol}
balance={new DecimalBigNumber(nativeBalance?.value ?? 0n, 18)} balance={new DecimalBigNumber(nativeBalance?.value ?? 0n, 18)}
price={reservePrice} 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}.`} description={`${nativeSymbol} is the native currency of the ${networkName} Network, functioning as the backing asset for the ghostDAO.`}
/> />
</Box> </Box>
)} )}

View File

@ -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={`${reserveSymbol} Faucet`} subtitle={`Swap ${chainName} ${nativeInfo.symbol} for ${reserveSymbol}.`} /> <PageTitle name={`${reserveSymbol} Wrapper`} subtitle={`Wrap ${nativeInfo.symbol} into ${reserveSymbol}.`} />
<Container <Container
style={{ style={{
paddingLeft: isSmallScreen || isVerySmallScreen ? "0" : "3.3rem", paddingLeft: isSmallScreen || isVerySmallScreen ? "0" : "3.3rem",
@ -161,8 +161,8 @@ const WethWrapper = ({ chainId, address, config, connect }) => {
onChange={(_, view) => changeIsMinted(view === 0)} onChange={(_, view) => changeIsMinted(view === 0)}
TabIndicatorProps={{ style: { display: "none" } }} TabIndicatorProps={{ style: { display: "none" } }}
> >
<Tab aria-label="faucet-mint-button" label="Mint" style={{ fontSize: "1.5rem" }} /> <Tab aria-label="faucet-mint-button" label="Wrap" style={{ fontSize: "1.5rem" }} />
<Tab aria-label="faucet-burn-button" label="Burn" style={{ fontSize: "1.5rem" }} /> <Tab aria-label="faucet-burn-button" label="Unwrap" style={{ fontSize: "1.5rem" }} />
</Tabs> </Tabs>
{!isSemiSmallScreen && <PrimaryButton {!isSemiSmallScreen && <PrimaryButton
variant="text" variant="text"
@ -246,7 +246,7 @@ const WethWrapper = ({ chainId, address, config, connect }) => {
{address === "" ? {address === "" ?
"Connect" "Connect"
: :
isMint ? "Mint" : "Burn" isMint ? "Wrap" : "Unwrap"
} }
</PrimaryButton> </PrimaryButton>
</Box> </Box>

View File

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