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.

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

Markets UI update #789

Merged
merged 77 commits into from
Dec 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
77 commits
Select commit Hold shift + click to select a range
17089e4
set up market info
vidvidvid Nov 11, 2024
5f278ff
Merge branch 'development' into feat/markets-ui-update
vidvidvid Nov 11, 2024
f9c5f4f
fix build
vidvidvid Nov 11, 2024
fde2aa1
migrate custom market table to CommonTable
vidvidvid Nov 13, 2024
6da7a93
Merge branch 'development' into feat/markets-ui-update
vidvidvid Nov 13, 2024
0620a2a
fix ion apr
vidvidvid Nov 13, 2024
4a44489
order columns & add sorting
vidvidvid Nov 15, 2024
446d1c1
Merge branch 'development' into feat/markets-ui-update
vidvidvid Nov 15, 2024
66f3550
simplify table config
vidvidvid Nov 17, 2024
0a21d4d
Merge branch 'development' into feat/markets-ui-update
vidvidvid Nov 17, 2024
01e3671
Merge branch 'development' into feat/markets-ui-update
vidvidvid Nov 17, 2024
def0d45
extract slides & unify dialog
vidvidvid Nov 19, 2024
fee4fc2
fix loop/manage
vidvidvid Nov 20, 2024
14f8891
first pass of migrating to manage dialog context
vidvidvid Nov 20, 2024
13135c0
continue cleaning up
vidvidvid Nov 20, 2024
9a24911
move more logic to context
vidvidvid Nov 20, 2024
b8d74bd
fix dialog open/close
vidvidvid Nov 20, 2024
d435e8e
show manage button & disable borrow tabs if disabled
vidvidvid Nov 20, 2024
e0295f8
set default tab
vidvidvid Nov 20, 2024
a0caec1
fix build
vidvidvid Nov 21, 2024
8aa39db
Merge branch 'development' into feat/markets-ui-update
vidvidvid Nov 21, 2024
a18460a
fix decimals
vidvidvid Nov 21, 2024
c3b0252
use shadcn for swap widget
vidvidvid Nov 21, 2024
38abc4d
always reset pool when switching chain
vidvidvid Nov 21, 2024
31a2ceb
fix claim rewards popover on dashboard
vidvidvid Nov 21, 2024
1c95a9e
lint
vidvidvid Nov 22, 2024
d9dfe4d
fix market supply balance
vidvidvid Nov 22, 2024
81a1e92
action buttons & supply/borrow balance data
vidvidvid Nov 22, 2024
8259eab
add total borrow and supply
vidvidvid Nov 22, 2024
c5cd6c7
fix sorting
vidvidvid Nov 22, 2024
c6a571e
balance style
vidvidvid Nov 22, 2024
fd2cf21
reward icons
vidvidvid Nov 22, 2024
7e4d9c6
split loop dialog
vidvidvid Nov 22, 2024
5653d35
move dialogs to their own folder
vidvidvid Nov 22, 2024
4d2430f
use shadcn for Loop dialog
vidvidvid Nov 22, 2024
cd26183
fix dialog styling
vidvidvid Nov 22, 2024
dc22b52
ui updates
vidvidvid Nov 25, 2024
6ba02a7
Merge branch 'development' into feat/markets-ui-update
vidvidvid Nov 27, 2024
87ddc86
add nektar to multipliers type
vidvidvid Nov 27, 2024
0455be9
improve ux
vidvidvid Nov 27, 2024
1955618
improve ui
vidvidvid Nov 28, 2024
9e65f29
disable if max is 0 & add info tooltip
vidvidvid Nov 28, 2024
9ee78ff
add search to market
vidvidvid Nov 28, 2024
2bf8a97
fix reward
vidvidvid Nov 28, 2024
dd12345
update values when supplying/repaying/borrowing/withdrawing
vidvidvid Nov 28, 2024
63a452a
improve filter bar
vidvidvid Nov 29, 2024
9228d90
spacing & $total supplied/borrowed
vidvidvid Nov 29, 2024
db9ab76
fix padding
vidvidvid Nov 29, 2024
88ef795
add badge and border for membership
vidvidvid Dec 2, 2024
caeaa49
Merge branch 'development' into feat/markets-ui-update
vidvidvid Dec 2, 2024
a037a2a
fix pool toggle on dashboard
vidvidvid Dec 2, 2024
cb19e4a
accent bg on switch
vidvidvid Dec 2, 2024
9ec8a00
Merge branch 'development' into feat/markets-ui-update
vidvidvid Dec 2, 2024
5376b5e
fix transaction steps handler
vidvidvid Dec 2, 2024
e076a1a
extract logic into hooks
vidvidvid Dec 2, 2024
8002815
extract collateral toggle to hook
vidvidvid Dec 2, 2024
f459e67
fix pass prop
vidvidvid Dec 2, 2024
1a08ce6
Merge branch 'development' into feat/markets-ui-update
vidvidvid Dec 2, 2024
27c2106
extract health
vidvidvid Dec 2, 2024
9d43702
move collateral
vidvidvid Dec 3, 2024
d3d94c8
fix hover states of buttons
vidvidvid Dec 3, 2024
e6c0d9c
fix spacing
vidvidvid Dec 3, 2024
207ea0a
fix supplying
vidvidvid Dec 3, 2024
2466a63
match continue button
vidvidvid Dec 3, 2024
97f60a4
remove redundant logic
vidvidvid Dec 3, 2024
793846e
cleanup
vidvidvid Dec 4, 2024
0ad7a2c
fix withdraw
vidvidvid Dec 4, 2024
fc62b28
fix handling the tx array
vidvidvid Dec 4, 2024
2a21c46
fix resetting values on close
vidvidvid Dec 4, 2024
b742a66
continue medium font
vidvidvid Dec 5, 2024
c7a69cf
make loop dialog overflow y auto
vidvidvid Dec 5, 2024
cda880a
fix alignment on mobile
vidvidvid Dec 5, 2024
3c88a9c
Merge branch 'development' into feat/markets-ui-update
vidvidvid Dec 5, 2024
c2a6c7a
hide 0 option
vidvidvid Dec 5, 2024
f08bf33
start loop leverage at 2x
vidvidvid Dec 5, 2024
fea2f56
fix repay
vidvidvid Dec 5, 2024
b0b4f1e
fix setting collateral
vidvidvid Dec 5, 2024
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
30 changes: 30 additions & 0 deletions packages/ui/app/_components/AnimateHeight.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { useState, useRef, useLayoutEffect } from 'react';

const AnimateHeight = ({ children }: { children: React.ReactNode }) => {
const [height, setHeight] = useState<number | null>(null);
const contentRef = useRef<HTMLDivElement>(null);

useLayoutEffect(() => {
if (contentRef.current) {
const resizeObserver = new ResizeObserver(() => {
if (contentRef.current) {
setHeight(contentRef.current.scrollHeight);
}
});

resizeObserver.observe(contentRef.current);
return () => resizeObserver.disconnect();
}
}, []);

return (
<div
className="transition-[height] duration-300 ease-in-out overflow-hidden"
style={{ height: height ? `${height}px` : 'auto' }}
>
<div ref={contentRef}>{children}</div>
</div>
);
};

export default AnimateHeight;
242 changes: 172 additions & 70 deletions packages/ui/app/_components/CommonTable.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
import type { ReactNode } from 'react';
import { useState } from 'react';

import {
ArrowDownIcon,
ArrowUpIcon,
CaretSortIcon
} from '@radix-ui/react-icons';
import {
flexRender,
getCoreRowModel,
getSortedRowModel,
useReactTable
useReactTable,
type ColumnDef,
type Row,
type SortingState
} from '@tanstack/react-table';

import {
Expand All @@ -16,98 +25,191 @@ import {
TableRow
} from '@ui/components/ui/table';

import { TableLoader } from './TableLoader';
import ResultHandler from './ResultHandler';

export const sortingFunctions = {
numerical: (a: any, b: any) => {
if (typeof a === 'number' && typeof b === 'number') {
return a - b;
}
const aValue = parseFloat(String(a).replace(/[^0-9.-]+/g, '')) || 0;
const bValue = parseFloat(String(b).replace(/[^0-9.-]+/g, '')) || 0;
return aValue - bValue;
},
alphabetical: (a: any, b: any) => String(a).localeCompare(String(b)),
percentage: (a: any, b: any) => {
const aValue = parseFloat(String(a).replace('%', '')) || 0;
const bValue = parseFloat(String(b).replace('%', '')) || 0;
return aValue - bValue;
}
};

type SortingType = keyof typeof sortingFunctions;

export type EnhancedColumnDef<T> = Omit<
ColumnDef<T, unknown>,
'header' | 'sortingFn'
> & {
id: string;
header: ReactNode | string;
sortingFn?: SortingType | ((rowA: any, rowB: any) => number);
enableSorting?: boolean;
accessorFn?: (row: T) => any;
};

interface RowBadge {
text: string;
className?: string;
}

import type { ColumnDef, SortingState } from '@tanstack/react-table';
interface RowStyle {
badge?: RowBadge;
borderClassName?: string;
}

interface CommonTableProps<T> {
interface CommonTableProps<T extends object> {
data: T[];
columns: ColumnDef<T>[];
columns: EnhancedColumnDef<T>[];
isLoading?: boolean;
loadingRows?: number;
showFooter?: boolean;
getRowStyle?: (row: Row<T>) => RowStyle;
}

function CommonTable<T>({
const SortableHeader = ({
column,
children
}: {
column: any;
children: ReactNode;
}) => {
const isSortable = column.getCanSort();
const sorted = column.getIsSorted();

const getSortIcon = () => {
if (!isSortable) return null;
if (sorted === 'asc') return <ArrowUpIcon className="w-4 h-4" />;
if (sorted === 'desc') return <ArrowDownIcon className="w-4 h-4" />;
return <CaretSortIcon className="w-4 h-4 text-white/40" />;
};

return (
<button
className={`flex items-center gap-2 ${!isSortable ? 'cursor-default' : 'hover:text-white'}`}
onClick={() => isSortable && column.toggleSorting(sorted === 'asc')}
disabled={!isSortable}
>
{children}
{getSortIcon()}
</button>
);
};

function CommonTable<T extends object>({
data,
columns,
isLoading = false,
loadingRows = 5,
showFooter = false
isLoading: externalIsLoading = false,
getRowStyle
}: CommonTableProps<T>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [hasInitialized, setHasInitialized] = useState(false);

const isLoading = !hasInitialized || externalIsLoading;

if (!hasInitialized && data.length > 0) {
setHasInitialized(true);
}

const processedColumns = columns.map(
(col): ColumnDef<T> => ({
...col,
accessorFn: col.accessorFn || ((row: T) => (row as any)[col.id]),
header: ({ column }) => (
<SortableHeader column={column}>{col.header}</SortableHeader>
),
sortingFn:
typeof col.sortingFn === 'string'
? (rowA: any, rowB: any) => {
const sortFn = sortingFunctions[col.sortingFn as SortingType];
return sortFn(rowA.getValue(col.id), rowB.getValue(col.id));
}
: col.sortingFn,
enableSorting: col.enableSorting !== false
})
);

const table = useReactTable({
data,
columns,
columns: processedColumns,
getCoreRowModel: getCoreRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
state: {
sorting
}
state: { sorting },
enableMultiSort: false
});

if (isLoading) {
return (
<TableLoader
columns={columns}
rows={loadingRows}
showFooter={showFooter}
/>
);
}

return (
<Table className="w-full border-separate border-spacing-y-3">
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow
key={headerGroup.id}
className="border-none hover:bg-transparent"
>
{headerGroup.headers.map((header) => (
<TableHead
key={header.id}
className="text-white/60 text-xs font-semibold h-8"
>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<ResultHandler
isLoading={isLoading}
center
height={80}
>
<Table className="pr-3.5 pl-[1px]">
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow
key={row.id}
className="hover:bg-graylite transition-all duration-200 ease-linear bg-grayUnselect rounded-xl [&>td:first-child]:rounded-l-xl [&>td:last-child]:rounded-r-xl border-none"
key={headerGroup.id}
transparent
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
{headerGroup.headers.map((header) => (
<TableHead
key={header.id}
className="text-white/60 text-xs font-semibold h-8"
>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
))}
</TableHeader>
<TableBody>
{!isLoading && table.getRowModel().rows?.length === 0 ? (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No results.
</TableCell>
</TableRow>
) : (
table.getRowModel().rows.map((row) => {
const rowStyle = getRowStyle ? getRowStyle(row) : {};

return (
<TableRow
key={row.id}
badge={rowStyle.badge}
borderClassName={rowStyle.borderClassName}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
);
})
)}
</TableBody>
</Table>
</ResultHandler>
);
}

Expand Down
58 changes: 0 additions & 58 deletions packages/ui/app/_components/Modal.tsx

This file was deleted.

Loading
Loading