Feat: zksync Paymaster (#2483)

* Feat: Zksync Paymaster * chore: add link to docs
KyberNetwork · Mar 23, 2024 · ba3c2a9 · ba3c2a9
1 parent 9aec774
commit ba3c2a9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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])