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

apply corrections from @neptune and @ghost_7

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2025-12-15 18:27:32 +03:00
parent 39118c3b93
commit d1d4313851
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
9 changed files with 59 additions and 25 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",
"private": true,
"version": "0.4.0",
"version": "0.4.1",
"type": "module",
"scripts": {
"dev": "vite",

1
src/components/Swap/SwapCollection.jsx
View File

@ -30,7 +30,6 @@ const StyledArrow = styled(Box)(
const SwapCollection = ({ UpperSwapCard, LowerSwapCard, arrowOnClick, iconNotNeeded, maxWidth}) => {
const theme = useTheme();
return (
<Box display="flex" flexDirection="column" maxWidth={maxWidth ? maxWidth : "476px"}>
{UpperSwapCard}

4
src/components/Tooltip/Tooltip.jsx
View File

@ -38,8 +38,8 @@ const Tooltip = ({ message, children }) => {
onResizeCapture={undefined}
slotProps={undefined}
slots={undefined}
>
<Paper className="info-tooltip">
>
<Paper style={{ boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" }} className="info-tooltip">
{typeof message === "string" ? (
<Typography variant="body1" className="info-tooltip-text">
{message}

11
src/containers/Bridge/Bridge.jsx
View File

@ -242,12 +242,12 @@ const Bridge = ({ chainId, address, config, connect }) => {
let certainty = 0n;
for (let i = 0; i < length; i++) {
const commit = latestCommits.at(i);
if (commit.disabled) {
if (commit.disabled || blockNumber < blocksInFourHours) {
continue;
}
certainty += (commit?.lastStoredBlock ?? 0n) - (blockNumber - blocksInFourHours);
}
return Number(certainty * 100n / (blocksInFourHours * BigInt(length)));
return Math.max(Number(certainty * 100n / (blocksInFourHours * BigInt(length))), 0);
}, [latestCommits, blockNumber]);
const timeToNextEpoch = useMemo(() => {
@ -284,7 +284,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
timestamp: Date.now()
}
const newStoredTransactions = [...storedTransactions, transaction];
const newStoredTransactions = [transaction, ...storedTransactions];
setStoredTransactions(newStoredTransactions);
localStorage.setItem(STORAGE_PREFIX, JSON.stringify(newStoredTransactions));
setActiveTxIndex(newStoredTransactions.length - 1)
@ -322,7 +322,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
<Grid container spacing={1}>
<Grid item xs={12} height="100%">
<Paper
sx={{ paddingBottom: "0 !important", marginBottom: "0 !important" }}
sx={{ height: isBigScreen ? "100%" : "150px", paddingBottom: "0 !important", marginBottom: "0 !important" }}
fullWidth
enableBackground
>
@ -362,6 +362,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
/>
</Box>
)}
style={{ height: "434px" }}
fullWidth
enableBackground
>
@ -383,6 +384,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
/>
: <BridgeCardHistory
isSemiSmallScreen={isSemiSmallScreen}
isBigScreen={isBigScreen}
filteredStoredTransactions={filteredStoredTransactions}
ghstSymbol={ghstSymbol}
blockNumber={blockNumber}
@ -407,6 +409,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
}</Typography>
</Box>
}
style={{ height: "434px" }}
enableBackground
fullWidth
>

20
src/containers/Bridge/BridgeCard.jsx
View File

@ -13,6 +13,7 @@ import {
TableCell,
Modal,
useTheme,
useMediaQuery,
} from "@mui/material";
import { useConfig } from "wagmi";
@ -23,7 +24,6 @@ import { PrimaryButton } from "../../components/Button";
import GhostStyledIcon from "../../components/Icon/GhostIcon";
import SwapCard from "../../components/Swap/SwapCard";
import SwapCollection from "../../components/Swap/SwapCollection";
import InfoTooltip from "../../components/Tooltip/InfoTooltip";
import { ghost } from "../../hooks/staking";
import { useBalance } from "../../hooks/tokens";
@ -158,9 +158,10 @@ export const BridgeCardAction = ({
}, [receiver])
return (
<Box width="100%" height="320px" display="flex" flexDirection="column" justifyContent="space-between">
<Box width="100%" height="340px" display="flex" flexDirection="column" justifyContent="space-between">
<SwapCollection
iconNotNeeded
maxWidth="100%"
UpperSwapCard={<SwapCard
id={`bridge-token-receiver`}
inputWidth={"100%"}
@ -200,7 +201,7 @@ export const BridgeCardAction = ({
</Box>
)}
{!gatekeeperAddressEmpty && (
<>
<Box width="100%" maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Gatekeeper:</Typography>}
<Link
fontSize="12px"
@ -211,7 +212,7 @@ export const BridgeCardAction = ({
>
{sliceString(gatekeeperAddress, 10, -8)}
</Link>
</>
</Box>
)}
</Box>
<Box width="100%" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
@ -248,12 +249,15 @@ export const BridgeCardAction = ({
export const BridgeCardHistory = ({
isSemiSmallScreen,
isBigScreen,
filteredStoredTransactions,
ghstSymbol,
blockNumber,
finalityDelay,
setActiveTxIndex
}) => {
const isVeryBigScreen = useMediaQuery("(max-width: 1360px)");
const theme = useTheme();
const background = (index) => {
return index % 2 === 1 ? "" : theme.colors.gray[750];
@ -274,9 +278,9 @@ export const BridgeCardHistory = ({
<Table sx={{ marginTop: "0px" }} stickyHeader aria-label="sticky available transactions">
<TableHead>
<TableRow sx={{ height: "40px" }}>
<TableCell align="left" style={{ padding: "0px", paddingLeft: "16px", fontSize: "12px", borderTopLeftRadius: "3px", background: theme.colors.paper.cardHover }}>
{!(isBigScreen ^ isVeryBigScreen) && <TableCell align="left" style={{ padding: "0px", paddingLeft: "16px", fontSize: "12px", borderTopLeftRadius: "3px", background: theme.colors.paper.cardHover }}>
Transaction
</TableCell>
</TableCell>}
<TableCell align="center" style={{ padding: "0px", fontSize: "12px", background: theme.colors.paper.cardHover }}>
Datetime
</TableCell>
@ -294,7 +298,7 @@ export const BridgeCardHistory = ({
data-testid={idx + `--tx-history`}
onClick={() => setActiveTxIndex(idx)}
>
<TableCell style={{ background: background(idx) }}>
{!(isBigScreen ^ isVeryBigScreen) && <TableCell style={{ background: background(idx) }}>
<Box display="flex" flexDirection="column" justifyContent="center">
<Typography variant="caption">
{formatCurrency(
@ -311,7 +315,7 @@ export const BridgeCardHistory = ({
)}
</Typography>
</Box>
</TableCell>
</TableCell>}
<TableCell style={{ background: background(idx) }}>
<Box display="flex" flexDirection="column" alignItems="center" paddingLeft="5px">

14
src/containers/Bridge/BridgeHeader.jsx
View File

@ -3,6 +3,7 @@ import { Box, Paper, Grid, Typography, LinearProgress, useTheme } from "@mui/mat
import Metric from "../../components/Metric/Metric";
import Countdown from "../../components/Countdown/Countdown";
import InfoTooltip from "../../components/Tooltip/InfoTooltip";
import { formatNumber } from "../../helpers";
export const BridgeHeader = ({
@ -91,12 +92,12 @@ export const BridgeHeader = ({
<Grid item xs={isSmallScreen ? 12 : 4}>
<Metric
isLoading={transactionEta === undefined}
metric={formatTime(transactionEta)}
metric={transactionEta > 14400 ? "∞" : formatTime(transactionEta)}
label="Max Bridge ETA"
tooltip="Maximum estimated time for finalizing bridge transactions based on the latest update."
/>
</Grid>
<Grid item gap={2} xs={12} sx={{ marginTop: "20px" }}>
<Grid item gap={2} xs={12}>
<Box position="relative" margin="4.5px 0">
<LinearProgress
variant="determinate"
@ -125,6 +126,15 @@ export const BridgeHeader = ({
: "Unknown"
}
</Typography>
<InfoTooltip message={
<Box width="350px">
<Typography>0% - 50%: Bridge Stability ❌ Do NOT Bridge</Typography>
<Typography>50% - 70%: Bridge Stability ⚠️ Critical Risk</Typography>
<Typography>70% - 80%: Bridge Stability ⚠️ High Risk</Typography>
<Typography>80% - 90%: Bridge Stability ✅ Moderate Risk</Typography>
<Typography>90% - 100%: Bridge Stability ✅ Safe</Typography>
</Box>
} />
</Box>
</Box>
</Grid>

7
src/containers/Bridge/BridgeModal.jsx
View File

@ -300,7 +300,10 @@ export const BridgeModal = ({
}</Typography>
</Box>
<Box display="flex" flexDirection="row" justifyContent="space-between">
<Typography variant="body2">Executed at:</Typography>
<Box display="flex" flexDirection="row">
<Typography variant="body2">Executed at:</Typography>
<InfoTooltip message="The timestamp when the bridge transaction was submitted." />
</Box>
<Typography variant="body2">{
new Date(currentRecord ? currentRecord.timestamp : 0).toLocaleString('en-US')
}</Typography>
@ -378,7 +381,7 @@ export const BridgeConfirmModal = ({
}}
target="_blank"
rel="noopener noreferrer"
href="https://google.com"
href="https://ghostchain.io/bridge-disclaimer"
>
Learn more.
</Link>

22
src/containers/Bridge/ValidatorTable.jsx
View File

@ -10,6 +10,7 @@ import {
TableHead,
TableRow,
Typography,
Link,
LinearProgress,
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
@ -39,11 +40,12 @@ export const ValidatorTable = ({
}, [bridgeStability]);
return (
<Box width="100%" height="320px" display="flex" flexDirection="column" justifyContent="space-between">
{!providerDetail && <Box sx={{ borderRadius: "15px", background: theme.colors.paper.background, paddingTop: "40px" }} width="100%" height="100%" display="flex" justifyContent="center">
<Box width="100%" height="340px" display="flex" flexDirection="column" justifyContent="space-between" gap="10px">
{!providerDetail && <Box sx={{ borderRadius: "15px", background: theme.colors.paper.background }} width="100%" height="100%" display="flex" justifyContent="center">
<Box padding="20px 30px" display="flex" flexDirection="column" justifyContent="space-around" alignItems="center">
<Typography sx={{ textAlign: "center" }} variant="h6">GHOST Wallet is not detected on your browser!</Typography>
<Typography sx={{ textAlign: "center" }}>Download GHOST Wallet Extension to see real-time validator stats for bridging transaction.</Typography>
<Typography sx={{ textAlign: "center" }} variant="body2">Download GHOST Wallet Extension for real-time visibility into validator status and related transaction risks.</Typography>
<Typography sx={{ textAlign: "center" }} variant="body2"><b>Important:</b> The GHOST Wallet Extension is optional, but be aware that your bridge transaction will succeed or fail irreversibly based on the condition of the validators.</Typography>
<PrimaryButton onClick={() => window.open('https://git.ghostchain.io/ghostchain/ghost-extension-wallet/releases', '_blank', 'noopener,noreferrer')}>
Get GHOST Extension
</PrimaryButton>
@ -53,7 +55,7 @@ export const ValidatorTable = ({
component={Paper}
className="custom-scrollbar"
sx={{
height: "320px",
height: "310px",
overflowY: 'scroll',
msOverflowStyle: "thin !important",
scrollbarWidth: "thin !important",
@ -86,6 +88,18 @@ export const ValidatorTable = ({
</TableBody>
</Table>
</TableContainer>}
<Box marginTop="5px" display="flex" flexDirection="row" justifyContent="center" alignItems="center">
<Link
underline="always"
fontSize="12px"
lineHeight="15px"
target="_blank"
rel="noopener noreferrer"
href="https://telemetry.ghostchain.io"
>
See Validator Telemetry
</Link>
</Box>
</Box>
)
}

3
src/containers/NotFound/NotFound.jsx
View File

@ -7,6 +7,7 @@ import Paper from "../../components/Paper/Paper";
import GhostIcon from "../../assets/icons/ghost-nav-header.svg?react";
import EthIcon from "../../assets/tokens/ETH.svg?react";
import { parseKnownToken } from "../../components/Token/Token"
import { useSwitchChain } from 'wagmi';
import toast from "react-hot-toast";
@ -92,7 +93,7 @@ export default function NotFound({
alignItems="center"
gap="15px"
>
<SvgIcon component={EthIcon} viewBox="0 0 32 32" />
<SvgIcon component={parseKnownToken(chain.nativeCurrency.symbol)} inheritViewBox style={{ height: "25px" }} />
<Typography fontSize="1.2em">{chain.name}</Typography>
</Box>
</Button>