Merge pull request #216 from invariant-labs/staging

Align production
invariant-labs · Jul 21, 2024 · 24453f3 · 24453f3
2 parents a55b545 + f9a77a1
commit 24453f3
Show file tree

Hide file tree

Showing 71 changed files with 1,368 additions and 1,015 deletions.
diff --git a/src/components/AnimatedButton/style.ts b/src/components/AnimatedButton/style.ts
@@ -1,7 +1,38 @@
 import { colors, typography } from '@static/theme'
 import { makeStyles } from 'tss-react/mui'
+import { keyframes } from 'tss-react'
 
 const useStyles = makeStyles()(() => {
+  const slideStart = keyframes`
+    0% {
+         transform: translateX(-50%)
+    }
+    100% {
+      transform: translateX(0)
+    }
+  `
+  const slideEndSuccess = keyframes`
+    0% {
+      transform: translateX(-50%)
+    }
+    80% {
+      transform: translateX(-35%)
+    }
+    100% {
+      transform: translateX(0)
+    }
+  `
+  const slideEndFail = keyframes`
+    0% {
+      transform: translateX(50%)
+    }
+    80% {
+      transform: translateX(35%)
+    }
+    100% {
+      transform: translateX(0)
+    }
+  `
   return {
     button: {
       height: 44,
@@ -17,7 +48,14 @@ const useStyles = makeStyles()(() => {
       zIndex: 4,
       '&:disabled': {
         background: colors.invariant.light,
-        color: colors.invariant.componentBcg
+        color: colors.invariant.componentBcg,
+        pointerEvents: 'auto',
+        transition: 'all 0.2s',
+        '&:hover': {
+          boxShadow: 'none',
+          cursor: 'not-allowed',
+          filter: 'brightness(1.15)'
+        }
       }
     },
 
@@ -27,45 +65,13 @@ const useStyles = makeStyles()(() => {
         background: `${colors.invariant.component} !important`
       }
     },
-    '@keyframes slide-start': {
-      '0%': {
-        left: '-100%'
-      },
-      '100%': {
-        left: '-50%'
-      }
-    },
-    '@keyframes slide-end-success': {
-      '0%': {
-        left: '-50%'
-      },
-      '80%': {
-        left: '-35%'
-      },
-      '100%': {
-        left: 0
-      }
-    },
-    '@keyframes slide-end-fail': {
-      '0%': {
-        left: '-50%'
-      },
-      '80%': {
-        left: '-65%'
-      },
-      '100%': {
-        left: '-100%'
-      }
-    },
     background: {
       width: '100%',
       height: '100%',
       position: 'absolute',
       padding: 0,
       zIndex: 1,
-      top: 0,
-      left: '-100%',
-      backgroundColor: colors.invariant.pink
+      top: 0
     },
     backgroundRelease: {
       position: 'absolute',
@@ -75,29 +81,25 @@ const useStyles = makeStyles()(() => {
       padding: 0,
       zIndex: 1,
       top: '0%',
-      animation: '$slide-start .4s ease-in',
-      transition: 'all .2s',
-      backgroundColor: colors.invariant.pink
+      animation: `${slideStart} .4s ease-in`
     },
     backgroundApprovedWithSuccess: {
       top: 0,
-      left: '-50%',
+      left: '0%',
       width: '100%',
       height: '100%',
       padding: 0,
       position: 'absolute',
-      animation: '$slide-end-success 1.5s',
-      animationFillMode: 'forwards'
+      animation: `${slideEndSuccess} 1.5s ease-out`
     },
     backgroundApprovedWithFail: {
       top: 0,
-      left: '-50%',
+      left: '-100%',
       width: '100%',
       height: '100%',
       padding: 0,
       position: 'absolute',
-      animation: '$slide-end-fail 1.5s',
-      animationFillMode: 'forwards'
+      animation: `${slideEndFail} 1.5s ease-out`
     },
     buttonContent: {
       position: 'relative',

diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx
@@ -31,6 +31,8 @@ export const Primary: Story = {
     rpc: 'https://rpc.testnet.moonbeam.network',
     typeOfNetwork: Network.Testnet,
     walletConnected: true,
-    onFaucet: fn()
+    onFaucet: fn(),
+    onCopyAddress: fn(),
+    onChangeWallet: fn()
   }
 }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -28,6 +28,8 @@ export interface IHeader {
   onFaucet?: () => void
   onDisconnectWallet: () => void
   defaultTestnetRPC: string
+  onCopyAddress: () => void
+  onChangeWallet: () => void
 }
 
 export const Header: React.FC<IHeader> = ({
@@ -40,7 +42,9 @@ export const Header: React.FC<IHeader> = ({
   rpc,
   onFaucet,
   onDisconnectWallet,
-  defaultTestnetRPC
+  defaultTestnetRPC,
+  onCopyAddress,
+  onChangeWallet
 }) => {
   const { classes } = useStyles()
   const buttonStyles = useButtonStyles()
@@ -175,6 +179,8 @@ export const Header: React.FC<IHeader> = ({
             startIcon={
               walletConnected ? <DotIcon className={classes.connectedWalletIcon} /> : undefined
             }
+            onCopyAddress={onCopyAddress}
+            onChangeWallet={onChangeWallet}
           />
         </Grid>
 

diff --git a/src/components/Header/HeaderButton/ChangeWalletButton.tsx b/src/components/Header/HeaderButton/ChangeWalletButton.tsx
@@ -16,6 +16,8 @@ export interface IProps {
   onDisconnect: () => void
   hideArrow?: boolean
   className?: string
+  onCopyAddress?: () => void
+  onChangeWallet?: () => void
 }
 export const ChangeWalletButton: React.FC<IProps> = ({
   name,
@@ -24,7 +26,9 @@ export const ChangeWalletButton: React.FC<IProps> = ({
   startIcon,
   hideArrow,
   onDisconnect,
-  className
+  className,
+  onCopyAddress = () => {},
+  onChangeWallet = () => {}
 }) => {
   const { classes } = useStyles()
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
@@ -51,6 +55,18 @@ export const ChangeWalletButton: React.FC<IProps> = ({
     setOpen(false)
   }
 
+  const handleChangeWallet = () => {
+    onChangeWallet()
+    unblurContent()
+    setOpen(false)
+  }
+
+  const handleCopyAddress = () => {
+    onCopyAddress()
+    unblurContent()
+    setOpen(false)
+  }
+
   return (
     <>
       <Button
@@ -78,6 +94,8 @@ export const ChangeWalletButton: React.FC<IProps> = ({
         anchorEl={anchorEl}
         handleClose={handleClose}
         callDisconect={handleDisconnect}
+        callCopyAddress={handleCopyAddress}
+        callChangeWallet={handleChangeWallet}
       />
     </>
   )

diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx
@@ -42,7 +42,7 @@ export const DepositAmountInput: React.FC<IProps> = ({
   priceLoading = false,
   isBalanceLoading
 }) => {
-  const { classes } = useStyles()
+  const { classes } = useStyles({ isSelected: !!currency })
 
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -109,7 +109,7 @@ export const DepositAmountInput: React.FC<IProps> = ({
                 <Typography className={classes.currencySymbol}>{currency}</Typography>
               </>
             ) : (
-              <Typography className={classes.noCurrencyText}>Select</Typography>
+              <Typography className={classes.noCurrencyText}>-</Typography>
             )}
           </Grid>
           <Input
@@ -127,6 +127,7 @@ export const DepositAmountInput: React.FC<IProps> = ({
             }}
           />
         </Grid>
+
         <Grid
           container
           justifyContent='space-between'
@@ -139,28 +140,24 @@ export const DepositAmountInput: React.FC<IProps> = ({
             alignItems='center'
             wrap='nowrap'
             onClick={onMaxClick}>
-            {
-              <>
-                <Typography className={classes.caption2}>
-                  Balance:{' '}
-                  {isBalanceLoading ? (
-                    <img src={loadingAnimation} className={classes.loadingBalance} alt='loading' />
-                  ) : (
-                    formatNumber(balanceValue || 0)
-                  )}{' '}
-                  {currency}
-                </Typography>
-                <Button
-                  className={
-                    currency
-                      ? classes.maxButton
-                      : `${classes.maxButton} ${classes.maxButtonNotActive}`
-                  }
-                  onClick={onMaxClick}>
-                  Max
-                </Button>
-              </>
-            }
+            <Typography className={classes.caption2}>
+              Balance:{' '}
+              {isBalanceLoading ? (
+                <img src={loadingAnimation} className={classes.loadingBalance} alt='loading' />
+              ) : balanceValue ? (
+                formatNumber(balanceValue || 0)
+              ) : (
+                <span style={{ marginLeft: '8px' }}>-</span>
+              )}{' '}
+              {currency}
+            </Typography>
+            <Button
+              className={
+                currency ? classes.maxButton : `${classes.maxButton} ${classes.maxButtonNotActive}`
+              }
+              onClick={onMaxClick}>
+              Max
+            </Button>
           </Grid>
           <Grid className={classes.percentages} container alignItems='center' wrap='nowrap'>
             {currency ? (