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

[devpavan04]

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
• apps/tangle-dapp
• apps/testnet-leaderboard
• apps/faucet
• apps/zk-explorer
• libs/webb-ui-components

Reference issue to close (if applicable)

• Closes [TASK] Update the overview page UI to match the latest design updates #2511

Screen Recording

CleanShot.2024-08-27.at.10.02.57.mp4

Screenshots

[netlify]

✅ Deploy Preview for tangle-dapp ready!

Name	Link
🔨 Latest commit	1c99bb5
🔍 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]

@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 }]}
    />
  );
};

[drewstone]

LG!