Solving the alert race condition

aragon · Mar 15, 2024 · e96fec6 · e96fec6
1 parent 2a7a144
commit e96fec6
Show file tree

Hide file tree

Showing 16 changed files with 43 additions and 42 deletions.
diff --git a/components/alert/alert-container.tsx b/components/alert/alert-container.tsx
@@ -1,10 +1,10 @@
 import { FC } from "react";
-import { useAlertContext } from "@/context/AlertContext";
+import { useAlerts } from "@/context/Alerts";
 import { AlertCard, AlertVariant, Icon, IconType } from "@aragon/ods";
 import { IAlert } from "@/utils/types";
 
 const AlertContainer: FC = () => {
-  const { alerts } = useAlertContext();
+  const { alerts } = useAlerts();
 
   return (
     <div className="fixed top-0 right-0 w-72 md:w-96 m-4 z-50">

diff --git a/components/input/function-selector.tsx b/components/input/function-selector.tsx
@@ -4,7 +4,7 @@ import { Button, InputText } from "@aragon/ods";
 import { AbiFunction } from "abitype";
 import { Else, If, Then } from "@/components/if";
 import { decodeCamelCase } from "@/utils/case";
-import { useAlertContext } from "@/context/AlertContext";
+import { useAlerts } from "@/context/Alerts";
 import { InputParameter } from "./input-parameter";
 import { InputValue } from "@/utils/input-values";
 
@@ -16,7 +16,7 @@ export const FunctionSelector = ({
   abi,
   actionEntered,
 }: IFunctionSelectorProps) => {
-  const { addAlert } = useAlertContext();
+  const { addAlert } = useAlerts();
   const [selectedAbiItem, setSelectedAbiItem] = useState<
     AbiFunction | undefined
   >();

diff --git a/context/AlertContext.tsx → context/Alerts.tsx b/context/AlertContext.tsx → context/Alerts.tsx
@@ -28,8 +28,6 @@ export const AlertProvider: React.FC<{ children: React.ReactNode }> = ({
 
   // Add a new alert to the list
   const addAlert = (message: string, alertOptions?: AlertOptions) => {
-    const newAlertList = ([] as IAlert[]).concat(alerts);
-
     // Clean duplicates
     const idx = alerts.findIndex((a) => {
       if (a.message !== message) return false;
@@ -38,14 +36,17 @@ export const AlertProvider: React.FC<{ children: React.ReactNode }> = ({
       return true;
     });
     if (idx >= 0) {
-      const [prevAlert] = newAlertList.splice(idx, 1);
-      clearTimeout(prevAlert.dismissTimeout);
-      const timeout = alertOptions?.timeout ?? DEFAULT_ALERT_TIMEOUT;
-      prevAlert.dismissTimeout = setTimeout(
-        () => removeAlert(prevAlert.id),
-        timeout
-      );
-      setAlerts(newAlertList.concat(prevAlert));
+      // Update the existing one
+      setAlerts((curAlerts) => {
+        const [prevAlert] = curAlerts.splice(idx, 1);
+        clearTimeout(prevAlert.dismissTimeout);
+        const timeout = alertOptions?.timeout ?? DEFAULT_ALERT_TIMEOUT;
+        prevAlert.dismissTimeout = setTimeout(
+          () => removeAlert(prevAlert.id),
+          timeout
+        );
+        return curAlerts.concat(prevAlert);
+      });
       return;
     }
 
@@ -64,12 +65,12 @@ export const AlertProvider: React.FC<{ children: React.ReactNode }> = ({
       () => removeAlert(newAlert.id),
       timeout
     );
-    setAlerts(newAlertList.concat(newAlert));
+    setAlerts((curAlerts) => curAlerts.concat(newAlert));
   };
 
   // Function to remove an alert
   const removeAlert = (id: number) => {
-    setAlerts(alerts.filter((alert) => alert.id !== id));
+    setAlerts((prevAlerts) => prevAlerts.filter((alert) => alert.id !== id));
   };
 
   return (
@@ -79,7 +80,7 @@ export const AlertProvider: React.FC<{ children: React.ReactNode }> = ({
   );
 };
 
-export const useAlertContext = () => {
+export const useAlerts = () => {
   const context = useContext(AlertContext);
 
   if (!context) {

diff --git a/context/index.tsx b/context/index.tsx
@@ -1,4 +1,4 @@
-import { AlertProvider } from "./AlertContext";
+import { AlertProvider } from "./Alerts";
 import { ReactNode } from "react";
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { config } from "@/context/Web3Modal";

diff --git a/hooks/useAbi.ts b/hooks/useAbi.ts
@@ -5,10 +5,10 @@ import { AbiFunction } from "abitype";
 import { useQuery } from "@tanstack/react-query";
 import { isAddress } from "@/utils/evm";
 import { PUB_CHAIN, PUB_ETHERSCAN_API_KEY } from "@/constants";
-import { useAlertContext } from "@/context/AlertContext";
+import { useAlerts } from "@/context/Alerts";
 
 export const useAbi = (contractAddress: Address) => {
-  const { addAlert } = useAlertContext();
+  const { addAlert } = useAlerts();
   const publicClient = usePublicClient({ chainId: PUB_CHAIN.id });
 
   const {

diff --git a/hooks/usePermit.ts b/hooks/usePermit.ts
@@ -6,11 +6,11 @@ import {
 } from "wagmi";
 import { hexToSignature, Address } from "viem";
 import { ERC20PermitAbi } from "@/artifacts/ERC20Permit.sol";
-import { useAlertContext, AlertContextProps } from "@/context/AlertContext";
+import { useAlerts, AlertContextProps } from "@/context/Alerts";
 import { PUB_CHAIN, PUB_TOKEN_ADDRESS } from "@/constants";
 
 export function usePermit() {
-  const { addAlert } = useAlertContext() as AlertContextProps;
+  const { addAlert } = useAlerts() as AlertContextProps;
 
   const account_address = useAccount().address!;
   const erc20Contract = {

diff --git a/plugins/dualGovernance/hooks/useProposalExecute.tsx b/plugins/dualGovernance/hooks/useProposalExecute.tsx
@@ -5,13 +5,13 @@ import {
   useWriteContract,
 } from "wagmi";
 import { OptimisticTokenVotingPluginAbi } from "../artifacts/OptimisticTokenVotingPlugin.sol";
-import { AlertContextProps, useAlertContext } from "@/context/AlertContext";
+import { AlertContextProps, useAlerts } from "@/context/Alerts";
 import { useRouter } from "next/router";
 import { PUB_CHAIN, PUB_DUAL_GOVERNANCE_PLUGIN_ADDRESS } from "@/constants";
 
 export function useProposalExecute(proposalId: string) {
   const { reload } = useRouter();
-  const { addAlert } = useAlertContext() as AlertContextProps;
+  const { addAlert } = useAlerts() as AlertContextProps;
 
   const {
     data: canExecute,

diff --git a/plugins/dualGovernance/hooks/useProposalVeto.tsx b/plugins/dualGovernance/hooks/useProposalVeto.tsx
@@ -8,7 +8,7 @@ import { useProposal } from "./useProposal";
 import { useProposalVetoes } from "@/plugins/dualGovernance/hooks/useProposalVetoes";
 import { useUserCanVeto } from "@/plugins/dualGovernance/hooks/useUserCanVeto";
 import { OptimisticTokenVotingPluginAbi } from "@/plugins/dualGovernance/artifacts/OptimisticTokenVotingPlugin.sol";
-import { useAlertContext, AlertContextProps } from "@/context/AlertContext";
+import { useAlerts, AlertContextProps } from "@/context/Alerts";
 import { PUB_CHAIN, PUB_DUAL_GOVERNANCE_PLUGIN_ADDRESS } from "@/constants";
 
 export function useProposalVeto(proposalId: string) {
@@ -26,7 +26,7 @@ export function useProposalVeto(proposalId: string) {
     proposal
   );
 
-  const { addAlert } = useAlertContext() as AlertContextProps;
+  const { addAlert } = useAlerts() as AlertContextProps;
   const {
     writeContract: vetoWrite,
     data: vetoTxHash,

diff --git a/plugins/dualGovernance/pages/new.tsx b/plugins/dualGovernance/pages/new.tsx
@@ -11,7 +11,7 @@ import { uploadToIPFS } from "@/utils/ipfs";
 import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
 import { toHex } from "viem";
 import { OptimisticTokenVotingPluginAbi } from "@/plugins/dualGovernance/artifacts/OptimisticTokenVotingPlugin.sol";
-import { useAlertContext } from "@/context/AlertContext";
+import { useAlerts } from "@/context/Alerts";
 import WithdrawalInput from "@/components/input/withdrawal";
 import { FunctionCallForm } from "@/components/input/function-call-form";
 import { Action } from "@/utils/types";
@@ -43,7 +43,7 @@ export default function Create() {
   const [title, setTitle] = useState<string>("");
   const [summary, setSummary] = useState<string>("");
   const [actions, setActions] = useState<Action[]>([]);
-  const { addAlert } = useAlertContext();
+  const { addAlert } = useAlerts();
   const {
     writeContract: createProposalWrite,
     data: createTxHash,

diff --git a/plugins/lockToVote/hooks/useProposalClaimLock.tsx b/plugins/lockToVote/hooks/useProposalClaimLock.tsx
@@ -5,15 +5,15 @@ import {
   useWaitForTransactionReceipt,
   useWriteContract,
 } from "wagmi";
-import { AlertContextProps, useAlertContext } from "@/context/AlertContext";
+import { AlertContextProps, useAlerts } from "@/context/Alerts";
 import { useRouter } from "next/router";
 import { PUB_CHAIN, PUB_LOCK_TO_VOTE_PLUGIN_ADDRESS } from "@/constants";
 import { LockToVetoPluginAbi } from "../artifacts/LockToVetoPlugin.sol";
 
 export function useProposalClaimLock(proposalId: string) {
   const { reload } = useRouter();
   const account = useAccount();
-  const { addAlert } = useAlertContext() as AlertContextProps;
+  const { addAlert } = useAlerts() as AlertContextProps;
 
   const {
     data: hasClaimed,

diff --git a/plugins/lockToVote/hooks/useProposalExecute.tsx b/plugins/lockToVote/hooks/useProposalExecute.tsx
@@ -5,13 +5,13 @@ import {
   useWriteContract,
 } from "wagmi";
 import { OptimisticTokenVotingPluginAbi } from "../artifacts/OptimisticTokenVotingPlugin.sol";
-import { AlertContextProps, useAlertContext } from "@/context/AlertContext";
+import { AlertContextProps, useAlerts } from "@/context/Alerts";
 import { useRouter } from "next/router";
 import { PUB_CHAIN, PUB_LOCK_TO_VOTE_PLUGIN_ADDRESS } from "@/constants";
 
 export function useProposalExecute(proposalId: string) {
   const { reload } = useRouter();
-  const { addAlert } = useAlertContext() as AlertContextProps;
+  const { addAlert } = useAlerts() as AlertContextProps;
 
   const {
     data: canExecute,

diff --git a/plugins/lockToVote/hooks/useProposalVeto.tsx b/plugins/lockToVote/hooks/useProposalVeto.tsx
@@ -13,7 +13,7 @@ import { useProposalVetoes } from "@/plugins/lockToVote/hooks/useProposalVetoes"
 import { useUserCanVeto } from "@/plugins/lockToVote/hooks/useUserCanVeto";
 import { LockToVetoPluginAbi } from "@/plugins/lockToVote/artifacts/LockToVetoPlugin.sol";
 import { usePermit } from "@/hooks/usePermit";
-import { useAlertContext, AlertContextProps } from "@/context/AlertContext";
+import { useAlerts, AlertContextProps } from "@/context/Alerts";
 import { PUB_CHAIN, PUB_TOKEN_ADDRESS, PUB_LOCK_TO_VOTE_PLUGIN_ADDRESS } from "@/constants";
 
 export function useProposalVeto(proposalId: string) {
@@ -32,7 +32,7 @@ export function useProposalVeto(proposalId: string) {
   );
   const { signPermit, refetchPermitData } = usePermit();
 
-  const { addAlert } = useAlertContext() as AlertContextProps;
+  const { addAlert } = useAlerts() as AlertContextProps;
   const account_address = useAccount().address!;
 
   const { data: balanceData } = useReadContract({    

diff --git a/plugins/lockToVote/pages/new.tsx b/plugins/lockToVote/pages/new.tsx
@@ -11,7 +11,7 @@ import { uploadToIPFS } from "@/utils/ipfs";
 import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
 import { toHex } from "viem";
 import { OptimisticTokenVotingPluginAbi } from "@/plugins/dualGovernance/artifacts/OptimisticTokenVotingPlugin.sol";
-import { useAlertContext } from "@/context/AlertContext";
+import { useAlerts } from "@/context/Alerts";
 import WithdrawalInput from "@/components/input/withdrawal";
 import { FunctionCallForm } from "@/components/input/function-call-form";
 import { Action } from "@/utils/types";
@@ -43,7 +43,7 @@ export default function Create() {
   const [title, setTitle] = useState<string>("");
   const [summary, setSummary] = useState<string>("");
   const [actions, setActions] = useState<Action[]>([]);
-  const { addAlert } = useAlertContext();
+  const { addAlert } = useAlerts();
   const {
     writeContract: createProposalWrite,
     data: createTxHash,

diff --git a/plugins/tokenVoting/hooks/useProposalExecute.ts b/plugins/tokenVoting/hooks/useProposalExecute.ts
@@ -5,13 +5,13 @@ import {
   useReadContract,
 } from "wagmi";
 import { TokenVotingAbi } from "../artifacts/TokenVoting.sol";
-import { AlertContextProps, useAlertContext } from "@/context/AlertContext";
+import { AlertContextProps, useAlerts } from "@/context/Alerts";
 import { useRouter } from "next/router";
 import { PUB_CHAIN, PUB_TOKEN_VOTING_PLUGIN_ADDRESS } from "@/constants";
 
 export function useProposalExecute(proposalId: string) {
   const { reload } = useRouter();
-  const { addAlert } = useAlertContext() as AlertContextProps;
+  const { addAlert } = useAlerts() as AlertContextProps;
 
   const {
     data: canExecute,

diff --git a/plugins/tokenVoting/hooks/useProposalVoting.tsx b/plugins/tokenVoting/hooks/useProposalVoting.tsx
@@ -1,13 +1,13 @@
 import { useEffect } from "react";
 import { useWriteContract, useWaitForTransactionReceipt } from "wagmi";
 import { TokenVotingAbi } from "@/plugins/tokenVoting/artifacts/TokenVoting.sol";
-import { AlertContextProps, useAlertContext } from "@/context/AlertContext";
+import { AlertContextProps, useAlerts } from "@/context/Alerts";
 import { useRouter } from "next/router";
 import { PUB_TOKEN_VOTING_PLUGIN_ADDRESS } from "@/constants";
 
 export function useProposalVoting(proposalId: string) {
   const { reload } = useRouter();
-  const { addAlert } = useAlertContext() as AlertContextProps;
+  const { addAlert } = useAlerts() as AlertContextProps;
   const {
     writeContract: voteWrite,
     data: votingTxHash,

diff --git a/plugins/tokenVoting/pages/new.tsx b/plugins/tokenVoting/pages/new.tsx
@@ -11,7 +11,7 @@ import { uploadToIPFS } from "@/utils/ipfs";
 import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
 import { toHex } from "viem";
 import { TokenVotingAbi } from "@/plugins/tokenVoting/artifacts/TokenVoting.sol";
-import { useAlertContext } from "@/context/AlertContext";
+import { useAlerts } from "@/context/Alerts";
 import WithdrawalInput from "@/components/input/withdrawal";
 import { FunctionCallForm } from "@/components/input/function-call-form";
 import { Action } from "@/utils/types";
@@ -43,7 +43,7 @@ export default function Create() {
   const [title, setTitle] = useState<string>("");
   const [summary, setSummary] = useState<string>("");
   const [actions, setActions] = useState<Action[]>([]);
-  const { addAlert } = useAlertContext();
+  const { addAlert } = useAlerts();
   const {
     writeContract: createProposalWrite,
     data: createTxHash,