Merge pull request #272 from invariant-labs/no-token-found-placeholder

create no token found placeholder
invariant-labs · Aug 8, 2024 · fc326ce · fc326ce
2 parents 049e6cf + 527d89f
commit fc326ce
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/src/components/Modals/SelectModals/SelectTokenModal/SelectTokenModal.tsx b/src/components/Modals/SelectModals/SelectTokenModal/SelectTokenModal.tsx
@@ -222,6 +222,23 @@ export const SelectTokenModal: React.FC<ISelectTokenModal> = ({
             />
           </Grid>
           <Box className={classes.tokenList}>
+            {!filteredTokens.length && (
+              <Grid className={classes.noTokenFoundContainer}>
+                <img className={classes.img} src={icons.empty} alt='Not connected' />
+                <Typography className={classes.noTokenFoundPlaceholder}>
+                  No token found...
+                </Typography>
+                <Typography className={classes.noTokenFoundPlaceholder}>
+                  Add your token by pressing the button!
+                </Typography>
+                <Button
+                  className={classes.addTokenButton}
+                  onClick={() => setIsAddOpen(true)}
+                  variant='contained'>
+                  Add a token
+                </Button>
+              </Grid>
+            )}
             <List
               height={400}
               width={360}

diff --git a/src/components/Modals/SelectModals/style.ts b/src/components/Modals/SelectModals/style.ts
@@ -374,6 +374,40 @@ const useStyles = makeStyles()((theme: Theme) => {
       marginLeft: 10,
       cursor: 'pointer',
       fontSize: 28
+    },
+    noTokenFoundPlaceholder: {
+      ...typography.body2,
+      fontWeight: 500,
+      lineHeight: '20px',
+      color: colors.invariant.lightHover
+    },
+    addTokenButton: {
+      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)',
+        '@media (hover: none)': {
+          background: colors.invariant.pinkLinearGradientOpacity,
+          boxShadow: 'none'
+        }
+      }
+    },
+    noTokenFoundContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      marginTop: 32
+    },
+    img: {
+      paddingBottom: 25
     }
   }
 })