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

animation fixes applied

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2025-10-06 19:46:16 +03:00
parent cec3521f39
commit e6ed1596ef
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
2 changed files with 28 additions and 20 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.2.15", "version": "0.2.16",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

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

@ -66,7 +66,7 @@ const STORAGE_PREFIX = "storedTransactions"
const Bridge = ({ chainId, address, config, connect }) => { const Bridge = ({ chainId, address, config, connect }) => {
const theme = useTheme(); const theme = useTheme();
const isSmallScreen = useMediaQuery("(max-width: 650px)"); const isSmallScreen = useMediaQuery("(max-width: 650px)");
const isSemiSmallScreen = useMediaQuery("(max-width: 480px)"); const isSemiSmallScreen = useMediaQuery("(max-width: 540px)");
const isVerySmallScreen = useMediaQuery("(max-width: 379px)"); const isVerySmallScreen = useMediaQuery("(max-width: 379px)");
const [copiedIndex, setCopiedIndex] = useState(null); const [copiedIndex, setCopiedIndex] = useState(null);
@ -76,6 +76,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
const [receiver, setReceiver] = useState(""); const [receiver, setReceiver] = useState("");
const [convertedReceiver, setConvertedReceiver] = useState(undefined); const [convertedReceiver, setConvertedReceiver] = useState(undefined);
const [amount, setAmount] = useState(""); const [amount, setAmount] = useState("");
const [rotation, setRotation] = useState(0);
const sliceString = (string, first, second) => { const sliceString = (string, first, second) => {
return string.slice(0, first) + "..." + string.slice(second); return string.slice(0, first) + "..." + string.slice(second);
@ -153,6 +154,13 @@ const Bridge = ({ chainId, address, config, connect }) => {
refetch: ghstBalanceRefetch refetch: ghstBalanceRefetch
} = useBalance(chainId, "GHST", address); } = useBalance(chainId, "GHST", address);
useEffect(() => {
const interval = setInterval(() => {
setRotation((prevRotation) => prevRotation > 0 ? 0 : 180)
}, 2000);
return () => clearInterval(interval);
}, [setRotation])
useEffect(() => { useEffect(() => {
try { try {
const [publicKey, prefix] = ss58Decode(receiver); const [publicKey, prefix] = ss58Decode(receiver);
@ -347,8 +355,10 @@ const Bridge = ({ chainId, address, config, connect }) => {
sx={{ sx={{
width: "35px", width: "35px",
height: "35px", height: "35px",
transition: "transform 0.5s ease-in-out", transition: "transform 0.7s ease-in-out",
transform: (currentRecord?.finalization ?? 0) % 2 === 0 ? "rotate(0deg)" : "rotate(180deg)" transform: (currentRecord?.finalization ?? 0) > 0
? `rotate(${rotation}deg)`
: "rotate(0deg)"
}} }}
viewBox="0 0 25 25" viewBox="0 0 25 25"
component={HourglassBottomIcon} component={HourglassBottomIcon}
@ -385,10 +395,8 @@ const Bridge = ({ chainId, address, config, connect }) => {
sx={{ sx={{
width: "35px", width: "35px",
height: "35px", height: "35px",
transition: "transform 0.5s ease-in-out", transition: "transform 0.7s ease-in-out",
transform: currentRecord?.step === 1 && Number(blockNumber) % 2 === 0 transform: `rotateX(${rotation}deg)`
? "rotateX(0deg)"
: "rotateX(180deg)"
}} }}
viewBox="0 0 25 25" viewBox="0 0 25 25"
component={ThumbUpIcon} component={ThumbUpIcon}
@ -397,10 +405,8 @@ const Bridge = ({ chainId, address, config, connect }) => {
sx={{ sx={{
width: "35px", width: "35px",
height: "35px", height: "35px",
transition: "transform 0.5s ease-in-out", transition: "transform 0.7s ease-in-out",
transform: currentRecord?.step === 1 && Number(blockNumber) % 2 === 0 transform: `rotateX(${rotation}deg)`
? "rotateX(0deg)"
: "rotateX(180deg)"
}} }}
viewBox="0 0 25 25" viewBox="0 0 25 25"
component={ThumbDownAltIcon} component={ThumbDownAltIcon}
@ -601,7 +607,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
</Box> </Box>
</Box> </Box>
</Modal> </Modal>
<Box width="100%" maxWidth="476px" display="flex" alignItems="center" justifyContent="center" flexDirection="column"> <Box width="100%" maxWidth="506px" display="flex" alignItems="center" justifyContent="center" flexDirection="column">
<Paper <Paper
headerContent={ headerContent={
<Box alignItems="center" justifyContent="start" display="flex" width="100%"> <Box alignItems="center" justifyContent="start" display="flex" width="100%">
@ -632,22 +638,24 @@ const Bridge = ({ chainId, address, config, connect }) => {
iconNotNeeded iconNotNeeded
UpperSwapCard={<SwapCard UpperSwapCard={<SwapCard
id={`bridge-token-receiver`} id={`bridge-token-receiver`}
inputWidth={isVerySmallScreen ? "100px" : isSemiSmallScreen ? "180px" : "250px"} inputWidth={isVerySmallScreen ? "180px" : isSemiSmallScreen ? "280px" : "516px"}
value={receiver} value={receiver}
onChange={event => setReceiver(event.currentTarget.value)} onChange={event => setReceiver(event.currentTarget.value)}
inputProps={{ "data-testid": "fromInput" }} inputProps={{ "data-testid": "fromInput" }}
placeholder="Ghost address (sf prefixed)" placeholder="Ghost address (sf prefixed)"
type="text" type="text"
maxWidth="446px"
/>} />}
LowerSwapCard={<SwapCard LowerSwapCard={<SwapCard
id={`bridge-token-amount`} id={`bridge-token-amount`}
inputWidth={isVerySmallScreen ? "100px" : isSemiSmallScreen ? "180px" : "250px"} inputWidth={isVerySmallScreen ? "100px" : isSemiSmallScreen ? "180px" : "280px"}
info={`${formatCurrency(ghstBalance.toString(), 4, ghstSymbol)}`} info={`${formatCurrency(ghstBalance.toString(), 4, ghstSymbol)}`}
value={amount} value={amount}
onChange={event => setAmount(event.currentTarget.value)} onChange={event => setAmount(event.currentTarget.value)}
inputProps={{ "data-testid": "fromInput" }} inputProps={{ "data-testid": "fromInput" }}
endString={"Max"} endString={"Max"}
endStringOnClick={() => setAmount(ghstBalance.toString())} endStringOnClick={() => setAmount(ghstBalance.toString())}
maxWidth="446px"
/>} />}
/> />
<Box <Box
@ -683,7 +691,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
</> </>
)} )}
</Box> </Box>
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box maxWidth="506px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!providerDetail {!providerDetail
? ( ? (
<Typography mr="10px" variant="body2" color="textSecondary"> <Typography mr="10px" variant="body2" color="textSecondary">
@ -703,11 +711,11 @@ const Bridge = ({ chainId, address, config, connect }) => {
: metadata : metadata
? ( ? (
<Box width="100%" display="flex" flexDirection="column" gap="0px"> <Box width="100%" display="flex" flexDirection="column" gap="0px">
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box maxWidth="506px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Estimated Fee:</Typography>} {!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Estimated Fee:</Typography>}
<Typography fontSize="12px" lineHeight="15px">{incomingFee.toFixed(4)}%</Typography> <Typography fontSize="12px" lineHeight="15px">{incomingFee.toFixed(4)}%</Typography>
</Box> </Box>
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box maxWidth="506px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Box display="flex" flexDirection="row"> {!isVerySmallScreen && <Box display="flex" flexDirection="row">
<Typography fontSize="12px" lineHeight="15px">Finality Delay:</Typography> <Typography fontSize="12px" lineHeight="15px">Finality Delay:</Typography>
<InfoTooltip message="This period ensures that the transaction is securely added to the ledger and cannot be altered or canceled." /> <InfoTooltip message="This period ensures that the transaction is securely added to the ledger and cannot be altered or canceled." />
@ -715,11 +723,11 @@ const Bridge = ({ chainId, address, config, connect }) => {
<Typography fontSize="12px" lineHeight="15px">{finalityDelay} blocks</Typography> <Typography fontSize="12px" lineHeight="15px">{finalityDelay} blocks</Typography>
</Box> </Box>
<hr width="100%" /> <hr width="100%" />
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box maxWidth="506px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Current Epoch:</Typography>} {!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Current Epoch:</Typography>}
<Typography fontSize="12px" lineHeight="15px">{currentSession ?? 0}</Typography> <Typography fontSize="12px" lineHeight="15px">{currentSession ?? 0}</Typography>
</Box> </Box>
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box maxWidth="506px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Box display="flex" flexDirection="row"> {!isVerySmallScreen && <Box display="flex" flexDirection="row">
<Typography fontSize="12px" lineHeight="15px">Number of validators:</Typography> <Typography fontSize="12px" lineHeight="15px">Number of validators:</Typography>
<InfoTooltip message={<> <InfoTooltip message={<>