Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

show Nabla Swap tooltips, change column names #565

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

show Nabla Swap tooltips, change column names #565

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 18 additions & 10 deletions src/components/nabla/Pools/Swap/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { CellContext, ColumnDef } from '@tanstack/react-table';
import { Badge, Button } from 'react-daisyui';
import { Badge, Button, Tooltip } from 'react-daisyui';
import { useModalToggle } from '../../../../services/modal';
import { rawToDecimal } from '../../../../shared/parseNumbers/metric';
import { NablaInstanceBackstopPool, NablaInstanceSwapPool } from '../../../../hooks/nabla/useNablaInstance';
Expand All @@ -14,15 +14,19 @@ export type SwapPoolColumn = NablaInstanceSwapPool & {

const BIG_100 = new Big(100);

export const nameColumn: ColumnDef<SwapPoolColumn> = {
header: 'Name',
accessorKey: 'name',
accessorFn: (row) => row.token?.name || '',
export const assetColumn: ColumnDef<SwapPoolColumn> = {
header: 'Asset',
accessorKey: 'asset',
accessorFn: (row) => row.token?.symbol || '',
enableSorting: true,
} as const;

export const liabilitiesColumn: ColumnDef<SwapPoolColumn> = {
header: 'Pool liabilities',
header: () => (
<Tooltip color="secondary" message="Amount of liquidity provided initially by LPs" position="bottom">
Pool liabilities
</Tooltip>
),
accessorKey: 'liabilities',
accessorFn: (row) => rawToDecimal(row.totalLiabilities, row.lpTokenDecimals).toFixed(2, 0),
enableSorting: true,
Expand All @@ -32,7 +36,11 @@ export const liabilitiesColumn: ColumnDef<SwapPoolColumn> = {
} as const;

export const reservesColumn: ColumnDef<SwapPoolColumn> = {
header: 'Reserves',
header: () => (
<Tooltip message="Amount of tokens in the pool" color="secondary" position="bottom">
Reserves
</Tooltip>
),
accessorKey: 'reserves',
accessorFn: (row) => rawToDecimal(row.reserve, row.token.decimals).toFixed(2, 0),
enableSorting: true,
Expand All @@ -46,7 +54,7 @@ export const aprColumn: ColumnDef<SwapPoolColumn> = {
accessorKey: 'apr',
accessorFn: (row) => rawToDecimal(row.apr, row.token.decimals).mul(BIG_100).toFixed(2, 0),
cell: (props): JSX.Element | null => (
<Badge className="py-1 px-2 h-auto rounded-lg text-blackAlpha-700 dark:text-white bg-success/35">
<Badge className="h-auto rounded-lg bg-success/35 px-2 py-1 text-blackAlpha-700 dark:text-white">
{props.renderValue()}%
</Badge>
),
Expand Down Expand Up @@ -115,11 +123,11 @@ export const actionsColumn: ColumnDef<SwapPoolColumn> = {
} as const;

export const columnsWithMyAmount = [
nameColumn,
assetColumn,
liabilitiesColumn,
reservesColumn,
aprColumn,
myAmountColumn,
actionsColumn,
];
export const columnsWithoutMyAmount = [nameColumn, liabilitiesColumn, reservesColumn, aprColumn, actionsColumn];
export const columnsWithoutMyAmount = [assetColumn, liabilitiesColumn, reservesColumn, aprColumn, actionsColumn];
Loading