From e6ed1596ef3b8148900f57e8b0029429b80efe7b Mon Sep 17 00:00:00 2001
From: Uncle Fatso <uncle.fatso@ghostchain.io>
Date: Mon, 6 Oct 2025 19:46:16 +0300
Subject: [PATCH] animation fixes applied

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
---
 package.json                     |  2 +-
 src/containers/Bridge/Bridge.jsx | 46 +++++++++++++++++++-------------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 26f4251..b195eb0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.2.15",
+  "version": "0.2.16",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/containers/Bridge/Bridge.jsx b/src/containers/Bridge/Bridge.jsx
index d6362f5..d993ec3 100644
--- a/src/containers/Bridge/Bridge.jsx
+++ b/src/containers/Bridge/Bridge.jsx
@@ -66,7 +66,7 @@ const STORAGE_PREFIX = "storedTransactions"
 const Bridge = ({ chainId, address, config, connect }) => {
     const theme = useTheme();
     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 [copiedIndex, setCopiedIndex] = useState(null);
@@ -76,6 +76,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
     const [receiver, setReceiver] = useState("");
     const [convertedReceiver, setConvertedReceiver] = useState(undefined);
     const [amount, setAmount] = useState("");
+    const [rotation, setRotation] = useState(0);
 
     const sliceString = (string, first, second) => {
         return string.slice(0, first) + "..." + string.slice(second);
@@ -153,6 +154,13 @@ const Bridge = ({ chainId, address, config, connect }) => {
         refetch: ghstBalanceRefetch
     } = useBalance(chainId, "GHST", address);
 
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setRotation((prevRotation) => prevRotation > 0 ? 0 : 180)
+        }, 2000);
+        return () => clearInterval(interval);
+    }, [setRotation])
+
     useEffect(() => {
         try {
             const [publicKey, prefix] = ss58Decode(receiver);
@@ -347,8 +355,10 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                     sx={{
                                         width: "35px",
                                         height: "35px",
-                                        transition: "transform 0.5s ease-in-out",
-                                        transform: (currentRecord?.finalization ?? 0) % 2 === 0 ? "rotate(0deg)" : "rotate(180deg)"
+                                        transition: "transform 0.7s ease-in-out",
+                                        transform: (currentRecord?.finalization ?? 0) > 0
+                                            ? `rotate(${rotation}deg)`
+                                            : "rotate(0deg)"
                                     }}
                                     viewBox="0 0 25 25"
                                     component={HourglassBottomIcon}
@@ -385,10 +395,8 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                                     sx={{
                                                         width: "35px",
                                                         height: "35px",
-                                                        transition: "transform 0.5s ease-in-out",
-                                                        transform: currentRecord?.step === 1 && Number(blockNumber) % 2 === 0
-                                                            ? "rotateX(0deg)"
-                                                            : "rotateX(180deg)"
+                                                        transition: "transform 0.7s ease-in-out",
+                                                        transform: `rotateX(${rotation}deg)`
                                                     }}
                                                     viewBox="0 0 25 25"
                                                     component={ThumbUpIcon}
@@ -397,10 +405,8 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                                     sx={{
                                                         width: "35px",
                                                         height: "35px",
-                                                        transition: "transform 0.5s ease-in-out",
-                                                        transform: currentRecord?.step === 1 && Number(blockNumber) % 2 === 0
-                                                            ? "rotateX(0deg)"
-                                                            : "rotateX(180deg)"
+                                                        transition: "transform 0.7s ease-in-out",
+                                                        transform: `rotateX(${rotation}deg)`
                                                     }}
                                                     viewBox="0 0 25 25"
                                                     component={ThumbDownAltIcon}
@@ -601,7 +607,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
                         </Box>
                     </Box>
                 </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
                         headerContent={
                             <Box alignItems="center" justifyContent="start" display="flex" width="100%">
@@ -632,22 +638,24 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                         iconNotNeeded
                                         UpperSwapCard={<SwapCard
                                             id={`bridge-token-receiver`}
-                                            inputWidth={isVerySmallScreen ? "100px" : isSemiSmallScreen ? "180px" : "250px"}
+                                            inputWidth={isVerySmallScreen ? "180px" : isSemiSmallScreen ? "280px" : "516px"}
                                             value={receiver}
                                             onChange={event => setReceiver(event.currentTarget.value)}
                                             inputProps={{ "data-testid": "fromInput" }}
                                             placeholder="Ghost address (sf prefixed)"
                                             type="text"
+                                            maxWidth="446px"
                                         />}
                                         LowerSwapCard={<SwapCard
                                             id={`bridge-token-amount`}
-                                            inputWidth={isVerySmallScreen ? "100px" : isSemiSmallScreen ? "180px" : "250px"}
+                                            inputWidth={isVerySmallScreen ? "100px" : isSemiSmallScreen ? "180px" : "280px"}
                                             info={`${formatCurrency(ghstBalance.toString(), 4, ghstSymbol)}`}
                                             value={amount}
                                             onChange={event => setAmount(event.currentTarget.value)}
                                             inputProps={{ "data-testid": "fromInput" }}
                                             endString={"Max"}
                                             endStringOnClick={() => setAmount(ghstBalance.toString())}
+                                            maxWidth="446px"
                                         />}
                                     />
                                     <Box
@@ -683,7 +691,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                                 </>
                                             )}
                                         </Box>
-                                        <Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
+                                        <Box maxWidth="506px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
                                             {!providerDetail
                                                 ? (
                                                     <Typography mr="10px" variant="body2" color="textSecondary">
@@ -703,11 +711,11 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                                 : metadata
                                                     ? (
                                                         <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>}
                                                                 <Typography fontSize="12px" lineHeight="15px">{incomingFee.toFixed(4)}%</Typography>
                                                             </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">
                                                                     <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." />
@@ -715,11 +723,11 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                                                 <Typography fontSize="12px" lineHeight="15px">{finalityDelay} blocks</Typography>
                                                             </Box>
                                                             <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>}
                                                                 <Typography fontSize="12px" lineHeight="15px">{currentSession ?? 0}</Typography>
                                                             </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">
                                                                     <Typography fontSize="12px" lineHeight="15px">Number of validators:</Typography>
                                                                     <InfoTooltip message={<>