@sodax/dapp-kit 1.5.7-beta → 2.0.0-rc.1

package/src/hooks/staking/useStake.ts

@@ -1,47 +1,42 @@
 // packages/dapp-kit/src/hooks/staking/useStake.ts
-import { useSodaxContext } from '../shared/useSodaxContext';
-import type { StakeParams, SpokeTxHash, HubTxHash, SpokeProvider } from '@sodax/sdk';
-import { useMutation, type UseMutationResult } from '@tanstack/react-query';
+import type { SpokeChainKey, StakeAction, TxHashPair } from '@sodax/sdk';
+import { useQueryClient } from '@tanstack/react-query';
+import { useSodaxContext } from '../shared/useSodaxContext.js';
+import type { MutationHookParams } from '../shared/types.js';
+import { useSafeMutation, type SafeUseMutationResult } from '../shared/useSafeMutation.js';
+import { unwrapResult } from '../shared/unwrapResult.js';
 
 /**
- * Hook for executing stake transactions to stake SODA tokens and receive xSODA shares.
- * Uses React Query's useMutation for better state management and caching.
- *
- * @param {SpokeProvider | undefined} spokeProvider - The spoke provider to use for the stake
- * @returns {UseMutationResult<[SpokeTxHash, HubTxHash], Error, StakeParams>} Mutation result object containing mutation function and state
- *
- * @example
- * ```typescript
- * const { mutateAsync: stake, isPending } = useStake(spokeProvider);
- *
- * const handleStake = async () => {
- *   const result = await stake({
- *     amount: 1000000000000000000n, // 1 SODA
- *     account: '0x...'
- *   });
+ * Mutation variables for {@link useStake}. Generic over `K extends SpokeChainKey` (defaults to
+ * the full union). Sophisticated callers can lock K at the hook call site to narrow the
+ * `walletProvider` and `params.srcChainKey` types.
+ */
+export type UseStakeVars<K extends SpokeChainKey = SpokeChainKey> = Omit<StakeAction<K, false>, 'raw'>;
+
+/**
+ * React hook for staking SODA tokens.
  *
- *   console.log('Stake successful:', result);
- * };
- * ```
+ * Throws on SDK failure so React Query's native error model engages (`isError`, `error`,
+ * `onError`, `retry`). Returns the unwrapped `TxHashPair` on success.
  */
-export function useStake(
-  spokeProvider: SpokeProvider | undefined,
-): UseMutationResult<[SpokeTxHash, HubTxHash], Error, StakeParams> {
+export function useStake<K extends SpokeChainKey = SpokeChainKey>({
+  mutationOptions,
+}: MutationHookParams<TxHashPair, UseStakeVars<K>> = {}): SafeUseMutationResult<TxHashPair, Error, UseStakeVars<K>> {
   const { sodax } = useSodaxContext();
+  const queryClient = useQueryClient();
 
-  return useMutation<[SpokeTxHash, HubTxHash], Error, StakeParams>({
-    mutationFn: async (params: StakeParams) => {
-      if (!spokeProvider) {
-        throw new Error('Spoke provider not found');
-      }
-
-      const result = await sodax.staking.stake(params, spokeProvider);
-
-      if (!result.ok) {
-        throw new Error(`Stake failed: ${result.error.code}`);
-      }
-
-      return result.value;
+  return useSafeMutation<TxHashPair, Error, UseStakeVars<K>>({
+    mutationKey: ['staking', 'stake'],
+    ...mutationOptions,
+    mutationFn: async vars => unwrapResult(await sodax.staking.stake({ ...vars, raw: false })),
+    onSuccess: async (data, vars, ctx) => {
+      const { params } = vars;
+      queryClient.invalidateQueries({ queryKey: ['staking', 'info', params.srcChainKey, params.srcAddress] });
+      queryClient.invalidateQueries({ queryKey: ['staking', 'allowance', params.srcChainKey, 'stake'] });
+      queryClient.invalidateQueries({ queryKey: ['staking', 'stakeRatio'] });
+      queryClient.invalidateQueries({ queryKey: ['staking', 'convertedAssets'] });
+      queryClient.invalidateQueries({ queryKey: ['shared', 'xBalances', params.srcChainKey] });
+      await mutationOptions?.onSuccess?.(data, vars, ctx);
     },
   });
 }

package/src/hooks/staking/useStakeAllowance.ts

@@ -1,57 +1,44 @@
-// packages/dapp-kit/src/hooks/staking/useStakeAllowance.ts
-import { useSodaxContext } from '../shared/useSodaxContext';
-import type { StakeParams, SpokeProvider } from '@sodax/sdk';
+import type { StakeParams } from '@sodax/sdk';
+import type { SpokeChainKey } from '@sodax/sdk';
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { useSodaxContext } from '../shared/useSodaxContext.js';
+import type { ReadHookParams } from '../shared/types.js';
+
+export type UseStakeAllowanceParams<K extends SpokeChainKey = SpokeChainKey> = ReadHookParams<
+  boolean,
+  {
+    payload: Omit<StakeParams<K>, 'action'> | undefined;
+  }
+>;
 
 /**
- * Hook for checking SODA token allowance for staking operations.
- * Uses React Query for efficient caching and state management.
- *
- * @param {Omit<StakeParams, 'action'> | undefined} params - The staking parameters. If undefined, the query will be disabled.
- * @param {SpokeProvider | undefined} spokeProvider - The spoke provider to use for the allowance check
- * @returns {UseQueryResult<boolean, Error>} Query result object containing allowance data and state
- *
- * @example
- * ```typescript
- * const { data: hasAllowed, isLoading } = useStakeAllowance(
- *   {
- *     amount: 1000000000000000000n, // 1 SODA
- *     account: '0x...'
- *   },
- *   spokeProvider
- * );
- *
- * if (isLoading) return <div>Checking allowance...</div>;
- * if (hasAllowed) {
- *   console.log('Sufficient allowance for staking');
- * }
- * ```
+ * React hook to check whether the user has approved sufficient SODA spending for the stake
+ * action. Read-only — calls `staking.isAllowanceValid` with `raw: true` so no `walletProvider`
+ * is required.
  */
-export function useStakeAllowance(
-  params: Omit<StakeParams, 'action'> | undefined,
-  spokeProvider: SpokeProvider | undefined,
-): UseQueryResult<boolean, Error> {
+export function useStakeAllowance<K extends SpokeChainKey = SpokeChainKey>({
+  params,
+  queryOptions,
+}: UseStakeAllowanceParams<K> = {}): UseQueryResult<boolean, Error> {
   const { sodax } = useSodaxContext();
+  const payload = params?.payload;
 
-  return useQuery({
-    queryKey: ['soda', 'stakeAllowance', params, spokeProvider?.chainConfig.chain.id],
+  return useQuery<boolean, Error>({
+    queryKey: ['staking', 'allowance', payload?.srcChainKey, 'stake', payload?.srcAddress, payload?.amount?.toString()],
     queryFn: async () => {
-      if (!params || !spokeProvider) {
-        return false;
+      if (!payload) {
+        throw new Error('Params are required');
       }
-
       const result = await sodax.staking.isAllowanceValid({
-        params: { ...params, action: 'stake' },
-        spokeProvider,
+        params: { ...payload, action: 'stake' },
+        raw: true,
       });
-
-      if (!result.ok) {
-        throw new Error(`Allowance check failed: ${result.error.code}`);
-      }
-
+      if (!result.ok) throw result.error;
       return result.value;
     },
-    enabled: !!params && !!spokeProvider,
-    refetchInterval: 5000, // Refetch every 5 seconds
+    enabled: !!payload,
+    refetchInterval: 5_000,
+    gcTime: 0,
+    ...queryOptions,
   });
 }

package/src/hooks/staking/useStakeApprove.ts

@@ -1,50 +1,50 @@
 // packages/dapp-kit/src/hooks/staking/useStakeApprove.ts
-import { useSodaxContext } from '../shared/useSodaxContext';
-import type { StakeParams, TxReturnType, SpokeProvider } from '@sodax/sdk';
-import { useMutation, type UseMutationResult } from '@tanstack/react-query';
+import type { GetWalletProviderType, SpokeChainKey, StakeParams, TxReturnType } from '@sodax/sdk';
+import { useQueryClient } from '@tanstack/react-query';
+import { useSodaxContext } from '../shared/useSodaxContext.js';
+import type { MutationHookParams } from '../shared/types.js';
+import { useSafeMutation, type SafeUseMutationResult } from '../shared/useSafeMutation.js';
+import { unwrapResult } from '../shared/unwrapResult.js';
 
 /**
- * Hook for approving SODA token spending for staking operations.
- * Uses React Query's useMutation for better state management and caching.
- *
- * @param {SpokeProvider | undefined} spokeProvider - The spoke provider to use for the approval
- * @returns {UseMutationResult<TxReturnType<SpokeProvider, false>, Error, Omit<StakeParams, 'action'>>} Mutation result object containing mutation function and state
- *
- * @example
- * ```typescript
- * const { mutateAsync: approve, isPending } = useStakeApprove(spokeProvider);
- *
- * const handleApprove = async () => {
- *   const result = await approve({
- *     amount: 1000000000000000000n, // 1 SODA
- *     account: '0x...'
- *   });
+ * Mutation variables for {@link useStakeApprove}. The `action` literal is injected by the hook —
+ * callers pass the stake-specific fields only.
+ */
+export type UseStakeApproveVars<K extends SpokeChainKey = SpokeChainKey> = {
+  params: Omit<StakeParams<K>, 'action'>;
+  walletProvider: GetWalletProviderType<K>;
+};
+
+/**
+ * React hook for approving SODA spending on the stake action.
  *
- *   console.log('Approval successful:', result);
- * };
- * ```
+ * Throws on SDK failure so React Query's native error model engages (`isError`, `error`,
+ * `onError`, `retry`). Returns the unwrapped tx return value on success.
  */
-export function useStakeApprove(
-  spokeProvider: SpokeProvider | undefined,
-): UseMutationResult<TxReturnType<SpokeProvider, false>, Error, Omit<StakeParams, 'action'>> {
+export function useStakeApprove<K extends SpokeChainKey = SpokeChainKey>({
+  mutationOptions,
+}: MutationHookParams<TxReturnType<K, false>, UseStakeApproveVars<K>> = {}): SafeUseMutationResult<
+  TxReturnType<K, false>,
+  Error,
+  UseStakeApproveVars<K>
+> {
   const { sodax } = useSodaxContext();
+  const queryClient = useQueryClient();
 
-  return useMutation<TxReturnType<SpokeProvider, false>, Error, Omit<StakeParams, 'action'>>({
-    mutationFn: async (params: Omit<StakeParams, 'action'>) => {
-      if (!spokeProvider) {
-        throw new Error('Spoke provider not found');
-      }
-
-      const result = await sodax.staking.approve({
-        params: { ...params, action: 'stake' },
-        spokeProvider,
-      });
-
-      if (!result.ok) {
-        throw new Error(`Stake approval failed: ${result.error.code}`);
-      }
-
-      return result.value;
+  return useSafeMutation<TxReturnType<K, false>, Error, UseStakeApproveVars<K>>({
+    mutationKey: ['staking', 'approve', 'stake'],
+    ...mutationOptions,
+    mutationFn: async ({ params, walletProvider }) =>
+      unwrapResult(
+        await sodax.staking.approve({
+          params: { ...params, action: 'stake' },
+          raw: false,
+          walletProvider,
+        }),
+      ),
+    onSuccess: async (data, vars, ctx) => {
+      queryClient.invalidateQueries({ queryKey: ['staking', 'allowance', vars.params.srcChainKey, 'stake'] });
+      await mutationOptions?.onSuccess?.(data, vars, ctx);
     },
   });
 }

package/src/hooks/staking/useStakeRatio.ts

@@ -1,53 +1,37 @@
-// packages/dapp-kit/src/hooks/staking/useStakeRatio.ts
-import { useSodaxContext } from '../shared/useSodaxContext';
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { useSodaxContext } from '../shared/useSodaxContext.js';
+import type { ReadHookParams } from '../shared/types.js';
+
+export type UseStakeRatioParams = ReadHookParams<
+  [bigint, bigint],
+  {
+    amount: bigint | undefined;
+  }
+>;
 
 /**
- * Hook for fetching stake ratio estimates (xSoda amount and preview deposit).
- * Uses React Query for efficient caching and state management.
- *
- * @param {bigint | undefined} amount - The amount of SODA to estimate stake for
- * @param {number} refetchInterval - The interval in milliseconds to refetch data (default: 10000)
- * @returns {UseQueryResult<[bigint, bigint], Error>} Query result object containing stake ratio estimates and state
- *
- * @example
- * ```typescript
- * const { data: stakeRatio, isLoading, error } = useStakeRatio(1000000000000000000n); // 1 SODA
- *
- * if (isLoading) return <div>Loading stake ratio...</div>;
- * if (stakeRatio) {
- *   const [xSodaAmount, previewDepositAmount] = stakeRatio;
- *   console.log('xSoda amount:', xSodaAmount);
- *   console.log('Preview deposit:', previewDepositAmount);
- * }
- * ```
+ * React hook to estimate the SODA → xSODA stake ratio for a given amount. Hub-only read. Throws
+ * on `!ok`.
  */
-export function useStakeRatio(
-  amount: bigint | undefined,
-  refetchInterval = 10000,
-): UseQueryResult<[bigint, bigint], Error> {
+export function useStakeRatio({
+  params,
+  queryOptions,
+}: UseStakeRatioParams = {}): UseQueryResult<[bigint, bigint], Error> {
   const { sodax } = useSodaxContext();
+  const amount = params?.amount;
 
-  return useQuery({
-    queryKey: ['soda', 'stakeRatio', amount?.toString()],
+  return useQuery<[bigint, bigint], Error>({
+    queryKey: ['staking', 'stakeRatio', amount?.toString()],
     queryFn: async () => {
-      if (!amount || amount <= 0n) {
-        throw new Error('Amount must be greater than 0');
-      }
-
-      if (!sodax?.staking) {
-        throw new Error('Staking service not available');
+      if (amount === undefined) {
+        throw new Error('amount is required');
       }
-
       const result = await sodax.staking.getStakeRatio(amount);
-
-      if (!result.ok) {
-        throw new Error(`Failed to fetch stake ratio: ${result.error.code}`);
-      }
-
+      if (!result.ok) throw result.error;
       return result.value;
     },
-    enabled: !!amount && amount > 0n && !!sodax?.staking,
-    refetchInterval,
+    enabled: amount !== undefined,
+    refetchInterval: 10_000,
+    ...queryOptions,
   });
 }

package/src/hooks/staking/useStakingConfig.ts

@@ -1,40 +1,27 @@
-// packages/dapp-kit/src/hooks/staking/useStakingConfig.ts
-import { useSodaxContext } from '../shared/useSodaxContext';
 import type { StakingConfig } from '@sodax/sdk';
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { useSodaxContext } from '../shared/useSodaxContext.js';
+import type { ReadHookParams } from '../shared/types.js';
+
+export type UseStakingConfigParams = ReadHookParams<StakingConfig>;
 
 /**
- * Hook for fetching staking configuration from the stakedSoda contract.
- * Uses React Query for efficient caching and state management.
- *
- * @param {number} refetchInterval - The interval in milliseconds to refetch data (default: 30000)
- * @returns {UseQueryResult<StakingConfig, Error>} Query result object containing staking config and state
- *
- * @example
- * ```typescript
- * const { data: stakingConfig, isLoading, error } = useStakingConfig();
- *
- * if (isLoading) return <div>Loading staking config...</div>;
- * if (stakingConfig) {
- *   console.log('Unstaking period (days):', stakingConfig.unstakingPeriod / 86400n);
- *   console.log('Max penalty (%):', stakingConfig.maxPenalty);
- * }
- * ```
+ * React hook to fetch the global staking config (unstaking period, min unstaking period, max
+ * penalty). Hub-only read; no chain context required. Throws on `!ok`.
  */
-export function useStakingConfig(refetchInterval = 30000): UseQueryResult<StakingConfig, Error> {
+export function useStakingConfig({
+  queryOptions,
+}: UseStakingConfigParams = {}): UseQueryResult<StakingConfig, Error> {
   const { sodax } = useSodaxContext();
 
-  return useQuery({
-    queryKey: ['soda', 'stakingConfig'],
+  return useQuery<StakingConfig, Error>({
+    queryKey: ['staking', 'config'],
     queryFn: async () => {
       const result = await sodax.staking.getStakingConfig();
-
-      if (!result.ok) {
-        throw new Error(`Failed to fetch staking config: ${result.error.code}`);
-      }
-
+      if (!result.ok) throw result.error;
       return result.value;
     },
-    refetchInterval,
+    staleTime: Number.POSITIVE_INFINITY,
+    ...queryOptions,
   });
 }

package/src/hooks/staking/useStakingInfo.ts

@@ -1,50 +1,42 @@
-// packages/dapp-kit/src/hooks/staking/useStakingInfo.ts
-import { useSodaxContext } from '../shared/useSodaxContext';
-import type { StakingInfo, SpokeProvider } from '@sodax/sdk';
+import type { StakingInfo } from '@sodax/sdk';
+import type { SpokeChainKey } from '@sodax/sdk';
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { useSodaxContext } from '../shared/useSodaxContext.js';
+import type { ReadHookParams } from '../shared/types.js';
+
+export type UseStakingInfoParams = ReadHookParams<
+  StakingInfo,
+  {
+    srcAddress: `0x${string}` | undefined;
+    srcChainKey: SpokeChainKey | undefined;
+  }
+>;
 
 /**
- * Hook for fetching comprehensive staking information for a user.
- * Uses React Query for efficient caching and state management.
- *
- * @param {SpokeProvider | undefined} spokeProvider - The spoke provider to use for the query
- * @param {number} refetchInterval - The interval in milliseconds to refetch data (default: 5000)
- * @returns {UseQueryResult<StakingInfo, Error>} Query result object containing staking info and state
- *
- * @example
- * ```typescript
- * const { data: stakingInfo, isLoading, error } = useStakingInfo(spokeProvider);
- *
- * if (isLoading) return <div>Loading staking info...</div>;
- * if (stakingInfo) {
- *   console.log('Total staked:', stakingInfo.totalStaked);
- *   console.log('User staked:', stakingInfo.userStaked);
- *   console.log('xSODA balance:', stakingInfo.userXSodaBalance);
- * }
- * ```
+ * React hook to fetch the user's staking info (xSODA balance, share value, underlying SODA) by
+ * deriving the hub wallet from the spoke `srcAddress` + `srcChainKey`. Throws on `!ok` so React
+ * Query lands in `error` state.
  */
-export function useStakingInfo(
-  spokeProvider: SpokeProvider | undefined,
-  refetchInterval = 5000,
-): UseQueryResult<StakingInfo, Error> {
+export function useStakingInfo({ params, queryOptions }: UseStakingInfoParams = {}): UseQueryResult<
+  StakingInfo,
+  Error
+> {
   const { sodax } = useSodaxContext();
+  const srcAddress = params?.srcAddress;
+  const srcChainKey = params?.srcChainKey;
 
-  return useQuery({
-    queryKey: ['soda', 'stakingInfo', spokeProvider?.chainConfig.chain.id],
+  return useQuery<StakingInfo, Error>({
+    queryKey: ['staking', 'info', srcChainKey, srcAddress],
     queryFn: async () => {
-      if (!spokeProvider) {
-        throw new Error('Spoke provider not found');
+      if (!srcAddress || !srcChainKey) {
+        throw new Error('srcAddress and srcChainKey are required');
       }
-
-      const result = await sodax.staking.getStakingInfoFromSpoke(spokeProvider);
-
-      if (!result.ok) {
-        throw new Error(`Failed to fetch staking info: ${result.error.code}`);
-      }
-
+      const result = await sodax.staking.getStakingInfoFromSpoke(srcAddress, srcChainKey);
+      if (!result.ok) throw result.error;
       return result.value;
     },
-    enabled: !!spokeProvider,
-    refetchInterval,
+    enabled: !!srcAddress && !!srcChainKey,
+    refetchInterval: 5_000,
+    ...queryOptions,
   });
 }

package/src/hooks/staking/useUnstake.ts

@@ -1,54 +1,40 @@
 // packages/dapp-kit/src/hooks/staking/useUnstake.ts
-import { useSodaxContext } from '../shared/useSodaxContext';
-import type { UnstakeParams, SpokeTxHash, HubTxHash, SpokeProvider } from '@sodax/sdk';
-import { useMutation, useQueryClient, type UseMutationResult } from '@tanstack/react-query';
+import type { SpokeChainKey, TxHashPair, UnstakeAction } from '@sodax/sdk';
+import { useQueryClient } from '@tanstack/react-query';
+import { useSodaxContext } from '../shared/useSodaxContext.js';
+import type { MutationHookParams } from '../shared/types.js';
+import { useSafeMutation, type SafeUseMutationResult } from '../shared/useSafeMutation.js';
+import { unwrapResult } from '../shared/unwrapResult.js';
+
+export type UseUnstakeVars<K extends SpokeChainKey = SpokeChainKey> = Omit<UnstakeAction<K, false>, 'raw'>;
 
 /**
- * Hook for executing unstake transactions to unstake xSODA shares.
- * Uses React Query's useMutation for better state management and caching.
- *
- * @param {SpokeProvider | undefined} spokeProvider - The spoke provider to use for the unstake
- * @returns {UseMutationResult<[SpokeTxHash, HubTxHash], Error, Omit<UnstakeParams, 'action'>>} Mutation result object containing mutation function and state
- *
- * @example
- * ```typescript
- * const { mutateAsync: unstake, isPending } = useUnstake(spokeProvider);
- *
- * const handleUnstake = async () => {
- *   const result = await unstake({
- *     amount: 1000000000000000000n, // 1 xSODA
- *     account: '0x...'
- *   });
+ * React hook for initiating an SODA unstake.
  *
- *   console.log('Unstake successful:', result);
- * };
- * ```
+ * Throws on SDK failure so React Query's native error model engages (`isError`, `error`,
+ * `onError`, `retry`). Returns the unwrapped `TxHashPair` on success.
  */
-export function useUnstake(
-  spokeProvider: SpokeProvider | undefined,
-): UseMutationResult<[SpokeTxHash, HubTxHash], Error, Omit<UnstakeParams, 'action'>> {
+export function useUnstake<K extends SpokeChainKey = SpokeChainKey>({
+  mutationOptions,
+}: MutationHookParams<TxHashPair, UseUnstakeVars<K>> = {}): SafeUseMutationResult<TxHashPair, Error, UseUnstakeVars<K>> {
   const { sodax } = useSodaxContext();
   const queryClient = useQueryClient();
 
-  return useMutation<[SpokeTxHash, HubTxHash], Error, Omit<UnstakeParams, 'action'>>({
-    mutationFn: async (params: Omit<UnstakeParams, 'action'>) => {
-      if (!spokeProvider) {
-        throw new Error('Spoke provider not found');
-      }
-
-      const result = await sodax.staking.unstake({ ...params, action: 'unstake' }, spokeProvider);
-
-      if (!result.ok) {
-        throw new Error(`Unstake failed: ${result.error.code}`);
-      }
-
-      return result.value;
-    },
-    onSuccess: () => {
-      // Invalidate relevant queries to refresh data
-      queryClient.invalidateQueries({ queryKey: ['stakingInfo'] });
-      queryClient.invalidateQueries({ queryKey: ['unstakingInfo'] });
-      queryClient.invalidateQueries({ queryKey: ['unstakingInfoWithPenalty'] });
+  return useSafeMutation<TxHashPair, Error, UseUnstakeVars<K>>({
+    mutationKey: ['staking', 'unstake'],
+    ...mutationOptions,
+    mutationFn: async vars => unwrapResult(await sodax.staking.unstake({ ...vars, raw: false })),
+    onSuccess: async (data, vars, ctx) => {
+      const { params } = vars;
+      queryClient.invalidateQueries({ queryKey: ['staking', 'info', params.srcChainKey, params.srcAddress] });
+      // Scope to (srcChainKey, srcAddress) so a user's unstake doesn't refetch every other user's
+      // staking data. Matches `useUnstakingInfo` / `useUnstakingInfoWithPenalty` query keys.
+      queryClient.invalidateQueries({ queryKey: ['staking', 'unstakingInfo', params.srcChainKey, params.srcAddress] });
+      queryClient.invalidateQueries({
+        queryKey: ['staking', 'unstakingInfoWithPenalty', params.srcChainKey, params.srcAddress],
+      });
+      queryClient.invalidateQueries({ queryKey: ['staking', 'allowance', params.srcChainKey, 'unstake'] });
+      await mutationOptions?.onSuccess?.(data, vars, ctx);
     },
   });
 }