autoswap frontend

package.json

@@ -22,7 +22,7 @@
     "@emotion/styled": "^11.11.5",
     "@invariant-labs/locker-eclipse-sdk": "^0.0.20",
     "@invariant-labs/points-sdk": "^0.0.3",
-    "@invariant-labs/sdk-eclipse": "^0.0.63",
+    "@invariant-labs/sdk-eclipse": "^0.0.84",
     "@irys/web-upload": "^0.0.14",
     "@irys/web-upload-solana": "^0.1.7",
     "@metaplex-foundation/js": "^0.20.1",
@@ -61,6 +61,7 @@
     "remeda": "^1.61.0",
     "slick-carousel": "^1.8.1",
     "tss-react": "^4.9.6",
+    "tweetnacl": "^1.0.3",
     "typed-redux-saga": "^1.5.0",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0"

src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx

@@ -162,6 +162,7 @@ export const DepositAmountInput: React.FC<IProps> = ({
               <Typography className={classes.noCurrencyText}>-</Typography>
             )}
           </Grid>
+
           <Input
             className={classes.input}
             classes={{ input: classes.innerInput }}

src/components/Inputs/DepositAmountInput/style.ts

@@ -18,8 +18,6 @@ const caption2styles = {
 export const useStyles = makeStyles<{ isSelected: boolean }>()((theme: Theme, { isSelected }) => ({
   wrapper: {
     position: 'relative',
-    marginBottom: 16,
-
     [theme.breakpoints.down('md')]: {
       minWidth: 0
     }
@@ -228,7 +226,8 @@ export const useStyles = makeStyles<{ isSelected: boolean }>()((theme: Theme, {
     width: '100%',
     height: '100%',
     backgroundColor: 'rgba(11, 12, 13, 0.88)',
-    filter: 'blur(4px) brightness(0.4)'
+    filter: 'blur(4px) brightness(0.4)',
+    borderRadius: 20
   },
   blockedInfoWrapper: {
     position: 'absolute',

src/components/Modals/DepositOptionsModal/DepositOption.tsx

@@ -0,0 +1,207 @@
+import React, { useRef, useState } from 'react'
+import useStyles from './style'
+import { Box, Button, Divider, Grid, Input, Tooltip, Typography } from '@mui/material'
+import classNames from 'classnames'
+import icons from '@static/icons'
+
+interface Props {
+  value: string
+  valueIndex: number
+  setValue: (value: string) => void
+  saveValue: (value: string) => void
+  options: {
+    value: string
+    label: string
+    message: string
+  }[]
+  upperValueTreshHold: string
+  lowerValueTreshHold: string
+  label: string
+  description: string
+  divider?: boolean
+}
+
+const DepositOption: React.FC<Props> = ({
+  value,
+  setValue,
+  saveValue,
+  valueIndex,
+  description,
+  label,
+  options,
+  upperValueTreshHold,
+  lowerValueTreshHold,
+  divider
+}) => {
+  const { classes } = useStyles()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [temp, setTemp] = useState<string>(valueIndex === -1 ? value : '')
+  const allowOnlyDigitsAndTrimUnnecessaryZeros: React.ChangeEventHandler<
+    HTMLInputElement | HTMLTextAreaElement
+  > = e => {
+    const value = e.target.value
+
+    const regex = /^\d*\.?\d*$/
+    if (value === '' || regex.test(value)) {
+      const startValue = value
+      const caretPosition = e.target.selectionStart
+
+      let parsed = value
+      const zerosRegex = /^0+\d+\.?\d*$/
+      if (zerosRegex.test(parsed)) {
+        parsed = parsed.replace(/^0+/, '')
+      }
+      const dotRegex = /^\.\d*$/
+      if (dotRegex.test(parsed)) {
+        parsed = `0${parsed}`
+      }
+
+      const diff = startValue.length - parsed.length
+
+      setTemp(parsed)
+
+      if (caretPosition !== null && parsed !== startValue) {
+        setTimeout(() => {
+          if (inputRef.current) {
+            inputRef.current.selectionStart = Math.max(caretPosition - diff, 0)
+            inputRef.current.selectionEnd = Math.max(caretPosition - diff, 0)
+          }
+        }, 0)
+      }
+    } else if (!regex.test(value)) {
+      setTemp('0.00')
+    }
+  }
+
+  const checkValue: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = e => {
+    const value = e.target.value
+    if (Number(value) > Number(upperValueTreshHold)) {
+      setTemp(upperValueTreshHold)
+    } else if (Number(value) < Number(lowerValueTreshHold) || isNaN(Number(value))) {
+      setTemp(lowerValueTreshHold)
+    } else {
+      const onlyTwoDigits = '^\\d*\\.?\\d{0,2}$'
+      const regex = new RegExp(onlyTwoDigits, 'g')
+      if (regex.test(value)) {
+        setTemp(value)
+      } else {
+        setTemp(Number(value).toFixed(2))
+      }
+    }
+  }
+
+  return (
+    <>
+      {divider && <Divider className={classes.divider} />}
+      <Typography className={classes.label}>{label}</Typography>
+      <Grid container gap='9px'>
+        {options.map((tier, index) => (
+          <Button
+            className={classNames(
+              classes.slippagePercentageButton,
+              valueIndex === index && classes.slippagePercentageButtonActive
+            )}
+            key={tier.value}
+            onClick={e => {
+              e.preventDefault()
+              setValue(Number(options[index].value).toFixed(2))
+              saveValue(Number(options[index].value).toFixed(2))
+            }}>
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                height: '100%',
+                gap: '2px'
+              }}>
+              <Box
+                sx={{
+                  fontWeight: 700,
+                  fontSize: 14,
+                  marginTop: '-8px'
+                }}>
+                {tier.value}%
+              </Box>
+              <Tooltip
+                title={
+                  <Box
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '6px',
+                      flexDirection: 'row',
+                      justifyContent: 'center'
+                    }}>
+                    <Box width={'12px'}>
+                      <img src={icons.goldenInfoCircle} alt='' width={'12px'} height={'12px'} />
+                    </Box>
+                    <span style={{ width: '141px' }}>{tier.message}</span>
+                  </Box>
+                }
+                classes={{ tooltip: classes.tooltip }}>
+                <Typography
+                  style={{
+                    fontWeight: 400,
+                    fontSize: 10,
+                    letterSpacing: '-0.03%',
+                    textTransform: 'none',
+                    marginLeft: '-4px'
+                  }}>
+                  {tier.label}
+                  {tier.message !== '' ? (
+                    <img
+                      src={icons.infoCircle}
+                      alt=''
+                      width='8px'
+                      style={{ marginTop: '0px', marginLeft: '2px' }}
+                      className={classes.grayscaleIcon}
+                    />
+                  ) : null}
+                </Typography>
+              </Tooltip>
+            </Box>
+          </Button>
+        ))}
+      </Grid>
+      <Box marginTop='6px'>
+        <Input
+          disableUnderline
+          placeholder='0.00'
+          className={classNames(
+            classes.detailsInfoForm,
+            valueIndex === -1 && classes.customSlippageActive
+          )}
+          type={'text'}
+          value={temp}
+          onChange={e => {
+            allowOnlyDigitsAndTrimUnnecessaryZeros(e)
+            checkValue(e)
+          }}
+          ref={inputRef}
+          startAdornment='Custom'
+          endAdornment={
+            <>
+              %
+              <button
+                className={classes.detailsInfoBtn}
+                onClick={() => {
+                  setValue(Number(temp).toFixed(2))
+                  saveValue(Number(temp).toFixed(2))
+                }}>
+                Save
+              </button>
+            </>
+          }
+          classes={{
+            input: classes.innerInput,
+            inputAdornedEnd: classes.inputAdornedEnd
+          }}
+        />
+      </Box>
+      <Typography className={classes.info}>{description}</Typography>
+    </>
+  )
+}
+
+export default DepositOption