fix: add label for empty state

src/components/CollapseTable/CollapseTable.js

@@ -7,30 +7,38 @@ import ListItemText from '@material-ui/core/ListItemText'
 import Collapse from '@material-ui/core/Collapse'
 import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp'
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'
-import { Typography } from '@material-ui/core'
+import Typography from '@material-ui/core/Typography'
+import Box from '@material-ui/core/Box'
 
 import Table from '../Table'
+import { commonStyles } from 'utils'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%'
-  },
-  bar: {
-    borderBottom: '1px solid rgba(0, 0, 0, 0.87)',
-    width: '100%',
-    height: 30,
-    padding: 0,
-    '& span': {
-      fontSize: 12.1,
-      fontWeight: 600,
-      lineHeight: 1.32,
-      letterSpacing: '2px',
-      color: 'rgba(0, 0, 0, 0.87)'
-    }
+const useStyles = makeStyles((theme) => {
+  const { boxMessage, link } = commonStyles(theme)
+
+  return {
+    root: {
+      width: '100%'
+    },
+    bar: {
+      borderBottom: '1px solid rgba(0, 0, 0, 0.87)',
+      width: '100%',
+      height: 30,
+      padding: 0,
+      '& span': {
+        fontSize: 12.1,
+        fontWeight: 600,
+        lineHeight: 1.32,
+        letterSpacing: '2px',
+        color: 'rgba(0, 0, 0, 0.87)'
+      }
+    },
+    boxMessage,
+    link
   }
-}))
+})
 
-const CollapseTable = ({ data, label, onClick }) => {
+const CollapseTable = ({ data, label, onClick, message }) => {
   const classes = useStyles()
   const [open, setOpen] = React.useState(true)
 
@@ -45,8 +53,32 @@ const CollapseTable = ({ data, label, onClick }) => {
         {open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
       </ListItem>
       <Collapse in={open} timeout="auto" unmountOnExit>
+        {/* {data?.length === 0 && !isActiveUser && (
+          <Box className={classes.boxMessage}>
+            <Typography onClick={onClickLink} className={classes.link}>
+              Login
+            </Typography>
+            <Typography>to view your pools.</Typography>
+          </Box>
+        )}
+        {data?.length === 0 && isActiveUser && (
+          <Box className={classes.boxMessage}>
+            <Typography>No token pairs found.</Typography>
+            {showAddLiquidityLink && (
+              <Typography onClick={onClickLink} className={classes.link}>
+                Add liquidity now.
+              </Typography>
+            )}
+          </Box>
+        )} */}
+        {!data?.length && !message ? (
+          <Box className={classes.boxMessage}>
+            <Typography>No token pairs found.</Typography>
+          </Box>
+        ) : (
+          message
+        )}
         {data?.length > 0 && <Table data={data} onClick={onClick} />}
-        {data?.length === 0 && <Typography>Empty</Typography>}
       </Collapse>
     </List>
   )
@@ -55,7 +87,13 @@ const CollapseTable = ({ data, label, onClick }) => {
 CollapseTable.propTypes = {
   data: PropTypes.array,
   label: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  message: PropTypes.any
+}
+
+CollapseTable.defaultProps = {
+  onClick: () => {},
+  message: false
 }
 
 export default CollapseTable

src/components/EmptyTableMessage/EmptyTableMessage.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Typography from '@material-ui/core/Typography'
+import Box from '@material-ui/core/Box'
+
+const EmptyMessage = ({
+  isActiveUser,
+  isEmptyData,
+  classes,
+  onLogin,
+  onClickLink,
+  useLink
+}) => {
+  if (!isActiveUser)
+    return (
+      <Box className={classes.boxMessage}>
+        <Typography onClick={onLogin} className={classes.link}>
+          Login
+        </Typography>
+        <Typography>to view your pools.</Typography>
+      </Box>
+    )
+
+  if (isEmptyData)
+    return (
+      <Box className={classes.boxMessage}>
+        <Typography>No token pairs found.</Typography>
+        {useLink && (
+          <Typography onClick={onClickLink} className={classes.link}>
+            Add liquidity now.
+          </Typography>
+        )}
+      </Box>
+    )
+
+  return null
+}
+
+EmptyMessage.propTypes = {
+  isActiveUser: PropTypes.bool,
+  isEmptyData: PropTypes.bool,
+  classes: PropTypes.object,
+  onLogin: PropTypes.func,
+  onClickLink: PropTypes.func,
+  useLink: PropTypes.bool
+}
+
+export default EmptyMessage

src/components/EmptyTableMessage/index.js

@@ -0,0 +1 @@
+export { default } from './EmptyTableMessage'

src/components/InputTextAndSelect/InputTextAndSelect.js

@@ -184,15 +184,15 @@ const InputTextAndSelect = ({
           <Select
             id={id}
             onChange={(e) => handleOnChange(e.target.value, 'selectValue')}
-            value={inputData.selectValue || ''}
+            value={inputData.selectValue || t('selected')}
             renderValue={(selected) => {
               if (!selected) {
                 return (
                   <Typography
                     className={classes.placeholderSelect}
                     variant="body1"
                   >
-                    This Token
+                    {t('selected')}
                   </Typography>
                 )
               }

src/components/PageTitle/TitlePage.js

@@ -5,6 +5,26 @@ import PropTypes from 'prop-types'
 const TitlePage = ({ title }) => (
   <Helmet>
     <title>{title}</title>
+    <meta name="title" content="" />
+    <meta name="description" content="" />
+    {/* Open Graph / Facebook */}
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://metatags.io/" />
+    <meta property="og:title" content="" />
+    <meta property="og:description" content="" />
+    <meta
+      property="og:image"
+      content="https://user-images.githubusercontent.com/5632966/92547334-e3e4a600-f211-11ea-864e-a4cfee7ebba8.png"
+    />
+    {/* Twitter */}
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://metatags.io/" />
+    <meta property="twitter:title" content="" />
+    <meta property="twitter:description" content="" />
+    <meta
+      property="twitter:image"
+      content="https://user-images.githubusercontent.com/5632966/92547334-e3e4a600-f211-11ea-864e-a4cfee7ebba8.png"
+    />
   </Helmet>
 )
 

src/containers/Main/Main.js

@@ -22,6 +22,7 @@ const useStyles = makeStyles((theme) => {
     root: {
       padding: 0,
       display: 'flex',
+      maxWidth: '100%',
       height: `calc(${vh}px * 100)`
     },
     appBar: {
@@ -99,7 +100,7 @@ const Main = ({
   }, [])
 
   return (
-    <Container component="main" maxWidth="xl" className={classes.root}>
+    <Container component="main" className={classes.root}>
       <AppBar className={classes.appBar}>
         <Toolbar
           className={clsx(classes.toolBar, {

src/language/en/en.json

@@ -6,7 +6,8 @@
     "headerTitle": "Token Listings",
     "version": "Version",
     "footer": "Evodex is open source, get involved.",
-    "placeholder": "This Amount"
+    "placeholder": "This Amount",
+    "selected": "Selected"
   },
   "talkUsModal": {
     "title": "Evodex is for the EOS community.",

src/language/es/es.json

@@ -6,7 +6,8 @@
     "headerTitle": "Listado de Tokens",
     "version": "Versión",
     "footer": "Evodex es código abierto, involúcrate.",
-    "placeholder": "Monto"
+    "placeholder": "Monto",
+    "selected": "Seleccionar"
   },
   "talkUsModal": {
     "title": "Evodex es para la comunidad de EOS",

src/routes/Evodex/BackLayer/Liquidity/LiquidityBackLayer.js

@@ -129,8 +129,13 @@ const useStyles = makeStyles((theme) => {
         alignItems: 'center'
       }
     },
+    loading: {
+      ...loading,
+      [theme.breakpoints.up('md')]: {
+        minWidth: 800
+      }
+    },
     message,
-    loading,
     rocketSvg
   }
 })
@@ -350,6 +355,9 @@ const LiquidityBackLayer = ({ onReload, ual, isLightMode, showMessage }) => {
             </Typography>
           </Box>
         )}
+        {loading && (
+          <LinearProgress className={classes.loading} color="secondary" />
+        )}
         <Box className={classes.btnExchange}>
           <Button
             onClick={handleOnAddLiquidity}
@@ -359,9 +367,6 @@ const LiquidityBackLayer = ({ onReload, ual, isLightMode, showMessage }) => {
           >
             {t('add').toLocaleUpperCase()}
           </Button>
-          {loading && (
-            <LinearProgress className={classes.loading} color="secondary" />
-          )}
           <Button
             onClick={handleOnRemoveLiquidity}
             isLightMode={isLightMode}

src/routes/Evodex/Evodex.js

@@ -242,6 +242,8 @@ const Evodex = ({ ual }) => {
                 handleOnClickRow={handleOnClickRow}
                 pathname={location.pathname}
                 isMobile={isMobile}
+                isActiveUser={Boolean(ual.activeUser)}
+                onLogin={() => ual.showModal()}
               />
               <Box className={classes.footer}>
                 <Footer />