Improve rendering of failed transactions

src/components/AccountDetails/Transaction.tsx

 import React from 'react'
 import styled, { keyframes } from 'styled-components'
-import { Check } from 'react-feather'
+import { Check, Triangle } from 'react-feather'
 
 import { useWeb3React } from '../../hooks'
 import { getEtherscanLink } from '../../utils'
@@ -43,17 +43,25 @@ const rotate = keyframes`
   }
 `
 
-const TransactionState = styled.div<{ pending?: boolean }>`
+const TransactionState = styled.div<{ pending: boolean; success?: boolean }>`
   display: flex;
-  background-color: ${({ pending, theme }) =>
-    pending ? transparentize(0.95, theme.primary1) : transparentize(0.95, theme.green1)};
+  background-color: ${({ pending, success, theme }) =>
+    pending
+      ? transparentize(0.95, theme.primary1)
+      : success
+      ? transparentize(0.95, theme.green1)
+      : transparentize(0.95, theme.red1)};
   border-radius: 1.5rem;
   padding: 0.5rem 0.75rem;
   font-weight: 500;
   font-size: 0.75rem;
   border: 1px solid;
-  border-color: ${({ pending, theme }) =>
-    pending ? transparentize(0.75, theme.primary1) : transparentize(0.75, theme.green1)};
+  border-color: ${({ pending, success, theme }) =>
+    pending
+      ? transparentize(0.75, theme.primary1)
+      : success
+      ? transparentize(0.75, theme.green1)
+      : transparentize(0.75, theme.red1)};
 
   #pending {
     animation: 2s ${rotate} linear infinite;
@@ -64,17 +72,21 @@ const TransactionState = styled.div<{ pending?: boolean }>`
       pending ? transparentize(0, theme.primary1) : transparentize(0, theme.green1)};
   }
 `
-const ButtonWrapper = styled.div<{ pending: boolean }>`
+const ButtonWrapper = styled.div<{ pending: boolean; success?: boolean }>`
   a {
-    color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.green1)};
+    color: ${({ pending, success, theme }) => (pending ? theme.primary1 : success ? theme.green1 : theme.red1)};
   }
 `
 
-export default function Transaction({ hash, pending }: { hash: string; pending: boolean }) {
+export default function Transaction({ hash }: { hash: string }) {
   const { chainId } = useWeb3React()
   const allTransactions = useAllTransactions()
 
   const summary = allTransactions?.[hash]?.summary
+  const pending = !allTransactions?.[hash]?.receipt
+  const success =
+    !pending &&
+    (allTransactions[hash].receipt.status === 1 || typeof allTransactions[hash].receipt.status === 'undefined')
 
   return (
     <TransactionWrapper key={hash}>
@@ -82,25 +94,14 @@ export default function Transaction({ hash, pending }: { hash: string; pending:
         <Link href={getEtherscanLink(chainId, hash, 'transaction')}>{summary ? summary : hash} ↗ </Link>
         <Copy toCopy={hash} />
       </TransactionStatusWrapper>
-      {pending ? (
-        <ButtonWrapper pending={pending}>
-          <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
-            <TransactionState pending={pending}>
-              <Spinner src={Circle} id="pending" />
-              <TransactionStatusText>Pending</TransactionStatusText>
-            </TransactionState>
-          </Link>
-        </ButtonWrapper>
-      ) : (
-        <ButtonWrapper pending={pending}>
+      <ButtonWrapper pending={false} success={success}>
         <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
-            <TransactionState pending={pending}>
-              <Check size="16" />
-              <TransactionStatusText>Confirmed</TransactionStatusText>
+          <TransactionState pending={pending} success={success}>
+            {pending ? <Spinner src={Circle} /> : success ? <Check size="16" /> : <Triangle size="16" />}
+            <TransactionStatusText>{pending ? 'Pending' : success ? 'Success' : 'Failed'}</TransactionStatusText>
           </TransactionState>
         </Link>
       </ButtonWrapper>
-      )}
     </TransactionWrapper>
   )
 }

src/components/AccountDetails/index.tsx

@@ -213,11 +213,11 @@ const MainWalletAction = styled(WalletAction)`
   color: ${({ theme }) => theme.primary1};
 `
 
-function renderTransactions(transactions, pending) {
+function renderTransactions(transactions) {
   return (
     <TransactionListWrapper>
       {transactions.map((hash, i) => {
-        return <Transaction key={i} hash={hash} pending={pending} />
+        return <Transaction key={i} hash={hash} />
       })}
     </TransactionListWrapper>
   )
@@ -381,8 +381,8 @@ export default function AccountDetails({
       {!!pendingTransactions.length || !!confirmedTransactions.length ? (
         <LowerSection>
           <TYPE.body>Recent Transactions</TYPE.body>
-          {renderTransactions(pendingTransactions, true)}
-          {renderTransactions(confirmedTransactions, false)}
+          {renderTransactions(pendingTransactions)}
+          {renderTransactions(confirmedTransactions)}
         </LowerSection>
       ) : (
         <LowerSection>