Merge branch 'develop' into align-token-logos

.github/workflows/auto-merge.yml

@@ -5,6 +5,21 @@ on:
     branches: [develop]
 
 jobs:
+  merge-to-master:
+    name: Merge to master
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - name: Request PR
+        uses: repo-sync/pull-request@v2
+        with:
+          source_branch: 'develop'
+          destination_branch: 'master'
+          pr_title: 'Merge develop into master'
+          pr_reviewer: 'keith-cy'
+          pr_label: 'auto-pr'
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
   merge-to-v1-mainnet:
     name: Merge to v1 mainnet
     runs-on: ubuntu-latest
@@ -15,7 +30,7 @@ jobs:
         with:
           source_branch: 'develop'
           destination_branch: 'v1/master'
-          pr_title: 'Merge develop ${{ github.ref }} into v1 mainnet'
+          pr_title: 'Merge develop into v1 mainnet'
           pr_reviewer: 'keith-cy'
           pr_label: 'auto-pr'
           github_token: ${{ secrets.GITHUB_TOKEN }}
@@ -30,7 +45,7 @@ jobs:
         with:
           source_branch: 'develop'
           destination_branch: 'v1/testnet'
-          pr_title: 'Merge develop ${{ github.ref }} into v1 testnet'
+          pr_title: 'Merge develop into v1 testnet'
           pr_reviewer: 'keith-cy'
           pr_label: 'auto-pr'
           github_token: ${{ secrets.GITHUB_TOKEN }}
@@ -45,7 +60,7 @@ jobs:
         with:
           source_branch: 'develop'
           destination_branch: 'v1/betanet'
-          pr_title: 'Merge develop ${{ github.ref }} into v1 betanet'
+          pr_title: 'Merge develop into v1 betanet'
           pr_reviewer: 'keith-cy'
           pr_label: 'auto-pr'
           github_token: ${{ secrets.GITHUB_TOKEN }}

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;