chore(tangle-dapp): Update liquid staking overview page UI

apps/tangle-dapp/app/blueprints/[name]/OperatorsTable.tsx

@@ -23,12 +23,12 @@ import { FC, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import LsTokenIcon from '../../../components/LsTokenIcon';
+import TableCellWrapper from '../../../components/TableCellWrapper';
 import { TableStatus } from '../../../components/TableStatus';
 import useNetworkStore from '../../../context/useNetworkStore';
 import { ExplorerType } from '../../../types';
 import { Operator } from '../../../types/blueprint';
 import { getSortAddressOrIdentityFnc } from '../../../utils/table';
-import TableCellWrapper from './TableCellWrapper';
 import useOperators from './useOperators';
 
 const columnHelper = createColumnHelper<Operator>();

apps/tangle-dapp/app/blueprints/[name]/TvlTable.tsx → apps/tangle-dapp/app/blueprints/[name]/VaultsAndAssetsTable.tsx

@@ -1,36 +1,27 @@
 'use client';
 
-import {
-  createColumnHelper,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  Row,
-  SortingState,
-  useReactTable,
-} from '@tanstack/react-table';
+import { createColumnHelper } from '@tanstack/react-table';
 import { ChevronUp } from '@webb-tools/icons';
 import {
   Button,
   getRoundedAmountString,
-  Table,
   Typography,
+  VaultsTable,
 } from '@webb-tools/webb-ui-components';
 import Link from 'next/link';
-import { FC, useCallback, useState } from 'react';
+import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import LsTokenIcon from '../../../components/LsTokenIcon';
-import { Vault } from '../../../types/blueprint';
-import TableCellWrapper from './TableCellWrapper';
+import TableCellWrapper from '../../../components/TableCellWrapper';
+import { Asset, Vault } from '../../../types/blueprint';
 import useVaults from './useVaults';
-import VaultAssetsTable from './VaultAssetsTable';
 
-const columnHelper = createColumnHelper<Vault>();
+const vaultColumnHelper = createColumnHelper<Vault>();
+const assetColumnHelper = createColumnHelper<Asset>();
 
-const columns = [
-  columnHelper.accessor('name', {
+const vaultColumns = [
+  vaultColumnHelper.accessor('name', {
     header: () => 'Vault',
     cell: (props) => (
       <TableCellWrapper className="pl-3">
@@ -48,7 +39,7 @@ const columns = [
     },
     sortDescFirst: true,
   }),
-  columnHelper.accessor('apy', {
+  vaultColumnHelper.accessor('apy', {
     header: () => 'APY',
     cell: (props) => (
       <TableCellWrapper>
@@ -62,7 +53,7 @@ const columns = [
       </TableCellWrapper>
     ),
   }),
-  columnHelper.accessor('tokensCount', {
+  vaultColumnHelper.accessor('tokensCount', {
     header: () => 'Tokens',
     cell: (props) => (
       <TableCellWrapper>
@@ -76,7 +67,7 @@ const columns = [
       </TableCellWrapper>
     ),
   }),
-  columnHelper.accessor('liquidity', {
+  vaultColumnHelper.accessor('liquidity', {
     header: () => 'Liquidity',
     cell: (props) => (
       <TableCellWrapper removeBorder>
@@ -98,7 +89,7 @@ const columns = [
       </TableCellWrapper>
     ),
   }),
-  columnHelper.accessor('lstToken', {
+  vaultColumnHelper.accessor('lstToken', {
     header: () => null,
     cell: ({ row }) => (
       <TableCellWrapper removeBorder>
@@ -137,73 +128,37 @@ const columns = [
   }),
 ];
 
-const TvlTable: FC = () => {
-  const vaults = useVaults();
-
-  const [sorting, setSorting] = useState<SortingState>([
-    { id: 'apy', desc: true },
-  ]);
-
-  const getExpandedRowContent = (row: Row<Vault>) => {
-    return (
-      <div className="bg-mono-0 dark:bg-mono-190 -mt-7 pt-4 pb-3 rounded-b-xl -mx-px px-3">
-        <VaultAssetsTable
-          LSTTokenIcon={row.original.lstToken}
-          isShown={row.getIsExpanded()}
-        />
-      </div>
-    );
-  };
-
-  const table = useReactTable({
-    data: vaults,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onSortingChange: setSorting,
-    state: {
-      sorting,
-    },
-    autoResetPageIndex: false,
-    enableSortingRemoval: false,
-  });
+const vaultAssetColumns = [
+  assetColumnHelper.accessor('id', {
+    header: () => 'Asset ID',
+    cell: (props) => props.getValue(),
+  }),
+  assetColumnHelper.accessor('symbol', {
+    header: () => 'Asset Symbol',
+    cell: (props) => props.getValue(),
+  }),
+  assetColumnHelper.accessor('tvl', {
+    header: () => 'TVL',
+    cell: (props) => getRoundedAmountString(props.getValue()),
+  }),
+  assetColumnHelper.accessor('myStake', {
+    header: () => 'My Stake',
+    cell: (props) => getRoundedAmountString(props.getValue()),
+  }),
+];
 
-  const onRowClick = useCallback(
-    (row: Row<Vault>) => {
-      if (row.original.tokensCount === 0) return;
-      table.setExpanded({ [row.id]: !row.getIsExpanded() });
-    },
-    [table],
-  );
+const VaultsAndAssetsTable: FC = () => {
+  const vaults = useVaults();
 
   return (
-    <div className="space-y-5">
-      <Typography variant="h4" fw="bold">
-        Total Value Locked
-      </Typography>
-
-      <Table
-        tableProps={table}
-        title="Operators"
-        getExpandedRowContent={getExpandedRowContent}
-        onRowClick={onRowClick}
-        isPaginated
-        className={twMerge(
-          'px-6 rounded-2xl overflow-hidden border border-mono-0 dark:border-mono-160',
-          'bg-[linear-gradient(180deg,rgba(255,255,255,0.20)0%,rgba(255,255,255,0.00)100%)]',
-          'dark:bg-[linear-gradient(180deg,rgba(43,47,64,0.20)0%,rgba(43,47,64,0.00)100%)]',
-        )}
-        tableClassName="border-separate border-spacing-y-3 pt-3"
-        thClassName="py-0 border-t-0 !bg-transparent font-normal text-mono-120 dark:text-mono-100 border-b-0"
-        tbodyClassName="!bg-transparent"
-        trClassName="group cursor-pointer overflow-hidden rounded-xl"
-        tdClassName="border-0 !p-0 first:rounded-l-xl last:rounded-r-xl overflow-hidden"
-        paginationClassName="!bg-transparent dark:!bg-transparent pl-6 border-t-0 -mt-2"
-      />
-    </div>
+    <VaultsTable
+      vaultsData={vaults}
+      vaultsColumns={vaultColumns}
+      assetsColumns={vaultAssetColumns}
+      title="Total Value Locked"
+      initialSorting={[{ id: 'apy', desc: true }]}
+    />
   );
 };
 
-export default TvlTable;
+export default VaultsAndAssetsTable;

apps/tangle-dapp/app/blueprints/[name]/page.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 
 import BlueprintHeader from './BlueprintHeader';
 import OperatorsTable from './OperatorsTable';
-import TvlTable from './TvlTable';
+import VaultsAndAssetsTable from './VaultsAndAssetsTable';
 
 type Props = {
   params: {
@@ -14,7 +14,7 @@ const BlueprintDetailsPage: FC<Props> = ({ params: { name } }) => {
   return (
     <div className="space-y-5">
       <BlueprintHeader blueprintName={name} />
-      <TvlTable />
+      <VaultsAndAssetsTable />
       <OperatorsTable />
     </div>
   );