[WalletHistory] Add link to viewblock

src/renderer/components/poolActionsHistory/PoolActionsHistory.helper.test.ts

@@ -3,7 +3,7 @@ import * as O from 'fp-ts/Option'
 
 import { eqAssetsWithAmount } from '../../helpers/fp/eq'
 import { Action, Tx } from '../../services/midgard/types'
-import { getTxId, getValues, getRowKey } from './PoolActionsHistory.helper'
+import { getTxId, getValues, getRowKey, historyFilterToViewblockFilter } from './PoolActionsHistory.helper'
 
 const defaultPoolAction: Action = {
   date: new Date(0),
@@ -187,4 +187,28 @@ describe('PoolActionsHistory.helper', () => {
       expect(getRowKey(defaultPoolAction, 1)).toEqual(`${new Date(0)}-SWAP-1`)
     })
   })
+
+  describe('historyFilterToViewblockFilter', () => {
+    it('SWAP', () => {
+      expect(historyFilterToViewblockFilter('SWAP')).toEqual('swap')
+    })
+    it('DEPOSIT', () => {
+      expect(historyFilterToViewblockFilter('DEPOSIT')).toEqual('addLiquidity')
+    })
+    it('DONATE', () => {
+      expect(historyFilterToViewblockFilter('DONATE')).toEqual('donate')
+    })
+    it('REFUND', () => {
+      expect(historyFilterToViewblockFilter('REFUND')).toEqual('all')
+    })
+    it('SWITCH', () => {
+      expect(historyFilterToViewblockFilter('SWITCH')).toEqual('switch')
+    })
+    it('ALL', () => {
+      expect(historyFilterToViewblockFilter('ALL')).toEqual('all')
+    })
+    it('UNKNOWN', () => {
+      expect(historyFilterToViewblockFilter('UNKNOWN')).toEqual('all')
+    })
+  })
 })

src/renderer/components/poolActionsHistory/PoolActionsHistory.helper.tsx

@@ -10,6 +10,7 @@ import { FormattedDate, FormattedTime } from 'react-intl'
 import { Action, Actions, ActionsPage, Tx } from '../../services/midgard/types'
 import { AssetWithAmount } from '../../types/asgardex'
 import * as Styled from './PoolActionsHistory.styles'
+import { Filter } from './types'
 
 export const getTxId = (action: Action): O.Option<TxHash> => {
   return FP.pipe(
@@ -46,3 +47,23 @@ export const getRowKey: GetRowKey<Action> = (action, index) =>
   )
 
 export const emptyData: ActionsPage = { total: 0, actions: [] as Actions }
+
+export const historyFilterToViewblockFilter = (filter: Filter) => {
+  switch (filter) {
+    case 'DEPOSIT':
+      return 'addLiquidity'
+    case 'SWAP':
+      return 'swap'
+    case 'WITHDRAW':
+      return 'withdrawLiquidity'
+    case 'DONATE':
+      return 'donate'
+    case 'SWITCH':
+      return 'switch'
+    // 'ALL' and others will be matched to viewblock's 'all'
+    case 'ALL':
+    case 'REFUND': // does not exist at viewblock
+    case 'UNKNOWN':
+      return 'all'
+  }
+}

src/renderer/components/poolActionsHistory/PoolActionsHistory.stories.tsx

@@ -156,9 +156,8 @@ export const History: Story<{ dataStatus: RDStatus }> = ({ dataStatus }) => {
       onWalletAddressChanged={(address: WalletAddress) => {
         console.log('selected address', address)
       }}
-      openViewblockUrl={() => {
-        console.log('open viewblock')
-        return Promise.resolve(true)
+      onClickAddressIcon={() => {
+        console.log('on click address icon')
       }}
     />
   )

src/renderer/components/poolActionsHistory/PoolActionsHistory.styles.ts

@@ -2,8 +2,6 @@ import styled from 'styled-components'
 import { palette } from 'styled-theme'
 
 import { media } from '../../helpers/styleHelper'
-import { ExternalLinkIcon as ExternalLinkIconUI } from '../uielements/common/Common.styles'
-import { Headline as HeadlineUI } from '../uielements/headline'
 
 export const DateContainer = styled.span`
   color: ${palette('text', 0)};
@@ -24,39 +22,3 @@ export const Header = styled.div`
     flex-direction: row;
 `}
 `
-
-export const HeaderFilterContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-
-  ${media.md`
-    flex-direction: row;
-`}
-`
-
-export const HeaderLinkContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: cemter;
-  padding-top: 20px;
-  ${media.md`
-  padding-top: 0;
-  flex-grow: 1;
-  justify-content: right;
-`}
-`
-
-export const ExplorerLinkIcon = styled(ExternalLinkIconUI)`
-  margin-left: 10px;
-  svg {
-    color: inherit;
-  }
-`
-export const Headline = styled(HeadlineUI)`
-  /* TODO (@asgdx-team) Will be enabled with #1811 */
-  display: none;
-  width: auto;
-`

src/renderer/components/poolActionsHistory/PoolActionsHistoryFilter.styles.ts

@@ -23,11 +23,10 @@ export const Menu = styled(A.Menu)`
 
 export const FilterButton = styled(Button).attrs({ typevalue: 'outline' })`
   & .anticon-caret-down {
-    margin: 0 !important;
     transition: transform 0.3s;
     transform: translateY(0px);
-    width: 20px;
-    height: 20px;
+    width: 14px;
+    height: 14px;
     position: absolute !important;
     right: 7px;
 

src/renderer/components/poolActionsHistory/WalletPoolActionsHistoryHeader.styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+import { media } from '../../helpers/styleHelper'
+import { ExternalLinkIcon as ExternalLinkIconUI } from '../uielements/common/Common.styles'
+import { Headline as HeadlineUI } from '../uielements/headline'
+
+export const FilterContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+
+  ${media.md`
+    flex-direction: row;
+`}
+`
+
+export const LinkContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: cemter;
+  padding-top: 20px;
+  ${media.md`
+  padding-top: 0;
+  flex-grow: 1;
+  justify-content: right;
+`}
+`
+
+export const ExplorerLinkIcon = styled(ExternalLinkIconUI)`
+  margin-left: 10px;
+  svg {
+    color: inherit;
+  }
+`
+export const Headline = styled(HeadlineUI)`
+  width: auto;
+`

src/renderer/components/poolActionsHistory/WalletPoolActionsHistoryHeader.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 
+import * as FP from 'fp-ts/lib/function'
 import * as O from 'fp-ts/lib/Option'
 
 import { Network } from '../../../shared/api/types'
 import { WalletAddress, WalletAddresses } from '../../../shared/wallet/types'
 import { AccountAddressSelector } from '../AccountAddressSelector'
-import * as Styled from './PoolActionsHistory.styles'
 import { PoolActionsHistoryFilter } from './PoolActionsHistoryFilter'
 import { Filter } from './types'
+import * as Styled from './WalletPoolActionsHistoryHeader.styles'
 
 export type Props = {
   network: Network
@@ -17,7 +18,7 @@ export type Props = {
   currentFilter: Filter
   setFilter: (filter: Filter) => void
   onWalletAddressChanged: (address: WalletAddress) => void
-  openViewblockUrl: () => Promise<boolean>
+  onClickAddressIcon: FP.Lazy<void>
   disabled?: boolean
 }
 
@@ -29,14 +30,14 @@ export const WalletPoolActionsHistoryHeader: React.FC<Props> = (props) => {
     availableFilters,
     currentFilter,
     setFilter,
-    openViewblockUrl,
+    onClickAddressIcon,
     onWalletAddressChanged,
     disabled = false
   } = props
 
   return (
     <>
-      <Styled.HeaderFilterContainer>
+      <Styled.FilterContainer>
         <PoolActionsHistoryFilter
           availableFilters={availableFilters}
           currentFilter={currentFilter}
@@ -49,12 +50,12 @@ export const WalletPoolActionsHistoryHeader: React.FC<Props> = (props) => {
           selectedAddress={selectedAddress}
           onChangeAddress={onWalletAddressChanged}
         />
-      </Styled.HeaderFilterContainer>
-      <Styled.HeaderLinkContainer>
-        <Styled.Headline onClick={openViewblockUrl}>
+      </Styled.FilterContainer>
+      <Styled.LinkContainer>
+        <Styled.Headline onClick={onClickAddressIcon}>
           viewblock <Styled.ExplorerLinkIcon />
         </Styled.Headline>
-      </Styled.HeaderLinkContainer>
+      </Styled.LinkContainer>
     </>
   )
 }

src/renderer/hooks/useOpenAddressUrl.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { TxHash, XChainClient } from '@xchainjs/xchain-client'
+import { Address, XChainClient } from '@xchainjs/xchain-client'
 import { Chain } from '@xchainjs/xchain-util'
 import * as FP from 'fp-ts/function'
 import * as O from 'fp-ts/Option'
@@ -14,11 +14,13 @@ export const useOpenAddressUrl = (chain: Chain): OpenAddressUrl => {
   const [oClient] = useObservableState<O.Option<XChainClient>>(() => clientByChain$(chain), O.none)
 
   const openAddressUrl: OpenExplorerTxUrl = useCallback(
-    (txHash: TxHash) =>
+    (address: Address, params = '') =>
       FP.pipe(
         oClient,
         O.map(async (client) => {
-          const url = client.getExplorerAddressUrl(txHash)
+          let url = client.getExplorerAddressUrl(address)
+          // add optional params if set before
+          url = params ? `${url}&${params}` : url
           await window.apiUrl.openExternal(url)
           return true
         }),

src/renderer/services/clients/types.ts

@@ -45,7 +45,7 @@ export type WalletBalancesLD = LiveData<ApiError, WalletBalances>
 
 export type ExplorerUrl$ = Rx.Observable<O.Option<string>>
 export type OpenExplorerTxUrl = (txHash: string) => Promise<boolean>
-export type OpenAddressUrl = (address: Address) => Promise<boolean>
+export type OpenAddressUrl = (address: Address, params?: string) => Promise<boolean>
 export type AddressValidation = (address: Address) => boolean
 export type AddressValidationAsync = (address: Address) => Promise<boolean>
 

src/renderer/views/wallet/history/WalletHistoryView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useMemo, useCallback } from 'react'
 
 import * as RD from '@devexperts/remote-data-ts'
 import { THORChain } from '@xchainjs/xchain-util'
@@ -11,13 +11,15 @@ import * as RxOp from 'rxjs/operators'
 
 import { WalletAddress, WalletAddresses } from '../../../../shared/wallet/types'
 import { PoolActionsHistory } from '../../../components/poolActionsHistory'
+import { historyFilterToViewblockFilter } from '../../../components/poolActionsHistory/PoolActionsHistory.helper'
 import { Filter } from '../../../components/poolActionsHistory/types'
 import { WalletPoolActionsHistoryHeader } from '../../../components/poolActionsHistory/WalletPoolActionsHistoryHeader'
 import { useChainContext } from '../../../contexts/ChainContext'
 import { useWalletContext } from '../../../contexts/WalletContext'
 import { eqString } from '../../../helpers/fp/eq'
 import { ordWalletAddressByChain } from '../../../helpers/fp/ord'
 import { useNetwork } from '../../../hooks/useNetwork'
+import { useOpenAddressUrl } from '../../../hooks/useOpenAddressUrl'
 import { useOpenExplorerTxUrl } from '../../../hooks/useOpenExplorerTxUrl'
 import { ENABLED_CHAINS } from '../../../services/const'
 import { WalletHistoryActions } from './WalletHistoryView.types'
@@ -101,12 +103,19 @@ export const WalletHistoryView: React.FC<Props> = ({ className, historyActions }
     [addresses, requestParams]
   )
 
-  const openViewblockUrlHandler = useCallback(async () => {
-    // TODO (@asgdx-team): As part of #1811 - Get viewblock url using THORChain client
-    // const addressUrl = client.getExplorerAddressUrl(address)
-    // const addressUrl = url&txsType={type}
-    return true
-  }, [])
+  const openAddressUrl = useOpenAddressUrl(THORChain)
+
+  const openAddressUrlHandler = useCallback(() => {
+    FP.pipe(
+      oSelectedWalletAddress,
+      O.map(({ address }) => {
+        // add extra params for selected filter
+        const params = `txsType=${historyFilterToViewblockFilter(currentFilter)}`
+        openAddressUrl(address, params)
+        return true
+      })
+    )
+  }, [currentFilter, oSelectedWalletAddress, openAddressUrl])
 
   const headerContent = useMemo(
     () => (
@@ -118,7 +127,7 @@ export const WalletHistoryView: React.FC<Props> = ({ className, historyActions }
         currentFilter={currentFilter}
         setFilter={setFilter}
         onWalletAddressChanged={setAddress}
-        openViewblockUrl={openViewblockUrlHandler}
+        onClickAddressIcon={openAddressUrlHandler}
         disabled={!RD.isSuccess(historyPage)}
       />
     ),
@@ -128,7 +137,7 @@ export const WalletHistoryView: React.FC<Props> = ({ className, historyActions }
       historyPage,
       network,
       oSelectedWalletAddress,
-      openViewblockUrlHandler,
+      openAddressUrlHandler,
       setAddress,
       setFilter
     ]