fix(neuron-ui): handle overflow on recent activities

Author: Keith-CY

packages/neuron-ui/src/components/History/hooks.ts

@@ -1,17 +1,7 @@
 import { useState, useEffect } from 'react'
 import { updateTransactionList } from 'states/stateProvider/actionCreators/transactions'
 import { queryParsers } from 'utils/parser'
-
-const backToTop = () => {
-  const container = document.querySelector('main') as HTMLElement
-  if (container) {
-    container.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start',
-      inline: 'nearest',
-    })
-  }
-}
+import { backToTop } from 'utils/animations'
 
 export const useSearch = (search: string = '', walletID: string = '', dispatch: React.Dispatch<any>) => {
   const [keywords, setKeywords] = useState('')

packages/neuron-ui/src/components/Overview/index.tsx

@@ -29,6 +29,7 @@ import { showTransactionDetails, showErrorMessage } from 'services/remote'
 
 import { localNumberFormatter, shannonToCKBFormatter, uniformTimeFormatter as timeFormatter } from 'utils/formatters'
 import { PAGE_SIZE, Routes, CONFIRMATION_THRESHOLD } from 'utils/const'
+import { backToTop } from 'utils/animations'
 
 const TITLE_FONT_SIZE = 'xxLarge'
 export type ActivityItem = State.Transaction & { confirmations: string; typeLabel: string }
@@ -68,7 +69,7 @@ const ActivityList = ({
   onRenderRow?: IRenderFunction<IDetailsRowProps>
   [index: string]: any
 }>) => (
-  <Stack>
+  <Stack verticalFill>
     <DetailsList
       isHeaderVisible={false}
       layoutMode={DetailsListLayoutMode.justified}
@@ -81,6 +82,8 @@ const ActivityList = ({
       }}
       styles={{
         root: {
+          overflow: 'auto',
+          height: '100%',
           backgroundColor: 'transparent',
         },
         contentWrapper: {
@@ -121,6 +124,15 @@ const Overview = ({
   const blockchainInfoRef = useRef<HTMLDivElement>(null)
   const minerInfoRef = useRef<HTMLDivElement>(null)
 
+  useEffect(() => {
+    if (id) {
+      const activityListContainer = document.querySelector('.ms-DetailsList>div') as HTMLElement
+      if (activityListContainer) {
+        backToTop(activityListContainer)
+      }
+    }
+  }, [id])
+
   useEffect(() => {
     updateTransactionList({
       pageNo: 1,
@@ -281,10 +293,15 @@ const Overview = ({
         if (item.blockNumber !== undefined) {
           const confirmationCount = 1 + Math.max(+syncedBlockNumber, +tipBlockNumber) - +item.blockNumber
           typeLabel = genTypeLabel(item.type, confirmationCount)
-          confirmations =
-            confirmationCount > 1
-              ? `(${t('overview.confirmations', { confirmationCount: localNumberFormatter(confirmationCount) })})`
-              : `(${t('overview.confirmation', { confirmationCount: localNumberFormatter(confirmationCount) })})`
+          if (confirmationCount === 1) {
+            confirmations = `(${t('overview.confirmation', {
+              confirmationCount: localNumberFormatter(confirmationCount),
+            })})`
+          } else if (confirmationCount > 1) {
+            confirmations = `(${t('overview.confirmations', {
+              confirmationCount: localNumberFormatter(confirmationCount),
+            })})`
+          }
         }
         return {
           ...item,

packages/neuron-ui/src/utils/animations.ts

@@ -0,0 +1,14 @@
+export const backToTop = (elm?: HTMLElement) => {
+  const container = elm || (document.querySelector('main > div') as HTMLElement)
+  if (container) {
+    container.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+      inline: 'nearest',
+    })
+  }
+}
+
+export default {
+  backToTop,
+}