feat: pwat amp events (#5991)

* feat: implementing graphql endpoint

* changing from hook to function call

* initial gql routing works

* feat: initial pwatRouting setup

* sending correct amount

* removing console

* it is working

* sufficient balance

* 0 if no inputCurrency

* removing value to send if erc20

* removing console

* permit2 optional flag

* removing not necessary stuff

* mobile fixes

* overlay needs to be here

* changing swap amount to pool reserves

* refactoring routing logic

* no route found button state

* better price loading for insufficient liquidity

* refactoring graphql routing code

* overflow

* initial comments

* resetting bag status on input currency change

* locking

* done

* remove helper text for eth

* fix: pay with any token routing bug

* reordering button

* zindex

* price updated

* keeping debounce

* feat: adding amplitude events for pwat

* bumping analytics version

* types and hooks

* moving erc20 flag to useSendTransaction

* why did i put it in a hook

* no return

package.json

@@ -134,7 +134,7 @@
     "@sentry/react": "^7.29.0",
     "@types/react-window-infinite-loader": "^1.0.6",
     "@uniswap/analytics": "1.2.0",
-    "@uniswap/analytics-events": "^2.1.0",
+    "@uniswap/analytics-events": "^2.3.0",
     "@uniswap/conedison": "^1.3.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",

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

@@ -41,7 +41,6 @@ export enum ActivityType {
   Send = 'SEND',
   Stake = 'STAKE',
   Swap = 'SWAP',
-  Swapx = 'SWAPX',
   Staking = 'Staking',
   Unknown = 'UNKNOWN',
   Unstake = 'UNSTAKE',
@@ -83,7 +82,8 @@ export enum Chain {
   Ethereum = 'ETHEREUM',
   EthereumGoerli = 'ETHEREUM_GOERLI',
   Optimism = 'OPTIMISM',
-  Polygon = 'POLYGON'
+  Polygon = 'POLYGON',
+  UnknownChain = 'UNKNOWN_CHAIN'
 }
 
 export type ContractInput = {
@@ -196,6 +196,7 @@ export type NftAssetListingsArgs = {
   after?: InputMaybe<Scalars['String']>;
   asc?: InputMaybe<Scalars['Boolean']>;
   before?: InputMaybe<Scalars['String']>;
+  datasource?: InputMaybe<DatasourceProvider>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
 };
@@ -310,6 +311,7 @@ export type NftCollection = {
 
 export type NftCollectionMarketsArgs = {
   currencies: Array<Currency>;
+  datasource?: InputMaybe<DatasourceProvider>;
 };
 
 export type NftCollectionConnection = {
@@ -621,6 +623,7 @@ export type QueryNftAssetsArgs = {
   asc?: InputMaybe<Scalars['Boolean']>;
   before?: InputMaybe<Scalars['String']>;
   chain?: InputMaybe<Chain>;
+  datasource?: InputMaybe<DatasourceProvider>;
   filter?: InputMaybe<NftAssetsFilterInput>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
@@ -632,9 +635,12 @@ export type QueryNftBalancesArgs = {
   after?: InputMaybe<Scalars['String']>;
   before?: InputMaybe<Scalars['String']>;
   chain?: InputMaybe<Chain>;
+  cursor?: InputMaybe<Scalars['String']>;
+  datasource?: InputMaybe<DatasourceProvider>;
   filter?: InputMaybe<NftBalancesFilterInput>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
+  limit?: InputMaybe<Scalars['Int']>;
   ownerAddress: Scalars['String'];
 };
 
@@ -642,6 +648,7 @@ export type QueryNftBalancesArgs = {
 export type QueryNftCollectionsArgs = {
   after?: InputMaybe<Scalars['String']>;
   before?: InputMaybe<Scalars['String']>;
+  datasource?: InputMaybe<DatasourceProvider>;
   filter?: InputMaybe<NftCollectionsFilterInput>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
@@ -832,6 +839,7 @@ export type TokenProjectMarketsArgs = {
 export type TokenProjectMarket = {
   __typename?: 'TokenProjectMarket';
   currency: Currency;
+  /** @deprecated Use marketCap */
   fullyDilutedMarketCap?: Maybe<Amount>;
   id: Scalars['ID'];
   marketCap?: Maybe<Amount>;
@@ -839,9 +847,12 @@ export type TokenProjectMarket = {
   priceHighLow?: Maybe<Amount>;
   priceHistory?: Maybe<Array<Maybe<TimestampedAmount>>>;
   pricePercentChange?: Maybe<Amount>;
+  /** @deprecated Use pricePercentChange */
   pricePercentChange24h?: Maybe<Amount>;
   tokenProject: TokenProject;
+  /** @deprecated Use TokenMarket.volume for Uniswap volume */
   volume?: Maybe<Amount>;
+  /** @deprecated Use TokenMarket.volume with duration DAY for Uniswap volume */
   volume24h?: Maybe<Amount>;
 };
 

src/nft/components/bag/Bag.tsx

@@ -179,12 +179,13 @@ const Bag = () => {
     return { totalEthPrice }
   }, [itemsInBag])
 
-  const purchaseAssets = async (routingData: RouteResponse) => {
+  const purchaseAssets = async (routingData: RouteResponse, purchasingWithErc20: boolean) => {
     if (!provider || !routingData) return
     const purchaseResponse = await sendTransaction(
       provider?.getSigner(),
       itemsInBag.filter((item) => item.status !== BagItemStatus.UNAVAILABLE).map((item) => item.asset),
-      routingData
+      routingData,
+      purchasingWithErc20
     )
     if (
       purchaseResponse &&
@@ -230,10 +231,11 @@ const Bag = () => {
               return
             }
 
-            const { route, routeResponse } = buildRouteResponse(data.nftRoute, !!tokenTradeInput)
+            const purchasingWithErc20 = !!tokenTradeInput
+            const { route, routeResponse } = buildRouteResponse(data.nftRoute, purchasingWithErc20)
 
             const { hasPriceAdjustment, updatedAssets } = combineBuyItemsWithTxRoute(itemsToBuy, route)
-            const shouldRefetchCalldata = hasPriceAdjustment && !!tokenTradeInput
+            const shouldRefetchCalldata = hasPriceAdjustment && purchasingWithErc20
 
             const fetchedPriceChangedAssets = updatedAssets
               .filter((asset) => asset.updatedPriceInfo)
@@ -270,7 +272,7 @@ const Bag = () => {
                 if (shouldRefetchCalldata) {
                   setBagStatus(BagStatus.CONFIRM_QUOTE)
                 } else {
-                  purchaseAssets(routeResponse)
+                  purchaseAssets(routeResponse, purchasingWithErc20)
                   setBagStatus(BagStatus.CONFIRMING_IN_WALLET)
                   shouldLock = true
                 }
@@ -325,7 +327,7 @@ const Bag = () => {
 
         if (hasAssets) {
           if (!shouldReview) {
-            purchaseAssets(routeData)
+            purchaseAssets(routeData, false)
             setBagStatus(BagStatus.CONFIRMING_IN_WALLET)
           } else if (!hasAssetsInReview) setBagStatus(BagStatus.CONFIRM_REVIEW)
           else {

src/nft/components/bag/BagFooter.tsx

@@ -2,7 +2,7 @@ import { BigNumber } from '@ethersproject/bignumber'
 import { formatEther } from '@ethersproject/units'
 import { parseEther } from '@ethersproject/units'
 import { t, Trans } from '@lingui/macro'
-import { TraceEvent } from '@uniswap/analytics'
+import { sendAnalyticsEvent, TraceEvent } from '@uniswap/analytics'
 import { BrowserEvent, InterfaceElementName, NFTEventName } from '@uniswap/analytics-events'
 import { formatPriceImpact } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
@@ -518,6 +518,7 @@ export const BagFooter = ({ totalEthPrice, fetchAssets, eventProperties }: BagFo
 
   const traceEventProperties = {
     usd_value: usdcValue?.toExact(),
+    using_erc20: !!inputCurrency,
     ...eventProperties,
   }
 
@@ -531,7 +532,14 @@ export const BagFooter = ({ totalEthPrice, fetchAssets, eventProperties }: BagFo
                 <ThemedText.SubHeaderSmall>
                   <Trans>Pay with</Trans>
                 </ThemedText.SubHeaderSmall>
-                <CurrencyInput onClick={() => (bagIsLocked ? undefined : setTokenSelectorOpen(true))}>
+                <CurrencyInput
+                  onClick={() => {
+                    if (!bagIsLocked) {
+                      setTokenSelectorOpen(true)
+                      sendAnalyticsEvent(NFTEventName.NFT_BUY_TOKEN_SELECTOR_CLICKED)
+                    }
+                  }}
+                >
                   <CurrencyLogo currency={activeCurrency} size="24px" />
                   <ThemedText.HeadlineSmall fontWeight={500} lineHeight="24px">
                     {activeCurrency?.symbol}
@@ -606,7 +614,15 @@ export const BagFooter = ({ totalEthPrice, fetchAssets, eventProperties }: BagFo
       <CurrencySearchModal
         isOpen={tokenSelectorOpen}
         onDismiss={() => setTokenSelectorOpen(false)}
-        onCurrencySelect={(currency: Currency) => setInputCurrency(currency.isNative ? undefined : currency)}
+        onCurrencySelect={(currency: Currency) => {
+          setInputCurrency(currency.isNative ? undefined : currency)
+          if (currency.isToken) {
+            sendAnalyticsEvent(NFTEventName.NFT_BUY_TOKEN_SELECTED, {
+              token_address: currency.address,
+              token_symbol: currency.symbol,
+            })
+          }
+        }}
         selectedCurrency={activeCurrency ?? undefined}
         onlyShowCurrenciesWithBalance={true}
       />

src/nft/components/collection/TransactionCompleteModal.tsx

@@ -50,6 +50,7 @@ const TxCompleteModal = () => {
   const [ethPrice, setEthPrice] = useState(3000)
   const [showUnavailable, setShowUnavailable] = useState(false)
   const txHash = useSendTransaction((state) => state.txHash)
+  const purchasedWithErc20 = useSendTransaction((state) => state.purchasedWithErc20)
   const setTxState = useSendTransaction((state) => state.setState)
   const txState = useSendTransaction((state) => state.state)
   const transactionStateRef = useRef(txState)
@@ -115,6 +116,7 @@ const TxCompleteModal = () => {
                   buy_quantity: nftsPurchased.length,
                   usd_value: parseFloat(formatEther(totalPurchaseValue)) * ethPrice,
                   transaction_hash: txHash,
+                  using_erc20: purchasedWithErc20,
                   ...formatAssetEventProperties(nftsPurchased),
                   ...trace,
                 }}

src/nft/hooks/useSendTransaction.ts

@@ -19,10 +19,12 @@ interface TxState {
   setState: (state: TxStateType) => void
   txHash: string
   clearTxHash: () => void
+  purchasedWithErc20: boolean
   sendTransaction: (
     signer: JsonRpcSigner,
     selectedAssets: UpdatedGenieAsset[],
-    transactionData: RouteResponse
+    transactionData: RouteResponse,
+    purchasedWithErc20: boolean
   ) => Promise<TxResponse | undefined>
 }
 
@@ -31,9 +33,10 @@ export const useSendTransaction = create<TxState>()(
     (set) => ({
       state: TxStateType.New,
       txHash: '',
+      purchasedWithErc20: false,
       clearTxHash: () => set({ txHash: '' }),
       setState: (newState) => set(() => ({ state: newState })),
-      sendTransaction: async (signer, selectedAssets, transactionData) => {
+      sendTransaction: async (signer, selectedAssets, transactionData, purchasedWithErc20) => {
         const address = await signer.getAddress()
         try {
           const txNoGasLimit = {
@@ -50,6 +53,7 @@ export const useSendTransaction = create<TxState>()(
           const res = await signer.sendTransaction(tx)
           set({ state: TxStateType.Confirming })
           set({ txHash: res.hash })
+          set({ purchasedWithErc20 })
           sendAnalyticsEvent(NFTEventName.NFT_BUY_BAG_SIGNED, { transaction_hash: res.hash })
 
           const txReceipt = await res.wait()

yarn.lock

@@ -4931,10 +4931,10 @@
     "@typescript-eslint/types" "5.47.0"
     eslint-visitor-keys "^3.3.0"
 
-"@uniswap/analytics-events@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-2.1.0.tgz#0a112f642d0121fdf69b5dc9a17639f06aa63085"
-  integrity sha512-HkWyri7PxnIS6B5sysym1LCMPnenkeAFyI41fYGDUNq3a5aEDuD77jyyFSwdW4yZfUOxq3zBUTmeQOIf/GT+tQ==
+"@uniswap/analytics-events@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-2.3.0.tgz#e4d6b29633c09872be3b9b760b1a192b96368887"
+  integrity sha512-oShunkYEfa45RQAtl2aQfF91gfX4QirLa/fR+FyL5jfl+Ei4AZ1ihtyVjJ1VLOJlObX1p08JjlpA0yxqDwPYHw==
 
 "@uniswap/analytics@1.2.0":
   version "1.2.0"