Skip to content

Commit

Permalink
feat(suite): solana all tx stats
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomasklim
tomasklim committed Dec 28, 2024
1 parent a128a78 commit 490d1af
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 125 deletions.
6 changes: 1 addition & 5 deletions packages/suite/src/views/wallet/transactions/Transactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,13 +72,9 @@ export const Transactions = () => {
}

if (accountTransactions.length > 0 || transactionsIsLoading) {
const networksWithoutTxSummary = ['ripple', 'solana'];

return (
<Layout selectedAccount={selectedAccount}>
{!networksWithoutTxSummary.includes(account.networkType) && (
<TransactionSummary account={account} />
)}
<TransactionSummary account={account} />
<TradeBox account={account} />
<TransactionList
account={account}
Expand Down
12 changes: 3 additions & 9 deletions packages/suite/src/views/wallet/transactions/components/InfoCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,12 @@ import { ReactNode } from 'react';

import styled from 'styled-components';

import { variables, Card, SkeletonRectangle } from '@trezor/components';
import { variables, Card, SkeletonRectangle, Column } from '@trezor/components';
import { BigNumber } from '@trezor/utils/src/bigNumber';

import { HiddenPlaceholder, FormattedCryptoAmount, Sign } from 'src/components/suite';
import { Account } from 'src/types/wallet';

const InfoCardContent = styled.div`
display: flex;
width: 100%;
flex-direction: column;
`;

const Title = styled.div`
font-size: ${variables.FONT_SIZE.TINY};
font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD};
Expand Down Expand Up @@ -72,7 +66,7 @@ export const InfoCard = (props: InfoCardProps) => {

return (
<Card minHeight={100}>
<InfoCardContent>
<Column>
<Title>{props.title}</Title>
{props.isLoading && <SkeletonRectangle width="160px" />}

Expand Down Expand Up @@ -104,7 +98,7 @@ export const InfoCard = (props: InfoCardProps) => {
)}
</>
)}
</InfoCardContent>
</Column>
</Card>
);
};
71 changes: 37 additions & 34 deletions packages/suite/src/views/wallet/transactions/components/SummaryCards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { InfoCard } from './InfoCard';

const InfoCardsWrapper = styled.div`
display: grid;
margin-top: 20px;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-gap: 20px;
Expand Down Expand Up @@ -46,7 +45,7 @@ interface SummaryCardProps {
data: AggregatedAccountHistory[];
dataInterval: [number, number];
localCurrency: string;
symbol: Account['symbol'];
account: Account;
isLoading?: boolean;
className?: string;
}
Expand All @@ -67,14 +66,14 @@ export const SummaryCards = ({
data,
dataInterval,
localCurrency,
symbol,
account,
isLoading,
className,
}: SummaryCardProps) => {
const { FiatAmountFormatter } = useFormatters();
const [fromTimestamp, toTimestamp] = dataInterval;
// aggregate values from shown graph data
const numOfTransactions = data.reduce((acc, d) => (acc += d.txs), 0);
const numOfTransactions = data.reduce((acc, d) => (acc += d.txs), 0) || account.history.total;
const totalSentAmount = data.reduce((acc, d) => acc.plus(d.sent), new BigNumber(0));
const totalReceivedAmount = data.reduce((acc, d) => acc.plus(d.received), new BigNumber(0));
const totalSentFiatMap: { [k: string]: string | undefined } = data.reduce(
Expand Down Expand Up @@ -109,36 +108,40 @@ export const SummaryCards = ({
) : null
}
/>
<InfoCard
title={<Translation id="TR_INCOMING" />}
value={totalReceivedAmount.toFixed()}
secondaryValue={
totalReceivedFiatMap[localCurrency] ? (
<FiatAmountFormatter
currency={localCurrency}
value={totalReceivedFiatMap[localCurrency]!}
/>
) : undefined
}
symbol={symbol}
isLoading={isLoading}
isNumeric
/>
<InfoCard
title={<Translation id="TR_OUTGOING" />}
value={totalSentAmount.negated().toFixed()}
secondaryValue={
totalSentFiatMap[localCurrency] ? (
<FiatAmountFormatter
currency={localCurrency}
value={totalSentFiatMap[localCurrency]!}
/>
) : undefined
}
symbol={symbol}
isLoading={isLoading}
isNumeric
/>
{account.networkType !== 'solana' && (
<>
<InfoCard
title={<Translation id="TR_INCOMING" />}
value={totalReceivedAmount.toFixed()}
secondaryValue={
totalReceivedFiatMap[localCurrency] ? (
<FiatAmountFormatter
currency={localCurrency}
value={totalReceivedFiatMap[localCurrency]!}
/>
) : undefined
}
symbol={account.symbol}
isLoading={isLoading}
isNumeric
/>
<InfoCard
title={<Translation id="TR_OUTGOING" />}
value={totalSentAmount.negated().toFixed()}
secondaryValue={
totalSentFiatMap[localCurrency] ? (
<FiatAmountFormatter
currency={localCurrency}
value={totalSentFiatMap[localCurrency]!}
/>
) : undefined
}
symbol={account.symbol}
isLoading={isLoading}
isNumeric
/>
</>
)}
</InfoCardsWrapper>
);
};
141 changes: 64 additions & 77 deletions packages/suite/src/views/wallet/transactions/components/TransactionSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import styled from 'styled-components';
import { getUnixTime } from 'date-fns';

import { calcTicks, calcTicksFromData } from '@suite-common/suite-utils';
import { variables, Button, Card } from '@trezor/components';
import { variables, Button, Card, Row, Column } from '@trezor/components';

import { Account } from 'src/types/wallet';
import {
Expand All @@ -19,31 +19,6 @@ import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer';
import { TransactionSummaryDropdown } from './TransactionSummaryDropdown';
import { SummaryCards } from './SummaryCards';

const Wrapper = styled.div`
display: flex;
flex-direction: column;
`;

const ContentWrapper = styled.div`
display: flex;
width: 100%;
flex-direction: column;
`;

const GraphWrapper = styled.div`
flex-direction: row;
display: flex;
height: 320px;
overflow: visible;
`;

const Actions = styled.div`
display: flex;
margin-bottom: 20px;
justify-content: space-between;
align-items: center;
`;

const ErrorMessage = styled.div`
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -73,6 +48,10 @@ export const TransactionSummary = ({ account }: TransactionSummaryProps) => {
? aggregateBalanceHistory(intervalGraphData, selectedRange.groupBy, 'account')
: [];

if (account.networkType === 'ripple') {
return null;
}

const error = intervalGraphData[0]?.error ?? false;
const isLoading = intervalGraphData[0]?.isLoading ?? false;

Expand Down Expand Up @@ -105,56 +84,64 @@ export const TransactionSummary = ({ account }: TransactionSummaryProps) => {
const onSelectedRange = () => dispatch(updateGraphData([account], { newAccountsOnly: true }));

return (
<Wrapper>
<Actions>
<GraphRangeSelector onSelectedRange={onSelectedRange} align="bottom-left" />
<TransactionSummaryDropdown />
</Actions>
<ContentWrapper>
{error ? (
<Card>
<GraphWrapper>
<ErrorMessage>
<Translation id="TR_COULD_NOT_RETRIEVE_DATA" />
<Button onClick={onRefresh} icon="refresh" variant="tertiary">
<Translation id="TR_RETRY" />
</Button>
</ErrorMessage>
</GraphWrapper>
</Card>
) : (
<HiddenPlaceholder enforceIntensity={8}>
<Card>
<GraphWrapper>
<TransactionsGraph
hideToolbar
variant="one-asset"
xTicks={xTicks}
account={account}
isLoading={isLoading}
data={data}
minMaxValues={minMaxValues}
localCurrency={localCurrency}
onRefresh={onRefresh}
selectedRange={selectedRange}
receivedValueFn={data => data.received}
sentValueFn={data => data.sent}
balanceValueFn={data => data.balance}
/>
</GraphWrapper>
</Card>
</HiddenPlaceholder>
)}

<SummaryCards
selectedRange={selectedRange}
dataInterval={dataInterval}
data={data}
localCurrency={localCurrency}
symbol={account.symbol}
isLoading={isLoading}
/>
</ContentWrapper>
</Wrapper>
<Column alignItems="stretch" gap={20}>
{account.networkType !== 'solana' && (
<>
<Row justifyContent="space-between" alignItems="center">
<GraphRangeSelector onSelectedRange={onSelectedRange} align="bottom-left" />
<TransactionSummaryDropdown />
</Row>

<Column alignItems="stretch">
{error ? (
<Card>
<Row height={320} overflow="visible" alignItems="stretch">
<ErrorMessage>
<Translation id="TR_COULD_NOT_RETRIEVE_DATA" />
<Button
onClick={onRefresh}
icon="refresh"
variant="tertiary"
>
<Translation id="TR_RETRY" />
</Button>
</ErrorMessage>
</Row>
</Card>
) : (
<HiddenPlaceholder enforceIntensity={8}>
<Card>
<Row height={320} overflow="visible" alignItems="stretch">
<TransactionsGraph
hideToolbar
variant="one-asset"
xTicks={xTicks}
account={account}
isLoading={isLoading}
data={data}
minMaxValues={minMaxValues}
localCurrency={localCurrency}
onRefresh={onRefresh}
selectedRange={selectedRange}
receivedValueFn={data => data.received}
sentValueFn={data => data.sent}
balanceValueFn={data => data.balance}
/>
</Row>
</Card>
</HiddenPlaceholder>
)}
</Column>
</>
)}
<SummaryCards
selectedRange={selectedRange}
dataInterval={dataInterval}
data={data}
localCurrency={localCurrency}
account={account}
isLoading={isLoading}
/>
</Column>
);
};

0 comments on commit 490d1af

Please sign in to comment.