feat: Make pending txn status functional (#3193)

* update swap hooks to add swap txn confirmations

* fix: remove uneeded comments

* update with latest

* update utils to separate swap callback hooks

* create generic swap callabck to be used by both app and widget

* update app swap callback to use logic from lib

* update big number import

* add swap txn to state on submit

* remove redundant  fields in txn interfaces

* consolidate trade type logic

src/lib/components/Swap/Status/StatusDialog.tsx

@@ -9,6 +9,7 @@ import { useCallback, useMemo, useState } from 'react'
 import ActionButton from '../../ActionButton'
 import Column from '../../Column'
 import Row from '../../Row'
+import Summary from '../Summary'
 
 const errorMessage = (
   <Trans>
@@ -77,9 +78,7 @@ function TransactionStatus({ tx, onClose }: TransactionStatusProps) {
     <Column flex padded gap={0.75} align="stretch" style={{ height: '100%' }}>
       <StatusHeader icon={Icon} iconColor={tx.receipt?.status ? 'success' : undefined}>
         <ThemedText.Subhead1>{heading}</ThemedText.Subhead1>
-        {/* TODO(zzmp): Display actual transaction.
-          <Summary input={tx.info.inputCurrency} output={tx.info.outputCurrency} />
-        */}
+        <Summary input={tx.info.inputCurrencyAmount} output={tx.info.outputCurrencyAmount} />
       </StatusHeader>
       <TransactionRow flex>
         <ThemedText.ButtonSmall>

src/lib/components/Swap/SwapButton.tsx

@@ -1,6 +1,6 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import { Trans } from '@lingui/macro'
-import { Token } from '@uniswap/sdk-core'
+import { Token, TradeType } from '@uniswap/sdk-core'
 import { CHAIN_INFO } from 'constants/chainInfo'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import { useERC20PermitFromTrade } from 'hooks/useERC20Permit'
@@ -18,10 +18,11 @@ import { usePendingApproval } from 'lib/hooks/transactions'
 import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import { Link, Spinner } from 'lib/icons'
 import { transactionTtlAtom } from 'lib/state/settings'
-import { displayTxHashAtom, Field } from 'lib/state/swap'
+import { displayTxHashAtom, Field, independentFieldAtom } from 'lib/state/swap'
 import { TransactionType } from 'lib/state/transactions'
 import styled from 'lib/theme'
 import { useCallback, useEffect, useMemo, useState } from 'react'
+import invariant from 'tiny-invariant'
 
 import ActionButton from '../ActionButton'
 import Dialog from '../Dialog'
@@ -49,9 +50,11 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
     allowedSlippage,
     currencies: { [Field.INPUT]: inputCurrency },
     currencyBalances: { [Field.INPUT]: inputCurrencyBalance },
-    currencyAmounts: { [Field.INPUT]: inputCurrencyAmount },
+    currencyAmounts: { [Field.INPUT]: inputCurrencyAmount, [Field.OUTPUT]: outputCurrencyAmount },
   } = useSwapInfo()
 
+  const independentField = useAtomValue(independentFieldAtom)
+
   const [activeTrade, setActiveTrade] = useState<typeof trade.trade | undefined>()
   useEffect(() => {
     setActiveTrade((activeTrade) => activeTrade && trade.trade)
@@ -129,18 +132,25 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
 
   //@TODO(ianlapham): add a loading state, process errors
   const setDisplayTxHash = useUpdateAtom(displayTxHashAtom)
+
   const onConfirm = useCallback(() => {
     swapCallback?.()
-      .then((transactionResponse) => {
-        // TODO(ianlapham): Add the swap tx to transactionsAtom
-        console.log(transactionResponse)
-        setDisplayTxHash(transactionResponse.hash)
+      .then((response) => {
+        setDisplayTxHash(response.hash)
+        invariant(inputCurrencyAmount && outputCurrencyAmount)
+        addTransaction({
+          response,
+          type: TransactionType.SWAP,
+          tradeType: independentField === Field.INPUT ? TradeType.EXACT_INPUT : TradeType.EXACT_OUTPUT,
+          inputCurrencyAmount,
+          outputCurrencyAmount,
+        })
       })
       .catch((error) => {
         //@TODO(ianlapham): add error handling
         console.log(error)
       })
-  }, [setDisplayTxHash, swapCallback])
+  }, [addTransaction, independentField, inputCurrencyAmount, outputCurrencyAmount, setDisplayTxHash, swapCallback])
 
   return (
     <>

src/lib/components/Swap/index.tsx

@@ -28,7 +28,7 @@ export type DefaultAddress = string | { [chainId: number]: string | 'NATIVE' } |
 function getSwapTx(txs: { [hash: string]: Transaction }, hash?: string): Transaction<SwapTransactionInfo> | undefined {
   if (hash) {
     const tx = txs[hash]
-    if (tx.info.type === TransactionType.SWAP) {
+    if (tx?.info?.type === TransactionType.SWAP) {
       return tx as Transaction<SwapTransactionInfo>
     }
   }

src/lib/state/transactions.ts

@@ -1,5 +1,5 @@
 import { TransactionReceipt, TransactionResponse } from '@ethersproject/abstract-provider'
-import { TradeType } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
 import { atomWithImmer } from 'jotai/immer'
 
 export enum TransactionType {
@@ -21,20 +21,18 @@ export interface ApprovalTransactionInfo extends BaseTransactionInfo {
 export interface SwapTransactionInfo extends BaseTransactionInfo {
   type: TransactionType.SWAP
   tradeType: TradeType
-  inputCurrencyAddress: string
-  outputCurrencyAddress: string
+  inputCurrencyAmount: CurrencyAmount<Currency>
+  outputCurrencyAmount: CurrencyAmount<Currency>
 }
 
 export interface InputSwapTransactionInfo extends SwapTransactionInfo {
   tradeType: TradeType.EXACT_INPUT
-  inputCurrencyAmount: string
   expectedOutputCurrencyAmount: string
   minimumOutputCurrencyAmount: string
 }
 
 export interface OutputSwapTransactionInfo extends SwapTransactionInfo {
   tradeType: TradeType.EXACT_OUTPUT
-  outputCurrencyAmount: string
   expectedInputCurrencyAmount: string
   maximumInputCurrencyAmount: string
 }