feat: integrate widget tx states (#4553)

* feat(widget): sync transaction states

* s

* waiting on type release

* slippage is all that remains

* finalize tx integration

* pr feedback

* pr feedback - else if

* update @uniswap/widgets to 2.7

* add slippage tolerance from transaction.info

package.json

@@ -145,7 +145,7 @@
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
     "@uniswap/v3-sdk": "^3.9.0",
-    "@uniswap/widgets": "^2.5.0",
+    "@uniswap/widgets": "^2.7.0",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",

src/components/Widget/transactions.ts

-import { TransactionReceipt } from '@ethersproject/abstract-provider'
-import { TransactionEventHandlers } from '@uniswap/widgets'
-import { useMemo } from 'react'
+import {
+  TradeType,
+  Transaction,
+  TransactionEventHandlers,
+  TransactionInfo,
+  TransactionType as WidgetTransactionType,
+} from '@uniswap/widgets'
+import { useWeb3React } from '@web3-react/core'
+import { useCallback, useMemo } from 'react'
+import { useTransactionAdder } from 'state/transactions/hooks'
+import {
+  ExactInputSwapTransactionInfo,
+  ExactOutputSwapTransactionInfo,
+  TransactionType as AppTransactionType,
+  WrapTransactionInfo,
+} from 'state/transactions/types'
+import { currencyId } from 'utils/currencyId'
 
 /** Integrates the Widget's transactions, showing the widget's transactions in the app. */
 export function useSyncWidgetTransactions() {
-  // TODO(jfrankfurt): Integrate widget transactions with app transaction tracking.
-  const txHandlers: TransactionEventHandlers = useMemo(
-    () => ({
-      onTxSubmit: (hash: string, tx: unknown) => console.log('onTxSubmit'),
-      onTxSuccess: (hash: string, receipt: TransactionReceipt) => console.log('onTxSuccess'),
-      onTxFail: (hash: string, receipt: TransactionReceipt) => console.log('onTxFail'),
-    }),
-    []
+  const { chainId } = useWeb3React()
+  const addTransaction = useTransactionAdder()
+
+  const onTxSubmit = useCallback(
+    (_hash: string, transaction: Transaction<TransactionInfo>) => {
+      const { type, response } = transaction.info
+
+      if (!type || !response) {
+        return
+      } else if (type === WidgetTransactionType.WRAP || type === WidgetTransactionType.UNWRAP) {
+        const { amount } = transaction.info
+
+        addTransaction(response, {
+          type: AppTransactionType.WRAP,
+          unwrapped: type === WidgetTransactionType.UNWRAP,
+          currencyAmountRaw: amount.quotient.toString(),
+          chainId,
+        } as WrapTransactionInfo)
+      } else if (type === WidgetTransactionType.SWAP) {
+        const { slippageTolerance, trade, tradeType } = transaction.info
+        const baseTxInfo = {
+          type: AppTransactionType.SWAP,
+          tradeType,
+          inputCurrencyId: currencyId(trade.inputAmount.currency),
+          outputCurrencyId: currencyId(trade.outputAmount.currency),
+        }
+        if (tradeType === TradeType.EXACT_OUTPUT) {
+          addTransaction(response, {
+            ...baseTxInfo,
+            maximumInputCurrencyAmountRaw: trade.maximumAmountIn(slippageTolerance).quotient.toString(),
+            outputCurrencyAmountRaw: trade.outputAmount.quotient.toString(),
+            expectedInputCurrencyAmountRaw: trade.inputAmount.quotient.toString(),
+          } as ExactOutputSwapTransactionInfo)
+        } else {
+          addTransaction(response, {
+            ...baseTxInfo,
+            inputCurrencyAmountRaw: trade.inputAmount.quotient.toString(),
+            expectedOutputCurrencyAmountRaw: trade.outputAmount.quotient.toString(),
+            minimumOutputCurrencyAmountRaw: trade.minimumAmountOut(slippageTolerance).quotient.toString(),
+          } as ExactInputSwapTransactionInfo)
+        }
+      }
+    },
+    [addTransaction, chainId]
   )
 
+  const txHandlers: TransactionEventHandlers = useMemo(() => ({ onTxSubmit }), [onTxSubmit])
+
   return { transactions: { ...txHandlers } }
 }

src/hooks/useAutoSlippageTolerance.ts

@@ -13,7 +13,7 @@ import { InterfaceTrade } from 'state/routing/types'
 import useGasPrice from './useGasPrice'
 import useStablecoinPrice, { useStablecoinValue } from './useStablecoinPrice'
 
-const V3_SWAP_DEFAULT_SLIPPAGE = new Percent(50, 10_000) // .50%
+export const V3_SWAP_DEFAULT_SLIPPAGE = new Percent(50, 10_000) // .50%
 const ONE_TENTHS_PERCENT = new Percent(10, 10_000) // .10%
 export const DEFAULT_AUTO_SLIPPAGE = ONE_TENTHS_PERCENT
 const GAS_ESTIMATE_BUFFER = new Percent(10, 100) // 10%

src/pages/TokenDetails/index.tsx

@@ -149,7 +149,7 @@ export function LoadingTokenDetails() {
   return (
     <TokenDetailsLayout>
       <LoadingTokenDetail />
-      <RightPanel></RightPanel>
+      <RightPanel />
       <Footer />
     </TokenDetailsLayout>
   )

yarn.lock

@@ -4212,10 +4212,10 @@
     "@uniswap/v3-core" "1.0.0"
     "@uniswap/v3-periphery" "^1.0.1"
 
-"@uniswap/widgets@^2.5.0":
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/@uniswap/widgets/-/widgets-2.5.0.tgz#61d72da0ca7bf2091b339df6e3546c9066b34245"
-  integrity sha512-uGFOTf5mzJPhccBf99RRQ4ExQqmgAKn5WbNr3ZrXm1yfjT8Qf4xI3TTa5BrpMlGYr5If4v0vDA3q4WpcQ3isyg==
+"@uniswap/widgets@^2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@uniswap/widgets/-/widgets-2.7.0.tgz#01c306e0ce736383dd2a9b1acec6371d07c9ba80"
+  integrity sha512-PVcQRzjtJqcTMXArCQSe2BmQdq9hhBM7u0nQlj+d2V918mFhi4rVSET3UurwQEegcSNlTrZhGvXKEFeNEhpmFA==
   dependencies:
     "@babel/runtime" "^7.17.0"
     "@fontsource/ibm-plex-mono" "^4.5.1"