feat: re-add transaction activity popups (#6223)

src/components/Popups/PopupItem.tsx

@@ -7,6 +7,7 @@ import styled, { useTheme } from 'styled-components/macro'
 import { useRemovePopup } from '../../state/application/hooks'
 import { PopupContent } from '../../state/application/reducer'
 import FailedNetworkSwitchPopup from './FailedNetworkSwitchPopup'
+import TransactionPopup from './TransactionPopup'
 
 const StyledClose = styled(X)`
   position: absolute;
@@ -77,7 +78,9 @@ export default function PopupItem({
   })
 
   let popupContent
-  if ('failedSwitchNetwork' in content) {
+  if ('txn' in content) {
+    popupContent = <TransactionPopup hash={content.txn.hash} />
+  } else if ('failedSwitchNetwork' in content) {
     popupContent = <FailedNetworkSwitchPopup chainId={content.failedSwitchNetwork} />
   }
 

src/components/Popups/TransactionPopup.tsx

@@ -0,0 +1,46 @@
+import { useWeb3React } from '@web3-react/core'
+import { TransactionSummary } from 'components/AccountDetails/TransactionSummary'
+import { AutoColumn } from 'components/Column'
+import { AutoRow } from 'components/Row'
+import { useContext } from 'react'
+import { AlertCircle, CheckCircle } from 'react-feather'
+import { useTransaction } from 'state/transactions/hooks'
+import styled, { ThemeContext } from 'styled-components/macro'
+import { ExternalLink, ThemedText } from 'theme'
+import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
+
+const RowNoFlex = styled(AutoRow)`
+  flex-wrap: nowrap;
+`
+
+export default function TransactionPopup({ hash }: { hash: string }) {
+  const { chainId } = useWeb3React()
+
+  const tx = useTransaction(hash)
+  const theme = useContext(ThemeContext)
+
+  if (!tx) return null
+  const success = Boolean(tx.receipt && tx.receipt.status === 1)
+
+  return (
+    <RowNoFlex>
+      <div style={{ paddingRight: 16 }}>
+        {success ? (
+          <CheckCircle color={theme.accentSuccess} size={24} />
+        ) : (
+          <AlertCircle color={theme.accentFailure} size={24} />
+        )}
+      </div>
+      <AutoColumn gap="8px">
+        <ThemedText.BodyPrimary fontWeight={500}>
+          <TransactionSummary info={tx.info} />
+        </ThemedText.BodyPrimary>
+        {chainId && (
+          <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
+            View on Explorer
+          </ExternalLink>
+        )}
+      </AutoColumn>
+    </RowNoFlex>
+  )
+}