feat(tangle-dapp): Implement LS pools update roles modal (#2675)

apps/tangle-cloud/tailwind.config.js

@@ -25,28 +25,9 @@ module.exports = {
       },
       backgroundImage: {
         glass:
-          'linear-gradient(180deg,rgba(255,255,255,0.80) 0%,rgba(255,255,255,0.00) 100%)',
+          'linear-gradient(180deg,rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.30) 100%)',
         glass_dark:
-          'linear-gradient(180deg,rgba(43,47,64,0.80) 0%,rgba(43,47,64,0.00) 100%)',
-        token_info_card:
-          'linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 100%)',
-        token_info_card_dark:
-          'linear-gradient(180deg, #2B2F40 0%, rgba(43, 47, 64, 0.5) 100%)',
-        validator_table: 'linear-gradient(180deg, #C0C5D800 0%, #FFFFFF66 40%)',
-        validator_table_dark:
-          'linear-gradient(180deg, #707AA600 0%, #2B2F4066 40%)',
-        liquid_staking_banner:
-          'linear-gradient(78.54deg, rgba(199, 201, 229, 0.6) 8.85%, rgba(236, 238, 249, 0.6) 55.91%, rgba(244, 235, 240, 0.6) 127.36%)',
-        liquid_staking_banner_dark:
-          'linear-gradient(78.54deg, rgba(30, 32, 65, 0.8) 8.85%, rgba(38, 52, 116, 0.8) 55.91%, rgba(113, 61, 89, 0.8) 127.36%)',
-        liquid_staking_tokens_table:
-          'linear-gradient(180deg, rgba(255, 255, 255, 0.5) -428.82%, rgba(255, 255, 255, 0) 180.01%)',
-        liquid_staking_tokens_table_dark:
-          'linear-gradient(180deg, rgba(43, 47, 64, 0.5) -428.82%, rgba(43, 47, 64, 0) 180.01%)',
-        liquid_staking_input:
-          'linear-gradient(360deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.6) 100%)',
-        liquid_staking_input_dark:
-          'linear-gradient(180deg, rgba(43, 47, 64, 0.4) 0%, rgba(112, 122, 166, 0.04) 100%)',
+          'linear-gradient(180deg,rgba(43,47,64,0.85) 0%,rgba(43,47,64,0.30) 100%)',
       },
     },
   },

apps/tangle-dapp/app/blueprints/[id]/useBlueprintDetails.ts

@@ -17,6 +17,7 @@ import {
   getAccountInfo,
   getMultipleAccountInfo,
 } from '@webb-tools/tangle-shared-ui/utils/polkadot/identity';
+import { SubstrateAddress } from '@webb-tools/webb-ui-components/types/address';
 import { useCallback } from 'react';
 import { combineLatest, switchMap } from 'rxjs';
 
@@ -123,7 +124,7 @@ export default function useBlueprintDetails(id: string) {
 async function getBlueprintOperators(
   rpcEndpoint: string,
   assetMap: AssetMap,
-  operatorAccountSet: Set<string>,
+  operatorAccountSet: Set<SubstrateAddress>,
   operatorMap: OperatorMap,
   operatorTVL: Record<string, number>,
   operatorConcentration: Record<string, number | null>,

apps/tangle-dapp/app/bridge/hooks/useAmountInStr.ts

@@ -1,10 +1,10 @@
 'use client';
 
+import { formatBn } from '@webb-tools/webb-ui-components';
 import { useMemo } from 'react';
 import { parseUnits } from 'viem';
 
 import { useBridge } from '../../../context/BridgeContext';
-import formatBn from '../../../utils/formatBn';
 import useDecimals from './useDecimals';
 
 export default function useAmountInStr() {

apps/tangle-dapp/app/bridge/hooks/useBalance.ts

@@ -4,14 +4,14 @@ import { isAddress } from '@polkadot/util-crypto';
 import { ChainConfig } from '@webb-tools/dapp-config/chains/chain-config.interface';
 import { AddressType } from '@webb-tools/dapp-config/types';
 import ensureError from '@webb-tools/tangle-shared-ui/utils/ensureError';
+import { isEvmAddress } from '@webb-tools/webb-ui-components';
 import { useWebbUI } from '@webb-tools/webb-ui-components/hooks/useWebbUI';
 import Decimal from 'decimal.js';
 import { useCallback, useEffect, useMemo } from 'react';
 import useSWR from 'swr';
 
 import { useBridge } from '../../../context/BridgeContext';
 import useActiveAccountAddress from '../../../hooks/useActiveAccountAddress';
-import { isEvmAddress } from '../../../utils/isEvmAddress';
 import {
   getEvmContractBalance,
   getEvmNativeBalance,

apps/tangle-dapp/app/claim/EligibleSection.tsx

@@ -13,6 +13,7 @@ import { useWebContext } from '@webb-tools/api-provider-environment/webb-context
 import { WebbError, WebbErrorCodes } from '@webb-tools/dapp-types/WebbError';
 import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore';
 import { getApiPromise } from '@webb-tools/tangle-shared-ui/utils/polkadot/api';
+import { isValidAddress } from '@webb-tools/webb-ui-components';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import { CheckBox } from '@webb-tools/webb-ui-components/components/CheckBox';
 import { useWebbUI } from '@webb-tools/webb-ui-components/hooks/useWebbUI';
@@ -30,7 +31,6 @@ import useActiveAccountAddress from '../../hooks/useActiveAccountAddress';
 import toAsciiHex from '../../utils/claims/toAsciiHex';
 import formatTangleBalance from '../../utils/formatTangleBalance';
 import getStatement, { Statement } from '../../utils/getStatement';
-import isValidAddress from '../../utils/isValidAddress';
 import type { ClaimInfoType } from './types';
 
 enum Step {

apps/tangle-dapp/app/nomination/[validatorAddress]/page.tsx

@@ -1,4 +1,4 @@
-import { isAddress } from '@polkadot/util-crypto';
+import { isSubstrateAddress } from '@webb-tools/webb-ui-components';
 import { notFound } from 'next/navigation';
 
 import { IS_PRODUCTION_ENV } from '../../../constants/env';
@@ -16,7 +16,7 @@ export default function ValidatorDetails({
 }) {
   const { validatorAddress } = params;
 
-  if (!isAddress(validatorAddress)) {
+  if (!isSubstrateAddress(validatorAddress)) {
     notFound();
   }
 

apps/tangle-dapp/app/restake/operators/[address]/page.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import useRestakeOperatorMap from '@webb-tools/tangle-shared-ui/data/restake/useRestakeOperatorMap';
+import { isSubstrateAddress } from '@webb-tools/webb-ui-components';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
+import { notFound } from 'next/navigation';
 import { ComponentProps, useMemo } from 'react';
 
 import useOperatorBlueprints from '../../../../data/blueprints/useOperatorBlueprints';
@@ -43,6 +45,10 @@ const Page = ({ params: { address } }: { params: { address: string } }) => {
     [blueprints],
   );
 
+  if (!isSubstrateAddress(address)) {
+    return notFound();
+  }
+
   return (
     <div className="space-y-10">
       <div className="flex flex-col md:flex-row items-stretch gap-5 max-h-none md:max-h-[290px]">

apps/tangle-dapp/app/restake/overview/OperatorsTable.tsx

@@ -3,6 +3,7 @@
 import { Search } from '@webb-tools/icons/Search';
 import type { OperatorMap } from '@webb-tools/tangle-shared-ui/types/restake';
 import { Input } from '@webb-tools/webb-ui-components/components/Input';
+import assertSubstrateAddress from '@webb-tools/webb-ui-components/utils/assertSubstrateAddress';
 import { type ComponentProps, type FC, useMemo, useState } from 'react';
 
 import OperatorsTableUI from '../../../components/tables/Operators';
@@ -36,7 +37,8 @@ const OperatorsTable: FC<Props> = ({
   const operators = useMemo(
     () =>
       Object.entries(operatorMap).map<OperatorUI>(
-        ([address, { delegations, restakersCount }]) => {
+        ([addressString, { delegations, restakersCount }]) => {
+          const address = assertSubstrateAddress(addressString);
           const tvlInUsd = operatorTVL?.[address] ?? null;
           const concentrationPercentage =
             operatorConcentration?.[address] ?? null;

apps/tangle-dapp/app/restake/stake/page.tsx

@@ -6,7 +6,7 @@ import isDefined from '@webb-tools/dapp-types/utils/isDefined';
 import useRestakeOperatorMap from '@webb-tools/tangle-shared-ui/data/restake/useRestakeOperatorMap';
 import { useRpcSubscription } from '@webb-tools/tangle-shared-ui/hooks/usePolkadotApi';
 import useQueryState from '@webb-tools/tangle-shared-ui/hooks/useQueryState';
-import { Card } from '@webb-tools/webb-ui-components';
+import { Card, isSubstrateAddress } from '@webb-tools/webb-ui-components';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import type { TokenListCardProps } from '@webb-tools/webb-ui-components/components/ListCard/types';
 import { Modal } from '@webb-tools/webb-ui-components/components/Modal';
@@ -120,7 +120,13 @@ export default function Page() {
   }, [defaultAssetId, setValue]);
 
   useEffect(() => {
-    if (!operatorParam || typeof operatorParam !== 'string') return;
+    if (
+      !operatorParam ||
+      typeof operatorParam !== 'string' ||
+      !isSubstrateAddress(operatorParam)
+    ) {
+      return;
+    }
 
     if (!operatorMap[operatorParam]) return;
 

apps/tangle-dapp/app/restake/unstake/types.ts

@@ -1,9 +1,11 @@
+import { SubstrateAddress } from '@webb-tools/webb-ui-components/types/address';
+
 export type UnstakeRequestTableData = {
   amount: number;
   amountRaw: bigint;
   assetId: string;
   assetSymbol: string;
   timeRemaining: number;
-  operatorAccountId: string;
+  operatorAccountId: SubstrateAddress;
   operatorIdentityName?: string | null;
 };

apps/tangle-dapp/components/AddressInput.tsx

@@ -1,10 +1,14 @@
 'use client';
 
-import { isAddress } from '@polkadot/util-crypto';
-import { Avatar, Button, Input } from '@webb-tools/webb-ui-components';
+import {
+  Avatar,
+  Button,
+  Input,
+  isEvmAddress,
+  isSubstrateAddress,
+} from '@webb-tools/webb-ui-components';
 import { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 
-import { isEvmAddress } from '../utils/isEvmAddress';
 import InputWrapper, { InputWrapperProps } from './InputWrapper';
 
 export enum AddressType {
@@ -52,7 +56,7 @@ const AddressInput: FC<AddressInputProps> = ({
       }
 
       const isEvm = isEvmAddress(newValue);
-      const isSubstrate = isAddress(newValue);
+      const isSubstrate = isSubstrateAddress(newValue);
 
       if (!isEvm && !isSubstrate) {
         setErrorMessage('Invalid address');

apps/tangle-dapp/components/AddressLink.tsx

@@ -1,10 +1,9 @@
 import { HexString } from '@polkadot/util/types';
 import { ArrowRightUp } from '@webb-tools/icons';
 import { shortenString, Typography } from '@webb-tools/webb-ui-components';
+import { SubstrateAddress } from '@webb-tools/webb-ui-components/types/address';
 import { FC, MouseEvent, useCallback } from 'react';
 
-import { SubstrateAddress } from '../types/utils';
-
 export type AddressLinkProps = {
   address: SubstrateAddress | HexString;
 };

apps/tangle-dapp/components/HeaderChip/ChipText.tsx

@@ -2,8 +2,8 @@
 
 import { Typography } from '@webb-tools/webb-ui-components';
 import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
+import addCommasToNumber from '@webb-tools/webb-ui-components/utils/addCommasToNumber';
 
-import addCommasToNumber from '../../utils/addCommasToNumber';
 import dataHooks from './dataHooks';
 import type { HeaderChipItemProps } from './types';
 

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

@@ -13,6 +13,7 @@ import { AddCircleLineIcon, SubtractCircleLineIcon } from '@webb-tools/icons';
 import { LsProtocolId } from '@webb-tools/tangle-shared-ui/types/liquidStaking';
 import {
   ActionsDropdown,
+  AmountFormatStyle,
   Avatar,
   AvatarGroup,
   Table,
@@ -30,10 +31,10 @@ import { FC, useEffect, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { LsPool } from '../../constants/liquidStaking/types';
+import LsUpdateRolesModal from '../../containers/LsUpdateRolesModal';
 import useLsSetStakingIntent from '../../data/liquidStaking/useLsSetStakingIntent';
 import { useLsStore } from '../../data/liquidStaking/useLsStore';
 import useIsAccountConnected from '../../hooks/useIsAccountConnected';
-import { AmountFormatStyle } from '../../utils/formatDisplayAmount';
 import getLsProtocolDef from '../../utils/liquidStaking/getLsProtocolDef';
 import tryEncodeAddressWithPrefix from '../../utils/liquidStaking/tryEncodeAddressWithPrefix';
 import pluralize from '../../utils/pluralize';
@@ -68,6 +69,7 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
 
   const [isUpdateCommissionModalOpen, setIsUpdateCommissionModalOpen] =
     useState(false);
+  const [isUpdateRolesModalOpen, setIsUpdateRolesModalOpen] = useState(false);
 
   const [{ pageIndex, pageSize }, setPagination] = useState({
     pageIndex: 0,
@@ -186,6 +188,7 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
             <TokenAmountCell
               amount={props.getValue()}
               decimals={lsProtocol.decimals}
+              formatStyle={AmountFormatStyle.SHORT}
             />
           );
         },
@@ -229,8 +232,10 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
 
             actionItems.push({
               label: 'Update Roles',
-              // TODO: Implement onClick handler.
-              onClick: () => void 0,
+              onClick: () => {
+                setSelectedPoolId(props.row.original.id);
+                setIsUpdateRolesModalOpen(true);
+              },
             });
           }
 
@@ -318,10 +323,10 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
 
   // Reset the selected pool's ID after all the management modals are closed.
   useEffect(() => {
-    if (!isUpdateCommissionModalOpen) {
+    if (!isUpdateCommissionModalOpen && !isUpdateRolesModalOpen) {
       setSelectedPoolId(null);
     }
-  }, [isUpdateCommissionModalOpen]);
+  }, [isUpdateCommissionModalOpen, isUpdateRolesModalOpen]);
 
   // TODO: Missing error and loading state. Should ideally abstract all these states into an abstract Table component, since it's getting reused in multiple places.
   if (!isAccountConnected) {
@@ -357,6 +362,12 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
         isPaginated
       />
 
+      <LsUpdateRolesModal
+        poolId={selectedPoolId}
+        isOpen={isUpdateRolesModalOpen}
+        setIsOpen={setIsUpdateRolesModalOpen}
+      />
+
       <UpdateCommissionModal
         poolId={selectedPoolId}
         currentCommissionFractional={selectedPoolCommission}

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

@@ -15,12 +15,12 @@ import {
   Typography,
 } from '@webb-tools/webb-ui-components';
 import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
+import addCommasToNumber from '@webb-tools/webb-ui-components/utils/addCommasToNumber';
 import { FC, useMemo, useState } from 'react';
 
 import { LsPoolUnstakeRequest } from '../../constants/liquidStaking/types';
 import useLsUnbonding from '../../data/liquidStaking/useLsUnbonding';
 import useIsAccountConnected from '../../hooks/useIsAccountConnected';
-import addCommasToNumber from '../../utils/addCommasToNumber';
 import pluralize from '../../utils/pluralize';
 import { ContainerSkeleton, TableStatus } from '..';
 import TokenAmountCell from '../tableCells/TokenAmountCell';

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

@@ -2,6 +2,7 @@ import { TokenIcon } from '@webb-tools/icons';
 import { LsProtocolId } from '@webb-tools/tangle-shared-ui/types/liquidStaking';
 import Image from 'next/image';
 import { FC } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 import getLsProtocolDef from '../../utils/liquidStaking/getLsProtocolDef';
 
@@ -40,7 +41,10 @@ const LstIcon: FC<LstIconProps> = ({
     />
   ) : (
     <Image
-      className="rounded-full bg-mono-40 dark:bg-mono-160"
+      className={twMerge(
+        'rounded-full bg-mono-40 dark:bg-mono-160 object-cover object-center',
+        getTailwindSize(size),
+      )}
       src={iconUrl}
       alt={`${lsProtocol.name} icon`}
       width={size}