feat(tangle-dapp): Update account page to prioritize restaking

apps/tangle-dapp/src/app/app.tsx

@@ -35,10 +35,11 @@ function App() {
         <Layout>
           {/* START: routes */}
           <Routes>
-            <Route path={PagePath.ACCOUNT} element={<AccountPage />} />
+            <Route index path={PagePath.DASHBOARD} element={<AccountPage />} />
 
             <Route path={PagePath.CLAIM_AIRDROP} element={<ClaimLayout />}>
               <Route index element={<ClaimPage />} />
+
               <Route
                 path={PagePath.CLAIM_AIRDROP_SUCCESS}
                 element={<ClaimSuccessPage />}

apps/tangle-dapp/src/app/providers.tsx

@@ -10,6 +10,7 @@ import { z } from 'zod';
 
 import HyperlaneWarpContext from '../pages/bridge/context/HyperlaneWarpContext';
 import BridgeTxQueueProvider from '../pages/bridge/context/BridgeTxQueueContext/BridgeTxQueueProvider';
+import PolkadotApiProvider from '@webb-tools/tangle-shared-ui/context/PolkadotApiProvider';
 
 const appEvent = new AppEvent();
 
@@ -49,7 +50,9 @@ const Providers = ({
           blockedCountryCodes={blockedCountryCodes}
         >
           <HyperlaneWarpContext>
-            <BridgeTxQueueProvider>{children}</BridgeTxQueueProvider>
+            <BridgeTxQueueProvider>
+              <PolkadotApiProvider>{children}</PolkadotApiProvider>
+            </BridgeTxQueueProvider>
           </HyperlaneWarpContext>
         </OFACFilterProvider>
       </WebbProvider>

apps/tangle-dapp/src/components/GlassCardWithLogo.tsx → apps/tangle-dapp/src/components/CardWithTangleLogo.tsx

@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge';
 
 import TangleBigLogo from './TangleBigLogo';
 
-const GlassCardWithLogo: FC<PropsWithChildren<{ className?: string }>> = ({
+const CardWithTangleLogo: FC<PropsWithChildren<{ className?: string }>> = ({
   children,
   className,
 }) => {
@@ -23,4 +23,4 @@ const GlassCardWithLogo: FC<PropsWithChildren<{ className?: string }>> = ({
   );
 };
 
-export default GlassCardWithLogo;
+export default CardWithTangleLogo;

apps/tangle-dapp/src/components/HowItWorks/index.tsx

@@ -27,7 +27,7 @@ const HowItWorks = forwardRef<HTMLDivElement, HowItWorksProps>(
         ref={ref}
       >
         <Typography variant="body1" fw="bold">
-          How it works
+          How It Works
         </Typography>
 
         <div>{children}</div>

apps/tangle-dapp/src/components/LiquidStaking/LsMyPoolsTable.tsx

@@ -332,15 +332,13 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
       <TableStatus
         title="Wallet Not Connected"
         description="Once you've connected an account, you'll be able to increase stake, unstake, and manage your liquid staking pools here."
-        icon="🔍"
       />
     );
   } else if (pools.length === 0) {
     return (
       <TableStatus
         title="No Active Pools"
         description="You haven't staked in any pools yet. Select a pool and start liquid staking to earn rewards! Once you've staked or created a pool, you'll be able to manage your stake and configure the pool here."
-        icon="🔍"
         buttonText="Learn More"
         buttonProps={{
           href: TANGLE_DOCS_LIQUID_STAKING_URL,

apps/tangle-dapp/src/components/LiquidStaking/LsUnbondingTable.tsx

@@ -157,7 +157,6 @@ const LsUnbondingTable: FC = () => {
       <TableStatus
         title="Connect a wallet to continue"
         description="Once you've connected an account, you'll be able to see and manage your liquid staking pools' unstaking requests here."
-        icon="🔍"
       />
     );
   } else if (unstakeRequests === null) {
@@ -167,7 +166,6 @@ const LsUnbondingTable: FC = () => {
       <TableStatus
         title="No Unstake Requests"
         description="Once you've scheduled an unstake request, you'll see information about it here."
-        icon="🔍"
         buttonText="Learn More"
         buttonProps={{
           href: TANGLE_DOCS_LIQUID_STAKING_URL,

apps/tangle-dapp/src/components/LiquidStaking/LstIcon.tsx

@@ -17,7 +17,7 @@ const getTailwindSize = (size: LstIconSize) => {
     case LstIconSize.MD:
       return 'w-[30px] h-[30px]';
     case LstIconSize.LG:
-      return 'w-[38px] h-[38px]';
+      return 'w-[40px] h-[40px]';
   }
 };
 

apps/tangle-dapp/src/components/Lists/AssetList.tsx

@@ -9,7 +9,6 @@ import {
 import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
 import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';
 import { ComponentProps, useMemo, useState } from 'react';
-import { Link } from 'react-router';
 import { twMerge } from 'tailwind-merge';
 import { Address } from 'viem';
 
@@ -96,9 +95,10 @@ export const AssetList = ({
                   </Typography>
 
                   {asset.explorerUrl !== undefined && (
-                    <Link
-                      to={asset.explorerUrl}
+                    <a
+                      href={asset.explorerUrl}
                       target="_blank"
+                      rel="noreferrer"
                       className="z-20 flex items-center gap-1 text-mono-120 dark:text-mono-100 dark:hover:text-mono-80"
                     >
                       <Typography
@@ -111,7 +111,7 @@ export const AssetList = ({
                       </Typography>
 
                       <ArrowRightUp className="fill-current dark:fill-current" />
-                    </Link>
+                    </a>
                   )}
                 </div>
               </div>

apps/tangle-dapp/src/components/NominationsTable/NominationsTable.tsx

@@ -29,6 +29,7 @@ import calculateCommission from '../../utils/calculateCommission';
 import { HeaderCell, StringCell } from '../tableCells';
 import PercentageCell from '../tableCells/PercentageCell';
 import TokenAmountCell from '../tableCells/TokenAmountCell';
+import pluralize from '@webb-tools/webb-ui-components/utils/pluralize';
 
 const columnHelper = createColumnHelper<Nominee>();
 
@@ -51,7 +52,11 @@ const columns = [
               : identityName}
           </Typography>
 
-          <CopyWithTooltip textToCopy={address} isButton={false} />
+          <CopyWithTooltip
+            copyLabel="Copy Address"
+            textToCopy={address}
+            isButton={false}
+          />
         </div>
       );
     },
@@ -150,6 +155,7 @@ const NominationsTable: FC<NominationsTableProps> = ({
         tableProps={table}
         isPaginated
         totalRecords={nominees.length}
+        title={pluralize('nomination', nominees.length !== 1)}
       />
     </div>
   );

apps/tangle-dapp/src/components/PayoutTable/PayoutTable.tsx

@@ -84,7 +84,11 @@ const PayoutTable: FC<PayoutTableProps> = ({
                 {identity === address ? shortenString(address, 6) : identity}
               </Typography>
 
-              <CopyWithTooltip textToCopy={address} isButton={false} />
+              <CopyWithTooltip
+                copyLabel="Copy Address"
+                textToCopy={address}
+                isButton={false}
+              />
             </div>
           );
         },

apps/tangle-dapp/src/components/Sidebar/sidebarProps.ts

@@ -29,8 +29,8 @@ import { PagePath } from '../../types';
 // Only show the services dropdown if on development mode.
 const SIDEBAR_STATIC_ITEMS: SideBarItemProps[] = [
   {
-    name: 'Account',
-    href: PagePath.ACCOUNT,
+    name: 'Dashboard',
+    href: PagePath.DASHBOARD,
     isInternal: true,
     isNext: false,
     Icon: HomeFillIcon,

apps/tangle-dapp/src/components/ValidatorSelectionTable/ValidatorSelectionTable.tsx

@@ -21,7 +21,6 @@ import {
   AmountFormatStyle,
   Avatar,
   CheckBox,
-  Chip,
   CopyWithTooltip,
   fuzzyFilter,
   Input,
@@ -31,7 +30,6 @@ import {
 } from '@webb-tools/webb-ui-components';
 import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import formatFractional from '@webb-tools/webb-ui-components/utils/formatFractional';
-import pluralize from '@webb-tools/webb-ui-components/utils/pluralize';
 import assertSubstrateAddress from '@webb-tools/webb-ui-components/utils/assertSubstrateAddress';
 import cx from 'classnames';
 import {
@@ -46,10 +44,11 @@ import {
 
 import { Validator } from '../../types';
 import calculateCommission from '../../utils/calculateCommission';
-import { ContainerSkeleton } from '..';
 import { HeaderCell } from '../tableCells';
 import TokenAmountCell from '../tableCells/TokenAmountCell';
 import { ValidatorSelectionTableProps } from './types';
+import SkeletonRows from '../SkeletonRows';
+import addCommasToNumber from '@webb-tools/webb-ui-components/utils/addCommasToNumber';
 
 const columnHelper = createColumnHelper<Validator>();
 
@@ -123,6 +122,7 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
                 </Typography>
 
                 <CopyWithTooltip
+                  copyLabel="Copy Address"
                   textToCopy={address}
                   isButton={false}
                   iconClassName="!fill-mono-160 dark:!fill-mono-80"
@@ -141,6 +141,7 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
           ),
         filterFn: (row, _, filterValue) => {
           const { address, identityName } = row.original;
+
           return (
             address.toLowerCase().includes(filterValue.toLowerCase()) ||
             identityName.toLowerCase().includes(filterValue.toLowerCase())
@@ -152,15 +153,11 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
           <HeaderCell title="Total Staked" className="justify-start" />
         ),
         cell: (props) => (
-          <div className="flex items-center justify-start">
-            <Chip color="dark-grey" className="normal-case">
-              <TokenAmountCell
-                amount={props.getValue()}
-                className="text-mono-0"
-                formatStyle={AmountFormatStyle.SHORT}
-              />
-            </Chip>
-          </div>
+          <TokenAmountCell
+            amount={props.getValue()}
+            className="text-mono-0"
+            formatStyle={AmountFormatStyle.SHORT}
+          />
         ),
         sortingFn: (rowA, rowB, columnId) =>
           sortValidatorsBy(
@@ -176,9 +173,9 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
           <HeaderCell title="Nominations" className="justify-start" />
         ),
         cell: (props) => (
-          <div className="flex items-center justify-start">
-            <Chip color="dark-grey">{props.getValue()}</Chip>
-          </div>
+          <Typography variant="body1">
+            {addCommasToNumber(props.getValue())}
+          </Typography>
         ),
         sortingFn: (rowA, rowB, columnId) =>
           sortValidatorsBy(
@@ -195,11 +192,9 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
           <HeaderCell title="Commission" className="justify-start" />
         ),
         cell: (props) => (
-          <div className="flex items-center justify-start">
-            <Chip color="dark-grey">
-              {formatFractional(calculateCommission(props.getValue()))}
-            </Chip>
-          </div>
+          <Typography variant="body1">
+            {formatFractional(calculateCommission(props.getValue()))}
+          </Typography>
         ),
         sortingFn: (rowA, rowB, columnId) =>
           sortValidatorsBy(
@@ -210,10 +205,6 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
             isDesc,
           ),
       }),
-      columnHelper.accessor('identityName', {
-        header: () => <HeaderCell title="Identity" />,
-        cell: (props) => props.getValue(),
-      }),
     ],
     [isDesc],
   );
@@ -265,48 +256,39 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
 
   const table = useReactTable(tableProps);
 
+  if (isLoading) {
+    return <SkeletonRows />;
+  }
+
+  const paginationLabel = `Selected validators: ${Object.keys(rowSelection).length}/${table.getPreFilteredRowModel().rows.length}`;
+
   return (
     <div className="flex flex-col gap-2">
       <Input
         id="search-validators-selection"
         rightIcon={<Search className="mr-2" />}
-        placeholder="Search validators..."
+        placeholder="Search validators by identity or address..."
         value={searchQuery}
         onChange={setSearchQuery}
         className="mb-1"
         isControlled
       />
 
-      {isLoading && <ContainerSkeleton className="h-[340px] w-full" />}
-
-      {!isLoading &&
-        (allValidators.length === 0 ? (
-          <div className="h-[340px] flex items-center justify-center">
-            <Typography variant="body1" fw="normal">
-              No results found
-            </Typography>
-          </div>
-        ) : (
-          <Table
-            variant={TableVariant.NESTED_IN_MODAL}
-            tableClassName={cx('[&_tr]:[overflow-anchor:_none]')}
-            paginationClassName="bg-mono-0 dark:bg-mono-180 p-2"
-            tableWrapperClassName="max-h-[340px] overflow-y-scroll"
-            tableProps={table}
-            isPaginated
-            title={pluralize('validator', allValidators.length !== 1)}
-          />
-        ))}
-
-      {!isLoading && allValidators.length > 0 && (
-        <Typography
-          variant="body1"
-          fw="normal"
-          className="text-mono-200 dark:text-mono-0"
-        >
-          Selected: {Object.keys(rowSelection).length}/
-          {table.getPreFilteredRowModel().rows.length}
-        </Typography>
+      {allValidators.length === 0 ? (
+        <div className="h-[340px] flex items-center justify-center">
+          <Typography variant="body1" fw="normal">
+            No results found
+          </Typography>
+        </div>
+      ) : (
+        <Table
+          variant={TableVariant.EMBEDDED_IN_MODAL}
+          tableClassName={cx('[&_tr]:[overflow-anchor:_none]')}
+          tableWrapperClassName="max-h-[340px] overflow-y-scroll"
+          tableProps={table}
+          isPaginated
+          paginationLabelOverride={paginationLabel}
+        />
       )}
     </div>
   );

apps/tangle-dapp/src/components/ValidatorTable/ValidatorTable.tsx

@@ -146,6 +146,7 @@ const ValidatorTable: FC<ValidatorTableProps> = ({
               </Typography>
 
               <CopyWithTooltip
+                copyLabel="Copy Address"
                 textToCopy={address}
                 isButton={false}
                 iconClassName="!fill-mono-160 dark:!fill-mono-80"

apps/tangle-dapp/src/components/account/AccountSummaryCard.tsx

@@ -1,13 +1,13 @@
 import { FC } from 'react';
 
-import GlassCardWithLogo from '../GlassCardWithLogo';
+import CardWithTangleLogo from '../CardWithTangleLogo';
 import AccountAddress from './AccountAddress';
 import Actions from './Actions';
 import Balance from './Balance';
 
 const AccountSummaryCard: FC<{ className?: string }> = ({ className }) => {
   return (
-    <GlassCardWithLogo className={className}>
+    <CardWithTangleLogo className={className}>
       <div className="w-full space-y-5">
         <header>
           <AccountAddress />
@@ -17,7 +17,7 @@ const AccountSummaryCard: FC<{ className?: string }> = ({ className }) => {
 
         <Actions />
       </div>
-    </GlassCardWithLogo>
+    </CardWithTangleLogo>
   );
 };
 

apps/tangle-dapp/src/components/account/Actions.tsx

@@ -71,7 +71,7 @@ const Actions: FC = () => {
           label="Payouts"
           Icon={CoinsLineIcon}
           internalHref={StaticSearchQueryPath.PayoutsTable}
-          tooltip="You have payouts available. Click here to visit the Payouts page."
+          tooltip="There are nomination payouts available to claim. Click here to visit the Payouts page."
         />
       )}