Merge pull request #846 from Magickbase/develop

.github/workflows/test.e2e.yml

@@ -12,7 +12,7 @@ on:
 
 jobs:
   e2e_tests:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -31,7 +31,7 @@ jobs:
         run: npx cypress info
 
       - name: Cypress run
-        uses: cypress-io/[email protected].2
+        uses: cypress-io/[email protected].4
         with:
           install: false
           build: npm run build

components/AccountOverview/index.tsx

@@ -265,7 +265,7 @@ const AccountOverview: React.FC<AccountOverviewProps & { refetch: () => Promise<
 }) => {
   const [t] = useTranslation(['account', 'common'])
 
-  if (!account) {
+  if (isOverviewLoading) {
     return (
       <div className={styles.container}>
         <InfoList

components/CommonERCTransferlist/index.tsx

@@ -77,6 +77,7 @@ const getTransferListQuery = (type: TransferlistType) => gql`
         token_id
         token_ids
         token_contract_address_hash
+        amount
       }
       metadata {
         total_count

components/TxList/index.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'next-i18next'
 import { useRouter } from 'next/router'
 import NextLink from 'next/link'
@@ -9,6 +10,7 @@ import Address from 'components/TruncatedAddress'
 import Pagination from 'components/SimplePagination'
 import TransferDirection from 'components/TransferDirection'
 import FilterMenu from 'components/FilterMenu'
+import AgeFilterMenu from 'components/FilterMenu/AgeFilterMenu'
 import RoundedAmount from 'components/RoundedAmount'
 import Tooltip from 'components/Tooltip'
 import NoDataIcon from 'assets/icons/no-data.svg'
@@ -32,32 +34,44 @@ export type TxListProps = {
     metadata: GraphQLSchema.PageMetadata
   }
   viewer?: string
+  blockNumber?: number
 }
 
 const txListQuery = gql`
-  query (
-    $address: HashAddress
-    $script_hash: HashFull
+  query txListQuery(
+    $address_from: HashAddress
+    $address_to: HashAddress
+    $from_script_hash: HashFull
+    $to_script_hash: HashFull
     $before: String
     $after: String
     $limit: Int
     $start_block_number: Int
     $end_block_number: Int
     $status: Status
+    $age_range_start: DateTime
+    $age_range_end: DateTime
+    $method_id: String
+    $method_name: String
+    $combine_from_to: Boolean
   ) {
     transactions(
       input: {
-        from_eth_address: $address
-        to_eth_address: $address
-        from_script_hash: $script_hash
-        to_script_hash: $script_hash
+        from_script_hash: $from_script_hash
+        to_script_hash: $to_script_hash
         before: $before
         after: $after
         limit: $limit
         start_block_number: $start_block_number
         end_block_number: $end_block_number
-        combine_from_to: true
+        combine_from_to: $combine_from_to
         status: $status
+        from_eth_address: $address_from
+        to_eth_address: $address_to
+        age_range_start: $age_range_start
+        age_range_end: $age_range_end
+        method_id: $method_id
+        method_name: $method_name
       }
     ) {
       entries {
@@ -106,12 +120,20 @@ interface Filter {
   start_block_number?: number | null
   end_block_number?: number | null
   status?: Status
+  address_from: string
+  address_to: string
+  age_range_start: string
+  age_range_end: string
+  method_id: string
+  method_name: string
+  combine_from_to: boolean
 }
 interface EthAccountTxListVariables extends Nullable<Filter> {
   address?: string | null
 }
 interface GwAccountTxListVariables extends Nullable<Filter> {
-  script_hash?: string | null
+  from_script_hash?: string | null
+  to_script_hash?: string | null
 }
 interface BlockTxListVariables extends Nullable<Filter> {}
 type Variables = Filter | EthAccountTxListVariables | GwAccountTxListVariables | BlockTxListVariables
@@ -122,13 +144,23 @@ export const fetchTxList = ({ status = 'ON_CHAINED', ...variables }: Variables)
     .then(data => data.transactions)
     .catch(() => ({ entries: [], metadata: { before: null, after: null, total_count: 0 } }))
 
-const FILTER_KEYS = ['block_from', 'block_to']
+const FILTER_KEYS = [
+  'block_from',
+  'block_to',
+  'method_id',
+  'method_name',
+  'address_from',
+  'address_to',
+  'age_range_start',
+  'age_range_end',
+]
 
 const TxList: React.FC<TxListProps & { maxCount?: string; pageSize?: number }> = ({
   transactions: { entries, metadata },
   maxCount,
   pageSize,
   viewer,
+  blockNumber,
 }) => {
   const [t, { language }] = useTranslation('list')
   const { query } = useRouter()
@@ -141,16 +173,36 @@ const TxList: React.FC<TxListProps & { maxCount?: string; pageSize?: number }> =
         <thead>
           <tr>
             <th>{t('txHash')}</th>
-            <th>{t('method')}</th>
             <th>
-              <div style={{ display: 'flex', alignItems: 'center' }}>
+              <div className={styles.methodHeader}>
+                {t('method')}
+                <FilterMenu filterKeys={[FILTER_KEYS[2], FILTER_KEYS[3]]} />
+              </div>
+            </th>
+            <th>
+              <div className={styles.blockHeader}>
                 {t('block')}
-                <FilterMenu filterKeys={FILTER_KEYS} />
+                <FilterMenu filterKeys={[FILTER_KEYS[0], FILTER_KEYS[1]]} />
+              </div>
+            </th>
+            <th>
+              <div className={styles.ageHeader}>
+                {t('age')}
+                <AgeFilterMenu filterKeys={[FILTER_KEYS[6], FILTER_KEYS[7]]} />
+              </div>
+            </th>
+            <th>
+              <div className={styles.fromHeader}>
+                {t('from')}
+                <FilterMenu filterKeys={[FILTER_KEYS[4]]} />
+              </div>
+            </th>
+            <th>
+              <div className={styles.toHeader}>
+                {t('to')}
+                <FilterMenu filterKeys={[FILTER_KEYS[5]]} />
               </div>
             </th>
-            <th>{t('age')}</th>
-            <th>{t('from')}</th>
-            <th>{t('to')}</th>
             <th className={styles.direction}></th>
             <th>{`${t('value')} (${PCKB_UDT_INFO.symbol})`}</th>
           </tr>

components/TxList/styles.module.scss

@@ -7,6 +7,19 @@
       text-align: right;
     }
   }
+  th {
+    .methodHeader,
+    .ageHeader,
+    .blockHeader,
+    .fromHeader,
+    .toHeader {
+      display: flex;
+      align-items: center;
+      svg {
+        margin-left: 0.25rem;
+      }
+    }
+  }
   &[data-is-filter-unnecessary='true'] {
     th {
       svg {

cypress/integration/block/index.spec.ts

@@ -186,15 +186,15 @@ context('Block Page', () => {
         .first()
         .should('have.text', 'Txn Hash')
         .next()
-        .should('have.text', 'Method')
+        .should('contain.text', 'Method')
         .next()
         .should('contain.text', 'Block')
         .next()
-        .should('have.text', 'Age')
+        .should('contain.text', 'Age')
         .next()
-        .should('have.text', 'From')
+        .should('contain.text', 'From')
         .next()
-        .should('have.text', 'To')
+        .should('contain.text', 'To')
         .next()
         .next()
         .should('contain.text', 'Value (pCKB)')

cypress/integration/search/index.spec.ts

@@ -131,12 +131,12 @@ context('Search', () => {
         })
     })
 
-    it('should redirect to tokens page when keyword is not a number', () => {
+    it('should redirect to search tokens result page when keyword is not a number', () => {
       const UNKNOWN_STRING = 'unknown'
       cy.get(`${ROOT_SELECTOR} input`).type(UNKNOWN_STRING)
       cy.get(ROOT_SELECTOR).type('{enter}')
-      cy.url({ timeout: REDIRECT_TIMEOUT }).should('contain', `/tokens/native`)
-      cy.location('search').should('eq', `?name=${UNKNOWN_STRING}&search=${UNKNOWN_STRING}`)
+      cy.url({ timeout: REDIRECT_TIMEOUT }).should('contain', `/search-result-tokens`)
+      cy.location('search').should('eq', `?search=${UNKNOWN_STRING}`)
     })
 
     it('404', () => {

cypress/integration/txs/index.spec.ts

@@ -85,7 +85,12 @@ context('Transactions List Pages Common Features', () => {
           cy.get('label[for="block_from_filter"]').click()
           cy.get('input[id="block_from_filter"]').should('be.visible').type(latestBlockNumber)
           cy.get('input[id="block_to_filter"]').should('be.visible').type(latestBlockNumber)
-          cy.get('button[type="submit"]').should('be.visible').click()
+          cy.get('input[id="block_to_filter"]')
+            .parent()
+            .siblings()
+            .find('button[type="submit"]')
+            .should('be.visible')
+            .click()
           waitForLoading()
           cy.get(`table tbody`).children().should('have.length.at.least', 1)
           cy.get('table tbody tr:nth-child(1) td:nth-child(3) a').should('have.text', latestBlockNumber)
@@ -101,11 +106,11 @@ context('Transactions List Pages Common Features', () => {
     it('should have a list with required information', () => {
       waitForLoading()
       cy.get(`${HEAD_ROOT_SELECTOR} th:nth-child(1)`).should('have.text', 'Txn Hash')
-      cy.get(`${HEAD_ROOT_SELECTOR} th:nth-child(2)`).should('have.text', 'Method')
+      cy.get(`${HEAD_ROOT_SELECTOR} th:nth-child(2)`).should('contain.text', 'Method')
       cy.get(`${HEAD_ROOT_SELECTOR} th:nth-child(3)`).should('contain.text', 'Block')
-      cy.get(`${HEAD_ROOT_SELECTOR} th:nth-child(4)`).should('have.text', 'Age')
-      cy.get(`${HEAD_ROOT_SELECTOR} th:nth-child(5)`).should('have.text', 'From')
-      cy.get(`${HEAD_ROOT_SELECTOR} th:nth-child(6)`).should('have.text', 'To')
+      cy.get(`${HEAD_ROOT_SELECTOR} th:nth-child(4)`).should('contain.text', 'Age')
+      cy.get(`${HEAD_ROOT_SELECTOR} th:nth-child(5)`).should('contain.text', 'From')
+      cy.get(`${HEAD_ROOT_SELECTOR} th:nth-child(6)`).should('contain.text', 'To')
       cy.get(`${HEAD_ROOT_SELECTOR} th:nth-child(8)`).should('have.text', 'Value (pCKB)')
       cy.get(`${BODY_ROOT_SELECTOR}`).should('have.length', 30)
       cy.get(`${BODY_ROOT_SELECTOR}:nth-child(1)`)

cypress/integration/txs/pendingTxs.spec.ts

@@ -1,10 +1,10 @@
 /// <reference types="cypress" />
 
-/*
- * skip for now, because pending transaction list is randomly empty
- */
-context.skip('Pending Transactions List Page', () => {
-  before(() => cy.visit('/en-US/txs?status=pending'))
+context('Pending Transactions List Page', () => {
+  before(() => {
+    cy.visit('/en-US/txs?status=pending')
+    cy.skipWhen(cy.contains("There're no matching entries") !== null)
+  })
 
   it('should have a subtitle', () => {
     cy.get('h5+div p')

cypress/support/commands.ts

@@ -23,3 +23,16 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+declare namespace Cypress {
+  interface Chainable<Subject = any> {
+    skipWhen(expression: boolean): Chainable<any>
+  }
+}
+
+// command for skipping tests
+Cypress.Commands.add('skipWhen', function (expression) {
+  if (expression) {
+    this.skip()
+  }
+})

cypress/support/e2e.ts

@@ -16,7 +16,7 @@
 import '@cypress/code-coverage/support'
 
 // Import commands.js using ES2015 syntax:
-// import './commands'
+import './commands'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')