SD-98: Add loading states and mutation tracking to token list buttons

Author: rAskVAL

src/domains/misc/components/Layout/TopBar/NavBox.tsx

@@ -105,10 +105,9 @@ export const BrandCanvas = styled(Canvas)`
 export const UserCanvas = styled(Canvas)`
   justify-content: end;
   padding: 0;
-  padding-inline: ${vars('--spacing-s')};
   border: 1px solid transparent;
+  padding-inline: ${vars('--spacing-s')};
   transition: all ${transitionTime};
-  height: 100%;
 
   @media (width <= ${BREAKPOINTS.lg}) { /* stylelint-disable-line media-query-no-invalid */
     border-bottom-left-radius: ${vars('--spacing-l')};

src/domains/misc/components/Layout/TopBar/TopBar.tsx

@@ -96,9 +96,9 @@ const AccountIcon = styled(UserIcon)`
 `;
 
 const Divider = styled.div`
+  height: 54px;
   width: 1px;
   background: ${vars('--color-neutral-stroke-2-rest')};
-  height: 54px;
 `;
 
 const PowerButton = styled(Button)`

src/domains/misc/utils/getQueryKey.ts

@@ -1,3 +1,7 @@
+import type { Address } from 'viem';
+
+import { NetworkEnvironment } from 'src/domains/chains/types/misc';
+
 export const QUERY_KEYS = {
   shielderFees: 'shielderFees',
   shielderClient: 'shielder-client',
@@ -11,9 +15,10 @@ export const QUERY_KEYS = {
   wasmCryptoClient: 'wasm-crypto-client',
 } as const;
 
-import type { Address } from 'viem';
-
-import { NetworkEnvironment } from 'src/domains/chains/types/misc';
+export const MUTATION_KEYS = {
+  shield: 'shield',
+  withdraw: 'withdraw',
+} as const;
 
 const getQueryKey = {
   shielderFees: (walletAddress: Address, chainId: string) => [

src/domains/shielder/components/TokenList/TokenListItem.tsx

@@ -1,9 +1,11 @@
+import { useIsMutating } from '@tanstack/react-query';
 import styled from 'styled-components';
 
 import Button from 'src/domains/misc/components/Button';
 import { useModal } from 'src/domains/misc/components/Modal';
 import Skeleton from 'src/domains/misc/components/Skeleton';
 import TokenIcon from 'src/domains/misc/components/TokenIcon';
+import { MUTATION_KEYS } from 'src/domains/misc/utils/getQueryKey.ts';
 import isPresent from 'src/domains/misc/utils/isPresent';
 import formatBalance from 'src/domains/numbers/utils/formatBalance';
 import useShielderStore from 'src/domains/shielder/stores/shielder';
@@ -37,11 +39,32 @@ const TokenListItem = ({ token }: Props) => {
 
   const selectedToken = { ...token, symbol, decimals, balance: activeBalance };
 
-  const { open: openShieldModal } = useModal(
-
-  );
+  const { open: openShieldModal } = useModal();
   const { open: openSendModal } = useModal();
 
+  const isShielding = !!useIsMutating({
+    predicate: mutation => {
+      const variables = mutation.state.variables as { token: Token } | undefined;
+      if (!variables?.token) return false;
+      return mutation.options.mutationKey?.[0] === MUTATION_KEYS.shield &&
+        variables.token.address === token.address &&
+        variables.token.isNative === token.isNative;
+    },
+  });
+
+  const isWithdrawing = !!useIsMutating({
+    predicate: mutation => {
+      const variables = mutation.state.variables as { token: Token } | undefined;
+      if (!variables?.token) return false;
+      return mutation.options.mutationKey?.[0] === MUTATION_KEYS.withdraw &&
+        variables.token.address === token.address &&
+        variables.token.isNative === token.isNative;
+    },
+  });
+
+  const isProcessing = isShielding || isWithdrawing;
+  const processingText = isShielding ? 'Shielding' : isWithdrawing ? 'Sending privately' : undefined;
+
   return (
     <Container>
       <TokenIcon size={40} Icon={token.icon} />
@@ -60,21 +83,23 @@ const TokenListItem = ({ token }: Props) => {
         <Button
           variant="primary"
           size="small"
+          isLoading={isProcessing}
           leftIcon="Shielded"
-          disabled={isDisabled}
+          disabled={isDisabled || isProcessing}
           onClick={() => void openShieldModal(<ShieldModal token={selectedToken} />)}
         >
-          Shield
+          {processingText ?? 'Shield'}
         </Button>
       ) : (
         <Button
           variant="primary"
           size="small"
           leftIcon="ArrowUpRight"
-          disabled={isDisabled}
+          isLoading={isProcessing}
+          disabled={isDisabled || isProcessing}
           onClick={() => void openSendModal(<SendModal token={selectedToken} />)}
         >
-          Send
+          {processingText ?? 'Send'}
         </Button>
       )}
     </Container>

src/domains/shielder/components/Welcome/Welcome.tsx

@@ -3,10 +3,9 @@ import styled from 'styled-components';
 import ConnectModal from 'src/domains/chains/components/ConnectModal';
 import Button from 'src/domains/misc/components/Button';
 import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox';
+import { useModal } from 'src/domains/misc/components/Modal';
 import { typography } from 'src/domains/styling/utils/tokens';
-import vars from 'src/domains/styling/utils/vars.ts';
-
-import { useModal } from '../../../misc/components/Modal';
+import vars from 'src/domains/styling/utils/vars';
 
 import breakTheTrace from './breakTheTrace.png';
 

src/domains/shielder/utils/useActivityHistory.tsx

@@ -13,10 +13,7 @@ export const useActivityHistory = () => {
 
   const isReady = !!address && !!chainId;
 
-  const db = useMemo(
-    () => (address ? getLocalShielderActivityHistoryIndexedDB(address) : undefined),
-    [address]
-  );
+  const db = address ? getLocalShielderActivityHistoryIndexedDB(address) : undefined;
 
   const upsertTransaction = useCallback(
     async (...params: Parameters<NonNullable<typeof db>['upsertItem']>) => {

src/domains/shielder/utils/useShield.tsx

@@ -8,7 +8,7 @@ import { useAccount, usePublicClient, useSendTransaction, useWalletClient } from
 import { Token } from 'src/domains/chains/types/misc';
 import useChain from 'src/domains/chains/utils/useChain';
 import { useToast } from 'src/domains/misc/components/Toast';
-import getQueryKey from 'src/domains/misc/utils/getQueryKey';
+import getQueryKey, { MUTATION_KEYS } from 'src/domains/misc/utils/getQueryKey';
 import { Fee } from 'src/domains/shielder/stores/getShielderIndexedDB';
 import { useActivityHistory } from 'src/domains/shielder/utils/useActivityHistory';
 import useActivityModal from 'src/domains/shielder/utils/useActivityModal';
@@ -92,6 +92,7 @@ const useShield = () => {
   };
 
   const { mutateAsync: shield, isPending: isShielding, ...meta } = useMutation({
+    mutationKey: [MUTATION_KEYS.shield],
     mutationFn: async ({
       token,
       amount,

src/domains/shielder/utils/useWithdraw.tsx

@@ -6,7 +6,7 @@ import { useAccount } from 'wagmi';
 
 import { Token } from 'src/domains/chains/types/misc';
 import { useToast } from 'src/domains/misc/components/Toast';
-import getQueryKey from 'src/domains/misc/utils/getQueryKey';
+import getQueryKey, { MUTATION_KEYS } from 'src/domains/misc/utils/getQueryKey';
 import { Fee } from 'src/domains/shielder/stores/getShielderIndexedDB';
 import { useActivityHistory } from 'src/domains/shielder/utils/useActivityHistory';
 import useActivityModal from 'src/domains/shielder/utils/useActivityModal';
@@ -27,6 +27,7 @@ const useWithdraw = () => {
     isPending: isWithdrawing,
     ...meta
   } = useMutation({
+    mutationKey: [MUTATION_KEYS.withdraw],
     mutationFn: async ({
       token,
       amount,