Add useSendTransaction, refactor useContractFunction (#207)

* Add useSendTransaction tests and hook

Co-authored-by: Szymon Szlachtowicz <[email protected]>

.changeset/strange-chairs-tease.md

@@ -0,0 +1,6 @@
+---
+"@usedapp/core": patch
+"@usedapp/testing": patch
+---
+
+Add useSendTransaction, refactor useContractFunction

packages/core/src/hooks/index.ts

@@ -13,3 +13,4 @@ export * from './useLocalStorage'
 export * from './useTransactions'
 export * from './useNotifications'
 export * from './useInterval'
+export * from './useSendTransaction'

packages/core/src/hooks/useContractFunction.ts

@@ -1,18 +1,10 @@
-import { TransactionResponse } from '@ethersproject/abstract-provider'
-import { Signer } from '@ethersproject/abstract-signer'
+import { TransactionOptions } from '../../src'
 import { Contract } from '@ethersproject/contracts'
 import { Web3Provider } from '@ethersproject/providers'
-import { useState } from 'react'
-import { TransactionStatus } from '../model/TransactionStatus'
-import { useTransactionsContext } from '../providers'
 import { useEthers } from './useEthers'
+import { usePromiseTransaction } from './usePromiseTransaction'
 
-interface Options {
-  signer?: Signer
-  transactionName?: string
-}
-
-export function connectContractToSigner(contract: Contract, options?: Options, library?: Web3Provider) {
+export function connectContractToSigner(contract: Contract, options?: TransactionOptions, library?: Web3Provider) {
   if (contract.signer) {
     return contract
   }
@@ -28,39 +20,13 @@ export function connectContractToSigner(contract: Contract, options?: Options, l
   throw new TypeError('No signer available in contract, options or library')
 }
 
-export function useContractFunction(contract: Contract, functionName: string, options?: Options) {
-  const [state, setState] = useState<TransactionStatus>({ status: 'None' })
-  const { addTransaction } = useTransactionsContext()
+export function useContractFunction(contract: Contract, functionName: string, options?: TransactionOptions) {
   const { library, chainId } = useEthers()
-
-  let transaction: TransactionResponse
+  const { promiseTransaction, state } = usePromiseTransaction(chainId, options)
 
   const send = async (...args: any[]) => {
-    if (!chainId) {
-      return
-    }
-
     const contractWithSigner = connectContractToSigner(contract, options, library)
-
-    try {
-      transaction = await contractWithSigner[functionName](...args)
-      setState({ transaction, status: 'Mining', chainId })
-      addTransaction({
-        transaction,
-        submittedAt: Date.now(),
-        transactionName: options?.transactionName,
-      })
-
-      const receipt = await transaction.wait()
-      setState({ receipt, transaction, status: 'Success', chainId })
-    } catch (e) {
-      const errorMessage = e.reason ?? e.message
-      if (transaction) {
-        setState({ status: 'Fail', transaction, receipt: e.receipt, errorMessage, chainId })
-      } else {
-        setState({ status: 'Exception', errorMessage, chainId })
-      }
-    }
+    await promiseTransaction(contractWithSigner[functionName](...args))
   }
 
   return { send, state }

packages/core/src/hooks/usePromiseTransaction.ts

@@ -0,0 +1,35 @@
+import { TransactionResponse } from '@ethersproject/abstract-provider'
+import { useState } from 'react'
+import { useTransactionsContext } from '../providers'
+import { TransactionStatus, TransactionOptions } from '../../src'
+
+export function usePromiseTransaction(chainId: number | undefined, options?: TransactionOptions) {
+  const [state, setState] = useState<TransactionStatus>({ status: 'None' })
+  const { addTransaction } = useTransactionsContext()
+
+  const promiseTransaction = async (transactionPromise: Promise<TransactionResponse>) => {
+    if (!chainId) return
+    let transaction: TransactionResponse | undefined = undefined
+    try {
+      transaction = await transactionPromise
+
+      setState({ transaction, status: 'Mining', chainId })
+      addTransaction({
+        transaction,
+        submittedAt: Date.now(),
+        transactionName: options?.transactionName,
+      })
+      const receipt = await transaction.wait()
+
+      setState({ receipt, transaction, status: 'Success', chainId })
+    } catch (e) {
+      const errorMessage = e.reason ?? e.message
+      if (transaction) {
+        setState({ status: 'Fail', transaction, receipt: e.receipt, errorMessage, chainId })
+      } else {
+        setState({ status: 'Exception', errorMessage, chainId })
+      }
+    }
+  }
+  return { promiseTransaction, state }
+}

packages/core/src/hooks/useSendTransaction.ts

@@ -0,0 +1,18 @@
+import { TransactionRequest } from '@ethersproject/abstract-provider'
+import { TransactionOptions } from '../../src'
+import { useEthers } from './useEthers'
+import { usePromiseTransaction } from './usePromiseTransaction'
+
+export function useSendTransaction(options?: TransactionOptions) {
+  const { library, chainId } = useEthers()
+  const { promiseTransaction, state } = usePromiseTransaction(chainId, options)
+
+  const sendTransaction = async (transactionRequest: TransactionRequest) => {
+    const signer = options?.signer || library?.getSigner()
+    if (signer) {
+      await promiseTransaction(signer.sendTransaction(transactionRequest))
+    }
+  }
+
+  return { sendTransaction, state }
+}

packages/core/src/model/TransactionOptions.ts

@@ -0,0 +1,6 @@
+import { Signer } from 'ethers'
+
+export interface TransactionOptions {
+  signer?: Signer
+  transactionName?: string
+}

packages/core/src/model/index.ts

@@ -2,3 +2,4 @@ export * from './Currency'
 export * from './CurrencyValue'
 export * from './config/Config'
 export * from './TransactionStatus'
+export * from './TransactionOptions'

packages/testing/examples/useSendTransaction.test.ts

@@ -0,0 +1,48 @@
+import { useSendTransaction } from '@usedapp/core'
+import { expect } from 'chai'
+import { MockProvider } from 'ethereum-waffle'
+import { BigNumber, utils } from 'ethers'
+import { renderWeb3Hook } from '../src'
+
+describe('useSendTransaction', () => {
+  const mockProvider = new MockProvider()
+  const [spender, receiver, secondReceiver] = mockProvider.getWallets()
+
+  it('success', async () => {
+    const spenderBalance = await spender.getBalance()
+    const receiverBalance = await receiver.getBalance()
+
+    const { result, waitForCurrent } = await renderWeb3Hook(useSendTransaction, { mockProvider })
+
+    await result.current.sendTransaction({ to: await receiver.getAddress(), value: BigNumber.from(10) })
+    await waitForCurrent((val) => val.state !== undefined)
+    expect(result.current.state.status).to.eq('Success')
+    expect(await receiver.getBalance()).to.eq(receiverBalance.add(10))
+    expect(await spender.getBalance()).to.not.eq(spenderBalance)
+  })
+
+  it('sends with different signer', async () => {
+    const receiverBalance = await receiver.getBalance()
+    const secondReceiverBalance = await secondReceiver.getBalance()
+
+    const { result, waitForCurrent } = await renderWeb3Hook(() => useSendTransaction({ signer: receiver }), {
+      mockProvider,
+    })
+
+    await result.current.sendTransaction({ to: await secondReceiver.getAddress(), value: BigNumber.from(10) })
+    await waitForCurrent((val) => val.state != undefined)
+    expect(result.current.state.status).to.eq('Success')
+    expect(await secondReceiver.getBalance()).to.eq(secondReceiverBalance.add(10))
+    expect(await receiver.getBalance()).to.not.eq(receiverBalance)
+  })
+
+  it('Exception(invalid sender)', async () => {
+    const { result, waitForCurrent } = await renderWeb3Hook(useSendTransaction, { mockProvider })
+
+    await result.current.sendTransaction({ to: '0x1', value: utils.parseEther('1') })
+    await waitForCurrent((val) => val.state !== undefined)
+
+    expect(result.current.state.status).to.eq('Exception')
+    if (result.current.state.status === 'Exception') expect(result.current.state?.errorMessage).to.eq('invalid address')
+  })
+})