feat(tangle-dapp): Show validator address when avatar is hovered

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

@@ -16,6 +16,9 @@ import {
   AvatarGroup,
   Table,
   TANGLE_DOCS_LIQUID_STAKING_URL,
+  Tooltip,
+  TooltipBody,
+  TooltipTrigger,
   Typography,
 } from '@webb-tools/webb-ui-components';
 import { ActionItemType } from '@webb-tools/webb-ui-components/components/ActionsDropdown/types';
@@ -32,6 +35,7 @@ import {
 import useLsSetStakingIntent from '../../data/liquidStaking/useLsSetStakingIntent';
 import { useLsStore } from '../../data/liquidStaking/useLsStore';
 import useIsAccountConnected from '../../hooks/useIsAccountConnected';
+import tryEncodeAddressWithPrefix from '../../utils/liquidStaking/tryEncodeAddressWithPrefix';
 import pluralize from '../../utils/pluralize';
 import { TableStatus } from '..';
 import BlueIconButton from '../BlueIconButton';
@@ -96,13 +100,32 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
       }),
       COLUMN_HELPER.accessor('ownerAddress', {
         header: () => 'Owner',
-        cell: (props) => (
-          <Avatar
-            sourceVariant="address"
-            value={props.row.original.ownerAddress}
-            theme="substrate"
-          />
-        ),
+        cell: (props) => {
+          const ownerAddress = props.getValue();
+
+          if (ownerAddress === undefined) {
+            return EMPTY_VALUE_PLACEHOLDER;
+          }
+
+          return (
+            <Tooltip>
+              <TooltipTrigger>
+                <Avatar
+                  sourceVariant="address"
+                  value={props.getValue()}
+                  theme="substrate"
+                />
+              </TooltipTrigger>
+
+              <TooltipBody className="max-w-none">
+                {tryEncodeAddressWithPrefix(
+                  ownerAddress,
+                  props.row.original.protocolId,
+                )}
+              </TooltipBody>
+            </Tooltip>
+          );
+        },
       }),
       COLUMN_HELPER.accessor('validators', {
         header: () => 'Validators',
@@ -112,14 +135,22 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
           ) : (
             <AvatarGroup total={props.row.original.validators.length}>
               {props.row.original.validators.map((substrateAddress) => (
-                <Avatar
-                  key={substrateAddress}
-                  // TODO: In the future, it'd be better if we show the identity of the validator, rather than just the address.
-                  tooltip={substrateAddress}
-                  sourceVariant="address"
-                  value={substrateAddress}
-                  theme="substrate"
-                />
+                <Tooltip key={substrateAddress}>
+                  <TooltipTrigger>
+                    <Avatar
+                      sourceVariant="address"
+                      value={substrateAddress}
+                      theme="substrate"
+                    />
+                  </TooltipTrigger>
+
+                  <TooltipBody className="max-w-none">
+                    {tryEncodeAddressWithPrefix(
+                      substrateAddress,
+                      props.row.original.protocolId,
+                    )}
+                  </TooltipBody>
+                </Tooltip>
               ))}
             </AvatarGroup>
           ),

apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx

@@ -15,6 +15,9 @@ import {
   Button,
   Pagination,
   Table,
+  Tooltip,
+  TooltipBody,
+  TooltipTrigger,
   Typography,
 } from '@webb-tools/webb-ui-components';
 import { FC, useMemo, useState } from 'react';
@@ -28,6 +31,7 @@ import { EMPTY_VALUE_PLACEHOLDER } from '../../constants';
 import { LsPool, LsPoolDisplayName } from '../../constants/liquidStaking/types';
 import useLsSetStakingIntent from '../../data/liquidStaking/useLsSetStakingIntent';
 import { useLsStore } from '../../data/liquidStaking/useLsStore';
+import tryEncodeAddressWithPrefix from '../../utils/liquidStaking/tryEncodeAddressWithPrefix';
 import pluralize from '../../utils/pluralize';
 
 export type LsPoolsTableProps = {
@@ -73,13 +77,32 @@ const LsPoolsTable: FC<LsPoolsTableProps> = ({ pools, isShown }) => {
     }),
     COLUMN_HELPER.accessor('ownerAddress', {
       header: () => 'Owner',
-      cell: (props) => (
-        <Avatar
-          sourceVariant="address"
-          value={props.row.original.ownerAddress}
-          theme="substrate"
-        />
-      ),
+      cell: (props) => {
+        const ownerAddress = props.getValue();
+
+        if (ownerAddress === undefined) {
+          return EMPTY_VALUE_PLACEHOLDER;
+        }
+
+        return (
+          <Tooltip>
+            <TooltipTrigger>
+              <Avatar
+                sourceVariant="address"
+                value={props.getValue()}
+                theme="substrate"
+              />
+            </TooltipTrigger>
+
+            <TooltipBody className="max-w-none">
+              {tryEncodeAddressWithPrefix(
+                ownerAddress,
+                props.row.original.protocolId,
+              )}
+            </TooltipBody>
+          </Tooltip>
+        );
+      },
     }),
     COLUMN_HELPER.accessor('validators', {
       header: () => 'Validators',
@@ -89,12 +112,22 @@ const LsPoolsTable: FC<LsPoolsTableProps> = ({ pools, isShown }) => {
         ) : (
           <AvatarGroup total={props.row.original.validators.length}>
             {props.row.original.validators.map((substrateAddress) => (
-              <Avatar
-                key={substrateAddress}
-                sourceVariant="address"
-                value={substrateAddress}
-                theme="substrate"
-              />
+              <Tooltip key={substrateAddress}>
+                <TooltipTrigger>
+                  <Avatar
+                    sourceVariant="address"
+                    value={substrateAddress}
+                    theme="substrate"
+                  />
+                </TooltipTrigger>
+
+                <TooltipBody className="max-w-none">
+                  {tryEncodeAddressWithPrefix(
+                    substrateAddress,
+                    props.row.original.protocolId,
+                  )}
+                </TooltipBody>
+              </Tooltip>
             ))}
           </AvatarGroup>
         ),

apps/tangle-dapp/data/liquidStaking/useLsPools.ts

@@ -1,7 +1,7 @@
 import { BN_ZERO, u8aToString } from '@polkadot/util';
 import { useMemo } from 'react';
 
-import { LsPool, LsProtocolId } from '../../constants/liquidStaking/types';
+import { LsPool } from '../../constants/liquidStaking/types';
 import useNetworkFeatures from '../../hooks/useNetworkFeatures';
 import { NetworkFeature } from '../../types';
 import assertSubstrateAddress from '../../utils/assertSubstrateAddress';
@@ -10,13 +10,15 @@ import useLsPoolCompoundApys from './apy/useLsPoolCompoundApys';
 import useLsBondedPools from './useLsBondedPools';
 import useLsPoolMembers from './useLsPoolMembers';
 import useLsPoolNominations from './useLsPoolNominations';
+import { useLsStore } from './useLsStore';
 
 const useLsPools = (): Map<number, LsPool> | null | Error => {
   const networkFeatures = useNetworkFeatures();
   const poolNominations = useLsPoolNominations();
   const bondedPools = useLsBondedPools();
   const poolMembers = useLsPoolMembers();
   const compoundApys = useLsPoolCompoundApys();
+  const { lsProtocolId } = useLsStore();
 
   const isSupported = networkFeatures.includes(NetworkFeature.LsPools);
 
@@ -84,15 +86,22 @@ const useLsPools = (): Map<number, LsPool> | null | Error => {
         totalStaked,
         apyPercentage,
         members: membersMap,
-        // TODO: Hardcoded for now. Determine the protocol ID.
-        protocolId: LsProtocolId.TANGLE_LOCAL,
+        // TODO: Ensure that this also works for the Restaking Parachain, once it's implemented.
+        protocolId: lsProtocolId,
       };
 
       return [poolId, pool] as const;
     });
 
     return new Map(keyValuePairs);
-  }, [bondedPools, poolNominations, compoundApys, poolMembers, isSupported]);
+  }, [
+    bondedPools,
+    poolNominations,
+    compoundApys,
+    poolMembers,
+    isSupported,
+    lsProtocolId,
+  ]);
 
   // In case that the user connects to testnet or mainnet, but the network
   // doesn't have the liquid staking pools feature.

apps/tangle-dapp/utils/liquidStaking/tryEncodeAddressWithPrefix.ts

@@ -0,0 +1,19 @@
+import { LsProtocolId } from '../../constants/liquidStaking/types';
+import { SubstrateAddress } from '../../types/utils';
+import { toSubstrateAddress } from '../toSubstrateAddress';
+import getLsProtocolDef from './getLsProtocolDef';
+import getLsTangleNetwork from './getLsTangleNetwork';
+
+const tryEncodeAddressWithPrefix = (
+  address: SubstrateAddress,
+  lsProtocolId: LsProtocolId,
+): SubstrateAddress => {
+  const lsProtocol = getLsProtocolDef(lsProtocolId);
+  const tangleNetwork = getLsTangleNetwork(lsProtocol.networkId);
+
+  return tangleNetwork.ss58Prefix === undefined
+    ? address
+    : toSubstrateAddress(address, tangleNetwork.ss58Prefix);
+};
+
+export default tryEncodeAddressWithPrefix;

libs/webb-ui-components/src/components/Pagination/Pagination.tsx

@@ -43,17 +43,19 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
 
       // If not the last page, return the itemsPerPage
       if (!isLastPage) {
-        return itemsPerPage?.toLocaleString() ?? '-';
+        return itemsPerPage?.toLocaleString() ?? '—';
       }
 
       // Otherwise, calculate the remaining items on the last page
       const remainingItems = totalItems ? totalItems % (itemsPerPage ?? 1) : 0;
 
       return remainingItems > 0
         ? remainingItems.toLocaleString()
-        : (itemsPerPage?.toLocaleString() ?? '-');
+        : (itemsPerPage?.toLocaleString() ?? '—');
     }, [currentPage, itemsPerPage, totalItems, totalPages]);
 
+    const titleSection = title !== undefined ? `${title} ` : '';
+
     return (
       <div
         {...props}
@@ -68,7 +70,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
         <p className="body1 text-mono-160 dark:text-mono-100">
           {totalItems === 0
             ? 'No items'
-            : `Showing ${showingItemsCount} ${title ?? ''}out of ${totalItems ?? '-'}`}
+            : `Showing ${showingItemsCount} ${titleSection}out of ${totalItems ?? '—'}`}
         </p>
 
         {/** Right buttons */}