animation fixes applied
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
parent
cec3521f39
commit
e6ed1596ef
GPG Key ID:
565F4F2860226EBB
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "ghost-dao-interface",
|
||||
"private": true,
|
||||
"version": "0.2.15",
|
||||
"version": "0.2.16",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@ -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={<>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user