From a598a157991ed2b52e0e5b31ec8284988d0e2d46 Mon Sep 17 00:00:00 2001 From: Ian Lapham Date: Thu, 27 Jan 2022 13:38:35 -0500 Subject: [PATCH] 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 --- .../components/Swap/Status/StatusDialog.tsx | 5 ++-- src/lib/components/Swap/SwapButton.tsx | 26 +++++++++++++------ src/lib/components/Swap/index.tsx | 2 +- src/lib/state/transactions.ts | 8 +++--- 4 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/lib/components/Swap/Status/StatusDialog.tsx b/src/lib/components/Swap/Status/StatusDialog.tsx index 90bd225cc5..814620f0b4 100644 --- a/src/lib/components/Swap/Status/StatusDialog.tsx +++ b/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 = ( @@ -77,9 +78,7 @@ function TransactionStatus({ tx, onClose }: TransactionStatusProps) { {heading} - {/* TODO(zzmp): Display actual transaction. - - */} + diff --git a/src/lib/components/Swap/SwapButton.tsx b/src/lib/components/Swap/SwapButton.tsx index a591e7460b..52583f28f9 100644 --- a/src/lib/components/Swap/SwapButton.tsx +++ b/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() 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 ( <> diff --git a/src/lib/components/Swap/index.tsx b/src/lib/components/Swap/index.tsx index 72ebd62de6..82c5c95152 100644 --- a/src/lib/components/Swap/index.tsx +++ b/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 | undefined { if (hash) { const tx = txs[hash] - if (tx.info.type === TransactionType.SWAP) { + if (tx?.info?.type === TransactionType.SWAP) { return tx as Transaction } } diff --git a/src/lib/state/transactions.ts b/src/lib/state/transactions.ts index 514cd30db7..cc3a1089b6 100644 --- a/src/lib/state/transactions.ts +++ b/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 + outputCurrencyAmount: CurrencyAmount } 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 }