feat: integrate cloud credits (#3021)

Co-authored-by: Pavan Soratur <[email protected]>

Author: drewstone

apps/tangle-dapp/src/components/account/AccountSummaryCard.tsx

@@ -3,13 +3,15 @@ import CardWithTangleLogo from '../CardWithTangleLogo';
 import AccountAddress from './AccountAddress';
 import Actions from './Actions';
 import Balance from './Balance';
+import { ClaimCreditsButton } from '../../features/claimCredits';
 
 const AccountSummaryCard: FC<{ className?: string }> = ({ className }) => {
   return (
     <CardWithTangleLogo className={className}>
-      <div className="w-full space-y-5">
-        <header>
+      <div className="w-full flex flex-col gap-4">
+        <header className="flex lg:flex-col xl:flex-row justify-between items-start lg:min-h-[80px] xl:min-h-0">
           <AccountAddress />
+          <ClaimCreditsButton />
         </header>
 
         <Balance />

apps/tangle-dapp/src/components/account/Actions.tsx

@@ -22,13 +22,15 @@ import { PagePath, StaticSearchQueryPath } from '../../types';
 import formatTangleBalance from '../../utils/formatTangleBalance';
 import ActionItem from './ActionItem';
 import WithdrawEvmBalanceAction from './WithdrawEvmBalanceAction';
+import { ClaimCreditsModal } from '../../features/claimCredits';
 
 const Actions: FC = () => {
   const { nativeTokenSymbol } = useNetworkStore();
   const { execute: executeVestTx, status: vestTxStatus } = useVestTx();
   const activeAccountAddress = useActiveAccountAddress();
   const { transferable: transferableBalance } = useBalances();
   const [isTransferModalOpen, setIsTransferModalOpen] = useState(false);
+  const [isCreditsModalOpen, setIsCreditsModalOpen] = useState(false);
 
   const { isEligible: isAirdropEligible } = useAirdropEligibility();
 
@@ -141,6 +143,11 @@ const Actions: FC = () => {
         isModalOpen={isTransferModalOpen}
         setIsModalOpen={setIsTransferModalOpen}
       />
+
+      <ClaimCreditsModal
+        isOpen={isCreditsModalOpen}
+        setIsOpen={setIsCreditsModalOpen}
+      />
     </div>
   );
 };

apps/tangle-dapp/src/constants/index.ts

@@ -76,6 +76,7 @@ export enum TxName {
   RESTAKE_EXECUTE_WITHDRAW = 'restake execute withdraw',
   RESTAKE_CANCEL_WITHDRAW = 'restake cancel withdraw',
   CLAIM_REWARDS = 'claim rewards',
+  CLAIM_CREDITS = 'claim credits',
   DEMOCRACY_UNLOCK = 'unlock democracy',
   RESTAKE_NATIVE_DELEGATE = 'restake delegate nomination',
   RESTAKE_NATIVE_UNSTAKE = 'restake undelegate native',

apps/tangle-dapp/src/constants/reactQuery.ts

@@ -1,4 +1,5 @@
 export enum ReactQueryKey {
   GetAccountRewards = 'GetAccountRewards',
   GetAccountPoints = 'GetAccountPoints',
+  GetCredits = 'GetCredits',
 }

apps/tangle-dapp/src/data/credits/useClaimCreditsTx.ts

@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+import { toHex } from 'viem';
+import { TxName } from '../../constants';
+import useAgnosticTx from '@tangle-network/tangle-shared-ui/hooks/useAgnosticTx';
+import { EvmTxFactory } from '@tangle-network/tangle-shared-ui/hooks/useEvmPrecompileCall';
+import { SubstrateTxFactory } from '@tangle-network/tangle-shared-ui/hooks/useSubstrateTx';
+import { SUCCESS_MESSAGES } from '../../hooks/useTxNotification';
+import { BN } from '@polkadot/util';
+import { PrecompileAddress } from '@tangle-network/tangle-shared-ui/constants/evmPrecompiles';
+import CREDITS_PRECOMPILE_ABI from '@tangle-network/tangle-shared-ui/abi/credits';
+
+type Context = {
+  amountToClaim: BN;
+  offchainAccountId: string;
+};
+
+const useClaimCreditsTx = () => {
+  const evmTxFactory: EvmTxFactory<
+    typeof CREDITS_PRECOMPILE_ABI,
+    'claim_credits',
+    Context
+  > = useCallback((context) => {
+    return {
+      functionName: 'claim_credits',
+      arguments: [
+        BigInt(context.amountToClaim.toString()),
+        toHex(new TextEncoder().encode(context.offchainAccountId)),
+      ],
+    };
+  }, []);
+
+  const substrateTxFactory: SubstrateTxFactory<Context> = useCallback(
+    (api, _activeSubstrateAddress, context) => {
+      // Based on the pallet specification: api.tx.credits.claim_credits(origin, amount_to_claim, offchain_account_id)
+      return api.tx.credits.claimCredits(
+        context.amountToClaim,
+        context.offchainAccountId,
+      );
+    },
+    [],
+  );
+
+  return useAgnosticTx({
+    name: TxName.CLAIM_CREDITS,
+    abi: CREDITS_PRECOMPILE_ABI,
+    precompileAddress: PrecompileAddress.CREDITS,
+    evmTxFactory,
+    substrateTxFactory,
+    successMessageByTxName: SUCCESS_MESSAGES,
+  });
+};
+
+export default useClaimCreditsTx;

apps/tangle-dapp/src/data/credits/useCredits.ts

@@ -0,0 +1,155 @@
+import { useActiveChain } from '@tangle-network/api-provider-environment/hooks/useActiveChain';
+import useNetworkStore from '@tangle-network/tangle-shared-ui/context/useNetworkStore';
+import useSubstrateAddress from '@tangle-network/tangle-shared-ui/hooks/useSubstrateAddress';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { ReactQueryKey } from '../../constants/reactQuery';
+import { LoggerService } from '@tangle-network/browser-utils';
+import { BN } from '@polkadot/util';
+import JSONParseBigInt from '@tangle-network/ui-components/utils/JSONParseBigInt';
+import JSONStringifyBigInt from '@tangle-network/ui-components/utils/JSONStringifyBigInt';
+import { z } from 'zod';
+
+const logger = LoggerService.new('useCredits');
+
+// This represents the structure of our credits data
+export type CreditsData = {
+  amount: BN;
+};
+
+export default function useCredits() {
+  const activeSubstrateAddress = useSubstrateAddress(false);
+  const { network } = useNetworkStore();
+  const [activeChain] = useActiveChain();
+
+  // Use archive RPC endpoint if available
+  const overrideRpcEndpoint = useMemo(() => {
+    const wsEndpoints = activeChain?.rpcUrls.default?.webSocket;
+
+    if (wsEndpoints && wsEndpoints.length > 0) {
+      return wsEndpoints[0];
+    }
+
+    return network?.archiveRpcEndpoint ?? network.wsRpcEndpoints[0];
+  }, [
+    activeChain?.rpcUrls.default?.webSocket,
+    network?.archiveRpcEndpoint,
+    network.wsRpcEndpoints,
+  ]);
+
+  const { data: creditsResponse, ...rest } = useQuery(
+    getQueryOptions(overrideRpcEndpoint, activeSubstrateAddress),
+  );
+
+  const data = useMemo(() => {
+    if (!creditsResponse) {
+      return null;
+    }
+
+    if ('error' in creditsResponse) {
+      logger.error('Failed to fetch credits', creditsResponse);
+      return null;
+    }
+
+    return {
+      amount: new BN(creditsResponse.result.toString()),
+    };
+  }, [creditsResponse]);
+
+  return {
+    data,
+    ...rest,
+  };
+}
+
+const responseSchema = z.union([
+  z.object({
+    id: z.number(),
+    jsonrpc: z.string(),
+    error: z.object({
+      code: z.number(),
+      message: z.string(),
+      data: z.string().optional(),
+    }),
+  }),
+  z.object({
+    id: z.number(),
+    jsonrpc: z.string(),
+    result: z.bigint(),
+  }),
+]);
+
+async function fetcher(rpcEndpoint: string, activeAddress: string | null) {
+  if (!activeAddress) {
+    return null;
+  }
+
+  try {
+    // Change the protocol to http/https if it's not already
+    const url = new URL(rpcEndpoint);
+    url.protocol = url.protocol === 'ws:' ? 'http' : 'https';
+
+    const body = JSONStringifyBigInt({
+      id: 1,
+      jsonrpc: '2.0',
+      method: 'credits_queryUserCredits',
+      params: [activeAddress],
+    });
+
+    const response = await fetch(url.toString(), {
+      method: 'POST',
+      body,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      return {
+        id: 1,
+        jsonrpc: '2.0',
+        error: {
+          code: response.status,
+          message: response.statusText,
+        },
+      } satisfies z.infer<typeof responseSchema>;
+    }
+
+    const parsed = JSONParseBigInt(await response.text());
+    const result = responseSchema.safeParse(parsed);
+
+    if (result.success === false) {
+      const message =
+        result.error.issues.length > 0
+          ? result.error.issues[0].message
+          : 'Failed to parse credits';
+
+      return {
+        id: 1,
+        jsonrpc: '2.0',
+        error: {
+          code: response.status,
+          message,
+        },
+      } satisfies z.infer<typeof responseSchema>;
+    }
+
+    return result.data;
+  } catch (error) {
+    logger.error('Error fetching credits', error);
+    throw error;
+  }
+}
+
+export function getQueryOptions(
+  rpcEndpoint: string,
+  activeSubstrateAddress: string | null,
+) {
+  return queryOptions({
+    queryKey: [ReactQueryKey.GetCredits, rpcEndpoint, activeSubstrateAddress],
+    queryFn: () => fetcher(rpcEndpoint, activeSubstrateAddress),
+    retry: 3,
+    refetchInterval: 30000, // Refetch every 30 seconds
+    placeholderData: (prev) => prev,
+  });
+}