diff --git a/packages/frontend/src/view/components/AssetWithLogo.tsx b/packages/frontend/src/view/components/AssetWithLogo.tsx
index bb6f6f0c8..7ff26ff40 100644
--- a/packages/frontend/src/view/components/AssetWithLogo.tsx
+++ b/packages/frontend/src/view/components/AssetWithLogo.tsx
@@ -18,7 +18,7 @@ export function AssetWithLogo({
symbolClassName,
}: AssetWithLogoProps) {
return (
-
+
{type === 'full' && (
diff --git a/packages/frontend/src/view/components/SectionHeading.tsx b/packages/frontend/src/view/components/SectionHeading.tsx
index a2272160d..114bbf55e 100644
--- a/packages/frontend/src/view/components/SectionHeading.tsx
+++ b/packages/frontend/src/view/components/SectionHeading.tsx
@@ -1,19 +1,32 @@
-import cx from 'classnames'
+import { default as classNames, default as cx } from 'classnames'
import React, { ReactNode } from 'react'
interface SectionHeadingProps {
title: ReactNode
description?: ReactNode
children?: ReactNode
+ className?: string
}
export function SectionHeading(props: SectionHeadingProps) {
return (
-
-
+
+
{props.title}
-
{props.description}
+ {props.description && (
+
{props.description}
+ )}
{props.children}
)
diff --git a/packages/frontend/src/view/components/table/Table.tsx b/packages/frontend/src/view/components/table/Table.tsx
index e8a4e7bba..058ed51f9 100644
--- a/packages/frontend/src/view/components/table/Table.tsx
+++ b/packages/frontend/src/view/components/table/Table.tsx
@@ -7,18 +7,18 @@ import { Column, Row } from './types'
interface TableProps {
columns: Column[]
rows: Row[]
- fullBackground?: boolean
alignLastColumnRight?: boolean
shortenOnMobile?: boolean
+ rowClassName?: string
}
export function Table(props: TableProps) {
const { alignLastColumnRight = true } = props
return (
{options.map((n) => (
diff --git a/packages/frontend/src/view/components/table/TableRow.tsx b/packages/frontend/src/view/components/table/TableRow.tsx
index 320c9a5ad..3100b2257 100644
--- a/packages/frontend/src/view/components/table/TableRow.tsx
+++ b/packages/frontend/src/view/components/table/TableRow.tsx
@@ -6,6 +6,7 @@ import { Column, Row } from './types'
interface TableRowProps extends Row {
i: number
columns: Column[]
+ className?: string
fullBackground?: boolean
shortenOnMobile?: boolean
}
@@ -14,11 +15,11 @@ export function TableRow(props: TableRowProps) {
return (
{props.cells.map((cell, col) => {
diff --git a/packages/frontend/src/view/components/table/TableWithPagination.tsx b/packages/frontend/src/view/components/table/TableWithPagination.tsx
index 5910c1f13..0a30c854e 100644
--- a/packages/frontend/src/view/components/table/TableWithPagination.tsx
+++ b/packages/frontend/src/view/components/table/TableWithPagination.tsx
@@ -2,6 +2,7 @@ import isNumber from 'lodash/isNumber'
import React, { ReactNode } from 'react'
import { formatInt } from '../../../utils/formatting/formatAmount'
+import { Card } from '../Card'
import { SectionHeading } from '../SectionHeading'
import { TableLimitSelect } from './TableLimitSelect'
import { TablePagination } from './TablePagination'
@@ -25,17 +26,19 @@ export function TableWithPagination(props: TableWithPaginationProps) {
: undefined
return (
- <>
-
-
+
+
+
+
+ {getDescription(
+ props.offset,
+ props.visible,
+ props.total,
+ props.entryShortNamePlural
+ )}
+
+
+
{props.children}
{props.visible === 0 && (
@@ -67,7 +70,7 @@ export function TableWithPagination(props: TableWithPaginationProps) {
)}
- >
+
)
}
diff --git a/packages/frontend/src/view/pages/state-update/components/StateUpdateBalanceChangesTable.tsx b/packages/frontend/src/view/pages/state-update/components/StateUpdateBalanceChangesTable.tsx
index ca9d25492..e7eabe41f 100644
--- a/packages/frontend/src/view/pages/state-update/components/StateUpdateBalanceChangesTable.tsx
+++ b/packages/frontend/src/view/pages/state-update/components/StateUpdateBalanceChangesTable.tsx
@@ -29,7 +29,7 @@ export function StateUpdateBalanceChangesTable(
return (
- entry.action === 'ESCAPE' ? (
-
- ) : entry.action === 'USE_COLLATERAL_ESCAPE' ? (
- use collateral escape
- ) : null
-
return (
Name },
{ header: 'Balance' },
@@ -79,23 +67,31 @@ export function UserAssetsTable(props: UserAssetsTableProps) {
(proof)
)}
,
- props.isMine &&
- (!props.isFrozen ? (
-
- ) : (
- escapeHatchElem(entry)
- )),
+ ...(props.isMine &&
+ entry.action !== 'NO_ACTION' &&
+ entry.action !== 'USE_COLLATERAL_ESCAPE'
+ ? [
+ ,
+ ]
+ : []),
+ ...(props.isMine && entry.action === 'USE_COLLATERAL_ESCAPE'
+ ? [
+
+ {getActionButtonLabel(entry.action)}
+ ,
+ ]
+ : []),
],
}
})}
@@ -103,17 +99,24 @@ export function UserAssetsTable(props: UserAssetsTableProps) {
)
}
-function getEscapeHatchLink(
- vaultOrPositionId: string,
- isUserRegistered: boolean
-) {
- if (!isUserRegistered) {
- return '/users/register'
+function getActionButtonLabel(action: UserAssetEntry['action']) {
+ switch (action) {
+ case 'WITHDRAW':
+ return 'Withdraw'
+ case 'CLOSE':
+ return 'Close'
+ case 'ESCAPE':
+ return 'Escape'
+ case 'USE_COLLATERAL_ESCAPE':
+ return 'Use collateral escape'
+ case 'NO_ACTION':
+ throw new Error('No action')
+ default:
+ assertUnreachable(action)
}
- return `/escape/${vaultOrPositionId}`
}
-function getForcedActionLink(
+function getActionButtonLink(
tradingMode: TradingMode,
entry: UserAssetEntry,
isUserRegistered: boolean
@@ -122,9 +125,17 @@ function getForcedActionLink(
return '/users/register'
}
- return tradingMode === 'perpetual'
- ? `/forced/new/${
- entry.vaultOrPositionId
- }/${entry.asset.hashOrId.toString()}`
- : `/forced/new/${entry.vaultOrPositionId}`
+ switch (entry.action) {
+ case 'WITHDRAW':
+ case 'CLOSE':
+ return tradingMode === 'perpetual'
+ ? `/forced/new/${
+ entry.vaultOrPositionId
+ }/${entry.asset.hashOrId.toString()}`
+ : `/forced/new/${entry.vaultOrPositionId}`
+ case 'ESCAPE':
+ return `/escape/${entry.vaultOrPositionId}`
+ default:
+ return undefined
+ }
}