diff --git a/package.json b/package.json index 91ccdd3..26f4251 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ghost-dao-interface", "private": true, - "version": "0.2.14", + "version": "0.2.15", "type": "module", "scripts": { "dev": "vite", diff --git a/src/components/Sidebar/NavContent.jsx b/src/components/Sidebar/NavContent.jsx index e08529e..1e08614 100644 --- a/src/components/Sidebar/NavContent.jsx +++ b/src/components/Sidebar/NavContent.jsx @@ -97,7 +97,7 @@ const NavContent = ({ chainId, addressChainId }) => { {ghstSymbol} Price: {formatCurrency(ghstPrice, 2)} - GHOST Supply: {formatCurrency(ghostedSupplyPrice, 2)} + GHOSTed Supply: {formatCurrency(ghostedSupplyPrice, 2)} diff --git a/src/containers/Bridge/Bridge.jsx b/src/containers/Bridge/Bridge.jsx index 285a9f0..d6362f5 100644 --- a/src/containers/Bridge/Bridge.jsx +++ b/src/containers/Bridge/Bridge.jsx @@ -21,6 +21,7 @@ import { useBlockNumber, useTransactionConfirmations } from "wagmi"; import { keccak256 } from "viem"; import { u64, u128 } from "scale-ts"; +import ContentPasteIcon from '@mui/icons-material/ContentPaste'; import PendingIcon from '@mui/icons-material/Pending'; import PendingActionsIcon from '@mui/icons-material/PendingActions'; import ArrowBack from '@mui/icons-material/ArrowBack'; @@ -28,6 +29,7 @@ import ArrowRightIcon from '@mui/icons-material/ArrowRight'; import HourglassBottomIcon from '@mui/icons-material/HourglassBottom'; import ThumbUpIcon from '@mui/icons-material/ThumbUp'; import ThumbDownAltIcon from '@mui/icons-material/ThumbDownAlt'; +import HandshakeIcon from '@mui/icons-material/Handshake'; import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import CheckIcon from '@mui/icons-material/Check'; @@ -38,6 +40,7 @@ import SwapCollection from "../../components/Swap/SwapCollection"; import TokenStack from "../../components/TokenStack/TokenStack"; import GhostStyledIcon from "../../components/Icon/GhostIcon"; import Modal from "../../components/Modal/Modal"; +import InfoTooltip from "../../components/Tooltip/InfoTooltip"; import { PrimaryButton } from "../../components/Button"; import { GATEKEEPER_ADDRESSES } from "../../constants/addresses"; @@ -66,6 +69,7 @@ const Bridge = ({ chainId, address, config, connect }) => { const isSemiSmallScreen = useMediaQuery("(max-width: 480px)"); const isVerySmallScreen = useMediaQuery("(max-width: 379px)"); + const [copiedIndex, setCopiedIndex] = useState(null); const [isPending, setIsPending] = useState(false); const [bridgeAction, setBridgeAction] = useState(true); const [activeTxIndex, setActiveTxIndex] = useState(-1); @@ -77,7 +81,7 @@ const Bridge = ({ chainId, address, config, connect }) => { return string.slice(0, first) + "..." + string.slice(second); } - const initialStoredTransactions = sessionStorage.getItem(STORAGE_PREFIX); + const initialStoredTransactions = localStorage.getItem(STORAGE_PREFIX); // const initialStoredTransactions = JSON.stringify([ // { // sessionIndex: 124, @@ -177,9 +181,7 @@ const Bridge = ({ chainId, address, config, connect }) => { }, [config]); const currentRecord = useMemo(() => { - if (activeTxIndex === -1) return undefined - const current = storedTransactions.at(activeTxIndex) - if (!current) return undefined + if (!watchTransaction) return undefined const finalization = Math.max(0, (finalityDelay + watchTransaction.blockNumber) - Number(blockNumber)); const receivedClapsLength = receivedClaps?.length ?? 0; @@ -233,10 +235,17 @@ const Bridge = ({ chainId, address, config, connect }) => { const removeStoredRecord = useCallback(() => { const newStoredTransactions = storedTransactions.filter((_, index) => index !== activeTxIndex) setStoredTransactions(newStoredTransactions); - sessionStorage.setItem(STORAGE_PREFIX, JSON.stringify(newStoredTransactions)); + localStorage.setItem(STORAGE_PREFIX, JSON.stringify(newStoredTransactions)); setActiveTxIndex(-1); }, [storedTransactions, activeTxIndex, setStoredTransactions, setActiveTxIndex]); + const copyToClipboard = (text, index) => { + navigator.clipboard.writeText(text).then(() => { + setCopiedIndex(index); + setTimeout(() => setCopiedIndex(null) , 800); + }); + }; + const ghostOrConnect = async () => { if (address === "") { connect(); @@ -262,8 +271,11 @@ const Bridge = ({ chainId, address, config, connect }) => { const newStoredTransactions = [...storedTransactions, transaction]; setStoredTransactions(newStoredTransactions); - sessionStorage.setItem(STORAGE_PREFIX, JSON.stringify(newStoredTransactions)); - setActiveTxIndex(newStoredTransactions.length - 1) + localStorage.setItem(STORAGE_PREFIX, JSON.stringify(newStoredTransactions)); + + if (providerDetail) { + setActiveTxIndex(newStoredTransactions.length - 1) + } } } @@ -332,16 +344,18 @@ const Bridge = ({ chainId, address, config, connect }) => { alignItems="center" > Finalization - {Math.max( - 0, - (finalityDelay + (currentRecord ? currentRecord.blockNumber : 0) - Number(blockNumber)) - ).toString()} blocks left + {(currentRecord?.finalization ?? 0).toString()} blocks left @@ -364,16 +378,46 @@ const Bridge = ({ chainId, address, config, connect }) => { alignItems="center" > - - + {currentRecord?.step <= 1 + ? ( + <> + + + + ) + : ( + + ) + } Slow Claps @@ -416,7 +460,55 @@ const Bridge = ({ chainId, address, config, connect }) => { - Session Index: + + Session Index: + + Transaction Watchmen + + {authorities?.map((authority, idx) => { + const authorityAddress = ss58Address(authority.asHex(), 1996); + const disabled = clapsInSession?.at(idx)?.at(1)?.disabled; + const clapped = receivedClaps?.some(authId => authId === idx); + + return ( + + + {authorityAddress} + + + ) + })} + + } /> + {currentRecord?.sessionIndex} { > Receiver Address: navigator.clipboard.writeText(currentRecord ? currentRecord.receiverAddress : "")} + style={{ display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }} + onClick={() => copyToClipboard(currentRecord ? currentRecord.receiverAddress : "", 0)} > - { - currentRecord ? sliceString(currentRecord.receiverAddress, 14, -5) : "" - } + + {currentRecord ? sliceString(currentRecord.receiverAddress, 14, -5) : ""} + + @@ -453,21 +551,36 @@ const Bridge = ({ chainId, address, config, connect }) => { Transaction Hash: navigator.clipboard.writeText(currentRecord ? currentRecord.transactionHash : "")} + style={{ display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }} + onClick={() => copyToClipboard(currentRecord ? currentRecord.transactionHash : "", 1)} > - { - currentRecord ? sliceString(currentRecord.transactionHash, 10, -8) : "0x" - } + + {currentRecord ? sliceString(currentRecord.transactionHash, 10, -8) : "0x"} + + - Arguments Hash: + + Arguments Hash: + + navigator.clipboard.writeText(hashedArguments ? hashedArguments : "")} + style={{ display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }} + onClick={() => copyToClipboard(hashedArguments ? hashedArguments : "", 2)} > - { - hashedArguments ? sliceString(hashedArguments, 10, -8) : "0x" - } + + {hashedArguments ? sliceString(hashedArguments, 10, -8) : "0x"} + + @@ -499,7 +612,7 @@ const Bridge = ({ chainId, address, config, connect }) => { onClick={() => setBridgeAction(!bridgeAction)} />)} { - bridgeAction ? `Bridge $${ghstSymbol}` : "Transaction history" + bridgeAction ? `Bridge $${ghstSymbol}` : "Transaction History" } } @@ -509,7 +622,6 @@ const Bridge = ({ chainId, address, config, connect }) => { style={{ display: "flex", alignItems: "center", cursor: "pointer" }} onClick={() => setBridgeAction(!bridgeAction)} />)} - enableBackground fullWidth > @@ -578,6 +690,7 @@ const Bridge = ({ chainId, address, config, connect }) => { GHOST Wallet is not detected on your browser. Download  { ? ( - {!isVerySmallScreen && Est. Commission:} + {!isVerySmallScreen && Estimated Fee:} {incomingFee.toFixed(4)}% - {!isVerySmallScreen && Finality Delay:} + {!isVerySmallScreen && + Finality Delay: + + } {finalityDelay} blocks +
{!isVerySmallScreen && Current Epoch:} {currentSession ?? 0} - {!isVerySmallScreen && Number of validators:} + {!isVerySmallScreen && + Number of validators: + + Validators + + {authorities?.map((authority, idx) => { + const authorityAddress = ss58Address(authority.asHex(), 1996); + const clapInfo = clapsInSession?.at(idx)?.at(1); + + return ( + +
+ {authorityAddress} +
+
{clapInfo?.claps ?? 0}
+ + ) + })} + + } /> + } {clapsInSessionLength} @@ -625,11 +790,7 @@ const Bridge = ({ chainId, address, config, connect }) => { loading={isPending} onClick={() => ghostOrConnect()} > - {address === "" ? - "Connect" - : - "Bridge" - } + {address === "" ? "Connect" : "Bridge" } )}