Merge pull request #475 from Magickbase/develop

components/Alert/index.tsx

@@ -0,0 +1,95 @@
+import { AlertProps, SnackbarProps, Snackbar, Alert as MuiAlert } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+import CancelIcon from '@mui/icons-material/Cancel'
+import ErrorIcon from '@mui/icons-material/Error'
+
+const StyledSnackbar = styled((props: SnackbarProps) => <Snackbar {...props} />)(({ theme }) => ({
+  '&.MuiSnackbar-root': {
+    top: theme.spacing(20),
+    [theme.breakpoints.down('sm')]: {
+      top: theme.spacing(1),
+    },
+    div: {
+      'borderRadius': 8,
+      '.MuiAlert-filledSuccess': {
+        backgroundColor: '#F0FCF1',
+        color: '#2BD56F',
+        svg: {
+          color: '#2BD56F',
+        },
+      },
+      '.MuiAlert-filledError': {
+        backgroundColor: '#FCF0F0',
+        color: '#F83F3F',
+        svg: {
+          color: '#F83F3F',
+        },
+      },
+      '.MuiAlert-filledWarning': {
+        backgroundColor: '#FAF0E1',
+        color: '#F3B515',
+        svg: {
+          color: '#F3B515',
+        },
+      },
+    },
+  },
+}))
+
+const StyledAlert = styled((props: AlertProps) => <MuiAlert {...props} />)(({ theme }) => ({
+  '&.MuiAlert-filled': {
+    display: 'flex',
+    alignItems: 'center',
+    width: 'auto',
+    height: '48px',
+    [theme.breakpoints.down('sm')]: {
+      height: '40px',
+    },
+  },
+  '& .MuiAlert-icon': {
+    marginRight: theme.spacing(1),
+    svg: {
+      fontSize: 16,
+      [theme.breakpoints.down('sm')]: {
+        fontSize: 14,
+      },
+    },
+  },
+  '& .MuiAlert-message': {
+    fontSize: 14,
+    [theme.breakpoints.down('sm')]: {
+      fontSize: 13,
+    },
+  },
+}))
+
+// extent mui SnackBar + Alert with custom styles
+const Alert: React.FC<SnackbarProps & { content: string; type: 'error' | 'success' | 'warning' }> = ({
+  content,
+  type,
+  ...rest
+}) => {
+  return (
+    <StyledSnackbar
+      anchorOrigin={{
+        horizontal: 'center',
+        vertical: 'top',
+      }}
+      autoHideDuration={3000}
+      color="secondary"
+      {...rest}
+    >
+      <div>
+        <StyledAlert
+          severity={type}
+          variant="filled"
+          iconMapping={{ error: <CancelIcon />, success: <CheckCircleIcon />, warning: <ErrorIcon /> }}
+        >
+          {content}
+        </StyledAlert>
+      </div>
+    </StyledSnackbar>
+  )
+}
+export default Alert

components/AssetList/index.tsx

@@ -1,11 +1,12 @@
 import { useTranslation } from 'next-i18next'
 import NextLink from 'next/link'
 import { gql } from 'graphql-request'
+import BigNumber from 'bignumber.js'
 import Table from 'components/Table'
 import TokenLogo from 'components/TokenLogo'
-import { parseTokenName, client, formatAmount, GraphQLSchema } from 'utils'
+import { parseTokenName, client, GraphQLSchema } from 'utils'
+import NoDataIcon from 'assets/icons/no-data.svg'
 import styles from './styles.module.scss'
-import BigNumber from 'bignumber.js'
 
 export type UdtList = Array<{
   value: string
@@ -89,8 +90,11 @@ const AssetList = ({ list = [] }: { list: UdtList }) => {
           })
         ) : (
           <tr>
-            <td colSpan={3} align="center" className={styles.noRecords}>
-              {t(`emptyAssetList`)}
+            <td colSpan={3} align="center">
+              <div className={styles.noRecords}>
+                <NoDataIcon />
+                <span>{t(`emptyAssetList`)}</span>
+              </div>
             </td>
           </tr>
         )}

components/AssetList/styles.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/mixin.scss';
+
 .name {
   display: flex;
   align-items: center;
@@ -34,5 +36,5 @@
 }
 
 .noRecords {
-  text-align: center;
+  @include empty-list;
 }

components/BridgedRecordList/index.tsx

@@ -5,6 +5,7 @@ import Table from 'components/Table'
 import HashLink from 'components/HashLink'
 import Address from 'components/TruncatedAddress'
 import Pagination from 'components/Pagination'
+import NoDataIcon from 'assets/icons/no-data.svg'
 import Amount from 'components/Amount'
 import { timeDistance, getBridgedRecordListRes, CKB_EXPLORER_URL, PCKB_UAN, PCKB_UDT_INFO } from 'utils'
 import styles from './styles.module.scss'
@@ -84,16 +85,21 @@ const BridgedRecordList: React.FC<{ list: ParsedList; showUser?: boolean }> = ({
             ))
           ) : (
             <tr>
-              <td colSpan={showUser ? 7 : 6} align="center" style={{ textAlign: 'center' }}>
-                {t(`no_records`)}
+              <td colSpan={showUser ? 7 : 6}>
+                <div className={styles.noRecords}>
+                  <NoDataIcon />
+                  <span>{t(`no_records`)}</span>
+                </div>
               </td>
             </tr>
           )}
         </tbody>
       </Table>
-      <div className={styles.pagination}>
-        <Pagination total={+list.meta.total} page={+list.meta.page} />
-      </div>
+      {+list.meta.total ? (
+        <div className={styles.pagination}>
+          <Pagination total={+list.meta.total} page={+list.meta.page} />
+        </div>
+      ) : null}
     </>
   )
 }

components/BridgedRecordList/styles.module.scss

@@ -1,5 +1,10 @@
+@import '../../styles/mixin.scss';
+
 .pagination {
   display: flex;
   justify-content: flex-end;
   padding: 1.125rem 1.5rem;
 }
+.noRecords {
+  @include empty-list;
+}

components/ChartComponents/styles.module.scss

@@ -20,7 +20,7 @@
     }
     li span {
       font-size: 14px;
-      color: #333;
+      color: var(--primary-text-color);
     }
     li::before {
       position: absolute;

components/ContractEventsList.tsx

@@ -17,8 +17,9 @@ import {
   InputAdornment,
   TextField,
 } from '@mui/material'
-import { ParsedEventLog, IMG_URL, useDebounce } from 'utils'
 import ContractEventListItem from './ContractEventListItem'
+import NoDataIcon from 'assets/icons/no-data.svg'
+import { ParsedEventLog, IMG_URL, useDebounce } from 'utils'
 
 export const EventFilterIcon = ({ setSearchText, tooltip, value }) => (
   <Tooltip title={tooltip} placement="top">
@@ -63,7 +64,7 @@ const ContractEventsList = ({ list }: { list: ParsedEventLog[] }) => {
     )
   }, [debouncedSetListItems, list, searchText])
 
-  return (
+  return listItems?.length ? (
     <Box sx={{ px: 1, py: 2 }}>
       <Stack direction="row" justifyContent="space-between" alignItems="center">
         <Typography fontSize={14} color="#333333" sx={{ m: 1.5 }}>
@@ -113,59 +114,68 @@ const ContractEventsList = ({ list }: { list: ParsedEventLog[] }) => {
             </TableRow>
           </TableHead>
           <TableBody>
-            {listItems?.length ? (
-              listItems?.map((item, idx) => (
-                <TableRow key={item.id + '-' + idx}>
-                  <TableCell>
-                    <Stack>
-                      <NextLink href={`/tx/${item.txHash}`} passHref>
+            {listItems?.map((item, idx) => (
+              <TableRow key={item.id + '-' + idx}>
+                <TableCell>
+                  <Stack>
+                    <NextLink href={`/tx/${item.txHash}`} passHref>
+                      <Link
+                        href={`/tx/${item.txHash}`}
+                        underline="none"
+                        color="secondary"
+                        className="mono-font"
+                        sx={{ fontSize: 14 }}
+                      >
+                        {item.txHash.slice(0, 17)}...
+                      </Link>
+                    </NextLink>
+                    <Box sx={{ display: 'flex' }}>
+                      <NextLink href={`/block/${item.blockNumber}`} passHref>
                         <Link
-                          href={`/tx/${item.txHash}`}
+                          href={`/block/${item.blockNumber}`}
                           underline="none"
-                          color="secondary"
+                          color="primary"
                           className="mono-font"
                           sx={{ fontSize: 14 }}
                         >
-                          {item.txHash.slice(0, 17)}...
+                          # {item.blockNumber}
                         </Link>
                       </NextLink>
-                      <Box sx={{ display: 'flex' }}>
-                        <NextLink href={`/block/${item.blockNumber}`} passHref>
-                          <Link
-                            href={`/block/${item.blockNumber}`}
-                            underline="none"
-                            color="secondary"
-                            sx={{ fontSize: 14 }}
-                          >
-                            # {item.blockNumber}
-                          </Link>
-                        </NextLink>
-                        <Box sx={{ pl: 0.5 }} />
-                        <EventFilterIcon
-                          setSearchText={setSearchText}
-                          tooltip={t('filterEventBy', { filter: `BlockNo=${item.blockNumber}` })}
-                          value={`${item.blockNumber}`}
-                        />
-                      </Box>
-                    </Stack>
-                  </TableCell>
-                  {/* <TableCell>{item.method}</TableCell> */}
-                  <TableCell sx={{ pr: 1 }}>
-                    <ContractEventListItem item={item} setSearchText={setSearchText} />
-                  </TableCell>
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={7} align="center">
-                  {t('no_records')}
+                      <Box sx={{ pl: 0.5 }} />
+                      <EventFilterIcon
+                        setSearchText={setSearchText}
+                        tooltip={t('filterEventBy', { filter: `BlockNo=${item.blockNumber}` })}
+                        value={`${item.blockNumber}`}
+                      />
+                    </Box>
+                  </Stack>
+                </TableCell>
+                {/* <TableCell>{item.method}</TableCell> */}
+                <TableCell sx={{ pr: 1 }}>
+                  <ContractEventListItem item={item} setSearchText={setSearchText} />
                 </TableCell>
               </TableRow>
-            )}
+            ))}
           </TableBody>
         </Table>
       </TableContainer>
     </Box>
+  ) : (
+    <Box>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: '8.75rem 0',
+          color: 'var(--primary-color)',
+        }}
+      >
+        <NoDataIcon />
+        <span style={{ marginTop: '2rem', color: 'var(--primary-text-color)' }}>{t(`no_records`)}</span>
+      </div>
+    </Box>
   )
 }