Merge pull request #352 from invariant-labs/staging

Update prod env
invariant-labs · Jan 6, 2025 · b1aa508 · b1aa508
2 parents c8fb531 + cceac7f
commit b1aa508
Show file tree

Hide file tree

Showing 16 changed files with 418 additions and 166 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -68,6 +68,7 @@ export const Header: React.FC<IHeader> = ({
   const navigate = useNavigate()
 
   const isMdDown = useMediaQuery(theme.breakpoints.down('md'))
+  const showRPCBelowBreakpoint = useMediaQuery('@media (max-width:1050px)')
 
   const routes = [
     'exchange',
@@ -346,7 +347,7 @@ export const Header: React.FC<IHeader> = ({
             }}
             onFaucet={isMdDown && typeOfNetwork === NetworkType.Testnet ? onFaucet : undefined}
             onRPC={
-              isMdDown
+              showRPCBelowBreakpoint
                 ? () => {
                     setRoutesModalOpen(false)
                     setRpcsModalOpen(true)

diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx
@@ -23,7 +23,6 @@ const meta = {
     setValue: fn(),
     value: '0',
     placeholder: '0.0',
-    onMaxClick: fn(),
     decimalsLimit: 2,
     tokenPrice: 100,
     balanceValue: '1000',

diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx
@@ -1,9 +1,19 @@
-import { Box, Button, Grid, Input, Tooltip, Typography } from '@mui/material'
+import { Box, Grid, Input, Tooltip, Typography } from '@mui/material'
 import loadingAnimation from '@static/gif/loading.gif'
 import { formatNumber, getScaleFromString } from '@utils/utils'
 import React, { CSSProperties, useRef } from 'react'
 import useStyles from './style'
 import icons from '@static/icons'
+import { getButtonClassName } from '@utils/uiUtils'
+import { OutlinedButton } from '@components/OutlinedButton/OutlinedButton'
+
+interface ActionButton {
+  label: string
+  onClick: () => void
+  disabled?: boolean
+  variant?: 'max' | 'half'
+  customClass?: string
+}
 
 interface IProps {
   setValue: (value: string) => void
@@ -12,7 +22,6 @@ interface IProps {
   currencyIsUnknown: boolean
   value?: string
   placeholder?: string
-  onMaxClick: () => void
   style?: CSSProperties
   blocked?: boolean
   blockerInfo?: string
@@ -25,16 +34,15 @@ interface IProps {
   priceLoading?: boolean
   isBalanceLoading: boolean
   walletUninitialized: boolean
+  actionButtons?: ActionButton[]
 }
-
 export const DepositAmountInput: React.FC<IProps> = ({
   currency,
   currencyIconSrc,
   currencyIsUnknown,
   value,
   setValue,
   placeholder,
-  onMaxClick,
   style,
   blocked = false,
   blockerInfo,
@@ -45,6 +53,7 @@ export const DepositAmountInput: React.FC<IProps> = ({
   disabled = false,
   priceLoading = false,
   isBalanceLoading,
+  actionButtons = [],
   walletUninitialized
 }) => {
   const { classes } = useStyles({ isSelected: !!currency && !walletUninitialized })
@@ -92,6 +101,30 @@ export const DepositAmountInput: React.FC<IProps> = ({
 
   const usdBalance = tokenPrice && value ? tokenPrice * +value : 0
 
+  const renderActionButton = (button: ActionButton) => {
+    const buttonClassName = getButtonClassName({
+      label: button.variant ?? 'max',
+      variants: [
+        { label: 'max', className: classes.maxVariant },
+        { label: 'half', className: classes.halfVariant }
+      ],
+      default: classes.actionButton
+    })
+    return (
+      <OutlinedButton
+        name={button.label}
+        key={button.label}
+        onClick={button.onClick}
+        disabled={button.disabled || walletUninitialized || !currency}
+        className={
+          currency && !walletUninitialized
+            ? buttonClassName
+            : `${classes.actionButton} ${classes.actionButtonNotActive}`
+        }
+      />
+    )
+  }
+
   return (
     <Grid container className={classes.wrapper} style={style}>
       <div className={classes.root}>
@@ -151,13 +184,8 @@ export const DepositAmountInput: React.FC<IProps> = ({
           alignItems='center'
           direction='row'
           wrap='nowrap'>
-          <Grid
-            className={classes.balance}
-            container
-            alignItems='center'
-            wrap='nowrap'
-            onClick={walletUninitialized ? () => {} : onMaxClick}>
-            <Typography className={classes.caption2}>
+          <Grid className={classes.balance} container alignItems='center' wrap='nowrap'>
+            <Typography className={classes.caption2} onClick={() => actionButtons[0].onClick()}>
               Balance:{' '}
               {walletUninitialized ? (
                 <>-</>
@@ -168,14 +196,15 @@ export const DepositAmountInput: React.FC<IProps> = ({
               )}{' '}
               {currency}
             </Typography>
-            <Button
+            {actionButtons.map(renderActionButton)}
+            {/* <Button
               className={
                 currency && !walletUninitialized
                   ? classes.maxButton
                   : `${classes.maxButton} ${classes.maxButtonNotActive}`
               }>
               Max
-            </Button>
+            </Button> */}
           </Grid>
           <Grid className={classes.percentages} container alignItems='center' wrap='nowrap'>
             {currency ? (

diff --git a/src/components/Inputs/DepositAmountInput/style.ts b/src/components/Inputs/DepositAmountInput/style.ts
@@ -145,41 +145,60 @@ export const useStyles = makeStyles<{ isSelected: boolean }>()((theme: Theme, {
   estimatedBalance: {
     ...caption2styles
   },
-  maxButton: {
-    color: colors.invariant.componentBcg,
+
+  actionButton: {
     ...typography.tiny2,
     borderRadius: 4,
+    fontWeight: '600',
     width: 26,
     minWidth: 26,
     height: 14,
+    padding: '0px 15px',
+
     textTransform: 'none',
     marginLeft: 4,
-    background: ' rgba(46, 224, 154, 0.8)',
     lineHeight: '14px',
+    color: colors.invariant.componentBcg,
 
+    [theme.breakpoints.down('md')]: {
+      width: 26,
+      minWidth: 26,
+      height: 14,
+      marginTop: 2
+    }
+  },
+  maxVariant: {
+    background: `${colors.invariant.green}cc !important`,
     '&:hover': {
       background: 'none',
-      backgroundColor: colors.invariant.green,
+      backgroundColor: `${colors.invariant.green} !important`,
       boxShadow: '0px 0px 20px -10px white',
       '@media (hover: none)': {
-        background: ' rgba(46, 224, 154, 0.8)',
+        background: 'rgba(46, 224, 154, 0.8)',
+        boxShadow: 'none'
+      }
+    }
+  },
+  halfVariant: {
+    background: `${colors.invariant.pink}cc !important`,
+    '&:hover': {
+      background: 'none',
+      backgroundColor: `${colors.invariant.pink} !important`,
+      boxShadow: '0px 0px 20px -10px white',
+      '@media (hover: none)': {
+        background: `${colors.invariant.pink}cc`,
         boxShadow: 'none'
       }
-    },
-    [theme.breakpoints.down('md')]: {
-      width: 26,
-      minWidth: 26,
-      height: 14,
-      marginTop: 2
     }
   },
-  maxButtonNotActive: {
+  actionButtonNotActive: {
     backgroundColor: colors.invariant.light,
     '&:hover': {
       backgroundColor: colors.invariant.light,
       cursor: 'default'
     }
   },
+
   noData: {
     color: colors.invariant.warning,
     ...typography.caption2,

diff --git a/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.stories.tsx b/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.stories.tsx
@@ -57,7 +57,6 @@ const meta = {
     className: '',
     decimal: 2,
     placeholder: '0.0',
-    onMaxClick: fn(),
     current: null,
     tokens: tokens,
     onSelect: fn(),

diff --git a/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx b/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx
@@ -9,6 +9,15 @@ import React, { CSSProperties, useRef } from 'react'
 import useStyles from './style'
 import { PublicKey } from '@solana/web3.js'
 import { NetworkType } from '@store/consts/static'
+import { getButtonClassName } from '@utils/uiUtils'
+
+interface ActionButton {
+  label: string
+  onClick: () => void
+  disabled?: boolean
+  variant?: 'max' | 'half'
+  customClass?: string
+}
 
 interface IProps {
   setValue: (value: string) => void
@@ -18,7 +27,6 @@ interface IProps {
   decimal: number
   placeholder?: string
   style?: CSSProperties
-  onMaxClick: () => void
   current: SwapToken | null
   tokens: SwapToken[]
   onSelect: (index: number) => void
@@ -38,17 +46,17 @@ interface IProps {
   showBlur: boolean
   hiddenUnknownTokens: boolean
   network: NetworkType
+  actionButtons?: ActionButton[]
 }
 
-export const AmountInput: React.FC<IProps> = ({
+export const ExchangeAmountInput: React.FC<IProps> = ({
   value,
   setValue,
   error,
   className,
   decimal,
   placeholder,
   style,
-  onMaxClick,
   current,
   tokens,
   onSelect,
@@ -65,6 +73,7 @@ export const AmountInput: React.FC<IProps> = ({
   isBalanceLoading,
   showMaxButton = true,
   showBlur,
+  actionButtons = [],
   hiddenUnknownTokens,
   network
 }) => {
@@ -113,6 +122,30 @@ export const AmountInput: React.FC<IProps> = ({
 
   const usdBalance = tokenPrice && value ? tokenPrice * +value : 0
 
+  const renderActionButton = (button: ActionButton) => {
+    const buttonClassName = getButtonClassName({
+      label: button.variant ?? 'max',
+      variants: [
+        { label: 'max', className: classes.maxVariant },
+        { label: 'half', className: classes.halfVariant }
+      ],
+      default: classes.actionButton
+    })
+    return (
+      <>
+        <OutlinedButton
+          name={button.label}
+          onClick={button.onClick}
+          className={` ${hideBalances ? `${classes.actionButtonNotActive} ${classes.actionButton}` : buttonClassName}`}
+          labelClassName={classes.label}
+          disabled={
+            disabled && isNaN(Number(balance)) ? disabled : isNaN(Number(balance)) || hideBalances
+          }
+        />
+      </>
+    )
+  }
+
   return (
     <>
       <Grid container alignItems='center' wrap='nowrap' className={classes.exchangeContainer}>
@@ -166,8 +199,11 @@ export const AmountInput: React.FC<IProps> = ({
           className={classNames(classes.balanceContainer, {
             [classes.showMaxButton]: showMaxButton
           })}
-          onClick={showMaxButton && !hideBalance ? onMaxClick : () => {}}>
-          <Typography className={classes.BalanceTypography}>
+          // onClick={showMaxButton && !hideBalance ? onMaxClick : () => {}}>
+        >
+          <Typography
+            className={classes.BalanceTypography}
+            onClick={() => actionButtons[0].onClick()}>
             Balance:{' '}
             {isBalanceLoading ? (
               <img src={loadingAnimation} className={classes.loadingBalance} alt='loading' />
@@ -179,20 +215,7 @@ export const AmountInput: React.FC<IProps> = ({
             {tokenIcon.slice(0, 8)}
             {tokenIcon.length > 8 ? '...' : ''}
           </Typography>
-          {showMaxButton && (
-            <OutlinedButton
-              name='Max'
-              color='primary'
-              onClick={onMaxClick}
-              className={classes.maxButton}
-              labelClassName={classes.label}
-              disabled={
-                disabled && isNaN(Number(balance))
-                  ? disabled
-                  : isNaN(Number(balance)) || hideBalances
-              }
-            />
-          )}
+          {showMaxButton && <>{actionButtons.map(renderActionButton)}</>}
         </Grid>
 
         <Grid className={classes.percentages} container alignItems='center' wrap='nowrap'>
@@ -232,4 +255,4 @@ export const AmountInput: React.FC<IProps> = ({
     </>
   )
 }
-export default AmountInput
+export default ExchangeAmountInput