diff --git a/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx b/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx index b7dc2a4cf8..c1a18ab340 100644 --- a/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx +++ b/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 = ({ pools, isShown }) => { }), COLUMN_HELPER.accessor('ownerAddress', { header: () => 'Owner', - cell: (props) => ( - - ), + cell: (props) => { + const ownerAddress = props.getValue(); + + if (ownerAddress === undefined) { + return EMPTY_VALUE_PLACEHOLDER; + } + + return ( + + + + + + + {tryEncodeAddressWithPrefix( + ownerAddress, + props.row.original.protocolId, + )} + + + ); + }, }), COLUMN_HELPER.accessor('validators', { header: () => 'Validators', @@ -112,14 +135,22 @@ const LsMyPoolsTable: FC = ({ pools, isShown }) => { ) : ( {props.row.original.validators.map((substrateAddress) => ( - + + + + + + + {tryEncodeAddressWithPrefix( + substrateAddress, + props.row.original.protocolId, + )} + + ))} ), diff --git a/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx b/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx index 6d42bc8ae6..603a0e2266 100644 --- a/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx +++ b/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 = ({ pools, isShown }) => { }), COLUMN_HELPER.accessor('ownerAddress', { header: () => 'Owner', - cell: (props) => ( - - ), + cell: (props) => { + const ownerAddress = props.getValue(); + + if (ownerAddress === undefined) { + return EMPTY_VALUE_PLACEHOLDER; + } + + return ( + + + + + + + {tryEncodeAddressWithPrefix( + ownerAddress, + props.row.original.protocolId, + )} + + + ); + }, }), COLUMN_HELPER.accessor('validators', { header: () => 'Validators', @@ -89,12 +112,22 @@ const LsPoolsTable: FC = ({ pools, isShown }) => { ) : ( {props.row.original.validators.map((substrateAddress) => ( - + + + + + + + {tryEncodeAddressWithPrefix( + substrateAddress, + props.row.original.protocolId, + )} + + ))} ), diff --git a/apps/tangle-dapp/data/liquidStaking/useLsPools.ts b/apps/tangle-dapp/data/liquidStaking/useLsPools.ts index ef84a19bf6..80458bafba 100644 --- a/apps/tangle-dapp/data/liquidStaking/useLsPools.ts +++ b/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,6 +10,7 @@ import useLsPoolCompoundApys from './apy/useLsPoolCompoundApys'; import useLsBondedPools from './useLsBondedPools'; import useLsPoolMembers from './useLsPoolMembers'; import useLsPoolNominations from './useLsPoolNominations'; +import { useLsStore } from './useLsStore'; const useLsPools = (): Map | null | Error => { const networkFeatures = useNetworkFeatures(); @@ -17,6 +18,7 @@ const useLsPools = (): Map | null | Error => { 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 | 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. diff --git a/apps/tangle-dapp/utils/liquidStaking/tryEncodeAddressWithPrefix.ts b/apps/tangle-dapp/utils/liquidStaking/tryEncodeAddressWithPrefix.ts new file mode 100644 index 0000000000..74bec2bf2e --- /dev/null +++ b/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; diff --git a/libs/webb-ui-components/src/components/Pagination/Pagination.tsx b/libs/webb-ui-components/src/components/Pagination/Pagination.tsx index 8ddcbe1210..bafa2d59fd 100644 --- a/libs/webb-ui-components/src/components/Pagination/Pagination.tsx +++ b/libs/webb-ui-components/src/components/Pagination/Pagination.tsx @@ -43,7 +43,7 @@ export const Pagination = React.forwardRef( // 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 @@ -51,9 +51,11 @@ export const Pagination = React.forwardRef( return remainingItems > 0 ? remainingItems.toLocaleString() - : (itemsPerPage?.toLocaleString() ?? '-'); + : (itemsPerPage?.toLocaleString() ?? '—'); }, [currentPage, itemsPerPage, totalItems, totalPages]); + const titleSection = title !== undefined ? `${title} ` : ''; + return (
(

{totalItems === 0 ? 'No items' - : `Showing ${showingItemsCount} ${title ?? ''}out of ${totalItems ?? '-'}`} + : `Showing ${showingItemsCount} ${titleSection}out of ${totalItems ?? '—'}`}

{/** Right buttons */}