fix(tangle-cloud): Fixes & Improvements (#3038)

Author: devpavan04

apps/tangle-cloud/src/pages/operators/page.tsx

@@ -3,15 +3,23 @@ import useRestakeDelegatorInfo from '@tangle-network/tangle-shared-ui/data/resta
 import useRestakeOperatorMap from '@tangle-network/tangle-shared-ui/data/restake/useRestakeOperatorMap';
 import useRestakeTvl from '@tangle-network/tangle-shared-ui/data/restake/useRestakeTvl';
 import { DelegatorInfo } from '@tangle-network/tangle-shared-ui/types/restake';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 
 const Page: FC = () => {
   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 as DelegatorInfo | null,
   );
@@ -30,6 +38,7 @@ const Page: FC = () => {
   return (
     <div className="!mt-16">
       <OperatorsTableContainer
+        onOperatorJoined={handleOperatorJoined}
         operatorConcentration={operatorConcentration}
         operatorMap={operatorMap}
         operatorTvl={operatorTvl}

apps/tangle-dapp/src/components/account/ProtocolStatisticCard/VaultsHightlightCard.tsx

@@ -197,7 +197,7 @@ const VaultHighlight = ({
       <Typography
         variant="h4"
         fw="bold"
-        className="text-mono-0 dark:text-mono-0"
+        className="text-mono-180 dark:text-mono-0"
       >
         {vaultName}
       </Typography>
@@ -208,8 +208,8 @@ const VaultHighlight = ({
           result={vaultTvl || EMPTY_VALUE_PLACEHOLDER}
           isLoading={isVaultTvlLoading}
           error={null}
-          labelClassName="text-mono-60 dark:text-mono-60"
-          valueClassName="text-mono-0 dark:text-mono-0"
+          labelClassName="text-mono-180 dark:text-mono-60"
+          valueClassName="text-mono-200 dark:text-mono-0"
         />
 
         <StatsItem
@@ -221,8 +221,8 @@ const VaultHighlight = ({
           }
           isLoading={isVaultParticipantsLoading}
           error={vaultParticipantsError}
-          labelClassName="text-mono-60 dark:text-mono-60"
-          valueClassName="text-mono-0 dark:text-mono-0"
+          labelClassName="text-mono-180 dark:text-mono-60"
+          valueClassName="text-mono-200 dark:text-mono-0"
         />
       </div>
     </div>

apps/tangle-dapp/src/features/claimCredits/components/ClaimCreditsButton.tsx

@@ -19,6 +19,8 @@ import {
 import { useCallback, useMemo, useState } from 'react';
 import useCredits from '../../../data/credits/useCredits';
 import useClaimCreditsTx from '../../../data/credits/useClaimCreditsTx';
+import { meetsMinimumClaimThreshold } from '../../../utils/creditConstraints';
+import CreditVelocityTooltip from './CreditVelocityTooltip';
 
 const ClaimCreditsButton = () => {
   const { data, error, refetch, isPending } = useCredits();
@@ -37,6 +39,10 @@ const ClaimCreditsButton = () => {
     );
   }, [data]);
 
+  const meetsMinimumThreshold = useMemo(() => {
+    return meetsMinimumClaimThreshold(data?.amount);
+  }, [data?.amount]);
+
   // Hide if there's no data
   if (data === undefined) {
     return;
@@ -67,21 +73,35 @@ const ClaimCreditsButton = () => {
       </DropdownButton>
 
       <DropdownBody align="start" sideOffset={8} className="p-4 space-y-3">
-        <Typography variant="body3" fw="bold" className="!text-muted uppercase">
-          Unclaimed AI Credits
-        </Typography>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Typography variant="body1" fw="bold">
+              Unclaimed AI Credits
+            </Typography>
+            <CreditVelocityTooltip currentAmount={data?.amount} />
+          </div>
+
+          <Typography variant="body1" fw="bold">
+            {formattedCredits}
+          </Typography>
+        </div>
 
-        <Typography variant="h4" component="p" fw="bold">
-          {formattedCredits}
-        </Typography>
+        {data?.amount && !data.amount.isZero() && !meetsMinimumThreshold && (
+          <Typography
+            variant="body2"
+            className="text-blue-600 dark:text-blue-400"
+          >
+            Minimum 0.01 required to claim
+          </Typography>
+        )}
 
         <Typography variant="body2" fw="semibold" className="!text-muted">
-          Associate your account to claim these credits.
+          Associate your AI app account to claim these credits.
         </Typography>
 
         <div className="space-y-2">
           <Typography variant="body2" fw="semibold">
-            Account ID
+            AI App User ID
           </Typography>
           <TextField.Root
             error={inputError}
@@ -94,7 +114,7 @@ const ClaimCreditsButton = () => {
                 setOffchainAccountId(e.target.value);
                 setInputError('');
               }}
-              placeholder="Enter your account ID"
+              placeholder="Enter your AI app user ID"
             />
           </TextField.Root>
         </div>
@@ -162,11 +182,17 @@ const CreditsButton = ({
 
   const isLoading = useMemo(() => status === TxStatus.PROCESSING, [status]);
   const hasCredits = useMemo(() => credits && !credits.isZero(), [credits]);
+  const meetsMinimumThreshold = useMemo(() => {
+    return meetsMinimumClaimThreshold(credits);
+  }, [credits]);
+  const canClaim = useMemo(() => {
+    return hasCredits && meetsMinimumThreshold;
+  }, [hasCredits, meetsMinimumThreshold]);
 
   return (
     <Button
       isFullWidth
-      isDisabled={!hasCredits || isLoading || !offchainAccountId.trim()}
+      isDisabled={!canClaim || isLoading || !offchainAccountId.trim()}
       onClick={handleClick}
       isLoading={isLoading}
     >

apps/tangle-dapp/src/features/claimCredits/components/ClaimCreditsModal.tsx

@@ -18,6 +18,8 @@ import {
 } from '@tangle-network/ui-components';
 import useCredits from '../../../data/credits/useCredits';
 import useClaimCreditsTx from '../../../data/credits/useClaimCreditsTx';
+import { meetsMinimumClaimThreshold } from '../../../utils/creditConstraints';
+import CreditVelocityTooltip from './CreditVelocityTooltip';
 
 type Props = {
   isOpen: boolean;
@@ -63,6 +65,8 @@ const ClaimCreditsModal: FC<Props> = ({ isOpen, setIsOpen }) => {
 
   const isLoading = status === TxStatus.PROCESSING;
   const hasCredits = data?.amount && !data.amount.isZero();
+  const meetsMinimumThreshold = meetsMinimumClaimThreshold(data?.amount);
+  const canClaim = hasCredits && meetsMinimumThreshold;
 
   return (
     <Modal open={isOpen} onOpenChange={setIsOpen}>
@@ -79,24 +83,39 @@ const ClaimCreditsModal: FC<Props> = ({ isOpen, setIsOpen }) => {
           ) : hasCredits ? (
             <>
               <div className="flex flex-col items-center justify-center p-4 bg-glass dark:bg-glass_dark rounded-xl border border-mono-0 dark:border-mono-180">
-                <Typography variant="body1" fw="bold">
-                  Available Credits
-                </Typography>
+                <div className="flex items-center gap-2">
+                  <Typography variant="body1" fw="bold">
+                    Available Credits
+                  </Typography>
+                  <CreditVelocityTooltip
+                    currentAmount={data?.amount}
+                    tokenSymbol={nativeTokenSymbol}
+                  />
+                </div>
 
                 <Typography variant="h3" fw="bold">
                   {formattedAmount} {nativeTokenSymbol}
                 </Typography>
+
+                {!meetsMinimumThreshold && (
+                  <Typography
+                    variant="body2"
+                    className="text-yellow-600 dark:text-yellow-400 mt-2"
+                  >
+                    Minimum 0.01 {nativeTokenSymbol} required to claim
+                  </Typography>
+                )}
               </div>
 
               <div className="space-y-2">
                 <Typography variant="body1" fw="bold">
-                  Account ID
+                  AI App User ID
                 </Typography>
                 <Typography
                   variant="body2"
                   className="text-mono-120 dark:text-mono-80"
                 >
-                  Enter your account ID to associate with these credits
+                  Enter your AI app user ID to associate with these credits
                 </Typography>
 
                 <TextField.Root
@@ -110,14 +129,14 @@ const ClaimCreditsModal: FC<Props> = ({ isOpen, setIsOpen }) => {
                       setOffchainAccountId(e.target.value);
                       setInputError('');
                     }}
-                    placeholder="Enter your account ID"
+                    placeholder="Enter your AI app user ID"
                   />
                 </TextField.Root>
               </div>
 
               <Button
                 isFullWidth
-                isDisabled={!hasCredits || isLoading}
+                isDisabled={!canClaim || isLoading}
                 isLoading={isLoading}
                 loadingText="Claiming credits..."
                 onClick={handleClaimCredits}

apps/tangle-dapp/src/features/claimCredits/components/CreditVelocityTooltip.tsx

@@ -0,0 +1,72 @@
+import { FC } from 'react';
+import { BN } from '@polkadot/util';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { Typography } from '@tangle-network/ui-components/typography/Typography';
+import {
+  Tooltip,
+  TooltipBody,
+  TooltipTrigger,
+} from '@tangle-network/ui-components';
+import { TANGLE_TOKEN_DECIMALS } from '@tangle-network/dapp-config';
+import {
+  formatDisplayAmount,
+  AmountFormatStyle,
+} from '@tangle-network/ui-components';
+import {
+  getCreditsNeededForMinimum,
+  MINIMUM_CLAIMABLE_CREDITS,
+} from '../../../utils/creditConstraints';
+
+type Props = {
+  currentAmount: BN | null | undefined;
+  tokenSymbol?: string;
+};
+
+const CreditVelocityTooltip: FC<Props> = ({
+  currentAmount,
+  tokenSymbol = 'TNT',
+}) => {
+  const creditsNeeded = getCreditsNeededForMinimum(currentAmount);
+
+  const formattedMinimum = formatDisplayAmount(
+    MINIMUM_CLAIMABLE_CREDITS,
+    TANGLE_TOKEN_DECIMALS,
+    AmountFormatStyle.SHORT,
+  );
+
+  const formattedCreditsNeeded = formatDisplayAmount(
+    creditsNeeded,
+    TANGLE_TOKEN_DECIMALS,
+    AmountFormatStyle.SHORT,
+  );
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <InfoCircledIcon className="w-4 h-4 text-mono-120 dark:text-mono-80 cursor-help" />
+      </TooltipTrigger>
+
+      <TooltipBody className="max-w-xs p-3 space-y-2">
+        <Typography variant="body2" fw="bold">
+          Minimum Claim Requirement
+        </Typography>
+
+        <Typography variant="body2" className="text-mono-120 dark:text-mono-80">
+          You need at least {formattedMinimum} {tokenSymbol} to claim credits.
+        </Typography>
+
+        {!creditsNeeded.isZero() && (
+          <Typography
+            variant="body2"
+            className="text-mono-120 dark:text-mono-80"
+          >
+            You need {formattedCreditsNeeded} {tokenSymbol} more to reach the
+            minimum.
+          </Typography>
+        )}
+      </TooltipBody>
+    </Tooltip>
+  );
+};
+
+export default CreditVelocityTooltip;

apps/tangle-dapp/src/utils/creditConstraints.ts

@@ -0,0 +1,39 @@
+import { BN } from '@polkadot/util';
+import { TANGLE_TOKEN_DECIMALS } from '@tangle-network/dapp-config';
+
+/**
+ * Minimum claimable credit amount (0.01 tokens).
+ */
+export const MINIMUM_CLAIMABLE_CREDITS = new BN(10).pow(
+  new BN(TANGLE_TOKEN_DECIMALS - 2),
+);
+
+/**
+ * Checks if the credit amount meets the minimum claimable threshold.
+ */
+export const meetsMinimumClaimThreshold = (
+  amount: BN | null | undefined,
+): boolean => {
+  if (!amount || amount.isZero()) {
+    return false;
+  }
+
+  return amount.gte(MINIMUM_CLAIMABLE_CREDITS);
+};
+
+/**
+ * Calculates how much more credits are needed to reach the minimum threshold.
+ */
+export const getCreditsNeededForMinimum = (
+  amount: BN | null | undefined,
+): BN => {
+  if (!amount) {
+    return MINIMUM_CLAIMABLE_CREDITS;
+  }
+
+  if (amount.gte(MINIMUM_CLAIMABLE_CREDITS)) {
+    return new BN(0);
+  }
+
+  return MINIMUM_CLAIMABLE_CREDITS.sub(amount);
+};

libs/tangle-shared-ui/src/components/Restaking/JoinOperatorsModal.tsx

@@ -20,9 +20,10 @@ import { TxStatus } from '../../hooks/useSubstrateTx';
 
 type Props = {
   setIsOpen: (isOpen: boolean) => void;
+  onSuccess?: () => void;
 };
 
-const JoinOperatorsModal: FC<Props> = ({ setIsOpen }) => {
+const JoinOperatorsModal: FC<Props> = ({ setIsOpen, onSuccess }) => {
   const [bondAmount, setBondAmount] = useState<BN | null>(null);
   const { nativeTokenSymbol } = useNetworkStore();
   const { execute, status } = useJoinOperatorsTx();
@@ -73,8 +74,9 @@ const JoinOperatorsModal: FC<Props> = ({ setIsOpen }) => {
     if (status === TxStatus.COMPLETE) {
       setBondAmount(null);
       setIsOpen(false);
+      onSuccess?.();
     }
-  }, [setIsOpen, status]);
+  }, [setIsOpen, status, onSuccess]);
 
   return (
     <ModalContent size="sm">