fix: disable 'Accept' incoming funds buttons when other button was cl…

…icked

src/components/frame/v5/pages/FundsPage/context/IncomingFundsLoadingContext.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+interface IncomingFundsLoadingContextValues {
+  isAcceptLoading: boolean;
+  enableAcceptLoading: () => void;
+  disableAcceptLoading: () => void;
+}
+
+export const IncomingFundsLoadingContext =
+  createContext<IncomingFundsLoadingContextValues>({
+    isAcceptLoading: false,
+    enableAcceptLoading: () => {},
+    disableAcceptLoading: () => {},
+  });
+
+export const useIncomingFundsLoadingContext = () => {
+  const context = useContext(IncomingFundsLoadingContext);
+
+  return context;
+};

src/components/frame/v5/pages/FundsPage/context/IncomingFundsLoadingContextProvider.tsx

@@ -0,0 +1,33 @@
+import React, {
+  useCallback,
+  useMemo,
+  useState,
+  type FC,
+  type PropsWithChildren,
+} from 'react';
+
+import { IncomingFundsLoadingContext } from './IncomingFundsLoadingContext.ts';
+
+export const IncomingFundsLoadingContextProvider: FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const [isAcceptLoading, setIsAcceptLoading] = useState(false);
+
+  const enableAcceptLoading = useCallback(() => setIsAcceptLoading(true), []);
+  const disableAcceptLoading = useCallback(() => setIsAcceptLoading(false), []);
+
+  const value = useMemo(
+    () => ({
+      isAcceptLoading,
+      enableAcceptLoading,
+      disableAcceptLoading,
+    }),
+    [isAcceptLoading, enableAcceptLoading, disableAcceptLoading],
+  );
+
+  return (
+    <IncomingFundsLoadingContext.Provider value={value}>
+      {children}
+    </IncomingFundsLoadingContext.Provider>
+  );
+};

src/components/frame/v5/pages/FundsPage/partials/AcceptButton/AcceptButton.tsx

@@ -1,6 +1,7 @@
 import React, { type FC, useState } from 'react';
 
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
+import { useIncomingFundsLoadingContext } from '~frame/v5/pages/FundsPage/context/IncomingFundsLoadingContext.ts';
 import { ActionTypes } from '~redux/index.ts';
 import { mergePayload } from '~utils/actions.ts';
 import ActionButton from '~v5/shared/Button/ActionButton.tsx';
@@ -23,6 +24,9 @@ const AcceptButton: FC<AcceptButtonProps> = ({
   } = useColonyContext();
   const [isClaimed, setIsClaimed] = useState(false);
 
+  const { isAcceptLoading, enableAcceptLoading, disableAcceptLoading } =
+    useIncomingFundsLoadingContext();
+
   const transform = mergePayload({
     colonyAddress: colony?.colonyAddress,
     tokenAddresses,
@@ -32,6 +36,11 @@ const AcceptButton: FC<AcceptButtonProps> = ({
     setIsClaimed(true);
     startPollingColonyData(1_000);
     setTimeout(stopPollingColonyData, 10_000);
+    disableAcceptLoading();
+  };
+
+  const getPayload = () => {
+    enableAcceptLoading();
   };
 
   return (
@@ -40,9 +49,13 @@ const AcceptButton: FC<AcceptButtonProps> = ({
       actionType={ActionTypes.CLAIM_TOKEN}
       transform={transform}
       onSuccess={handleClaimSuccess}
-      disabled={disabled || !canInteractWithColony || isClaimed}
+      onError={disableAcceptLoading}
+      disabled={
+        disabled || !canInteractWithColony || isClaimed || isAcceptLoading
+      }
       mode="primarySolid"
       size="small"
+      values={getPayload}
     >
       {children}
     </ActionButton>

src/components/frame/v5/pages/FundsPage/partials/FundsTable/FundsTable.tsx

@@ -5,6 +5,7 @@ import {
 } from '@tanstack/react-table';
 import React, { type FC } from 'react';
 
+import { IncomingFundsLoadingContextProvider } from '~frame/v5/pages/FundsPage/context/IncomingFundsLoadingContextProvider.tsx';
 import { useMobile } from '~hooks';
 import useColonyFundsClaims from '~hooks/useColonyFundsClaims.ts';
 import { formatText } from '~utils/intl.ts';
@@ -21,7 +22,7 @@ import { type FundsTableModel } from './types.ts';
 
 const displayName = 'pages.FundsPage.partials.FundsTable';
 
-const FundsTable: FC = () => {
+const FundsTableInner: FC = () => {
   const columns = useFundsTableColumns();
   const isMobile = useMobile();
   const { filters, searchedTokens, activeFilters } = useFundsTable();
@@ -111,6 +112,14 @@ const FundsTable: FC = () => {
   );
 };
 
+const FundsTable = () => {
+  return (
+    <IncomingFundsLoadingContextProvider>
+      <FundsTableInner />
+    </IncomingFundsLoadingContextProvider>
+  );
+};
+
 FundsTable.displayName = displayName;
 
 export default FundsTable;