diff --git a/src/renderer/components/poolActionsHistory/PoolActionsHistory.stories.tsx b/src/renderer/components/poolActionsHistory/PoolActionsHistory.stories.tsx index 3ae050c42..1207ccb6b 100644 --- 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 index 271db2640..a351ccb27 100644 --- a/src/renderer/components/poolActionsHistory/PoolActionsHistory.tsx +++ b/src/renderer/components/poolActionsHistory/PoolActionsHistory.tsx @@ -5,6 +5,7 @@ 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' @@ -12,6 +13,7 @@ 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) => { const { + network, headerContent: HeaderContent, historyPageRD, currentPage, @@ -49,7 +52,8 @@ export const PoolActionsHistory: React.FC = (props) => { historyPageRD, prevHistoryPage, openExplorerTxUrl, - changePaginationHandler + changePaginationHandler, + network } return ( diff --git a/src/renderer/components/poolActionsHistory/PoolActionsHistoryFilter.tsx b/src/renderer/components/poolActionsHistory/PoolActionsHistoryFilter.tsx index c4cb03bdc..4e1d41b3e 100644 --- a/src/renderer/components/poolActionsHistory/PoolActionsHistoryFilter.tsx +++ b/src/renderer/components/poolActionsHistory/PoolActionsHistoryFilter.tsx @@ -47,7 +47,7 @@ export const PoolActionsHistoryFilter: React.FC = ({ {FP.pipe( availableFilters, A.map((filter) => { - const content = filter === 'ALL' ? allItemContent : + const content = filter === 'ALL' ? allItemContent : return ( onFilterChanged(filter)}> {content} diff --git a/src/renderer/components/poolActionsHistory/PoolActionsHistoryList.tsx b/src/renderer/components/poolActionsHistory/PoolActionsHistoryList.tsx index 642b35120..0a9e4261e 100644 --- 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 @@ -23,6 +26,7 @@ type Props = { } export const PoolActionsHistoryList: React.FC = ({ + network, changePaginationHandler, historyPageRD, prevHistoryPage = O.none, @@ -30,33 +34,45 @@ export const PoolActionsHistoryList: React.FC = ({ 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) => ( - goToTx(id)}> - - - )), - O.getOrElse(() => <>) - )} - - ) + const renderListItem = useCallback( + (action: Action, index: number, goToTx: OpenExplorerTxUrl) => { + const date = H.renderDate(action.date) - return ( - - } extra={titleExtra}> - - - - ) - }, []) + const titleExtra = ( + <> + {date} + {FP.pipe( + action, + H.getTxId, + O.map((id) => ( + goToTx(id)}> + + + )), + O.getOrElse(() => <>) + )} + + ) + + return ( + + } extra={titleExtra}> + + + + ) + }, + [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 index 81cbfe024..e9f77f73c 100644 --- 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 @@ -27,6 +30,7 @@ export type Props = { } export const PoolActionsHistoryTable: React.FC = ({ + network, openExplorerTxUrl, changePaginationHandler, historyPageRD, @@ -35,16 +39,16 @@ export const PoolActionsHistoryTable: React.FC = ({ }) => { const intl = useIntl() - const renderActionTypeColumn = useCallback((_, { type }: Action) => , []) + const isDesktopView = Grid.useBreakpoint()?.lg ?? false const actionTypeColumn: ColumnType = useMemo( () => ({ key: 'txType', align: 'left', width: 180, - render: renderActionTypeColumn + render: (_, { type }: Action) => }), - [renderActionTypeColumn] + [isDesktopView] ) const renderDateColumn = useCallback((_, { date }: Action) => H.renderDate(date), []) @@ -90,9 +94,11 @@ export const PoolActionsHistoryTable: React.FC = ({ outgos={H.getValues(action.out)} fees={action.fees} slip={action.slip} + network={network} + isDesktopView={isDesktopView} /> ), - [] + [isDesktopView, network] ) const detailColumn: ColumnType = useMemo( diff --git a/src/renderer/components/uielements/containerWithDelimeter/ContainerWithDelimeter.styles.ts b/src/renderer/components/uielements/containerWithDelimeter/ContainerWithDelimeter.styles.ts deleted file mode 100644 index 85253d38b..000000000 --- a/src/renderer/components/uielements/containerWithDelimeter/ContainerWithDelimeter.styles.ts +++ /dev/null @@ -1,31 +0,0 @@ -import styled from 'styled-components' -import { palette } from 'styled-theme' - -const SIDE_MARGIN = 10 - -export const ContainerWithDelimeter = styled.div` - display: inline-block; - position: relative; - margin: 0 ${SIDE_MARGIN * 2}px 0 0; - - &:after { - content: ' '; - height: 100%; - border-right: ${palette('gray', 2)} 1px solid; - position: absolute; - top: 0; - right: -${SIDE_MARGIN}px; - } - - &:first-child { - margin-left: 0; - } - - &:last-of-type { - margin-right: 0; - &:after { - content: none; - display: none; - } - } -` diff --git a/src/renderer/components/uielements/containerWithDelimeter/index.ts b/src/renderer/components/uielements/containerWithDelimeter/index.ts deleted file mode 100644 index 86937e539..000000000 --- a/src/renderer/components/uielements/containerWithDelimeter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ContainerWithDelimeter.styles' diff --git a/src/renderer/components/uielements/txDetail/TxDetail.stories.tsx b/src/renderer/components/uielements/txDetail/TxDetail.stories.tsx index daa02bd38..0fbf40bc0 100644 --- 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 ( 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 { diff --git a/src/renderer/components/uielements/txDetail/TxDetail.styles.ts b/src/renderer/components/uielements/txDetail/TxDetail.styles.ts index 697bc615e..1e171c054 100644 --- a/src/renderer/components/uielements/txDetail/TxDetail.styles.ts +++ b/src/renderer/components/uielements/txDetail/TxDetail.styles.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import { palette } from 'styled-theme' import { media } from '../../../helpers/styleHelper' -import { ContainerWithDelimeter } from '../containerWithDelimeter' +import { AssetIcon as AssetIconUI } from '../assets/assetIcon' export const Container = styled.div` display: flex; @@ -10,7 +10,9 @@ export const Container = styled.div` align-items: flex-start; ` -export const ValuesContainer = styled.span` +export const ValuesContainer = styled.div` + display: flex; + flex-wrap: wrap; text-align: left; ${media.md` margin: 0 15px 0 0; @@ -21,7 +23,36 @@ export const ValuesContainer = styled.span` } ` -export const InOutValeContainer = styled(ContainerWithDelimeter)` +const CWD_SIDE_MARGIN = 10 +export const ContainerWithDelimeter = styled.div` + display: inline-block; + position: relative; + margin: 0 ${CWD_SIDE_MARGIN * 2}px 0 0; + + &:after { + content: ' '; + height: 100%; + border-right: ${palette('gray', 2)} 1px solid; + position: absolute; + top: 0; + right: -${CWD_SIDE_MARGIN}px; + } + + &:first-child { + margin-left: 0; + } + + &:last-of-type { + margin-right: 0; + &:after { + content: none; + display: none; + } + } +` + +export const InOutContainer = styled(ContainerWithDelimeter)` + display: flex; font-size: 12px; text-transform: uppercase; padding: 3px 5px; @@ -33,6 +64,7 @@ export const InOutValeContainer = styled(ContainerWithDelimeter)` &:first-child { border-top-left-radius: 1.7rem; border-bottom-left-radius: 1.7rem; + align-self: flex-start; } &:last-child { @@ -41,15 +73,31 @@ export const InOutValeContainer = styled(ContainerWithDelimeter)` } ${media.md` - font-size: 16px; - padding: 5px 20px; + font-size: 14px; + padding: 5px 10px; &:after { content: ' '; } `} ` -export const InOutValue = styled(ContainerWithDelimeter)`` +export const InOutValueContainer = styled.div` + display: flex; + align-items: center; +` + +export const InOutValue = styled(ContainerWithDelimeter)` + white-space: nowrap; + padding: 0 5px 0 10px; + + ${media.lg` + padding: 0; + `} +` + +export const AssetIcon = styled(AssetIconUI)` + margin: 0 5px 0 10px; +` export const InOutText = styled.span` font-size: 14px; @@ -58,7 +106,8 @@ export const InOutText = styled.span` margin-right: 5px; &:first-child { - margin-right: 10px; + margin-right: 5px; + margin-left: 5px; } &:last-child { margin-left: 10px; @@ -66,7 +115,8 @@ export const InOutText = styled.span` ${media.md` &:first-child { - margin-right: 15px; + margin-right: 10px; + margin-left: 5px; } &:last-child { margin-left: 15px; diff --git a/src/renderer/components/uielements/txDetail/TxDetail.tsx b/src/renderer/components/uielements/txDetail/TxDetail.tsx index f5679b1b2..1d547d05a 100644 --- a/src/renderer/components/uielements/txDetail/TxDetail.tsx +++ b/src/renderer/components/uielements/txDetail/TxDetail.tsx @@ -7,36 +7,49 @@ import * as FP from 'fp-ts/function' import * as NEA from 'fp-ts/NonEmptyArray' import * as O from 'fp-ts/Option' -import { ContainerWithDelimeter } from '../containerWithDelimeter' import { Fees } from '../fees' import * as Styled from './TxDetail.styles' import { ActionProps } from './types' -export const TxDetail: React.FC = ({ className, outgos, incomes, fees = [], slip }) => { - const incomeFormatted = useMemo( +export const TxDetail: React.FC = ({ + className, + outgos, + incomes, + fees = [], + slip, + network, + isDesktopView +}) => { + const renderIncomes = useMemo( () => FP.pipe( incomes, A.mapWithIndex((index, { asset, amount }) => ( - - {formatAssetAmountCurrency({ trimZeros: true, amount: baseToAsset(amount), asset })} - + + {isDesktopView && } + + {formatAssetAmountCurrency({ trimZeros: true, amount: baseToAsset(amount), asset })} + + )) ), - [incomes] + [incomes, network, isDesktopView] ) - const outgoFormatted = useMemo( + const renderOutgos = useMemo( () => FP.pipe( outgos, A.mapWithIndex((index, { asset, amount }) => ( - - {formatAssetAmountCurrency({ trimZeros: true, amount: baseToAsset(amount), asset })} - + + {isDesktopView && } + + {formatAssetAmountCurrency({ trimZeros: true, amount: baseToAsset(amount), asset })} + + )) ), - [outgos] + [outgos, network, isDesktopView] ) const feesComponent = useMemo( @@ -46,9 +59,9 @@ export const TxDetail: React.FC = ({ className, outgos, incomes, fe NEA.fromArray, O.map(RD.success), O.map((fees) => ( - + - + )), O.getOrElse(() => <>) ), @@ -58,19 +71,19 @@ export const TxDetail: React.FC = ({ className, outgos, incomes, fe return ( - + in - {incomeFormatted} - - - {outgoFormatted} + {renderIncomes} + + + {renderOutgos} out - + {feesComponent} - {slip && slip: {slip}%} + {slip && slip: {slip}%} ) diff --git a/src/renderer/components/uielements/txDetail/types.ts b/src/renderer/components/uielements/txDetail/types.ts index 7628a8f07..1be6e4a39 100644 --- a/src/renderer/components/uielements/txDetail/types.ts +++ b/src/renderer/components/uielements/txDetail/types.ts @@ -1,9 +1,11 @@ import React from 'react' +import { Network } from '../../../../shared/api/types' import { TxType } from '../../../services/midgard/types' import { AssetWithAmount } from '../../../types/asgardex' export type ActionProps = { + network: Network incomes: AssetWithAmount[] outgos: AssetWithAmount[] fees?: AssetWithAmount[] @@ -14,4 +16,5 @@ export type ActionProps = { className?: string date: React.ReactElement type: TxType + isDesktopView: boolean } diff --git a/src/renderer/components/uielements/txType/TxType.stories.tsx b/src/renderer/components/uielements/txType/TxType.stories.tsx index 9a71beeb9..056dd8ac2 100644 --- a/src/renderer/components/uielements/txType/TxType.stories.tsx +++ b/src/renderer/components/uielements/txType/TxType.stories.tsx @@ -27,8 +27,8 @@ const mapType = (type: InputType): MidgardTxType => { } } -export const Default: Story<{ type: InputType }> = ({ type }) => { - return +export const Default: Story<{ type: InputType; showTypeIcon: boolean }> = ({ type, showTypeIcon }) => { + return } const argTypes = { @@ -37,6 +37,12 @@ const argTypes = { type: 'select', options: types } + }, + showTypeIcon: { + control: { + type: 'boolean' + }, + defaultValue: true } } diff --git a/src/renderer/components/uielements/txType/TxType.tsx b/src/renderer/components/uielements/txType/TxType.tsx index 56fcde542..32b25a7b6 100644 --- a/src/renderer/components/uielements/txType/TxType.tsx +++ b/src/renderer/components/uielements/txType/TxType.tsx @@ -13,6 +13,7 @@ import * as Styled from './TxType.styles' type Props = { type: MidgardTxType + showTypeIcon: boolean className?: string } @@ -35,12 +36,12 @@ const getIcon = (type: MidgardTxType) => { } } -export const TxType: React.FC = ({ type, className }) => { +export const TxType: React.FC = ({ type, showTypeIcon, className }) => { const intl = useIntl() return ( - {getIcon(type)} + {showTypeIcon && {getIcon(type)}} {getTxTypeI18n(type, intl)} ) diff --git a/src/renderer/views/pool/PoolHistoryView.tsx b/src/renderer/views/pool/PoolHistoryView.tsx index f0332eed9..644e9f191 100644 --- a/src/renderer/views/pool/PoolHistoryView.tsx +++ b/src/renderer/views/pool/PoolHistoryView.tsx @@ -72,6 +72,7 @@ export const PoolHistoryView: React.FC = ({ className, poolAsset, history return ( = ({ className, reloadHistory }) return ( <>