chore: Tangle dapp & cloud fixes

.windsurfrules → .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');

apps/tangle-dapp/src/pages/restake/deposit/DepositForm.tsx

@@ -59,7 +59,7 @@ const DepositForm: FC<Props> = ({
     watch,
     formState: { errors, isSubmitting, isValid },
   } = useForm<DepositFormFields>({
-    mode: 'onBlur',
+    mode: 'onChange',
     defaultValues: {
       sourceTypedChainId: getDefaultTypedChainId(activeTypedChainId),
     },

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

@@ -1,22 +1,29 @@
 import useRestakeDelegatorInfo from '@tangle-network/tangle-shared-ui/data/restake/useRestakeDelegatorInfo';
 import useRestakeOperatorMap from '@tangle-network/tangle-shared-ui/data/restake/useRestakeOperatorMap';
 import useRestakeTvl from '@tangle-network/tangle-shared-ui/data/restake/useRestakeTvl';
-import { FC } from 'react';
-import { Navigate, useParams } from 'react-router';
-import { RestakeAction } from '../../constants';
 import RestakeOverviewTabs from '../../containers/restaking/RestakeOverviewTabs';
 import { PagePath } from '../../types';
+import { RestakeAction } from '../../constants';
+import { Navigate, useParams } from 'react-router';
 import isEnumValue from '../../utils/isEnumValue';
+import { FC, useCallback, useState } from 'react';
 
 const RestakePage: FC = () => {
   const { action } = useParams();
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
   const { result: delegatorInfo } = useRestakeDelegatorInfo();
-  const { result: operatorMap } = useRestakeOperatorMap();
+  const { result: operatorMap } = useRestakeOperatorMap(refreshTrigger);
 
   const { operatorConcentration, operatorTvl } = useRestakeTvl(delegatorInfo);
 
+  const handleOperatorJoined = useCallback(() => {
+    setTimeout(() => {
+      setRefreshTrigger((v) => v + 1);
+    }, 2000);
+  }, []);
+
   // If provided, make sure that the action parameter is valid.
-  if (action !== undefined && !isEnumValue(action, RestakeAction)) {
+  if (action !== undefined && !isEnumValue(RestakeAction, action)) {
     return <Navigate to={PagePath.NOT_FOUND} />;
   } else if (action === undefined) {
     return <Navigate to={PagePath.RESTAKE_DEPOSIT} />;
@@ -28,7 +35,8 @@ const RestakePage: FC = () => {
         operatorMap={operatorMap}
         operatorTVL={operatorTvl}
         operatorConcentration={operatorConcentration}
-        action={action}
+        action={action as RestakeAction}
+        onOperatorJoined={handleOperatorJoined}
       />
     </div>
   );

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

@@ -63,7 +63,7 @@ const RestakeUnstakeForm: FC<RestakeUnstakeFormProps> = ({ assets }) => {
     formState: { errors, isValid, isSubmitting },
     watch,
   } = useForm<UnstakeFormFields>({
-    mode: 'onBlur',
+    mode: 'onChange',
   });
 
   const switchChain = useSwitchChain();

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

@@ -61,7 +61,7 @@ const RestakeWithdrawForm: FC<Props> = ({ assets }) => {
     reset,
     formState: { errors, isValid, isSubmitting },
   } = useForm<WithdrawFormFields>({
-    mode: 'onBlur',
+    mode: 'onChange',
   });
 
   const switchChain = useSwitchChain();

libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx

@@ -76,15 +76,21 @@ const NetworkSelectionButton: FC<NetworkSelectionButtonProps> = ({
     () => {
       if (isConnecting) {
         return 'Connecting';
-      } else if (loading) {
+      }
+
+      if (loading) {
         return 'Loading';
       }
 
       const UNKNOWN_NETWORK = 'Unknown Network';
 
+      if (!activeWallet) {
+        return network?.name ?? UNKNOWN_NETWORK;
+      }
+
       if (disableChainSelection) {
         return activeChain?.name === 'Tangle Mainnet'
-          ? activeChain.name
+          ? (activeChain?.name ?? network?.name ?? UNKNOWN_NETWORK)
           : (activeChain?.displayName ??
               activeChain?.name ??
               network?.name ??
@@ -99,7 +105,7 @@ const NetworkSelectionButton: FC<NetworkSelectionButtonProps> = ({
       );
     },
     // prettier-ignore
-    [isConnecting, loading, disableChainSelection, network?.name, activeChain?.displayName, activeChain?.name],
+    [isConnecting, loading, disableChainSelection, network?.name, activeWallet, activeChain?.displayName, activeChain?.name],
   );
 
   const isWrongEvmNetwork = useMemo(() => {