Add SolanaCreator page

package.json

@@ -43,12 +43,12 @@
     "notistack": "^3.0.1",
     "patch-package": "^6.4.7",
     "rc-scrollbars": "^1.1.3",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-app-rewire-hot-loader": "^2.0.1",
     "react-copy-to-clipboard": "^5.0.3",
-    "react-dom": "^16.13.1",
+    "react-dom": "^16.14.0",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^6.3.2",
+    "react-hook-form": "^7.53.0",
     "react-hot-loader": "^4.12.21",
     "react-number-format": "^4.7.3",
     "react-redux": "^7.2.1",

src/components/Header/Header.tsx

@@ -48,7 +48,7 @@ export const Header: React.FC<IHeader> = ({
 
   const isXsDown = useMediaQuery(theme.breakpoints.down('xs'))
 
-  const routes = ['swap', 'pool', 'stats', 'farms']
+  const routes = ['swap', 'pool', 'stats', 'farms', 'token']
 
   const otherRoutesToHighlight: Record<string, RegExp[]> = {
     pool: [/^newPosition\/*/, /^position\/*/],

src/pages/PagesRouter.tsx

@@ -17,6 +17,7 @@ import { SwapPage } from './SwapPage/SwapPage'
 import Footer from '@components/Footer/Footer'
 import FarmsPage from './FarmsPage/FarmsPage'
 import StatsPage from './StatsPage/StatsPage'
+import SolanaCreator from './SolanaCreator/SolanaCreator'
 // import BondsPage from './BondsPage/BondsPage'
 
 export const PagesRouter: React.FC = () => {
@@ -72,6 +73,8 @@ export const PagesRouter: React.FC = () => {
           />
           <Route path={'/pool'} component={ListPage} />
           <Route path={'/farms'} component={FarmsPage} />
+          <Route path={'/token'} component={SolanaCreator} />
+
           {/* <Route
             path={'/farm/:id'}
             render={({ match }) => <SingleFarmPage id={match.params.id} />}

src/pages/SolanaCreator/SolanaCreator.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import useStyles from './styles'
+import { Grid } from '@material-ui/core'
+import { CreateToken } from './components/CreateToken/CreateToken'
+
+export const SolanaCreator: React.FC = () => {
+  const classes = useStyles()
+  return (
+    <Grid container className={classes.container}>
+      <CreateToken />
+    </Grid>
+  )
+}
+
+export default SolanaCreator

src/pages/SolanaCreator/components/CreateToken/CreateToken.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import { Box, Typography } from '@material-ui/core'
+import useStyles from './styles'
+import { TokenMetadataInputs } from '../CreatorComponents/TokenMetadataInputs'
+import { onSubmit } from '../../utils/solanaCreatorUtils'
+import { TokenInfoInputs } from '../CreatorComponents/TokenInfoInputs'
+
+interface FormData {
+  name: string
+  symbol: string
+  decimals: string
+  supply: string
+  description: string
+  website: string
+  twitter: string
+  telegram: string
+  discord: string
+  image: string
+}
+
+export const CreateToken: React.FC = () => {
+  const classes = useStyles()
+
+  const formMethods = useForm<FormData>({
+    mode: 'onChange',
+    reValidateMode: 'onChange'
+  })
+
+  return (
+    <Box className={classes.pageWrapper}>
+      <Box className={classes.creatorMainContainer}>
+        <Box className={classes.column}>
+          <Typography variant='h1' className={classes.headerTitle}>
+            Create token
+          </Typography>
+          <form onSubmit={formMethods.handleSubmit(onSubmit)}>
+            <Box className={classes.row}>
+              <TokenInfoInputs formMethods={formMethods} />
+              <TokenMetadataInputs formMethods={formMethods} />
+            </Box>
+          </form>
+        </Box>
+      </Box>
+    </Box>
+  )
+}

src/pages/SolanaCreator/components/CreateToken/styles.ts

@@ -0,0 +1,114 @@
+import { makeStyles } from '@material-ui/core/styles'
+import { typography, colors } from '@static/theme'
+
+const useStyles = makeStyles(theme => ({
+  pageWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '24px',
+    width: '100%',
+    padding: '10px'
+  },
+  input: {
+    padding: '11px 12px',
+    width: '100%',
+    minHeight: '32px',
+    boxSizing: 'border-box',
+    ...typography.body2,
+    outline: 'none',
+    marginRight: -8,
+    fontFamily: 'Mukta',
+    outlineStyle: 'none',
+    fontSize: 16,
+    backgroundColor: colors.invariant.newDark,
+    color: colors.invariant.lightGrey,
+    borderRadius: 8,
+    cursor: 'pointer',
+    '&::placeholder': {
+      color: colors.invariant.textGrey
+    },
+    '&:focus': {
+      color: colors.white.main
+    }
+  },
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '10px'
+  },
+  columnInput: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '10px',
+    width: '100%'
+  },
+
+  row: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    gap: '10px',
+    [theme.breakpoints.up('sm')]: {
+      flexDirection: 'row'
+    }
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    padding: '24px',
+    gap: '24px',
+    // width: '100%'
+    height: 'fit-content',
+    background: colors.invariant.component,
+    borderRadius: '24px'
+  },
+  button: {
+    color: colors.invariant.dark,
+    ...typography.body1,
+    textTransform: 'none',
+    borderRadius: 14,
+    height: 40,
+    minWidth: 130,
+    paddingInline: 0,
+    background:
+      'linear-gradient(180deg, rgba(239, 132, 245, 0.8) 0%, rgba(156, 62, 189, 0.8) 100%)',
+    '&:hover': {
+      background: 'linear-gradient(180deg, #EF84F5 0%, #9C3EBD 100%)',
+      boxShadow: '0px 0px 16px rgba(239, 132, 245, 0.35)'
+    },
+    '&:disabled': {
+      background: colors.invariant.light,
+      color: colors.invariant.componentBcg
+    }
+  },
+  headerTitle: {
+    fontFamily: 'Mukta',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    fontSize: '20px',
+    lineHeight: '24px',
+    display: 'flex',
+    alignSelf: 'flex-start',
+    letterSpacing: '-0.03em',
+    color: colors.invariant.text
+  },
+  buttonText: {
+    WebkitPaddingBefore: '2px'
+  },
+  creatorMainContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    gap: '24px',
+    paddingTop: '24px',
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      flexDirection: 'row',
+      width: '70%'
+    }
+  }
+}))
+export default useStyles

src/pages/SolanaCreator/components/CreatorComponents/ControlledInputs.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { Controller } from 'react-hook-form'
+import { TextInput } from '../TextInput/TextInput'
+import { NumericInput } from '../NumericInput/NumericInput'
+import { FormData } from '../../utils/solanaCreatorUtils'
+
+interface ControlledInputProps {
+  name: keyof FormData
+  label: string
+  control: any
+  rules?: object
+  errors: any
+}
+
+interface ControlledTextInputProps extends ControlledInputProps {
+  multiline?: boolean
+  minRows?: number
+}
+
+interface ControlledNumericInputProps extends ControlledInputProps {
+  decimalsLimit: number
+}
+
+export const ControlledTextInput: React.FC<ControlledTextInputProps> = ({
+  name,
+  label,
+  control,
+  rules,
+  errors,
+  multiline,
+  minRows
+}) => (
+  <Controller
+    name={name}
+    control={control}
+    rules={rules}
+    defaultValue=''
+    render={({ field: { onChange, value } }) => (
+      <TextInput
+        label={label}
+        value={value}
+        handleChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+        error={!!errors[name]}
+        errorMessage={errors[name]?.message || ''}
+        multiline={multiline}
+        minRows={minRows}
+      />
+    )}
+  />
+)
+
+export const ControlledNumericInput: React.FC<ControlledNumericInputProps> = ({
+  name,
+  label,
+  control,
+  rules,
+  errors,
+  decimalsLimit
+}) => (
+  <Controller
+    name={name}
+    control={control}
+    defaultValue=''
+    rules={{ required: `${label} is required`, ...rules }}
+    render={({ field: { onChange, value } }) => (
+      <NumericInput
+        label={label}
+        value={value}
+        onChange={onChange}
+        error={!!errors[name]}
+        errorMessage={errors[name]?.message || ''}
+        decimalsLimit={decimalsLimit}
+      />
+    )}
+  />
+)