Clear all transactions (#778)

src/components/AccountDetails/index.tsx

-import React, { useContext } from 'react'
+import React, { useCallback, useContext } from 'react'
+import { useDispatch } from 'react-redux'
 import styled, { ThemeContext } from 'styled-components'
 import { useWeb3React } from '../../hooks'
 import { isMobile } from 'react-device-detect'
+import { AppDispatch } from '../../state'
+import { clearAllTransactions } from '../../state/transactions/actions'
+import { AutoRow } from '../Row'
 import Copy from './Copy'
 import Transaction from './Transaction'
 
@@ -240,6 +244,7 @@ export default function AccountDetails({
 }: AccountDetailsProps) {
   const { chainId, account, connector } = useWeb3React()
   const theme = useContext(ThemeContext)
+  const dispatch = useDispatch<AppDispatch>()
 
   function formatConnectorName() {
     const { ethereum } = window
@@ -296,6 +301,14 @@ export default function AccountDetails({
     }
   }
 
+  const clearAllTransactionsCallback = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault()
+      dispatch(clearAllTransactions({ chainId }))
+    },
+    [dispatch, chainId]
+  )
+
   return (
     <>
       <UpperSection>
@@ -380,7 +393,10 @@ export default function AccountDetails({
       </UpperSection>
       {!!pendingTransactions.length || !!confirmedTransactions.length ? (
         <LowerSection>
-          <TYPE.body>Recent Transactions</TYPE.body>
+          <AutoRow style={{ justifyContent: 'space-between' }}>
+            <TYPE.body>Recent Transactions</TYPE.body>
+            <Link onClick={clearAllTransactionsCallback}>(clear all)</Link>
+          </AutoRow>
           {renderTransactions(pendingTransactions)}
           {renderTransactions(confirmedTransactions)}
         </LowerSection>

src/state/transactions/actions.ts

@@ -19,6 +19,7 @@ export const addTransaction = createAction<{
   summary?: string
 }>('addTransaction')
 export const checkTransaction = createAction<{ chainId: number; hash: string; blockNumber: number }>('checkTransaction')
+export const clearAllTransactions = createAction<{ chainId: number }>('clearAllTransactions')
 export const finalizeTransaction = createAction<{
   chainId: number
   hash: string

src/state/transactions/reducer.ts

 import { createReducer } from '@reduxjs/toolkit'
-import { addTransaction, checkTransaction, finalizeTransaction, SerializableTransactionReceipt } from './actions'
+import {
+  addTransaction,
+  checkTransaction,
+  clearAllTransactions,
+  finalizeTransaction,
+  SerializableTransactionReceipt
+} from './actions'
 
 const now = () => new Date().getTime()
 
@@ -34,6 +40,10 @@ export default createReducer(initialState, builder =>
       state[chainId] = state[chainId] ?? {}
       state[chainId][hash] = { hash, approvalOfToken, summary, from, addedTime: now() }
     })
+    .addCase(clearAllTransactions, (state, { payload: { chainId } }) => {
+      if (!state[chainId]) return
+      state[chainId] = {}
+    })
     .addCase(checkTransaction, (state, { payload: { chainId, blockNumber, hash } }) => {
       if (!state[chainId]?.[hash]) {
         throw Error('Attempted to check non-existent transaction.')