chore: removing pwat feature flag (#6467)

* chore: removing pwat flag

* removing it from enum

* updating test

* trade is not the same as usingPwat

src/components/FeatureFlagModal/FeatureFlagModal.tsx

 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
 import { DetailsV2Variant, useDetailsV2Flag } from 'featureFlags/flags/nftDetails'
-import { PayWithAnyTokenVariant, usePayWithAnyTokenFlag } from 'featureFlags/flags/payWithAnyToken'
 import { SwapWidgetVariant, useSwapWidgetFlag } from 'featureFlags/flags/swapWidget'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { useUpdateAtom } from 'jotai/utils'
@@ -203,12 +202,6 @@ export default function FeatureFlagModal() {
           <X size={24} />
         </CloseButton>
       </Header>
-      <FeatureFlagOption
-        variant={PayWithAnyTokenVariant}
-        value={usePayWithAnyTokenFlag()}
-        featureFlag={FeatureFlag.payWithAnyToken}
-        label="Pay With Any Token"
-      />
       <FeatureFlagOption
         variant={SwapWidgetVariant}
         value={useSwapWidgetFlag()}

src/featureFlags/flags/featureFlags.ts

@@ -4,7 +4,6 @@
 export enum FeatureFlag {
   traceJsonRpc = 'traceJsonRpc',
   permit2 = 'permit2',
-  payWithAnyToken = 'payWithAnyToken',
   fiatOnRampButtonOnSwap = 'fiat_on_ramp_button_on_swap_page',
   swapWidget = 'swap_widget_replacement_enabled',
   statsigDummy = 'web_dummy_gate_amplitude_id',

src/featureFlags/flags/payWithAnyToken.ts

-import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
-
-export function usePayWithAnyTokenFlag(): BaseVariant {
-  return useBaseFlag(FeatureFlag.payWithAnyToken, BaseVariant.Enabled)
-}
-
-export function usePayWithAnyTokenEnabled(): boolean {
-  return usePayWithAnyTokenFlag() === BaseVariant.Enabled
-}
-
-export { BaseVariant as PayWithAnyTokenVariant }

src/nft/components/bag/BagFooter.tsx

@@ -14,7 +14,6 @@ import CurrencySearchModal from 'components/SearchModal/CurrencySearchModal'
 import { LoadingBubble } from 'components/Tokens/loading'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { SupportedChainId } from 'constants/chains'
-import { usePayWithAnyTokenEnabled } from 'featureFlags/flags/payWithAnyToken'
 import { useCurrency } from 'hooks/Tokens'
 import { AllowanceState } from 'hooks/usePermit2Allowance'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
@@ -55,9 +54,9 @@ const Footer = styled.div`
   border-bottom-right-radius: 12px;
 `
 
-const FooterHeader = styled(Column)<{ usingPayWithAnyToken?: boolean }>`
+const FooterHeader = styled(Column)`
   padding-top: 8px;
-  padding-bottom: ${({ usingPayWithAnyToken }) => (usingPayWithAnyToken ? '16px' : '20px')};
+  padding-bottom: 16px;
 `
 
 const CurrencyRow = styled(Row)`
@@ -292,7 +291,6 @@ export const BagFooter = ({ setModalIsOpen, eventProperties }: BagFooterProps) =
   const { account, chainId, connector } = useWeb3React()
   const connected = Boolean(account && chainId)
   const totalEthPrice = useBagTotalEthPrice()
-  const shouldUsePayWithAnyToken = usePayWithAnyTokenEnabled()
   const inputCurrency = useTokenInput((state) => state.inputCurrency)
   const setInputCurrency = useTokenInput((state) => state.setInputCurrency)
   const defaultCurrency = useCurrency('ETH')
@@ -317,7 +315,7 @@ export const BagFooter = ({ setModalIsOpen, eventProperties }: BagFooterProps) =
   const [tokenSelectorOpen, setTokenSelectorOpen] = useState(false)
   const isPending = PENDING_BAG_STATUSES.includes(bagStatus)
   const activeCurrency = inputCurrency ?? defaultCurrency
-  const usingPayWithAnyToken = !!inputCurrency && shouldUsePayWithAnyToken && chainId === SupportedChainId.MAINNET
+  const usingPayWithAnyToken = !!inputCurrency && chainId === SupportedChainId.MAINNET
 
   useSubscribeTransactionState(setModalIsOpen)
   const fetchAssets = useFetchAssets()
@@ -334,7 +332,6 @@ export const BagFooter = ({ setModalIsOpen, eventProperties }: BagFooterProps) =
   const { allowance, isAllowancePending, isApprovalLoading, updateAllowance } = usePermit2Approval(
     trade?.inputAmount.currency.isToken ? (trade?.inputAmount as CurrencyAmount<Token>) : undefined,
     maximumAmountIn,
-    shouldUsePayWithAnyToken,
     true
   )
   usePayWithAnyTokenSwap(trade, allowance, allowedSlippage)
@@ -501,70 +498,47 @@ export const BagFooter = ({ setModalIsOpen, eventProperties }: BagFooterProps) =
   return (
     <FooterContainer>
       <Footer>
-        {shouldUsePayWithAnyToken && (
-          <FooterHeader gap="xs" usingPayWithAnyToken={shouldUsePayWithAnyToken}>
-            <CurrencyRow>
-              <Column gap="xs">
-                <ThemedText.SubHeaderSmall>
-                  <Trans>Pay with</Trans>
-                </ThemedText.SubHeaderSmall>
-                <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}
-                  </ThemedText.HeadlineSmall>
-                  <ChevronDown size={20} color={theme.textSecondary} />
-                </CurrencyInput>
-              </Column>
-              <TotalColumn gap="xs">
-                <ThemedText.SubHeaderSmall marginBottom="4px">
-                  <Trans>Total</Trans>
-                </ThemedText.SubHeaderSmall>
-                <InputCurrencyValue
-                  usingPayWithAnyToken={usingPayWithAnyToken}
-                  totalEthPrice={totalEthPrice}
-                  activeCurrency={activeCurrency}
-                  tradeState={tradeState}
-                  trade={trade}
-                />
-              </TotalColumn>
-            </CurrencyRow>
-            <FiatValue
-              usdcValue={usdcValue}
-              priceImpact={priceImpact}
-              tradeState={tradeState}
-              usingPayWithAnyToken={usingPayWithAnyToken}
-            />
-          </FooterHeader>
-        )}
-        {!shouldUsePayWithAnyToken && (
-          <FooterHeader gap="xs">
-            <Row justify="space-between">
-              <div>
-                <ThemedText.HeadlineSmall>Total</ThemedText.HeadlineSmall>
-              </div>
-              <div>
-                <ThemedText.HeadlineSmall>
-                  {formatWeiToDecimal(totalEthPrice.toString())}
-                  &nbsp;{activeCurrency?.symbol ?? 'ETH'}
+        <FooterHeader gap="xs">
+          <CurrencyRow>
+            <Column gap="xs">
+              <ThemedText.SubHeaderSmall>
+                <Trans>Pay with</Trans>
+              </ThemedText.SubHeaderSmall>
+              <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}
                 </ThemedText.HeadlineSmall>
-              </div>
-            </Row>
-            <FiatValue
-              usdcValue={usdcValue}
-              priceImpact={priceImpact}
-              tradeState={tradeState}
-              usingPayWithAnyToken={usingPayWithAnyToken}
-            />
-          </FooterHeader>
-        )}
+                <ChevronDown size={20} color={theme.textSecondary} />
+              </CurrencyInput>
+            </Column>
+            <TotalColumn gap="xs">
+              <ThemedText.SubHeaderSmall marginBottom="4px">
+                <Trans>Total</Trans>
+              </ThemedText.SubHeaderSmall>
+              <InputCurrencyValue
+                usingPayWithAnyToken={usingPayWithAnyToken}
+                totalEthPrice={totalEthPrice}
+                activeCurrency={activeCurrency}
+                tradeState={tradeState}
+                trade={trade}
+              />
+            </TotalColumn>
+          </CurrencyRow>
+          <FiatValue
+            usdcValue={usdcValue}
+            priceImpact={priceImpact}
+            tradeState={tradeState}
+            usingPayWithAnyToken={usingPayWithAnyToken}
+          />
+        </FooterHeader>
         <TraceEvent
           events={[BrowserEvent.onClick]}
           name={NFTEventName.NFT_BUY_BAG_PAY}

src/nft/hooks/usePermit2Approval.test.ts

@@ -15,7 +15,7 @@ const mockUsePermit2Allowance = usePermit2Allowance as jest.MockedFunction<typeo
 describe('usePermit2Approval', () => {
   it('sets spender of the correct UR contract from NFT side', async () => {
     mockUsePermit2Allowance.mockReturnValue({ state: AllowanceState.LOADING })
-    renderHook(() => usePermit2Approval(USDCAmount, undefined, true, true))
+    renderHook(() => usePermit2Approval(USDCAmount, undefined, true))
     expect(mockUsePermit2Allowance).toHaveBeenCalledWith(USDCAmount, NFT_UNIVERSAL_ROUTER_MAINNET_ADDRESS)
   })
 })

src/nft/hooks/usePermit2Approval.ts

@@ -13,18 +13,19 @@ const NFT_UNIVERSAL_ROUTER_MAINNET_ADDRESS = '0x4c60051384bd2d3c01bfc845cf5f4b44
 export default function usePermit2Approval(
   amount?: CurrencyAmount<Token>,
   maximumAmount?: CurrencyAmount<Token>,
-  enabled?: boolean,
   shouldUseNftRouter?: boolean
 ) {
   const { chainId } = useWeb3React()
 
+  let contractToApprove: string | undefined
+  if (chainId) {
+    const forceNftRouter = shouldUseNftRouter && chainId === 1
+    contractToApprove = forceNftRouter ? NFT_UNIVERSAL_ROUTER_MAINNET_ADDRESS : UNIVERSAL_ROUTER_ADDRESS(chainId)
+  }
+
   const allowance = usePermit2Allowance(
-    enabled ? maximumAmount ?? (amount?.currency.isToken ? (amount as CurrencyAmount<Token>) : undefined) : undefined,
-    enabled && chainId
-      ? shouldUseNftRouter && chainId === 1
-        ? NFT_UNIVERSAL_ROUTER_MAINNET_ADDRESS
-        : UNIVERSAL_ROUTER_ADDRESS(chainId)
-      : undefined
+    maximumAmount ?? (amount?.currency.isToken ? (amount as CurrencyAmount<Token>) : undefined),
+    contractToApprove
   )
   const isApprovalLoading = allowance.state === AllowanceState.REQUIRED && allowance.isApprovalLoading
   const [isAllowancePending, setIsAllowancePending] = useState(false)