feat: implementing permit2 with pay with any token (#5926)

* feat: implementing permit2 with pay with any token

* permit2 hook

* usePayWithAnyTokenHook

* removing ternary operators

* weird export type bug

* resolving merge

* fixing nft test

* styles

* refactoring styles

* reformatting

* price impact warnings

* forgot trans tag

* responding to comments

* fixes

* disabling pay with any token when on the wrong chain

* missing enabled flag

* vertically centering button

src/featureFlags/flags/payWithAnyToken.ts

+import { UNIVERSAL_ROUTER_ADDRESS } from '@uniswap/universal-router-sdk'
+import { useWeb3React } from '@web3-react/core'
+
 import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
 
 export function usePayWithAnyTokenFlag(): BaseVariant {
   return useBaseFlag(FeatureFlag.payWithAnyToken)
 }
 
+export function usePayWithAnyTokenEnabled(): boolean {
+  const flagEnabled = usePayWithAnyTokenFlag() === BaseVariant.Enabled
+  const { chainId } = useWeb3React()
+  try {
+    // Detect if the Universal Router is not yet deployed to chainId.
+    // This is necessary so that we can fallback correctly on chains without a Universal Router deployment.
+    // It will be removed once Universal Router is deployed on all supported chains.
+    chainId && UNIVERSAL_ROUTER_ADDRESS(chainId)
+    return flagEnabled
+  } catch {
+    return false
+  }
+}
+
 export { BaseVariant as PayWithAnyTokenVariant }

src/graphql/data/__generated__/types-and-hooks.ts

@@ -579,7 +579,6 @@ export type PortfolioTokensTotalDenominatedValueChangeArgs = {
 
 export type Query = {
   __typename?: 'Query';
-  assetActivities?: Maybe<Array<Maybe<AssetActivity>>>;
   nftAssets?: Maybe<NftAssetConnection>;
   nftBalances?: Maybe<NftBalanceConnection>;
   nftCollections?: Maybe<NftCollectionConnection>;
@@ -595,13 +594,6 @@ export type Query = {
 };
 
 
-export type QueryAssetActivitiesArgs = {
-  address: Scalars['String'];
-  page?: InputMaybe<Scalars['Int']>;
-  pageSize?: InputMaybe<Scalars['Int']>;
-};
-
-
 export type QueryNftAssetsArgs = {
   address: Scalars['String'];
   after?: InputMaybe<Scalars['String']>;

src/nft/hooks/usePayWithAnyTokenSwap.ts

+import { Currency, CurrencyAmount, NativeCurrency, Token, TradeType } from '@uniswap/sdk-core'
+import useAutoSlippageTolerance from 'hooks/useAutoSlippageTolerance'
+import { useBestTrade } from 'hooks/useBestTrade'
+import { useMemo } from 'react'
+import { InterfaceTrade, TradeState } from 'state/routing/types'
+
+export default function usePayWithAnyTokenSwap(
+  inputCurrency?: Currency,
+  parsedOutputAmount?: CurrencyAmount<NativeCurrency | Token>
+): {
+  state: TradeState
+  trade: InterfaceTrade<Currency, Currency, TradeType> | undefined
+  maximumAmountIn: CurrencyAmount<Token> | undefined
+} {
+  const { state, trade } = useBestTrade(TradeType.EXACT_OUTPUT, parsedOutputAmount, inputCurrency ?? undefined)
+  const allowedSlippage = useAutoSlippageTolerance(trade)
+  const maximumAmountIn = useMemo(() => {
+    const maximumAmountIn = trade?.maximumAmountIn(allowedSlippage)
+    return maximumAmountIn?.currency.isToken ? (maximumAmountIn as CurrencyAmount<Token>) : undefined
+  }, [allowedSlippage, trade])
+
+  return useMemo(() => {
+    return {
+      state,
+      trade,
+      maximumAmountIn,
+    }
+  }, [maximumAmountIn, state, trade])
+}

src/nft/hooks/usePermit2Approval.ts

+import { sendAnalyticsEvent } from '@uniswap/analytics'
+import { InterfaceEventName } from '@uniswap/analytics-events'
+import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { UNIVERSAL_ROUTER_ADDRESS } from '@uniswap/universal-router-sdk'
+import { useWeb3React } from '@web3-react/core'
+import usePermit2Allowance, { AllowanceState } from 'hooks/usePermit2Allowance'
+import { useCallback, useMemo, useState } from 'react'
+import invariant from 'tiny-invariant'
+
+export default function usePermit2Approval(
+  amount?: CurrencyAmount<Token>,
+  maximumAmount?: CurrencyAmount<Token>,
+  enabled?: boolean
+) {
+  const { chainId } = useWeb3React()
+
+  const allowance = usePermit2Allowance(
+    enabled ? maximumAmount ?? (amount?.currency.isToken ? (amount as CurrencyAmount<Token>) : undefined) : undefined,
+    enabled && chainId ? UNIVERSAL_ROUTER_ADDRESS(chainId) : undefined
+  )
+  const isApprovalLoading = allowance.state === AllowanceState.REQUIRED && allowance.isApprovalLoading
+  const [isAllowancePending, setIsAllowancePending] = useState(false)
+  const updateAllowance = useCallback(async () => {
+    invariant(allowance.state === AllowanceState.REQUIRED)
+    setIsAllowancePending(true)
+    try {
+      await allowance.approveAndPermit()
+      sendAnalyticsEvent(InterfaceEventName.APPROVE_TOKEN_TXN_SUBMITTED, {
+        chain_id: chainId,
+        token_symbol: maximumAmount?.currency.symbol,
+        token_address: maximumAmount?.currency.address,
+      })
+    } catch (e) {
+      console.error(e)
+    } finally {
+      setIsAllowancePending(false)
+    }
+  }, [allowance, chainId, maximumAmount?.currency.address, maximumAmount?.currency.symbol])
+
+  return useMemo(() => {
+    return {
+      allowance,
+      isApprovalLoading,
+      isAllowancePending,
+      updateAllowance,
+    }
+  }, [allowance, isAllowancePending, isApprovalLoading, updateAllowance])
+}