Show asset icon in TxDetail (#1955)

- [x] in wallet history + pool details - [x] Update stories - [x] Move `src/renderer/components/uielements/containerWithDelimeter/*` into `TxDetails.styles` - [x] Hide asset icon in mobile view - [x] Hide action type in list view (mobile)
thorchain · Nov 25, 2021 · 3e7bf00 · 3e7bf00
1 parent b2a4549
commit 3e7bf00
Show file tree

Hide file tree

Showing 15 changed files with 180 additions and 99 deletions.
diff --git a/src/renderer/components/poolActionsHistory/PoolActionsHistory.stories.tsx b/src/renderer/components/poolActionsHistory/PoolActionsHistory.stories.tsx
@@ -172,6 +172,7 @@ export const History: Story<{ dataStatus: RDStatus }> = ({ dataStatus }) => {
       historyPageRD={res}
       changePaginationHandler={setCurrentPage}
       currentPage={currentPage}
+      network="testnet"
     />
   )
 }

diff --git a/src/renderer/components/poolActionsHistory/PoolActionsHistory.tsx b/src/renderer/components/poolActionsHistory/PoolActionsHistory.tsx
@@ -5,13 +5,15 @@ import { Grid } from 'antd'
 import * as FP from 'fp-ts/lib/function'
 import * as O from 'fp-ts/Option'
 
+import { Network } from '../../../shared/api/types'
 import { OpenExplorerTxUrl } from '../../services/clients'
 import { ActionsPage, ActionsPageRD } from '../../services/midgard/types'
 import * as Styled from './PoolActionsHistory.styles'
 import { PoolActionsHistoryList } from './PoolActionsHistoryList'
 import { PoolActionsHistoryTable, Props as PoolActionsHistoryTableProps } from './PoolActionsHistoryTable'
 
 type Props = {
+  network: Network
   headerContent?: React.ReactNode
   currentPage: number
   historyPageRD: ActionsPageRD
@@ -23,6 +25,7 @@ type Props = {
 
 export const PoolActionsHistory: React.FC<Props> = (props) => {
   const {
+    network,
     headerContent: HeaderContent,
     historyPageRD,
     currentPage,
@@ -49,7 +52,8 @@ export const PoolActionsHistory: React.FC<Props> = (props) => {
     historyPageRD,
     prevHistoryPage,
     openExplorerTxUrl,
-    changePaginationHandler
+    changePaginationHandler,
+    network
   }
 
   return (

diff --git a/src/renderer/components/poolActionsHistory/PoolActionsHistoryFilter.tsx b/src/renderer/components/poolActionsHistory/PoolActionsHistoryFilter.tsx
@@ -47,7 +47,7 @@ export const PoolActionsHistoryFilter: React.FC<Props> = ({
         {FP.pipe(
           availableFilters,
           A.map((filter) => {
-            const content = filter === 'ALL' ? allItemContent : <TxTypeUI type={filter} />
+            const content = filter === 'ALL' ? allItemContent : <TxTypeUI type={filter} showTypeIcon />
             return (
               <Menu.Item key={filter} onClick={() => onFilterChanged(filter)}>
                 <Styled.FilterItem>{content}</Styled.FilterItem>

diff --git a/src/renderer/components/poolActionsHistory/PoolActionsHistoryList.tsx b/src/renderer/components/poolActionsHistory/PoolActionsHistoryList.tsx
@@ -1,9 +1,11 @@
 import React, { useCallback } from 'react'
 
 import * as RD from '@devexperts/remote-data-ts'
+import { Grid } from 'antd'
 import * as FP from 'fp-ts/function'
 import * as O from 'fp-ts/Option'
 
+import { Network } from '../../../shared/api/types'
 import { OpenExplorerTxUrl } from '../../services/clients'
 import { Action, ActionsPage, ActionsPageRD } from '../../services/midgard/types'
 import { ErrorView } from '../shared/error'
@@ -14,6 +16,7 @@ import * as H from './PoolActionsHistory.helper'
 import * as Styled from './PoolActionsHistoryList.styles'
 
 type Props = {
+  network: Network
   currentPage: number
   historyPageRD: ActionsPageRD
   prevHistoryPage?: O.Option<ActionsPage>
@@ -23,40 +26,53 @@ type Props = {
 }
 
 export const PoolActionsHistoryList: React.FC<Props> = ({
+  network,
   changePaginationHandler,
   historyPageRD,
   prevHistoryPage = O.none,
   openExplorerTxUrl: goToTx,
   currentPage,
   className
 }) => {
-  const renderListItem = useCallback((action: Action, index: number, goToTx: OpenExplorerTxUrl) => {
-    const date = H.renderDate(action.date)
+  const isDesktopView = Grid.useBreakpoint()?.lg ?? false
 
-    const titleExtra = (
-      <>
-        {date}
-        {FP.pipe(
-          action,
-          H.getTxId,
-          O.map((id) => (
-            <Styled.GoToButton key="go" onClick={() => goToTx(id)}>
-              <Styled.InfoArrow />
-            </Styled.GoToButton>
-          )),
-          O.getOrElse(() => <></>)
-        )}
-      </>
-    )
+  const renderListItem = useCallback(
+    (action: Action, index: number, goToTx: OpenExplorerTxUrl) => {
+      const date = H.renderDate(action.date)
 
-    return (
-      <Styled.ListItem key={H.getRowKey(action, index)}>
-        <Styled.Card title={<Styled.TxType type={action.type} />} extra={titleExtra}>
-          <TxDetail type={action.type} date={date} incomes={H.getValues(action.in)} outgos={H.getValues(action.out)} />
-        </Styled.Card>
-      </Styled.ListItem>
-    )
-  }, [])
+      const titleExtra = (
+        <>
+          {date}
+          {FP.pipe(
+            action,
+            H.getTxId,
+            O.map((id) => (
+              <Styled.GoToButton key="go" onClick={() => goToTx(id)}>
+                <Styled.InfoArrow />
+              </Styled.GoToButton>
+            )),
+            O.getOrElse(() => <></>)
+          )}
+        </>
+      )
+
+      return (
+        <Styled.ListItem key={H.getRowKey(action, index)}>
+          <Styled.Card title={<Styled.TxType type={action.type} showTypeIcon={isDesktopView} />} extra={titleExtra}>
+            <TxDetail
+              type={action.type}
+              date={date}
+              incomes={H.getValues(action.in)}
+              outgos={H.getValues(action.out)}
+              network={network}
+              isDesktopView={isDesktopView}
+            />
+          </Styled.Card>
+        </Styled.ListItem>
+      )
+    },
+    [isDesktopView, network]
+  )
 
   const renderList = useCallback(
     ({ total, actions }: ActionsPage, loading = false) => {

diff --git a/src/renderer/components/poolActionsHistory/PoolActionsHistoryTable.tsx b/src/renderer/components/poolActionsHistory/PoolActionsHistoryTable.tsx
@@ -1,11 +1,13 @@
 import React, { useCallback, useMemo } from 'react'
 
 import * as RD from '@devexperts/remote-data-ts'
+import { Grid } from 'antd'
 import { ColumnsType, ColumnType } from 'antd/lib/table'
 import * as FP from 'fp-ts/function'
 import * as O from 'fp-ts/Option'
 import { useIntl } from 'react-intl'
 
+import { Network } from '../../../shared/api/types'
 import { OpenExplorerTxUrl } from '../../services/clients'
 import { ActionsPage, Action, ActionsPageRD } from '../../services/midgard/types'
 import { ApiError } from '../../services/wallet/types'
@@ -18,6 +20,7 @@ import * as H from './PoolActionsHistory.helper'
 import * as Styled from './PoolActionsHistoryTable.styles'
 
 export type Props = {
+  network: Network
   currentPage: number
   historyPageRD: ActionsPageRD
   prevHistoryPage?: O.Option<ActionsPage>
@@ -27,6 +30,7 @@ export type Props = {
 }
 
 export const PoolActionsHistoryTable: React.FC<Props> = ({
+  network,
   openExplorerTxUrl,
   changePaginationHandler,
   historyPageRD,
@@ -35,16 +39,16 @@ export const PoolActionsHistoryTable: React.FC<Props> = ({
 }) => {
   const intl = useIntl()
 
-  const renderActionTypeColumn = useCallback((_, { type }: Action) => <Styled.TxType type={type} />, [])
+  const isDesktopView = Grid.useBreakpoint()?.lg ?? false
 
   const actionTypeColumn: ColumnType<Action> = useMemo(
     () => ({
       key: 'txType',
       align: 'left',
       width: 180,
-      render: renderActionTypeColumn
+      render: (_, { type }: Action) => <Styled.TxType type={type} showTypeIcon={isDesktopView} />
     }),
-    [renderActionTypeColumn]
+    [isDesktopView]
   )
 
   const renderDateColumn = useCallback((_, { date }: Action) => H.renderDate(date), [])
@@ -90,9 +94,11 @@ export const PoolActionsHistoryTable: React.FC<Props> = ({
         outgos={H.getValues(action.out)}
         fees={action.fees}
         slip={action.slip}
+        network={network}
+        isDesktopView={isDesktopView}
       />
     ),
-    []
+    [isDesktopView, network]
   )
 
   const detailColumn: ColumnType<Action> = useMemo(

diff --git a/src/renderer/components/uielements/containerWithDelimeter/ContainerWithDelimeter.styles.ts b/src/renderer/components/uielements/containerWithDelimeter/ContainerWithDelimeter.styles.ts
diff --git a/src/renderer/components/uielements/containerWithDelimeter/index.ts b/src/renderer/components/uielements/containerWithDelimeter/index.ts
diff --git a/src/renderer/components/uielements/txDetail/TxDetail.stories.tsx b/src/renderer/components/uielements/txDetail/TxDetail.stories.tsx
@@ -37,6 +37,7 @@ export const Desktop: Story<{
   secondInAsset: string
   firstOutAsset: string
   secondOutAsset: string
+  isDesktopView: boolean
 }> = ({
   firstInValue,
   secondInValue,
@@ -45,10 +46,12 @@ export const Desktop: Story<{
   firstInAsset,
   secondInAsset,
   firstOutAsset,
-  secondOutAsset
+  secondOutAsset,
+  isDesktopView
 }) => {
   return (
     <TxDetail
+      network="mainnet"
       type={'SWAP'}
       date={<>12-12-3 1231</>}
       incomes={getValues(firstInAsset, secondInAsset, firstInValue, secondInValue)}
@@ -60,6 +63,7 @@ export const Desktop: Story<{
           amount: assetToBase(assetAmount(1))
         }
       ]}
+      isDesktopView={isDesktopView}
     />
   )
 }
@@ -104,9 +108,15 @@ const argTypes = {
       options: stringAssetsOrNone
     }
   },
-
   secondOutValue: {
     control: numberControlConfig
+  },
+  isDesktopView: {
+    name: 'isDesktopView',
+    control: {
+      type: 'boolean'
+    },
+    defaultValue: true
   }
 }
 
@@ -118,7 +128,8 @@ Desktop.args = {
   firstInAsset: stringAssetsOrNone[1],
   secondInAsset: stringAssetsOrNone[0],
   firstOutAsset: stringAssetsOrNone[2],
-  secondOutAsset: stringAssetsOrNone[0]
+  secondOutAsset: stringAssetsOrNone[0],
+  isDesktopView: true
 }
 
 export default {