fix reserve icons for list of all bonds

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

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

src/components/Swap/SwapCollection.jsx

@@ -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}

src/components/Tooltip/Tooltip.jsx

@@ -39,7 +39,7 @@ const Tooltip = ({ message, children }) => {
                 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}

src/containers/Bridge/Bridge.jsx

@@ -171,9 +171,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
         const applaused = transactionApplaused?.finalized ?? false;
         const clappedAmount = transactionApplaused?.clapped_amount ?? 0n;
         const clappedPercentage = clappedAmount * 100n / (totalStakedAmount ?? 1n);
-        const step = finalization > 0
+        const clapsPercentage = (numberOfClaps ?? 0) * 100 / (authorities?.length ?? 1);
-            ? 0
-            : applaused ? 2 : 1;
 
         return {
             ...watchTransaction,
@@ -182,14 +180,15 @@ const Bridge = ({ chainId, address, config, connect }) => {
             numberOfClaps,
             clappedAmount,
             clappedPercentage,
-            step,
+            clapsPercentage,
         }
     }, [
         transactionApplaused,
         finalityDelay,
         watchTransaction,
         blockNumber,
-        totalStakedAmount
+        totalStakedAmount,
+        authorities
     ]);
 
     const filteredStoredTransactions = useMemo(() => {
@@ -242,12 +241,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,10 +283,10 @@ 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)
+        setActiveTxIndex(0)
     }
 
     return (
@@ -322,7 +321,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%" : "142px", paddingBottom: "0 !important", marginBottom: "0 !important" }}
                                 fullWidth
                                 enableBackground
                             >
@@ -362,6 +361,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                             />
                                         </Box>
                                     )}
+                                    style={{ height: "434px" }}
                                     fullWidth
                                     enableBackground
                                 >
@@ -383,6 +383,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                         />
                                         : <BridgeCardHistory
                                             isSemiSmallScreen={isSemiSmallScreen}
+                                            isBigScreen={isBigScreen}
                                             filteredStoredTransactions={filteredStoredTransactions}
                                             ghstSymbol={ghstSymbol}
                                             blockNumber={blockNumber}
@@ -407,6 +408,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                             }</Typography>
                                         </Box>
                                     }
+                                    style={{ height: "434px" }}
                                     enableBackground
                                     fullWidth
                                 >

src/containers/Bridge/BridgeCard.jsx

@@ -13,6 +13,7 @@ import {
     TableCell,
     Modal,
     useTheme,
+    useMediaQuery,
 } from "@mui/material";
 
 import { useConfig } from "wagmi";
@@ -23,13 +24,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";
@@ -158,16 +159,21 @@ 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%"}
-                    value={receiver}
+                    value={convertedReceiver ? sliceString(receiver, 15, -10) : receiver}
-                    onChange={event => setReceiver(event.currentTarget.value)}
+                    onChange={event => setReceiver(convertedReceiver ? "" : 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%"
                 />}
@@ -189,18 +195,18 @@ export const BridgeCardAction = ({
                 gap="10px"
                 justifyContent="space-between"
             >
-                <Box display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
+                <Box width="100%" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
                     {gatekeeperAddressEmpty && (
-                        <Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
+                        <Box display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
-                            <Typography mr="10px" variant="body2" color="textSecondary">
+                            <Typography align="justify" mr="10px" variant="body2" color="textSecondary">
                                 <em>
-                                    There is no connected gatekeeper on {chainName} network. Propose gatekeeper on this network to make authorities listen to it.
+                                    There is no connected gatekeeper on {chainName} network yet.
                                 </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"
@@ -211,7 +217,7 @@ export const BridgeCardAction = ({
                             >
                                 {sliceString(gatekeeperAddress, 10, -8)}
                             </Link>
-                        </>
+                        </Box>
                     )}
                 </Box>
                 <Box width="100%" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
@@ -248,12 +254,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 +283,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 +303,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 +320,7 @@ export const BridgeCardHistory = ({
                                             )}
                                         </Typography>
                                     </Box>
-                                </TableCell>
+                                </TableCell>}
 
                                 <TableCell style={{ background: background(idx) }}>
                                     <Box display="flex" flexDirection="column" alignItems="center" paddingLeft="5px">

src/containers/Bridge/BridgeHeader.jsx

@@ -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 = ({
@@ -83,7 +84,7 @@ export const BridgeHeader = ({
             <Grid item xs={isSmallScreen ? 12 : 4}>
                 <Metric
                     isLoading={timeToNextEpoch === undefined}
-                    metric={formatTime(timeToNextEpoch)}
+                    metric={timeToNextEpoch < 30 ? "Rotating..." : 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."
                 />
@@ -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} style={{ paddingTop: "0" }} >
                 <Box position="relative" margin="4.5px 0">
                     <LinearProgress
                         variant="determinate"
@@ -122,9 +123,18 @@ export const BridgeHeader = ({
                         <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                              Bridge Stability {bridgeStability
                                  ? `${formatNumber(bridgeStability, 0)}% ${progressBarPostfix}`
-                                 : "Unknown"
+                                 : "N/A"
                              }
                         </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>

src/containers/Bridge/BridgeModal.jsx

@@ -8,6 +8,7 @@ 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';
@@ -88,11 +89,13 @@ 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?.step === 0 && "scale(1.2)",
+                                    transform: currentRecord?.finalization > 0 && "scale(1.2)",
-                            color: currentRecord?.step > 0 && theme.colors.primary[300]
+                                    color: currentRecord?.finalization === 0 && theme.colors.primary[300]
                                 }}
                                 width="120px"
                                 display="flex"
@@ -104,7 +107,7 @@ export const BridgeModal = ({
                                     sx={{
                                         width: "35px",
                                         height: "35px",
-                                animation: currentRecord?.step === 0 && 'rotateHourGlass 2s ease-in-out infinite',
+                                        animation: currentRecord?.finalization > 0 && 'rotateHourGlass 2s ease-in-out infinite',
                                         '@keyframes rotateHourGlass': {
                                             '0%': { transform: 'rotate(0deg)' },
                                             '15%': { transform: 'rotate(0deg)' },
@@ -122,16 +125,64 @@ export const BridgeModal = ({
                             </Box>
 
                             <GhostStyledIcon
-                        sx={{ transition: "all 0.3s ease", opacity: currentRecord?.step < 1 && "0.2" }}
+                                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]
+                        }}
+                        width="120px"
+                        display="flex"
+                        flexDirection="column"
+                        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>
+                    </Box>
+
+                    <GhostStyledIcon
+                        sx={{ transition: "all 0.3s ease", opacity: currentRecord?.clappedPercentage < 50n && "0.2" }}
                         component={ArrowRightIcon}
                     />
 
                     <Box
                         sx={{
                             transition: "all 0.3s ease",
-                            opacity: currentRecord?.step < 1 && "0.2",
+                            opacity: currentRecord?.finalization > 0 && "0.2",
-                            transform: currentRecord?.step === 1 && "scale(1.2)",
+                            transform: currentRecord?.finalization === 0 && currentRecord?.clapsPercentage < 50 && "scale(1.2)",
-                            color: currentRecord?.step > 1 && theme.colors.primary[300]
+                            color: currentRecord?.clapsPercentage > 50 && theme.colors.primary[300]
                         }}
                         width="120px"
                         display="flex"
@@ -140,14 +191,14 @@ export const BridgeModal = ({
                         alignItems="center"
                     >
                         <Box display="flex" flexDirection="row" justifyContent="center" alignItems="center">
-                            {currentRecord?.step <= 1
+                            {currentRecord?.clapsPercentage < 50
                                 ? (
                                     <>
                                         <GhostStyledIcon
                                             sx={{
                                                 width: "35px",
                                                 height: "35px",
-                                                animation: currentRecord?.step === 1 && 'rotateRightHand 2s ease-in-out infinite',
+                                                animation: currentRecord?.finalization === 0 && 'rotateRightHand 2s ease-in-out infinite',
                                                 '@keyframes rotateRightHand': {
                                                     '0%': { transform: 'rotateX(360deg)' },
                                                     '15%': { transform: 'rotateX(360deg)' },
@@ -163,7 +214,7 @@ export const BridgeModal = ({
                                             sx={{
                                                 width: "35px",
                                                 height: "35px",
-                                                animation: currentRecord?.step === 1 && 'rotateRightHand 2s ease-in-out infinite',
+                                                animation: currentRecord?.finalization === 0 && 'rotateRightHand 2s ease-in-out infinite',
                                                 '@keyframes rotateRightHand': {
                                                     '0%': { transform: 'rotateX(0deg)' },
                                                     '15%': { transform: 'rotateX(0deg)' },
@@ -195,20 +246,19 @@ export const BridgeModal = ({
                         </Box>
                     </Box>
 
+                    {currentRecord?.finalization === 0 && (
+                        <>
                             <GhostStyledIcon
-                        sx={{
+                                sx={{ transition: "all 0.3s ease", opacity: !currentRecord?.applaused && "0.2" }}
-                            transition: "all 0.3s ease",
-                            opacity: currentRecord?.step < 2 && "0.2"
-                        }}
                                 component={ArrowRightIcon}
                             />
 
                             <Box
                                 sx={{
                                     transition: "all 0.3s ease",
-                            opacity: currentRecord?.step < 2 && "0.2",
+                                    opacity: !currentRecord?.applaused && "0.2",
-                            transform: currentRecord?.step === 2 && "scale(1.2)",
+                                    transform: currentRecord?.applaused && "scale(1.2)",
-                            color: currentRecord?.step === 2 && theme.colors.primary[300]
+                                    color: currentRecord?.applaused && theme.colors.primary[300]
                                 }}
                                 width="120px"
                                 display="flex"
@@ -216,8 +266,6 @@ export const BridgeModal = ({
                                 justifyContent="start"
                                 alignItems="center"
                             >
-                        {currentRecord?.applaused
-                            ? <>
                                     <GhostStyledIcon
                                         sx={{ width: "35px", height: "35px" }}
                                         viewBox="0 0 25 25"
@@ -225,20 +273,9 @@ export const BridgeModal = ({
                                     />
                                     <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">
@@ -300,7 +337,10 @@ 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">{
                             new Date(currentRecord ? currentRecord.timestamp : 0).toLocaleString('en-US')
                         }</Typography>
@@ -378,7 +418,7 @@ export const BridgeConfirmModal = ({
                                     }}
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    href="https://google.com"
+                                    href="https://ghostchain.io/bridge-disclaimer"
                                 >
                                     Learn more.
                                 </Link>

src/containers/Bridge/ValidatorTable.jsx

@@ -10,10 +10,13 @@ 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';
@@ -31,6 +34,7 @@ export const ValidatorTable = ({
     providerDetail,
 }) => {
     const theme = useTheme();
+    const [sortedBy, setsortedBy] = useState(undefined);
 
     const stabilityColor = useMemo(() => {
         const red = Math.round(255 * (1 - bridgeStability / 100));
@@ -38,12 +42,72 @@ 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="320px" display="flex" flexDirection="column" justifyContent="space-between">
+        <Box width="100%" height="340px" display="flex" flexDirection="column" justifyContent="space-between" gap="10px">
-            {!providerDetail && <Box sx={{ borderRadius: "15px", background: theme.colors.paper.background, paddingTop: "40px" }} width="100%" height="100%" display="flex" justifyContent="center">
+            {!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 +117,7 @@ export const ValidatorTable = ({
                 component={Paper}
                 className="custom-scrollbar"
                 sx={{
-                    height: "320px",
+                    height: "310px",
                     overflowY: 'scroll',
                     msOverflowStyle: "thin !important",
                     scrollbarWidth: "thin !important",
@@ -62,11 +126,11 @@ export const ValidatorTable = ({
                 <Table sx={{ marginTop: "0px" }} stickyHeader aria-label="sticky available validators">
                     <TableHead>
                         <TableRow sx={{ height: "40px" }}>
-                            <BridgeHeaderTableCell value="Validator" background={theme.colors.paper.cardHover} borderTopLeftRadius="3px" />
+                            <BridgeHeaderTableCell index={0} changeSort={() => setsortedBy(undefined)} 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 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 value="Block Height" background={theme.colors.paper.cardHover} tooltip="The latest EVM block height reported by the Validator." />
+                            <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 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={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 value="Status" background={theme.colors.paper.cardHover} borderTopRightRadius="3px" tooltip="Active and disabled validators fore the current GHOST Epoch." />
+                            <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." />
                         </TableRow>
                     </TableHead>
 
@@ -86,11 +150,26 @@ 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",
@@ -113,11 +192,21 @@ const BridgeHeaderTableCell = ({
                 background,
                 fontSize,
                 padding,
+                cursor: "pointer",
             }}
         >
-            <Box display="flex" justifyContent="center">
+            <Box onClick={changeSort} display="flex" justifyContent="center" alignItems="center">
                 {value}
-                {tooltip && <InfoTooltip message={tooltip} />}
+                {tooltip
+                    ? Math.abs(sortedBy) !== index
+                        ? <InfoTooltip message={tooltip} />
+                        : <GhostStyledIcon
+                            sx={{ width: "12px", height: "12px" }}
+                            viewBox="0 0 25 25"
+                            component={sortedBy > 0 ? KeyboardArrowDownIcon : KeyboardArrowUpIcon}
+                        />
+                    : <></>
+                }
             </Box>
         </TableCell>
     )

src/containers/NotFound/NotFound.jsx

@@ -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>

src/helpers/index.js

@@ -42,9 +42,13 @@ 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) => {
+export const timeConverter = (time, max = 7200, maxText = "long ago") => {
     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`;
     }
+}

src/hooks/helpers.js

@@ -137,12 +137,11 @@ 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 = ["RESERVE"];
+            icons = [chainId === 11155111 ? "GDAI" : "WETH"];
             break;
         case FTSO_ADDRESSES[chainId]:
             icons = ["FTSO"];
@@ -154,7 +153,7 @@ export const getTokenIcons = (chainId, address) => {
             icons = ["GHST"];
             break;
         case FTSO_DAI_LP_ADDRESSES[chainId]:
-            icons = ["FTSO", "RESERVE"];
+            icons = ["FTSO", chainId === 11155111 ? "GDAI" : "WETH"];
             break;
     }
     return icons;