Merge pull request #241 from invariant-labs/dev

Update staging
invariant-labs · Jul 28, 2024 · 6869f62 · 6869f62
2 parents f9a77a1 + 67c5b15
commit 6869f62
Show file tree

Hide file tree

Showing 68 changed files with 1,320 additions and 1,060 deletions.
diff --git a/src/components/EmptyPlaceholder/EmptyPlaceholder.tsx b/src/components/EmptyPlaceholder/EmptyPlaceholder.tsx
@@ -1,28 +1,32 @@
-import { Grid, Typography } from '@mui/material'
-import empty from '@static/svg/empty.svg'
+import { Button, Grid, Typography } from '@mui/material'
 import classNames from 'classnames'
 import React from 'react'
 import { useStyles } from './style'
+import icons from '@static/icons'
 
 export interface IEmptyPlaceholder {
   desc: string
+  onAction?: () => void
   className?: string
   style?: React.CSSProperties
 }
 
-export const EmptyPlaceholder: React.FC<IEmptyPlaceholder> = ({ desc, className, style }) => {
+export const EmptyPlaceholder: React.FC<IEmptyPlaceholder> = ({ desc, onAction }) => {
   const { classes } = useStyles()
 
   return (
-    <Grid
-      container
-      direction='column'
-      alignItems='center'
-      className={classNames(classes.wrapper, className)}
-      style={style}>
-      <img src={empty} className={classes.image} alt='empty' />
-      <Typography className={classes.title}>It's empty here...</Typography>
-      <Typography className={classes.desc}>{desc}</Typography>
-    </Grid>
+    <>
+      <Grid className={classNames(classes.blur, 'blurLayer')} />
+      <Grid className={classNames(classes.container, 'blurLayer')}>
+        <Grid className={classNames(classes.root, 'blurInfo')}>
+          <img className={classes.img} src={icons.empty} alt='Not connected' />
+          <Typography className={classes.desc}>It's empty here...</Typography>
+          {desc?.length && <Typography className={classes.desc}>{desc}</Typography>}
+          <Button className={classes.button} onClick={onAction} variant='contained'>
+            Add a position
+          </Button>
+        </Grid>
+      </Grid>
+    </>
   )
 }
diff --git a/src/components/EmptyPlaceholder/style.tsx b/src/components/EmptyPlaceholder/style.tsx
@@ -2,24 +2,55 @@ import { colors, typography } from '@static/theme'
 import { makeStyles } from 'tss-react/mui'
 
 export const useStyles = makeStyles()(() => ({
-  wrapper: {
-    width: 300
+  container: {
+    width: '100%',
+    height: '370px',
+    position: 'absolute',
+    zIndex: 14
   },
-  image: {
-    width: 160,
-    height: 180
+  root: {
+    zIndex: 10,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 25,
+    width: '100%',
+    height: '100%',
+    p: {
+      textAlign: 'center'
+    }
   },
-  title: {
-    ...typography.heading2,
-    marginBlock: 24,
-    color: colors.invariant.textGrey,
-    opacity: 0.7
+  img: {
+    paddingBottom: 25
+  },
+  blur: {
+    width: '100%',
+    height: '370px',
+    backgroundColor: 'rgba(12, 11, 13, 0.8)',
+    position: 'absolute',
+    zIndex: 13,
+    borderRadius: 10
   },
   desc: {
-    color: colors.invariant.textGrey,
-    opacity: 0.7,
-    ...typography.heading4,
-    fontWeight: 400,
-    textAlign: 'center'
+    ...typography.body2,
+    fontWeight: 500,
+    lineHeight: '20px',
+    color: colors.invariant.lightHover
+  },
+  button: {
+    height: 40,
+    width: 200,
+    marginTop: 20,
+    color: colors.invariant.componentBcg,
+    ...typography.body1,
+    textTransform: 'none',
+    borderRadius: 14,
+    background: colors.invariant.pinkLinearGradientOpacity,
+
+    '&:hover': {
+      background: colors.invariant.pinkLinearGradient,
+      boxShadow: '0px 0px 16px rgba(239, 132, 245, 0.35)'
+    }
   }
 }))
diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx
@@ -3,6 +3,7 @@ import { fn } from '@storybook/test'
 import Header from './Header'
 import { MemoryRouter } from 'react-router-dom'
 import { Network } from '@invariant-labs/a0-sdk'
+import { Chain } from '@store/consts/types'
 
 const meta = {
   title: 'Layout/Header',
@@ -33,6 +34,11 @@ export const Primary: Story = {
     walletConnected: true,
     onFaucet: fn(),
     onCopyAddress: fn(),
-    onChangeWallet: fn()
+    onChangeWallet: fn(),
+    activeChain: {
+      name: Chain.AlephZero,
+      address: 'https://azero.invariant.app/swap'
+    },
+    onChainSelect: fn()
   }
 }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -6,7 +6,7 @@ import { Box, Button, CardMedia, Grid, IconButton, useMediaQuery } from '@mui/ma
 import icons from '@static/icons'
 import Hamburger from '@static/svg/Hamburger.svg'
 import { theme } from '@static/theme'
-import { AlephZeroNetworks } from '@store/consts/static'
+import { AlephZeroNetworks, CHAINS } from '@store/consts/static'
 import { blurContent, unblurContent } from '@utils/uiUtils'
 import { useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
@@ -16,6 +16,9 @@ import SelectRPCButton from './HeaderButton/SelectRPCButton'
 import useButtonStyles from './HeaderButton/style'
 import useStyles from './style'
 import { Network } from '@invariant-labs/a0-sdk'
+import SelectChainButton from './HeaderButton/SelectChainButton'
+import { ISelectChain } from '@store/consts/types'
+import SelectChain from '@components/Modals/SelectChain/SelectChain'
 
 export interface IHeader {
   address: string
@@ -30,6 +33,8 @@ export interface IHeader {
   defaultTestnetRPC: string
   onCopyAddress: () => void
   onChangeWallet: () => void
+  activeChain: ISelectChain
+  onChainSelect: (chain: ISelectChain) => void
 }
 
 export const Header: React.FC<IHeader> = ({
@@ -44,24 +49,28 @@ export const Header: React.FC<IHeader> = ({
   onDisconnectWallet,
   defaultTestnetRPC,
   onCopyAddress,
-  onChangeWallet
+  onChangeWallet,
+  activeChain,
+  onChainSelect
 }) => {
   const { classes } = useStyles()
   const buttonStyles = useButtonStyles()
   const navigate = useNavigate()
 
-  const isXsDown = useMediaQuery(theme.breakpoints.down('sm'))
+  const isMdDown = useMediaQuery(theme.breakpoints.down('md'))
 
   const routes = ['swap', 'pool', 'stats']
 
   const otherRoutesToHighlight: Record<string, RegExp[]> = {
-    pool: [/^newPosition\/*/, /^position\/*/]
+    pool: [/^newPosition\/*/, /^position\/*/],
+    swap: [/^swap\/*/]
   }
 
   const [activePath, setActive] = useState('swap')
 
   const [routesModalOpen, setRoutesModalOpen] = useState(false)
   const [testnetRpcsOpen, setTestnetRpcsOpen] = useState(false)
+  const [chainSelectOpen, setChainSelectOpen] = useState(false)
   const [routesModalAnchor, setRoutesModalAnchor] = useState<HTMLButtonElement | null>(null)
 
   useEffect(() => {
@@ -85,26 +94,27 @@ export const Header: React.FC<IHeader> = ({
           className={classes.leftSide}
           justifyContent='flex-start'
           sx={{ display: { xs: 'none', md: 'block' } }}>
-          <Grid container>
-            <CardMedia
-              className={classes.logo}
-              image={icons.LogoTitle}
-              onClick={() => navigate('/swap')}
-            />
-          </Grid>
+          <CardMedia
+            className={classes.logo}
+            image={icons.LogoTitle}
+            onClick={() => {
+              if (!activePath.startsWith('swap')) {
+                navigate('/swap')
+              }
+            }}
+          />
         </Grid>
-        <Box>
-          <Grid
-            container
-            item
-            className={classes.leftSide}
-            justifyContent='flex-start'
-            sx={{ display: { xs: 'block', md: 'none' } }}>
+        <Box sx={{ display: { xs: 'block', md: 'none' } }}>
+          <Grid container item className={classes.leftSide} justifyContent='flex-start'>
             <Grid container>
               <CardMedia
                 className={classes.logoShort}
                 image={icons.LogoShort}
-                onClick={() => navigate('/swap')}
+                onClick={() => {
+                  if (!activePath.startsWith('swap')) {
+                    navigate('/swap')
+                  }
+                }}
               />
             </Grid>
           </Grid>
@@ -114,12 +124,16 @@ export const Header: React.FC<IHeader> = ({
           item
           className={classes.routers}
           wrap='nowrap'
-          sx={{ display: { xs: 'none', md: 'block' } }}>
+          sx={{ display: { xs: 'none', lg: 'block' } }}>
           {routes.map(path => (
             <Link key={`path-${path}`} to={`/${path}`} className={classes.link}>
               <NavbarButton
                 name={path}
-                onClick={() => {
+                onClick={e => {
+                  if (path === 'swap' && activePath.startsWith('swap')) {
+                    e.preventDefault()
+                  }
+
                   setActive(path)
                 }}
                 active={
@@ -134,7 +148,7 @@ export const Header: React.FC<IHeader> = ({
 
         <Grid container item className={classes.buttons} wrap='nowrap'>
           {typeOfNetwork === Network.Testnet ? (
-            <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
+            <Box sx={{ display: { xs: 'none', md: 'block' } }}>
               <Button
                 className={buttonStyles.classes.headerButton}
                 variant='contained'
@@ -145,10 +159,13 @@ export const Header: React.FC<IHeader> = ({
             </Box>
           ) : null}
           {typeOfNetwork === Network.Testnet ? (
-            <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
+            <Box sx={{ display: { xs: 'none', md: 'block' } }}>
               <SelectRPCButton rpc={rpc} networks={testnetRPCs} onSelect={onNetworkSelect} />
             </Box>
           ) : null}
+          <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+            <SelectChainButton activeChain={activeChain} chains={CHAINS} onSelect={onChainSelect} />
+          </Box>
           <SelectNetworkButton
             name={typeOfNetwork}
             networks={[
@@ -165,7 +182,7 @@ export const Header: React.FC<IHeader> = ({
             name={
               walletConnected
                 ? `${address.toString().slice(0, 4)}...${
-                    !isXsDown
+                    !isMdDown
                       ? address
                           .toString()
                           .slice(address.toString().length - 4, address.toString().length)
@@ -184,7 +201,7 @@ export const Header: React.FC<IHeader> = ({
           />
         </Grid>
 
-        <Grid sx={{ display: { xs: 'block', md: 'none' } }}>
+        <Grid sx={{ display: { xs: 'block', lg: 'none' } }}>
           <IconButton
             className={classes.menuButton}
             onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
@@ -208,15 +225,23 @@ export const Header: React.FC<IHeader> = ({
               setRoutesModalOpen(false)
               unblurContent()
             }}
-            onFaucet={typeOfNetwork === Network.Testnet && isXsDown ? onFaucet : undefined}
+            onFaucet={typeOfNetwork === Network.Testnet && isMdDown ? onFaucet : undefined}
             onRPC={
-              typeOfNetwork === Network.Testnet && isXsDown
+              typeOfNetwork === Network.Testnet && isMdDown
                 ? () => {
                     setRoutesModalOpen(false)
                     setTestnetRpcsOpen(true)
                   }
                 : undefined
             }
+            onChainSelect={
+              isMdDown
+                ? () => {
+                    setRoutesModalOpen(false)
+                    setChainSelectOpen(true)
+                  }
+                : undefined
+            }
           />
           {typeOfNetwork === Network.Testnet ? (
             <SelectTestnetRPC
@@ -231,6 +256,17 @@ export const Header: React.FC<IHeader> = ({
               activeRPC={rpc}
             />
           ) : null}
+          <SelectChain
+            chains={CHAINS}
+            open={chainSelectOpen}
+            anchorEl={routesModalAnchor}
+            onSelect={onChainSelect}
+            handleClose={() => {
+              setChainSelectOpen(false)
+              unblurContent()
+            }}
+            activeChain={activeChain}
+          />
         </Grid>
       </Grid>
     </Grid>