chore: reset sponsored txns on ZKSync

apps/web/src/components/Paymaster/GasTokenSelector.tsx

@@ -2,10 +2,12 @@ import { useTranslation } from '@pancakeswap/localization'
 import {
   ArrowDropDownIcon,
   ArrowForwardIcon,
+  AtomBoxProps,
   Box,
   Button,
   CircleLoader,
   Column,
+  DottedHelpText,
   Flex,
   Heading,
   ModalBody,
@@ -15,6 +17,7 @@ import {
   ModalTitle,
   ModalV2,
   QuestionHelper,
+  QuestionHelperV2,
   RowBetween,
   RowFixed,
   Text,
@@ -39,8 +42,10 @@ import { DEFAULT_PAYMASTER_TOKEN, paymasterInfo, paymasterTokens } from 'config/
 import { useGasToken } from 'hooks/useGasToken'
 
 // Selector Styles
-const GasTokenSelectButton = styled(Button).attrs({ variant: 'text', scale: 'xs' })`
-  padding: 18px 0 18px 6px;
+const GasTokenSelectButton = styled(Button).attrs({ variant: 'tertiary', scale: 'xs' })`
+  padding: 16px 0 14px 6px;
+  border-radius: 12px;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
 `
 
 // Modal Styles
@@ -106,7 +111,7 @@ const SameTokenWarningBox = styled(Box)`
   font-size: 13px;
   background-color: #ffb2371a;
   padding: 10px;
-  margin: 5px 0 8px;
+  margin-bottom: 8px;
   color: ${({ theme }) => theme.colors.yellow};
   border: 1px solid ${({ theme }) => theme.colors.yellow};
   border-radius: ${({ theme }) => theme.radii['12px']};
@@ -116,11 +121,11 @@ const StyledWarningIcon = styled(WarningIcon)`
   fill: ${({ theme }) => theme.colors.yellow};
 `
 
-interface GasTokenSelectorProps {
-  currency?: Currency
+interface GasTokenSelectorProps extends AtomBoxProps {
+  inputCurrency?: Currency
 }
 
-export const GasTokenSelector = ({ currency: inputCurrency }: GasTokenSelectorProps) => {
+export const GasTokenSelector = ({ inputCurrency, ...props }: GasTokenSelectorProps) => {
   const { t } = useTranslation()
   const { isOpen, setIsOpen, onDismiss } = useModalV2()
   const { address: account } = useAccount()
@@ -265,12 +270,9 @@ export const GasTokenSelector = ({ currency: inputCurrency }: GasTokenSelectorPr
 
   return (
     <>
-      <RowBetween style={{ padding: '4px 0 0 0' }}>
+      <RowBetween style={{ padding: '0 0 4px 0' }} {...props}>
         <RowFixed>
-          <Text fontSize="14px" color="textSubtle">
-            {t('Gas Token')}
-          </Text>
-          <QuestionHelper
+          <QuestionHelperV2
             text={
               <>
                 <Text mb="12px">
@@ -285,11 +287,14 @@ export const GasTokenSelector = ({ currency: inputCurrency }: GasTokenSelectorPr
                 </Text>
               </>
             }
-            ml="4px"
             placement="top"
-          />
+          >
+            <DottedHelpText fontSize="14px" color="textSubtle">
+              {t('Gas Token')}
+            </DottedHelpText>
+          </QuestionHelperV2>
           {gasTokenInfo && gasTokenInfo.discount && (
-            <Badge ref={targetRef} style={{ fontSize: '12px', fontWeight: 600, padding: '3px 5px', marginLeft: '4px' }}>
+            <Badge ref={targetRef} style={{ fontSize: '12px', fontWeight: 600, padding: '3px 5px', marginLeft: '6px' }}>
               ⛽️ {gasTokenInfo.discountLabel ?? gasTokenInfo.discount}
             </Badge>
           )}
@@ -307,15 +312,15 @@ export const GasTokenSelector = ({ currency: inputCurrency }: GasTokenSelectorPr
               <p style={{ position: 'absolute', bottom: '-2px', right: '-6px', fontSize: '14px' }}>⛽️</p>
             </div>
 
-            <Text marginLeft={2} fontSize={14} bold>
+            <Text color="primary60" marginLeft={2} fontSize={14} bold>
               {(gasToken && gasToken.symbol && gasToken.symbol.length > 10
                 ? `${gasToken.symbol.slice(0, 4)}...${gasToken.symbol.slice(
                     gasToken.symbol.length - 5,
                     gasToken.symbol.length,
                   )}`
                 : gasToken?.symbol) || ''}
             </Text>
-            <ArrowDropDownIcon marginLeft={1} />
+            <ArrowDropDownIcon color="primary60" marginLeft={1} />
           </Flex>
         </GasTokenSelectButton>
       </RowBetween>

apps/web/src/config/paymaster.ts

@@ -7,11 +7,12 @@ import addresses from 'config/constants/contracts'
 import { getAddressFromMap } from 'utils/addressHelpers'
 import { Address, Hex } from 'viem'
 
-// export const DEFAULT_PAYMASTER_TOKEN = Native.onChain(ChainId.ZKSYNC)
+export const DEFAULT_PAYMASTER_TOKEN = Native.onChain(ChainId.ZKSYNC)
 
 export const paymasterTokens: Currency[] = [
-  // DEFAULT_PAYMASTER_TOKEN,
-  Native.onChain(ChainId.ZKSYNC),
+  DEFAULT_PAYMASTER_TOKEN,
+  zksyncTokens.zk,
+  zksyncTokens.cake,
   zksyncTokens.wbtc,
   zksyncTokens.dai,
   zksyncTokens.usdc,
@@ -26,78 +27,63 @@ export const paymasterTokens: Currency[] = [
   zksyncTokens.weth,
   zksyncTokens.wethe,
   zksyncTokens.hold,
-  zksyncTokens.zk,
 ]
 
-export const DEFAULT_PAYMASTER_TOKEN = paymasterTokens[4]
-
 export const paymasterInfo: {
   [gasTokenAddress: Address]: { discount: `-${number}%` | 'FREE'; discountLabel?: string }
 } = {
+  [zksyncTokens.zk.address]: {
+    discount: '-40%',
+  },
   [zksyncTokens.wbtc.address]: {
-    discount: 'FREE', // Example: -20%, FREE
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.dai.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.usdc.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.usdcNative.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.usdt.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.grai.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.tes.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.busd.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.reth.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.wstETH.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.meow.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.weth.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.wethe.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
   [zksyncTokens.hold.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+    discount: '-20%',
   },
-  [zksyncTokens.zk.address]: {
-    discount: 'FREE',
-    discountLabel: 'FREE SWAP',
+  [zksyncTokens.cake.address]: {
+    discount: '-20%',
   },
 }
 
 /**
- * Contracts that the paymaster is allowed to interact with.
+ * Contracts that the paymaster is allowed to interact with if transaction is sponsored.
  * In addition, ERC20 Approve transactions are allowed.
  */
 export const PAYMASTER_CONTRACT_WHITELIST = [

apps/web/src/pages/api/paymaster/index.ts

@@ -19,22 +19,24 @@ const handler: NextApiHandler = async (req, res) => {
   }
 
   try {
-    let isTransactionWhitelisted = PAYMASTER_CONTRACT_WHITELIST.includes(call.address.toLowerCase())
+    const gasTokenInfo = paymasterInfo[gasTokenAddress]
+    const isSponsored = gasTokenInfo?.discount === 'FREE'
 
-    try {
-      // Check calldata for ERC20 approve
-      const decodedCalldata = decodeFunctionData({ data: call.calldata, abi: erc20Abi })
-      if (decodedCalldata.functionName === 'approve') isTransactionWhitelisted = true
-    } catch (e) {
-      // do nothing. must be another type of transaction if decoding failed
-    }
+    if (isSponsored) {
+      let isTransactionWhitelisted = PAYMASTER_CONTRACT_WHITELIST.includes(call.address.toLowerCase())
 
-    if (!isTransactionWhitelisted) {
-      return res.status(400).json({ error: 'Transaction type not whitelisted for Paymaster' })
-    }
+      try {
+        // Check calldata for ERC20 approve
+        const decodedCalldata = decodeFunctionData({ data: call.calldata, abi: erc20Abi })
+        if (decodedCalldata.functionName === 'approve') isTransactionWhitelisted = true
+      } catch {
+        // do nothing. must be another type of transaction if decoding failed
+      }
 
-    const gasTokenInfo = paymasterInfo[gasTokenAddress]
-    const isSponsored = gasTokenInfo?.discount === 'FREE'
+      if (!isTransactionWhitelisted) {
+        return res.status(400).json({ error: 'Transaction type not whitelisted for Paymaster' })
+      }
+    }
 
     const PAYMASTER_URL = isSponsored ? ZYFI_SPONSORED_PAYMASTER_URL : ZYFI_PAYMASTER_URL
     const gas = calculateGasMargin(BigInt(call.gas), 2000n)

apps/web/src/views/Swap/V3Swap/containers/TradeDetails.tsx

@@ -5,9 +5,9 @@ import { memo, useMemo } from 'react'
 import { TradeSummary } from 'views/Swap/components/AdvancedSwapDetails'
 import { AdvancedDetailsFooter } from 'views/Swap/components/AdvancedSwapDetailsDropdown'
 
+import { PriceOrder } from '@pancakeswap/price-api-sdk'
 import { GasTokenSelector } from 'components/Paymaster/GasTokenSelector'
 import { usePaymaster } from 'hooks/usePaymaster'
-import { PriceOrder } from '@pancakeswap/price-api-sdk'
 import { isClassicOrder, isXOrder } from 'views/Swap/utils'
 import { RoutesBreakdown, XRoutesBreakdown } from '../components'
 import { useIsWrapping, useSlippageAdjustedAmounts } from '../hooks'
@@ -53,7 +53,9 @@ export const TradeDetails = memo(function TradeDetails({ loaded, order }: Props)
           priceImpactWithoutFee={priceImpactWithoutFee ?? undefined}
           realizedLPFee={lpFeeAmount ?? undefined}
           hasStablePair={hasStablePool}
-          gasTokenSelector={isPaymasterAvailable && inputAmount && <GasTokenSelector currency={inputAmount.currency} />}
+          gasTokenSelector={
+            isPaymasterAvailable && inputAmount && <GasTokenSelector inputCurrency={inputAmount.currency} />
+          }
         />
         {isXOrder(order) ? <XRoutesBreakdown /> : <RoutesBreakdown routes={order?.trade?.routes} />}
       </AutoColumn>

apps/web/src/views/SwapSimplify/V4Swap/AdvancedSwapDetails.tsx

@@ -15,7 +15,7 @@ import {
 } from '@pancakeswap/uikit'
 import { formatAmount, formatFraction } from '@pancakeswap/utils/formatFractions'
 import { useUserSlippage } from '@pancakeswap/utils/user'
-import React, { memo, useState } from 'react'
+import { memo, useState } from 'react'
 
 import { NumberDisplay } from '@pancakeswap/widgets-internal'
 import { RowBetween, RowFixed } from 'components/Layout/Row'
@@ -44,7 +44,6 @@ export const TradeSummary = memo(function TradeSummary({
   slippageAdjustedAmounts,
   priceImpactWithoutFee,
   realizedLPFee,
-  gasTokenSelector,
   isX = false,
   loading = false,
 }: {
@@ -55,7 +54,6 @@ export const TradeSummary = memo(function TradeSummary({
   slippageAdjustedAmounts: SlippageAdjustedAmounts
   priceImpactWithoutFee?: Percent | null
   realizedLPFee?: CurrencyAmount<Currency> | null
-  gasTokenSelector?: React.ReactNode
   isX?: boolean
   loading?: boolean
 }) {
@@ -66,7 +64,6 @@ export const TradeSummary = memo(function TradeSummary({
 
   return (
     <AutoColumn px="4px">
-      {gasTokenSelector}
       <RowBetween>
         <RowFixed>
           <QuestionHelperV2

apps/web/src/views/SwapSimplify/V4Swap/ButtonAndDetailsPanel.tsx

@@ -13,22 +13,27 @@ export const PanelWrapper = styled.div`
   border: 1px solid ${({ theme }) => theme.colors.cardBorder};
 `
 interface ButtonAndDetailsPanelProps {
+  shouldRenderDetails?: boolean
+
   swapCommitButton: React.ReactNode
   pricingAndSlippage: React.ReactNode
   tradeDetails: React.ReactNode
-  shouldRenderDetails?: boolean
+
+  gasTokenSelector?: React.ReactNode
 }
 
 export const ButtonAndDetailsPanel: React.FC<ButtonAndDetailsPanelProps> = ({
+  shouldRenderDetails,
   swapCommitButton,
   pricingAndSlippage,
   tradeDetails,
-  shouldRenderDetails,
+  gasTokenSelector,
 }) => {
   const [isOpen, setIsOpen] = useState(false)
   return (
     <PanelWrapper>
       {swapCommitButton}
+      {gasTokenSelector}
       {shouldRenderDetails && (
         <SwapUIV2.Collapse
           isOpen={isOpen}

apps/web/src/views/SwapSimplify/V4Swap/TradeDetails.tsx

@@ -5,8 +5,6 @@ import { memo, useMemo } from 'react'
 import { styled } from 'styled-components'
 
 import { PriceOrder } from '@pancakeswap/price-api-sdk'
-import { GasTokenSelector } from 'components/Paymaster/GasTokenSelector'
-import { usePaymaster } from 'hooks/usePaymaster'
 import { isClassicOrder, isXOrder } from 'views/Swap/utils'
 import { useIsWrapping, useSlippageAdjustedAmounts } from '../../Swap/V3Swap/hooks'
 import { computeTradePriceBreakdown } from '../../Swap/V3Swap/utils/exchange'
@@ -44,8 +42,6 @@ export const TradeDetails = memo(function TradeDetails({ loaded, order }: Props)
     [order],
   )
 
-  const { isPaymasterAvailable } = usePaymaster()
-
   if (isWrapping || !order || !slippageAdjustedAmounts || !order.trade) {
     return null
   }
@@ -64,7 +60,6 @@ export const TradeDetails = memo(function TradeDetails({ loaded, order }: Props)
           priceImpactWithoutFee={priceImpactWithoutFee ?? undefined}
           realizedLPFee={lpFeeAmount ?? undefined}
           hasStablePair={hasStablePool}
-          gasTokenSelector={isPaymasterAvailable && <GasTokenSelector currency={order?.trade.inputAmount.currency} />}
           loading={!loaded}
         />
         <Box mt="10px" pl="4px">