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

Compare commits

base: ghostchain:6f4d38efb3ba22659b808ab7a223d3fe3cb0066c
Branches Tags
ghostchain:main
ghostchain:extension-integration
..
compare: ghostchain:39118c3b934d09c9d851db9eff36af94746d38c0
Branches Tags
ghostchain:main
ghostchain:extension-integration

No commits in common. "6f4d38efb3ba22659b808ab7a223d3fe3cb0066c" and "39118c3b934d09c9d851db9eff36af94746d38c0" have entirely different histories.
6f4d38efb3 ... 39118c3b93

11 changed files with 123 additions and 276 deletions
Show Stats Expand all files Collapse all files

2
package.json
View File

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

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

@ -30,6 +30,7 @@ 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 style={{ boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" }} className="info-tooltip">
>
<Paper className="info-tooltip">
{typeof message === "string" ? (
<Typography variant="body1" className="info-tooltip-text">
{message}

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

@ -171,7 +171,9 @@ const Bridge = ({ chainId, address, config, connect }) => {
const applaused = transactionApplaused?.finalized ?? false;
const clappedAmount = transactionApplaused?.clapped_amount ?? 0n;
const clappedPercentage = clappedAmount * 100n / (totalStakedAmount ?? 1n);
const clapsPercentage = (numberOfClaps ?? 0) * 100 / (authorities?.length ?? 1);
const step = finalization > 0
? 0
: applaused ? 2 : 1;
return {
...watchTransaction,
@ -180,15 +182,14 @@ const Bridge = ({ chainId, address, config, connect }) => {
numberOfClaps,
clappedAmount,
clappedPercentage,
clapsPercentage,
step,
}
}, [
transactionApplaused,
finalityDelay,
watchTransaction,
blockNumber,
totalStakedAmount,
authorities
totalStakedAmount
]);
const filteredStoredTransactions = useMemo(() => {
@ -241,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 || blockNumber < blocksInFourHours) {
if (commit.disabled) {
continue;
}
certainty += (commit?.lastStoredBlock ?? 0n) - (blockNumber - blocksInFourHours);
}
return Math.max(Number(certainty * 100n / (blocksInFourHours * BigInt(length))), 0);
return Number(certainty * 100n / (blocksInFourHours * BigInt(length)));
}, [latestCommits, blockNumber]);
const timeToNextEpoch = useMemo(() => {
@ -283,10 +284,10 @@ const Bridge = ({ chainId, address, config, connect }) => {
timestamp: Date.now()
}
const newStoredTransactions = [transaction, ...storedTransactions];
const newStoredTransactions = [...storedTransactions, transaction];
setStoredTransactions(newStoredTransactions);
localStorage.setItem(STORAGE_PREFIX, JSON.stringify(newStoredTransactions));
setActiveTxIndex(0)
setActiveTxIndex(newStoredTransactions.length - 1)
}
return (
@ -321,7 +322,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
<Grid container spacing={1}>
<Grid item xs={12} height="100%">
<Paper
sx={{ height: isBigScreen ? "100%" : "142px", paddingBottom: "0 !important", marginBottom: "0 !important" }}
sx={{ paddingBottom: "0 !important", marginBottom: "0 !important" }}
fullWidth
enableBackground
>
@ -361,7 +362,6 @@ const Bridge = ({ chainId, address, config, connect }) => {
/>
</Box>
)}
style={{ height: "434px" }}
fullWidth
enableBackground
>
@ -383,7 +383,6 @@ const Bridge = ({ chainId, address, config, connect }) => {
/>
: <BridgeCardHistory
isSemiSmallScreen={isSemiSmallScreen}
isBigScreen={isBigScreen}
filteredStoredTransactions={filteredStoredTransactions}
ghstSymbol={ghstSymbol}
blockNumber={blockNumber}
@ -408,7 +407,6 @@ const Bridge = ({ chainId, address, config, connect }) => {
}</Typography>
</Box>
}
style={{ height: "434px" }}
enableBackground
fullWidth
>

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

@ -13,7 +13,6 @@ import {
TableCell,
Modal,
useTheme,
useMediaQuery,
} from "@mui/material";
import { useConfig } from "wagmi";
@ -24,13 +23,13 @@ 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";
import CheckIcon from '@mui/icons-material/Check';
import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
import { formatNumber, formatCurrency, timeConverter } from "../../helpers";
@ -159,21 +158,16 @@ export const BridgeCardAction = ({
}, [receiver])
return (
<Box width="100%" height="340px" display="flex" flexDirection="column" justifyContent="space-between">
<Box width="100%" height="320px" display="flex" flexDirection="column" justifyContent="space-between">
<SwapCollection
iconNotNeeded
maxWidth="100%"
UpperSwapCard={<SwapCard
id={`bridge-token-receiver`}
inputWidth={"100%"}
value={convertedReceiver ? sliceString(receiver, 15, -10) : receiver}
onChange={event => setReceiver(convertedReceiver ? "" : event.currentTarget.value)}
value={receiver}
onChange={event => setReceiver(event.currentTarget.value)}
inputProps={{ "data-testid": "fromInput" }}
placeholder="GHOST address (sf prefixed)"
endString={convertedReceiver
? <GhostStyledIcon color="success" viewBox="0 0 25 25" component={CheckCircleIcon} />
: undefined
}
type="text"
maxWidth="100%"
/>}
@ -195,18 +189,18 @@ export const BridgeCardAction = ({
gap="10px"
justifyContent="space-between"
>
<Box width="100%" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
<Box display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{gatekeeperAddressEmpty && (
<Box display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
<Typography align="justify" mr="10px" variant="body2" color="textSecondary">
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
<Typography mr="10px" variant="body2" color="textSecondary">
<em>
There is no connected gatekeeper on {chainName} network yet.
There is no connected gatekeeper on {chainName} network. Propose gatekeeper on this network to make authorities listen to it.
</em>
</Typography>
</Box>
)}
{!gatekeeperAddressEmpty && (
<Box width="100%" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
<>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Gatekeeper:</Typography>}
<Link
fontSize="12px"
@ -217,7 +211,7 @@ export const BridgeCardAction = ({
>
{sliceString(gatekeeperAddress, 10, -8)}
</Link>
</Box>
</>
)}
</Box>
<Box width="100%" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
@ -254,15 +248,12 @@ 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];
@ -283,9 +274,9 @@ export const BridgeCardHistory = ({
<Table sx={{ marginTop: "0px" }} stickyHeader aria-label="sticky available transactions">
<TableHead>
<TableRow sx={{ height: "40px" }}>
{!(isBigScreen ^ isVeryBigScreen) && <TableCell align="left" style={{ padding: "0px", paddingLeft: "16px", fontSize: "12px", borderTopLeftRadius: "3px", background: theme.colors.paper.cardHover }}>
<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>
@ -303,7 +294,7 @@ export const BridgeCardHistory = ({
data-testid={idx + `--tx-history`}
onClick={() => setActiveTxIndex(idx)}
>
{!(isBigScreen ^ isVeryBigScreen) && <TableCell style={{ background: background(idx) }}>
<TableCell style={{ background: background(idx) }}>
<Box display="flex" flexDirection="column" justifyContent="center">
<Typography variant="caption">
{formatCurrency(
@ -320,7 +311,7 @@ export const BridgeCardHistory = ({
)}
</Typography>
</Box>
</TableCell>}
</TableCell>
<TableCell style={{ background: background(idx) }}>
<Box display="flex" flexDirection="column" alignItems="center" paddingLeft="5px">

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

@ -3,7 +3,6 @@ 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 = ({
@ -84,7 +83,7 @@ export const BridgeHeader = ({
<Grid item xs={isSmallScreen ? 12 : 4}>
<Metric
isLoading={timeToNextEpoch === undefined}
metric={timeToNextEpoch < 30 ? "Rotating..." : formatTime(timeToNextEpoch)}
metric={formatTime(timeToNextEpoch)}
label="Rotation in"
tooltip="Bridge Stability Index refreshes every 10 minutes with new validator blocks; resets each Era when the validator set is updated."
/>
@ -92,12 +91,12 @@ export const BridgeHeader = ({
<Grid item xs={isSmallScreen ? 12 : 4}>
<Metric
isLoading={transactionEta === undefined}
metric={transactionEta > 14400 ? "∞" : formatTime(transactionEta)}
metric={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} style={{ paddingTop: "0" }} >
<Grid item gap={2} xs={12} sx={{ marginTop: "20px" }}>
<Box position="relative" margin="4.5px 0">
<LinearProgress
variant="determinate"
@ -123,18 +122,9 @@ export const BridgeHeader = ({
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
Bridge Stability {bridgeStability
? `${formatNumber(bridgeStability, 0)}% ${progressBarPostfix}`
: "N/A"
: "Unknown"
}
</Typography>
<InfoTooltip message={
<Box width="220px">
<Typography>0% - 50%: ❌ Do NOT Bridge</Typography>
<Typography>50% - 70%: ⚠️ Critical Risk</Typography>
<Typography>70% - 80%: ⚠️ High Risk</Typography>
<Typography>80% - 90%: ✅ Moderate Risk</Typography>
<Typography>90% - 100%: ✅ Safe</Typography>
</Box>
} />
</Box>
</Box>
</Grid>

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

@ -8,7 +8,6 @@ import ThumbDownAltIcon from '@mui/icons-material/ThumbDownAlt';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CheckIcon from '@mui/icons-material/Check';
import AssuredWorkloadIcon from '@mui/icons-material/AssuredWorkload';
import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
@ -89,57 +88,11 @@ export const BridgeModal = ({
>
<Box display="flex" gap="1.5rem" flexDirection="column" marginTop=".8rem">
<Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
{currentRecord?.finalization > 0 && (
<>
<Box
sx={{
transition: "all 0.8s ease",
transform: currentRecord?.finalization > 0 && "scale(1.2)",
color: currentRecord?.finalization === 0 && theme.colors.primary[300]
}}
width="120px"
display="flex"
flexDirection="column"
justifyContent="start"
alignItems="center"
>
<GhostStyledIcon
sx={{
width: "35px",
height: "35px",
animation: currentRecord?.finalization > 0 && 'rotateHourGlass 2s ease-in-out infinite',
'@keyframes rotateHourGlass': {
'0%': { transform: 'rotate(0deg)' },
'15%': { transform: 'rotate(0deg)' },
'85%': { transform: 'rotate(180deg)' },
'100%': { transform: 'rotate(180deg)' },
},
}}
viewBox="0 0 25 25"
component={HourglassBottomIcon}
/>
<Typography variant="caption">Finalization</Typography>
<Typography variant="caption">
{(currentRecord?.finalization ?? 0).toString()} blocks left
</Typography>
</Box>
<GhostStyledIcon
sx={{
transition: "all 0.3s ease",
opacity: currentRecord?.finalization > 0 && "0.2"
}}
component={ArrowRightIcon}
/>
</>
)}
<Box
sx={{
transition: "all 0.3s ease",
opacity: currentRecord?.finalization > 0 && "0.2",
transform: currentRecord?.finalization === 0 && currentRecord?.clappedPercentage < 50n && "scale(1.2)",
color: currentRecord?.clappedPercentage > 50n && theme.colors.primary[300]
transition: "all 0.8s ease",
transform: currentRecord?.step === 0 && "scale(1.2)",
color: currentRecord?.step > 0 && theme.colors.primary[300]
}}
width="120px"
display="flex"
@ -147,42 +100,38 @@ export const BridgeModal = ({
justifyContent="start"
alignItems="center"
>
<Box display="flex" flexDirection="column" justifyContent="center" alignItems="center">
{currentRecord?.clappedPercentage < 50n
? <GhostStyledIcon
sx={{
width: "35px",
height: "35px",
animation: currentRecord?.finalization === 0 && 'bounce 2s ease-in-out infinite',
'@keyframes bounce': {
'0%, 20%, 50%, 80%, 75%, 100%': { transform: 'translateY(0)' },
'40%': { transform: 'translateY(-4px)' },
'60%': { transform: 'translateY(-2px)' },
},
}}
viewBox="0 0 25 25"
component={AccountBalanceIcon}
/>
: <GhostStyledIcon sx={{ width: "35px", height: "35px" }} viewBox="0 0 25 25" component={AssuredWorkloadIcon} />
}
<Typography variant="caption">Capital Backed</Typography>
<Typography variant="caption">
{(currentRecord?.clappedAmount ?? 0n) / 10n**18n} {ghstSymbol} ({currentRecord?.clappedPercentage ?? 0}%)
</Typography>
</Box>
<GhostStyledIcon
sx={{
width: "35px",
height: "35px",
animation: currentRecord?.step === 0 && 'rotateHourGlass 2s ease-in-out infinite',
'@keyframes rotateHourGlass': {
'0%': { transform: 'rotate(0deg)' },
'15%': { transform: 'rotate(0deg)' },
'85%': { transform: 'rotate(180deg)' },
'100%': { transform: 'rotate(180deg)' },
},
}}
viewBox="0 0 25 25"
component={HourglassBottomIcon}
/>
<Typography variant="caption">Finalization</Typography>
<Typography variant="caption">
{(currentRecord?.finalization ?? 0).toString()} blocks left
</Typography>
</Box>
<GhostStyledIcon
sx={{ transition: "all 0.3s ease", opacity: currentRecord?.clappedPercentage < 50n && "0.2" }}
sx={{ transition: "all 0.3s ease", opacity: currentRecord?.step < 1 && "0.2" }}
component={ArrowRightIcon}
/>
<Box
sx={{
transition: "all 0.3s ease",
opacity: currentRecord?.finalization > 0 && "0.2",
transform: currentRecord?.finalization === 0 && currentRecord?.clapsPercentage < 50 && "scale(1.2)",
color: currentRecord?.clapsPercentage > 50 && theme.colors.primary[300]
opacity: currentRecord?.step < 1 && "0.2",
transform: currentRecord?.step === 1 && "scale(1.2)",
color: currentRecord?.step > 1 && theme.colors.primary[300]
}}
width="120px"
display="flex"
@ -191,14 +140,14 @@ export const BridgeModal = ({
alignItems="center"
>
<Box display="flex" flexDirection="row" justifyContent="center" alignItems="center">
{currentRecord?.clapsPercentage < 50
{currentRecord?.step <= 1
? (
<>
<GhostStyledIcon
sx={{
width: "35px",
height: "35px",
animation: currentRecord?.finalization === 0 && 'rotateRightHand 2s ease-in-out infinite',
animation: currentRecord?.step === 1 && 'rotateRightHand 2s ease-in-out infinite',
'@keyframes rotateRightHand': {
'0%': { transform: 'rotateX(360deg)' },
'15%': { transform: 'rotateX(360deg)' },
@ -214,7 +163,7 @@ export const BridgeModal = ({
sx={{
width: "35px",
height: "35px",
animation: currentRecord?.finalization === 0 && 'rotateRightHand 2s ease-in-out infinite',
animation: currentRecord?.step === 1 && 'rotateRightHand 2s ease-in-out infinite',
'@keyframes rotateRightHand': {
'0%': { transform: 'rotateX(0deg)' },
'15%': { transform: 'rotateX(0deg)' },
@ -246,36 +195,50 @@ export const BridgeModal = ({
</Box>
</Box>
{currentRecord?.finalization === 0 && (
<>
<GhostStyledIcon
sx={{ transition: "all 0.3s ease", opacity: !currentRecord?.applaused && "0.2" }}
component={ArrowRightIcon}
/>
<GhostStyledIcon
sx={{
transition: "all 0.3s ease",
opacity: currentRecord?.step < 2 && "0.2"
}}
component={ArrowRightIcon}
/>
<Box
sx={{
transition: "all 0.3s ease",
opacity: !currentRecord?.applaused && "0.2",
transform: currentRecord?.applaused && "scale(1.2)",
color: currentRecord?.applaused && theme.colors.primary[300]
}}
width="120px"
display="flex"
flexDirection="column"
justifyContent="start"
alignItems="center"
>
<GhostStyledIcon
sx={{ width: "35px", height: "35px" }}
viewBox="0 0 25 25"
component={CheckCircleIcon}
/>
<Typography variant="caption">Applaused</Typography>
<Typography variant="caption">Check Receiver</Typography>
</Box>
</>
)}
<Box
sx={{
transition: "all 0.3s ease",
opacity: currentRecord?.step < 2 && "0.2",
transform: currentRecord?.step === 2 && "scale(1.2)",
color: currentRecord?.step === 2 && theme.colors.primary[300]
}}
width="120px"
display="flex"
flexDirection="column"
justifyContent="start"
alignItems="center"
>
{currentRecord?.applaused
? <>
<GhostStyledIcon
sx={{ width: "35px", height: "35px" }}
viewBox="0 0 25 25"
component={CheckCircleIcon}
/>
<Typography variant="caption">Applaused</Typography>
<Typography variant="caption">Check Receiver</Typography>
</>
: <>
<GhostStyledIcon
sx={{ width: "35px", height: "35px" }}
viewBox="0 0 25 25"
component={AssuredWorkloadIcon}
/>
<Typography variant="caption">Capital Backed</Typography>
<Typography variant="caption">
{(currentRecord?.clappedAmount ?? 0n) / 10n**18n} {ghstSymbol} ({currentRecord?.clappedPercentage ?? 0}%)
</Typography>
</>
}
</Box>
</Box>
<Box display="flex" flexDirection="column" gap="5px" padding="0.6rem 0">
@ -337,10 +300,7 @@ export const BridgeModal = ({
}</Typography>
</Box>
<Box display="flex" flexDirection="row" justifyContent="space-between">
<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">Executed at:</Typography>
<Typography variant="body2">{
new Date(currentRecord ? currentRecord.timestamp : 0).toLocaleString('en-US')
}</Typography>
@ -418,7 +378,7 @@ export const BridgeConfirmModal = ({
}}
target="_blank"
rel="noopener noreferrer"
href="https://ghostchain.io/bridge-disclaimer"
href="https://google.com"
>
Learn more.
</Link>

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

@ -10,13 +10,10 @@ import {
TableHead,
TableRow,
Typography,
Link,
LinearProgress,
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import WarningIcon from '@mui/icons-material/Warning';
import CancelIcon from '@mui/icons-material/Cancel';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@ -34,7 +31,6 @@ export const ValidatorTable = ({
providerDetail,
}) => {
const theme = useTheme();
const [sortedBy, setsortedBy] = useState(undefined);
const stabilityColor = useMemo(() => {
const red = Math.round(255 * (1 - bridgeStability / 100));
@ -42,72 +38,12 @@ export const ValidatorTable = ({
return `rgb(${red}, ${green}, 0)`;
}, [bridgeStability]);
const sortedCommits = useMemo(() => {
return latestCommits?.sort((a, b) => {
let one = 0;
let two = 0;
switch (sortedBy) {
case -1:
one = Number(b.lastUpdated ?? 0n);
two = Number(a.lastUpdated ?? 0n);
break;
case 1:
one = Number(a.lastUpdated ?? 0n);
two = Number(b.lastUpdated ?? 0n);
break;
case -2:
one = Number(b.lastStoredBlock ?? 0n);
two = Number(a.lastStoredBlock ?? 0n);
break;
case 2:
one = Number(a.lastStoredBlock ?? 0n);
two = Number(b.lastStoredBlock ?? 0n);
break;
case -3:
one = Number(b.lastStoredBlock ?? 0n);
two = Number(a.lastStoredBlock ?? 0n);
break;
case 3:
one = Number(a.lastStoredBlock ?? 0n);
two = Number(b.lastStoredBlock ?? 0n);
break;
case -4:
one = b.disabled ? 1 : 0;
two = a.disabled ? 1 : 0;
break;
case 4:
one = a.disabled ? 1 : 0;
two = b.disabled ? 1 : 0;
break;
default:
break;
}
return one - two;
}) ?? [];
}, [latestCommits, sortedBy]);
const changeSort = (prevValue, newValue) => {
if (prevValue === undefined) {
return newValue;
}
const prevValueAbs = Math.abs(prevValue);
const newValueAbs = Math.abs(newValue);
if (prevValueAbs === newValueAbs) {
return prevValue * -1;
} else {
return newValue;
}
}
return (
<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 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 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" }} 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>
<Typography sx={{ textAlign: "center" }}>Download GHOST Wallet Extension to see real-time validator stats for bridging transaction.</Typography>
<PrimaryButton onClick={() => window.open('https://git.ghostchain.io/ghostchain/ghost-extension-wallet/releases', '_blank', 'noopener,noreferrer')}>
Get GHOST Extension
</PrimaryButton>
@ -117,7 +53,7 @@ export const ValidatorTable = ({
component={Paper}
className="custom-scrollbar"
sx={{
height: "310px",
height: "320px",
overflowY: 'scroll',
msOverflowStyle: "thin !important",
scrollbarWidth: "thin !important",
@ -126,11 +62,11 @@ export const ValidatorTable = ({
<Table sx={{ marginTop: "0px" }} stickyHeader aria-label="sticky available validators">
<TableHead>
<TableRow sx={{ height: "40px" }}>
<BridgeHeaderTableCell index={0} changeSort={() => setsortedBy(undefined)} value="Validator" background={theme.colors.paper.cardHover} borderTopLeftRadius="3px" />
<BridgeHeaderTableCell index={1} sortedBy={sortedBy} changeSort={() => setsortedBy(prev => changeSort(prev, 1))} value="Last Acitve" background={theme.colors.paper.cardHover} tooltip="GHOST Validators must submit block commitments every 10 minutes to remain active." />
<BridgeHeaderTableCell index={2} sortedBy={sortedBy} changeSort={() => setsortedBy(prev => changeSort(prev, 2))} value="Block Height" background={theme.colors.paper.cardHover} tooltip="The latest EVM block height reported by the Validator." />
<BridgeHeaderTableCell index={3} sortedBy={sortedBy} changeSort={() => setsortedBy(prev => changeSort(prev, 3))} value="Block Delayed" background={theme.colors.paper.cardHover} tooltip="Block delays under 4 hours are safe. Block delays over 4 hours risk bridge transaction failure." />
<BridgeHeaderTableCell index={4} sortedBy={sortedBy} changeSort={() => setsortedBy(prev => changeSort(prev, 4))} value="Status" background={theme.colors.paper.cardHover} borderTopRightRadius="3px" tooltip="Active and disabled validators fore the current GHOST Epoch." />
<BridgeHeaderTableCell value="Validator" background={theme.colors.paper.cardHover} borderTopLeftRadius="3px" />
<BridgeHeaderTableCell value="Last Acitve" background={theme.colors.paper.cardHover} tooltip="GHOST Validators must submit block commitments every 10 minutes to remain active." />
<BridgeHeaderTableCell value="Block Height" background={theme.colors.paper.cardHover} tooltip="The latest EVM block height reported by the Validator." />
<BridgeHeaderTableCell value="Block Delayed" background={theme.colors.paper.cardHover} tooltip="Block delays under 4 hours are safe. Block delays over 4 hours risk bridge transaction failure." />
<BridgeHeaderTableCell value="Status" background={theme.colors.paper.cardHover} borderTopRightRadius="3px" tooltip="Active and disabled validators fore the current GHOST Epoch." />
</TableRow>
</TableHead>
@ -150,26 +86,11 @@ 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>
)
}
const BridgeHeaderTableCell = ({
index=0,
sortedBy=undefined,
changeSort,
align="center",
borderTopRightRadius="0px",
borderTopLeftRadius="0px",
@ -192,21 +113,11 @@ const BridgeHeaderTableCell = ({
background,
fontSize,
padding,
cursor: "pointer",
}}
>
<Box onClick={changeSort} display="flex" justifyContent="center" alignItems="center">
<Box display="flex" justifyContent="center">
{value}
{tooltip
? Math.abs(sortedBy) !== index
? <InfoTooltip message={tooltip} />
: <GhostStyledIcon
sx={{ width: "12px", height: "12px" }}
viewBox="0 0 25 25"
component={sortedBy > 0 ? KeyboardArrowDownIcon : KeyboardArrowUpIcon}
/>
: <></>
}
{tooltip && <InfoTooltip message={tooltip} />}
</Box>
</TableCell>
)

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

@ -7,7 +7,6 @@ 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";
@ -93,7 +92,7 @@ export default function NotFound({
alignItems="center"
gap="15px"
>
<SvgIcon component={parseKnownToken(chain.nativeCurrency.symbol)} inheritViewBox style={{ height: "25px" }} />
<SvgIcon component={EthIcon} viewBox="0 0 32 32" />
<Typography fontSize="1.2em">{chain.name}</Typography>
</Box>
</Button>

8
src/helpers/index.js
View File

@ -42,13 +42,9 @@ export const sortBondsByDiscount = (bonds) => {
return Array.from(bonds).filter((bond) => !bond.isSoldOut).sort((a, b) => (a.discount.gt(b.discount) ? -1 : 1));
};
export const timeConverter = (time, max = 7200, maxText = "long ago") => {
export const timeConverter = (time) => {
const seconds = Number(time);
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
if (mins > max) {
return maxText;
} else {
return `${mins}m ${secs < 10 ? '0' : ''}${secs}s`;
}
return `${mins}m ${secs < 10 ? '0' : ''}${secs}s`;
}

5
src/hooks/helpers.js
View File

@ -137,11 +137,12 @@ export const getTokenAddress = (chainId, name) => {
return address;
}
// TBD: should be extended on new tokens
export const getTokenIcons = (chainId, address) => {
let icons = [""];
switch (address) {
case RESERVE_ADDRESSES[chainId]:
icons = [chainId === 11155111 ? "GDAI" : "WETH"];
icons = ["RESERVE"];
break;
case FTSO_ADDRESSES[chainId]:
icons = ["FTSO"];
@ -153,7 +154,7 @@ export const getTokenIcons = (chainId, address) => {
icons = ["GHST"];
break;
case FTSO_DAI_LP_ADDRESSES[chainId]:
icons = ["FTSO", chainId === 11155111 ? "GDAI" : "WETH"];
icons = ["FTSO", "RESERVE"];
break;
}
return icons;