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

tangle-network / dapp

Monorepo for the Tangle ecosystem.

https://app.tangle.tools

Apache License 2.0

29 stars 15 forks source link

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

Closed devpavan04 closed 1 month ago

devpavan04 commented 1 month ago

Summary of changes

Added a new reusable component: VaultsTable (includes AssetsTable within).
Updated the overview page UI to align with the latest design updates.

Proposed area of change

[ ] apps/bridge-dapp
[ ] apps/hubble-stats
[ ] apps/stats-dapp
[x] apps/tangle-dapp
[ ] apps/testnet-leaderboard
[ ] apps/faucet
[ ] apps/zk-explorer
[ ] libs/webb-ui-components

Reference issue to close (if applicable)

Closes #2511

Screen Recording

https://github.com/user-attachments/assets/2ccd0fb0-19f1-4669-b96d-caedf2108e9b

Screenshots

CleanShot 2024-08-27 at 10 01 59

netlify[bot] commented 1 month ago

Deploy Preview for tangle-dapp ready!

Name	Link
Latest commit	1c99bb5415d957b47d97c03189a8e8518976b097
Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/66cf3a1d3535b60008771a90
Deploy Preview	https://deploy-preview-2513--tangle-dapp.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

devpavan04 commented 1 month ago

@AtelyPham, I have created a reusable table component called VaultsTable.

Check out the usage in apps/tangle-dapp/components/LiquidStaking/VaultsAndAssetsTable.tsx.

You need to pass the following props:

Vault columns
Asset columns
Vault data (each data item should have its own assets array)

const VaultsAndAssetsTable = () => {
  const vaults = useVaults();

  return (
    <VaultsTable
      vaultsData={vaults}
      vaultsColumns={vaultColumns}
      assetsColumns={assetsColumns}
      title="Liquid Staking Vaults"
      initialSorting={[{ id: 'apy', desc: true }]}
    />
  );
};