chore(repo): Incorporate feedbacks

apps/tangle-dapp/app/blueprints/TopBanner.tsx

@@ -1,11 +1,10 @@
 import { ArrowRight } from '@webb-tools/icons';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
+import { BLUEPRINT_DOCS } from '@webb-tools/webb-ui-components/constants/tangleDocs';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
 import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import { BLUEPRINT_DOCS } from '../../constants/links';
-
 const TopBanner: FC = () => {
   return (
     <div

apps/tangle-dapp/app/blueprints/[id]/page.tsx

@@ -6,8 +6,8 @@ import { Typography } from '@webb-tools/webb-ui-components/typography/Typography
 import { notFound } from 'next/navigation';
 import { FC } from 'react';
 
+import OperatorsTable from '../../../components/tables/Operators';
 import BlueprintHeader from './BlueprintHeader';
-import OperatorsTable from './OperatorsTable';
 import useBlueprintDetails from './useBlueprintDetails';
 
 type Props = {
@@ -47,10 +47,13 @@ const BlueprintDetailsPage: FC<Props> = ({ params: { id } }) => {
     <div className="space-y-5">
       <BlueprintHeader blueprint={result.details} />
 
-      <OperatorsTable
-        blueprintName={result.details.name}
-        operators={result.operators}
-      />
+      <div className="space-y-5">
+        <Typography variant="h4" fw="bold">
+          Operators running {result.details.name}
+        </Typography>
+
+        <OperatorsTable data={result.operators} />
+      </div>
     </div>
   );
 };

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

@@ -2,7 +2,6 @@ import type { Option } from '@polkadot/types';
 import type { TanglePrimitivesServicesOperatorPreferences } from '@polkadot/types/lookup';
 import { useCallback } from 'react';
 import { combineLatest, switchMap } from 'rxjs';
-import { formatUnits } from 'viem';
 
 import useNetworkStore from '../../../context/useNetworkStore';
 import { extractOperatorData } from '../../../data/blueprints/utils/blueprintHelpers';
@@ -19,6 +18,7 @@ import {
   getAccountInfo,
   getMultipleAccountInfo,
 } from '../../../utils/polkadot';
+import { delegationsToVaultTokens } from '../../restake/utils';
 
 export default function useBlueprintDetails(id: string) {
   const { rpcEndpoint } = useNetworkStore();
@@ -142,20 +142,7 @@ async function getBlueprintOperators(
       concentrationPercentage,
       restakersCount: operatorMap[address]?.restakersCount,
       tvlInUsd,
-      vaultTokens: delegations
-        .map(({ amount, assetId }) => {
-          const asset = assetMap[assetId];
-          if (asset === undefined) return null;
-
-          return {
-            name: asset.name,
-            symbol: asset.symbol,
-            amount: +formatUnits(amount, asset.decimals),
-          } satisfies Operator['vaultTokens'][number];
-        })
-        .filter((token): token is Operator['vaultTokens'][number] =>
-          Boolean(token),
-        ),
+      vaultTokens: delegationsToVaultTokens(delegations, assetMap),
     } satisfies Operator;
   });
 }

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

@@ -3,12 +3,12 @@
 import { Search } from '@webb-tools/icons/Search';
 import { Input } from '@webb-tools/webb-ui-components/components/Input';
 import { type ComponentProps, type FC, useMemo, useState } from 'react';
-import { formatUnits } from 'viem';
 
 import OperatorsTableUI from '../../components/tables/Operators';
 import { useRestakeContext } from '../../context/RestakeContext';
 import useIdentities from '../../data/useIdentities';
 import type { OperatorMap } from '../../types/restake';
+import { delegationsToVaultTokens } from './utils';
 
 type OperatorUI = NonNullable<
   ComponentProps<typeof OperatorsTableUI>['data']
@@ -37,13 +37,6 @@ const OperatorsTable: FC<Props> = ({
     () =>
       Object.entries(operatorMap).map<OperatorUI>(
         ([address, { delegations, restakersCount }]) => {
-          const vaultAssets = delegations
-            .map((delegation) => ({
-              asset: assetMap[delegation.assetId],
-              amount: delegation.amount,
-            }))
-            .filter((vaultAsset) => Boolean(vaultAsset.asset));
-
           const tvlInUsd = operatorTVL?.[address] ?? null;
           const concentrationPercentage =
             operatorConcentration?.[address] ?? null;
@@ -54,11 +47,7 @@ const OperatorsTable: FC<Props> = ({
             identityName: identities[address]?.name ?? '',
             restakersCount,
             tvlInUsd,
-            vaultTokens: vaultAssets.map(({ asset, amount }) => ({
-              amount: +formatUnits(amount, asset.decimals),
-              name: asset.name,
-              symbol: asset.symbol,
-            })),
+            vaultTokens: delegationsToVaultTokens(delegations, assetMap),
           };
         },
       ),

apps/tangle-dapp/app/restake/TableTabs.tsx

@@ -43,7 +43,7 @@ const TableTabs: FC<Props> = ({
 
   const { rewardConfig } = useRestakeRewardConfig();
 
-  // Recalculate vaults (vaults) data from assetMap
+  // Recalculate vaults data from assetMap
   const vaults = useMemo(() => {
     const vaults: Record<string, VaultUI> = {};
 

apps/tangle-dapp/app/restake/utils.ts

@@ -1,3 +1,7 @@
+import type { VaultToken } from '../../components/tables/Operators/types';
+import type { AssetMap, OperatorDelegatorBond } from '../../types/restake';
+import safeFormatUnits from '../../utils/safeFormatUnits';
+
 export function calculateTimeRemaining(
   currentRound: number,
   requestedRound: number,
@@ -14,3 +18,27 @@ export function calculateTimeRemaining(
 export function isScheduledRequestReady(timeRemaining: number) {
   return timeRemaining === 0;
 }
+
+export function delegationsToVaultTokens(
+  delegations: OperatorDelegatorBond[],
+  assetMap: AssetMap,
+) {
+  return delegations.reduce<VaultToken[]>(
+    (vaultTokenArr, { assetId, amount }) => {
+      const asset = assetMap[assetId];
+
+      if (asset === undefined) return vaultTokenArr;
+
+      const parsed = safeFormatUnits(amount, asset.decimals);
+
+      if (parsed.success === false) return vaultTokenArr;
+
+      return vaultTokenArr.concat({
+        name: asset.name,
+        symbol: asset.symbol,
+        amount: parsed.value,
+      });
+    },
+    [],
+  );
+}

apps/tangle-dapp/components/tables/Operators/VaultsDropdown.tsx

@@ -36,11 +36,15 @@ const columns = [
         Amount
       </Typography>
     ),
-    cell: (props) => (
-      <Typography variant="body1" ta="right">
-        {getRoundedAmountString(props.getValue())}
-      </Typography>
-    ),
+    cell: (props) => {
+      const value = props.getValue();
+
+      return (
+        <Typography variant="body1" ta="right">
+          {typeof value === 'string' ? value : getRoundedAmountString(value)}
+        </Typography>
+      );
+    },
   }),
 ];
 

apps/tangle-dapp/components/tables/Operators/types.ts

@@ -6,7 +6,7 @@ import type { TableStatus } from '../../TableStatus';
 export type VaultToken = {
   name: string;
   symbol: string;
-  amount: number;
+  amount: number | string;
 };
 
 export type OperatorData = {

apps/tangle-dapp/data/blueprints/useOperatorBlueprints.ts

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import { catchError, map, of } from 'rxjs';
 
 import useApiRx from '../../hooks/useApiRx';
+import { TangleError, TangleErrorCode } from '../../types/error';
 import { toPrimitiveBlueprint } from './utils/toPrimitiveBlueprint';
 import toPrimitiveService from './utils/toPrimitiveService';
 
@@ -18,9 +19,9 @@ const useOperatorBlueprints = (operatorAccount: string) => {
         if (
           apiRx.rpc?.services?.queryServicesWithBlueprintsByOperator ===
           undefined
-        ) {
-          return of<OperatorBlueprint[]>([]);
-        }
+        )
+          // TODO: Should return the error here instead of throw it
+          throw new TangleError(TangleErrorCode.FEATURE_NOT_SUPPORTED);
 
         return apiRx.rpc.services
           .queryServicesWithBlueprintsByOperator(operatorAccount)
@@ -42,6 +43,7 @@ const useOperatorBlueprints = (operatorAccount: string) => {
                 error,
               );
 
+              // TODO: Should return the error here
               return of<OperatorBlueprint[]>([]);
             }),
           );