apply corrections from @neptune and @ghost_7

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.1",
   "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

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

src/containers/Bridge/BridgeCard.jsx

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

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 = ({
@@ -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>

src/containers/Bridge/BridgeModal.jsx

@@ -300,7 +300,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 +381,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,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">
+        <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 +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>
     )
 }

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>