LaconicNetwork/dydx-v4-web
6
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

transfers history table

Browse Source
This commit is contained in:
Aleka Cheung
2023-08-23 19:37:14 -04:00
parent 0dd2ecb6d2
commit 2d0a944097
11 changed files with 230 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/constants/abacus.ts
+2
View File
@@ -112,6 +112,8 @@ export type SubaccountFill = Abacus.exchange.dydx.abacus.output.SubaccountFill;
export type SubaccountFundingPayment = Abacus.exchange.dydx.abacus.output.SubaccountFundingPayment;
export type SubaccountFundingPayments =
Abacus.exchange.dydx.abacus.output.SubaccountFundingPayment[];
export type SubaccountTransfer = Abacus.exchange.dydx.abacus.output.SubaccountTransfer;
export type SubaccountTransfers = Abacus.exchange.dydx.abacus.output.SubaccountTransfer[];
// ------ Historical PnL ------ //
export type SubAccountHistoricalPNL = Abacus.exchange.dydx.abacus.output.SubaccountHistoricalPNL;
src/constants/localization/app.ts
+2
View File
@@ -177,6 +177,7 @@ export const APP_STRING_KEYS = {
RECEIVE: 'GENERAL.RECEIVE',
RECENT: 'GENERAL.RECENT',
RECENT_TRADES_SHORT: 'GENERAL.RECENT_TRADES_SHORT',
RECIPIENT: 'GENERAL.RECIPIENT',
REFERRAL_CODE: 'GENERAL.REFERRAL_CODE',
REFERRALS: 'GENERAL.REFERRALS',
REFERRER_PERCENT_OFF: 'GENERAL.REFERRER_PERCENT_OFF',
@@ -188,6 +189,7 @@ export const APP_STRING_KEYS = {
SELECT_NETWORK: 'GENERAL.SELECT_NETWORK',
SELL: 'GENERAL.SELL',
SEND: 'GENERAL.SEND',
SENDER: 'GENERAL.SENDER',
SHARE: 'GENERAL.SHARE',
SHORT_POSITION_SHORT: 'GENERAL.SHORT_POSITION_SHORT',
SIDE: 'GENERAL.SIDE',
src/lib/abacus/stateNotification.ts
+6
View File
@@ -19,6 +19,7 @@ import {
setFundingPayments,
setHistoricalPnl,
setSubaccount,
setTransfers,
setWallet,
} from '@/state/account';
@@ -102,6 +103,11 @@ class AbacusStateNotifier implements AbacusStateNotificationProtocol {
dispatch(setFundingPayments(fundingPayments));
}
if (changes.has(Changes.transfers)) {
const transfers = updatedState.subaccountTransfers(subaccountId)?.toArray() || [];
dispatch(setTransfers(transfers));
}
if (changes.has(Changes.historicalPnl)) {
const historicalPnl =
updatedState.subaccountHistoricalPnl(subaccountId)?.toArray() || [];
src/localization/en/app.json
+2
View File
@@ -182,6 +182,7 @@
"RECEIVE": "Receive",
"RECENT": "Recent",
"RECENT_TRADES_SHORT": "Trades",
"RECIPIENT": "Recipient",
"REFERRAL_CODE": "Referral Code",
"REFERRALS": "Referrals",
"REFERRER_PERCENT_OFF": "{DISCOUNT}% off",
@@ -193,6 +194,7 @@
"SELECT_NETWORK": "Select Network",
"SELL": "Sell",
"SEND": "Send",
"SENDER": "Sender",
"SHARE": "Share",
"SHORT_POSITION_SHORT": "Short",
"SIDE": "Side",
src/pages/portfolio/History.tsx
+6 -5
View File
@@ -28,13 +28,14 @@ export const History = () => {
label: <h3>{stringGetter({ key: STRING_KEYS.TRADES })}</h3>,
href: HistoryRoute.Trades,
},
{
value: HistoryRoute.Transfers,
label: <h3>{stringGetter({ key: STRING_KEYS.TRANSFERS })}</h3>,
href: HistoryRoute.Transfers,
tag: 'USDC',
},
// TODO - TRCL-1693 -
// {
// value: HistoryRoute.Transfers,
// label: <h3>{stringGetter({ key: STRING_KEYS.TRANSFERS })}</h3>,
// href: HistoryRoute.Transfers,
// },
// {
// value: HistoryRoute.Payments,
// label: <h3>{stringGetter({ key: STRING_KEYS.PAYMENTS })}</h3>,
// href: HistoryRoute.Payments,
src/pages/portfolio/Portfolio.tsx
+5 -3
View File
@@ -9,6 +9,7 @@ import { useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks';
import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
import { FundingPaymentsTable } from '@/views/tables/FundingPaymentsTable';
import { TransferHistoryTable } from '@/views/tables/TransferHistoryTable';
import { Icon, IconName } from '@/components/Icon';
import { NavigationMenu } from '@/components/NavigationMenu';
import { WithSidebar } from '@/components/WithSidebar';
@@ -61,7 +62,10 @@ export default () => {
/>
}
/>
<Route path={HistoryRoute.Transfers} element={<div />} />
<Route
path={HistoryRoute.Transfers}
element={<TransferHistoryTable withOuterBorder={isNotTablet} />}
/>
<Route
path={HistoryRoute.Payments}
element={<FundingPaymentsTable withOuterBorder={isNotTablet} />}
@@ -118,8 +122,6 @@ export default () => {
},
],
},
// TODO(aforaleka) Add back subitems when there are clearer designs
// or when transfers and payments are ready
]}
/>
)
src/pages/portfolio/PortfolioNavMobile.tsx
+6 -6
View File
@@ -40,12 +40,12 @@ export const PortfolioNavMobile = () => {
label: stringGetter({ key: STRING_KEYS.TRADES }),
description: stringGetter({ key: STRING_KEYS.TRADES_DESCRIPTION }),
},
// TODO: TRCL-1693 - re-enable when Payments and Transfers are ready
// {
// value: `${AppRoute.Portfolio}/${PortfolioRoute.History}/${HistoryRoute.Transfers}`,
// label: stringGetter({ key: STRING_KEYS.TRANSFERS }),
// description: stringGetter({ key: STRING_KEYS.TRANSFERS_DESCRIPTION }),
// },
{
value: `${AppRoute.Portfolio}/${PortfolioRoute.History}/${HistoryRoute.Transfers}`,
label: stringGetter({ key: STRING_KEYS.TRANSFERS }),
description: stringGetter({ key: STRING_KEYS.TRANSFERS_DESCRIPTION }),
},
// TODO: TRCL-1693 - re-enable when Payments are ready
// {
// value: `${AppRoute.Portfolio}/${PortfolioRoute.History}/${HistoryRoute.Payments}`,
// label: stringGetter({ key: STRING_KEYS.PAYMENTS }),
src/state/account.ts
+7
View File
@@ -9,6 +9,7 @@ import type {
SubaccountFundingPayments,
Wallet,
SubaccountOrder,
SubaccountTransfers,
HistoricalPnlPeriods,
SubAccountHistoricalPNLs,
} from '@/constants/abacus';
@@ -22,6 +23,7 @@ import { getLocalStorage } from '@/lib/localStorage';
export type AccountState = {
fills?: SubaccountFills;
fundingPayments?: SubaccountFundingPayments;
transfers?: SubaccountTransfers;
clearedOrderIds?: string[];
uncommittedOrderClientIds?: number[];
hasUnseenFillUpdates: boolean;
@@ -38,6 +40,7 @@ export type AccountState = {
const initialState: AccountState = {
fills: undefined,
fundingPayments: undefined,
transfers: undefined,
clearedOrderIds: undefined,
uncommittedOrderClientIds: undefined,
hasUnseenFillUpdates: false,
@@ -81,6 +84,9 @@ export const accountSlice = createSlice({
setFundingPayments: (state, action: PayloadAction<any>) => {
state.fundingPayments = action.payload;
},
setTransfers: (state, action: PayloadAction<any>) => {
state.transfers = action.payload;
},
clearOrder: (state, action: PayloadAction<string>) => ({
...state,
clearedOrderIds: [...(state.clearedOrderIds || []), action.payload],
@@ -148,6 +154,7 @@ export const accountSlice = createSlice({
export const {
setFills,
setFundingPayments,
setTransfers,
clearOrder,
setOnboardingGuard,
setOnboardingState,
src/state/accountSelectors.ts
+6
View File
@@ -193,6 +193,12 @@ export const getCurrentMarketFills = createSelector(
!currentMarketId ? [] : marketFills[currentMarketId]
);
/**
* @param state
* @returns list of transfers for the currently connected subaccount
*/
export const getSubaccountTransfers = (state: RootState) => state.account?.transfers;
/**
* @param state
* @returns list of funding payments for the currently connected subaccount
src/styles/tradeViewMixins.ts
+4
View File
@@ -18,5 +18,9 @@ export const tradeViewMixins: Record<
tbody {
font: var(--font-small-book);
}
thead tr {
box-shadow: none;
}
`,
};
src/views/tables/TransferHistoryTable.tsx
+184
View File
@@ -0,0 +1,184 @@
import styled, { type AnyStyledComponent, css } from 'styled-components';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import type { ColumnSize } from '@react-types/table';
import { type SubaccountTransfer } from '@/constants/abacus';
import { STRING_KEYS, StringGetterFunction } from '@/constants/localization';
import { useBreakpoints, useStringGetter } from '@/hooks';
import { layoutMixins } from '@/styles/layoutMixins';
import { tradeViewMixins } from '@/styles/tradeViewMixins';
import { Icon } from '@/components/Icon';
import { Output, OutputType } from '@/components/Output';
import { Table, TableCell, TableColumnHeader, type ColumnDef } from '@/components/Table';
import { getSubaccountTransfers } from '@/state/accountSelectors';
import { truncateAddress } from '@/lib/wallet';
import { Button } from '@/components/Button';
import { ButtonAction } from '@/constants/buttons';
import { openDialog } from '@/state/dialogs';
import { DialogTypes } from '@/constants/dialogs';
import { Link } from '@/components/Link';
import { calculateCanAccountTrade } from '@/state/accountCalculators';
import { OnboardingTriggerButton } from '../dialogs/OnboardingTriggerButton';
const MOBILE_TRANSFERS_PER_PAGE = 50;
export enum TransferHistoryTableColumnKey {
Time = 'Time',
Action = 'Action',
SenderRecipient = 'Sender-Recipient',
Amount = 'Amount',
TxHash = 'TxHash',
}
const getTransferHistoryTableColumnDef = ({
key,
stringGetter,
width,
}: {
key: TransferHistoryTableColumnKey;
isTablet?: boolean;
stringGetter: StringGetterFunction;
width?: ColumnSize;
}): ColumnDef<SubaccountTransfer> => ({
width,
...(
{
[TransferHistoryTableColumnKey.Time]: {
columnKey: TransferHistoryTableColumnKey.Time,
getCellValue: (row) => row.updatedAtMilliseconds,
label: stringGetter({ key: STRING_KEYS.TIME }),
renderCell: ({ updatedAtMilliseconds }) => (
<Styled.TimeOutput
type={OutputType.RelativeTime}
relativeTimeFormatOptions={{ format: 'singleCharacter' }}
value={updatedAtMilliseconds}
/>
),
},
[TransferHistoryTableColumnKey.Action]: {
columnKey: TransferHistoryTableColumnKey.Action,
getCellValue: (row) => row.resources.typeStringKey,
label: stringGetter({ key: STRING_KEYS.ACTION }),
renderCell: ({ resources }) =>
resources.typeStringKey && stringGetter({ key: resources.typeStringKey }),
},
[TransferHistoryTableColumnKey.SenderRecipient]: {
columnKey: TransferHistoryTableColumnKey.SenderRecipient,
getCellValue: (row) => `${row.fromAddress}-${row.toAddress}`,
label: (
<TableColumnHeader>
<span>{stringGetter({ key: STRING_KEYS.SENDER })}</span>
<span>{stringGetter({ key: STRING_KEYS.RECIPIENT })}</span>
</TableColumnHeader>
),
renderCell: ({ fromAddress, toAddress }) => (
<TableCell stacked>
<span>{fromAddress ? truncateAddress(fromAddress) : '-'}</span>
<span>{toAddress ? truncateAddress(toAddress) : '-'}</span>
</TableCell>
),
},
[TransferHistoryTableColumnKey.Amount]: {
columnKey: TransferHistoryTableColumnKey.Amount,
getCellValue: (row) => row.amount,
label: stringGetter({ key: STRING_KEYS.AMOUNT }),
renderCell: ({ amount }) => <Output type={OutputType.Fiat} value={amount} />,
},
[TransferHistoryTableColumnKey.TxHash]: {
columnKey: TransferHistoryTableColumnKey.TxHash,
getCellValue: (row) => row.transactionHash,
label: stringGetter({ key: STRING_KEYS.TRANSACTION }),
renderCell: ({ transactionHash }) =>
transactionHash ? <Styled.TxHash withIcon>{transactionHash}</Styled.TxHash> : '-',
},
} as Record<TransferHistoryTableColumnKey, ColumnDef<SubaccountTransfer>>
)[key],
});
type ElementProps = {
columnKeys?: TransferHistoryTableColumnKey[];
columnWidths?: Partial<Record<TransferHistoryTableColumnKey, ColumnSize>>;
};
type StyleProps = {
withOuterBorder?: boolean;
withInnerBorders?: boolean;
};
export const TransferHistoryTable = ({
columnKeys = Object.values(TransferHistoryTableColumnKey),
columnWidths,
withOuterBorder,
withInnerBorders = true,
}: ElementProps & StyleProps) => {
const stringGetter = useStringGetter();
const dispatch = useDispatch();
const { isMobile, isTablet } = useBreakpoints();
const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
const transfers = useSelector(getSubaccountTransfers, shallowEqual) ?? [];
return (
<Styled.Table
label="Transfers"
data={isMobile ? transfers.slice(0, MOBILE_TRANSFERS_PER_PAGE) : transfers}
getRowKey={(row: SubaccountTransfer) => row.id}
columns={columnKeys.map((key: TransferHistoryTableColumnKey) =>
getTransferHistoryTableColumnDef({
key,
isTablet,
stringGetter,
width: columnWidths?.[key],
})
)}
slotEmpty={
<>
{stringGetter({ key: STRING_KEYS.TRANSFERS_EMPTY_STATE })}
{canAccountTrade ? (
<Button
action={ButtonAction.Primary}
onClick={() => dispatch(openDialog({ type: DialogTypes.Deposit }))}
>
{stringGetter({ key: STRING_KEYS.DEPOSIT_FUNDS })}
</Button>
) : (
<OnboardingTriggerButton />
)}
</>
}
selectionBehavior="replace"
withOuterBorder={withOuterBorder}
withInnerBorders={withInnerBorders}
withScrollSnapColumns
withScrollSnapRows
/>
);
};
const Styled: Record<string, AnyStyledComponent> = {};
Styled.Table = styled(Table)`
${tradeViewMixins.horizontalTable}
`;
Styled.InlineRow = styled.div`
${layoutMixins.inlineRow}
`;
Styled.Icon = styled(Icon)`
font-size: 3em;
`;
Styled.TimeOutput = styled(Output)`
color: var(--color-text-0);
`;
Styled.TxHash = styled(Link)`
justify-content: flex-end;
`;