From ba3c2a9380653c4f46960d13ed86085fec01afd7 Mon Sep 17 00:00:00 2001
From: Nguyen Van Viet <vietnv1304@gmail.com>
Date: Sat, 23 Mar 2024 16:21:04 +0700
Subject: [PATCH] Feat: zksync Paymaster (#2483)

* Feat: Zksync Paymaster

* chore: add link to docs
---
 .../SwapForm/SlippageSettingGroup.tsx         |  3 +--
 src/components/swapv2/GasTokenSetting.tsx     | 21 ++++++++++++++++---
 src/state/user/hooks.tsx                      |  4 +---
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/SwapForm/SlippageSettingGroup.tsx b/src/components/SwapForm/SlippageSettingGroup.tsx
index a1e0f387a6..c548eb24d5 100644
--- a/src/components/SwapForm/SlippageSettingGroup.tsx
+++ b/src/components/SwapForm/SlippageSettingGroup.tsx
@@ -68,8 +68,7 @@ export default function SlippageSettingGroup({
       </PriceAlertButton>
     ) : null
 
-  // fake to hide for now
-  if (chainId === ChainId.ZKSYNC && !isPartnerSwap && 1 + 1 > 3) {
+  if (chainId === ChainId.ZKSYNC && !isPartnerSwap) {
     rightButton = (
       <Flex alignItems="center" width="fit-content" role="button" sx={{ cursor: 'pointer' }} onClick={onOpenGasToken}>
         <MouseoverTooltip text="Pay network fees in the token of your choice." placement="top">
diff --git a/src/components/swapv2/GasTokenSetting.tsx b/src/components/swapv2/GasTokenSetting.tsx
index 2462a81147..2e7cd2a6e2 100644
--- a/src/components/swapv2/GasTokenSetting.tsx
+++ b/src/components/swapv2/GasTokenSetting.tsx
@@ -6,10 +6,12 @@ import { Box, Flex, Text } from 'rebass'
 
 import CurrencyLogo from 'components/CurrencyLogo'
 import Divider from 'components/Divider'
+import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
 import { GAS_TOKENS, NativeCurrencies } from 'constants/tokens'
 import useTheme from 'hooks/useTheme'
 import { usePaymentToken } from 'state/user/hooks'
 import { useCurrencyBalances, useNativeBalance } from 'state/wallet/hooks'
+import { ExternalLink } from 'theme'
 
 export default function GasTokenSetting({ onBack }: { onBack: () => void }) {
   const theme = useTheme()
@@ -80,9 +82,22 @@ export default function GasTokenSetting({ onBack }: { onBack: () => void }) {
           />
         </svg>
 
-        <Text fontSize={14} fontWeight="500">
-          Paymaster
-        </Text>
+        <TextDashed fontSize={14} fontWeight="500" lineHeight="20px">
+          <MouseoverTooltip
+            text={
+              <Text>
+                <Trans>
+                  The PayMaster module & contracts are developed and operated by HoldStations,{' '}
+                  <ExternalLink href="https://docs.kyberswap.com/reference/third-party-integrations#what-is-paymaster">
+                    details
+                  </ExternalLink>
+                </Trans>
+              </Text>
+            }
+          >
+            Paymaster
+          </MouseoverTooltip>
+        </TextDashed>
       </Flex>
       <Text fontSize={14} color={theme.subText} marginTop="4px" marginBottom="1rem">
         <Trans>Pay network fees in the token of your choice.</Trans>
diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx
index c724bcf2ec..97490f16a0 100644
--- a/src/state/user/hooks.tsx
+++ b/src/state/user/hooks.tsx
@@ -450,9 +450,7 @@ export const usePaymentToken: () => [Token | null, (paymentToken: Token | null)
   const p = useMemo(() => {
     if (chainId !== ChainId.ZKSYNC) return null
     if (!GAS_TOKENS.map(item => item.address.toLowerCase()).includes(paymentToken?.address.toLowerCase())) return null
-
-    // TODO: hardcode to temp disable for now
-    return null
+    return paymentToken
   }, [paymentToken, chainId])
 
   const updatePaymentToken = useCallback((pt: Token | null) => dispatch(setPaymentToken(pt)), [dispatch])