Migrate poll creation hook to new flow

modules/polling/components/PollCreateModal.tsx

@@ -11,7 +11,6 @@ import { Button, Flex, Close, Text, Box, Spinner } from 'theme-ui';
 import { Icon } from '@makerdao/dai-ui-icons';
 import { DialogOverlay, DialogContent } from 'modules/app/components/Dialog';
 
-import { TXMined } from 'modules/web3/types/transaction';
 import { Poll } from 'modules/polling/types';
 import { useNetwork } from 'modules/app/hooks/useNetwork';
 import { usePollCreate } from '../hooks/usePollCreate';
@@ -20,32 +19,31 @@ import EtherscanLink from 'modules/web3/components/EtherscanLink';
 type Props = {
   close: () => void;
   poll: Poll | undefined;
-  setPoll: (any) => void;
+  setPoll: (poll: Poll | undefined) => void;
 };
 
 const PollCreateModal = ({ close, poll, setPoll }: Props): JSX.Element => {
-  const { createPoll, tx } = usePollCreate();
-
   const [step, setStep] = useState('confirm');
-  const onPollCreate = () => {
-    if (!poll) return;
-
-    createPoll(
-      poll.startDate.getTime() / 1000,
-      poll.endDate.getTime() / 1000,
-      poll.multiHash,
-      poll.url || '',
-      {
-        initialized: () => setStep('signing'),
-        pending: () => setStep('pending'),
-        mined: () => {
-          setPoll(undefined);
-          close();
-        },
-        error: () => setStep('failed')
-      }
-    );
-  };
+  const [txHash, setTxHash] = useState<`0x${string}` | undefined>();
+
+  const createPoll = usePollCreate({
+    startDate: poll && BigInt(poll.startDate.getTime() / 1000),
+    endDate: poll && BigInt(poll.endDate.getTime() / 1000),
+    multiHash: poll && poll.multiHash,
+    url: poll && poll.url,
+    onStart: (hash: `0x${string}`) => {
+      setTxHash(hash);
+      setStep('pending');
+    },
+    onSuccess: (hash: `0x${string}`) => {
+      setTxHash(hash);
+      setPoll(undefined);
+      close();
+    },
+    onError: () => {
+      setStep('failed');
+    }
+  });
 
   const Default = () => {
     return (
@@ -76,7 +74,15 @@ const PollCreateModal = ({ close, poll, setPoll }: Props): JSX.Element => {
           </Box>
         </Box>
         <Box sx={{ width: '100%', mt: 3 }}>
-          <Button variant="primaryLarge" sx={{ width: '100%' }} onClick={onPollCreate}>
+          <Button
+            variant="primaryLarge"
+            sx={{ width: '100%' }}
+            disabled={!poll || createPoll.isLoading || !createPoll.prepared}
+            onClick={() => {
+              setStep('signing');
+              createPoll.execute();
+            }}
+          >
             Create Poll
           </Button>
         </Box>
@@ -91,11 +97,11 @@ const PollCreateModal = ({ close, poll, setPoll }: Props): JSX.Element => {
       case 'signing':
         return <Signing close={close} />;
       case 'pending':
-        return <Pending tx={tx} close={close} />;
+        return <Pending txHash={txHash} close={close} />;
       case 'failed':
         return <Error close={close} />;
     }
-  }, [step, tx]);
+  }, [step, txHash, createPoll.isLoading, createPoll.prepared, createPoll.execute]);
 
   return (
     <DialogOverlay isOpen onDismiss={close}>
@@ -124,7 +130,7 @@ const Signing = ({ close }) => (
   </Flex>
 );
 
-const Pending = ({ tx, close }) => {
+const Pending = ({ txHash, close }: { txHash: `0x${string}` | undefined; close: () => void }) => {
   const network = useNetwork();
 
   return (
@@ -144,7 +150,7 @@ const Pending = ({ tx, close }) => {
           Poll will be created once the transaction has been confirmed.
         </Text>
 
-        <EtherscanLink type="transaction" hash={(tx as TXMined).hash} network={network} />
+        {txHash && <EtherscanLink type="transaction" hash={txHash} network={network} />}
 
         <Button
           onClick={close}

modules/polling/hooks/usePollCreate.ts

@@ -6,78 +6,41 @@ 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 { MainnetSdk } from '@dethcrypto/eth-sdk-client';
-import { useWeb3 } from 'modules/web3/hooks/useWeb3';
-import { sendTransaction } from 'modules/web3/helpers/sendTransaction';
-
-type CreateResponse = {
-  txId: string | null;
-  setTxId: Dispatch<SetStateAction<string | null>>;
-  createPoll: (
-    startDate: number,
-    endDate: number,
-    multiHash: string,
-    url: string,
-    callbacks?: Record<string, (id?: string) => void>
-  ) => void;
-  tx: Transaction | null;
-};
-
-export const usePollCreate = (): CreateResponse => {
-  const [txId, setTxId] = useState<string | null>(null);
-
-  const { account } = useAccount();
-  const { provider } = useWeb3();
-
-  // We want to use the original polling contract deployment for creating polls to avoid pollId collisions
-  const { pollingOld } = useContracts() as MainnetSdk;
-
-  const [track, tx] = useTransactionStore(
-    state => [state.track, txId ? transactionsSelectors.getTransaction(state, txId) : null],
-    shallow
-  );
-
-  const createPoll = (startDate, endDate, multiHash, url, callbacks) => {
-    if (!account || !provider) {
-      return;
-    }
-
-    const createTxCreator = async () => {
-      const populatedTransaction = await pollingOld.populateTransaction.createPoll(
-        startDate,
-        endDate,
-        multiHash,
-        url
-      );
-
-      return sendTransaction(populatedTransaction, provider, account);
-    };
-    const txId = track(createTxCreator, account, 'Creating poll', {
-      initialized: () => {
-        if (typeof callbacks?.initialized === 'function') callbacks.initialized();
-      },
-      pending: () => {
-        if (typeof callbacks?.pending === 'function') callbacks.pending();
-      },
-      mined: txId => {
-        transactionsApi.getState().setMessage(txId, 'Created poll');
-        if (typeof callbacks?.mined === 'function') callbacks.mined();
-      },
-      error: () => {
-        if (typeof callbacks?.error === 'function') callbacks.error();
-      }
-    });
-    setTxId(txId);
-  };
-
-  return { txId, setTxId, createPoll, tx };
+import { useChainId } from 'wagmi';
+import { useWriteContractFlow } from 'modules/web3/hooks/useWriteContractFlow';
+import { pollingOldAbi, pollingOldAddress } from 'modules/contracts/generated';
+import { WriteHook, WriteHookParams } from 'modules/web3/types/hooks';
+
+export const usePollCreate = ({
+  startDate,
+  endDate,
+  multiHash,
+  url,
+  gas,
+  enabled: paramEnabled = true,
+  onSuccess,
+  onError,
+  onStart
+}: WriteHookParams & {
+  startDate: bigint | undefined;
+  endDate: bigint | undefined;
+  multiHash: string | undefined;
+  url: string | undefined;
+}): WriteHook => {
+  const chainId = useChainId();
+
+  const enabled = paramEnabled && !!startDate && !!endDate && !!multiHash && !!url;
+
+  return useWriteContractFlow({
+    address: pollingOldAddress[chainId],
+    abi: pollingOldAbi,
+    functionName: 'createPoll',
+    args: [startDate as bigint, endDate as bigint, multiHash as string, url as string],
+    chainId,
+    enabled,
+    gas,
+    onSuccess,
+    onError,
+    onStart
+  });
 };