Migrate the ESM shutdown write hook to new flow

modules/esm/components/ShutdownModal.tsx

@@ -10,7 +10,6 @@ import { Flex, Button, Text, Grid, Close, Spinner } from 'theme-ui';
 import { useState } from 'react';
 import { formatValue } from 'lib/string';
 import { Icon } from '@makerdao/dai-ui-icons';
-import { TXMined } from 'modules/web3/types/transaction';
 import { useEsmShutdown } from '../hooks/useEsmShutdown';
 import EtherscanLink from 'modules/web3/components/EtherscanLink';
 import { useNetwork } from 'modules/app/hooks/useNetwork';
@@ -23,8 +22,22 @@ const ModalContent = ({
   thresholdAmount?: bigint;
 }): React.ReactElement => {
   const [step, setStep] = useState('default');
+  const [txHash, setTxHash] = useState<`0x${string}` | undefined>();
+
   const network = useNetwork();
-  const { shutdown, tx } = useEsmShutdown();
+  const shutdown = useEsmShutdown({
+    onStart: (hash: `0x${string}`) => {
+      setTxHash(hash);
+      setStep('pending');
+    },
+    onSuccess: (hash: `0x${string}`) => {
+      setTxHash(hash);
+      close(); // TBD maybe show a separate "done" dialog,
+    },
+    onError: () => {
+      setStep('failed');
+    }
+  });
 
   const close = () => {
     setShowDialog(false);
@@ -47,13 +60,10 @@ const ModalContent = ({
           Cancel
         </Button>
         <Button
+          disabled={shutdown.isLoading || !shutdown.prepared}
           onClick={() => {
-            shutdown({
-              initialized: () => setStep('signing'),
-              pending: () => setStep('pending'),
-              mined: () => close(), // TBD maybe show a separate "done" dialog,
-              error: () => setStep('failed')
-            });
+            setStep('signing');
+            shutdown.execute();
           }}
           variant="outline"
           sx={{ color: 'onNotice', borderColor: 'notice' }}
@@ -104,7 +114,7 @@ const ModalContent = ({
           Shutdown will update once the transaction has been confirmed.
         </Text>
 
-        <EtherscanLink hash={(tx as TXMined).hash} type="transaction" network={network} />
+        {txHash && <EtherscanLink hash={txHash} type="transaction" network={network} />}
 
         <Button
           onClick={close}

modules/esm/hooks/useEsmShutdown.ts

@@ -6,64 +6,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 */
 
-import { Dispatch, SetStateAction, useState } from 'react';
-import useTransactionStore, {
-  transactionsSelectors,
-  transactionsApi
-} from 'modules/web3/stores/transactions';
-import { shallow } from 'zustand/shallow';
-import { Transaction } from 'modules/web3/types/transaction';
-import { useContracts } from 'modules/web3/hooks/useContracts';
-import { useAccount } from 'modules/app/hooks/useAccount';
-import { useWeb3 } from 'modules/web3/hooks/useWeb3';
-import { sendTransaction } from 'modules/web3/helpers/sendTransaction';
-
-type ShutdownResponse = {
-  txId: string | null;
-  setTxId: Dispatch<SetStateAction<string | null>>;
-  shutdown: (callbacks?: Record<string, (id?: string) => void>) => void;
-  tx: Transaction | null;
-};
-
-export const useEsmShutdown = (): ShutdownResponse => {
-  const [txId, setTxId] = useState<string | null>(null);
-
-  const { account } = useAccount();
-  const { provider } = useWeb3();
-  const { esm } = useContracts();
-
-  const [track, tx] = useTransactionStore(
-    state => [state.track, txId ? transactionsSelectors.getTransaction(state, txId) : null],
-    shallow
-  );
-
-  const shutdown = callbacks => {
-    if (!account || !provider) {
-      return;
-    }
-
-    const shutdownTxCreator = async () => {
-      const populatedTransaction = await esm.populateTransaction.fire();
-      return sendTransaction(populatedTransaction, provider, account);
-    };
-
-    const txId = track(shutdownTxCreator, account, 'Shutting Down Dai Credit System', {
-      initialized: () => {
-        if (typeof callbacks?.initialized === 'function') callbacks.initialized();
-      },
-      pending: () => {
-        if (typeof callbacks?.pending === 'function') callbacks.pending();
-      },
-      mined: txId => {
-        transactionsApi.getState().setMessage(txId, 'Dai Credit System has been Shutdown');
-        if (typeof callbacks?.mined === 'function') callbacks.mined();
-      },
-      error: () => {
-        if (typeof callbacks?.error === 'function') callbacks.error();
-      }
-    });
-    setTxId(txId);
-  };
-
-  return { txId, setTxId, shutdown, tx };
+import { useChainId } from 'wagmi';
+import { useWriteContractFlow } from 'modules/web3/hooks/useWriteContractFlow';
+import { WriteHook, WriteHookParams } from 'modules/web3/types/hooks';
+import { esmAbi, esmAddress } from 'modules/contracts/generated';
+
+export const useEsmShutdown = ({
+  gas,
+  enabled: paramEnabled = true,
+  onSuccess,
+  onError,
+  onStart
+}: WriteHookParams): WriteHook => {
+  const chainId = useChainId();
+
+  return useWriteContractFlow({
+    address: esmAddress[chainId],
+    abi: esmAbi,
+    functionName: 'fire',
+    chainId,
+    enabled: paramEnabled,
+    gas,
+    onSuccess,
+    onError,
+    onStart
+  });
 };