chore: Tangle dapp & cloud fixes (#3053)

Author: devpavan04

.windsurfrules .windsurf/rules/general.md.windsurfrules renamed to .windsurf/rules/general.md

@@ -1,3 +1,7 @@
+---
+trigger: always_on
+---
+
 # Tangle dApp Monorepo
 
 This project is Tangle dApp - a monorepo containing multiple dApp projects that serve as the frontend for our custom Substrate-based network/node 'Tangle'. Tangle is a cryptocurrency network created using the Substrate framework, which is part of the Polkadot ecosystem. Tangle is a layer 1 for on-demand services where developers can build and monetize decentralized services using Tangle Blueprints. They can also deploy innovative infrastructure in any blockchain ecosystem.
@@ -61,4 +65,4 @@ Tangle dApp is the main product and focus of the monorepo. Here's the tech stack
 
 # Library: `libs/tangle-shared-ui`
 
-Contains shared logic, hooks, and utility functions between multiple Tangle dApps, such as `tangle-cloud` & `tangle-dapp`. This differs from `ui-components` in that `ui-components` is more geared towards general & re-usable components, not necesarily tied to any context, whereas `libs/tangle-shared-ui` is specific to Tangle-related logic.
+Contains shared logic, hooks, and utility functions between multiple Tangle dApps, such as `tangle-cloud` & `tangle-dapp`. This differs from `ui-components` in that `ui-components` is more geared towards general & re-usable components, not necesarily tied to any context, whereas `libs/tangle-shared-ui` is specific to Tangle-related logic.

apps/leaderboard/src/features/leaderboard/components/LeaderboardTable.tsx

@@ -2,7 +2,7 @@ import { CrossCircledIcon } from '@radix-ui/react-icons';
 import { Spinner } from '@tangle-network/icons';
 import { Search } from '@tangle-network/icons/Search';
 import TableStatus from '@tangle-network/tangle-shared-ui/components/tables/TableStatus';
-import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
+import type { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
 import {
   Input,
   isSubstrateAddress,
@@ -206,7 +206,9 @@ export const LeaderboardTable = () => {
     pageSize: 15,
   });
 
-  const [networkTab, setNetworkTab] = useState<NetworkType>('MAINNET');
+  const [networkTab, setNetworkTab] = useState<NetworkType>(
+    'MAINNET' as NetworkType,
+  );
 
   const {
     data: latestBlock,

apps/tangle-cloud/src/pages/blueprints/[id]/page.tsx

@@ -22,13 +22,9 @@ import { z } from 'zod';
 
 const RestakeOperatorAction: FC<PropsWithChildren<{ address: string }>> = ({
   children,
-  address,
 }) => {
   return (
-    <Link
-      to={`${TangleDAppPagePath.RESTAKE_OPERATOR}/${address}`}
-      target="_blank"
-    >
+    <Link to={TangleDAppPagePath.RESTAKE_DELEGATE} target="_blank">
       {children}
     </Link>
   );

apps/tangle-cloud/src/types/index.ts

@@ -14,8 +14,9 @@ export enum PagePath {
 }
 
 export enum TangleDAppPagePath {
-  RESTAKE_OPERATOR = `${TANGLE_DAPP_URL}restake/operators`,
   RESTAKE_DEPOSIT = `${TANGLE_DAPP_URL}restake?vault={{vault}}`,
+  RESTAKE_DELEGATE = `${TANGLE_DAPP_URL}restake/delegate`,
+  RESTAKE_OPERATOR = `${TANGLE_DAPP_URL}restake/operators`,
 }
 
 export type ApprovalConfirmationFormFields = {

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

@@ -4,8 +4,10 @@ import { Avatar } from '@tangle-network/ui-components/components/Avatar';
 import { Typography } from '@tangle-network/ui-components/typography/Typography';
 import { shortenHex } from '@tangle-network/ui-components/utils/shortenHex';
 import { shortenString } from '@tangle-network/ui-components/utils/shortenString';
+import { toSubstrateAddress } from '@tangle-network/ui-components/utils/toSubstrateAddress';
+import useNetworkStore from '@tangle-network/tangle-shared-ui/context/useNetworkStore';
 import isEqual from 'lodash/isEqual';
-import { type ComponentProps, memo, type ReactNode } from 'react';
+import { type ComponentProps, memo, type ReactNode, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { isHex } from 'viem';
 
@@ -26,6 +28,14 @@ const AvatarWithText = ({
   overrideTypographyProps,
   ...props
 }: Props) => {
+  const ss58Prefix = useNetworkStore((store) => store.network.ss58Prefix);
+
+  const tangleFormattedAddress = useMemo(() => {
+    return isEthereumAddress(accountAddress)
+      ? accountAddress
+      : toSubstrateAddress(accountAddress, ss58Prefix);
+  }, [accountAddress, ss58Prefix]);
+
   return (
     <div
       {...props}
@@ -36,7 +46,7 @@ const AvatarWithText = ({
     >
       <Avatar
         theme={isEthereumAddress(accountAddress) ? 'ethereum' : 'substrate'}
-        value={accountAddress}
+        value={tangleFormattedAddress}
         {...overrideAvatarProps}
         className={twMerge(
           `${getFlexBasic('lg')} shrink-0`,
@@ -55,9 +65,9 @@ const AvatarWithText = ({
           )}
         >
           {identityName ||
-            (isHex(accountAddress)
-              ? shortenHex(accountAddress)
-              : shortenString(accountAddress))}
+            (isHex(tangleFormattedAddress)
+              ? shortenHex(tangleFormattedAddress)
+              : shortenString(tangleFormattedAddress))}
         </Typography>
 
         {description}

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

@@ -3,8 +3,10 @@ import {
   Avatar,
   KeyValueWithButton,
   shortenString,
+  toSubstrateAddress,
 } from '@tangle-network/ui-components';
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
+import useNetworkStore from '@tangle-network/tangle-shared-ui/context/useNetworkStore';
 import LogoListItem from './LogoListItem';
 
 type Props = {
@@ -20,17 +22,25 @@ const OperatorListItem: FC<Props> = ({
   rightUpperText,
   rightBottomText,
 }) => {
-  const shortAccountAddress = shortenString(accountAddress);
+  const ss58Prefix = useNetworkStore((store) => store.network.ss58Prefix);
+
+  const tangleFormattedAddress = useMemo(() => {
+    return toSubstrateAddress(accountAddress, ss58Prefix);
+  }, [accountAddress, ss58Prefix]);
+
+  const shortAccountAddress = shortenString(tangleFormattedAddress);
   const leftUpperContent = identity ?? shortAccountAddress;
 
   return (
     <LogoListItem
-      logo={<Avatar size="lg" theme="substrate" value={accountAddress} />}
+      logo={
+        <Avatar size="lg" theme="substrate" value={tangleFormattedAddress} />
+      }
       leftUpperContent={leftUpperContent}
       leftBottomContent={
         <KeyValueWithButton
           size="sm"
-          keyValue={accountAddress}
+          keyValue={tangleFormattedAddress}
           valueFontWeight="normal"
           valueVariant="body1"
         />

apps/tangle-dapp/src/containers/restaking/RestakeOverviewTabs.tsx

@@ -37,13 +37,15 @@ type Props = {
   operatorMap: OperatorMap;
   operatorTVL?: OperatorTvlGroup['operatorTvl'];
   action: RestakeAction;
+  onOperatorJoined?: () => void;
 };
 
 const RestakeOverviewTabs: FC<Props> = ({
   operatorConcentration,
   operatorMap,
   operatorTVL,
   action,
+  onOperatorJoined,
 }) => {
   const [tab, setTab] = useState(RestakeTab.RESTAKE);
 
@@ -97,6 +99,7 @@ const RestakeOverviewTabs: FC<Props> = ({
           onRestakeClickedPagePath={PagePath.RESTAKE_DELEGATE}
           onRestakeClickedQueryParamKey={QueryParamKey.RESTAKE_OPERATOR}
           isLoading={isLoadingAssets}
+          onOperatorJoined={onOperatorJoined}
         />
       </TabContent>
 

apps/tangle-dapp/src/containers/restaking/RestakeTabContent.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useEffect, type FC } from 'react';
+import { ReactNode, useCallback, useEffect, useState, type FC } from 'react';
 import RestakeTabs from '../../pages/restake/RestakeTabs';
 import { RestakeAction, RestakeTab } from '../../constants';
 import DepositForm from '../../pages/restake/deposit/DepositForm';
@@ -30,11 +30,20 @@ type Props = {
 
 const RestakeTabContent: FC<Props> = ({ tab }) => {
   const { result: delegatorInfo } = useRestakeDelegatorInfo();
+
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+
+  const handleOperatorJoined = useCallback(() => {
+    setTimeout(() => {
+      setRefreshTrigger((v) => v + 1);
+    }, 2000);
+  }, []);
+
   const {
     result: operatorMap,
     isLoading: isLoadingOperators,
     error: operatorMapError,
-  } = useRestakeOperatorMap();
+  } = useRestakeOperatorMap(refreshTrigger);
   const { operatorConcentration, operatorTvl } = useRestakeTvl(delegatorInfo);
   const navigate = useNavigate();
 
@@ -84,6 +93,7 @@ const RestakeTabContent: FC<Props> = ({ tab }) => {
             onRestakeClickedPagePath={PagePath.RESTAKE_DELEGATE}
             onRestakeClickedQueryParamKey={QueryParamKey.RESTAKE_OPERATOR}
             isLoading={isLoadingOperators}
+            onOperatorJoined={handleOperatorJoined}
           />
         );
       case RestakeTab.BLUEPRINTS:

apps/tangle-dapp/src/features/points/data/useActiveAccountPoints.ts

@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 import { ReactQueryKey } from '../../../constants/reactQuery';
 import useNetworkStore from '@tangle-network/tangle-shared-ui/context/useNetworkStore';
 import { NetworkId } from '@tangle-network/ui-components/constants/networks';
-import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
+import type { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
 
 const GetAccountPointsQueryDocument = graphql(/* GraphQL */ `
   query GetAccountPoints($account: String!) {
@@ -37,7 +37,9 @@ export default function useActiveAccountPoints() {
     queryKey: [ReactQueryKey.GetAccountPoints, activeAccount],
     queryFn: () =>
       fetcher(
-        network.id === NetworkId.TANGLE_MAINNET ? 'MAINNET' : 'TESTNET',
+        (network.id === NetworkId.TANGLE_MAINNET
+          ? 'MAINNET'
+          : 'TESTNET') as NetworkType,
         activeAccount,
       ),
     retry: 10,

apps/tangle-dapp/src/pages/restake/delegate/index.tsx

@@ -69,7 +69,7 @@ const RestakeDelegateForm: FC<Props> = ({ assets }) => {
     watch,
     formState: { errors, isValid, isSubmitting },
   } = useForm<DelegationFormFields>({
-    mode: 'onBlur',
+    mode: 'onChange',
   });
 
   const selectedOperatorAddress = watch('operatorAccountId');