Merge pull request #578 from Magickbase/develop

Merge develop into master

.github/workflows/snyk.yml

@@ -8,7 +8,7 @@ jobs:
   security:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Run Snyk
         uses: snyk/actions/node@master
         env:

.github/workflows/test.e2e.yml

@@ -4,72 +4,60 @@ on:
   schedule:
     - cron: '0 0 * * *'
   push:
+    branches:
+      - 'develop'
+      - 'staging'
+      - 'v**'
   pull_request:
 
 jobs:
   e2e_tests:
-    if: false
     runs-on: ubuntu-18.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Install Node.js
         uses: actions/setup-node@v2-beta
         with:
           node-version: 16
 
-      - name: Cache node modules
-        uses: actions/cache@v3
+      - name: Cypress install
+        uses: cypress-io/github-action@v4
         with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
+          runTests: false
 
-      - name: Cache cypress binary
-        uses: actions/cache@v3
-        with:
-          path: ~/.cache/Cypress
-          key: cypress-${{ runner.os }}-cypress-${{ hashFiles('**/package.json') }}
-          restore-keys: |
-            cypress-${{ runner.os }}-cypress-
-
-      - name: Bootstrap
-        env:
-          CI: 1
-        run: |
-          npm ci
-          npx cypress verify
-          npx cypress info
-          npx cypress version
-          npx cypress version --component package
-          npx cypress version --component binary
-          npx cypress version --component electron
-          npx cypress version --component node
+      - name: Cypress info
+        run: npx cypress info
 
-      - name: Test
-        run: npm run test:e2e
+      - name: Cypress run
+        uses: cypress-io/[email protected]
+        with:
+          install: false
+          build: npm run build
+          start: npm start
+          wait-on: 'http://localhost:3000'
+          wait-on-timeout: 120
+          config-file: cypress.json
+          command: npm run cypress:run
         env:
-          NEXT_PUBLIC_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_SERVER_ENDPOINT }}
-          NEXT_PUBLIC_SERVER_URL: ${{ secrets.NEXT_PUBLIC_SERVER_URL }}
+          NEXT_PUBLIC_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_SERVER_ENDPOINT_FOR_E2E }}
           NEXT_PUBLIC_WS_URL: ${{ secrets.NEXT_PUBLIC_WS_URL }}
           NEXT_PUBLIC_CHAIN_TYPE: ${{ secrets.NEXT_PUBLIC_CHAIN_TYPE }}
 
-      - name: Upload screenshots
-        uses: actions/upload-artifact@master
+      - uses: actions/upload-artifact@v3
+        if: failure()
         with:
-          name: screenshots
+          name: cypress-screenshots
           path: cypress/screenshots
-          if-no-files-found: ignore
 
-      - name: Upload videos
-        uses: actions/upload-artifact@master
+      - uses: actions/upload-artifact@v3
+        if: always()
         with:
-          name: videos
+          name: cypress-videos
           path: cypress/videos
 
       - name: Upload Codecov
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CODECOV_TOKEN }}

components/AccountOverview/index.tsx

@@ -162,13 +162,17 @@ export const fetchDeployAddress = (variables: { eth_hash: string }) =>
     .request<{ transaction: { from_account: Pick<GraphQLSchema.Account, 'eth_address'> } }>(deployAddrQuery, variables)
     .then(data => data.transaction.from_account.eth_address)
 
+type SourcifyStatusResponse = {
+  sourcify_check_by_addresses: [{ address: string; chain_ids: string[]; status: string }]
+}
+
 export const fetchSourcifyStatus = (address: string) =>
-  client.request<{ sourcify_check_by_addresses: { status: string | null } }>(checkSourcify, { address }).then(data => {
+  client.request<SourcifyStatusResponse>(checkSourcify, { address }).then(data => {
     return data.sourcify_check_by_addresses[0].status
   })
 
 const overviewPlaceHolderCount = (account: AccountOverviewProps['account']) => {
-  switch (account.type) {
+  switch (account?.type) {
     case GraphQLSchema.AccountType.EthUser:
       return 0
     case GraphQLSchema.AccountType.PolyjuiceCreator:
@@ -199,7 +203,7 @@ const overviewPlaceHolderCount = (account: AccountOverviewProps['account']) => {
 const AccountOverview: React.FC<AccountOverviewProps & { refetch: () => Promise<any> }> = ({
   account,
   balance,
-  deployerAddr,
+  deployerAddr = '',
   isBalanceLoading,
   isOverviewLoading,
   refetch,
@@ -231,6 +235,38 @@ const AccountOverview: React.FC<AccountOverviewProps & { refetch: () => Promise<
     )
   }
 
+  const infoList = [
+    {
+      field: t(`ckbBalance`),
+      content: isBalanceLoading ? (
+        <Skeleton animation="wave" />
+      ) : (
+        <span className={styles.balance}>
+          <Amount amount={balance || '0'} udt={PCKB_UDT_INFO} showSymbol />
+        </span>
+      ),
+    },
+    {
+      field: t(`txCount`),
+      content: isOverviewLoading ? (
+        <Skeleton animation="wave" />
+      ) : (
+        new BigNumber(Math.max(account.nonce ?? 0, account.transaction_count ?? 0)).toFormat()
+      ),
+    },
+  ]
+
+  overviewPlaceHolderCount(account) &&
+    infoList.push({
+      field: '',
+      content: (
+        <div
+          data-role="placeholder"
+          style={{ height: `calc(${3.5 * overviewPlaceHolderCount(account)!}rem - 2rem)` }}
+        ></div>
+      ),
+    })
+
   return (
     <div className={styles.container} data-account-type={account.type}>
       {account.type === GraphQLSchema.AccountType.MetaContract ? (
@@ -243,9 +279,9 @@ const AccountOverview: React.FC<AccountOverviewProps & { refetch: () => Promise<
       {account.type === GraphQLSchema.AccountType.PolyjuiceContract ? (
         <SmartContract
           deployer={deployerAddr}
-          deployTxHash={account.smart_contract?.deployment_tx_hash}
+          deployTxHash={account.smart_contract?.deployment_tx_hash!}
           udt={account.udt}
-          address={account.eth_address}
+          address={account.eth_address || ''}
           isVerified={!!account.smart_contract?.contract_source_code}
           refetch={refetch}
           isLoading={isOverviewLoading}
@@ -259,41 +295,7 @@ const AccountOverview: React.FC<AccountOverviewProps & { refetch: () => Promise<
       ) : null}
       {account.type === GraphQLSchema.AccountType.Unknown ? <UnknownAccount nonce={account.nonce} /> : null}
 
-      <InfoList
-        title={t('overview')}
-        list={[
-          {
-            field: t(`ckbBalance`),
-            content: isBalanceLoading ? (
-              <Skeleton animation="wave" />
-            ) : (
-              <span className={styles.balance}>
-                <Amount amount={balance || '0'} udt={PCKB_UDT_INFO} showSymbol />
-              </span>
-            ),
-          },
-          {
-            field: t(`txCount`),
-            content: isOverviewLoading ? (
-              <Skeleton animation="wave" />
-            ) : (
-              new BigNumber(Math.max(account.nonce ?? 0, account.transaction_count ?? 0)).toFormat()
-            ),
-          },
-          overviewPlaceHolderCount(account)
-            ? {
-                field: '',
-                content: (
-                  <div
-                    data-role="placeholder"
-                    style={{ height: `calc(${3.5 * overviewPlaceHolderCount(account)}rem - 2rem)` }}
-                  ></div>
-                ),
-              }
-            : null,
-          // ...overviewPlaceHolderFields,
-        ]}
-      />
+      <InfoList title={t('overview')} list={infoList} />
     </div>
   )
 }

components/Alert/index.tsx

@@ -1,8 +1,9 @@
-import { AlertProps, SnackbarProps, Snackbar, Alert as MuiAlert } from '@mui/material'
+import { AlertProps, SnackbarProps, Snackbar, Alert as MuiAlert, AlertColor } 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'
+import { useEffect, useState } from 'react'
 
 const StyledSnackbar = styled((props: SnackbarProps) => <Snackbar {...props} />)(({ theme }) => ({
   '&.MuiSnackbar-root': {
@@ -70,6 +71,17 @@ const Alert: React.FC<SnackbarProps & { content: string; type: 'error' | 'succes
   type,
   ...rest
 }) => {
+  const [internalState, setInternalState] = useState<{ content: string; type: AlertColor }>()
+
+  useEffect(() => {
+    if (type) {
+      setInternalState(prev => ({ ...prev, type }))
+    }
+    if (content) {
+      setInternalState(prev => ({ ...prev, content }))
+    }
+  }, [type, content])
+
   return (
     <StyledSnackbar
       anchorOrigin={{
@@ -82,11 +94,11 @@ const Alert: React.FC<SnackbarProps & { content: string; type: 'error' | 'succes
     >
       <div>
         <StyledAlert
-          severity={type}
+          severity={internalState?.type}
           variant="filled"
           iconMapping={{ error: <CancelIcon />, success: <CheckCircleIcon />, warning: <ErrorIcon /> }}
         >
-          {content}
+          {internalState?.content}
         </StyledAlert>
       </div>
     </StyledSnackbar>

components/BaseAmount.tsx

@@ -0,0 +1,22 @@
+import BigNumber from 'bignumber.js'
+
+const BaseAmount: React.FC<{ amount: string; udt: { decimal: number; symbol: string }; showSymbol?: boolean }> = ({
+  amount,
+  udt: { decimal, symbol },
+  showSymbol = false,
+}) => {
+  const a = new BigNumber(amount ?? 0).dividedBy(10 ** decimal).toFormat()
+  const [rInt, rFrac] = a.split('.')
+  const unit = symbol?.split('.')[0] ?? ''
+  return (
+    <b style={{ whiteSpace: 'nowrap', fontWeight: 500 }}>
+      <span>{rInt}</span>
+      {rFrac ? <span style={{ color: 'var(--amount-frac-color)' }}>{`.${rFrac}`}</span> : null}
+      {showSymbol ? ` ${unit}` : null}
+    </b>
+  )
+}
+
+BaseAmount.displayName = 'Amount'
+
+export default BaseAmount