Table updates (#559)

* fix: adjusted table colors and hover interactions * fix: added actionButtons back and changed lend to APY * fix: build update * tidy: fixed the CircularProgress indicators on the loading modals * fix: relative import
2023-10-19 08:49:03 +02:00 · 2023-10-19 08:49:03 +02:00 · 66f5ce42a4
commit 66f5ce42a4
parent 63994ba87b
26 changed files with 131 additions and 68 deletions
--- a/src/components/Account/AccountBalancesTable/index.tsx
+++ b/src/components/Account/AccountBalancesTable/index.tsx
@ -45,7 +45,6 @@ export default function Index(props: Props) {
  const navigate = useNavigate()
  const { pathname } = useLocation()
  const address = useStore((s) => s.address)
-  const baseCurrency = useStore((s) => s.baseCurrency)
  const [sorting, setSorting] = useState<SortingState>([])
  const updatedAccount = useStore((s) => s.updatedAccount)
  const accountBalanceData = useAccountBalanceData({
@ -186,7 +185,7 @@ export default function Index(props: Props) {

  return (
    <table className='w-full'>
-      <thead className='border-b border-white/5'>
+      <thead className='border-b border-white/10'>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => {
--- a/src/components/Borrow/Table/AvailableBorrowingsTable.tsx
+++ b/src/components/Borrow/Table/AvailableBorrowingsTable.tsx
@ -1,10 +1,12 @@
 import { Row } from '@tanstack/react-table'
 import { Table as TanstackTable } from '@tanstack/table-core/build/lib/types'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'

+import BorrowActionButtons from 'components/Borrow/BorrowActionButtons'
 import useAvailableColumns from 'components/Borrow/Table/Columns/useAvailableColumns'
 import MarketDetails from 'components/MarketDetails'
 import Table from 'components/Table'
+import ActionButtonRow from 'components/Table/ActionButtonRow'

 type Props = {
  data: BorrowMarketTableData[]
@ -15,12 +17,17 @@ export default function AvailableBorrowingsTable(props: Props) {
  const columns = useAvailableColumns({ isLoading: props.isLoading })

  const renderExpanded = useCallback(
-    (row: Row<BorrowMarketTableData>, _: TanstackTable<BorrowMarketTableData>) => (
-      <MarketDetails
-        row={row as Row<BorrowMarketTableData | LendingMarketTableData>}
-        type='borrow'
-      />
-    ),
+    (row: Row<BorrowMarketTableData>, _: TanstackTable<BorrowMarketTableData>) => {
+      const currentRow = row as Row<BorrowMarketTableData>
+      return (
+        <>
+          <ActionButtonRow row={currentRow}>
+            <BorrowActionButtons data={row.original} />
+          </ActionButtonRow>
+          <MarketDetails row={currentRow} type='borrow' />
+        </>
+      )
+    },
    [],
  )

--- a/src/components/Borrow/Table/DepositedBorrowingsTable.tsx
+++ b/src/components/Borrow/Table/DepositedBorrowingsTable.tsx
@ -1,10 +1,11 @@
 import { Row } from '@tanstack/react-table'
-import { Table as TanStackTable } from '@tanstack/table-core/build/lib/types'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'

 import useDepositedColumns from 'components/Borrow/Table/Columns/useDepositedColumns'
 import MarketDetails from 'components/MarketDetails'
 import Table from 'components/Table'
+import ActionButtonRow from 'components/Table/ActionButtonRow'
+import BorrowActionButtons from 'components/Borrow/BorrowActionButtons'

 type Props = {
  data: BorrowMarketTableData[]
@ -14,13 +15,17 @@ type Props = {
 export default function DepositedBorrowingsTable(props: Props) {
  const columns = useDepositedColumns({ isLoading: props.isLoading })

-  const renderExpanded = useCallback(
-    (
-      row: Row<BorrowMarketTableData | LendingMarketTableData>,
-      table: TanStackTable<BorrowMarketTableData>,
-    ) => <MarketDetails row={row} type='borrow' />,
-    [],
-  )
+  const renderExpanded = useCallback((row: Row<BorrowMarketTableData>) => {
+    const currentRow = row as Row<BorrowMarketTableData>
+    return (
+      <>
+        <ActionButtonRow row={currentRow}>
+          <BorrowActionButtons data={row.original} />
+        </ActionButtonRow>
+        <MarketDetails row={row} type='borrow' />
+      </>
+    )
+  }, [])

  if (!props.data.length) return null

--- a/src/components/Earn/Farm/VaultExpanded.tsx
+++ b/src/components/Earn/Farm/VaultExpanded.tsx
@ -105,7 +105,7 @@ export default function VaultExpanded(props: Props) {
  return (
    <tr
      key={props.row.id}
-      className='hover:cursor-pointer bg-black/20 transition-colors'
+      className='transition-colors hover:cursor-pointer bg-black/20'
      onClick={(e) => {
        e.preventDefault()
        const isExpanded = props.row.getIsExpanded()
@ -113,7 +113,7 @@ export default function VaultExpanded(props: Props) {
        !isExpanded && props.row.toggleExpanded()
      }}
    >
-      <td colSpan={props.row.getAllCells().length}>
+      <td colSpan={props.row.getAllCells().length} className='p-0'>
        <div className='flex justify-end gap-3 p-4 align-center'>
          {status && <DepositMoreButton />}
          {status === VaultStatus.ACTIVE && <UnlockButton />}
--- a/src/components/Earn/Farm/VaultRow.tsx
+++ b/src/components/Earn/Farm/VaultRow.tsx
@ -12,9 +12,9 @@ export const VaultRow = (props: AssetRowProps) => {
    <tr
      key={props.row.id}
      className={classNames(
-        'bg-white/3 group/row border-b border-t border-white/5 transition-colors hover:bg-white/5',
+        'group/row border-t border-white/10 transition-colors hover:bg-white/5',
        vault.status && 'hover:cursor-pointer',
-        props.row.getIsExpanded() && 'is-expanded',
+        props.row.getIsExpanded() ? 'is-expanded bg-black/20' : 'border-b',
      )}
      onClick={(e) => {
        e.preventDefault()
--- a/src/components/Earn/Lend/Table/AvailableLendsTable.tsx
+++ b/src/components/Earn/Lend/Table/AvailableLendsTable.tsx
@ -1,10 +1,12 @@
 import { Row } from '@tanstack/react-table'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'

+import LendingActionButtons from 'components/Earn/Lend/LendingActionButtons'
 import { NAME_META } from 'components/Earn/Lend/Table/Columns/Name'
 import useAvailableColumns from 'components/Earn/Lend/Table/Columns/useAvailableColumns'
 import MarketDetails from 'components/MarketDetails'
 import Table from 'components/Table'
+import ActionButtonRow from 'components/Table/ActionButtonRow'

 type Props = {
  data: LendingMarketTableData[]
@ -15,7 +17,14 @@ export default function AvailableLendsTable(props: Props) {
  const columns = useAvailableColumns({ isLoading: props.isLoading })

  const renderExpanded = useCallback(
-    (row: Row<LendingMarketTableData>) => <MarketDetails row={row} type='lend' />,
+    (row: Row<LendingMarketTableData>) => (
+      <>
+        <ActionButtonRow row={row}>
+          <LendingActionButtons data={row.original} />
+        </ActionButtonRow>
+        <MarketDetails row={row} type='lend' />
+      </>
+    ),
    [],
  )

--- a/src/components/Earn/Lend/Table/Columns/Apy.tsx
+++ b/src/components/Earn/Lend/Table/Columns/Apy.tsx
@ -1,10 +1,8 @@
-import React from 'react'
-
 import AssetRate from 'components/Asset/AssetRate'
 import Loading from 'components/Loading'
-import { convertLiquidityRateToAPR } from 'utils/formatters'
+import { convertAprToApy } from 'utils/parsers'

-export const APR_META = { accessorKey: 'marketLiquidityRate', header: 'APR' }
+export const APY_META = { accessorKey: 'marketLiquidityRate', header: 'APY' }

 interface Props {
  marketLiquidityRate: number
@ -16,10 +14,10 @@ export default function Apr(props: Props) {

  return (
    <AssetRate
-      rate={convertLiquidityRateToAPR(props.marketLiquidityRate)}
+      rate={convertAprToApy((props.marketLiquidityRate ?? 0) * 100, 365)}
      isEnabled={props.borrowEnabled}
      className='justify-end text-xs'
-      type='apr'
+      type='apy'
      orientation='ltr'
    />
  )
--- a/src/components/Earn/Lend/Table/Columns/useAvailableColumns.tsx
+++ b/src/components/Earn/Lend/Table/Columns/useAvailableColumns.tsx
@ -1,7 +1,7 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'

-import Apr, { APR_META } from 'components/Earn/Lend/Table/Columns/Apr'
+import Apy, { APY_META } from 'components/Earn/Lend/Table/Columns/Apy'
 import DepositCap, { DEPOSIT_CAP_META } from 'components/Earn/Lend/Table/Columns/DepositCap'
 import Manage, { MANAGE_META } from 'components/Earn/Lend/Table/Columns/Manage'
 import Name, { NAME_META } from 'components/Earn/Lend/Table/Columns/Name'
@ -18,9 +18,9 @@ export default function useAvailableColumns(props: Props) {
        cell: ({ row }) => <Name asset={row.original.asset} />,
      },
      {
-        ...APR_META,
+        ...APY_META,
        cell: ({ row }) => (
-          <Apr
+          <Apy
            isLoading={props.isLoading}
            borrowEnabled={row.original.borrowEnabled}
            marketLiquidityRate={row.original.marketLiquidityRate}
@ -36,5 +36,5 @@ export default function useAvailableColumns(props: Props) {
        cell: ({ row }) => <Manage isExpanded={row.getIsExpanded()} />,
      },
    ]
-  }, [])
+  }, [props.isLoading])
 }
--- a/src/components/Earn/Lend/Table/Columns/useDepositedColumns.tsx
+++ b/src/components/Earn/Lend/Table/Columns/useDepositedColumns.tsx
@ -1,7 +1,7 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'

-import Apr, { APR_META } from 'components/Earn/Lend/Table/Columns/Apr'
+import Apy, { APY_META } from 'components/Earn/Lend/Table/Columns/Apy'
 import DepositCap, { DEPOSIT_CAP_META } from 'components/Earn/Lend/Table/Columns/DepositCap'
 import DepositValue, { DEPOSIT_VALUE_META } from 'components/Earn/Lend/Table/Columns/DepositValue'
 import Manage, { MANAGE_META } from 'components/Earn/Lend/Table/Columns/Manage'
@ -25,9 +25,9 @@ export default function useDepositedColumns(props: Props) {
        ),
      },
      {
-        ...APR_META,
+        ...APY_META,
        cell: ({ row }) => (
-          <Apr
+          <Apy
            isLoading={props.isLoading}
            borrowEnabled={row.original.borrowEnabled}
            marketLiquidityRate={row.original.marketLiquidityRate}
@ -43,5 +43,5 @@ export default function useDepositedColumns(props: Props) {
        cell: ({ row }) => <Manage isExpanded={row.getIsExpanded()} />,
      },
    ]
-  }, [])
+  }, [props.isLoading])
 }
--- a/src/components/Earn/Lend/Table/DepositedLendsTable.tsx
+++ b/src/components/Earn/Lend/Table/DepositedLendsTable.tsx
@ -1,10 +1,12 @@
 import { Row } from '@tanstack/react-table'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'

+import LendingActionButtons from 'components/Earn/Lend/LendingActionButtons'
 import { NAME_META } from 'components/Earn/Lend/Table/Columns/Name'
 import useDepositedColumns from 'components/Earn/Lend/Table/Columns/useDepositedColumns'
 import MarketDetails from 'components/MarketDetails'
 import Table from 'components/Table'
+import ActionButtonRow from 'components/Table/ActionButtonRow'

 type Props = {
  data: LendingMarketTableData[]
@ -15,7 +17,14 @@ export default function DepositedLendsTable(props: Props) {
  const columns = useDepositedColumns({ isLoading: props.isLoading })

  const renderExpanded = useCallback(
-    (row: Row<LendingMarketTableData>) => <MarketDetails row={row} type='borrow' />,
+    (row: Row<LendingMarketTableData>) => (
+      <>
+        <ActionButtonRow row={row}>
+          <LendingActionButtons data={row.original} />
+        </ActionButtonRow>
+        <MarketDetails row={row} type='lend' />
+      </>
+    ),
    [],
  )

--- a/src/components/MarketDetails.tsx
+++ b/src/components/MarketDetails.tsx
@ -120,8 +120,8 @@ export default function MarketDetails({ row, type }: Props) {

  return (
    <tr>
-      <td colSpan={row.getAllCells().length}>
-        <div className='flex justify-between flex-1 bg-white rounded-md bg-opacity-5'>
+      <td colSpan={row.getAllCells().length} className='p-4 border-b bg-black/20 border-white/10'>
+        <div className='flex justify-between flex-1 rounded-md bg-white/5'>
          {details.map((detail, index) => (
            <TitleAndSubCell
              key={index}
--- a/src/components/Modals/AddVaultAssets/AddVaultBorrowAssetsModalContent.tsx
+++ b/src/components/Modals/AddVaultAssets/AddVaultBorrowAssetsModalContent.tsx
@ -75,7 +75,7 @@ export default function AddVaultAssetsModalContent(props: Props) {

  return (
    <>
-      <div className='border-b border-white/5 bg-white/10 px-4 py-3'>
+      <div className='px-4 py-3 border-b border-white/5 bg-white/10'>
        <SearchBar
          value={searchString}
          placeholder={`Search for e.g. "ETH" or "Ethereum"`}
@ -90,6 +90,7 @@ export default function AddVaultAssetsModalContent(props: Props) {
          </Text>
        </div>
        <AssetSelectTable
+          isBorrow={true}
          assets={poolAssets}
          onChangeSelected={onChangePoolDenoms}
          selectedDenoms={selectedPoolDenoms}
@ -102,6 +103,7 @@ export default function AddVaultAssetsModalContent(props: Props) {
          </Text>
        </div>
        <AssetSelectTable
+          isBorrow={true}
          assets={stableAssets}
          onChangeSelected={onChangeOtherDenoms}
          selectedDenoms={selectedOtherDenoms}
--- a/src/components/Modals/AddVaultAssets/index.tsx
+++ b/src/components/Modals/AddVaultAssets/index.tsx
@ -40,7 +40,9 @@ export default function AddVaultBorrowAssetsModal() {
          onChangeBorrowDenoms={updateSelectedDenoms}
        />
      ) : (
-        <CircularProgress />
+        <div className='flex items-center justify-center w-full h-[380px]'>
+          <CircularProgress />
+        </div>
      )}
      <div className='flex w-full p-4'>
        <Button className='w-full' onClick={onClose} color='tertiary' text='Select Assets' />
--- a/src/components/Modals/AssetsSelect/AssetSelectTable.tsx
+++ b/src/components/Modals/AssetsSelect/AssetSelectTable.tsx
@ -20,6 +20,7 @@ interface Props {
  assets: Asset[] | BorrowAsset[]
  selectedDenoms: string[]
  onChangeSelected: (denoms: string[]) => void
+  isBorrow: boolean
 }

 export default function AssetSelectTable(props: Props) {
@ -39,7 +40,7 @@ export default function AssetSelectTable(props: Props) {
  const [sorting, setSorting] = useState<SortingState>([{ id: 'symbol', desc: false }])
  const [selected, setSelected] = useState<RowSelectionState>(defaultSelected)
  const balances = useStore((s) => s.balances)
-  const columns = useAssetTableColumns()
+  const columns = useAssetTableColumns(props.isBorrow)
  const tableData: AssetTableRow[] = useMemo(() => {
    return props.assets.map((asset) => {
      const balancesForAsset = balances.find(byDenom(asset.denom))
@ -79,7 +80,7 @@ export default function AssetSelectTable(props: Props) {

  return (
    <table className='w-full'>
-      <thead className='border-b border-white/5'>
+      <thead className='border-b border-white/10'>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => {
--- a/src/components/Modals/AssetsSelect/useAssetTableColumns.tsx
+++ b/src/components/Modals/AssetsSelect/useAssetTableColumns.tsx
@ -17,7 +17,7 @@ function showBorrowRate(data: AssetTableRow[]) {
  return !!(assetData && assetData?.borrowRate)
 }

-export default function useAssetTableColumns() {
+export default function useAssetTableColumns(isBorrow: boolean) {
  return React.useMemo<ColumnDef<AssetTableRow>[]>(
    () => [
      {
@ -29,6 +29,9 @@ export default function useAssetTableColumns() {
          const market = row.original.market
          const borrowAsset = row.original.asset as BorrowAsset
          const showRate = !borrowAsset?.borrowRate
+          const rate = isBorrow ? market?.borrowRate : market?.liquidityRate
+          const apy = convertAprToApy((rate ?? 0) * 100, 365)
+
          return (
            <div className='flex items-center'>
              <Checkbox checked={row.getIsSelected()} onChange={row.getToggleSelectedHandler()} />
@ -39,7 +42,7 @@ export default function useAssetTableColumns() {
                </Text>
                {showRate && market ? (
                  <AssetRate
-                    rate={convertAprToApy(market.borrowRate * 100, 365)}
+                    rate={apy}
                    isEnabled={market.borrowEnabled}
                    className='text-xs'
                    type='apy'
@ -85,6 +88,6 @@ export default function useAssetTableColumns() {
        },
      },
    ],
-    [],
+    [isBorrow],
  )
 }
--- a/src/components/Modals/FundWithdraw/index.tsx
+++ b/src/components/Modals/FundWithdraw/index.tsx
@ -33,7 +33,9 @@ export default function FundAndWithdrawModal() {
      {modal && currentAccount ? (
        <FundWithdrawModalContent account={currentAccount} isFunding={isFunding} />
      ) : (
-        <CircularProgress />
+        <div className='flex items-center justify-center w-full h-[380px]'>
+          <CircularProgress />
+        </div>
      )}
    </Modal>
  )
--- a/src/components/Modals/WalletAssets/WalletAssetsModalContent.tsx
+++ b/src/components/Modals/WalletAssets/WalletAssetsModalContent.tsx
@ -34,6 +34,7 @@ export default function WalletAssetsModalContent(props: Props) {
    )
  }, [assets, searchString])

+  const isBorrow = useStore((s) => s.walletAssetsModal?.isBorrow ?? false)
  const currentSelectedDenom = useStore((s) => s.walletAssetsModal?.selectedDenoms ?? [])
  const [selectedDenoms, setSelectedDenoms] = useState<string[]>(
    currentSelectedDenom.filter((denom) => filteredAssets.findIndex(byDenom(denom)) || []),
@ -58,6 +59,7 @@ export default function WalletAssetsModalContent(props: Props) {
      </div>
      <div className='max-h-[446px] overflow-y-scroll scrollbar-hide'>
        <AssetSelectTable
+          isBorrow={isBorrow}
          assets={filteredAssets}
          onChangeSelected={onChangeSelect}
          selectedDenoms={selectedDenoms}
--- a/src/components/Modals/WithdrawFromVaultsModal.tsx
+++ b/src/components/Modals/WithdrawFromVaultsModal.tsx
@ -88,7 +88,9 @@ export default function WithdrawFromVaultsModal() {
          <Button onClick={withdrawHandler} className='w-full mt-4' text='Withdraw from all' />
        </div>
      ) : (
-        <CircularProgress />
+        <div className='flex items-center justify-center w-full h-[380px]'>
+          <CircularProgress />
+        </div>
      )}
    </Modal>
  )
--- a/src/components/Table/ActionButtonRow.tsx
+++ b/src/components/Table/ActionButtonRow.tsx
@ -0,0 +1,25 @@
+import { Row as TanstackRow } from '@tanstack/react-table'
+import { ReactNode } from 'react'
+
+import Text from 'components/Text'
+
+interface Props<T> {
+  row: TanstackRow<T>
+  children: ReactNode
+}
+
+export default function ActionButtonRow<T>(props: Props<T>) {
+  return (
+    <tr>
+      <td
+        colSpan={props.row.getAllCells().length}
+        className='p-4 border-b border-white/10 bg-black/20'
+      >
+        <div className='flex justify-between'>
+          <Text className='flex items-center p-0 font-bold'>Details</Text>
+          {props.children}
+        </div>
+      </td>
+    </tr>
+  )
+}
--- a/src/components/Table/Row.tsx
+++ b/src/components/Table/Row.tsx
@ -15,9 +15,9 @@ export default function Row<T>(props: Props<T>) {
      <tr
        key={props.row.id}
        className={classNames(
-          'bg-white/3 group/row border-b border-t border-white/5 transition-colors hover:bg-white/5',
+          'group/row transition-bg',
          props.renderExpanded && 'hover:cursor-pointer',
-          props.row.getIsExpanded() && 'is-expanded',
+          props.row.getIsExpanded() ? 'is-expanded bg-black/20' : 'hover:bg-white/5',
        )}
        onClick={(e) => {
          e.preventDefault()
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@ -52,13 +52,15 @@ export default function Table<T>(props: Props<T>) {
                    className={classNames(
                      'px-4 py-3',
                      header.column.getCanSort() && 'hover:cursor-pointer',
-                      header.id === 'symbol' ? 'text-left' : 'text-right',
+                      header.id === 'symbol' || header.id === 'name' ? 'text-left' : 'text-right',
                    )}
                  >
                    <div
                      className={classNames(
                        'flex',
-                        header.id === 'name' ? 'justify-start' : 'justify-end',
+                        header.id === 'symbol' || header.id === 'name'
+                          ? 'justify-start'
+                          : 'justify-end',
                        'align-center',
                      )}
                    >
--- a/src/components/TableSkeleton.tsx
+++ b/src/components/TableSkeleton.tsx
@ -1,5 +1,4 @@
 import classNames from 'classnames'
-import React from 'react'

 import { SortNone } from 'components/Icons'
 import Loading from 'components/Loading'
@ -13,7 +12,7 @@ interface Props {
 export default function TableSkeleton(props: Props) {
  return (
    <table className='w-full'>
-      <thead className='border-b border-white/5'>
+      <thead className='border-b border-white/10'>
        <tr>
          {props.labels.map((label, index) => {
            return (
@ -58,7 +57,7 @@ export default function TableSkeleton(props: Props) {
                    <td
                      key={`${index}-${index2}`}
                      className={classNames(
-                        index === 0 && 'justify-end',
+                        index !== 0 && 'justify-end',
                        index2 === 0 && 'pl-4',
                        index2 === props.labels.length - 1 && 'pr-4',
                        'p-2 text-right',
--- a/src/components/Trade/TradeModule/SwapForm/AssetAmountInput.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/AssetAmountInput.tsx
@ -45,7 +45,7 @@ export default function AssetAmountInput(props: Props) {
    <div className={containerClassName}>
      <label>
        {label}
-        <div className='flex flex-1 flex-row py-3 border-[1px] border-white border-opacity-20 rounded bg-white bg-opacity-5 pl-3 pr-2 mt-2'>
+        <div className='flex flex-1 flex-row py-3 border-[1px] border-white/20 rounded bg-white bg-opacity-5 pl-3 pr-2 mt-2'>
          <NumberInput
            asset={asset}
            amount={amount}
--- a/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
@ -55,7 +55,7 @@ export default function TradeSummary(props: Props) {
    <div
      className={classNames(
        containerClassName,
-        'flex flex-1 flex-col bg-white bg-opacity-5 rounded border-[1px] border-white border-opacity-20',
+        'flex flex-1 flex-col bg-white bg-opacity-5 rounded border-[1px] border-white/20',
      )}
    >
      <div className='flex flex-col flex-1 m-3'>
--- a/src/constants/env.ts
+++ b/src/constants/env.ts
@ -13,7 +13,6 @@ interface EnvironmentVariables {
  URL_GQL: string
  URL_REST: string
  URL_RPC: string
-  URL_API: string
  URL_VAULT_APR: string
  WALLETS: string[]
  PYTH_ENDPOINT: string
@ -36,16 +35,9 @@ export const ENV: EnvironmentVariables = {
  URL_GQL: process.env.NEXT_PUBLIC_GQL || '',
  URL_REST: process.env.NEXT_PUBLIC_REST || '',
  URL_RPC: process.env.NEXT_PUBLIC_RPC || '',
-  URL_API: process.env.NEXT_PUBLIC_VERCEL_URL
-    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/api`
-    : process.env.NEXT_PUBLIC_API || '',
  URL_VAULT_APR: process.env.NEXT_PUBLIC_VAULT_APR || '',
  WALLETS: process.env.NEXT_PUBLIC_WALLETS?.split(',') || [],
  PYTH_ENDPOINT: process.env.NEXT_PUBLIC_PYTH_ENDPOINT || '',
  MAINNET_REST_API: process.env.NEXT_PUBLIC_MAINNET_REST || '',
  WALLET_CONNECT_ID: process.env.NEXT_PUBLIC_WALLET_CONNECT_ID || '',
 }
-
-export const VERCEL_BYPASS = process.env.NEXT_PUBLIC_BYPASS
-  ? `?x-vercel-protection-bypass=${process.env.NEXT_PUBLIC_BYPASS}`
-  : ''
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -57,3 +57,7 @@
 .Toastify__toast--error {
  background-color: #fda29b33 !important;
 }
+
+table tr:last-child td {
+  border-bottom-width: 0;
+}