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

apply another 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-16 17:35:46 +03:00
parent d1d4313851
commit 92819639d0
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
7 changed files with 225 additions and 105 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", "name": "ghost-dao-interface",
"private": true, "private": true,
"version": "0.4.1", "version": "0.4.2",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

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

@ -171,9 +171,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
const applaused = transactionApplaused?.finalized ?? false; const applaused = transactionApplaused?.finalized ?? false;
const clappedAmount = transactionApplaused?.clapped_amount ?? 0n; const clappedAmount = transactionApplaused?.clapped_amount ?? 0n;
const clappedPercentage = clappedAmount * 100n / (totalStakedAmount ?? 1n); const clappedPercentage = clappedAmount * 100n / (totalStakedAmount ?? 1n);
const step = finalization > 0 const clapsPercentage = (numberOfClaps ?? 0) * 100 / (authorities?.length ?? 1);
? 0
: applaused ? 2 : 1;
return { return {
...watchTransaction, ...watchTransaction,
@ -182,14 +180,15 @@ const Bridge = ({ chainId, address, config, connect }) => {
numberOfClaps, numberOfClaps,
clappedAmount, clappedAmount,
clappedPercentage, clappedPercentage,
step, clapsPercentage,
} }
}, [ }, [
transactionApplaused, transactionApplaused,
finalityDelay, finalityDelay,
watchTransaction, watchTransaction,
blockNumber, blockNumber,
totalStakedAmount totalStakedAmount,
authorities
]); ]);
const filteredStoredTransactions = useMemo(() => { const filteredStoredTransactions = useMemo(() => {
@ -287,7 +286,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
const newStoredTransactions = [transaction, ...storedTransactions]; const newStoredTransactions = [transaction, ...storedTransactions];
setStoredTransactions(newStoredTransactions); setStoredTransactions(newStoredTransactions);
localStorage.setItem(STORAGE_PREFIX, JSON.stringify(newStoredTransactions)); localStorage.setItem(STORAGE_PREFIX, JSON.stringify(newStoredTransactions));
setActiveTxIndex(newStoredTransactions.length - 1) setActiveTxIndex(0)
} }
return ( return (
@ -322,7 +321,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item xs={12} height="100%"> <Grid item xs={12} height="100%">
<Paper <Paper
sx={{ height: isBigScreen ? "100%" : "150px", paddingBottom: "0 !important", marginBottom: "0 !important" }} sx={{ height: isBigScreen ? "100%" : "142px", paddingBottom: "0 !important", marginBottom: "0 !important" }}
fullWidth fullWidth
enableBackground enableBackground
> >

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

@ -30,6 +30,7 @@ import { useBalance } from "../../hooks/tokens";
import CheckIcon from '@mui/icons-material/Check'; import CheckIcon from '@mui/icons-material/Check';
import HourglassBottomIcon from '@mui/icons-material/HourglassBottom'; import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber"; import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
import { formatNumber, formatCurrency, timeConverter } from "../../helpers"; import { formatNumber, formatCurrency, timeConverter } from "../../helpers";
@ -165,10 +166,14 @@ export const BridgeCardAction = ({
UpperSwapCard={<SwapCard UpperSwapCard={<SwapCard
id={`bridge-token-receiver`} id={`bridge-token-receiver`}
inputWidth={"100%"} 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" }} inputProps={{ "data-testid": "fromInput" }}
placeholder="GHOST address (sf prefixed)" placeholder="GHOST address (sf prefixed)"
endString={convertedReceiver
? <GhostStyledIcon color="success" viewBox="0 0 25 25" component={CheckCircleIcon} />
: undefined
}
type="text" type="text"
maxWidth="100%" maxWidth="100%"
/>} />}
@ -190,18 +195,18 @@ export const BridgeCardAction = ({
gap="10px" gap="10px"
justifyContent="space-between" justifyContent="space-between"
> >
<Box display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box width="100%" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{gatekeeperAddressEmpty && ( {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> <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> </em>
</Typography> </Typography>
</Box> </Box>
)} )}
{!gatekeeperAddressEmpty && ( {!gatekeeperAddressEmpty && (
<Box width="100%" maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box width="100%" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Gatekeeper:</Typography>} {!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Gatekeeper:</Typography>}
<Link <Link
fontSize="12px" fontSize="12px"

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

@ -84,7 +84,7 @@ export const BridgeHeader = ({
<Grid item xs={isSmallScreen ? 12 : 4}> <Grid item xs={isSmallScreen ? 12 : 4}>
<Metric <Metric
isLoading={timeToNextEpoch === undefined} isLoading={timeToNextEpoch === undefined}
metric={formatTime(timeToNextEpoch)} metric={timeToNextEpoch < 30 ? "Rotating..." : formatTime(timeToNextEpoch)}
label="Rotation in" label="Rotation in"
tooltip="Bridge Stability Index refreshes every 10 minutes with new validator blocks; resets each Era when the validator set is updated." tooltip="Bridge Stability Index refreshes every 10 minutes with new validator blocks; resets each Era when the validator set is updated."
/> />
@ -97,7 +97,7 @@ export const BridgeHeader = ({
tooltip="Maximum estimated time for finalizing bridge transactions based on the latest update." tooltip="Maximum estimated time for finalizing bridge transactions based on the latest update."
/> />
</Grid> </Grid>
<Grid item gap={2} xs={12}> <Grid item gap={2} xs={12} style={{ paddingTop: "0" }} >
<Box position="relative" margin="4.5px 0"> <Box position="relative" margin="4.5px 0">
<LinearProgress <LinearProgress
variant="determinate" variant="determinate"
@ -123,16 +123,16 @@ export const BridgeHeader = ({
<Typography variant="body1" sx={{ fontWeight: 'bold' }}> <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
Bridge Stability {bridgeStability Bridge Stability {bridgeStability
? `${formatNumber(bridgeStability, 0)}% ${progressBarPostfix}` ? `${formatNumber(bridgeStability, 0)}% ${progressBarPostfix}`
: "Unknown" : "N/A"
} }
</Typography> </Typography>
<InfoTooltip message={ <InfoTooltip message={
<Box width="350px"> <Box width="220px">
<Typography>0% - 50%: Bridge Stability ❌ Do NOT Bridge</Typography> <Typography>0% - 50%: ❌ Do NOT Bridge</Typography>
<Typography>50% - 70%: Bridge Stability ⚠️ Critical Risk</Typography> <Typography>50% - 70%: ⚠️ Critical Risk</Typography>
<Typography>70% - 80%: Bridge Stability ⚠️ High Risk</Typography> <Typography>70% - 80%: ⚠️ High Risk</Typography>
<Typography>80% - 90%: Bridge Stability ✅ Moderate Risk</Typography> <Typography>80% - 90%: ✅ Moderate Risk</Typography>
<Typography>90% - 100%: Bridge Stability ✅ Safe</Typography> <Typography>90% - 100%: ✅ Safe</Typography>
</Box> </Box>
} /> } />
</Box> </Box>

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

@ -8,6 +8,7 @@ import ThumbDownAltIcon from '@mui/icons-material/ThumbDownAlt';
import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CheckIcon from '@mui/icons-material/Check'; import CheckIcon from '@mui/icons-material/Check';
import AssuredWorkloadIcon from '@mui/icons-material/AssuredWorkload'; import AssuredWorkloadIcon from '@mui/icons-material/AssuredWorkload';
import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
import HourglassBottomIcon from '@mui/icons-material/HourglassBottom'; import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
import ArrowRightIcon from '@mui/icons-material/ArrowRight'; 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" gap="1.5rem" flexDirection="column" marginTop=".8rem">
<Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center"> <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
{currentRecord?.finalization > 0 && (
<>
<Box <Box
sx={{ sx={{
transition: "all 0.8s ease", 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" width="120px"
display="flex" display="flex"
@ -104,7 +107,7 @@ export const BridgeModal = ({
sx={{ sx={{
width: "35px", width: "35px",
height: "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': { '@keyframes rotateHourGlass': {
'0%': { transform: 'rotate(0deg)' }, '0%': { transform: 'rotate(0deg)' },
'15%': { transform: 'rotate(0deg)' }, '15%': { transform: 'rotate(0deg)' },
@ -122,16 +125,64 @@ export const BridgeModal = ({
</Box> </Box>
<GhostStyledIcon <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} component={ArrowRightIcon}
/> />
<Box <Box
sx={{ sx={{
transition: "all 0.3s ease", 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" width="120px"
display="flex" display="flex"
@ -140,14 +191,14 @@ export const BridgeModal = ({
alignItems="center" alignItems="center"
> >
<Box display="flex" flexDirection="row" justifyContent="center" alignItems="center"> <Box display="flex" flexDirection="row" justifyContent="center" alignItems="center">
{currentRecord?.step <= 1 {currentRecord?.clapsPercentage < 50
? ( ? (
<> <>
<GhostStyledIcon <GhostStyledIcon
sx={{ sx={{
width: "35px", width: "35px",
height: "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': { '@keyframes rotateRightHand': {
'0%': { transform: 'rotateX(360deg)' }, '0%': { transform: 'rotateX(360deg)' },
'15%': { transform: 'rotateX(360deg)' }, '15%': { transform: 'rotateX(360deg)' },
@ -163,7 +214,7 @@ export const BridgeModal = ({
sx={{ sx={{
width: "35px", width: "35px",
height: "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': { '@keyframes rotateRightHand': {
'0%': { transform: 'rotateX(0deg)' }, '0%': { transform: 'rotateX(0deg)' },
'15%': { transform: 'rotateX(0deg)' }, '15%': { transform: 'rotateX(0deg)' },
@ -195,20 +246,19 @@ export const BridgeModal = ({
</Box> </Box>
</Box> </Box>
{currentRecord?.finalization === 0 && (
<>
<GhostStyledIcon <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} component={ArrowRightIcon}
/> />
<Box <Box
sx={{ sx={{
transition: "all 0.3s ease", 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" width="120px"
display="flex" display="flex"
@ -216,8 +266,6 @@ export const BridgeModal = ({
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
> >
{currentRecord?.applaused
? <>
<GhostStyledIcon <GhostStyledIcon
sx={{ width: "35px", height: "35px" }} sx={{ width: "35px", height: "35px" }}
viewBox="0 0 25 25" viewBox="0 0 25 25"
@ -225,20 +273,9 @@ export const BridgeModal = ({
/> />
<Typography variant="caption">Applaused</Typography> <Typography variant="caption">Applaused</Typography>
<Typography variant="caption">Check Receiver</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> </Box>
<Box display="flex" flexDirection="column" gap="5px" padding="0.6rem 0"> <Box display="flex" flexDirection="column" gap="5px" padding="0.6rem 0">

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

@ -15,6 +15,8 @@ import {
} from "@mui/material"; } from "@mui/material";
import { useTheme } from "@mui/material/styles"; 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 WarningIcon from '@mui/icons-material/Warning';
import CancelIcon from '@mui/icons-material/Cancel'; import CancelIcon from '@mui/icons-material/Cancel';
import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@ -32,6 +34,7 @@ export const ValidatorTable = ({
providerDetail, providerDetail,
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const [sortedBy, setsortedBy] = useState(undefined);
const stabilityColor = useMemo(() => { const stabilityColor = useMemo(() => {
const red = Math.round(255 * (1 - bridgeStability / 100)); const red = Math.round(255 * (1 - bridgeStability / 100));
@ -39,6 +42,65 @@ export const ValidatorTable = ({
return `rgb(${red}, ${green}, 0)`; return `rgb(${red}, ${green}, 0)`;
}, [bridgeStability]); }, [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 ( return (
<Box width="100%" height="340px" display="flex" flexDirection="column" justifyContent="space-between" gap="10px"> <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"> {!providerDetail && <Box sx={{ borderRadius: "15px", background: theme.colors.paper.background }} width="100%" height="100%" display="flex" justifyContent="center">
@ -64,11 +126,11 @@ export const ValidatorTable = ({
<Table sx={{ marginTop: "0px" }} stickyHeader aria-label="sticky available validators"> <Table sx={{ marginTop: "0px" }} stickyHeader aria-label="sticky available validators">
<TableHead> <TableHead>
<TableRow sx={{ height: "40px" }}> <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> </TableRow>
</TableHead> </TableHead>
@ -105,6 +167,9 @@ export const ValidatorTable = ({
} }
const BridgeHeaderTableCell = ({ const BridgeHeaderTableCell = ({
index=0,
sortedBy=undefined,
changeSort,
align="center", align="center",
borderTopRightRadius="0px", borderTopRightRadius="0px",
borderTopLeftRadius="0px", borderTopLeftRadius="0px",
@ -127,11 +192,21 @@ const BridgeHeaderTableCell = ({
background, background,
fontSize, fontSize,
padding, padding,
cursor: "pointer",
}} }}
> >
<Box display="flex" justifyContent="center"> <Box onClick={changeSort} display="flex" justifyContent="center" alignItems="center">
{value} {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> </Box>
</TableCell> </TableCell>
) )

6
src/helpers/index.js
View File

@ -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)); 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 seconds = Number(time);
const mins = Math.floor(seconds / 60); const mins = Math.floor(seconds / 60);
const secs = 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`;
} }
}