feat: add zap prod config

KyberNetwork · Nov 2, 2023 · 17404d2 · 17404d2
1 parent 736c0b6
commit 17404d2
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 17 deletions.
diff --git a/src/assets/svg/zap.svg b/src/assets/svg/zap.svg
diff --git a/src/components/ElasticZap/QuickZap.tsx b/src/components/ElasticZap/QuickZap.tsx
@@ -56,10 +56,14 @@ const QuickZapButtonWrapper = styled(ButtonOutlined)<{ size: 'small' | 'medium'
   width: ${({ size }) => (size === 'small' ? '28px' : '36px')};
   max-width: ${({ size }) => (size === 'small' ? '28px' : '36px')};
   height: ${({ size }) => (size === 'small' ? '28px' : '36px')};
-  background: ${({ theme }) => rgba(theme.warning, 0.2)};
-  color: ${({ theme }) => theme.subText};
+  background: ${({ theme, disabled }) => rgba(disabled ? theme.subText : theme.warning, 0.2)};
+  color: ${({ theme, disabled }) => (disabled ? theme.subText : '#FF9901')};
+  &:hover {
+    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+    border: 1px solid ${({ theme, disabled }) => rgba(disabled ? theme.subText : theme.warning, 0.2)};
+  }
 
-  border: 1px solid ${({ theme }) => rgba(theme.warning, 0.2)};
+  border: 1px solid ${({ theme, disabled }) => rgba(disabled ? theme.subText : theme.warning, 0.2)};
 
   &:active {
     box-shadow: none;
@@ -87,9 +91,26 @@ export const QuickZapButton = ({
   onClick: (e: React.MouseEvent<HTMLElement>) => void
   size?: 'small' | 'medium'
 }) => {
+  const { networkInfo } = useActiveWeb3React()
+  const isZapAvailable = !!(networkInfo as EVMNetworkInfo).elastic.zap
+  const theme = useTheme()
+
   return (
-    <MouseoverTooltip text={<Trans>Quickly zap and add liquidity using only one token</Trans>}>
-      <QuickZapButtonWrapper onClick={onClick} size={size}>
+    <MouseoverTooltip
+      text={
+        isZapAvailable ? (
+          <Trans>Quickly zap and add liquidity using only one token.</Trans>
+        ) : (
+          <Trans>Zap will be available soon.</Trans>
+        )
+      }
+    >
+      <QuickZapButtonWrapper
+        onClick={onClick}
+        size={size}
+        disabled={!isZapAvailable}
+        color={!isZapAvailable ? theme.subText : theme.warning}
+      >
         <ZapIcon />
       </QuickZapButtonWrapper>
     </MouseoverTooltip>

diff --git a/src/constants/networks/matic.ts b/src/constants/networks/matic.ts
@@ -70,10 +70,10 @@ const maticInfo: EVMNetworkInfo = {
       '0xf2BcDf38baA52F6b0C1Db5B025DfFf01Ae1d6dBd',
     ],
     zap: {
-      router: '0x411c8FC7D5dDB3bE1263982805Af709586B6b40c',
-      validator: '0x268D69745f8a30D30610F67fD9aC15646F32aB36',
-      executor: '0xa241b62503B5A03409F084C11bb04fce55C18DaC',
-      helper: '0x13c7c37d1215273CC34B924dDd49Eb1761D8e905',
+      router: '0x30C5322E4e08AD500c348007f92f120ab4E2b79e',
+      validator: '0xf0096e5B4AAfeEA1DF557264091569ba125c1172',
+      executor: '0x4f097F7074D52952006a0763312724929Ff95Cf0',
+      helper: '0x4E8419EFa0b0A149Dad77b689D37AF17f762f20A',
     },
     'farmV2.1S': [],
   },

diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx
@@ -253,7 +253,14 @@ export default function AddLiquidity() {
   const defaultFId = Number(searchParams.get('fId') || '0')
   const range = activeRanges.find(i => i.index === activeRangeIndex && i.farm.fId === defaultFId)
 
-  const [method, setMethod] = useState<'pair' | 'zap'>('zap')
+  const isZapAvailable = !!(networkInfo as EVMNetworkInfo).elastic.zap
+  const [method, setMethod] = useState<'pair' | 'zap'>(() => (isZapAvailable ? 'zap' : 'pair'))
+
+  useEffect(() => {
+    if (!isZapAvailable) {
+      setMethod('pair')
+    }
+  }, [isZapAvailable])
 
   const canJoinFarm =
     isFarmV2Available &&

diff --git a/src/pages/AddLiquidityV2/styled.tsx b/src/pages/AddLiquidityV2/styled.tsx
@@ -8,6 +8,8 @@ import { ButtonOutlined } from 'components/Button'
 import { AutoColumn } from 'components/Column'
 import InfoHelper from 'components/InfoHelper'
 import Input from 'components/NumericalInput'
+import { EVMNetworkInfo } from 'constants/networks/type'
+import { useActiveWeb3React } from 'hooks'
 import { MEDIA_WIDTHS } from 'theme'
 
 export const PageWrapper = styled(AutoColumn)`
@@ -223,7 +225,7 @@ const MethodTabs = styled.div`
   display: flex;
 `
 
-const MethodTab = styled.div<{ active: boolean }>`
+const MethodTab = styled.div<{ active: boolean; disabled?: boolean }>`
   background: ${({ theme, active }) => (active ? theme.tabActive : theme.buttonBlack)};
   opacity: ${({ active }) => (active ? 1 : 0.6)};
   cursor: pointer;
@@ -236,6 +238,14 @@ const MethodTab = styled.div<{ active: boolean }>`
   line-height: 20px;
   padding: 2px;
   min-width: 96px;
+
+  ${({ disabled }) =>
+    disabled
+      ? css`
+          opacity: 0.6;
+          cursor: not-allowed;
+        `
+      : undefined}
 `
 
 export const MethodSelector = ({
@@ -250,6 +260,9 @@ export const MethodSelector = ({
   const theme = useTheme()
   const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
 
+  const { networkInfo } = useActiveWeb3React()
+  const isZapAvailable = !!(networkInfo as EVMNetworkInfo).elastic.zap
+
   return (
     <Flex
       justifyContent="space-between"
@@ -277,11 +290,26 @@ export const MethodSelector = ({
           <MethodTab role="button" onClick={() => setMethod('pair')} active={method === 'pair'}>
             Token Pair
           </MethodTab>
-          <MethodTab role="button" onClick={() => setMethod('zap')} active={method === 'zap'}>
-            <Flex alignItems="center">
+          <MethodTab
+            role="button"
+            onClick={() => isZapAvailable && setMethod('zap')}
+            active={method === 'zap'}
+            disabled={!isZapAvailable}
+          >
+            <Flex alignItems="center" color={isZapAvailable ? theme.warning : theme.subText}>
               <ZapIcon />
-              <Text marginLeft="4px">Zap In</Text>
-              <InfoHelper text={<Trans>Add liquidity instantly using only one token!</Trans>} />
+              <Text marginLeft="4px" color={theme.text}>
+                Zap In
+              </Text>
+              <InfoHelper
+                text={
+                  isZapAvailable ? (
+                    <Trans>Add liquidity instantly using only one token!</Trans>
+                  ) : (
+                    <Trans>Zap will be available soon.</Trans>
+                  )
+                }
+              />
             </Flex>
           </MethodTab>
         </MethodTabs>

diff --git a/src/pages/IncreaseLiquidity/index.tsx b/src/pages/IncreaseLiquidity/index.tsx
@@ -100,9 +100,16 @@ const TextUnderlineTransparent = styled(Text)`
 `
 
 export default function IncreaseLiquidity() {
+  const { account, chainId, isEVM, networkInfo } = useActiveWeb3React()
   const [method, setMethod] = useState<'pair' | 'zap'>('zap')
+  const isZapAvailable = !!(networkInfo as EVMNetworkInfo).elastic.zap
+  useEffect(() => {
+    if (!isZapAvailable) {
+      setMethod('pair')
+    }
+  }, [isZapAvailable])
+
   const { currencyIdB, currencyIdA, feeAmount: feeAmountFromUrl, tokenId } = useParams()
-  const { account, chainId, isEVM, networkInfo } = useActiveWeb3React()
   const { library } = useWeb3React()
   const navigate = useNavigate()
   const theme = useTheme()