Merge pull request #915 from QuickSwap/dev2

Merge dev to master
QuickSwap · Jul 18, 2023 · 467b691 · 467b691
2 parents 0e3f26a + c40ed63
commit 467b691
Show file tree

Hide file tree

Showing 23 changed files with 446 additions and 163 deletions.
diff --git a/public/WMATIC.png b/public/WMATIC.png
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/logo_circle.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1"
+    />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
@@ -15,8 +18,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -27,23 +30,41 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Quickswap - Leading DEX on Polygon</title>
-    <script type="text/javascript" src="https://app.web3ads.net/main.js" async></script>
+    <script
+      type="text/javascript"
+      src="https://app.web3ads.net/main.js"
+      async
+    ></script>
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-ZWDNPDFXYC"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-ZWDNPDFXYC');
+    </script>
     <script>
       const script = document.createElement('script');
-      const apiKey = 'd29f17e774ac4e67247a2929a02a806f6787ac6cdbbb0fc41f721c6fc621156a'
+      const apiKey =
+        'd29f17e774ac4e67247a2929a02a806f6787ac6cdbbb0fc41f721c6fc621156a';
       const config = {
         // We are tracking wallet connections manually
-        trackWalletConnections: false
-      } 
-      script.src = 'https://unpkg.com/@arcxmoney/analytics'
-      script.onload = function () {
-        ArcxAnalyticsSdk.init(apiKey, config)
-          .then(function (sdk) {
-            window.arcx = sdk
-          })
-      }
+        trackWalletConnections: false,
+      };
+      script.src = 'https://unpkg.com/@arcxmoney/analytics';
+      script.onload = function() {
+        ArcxAnalyticsSdk.init(apiKey, config).then(function(sdk) {
+          window.arcx = sdk;
+        });
+      };
 
-      document.head.appendChild(script)
+      document.head.appendChild(script);
     </script>
   </head>
   <body>
@@ -61,6 +82,12 @@
     -->
   </body>
   <!-- Removed from head to reduce render blocking -->
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+    rel="stylesheet"
+  />
 </html>
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -685,5 +685,6 @@
   "faq-6-title": "What is QuickSwap’s Gamma V3 integration?",
   "faq-6-content": "For QuickSwap’s V3, users can select designated price ranges for depositing their liquidity in pools, which means greater capital efficiency for LPs but manual adjusting of portfolio liquidity if prices fall out of range.<break/><break/>By integrating Gamma, QuickSwap V3 now supports active liquidity management, where users V3 LP positions are managed by the platform with auto-compounding rewards - that way, users never have to manually adjust their positions when assets fall out of designated price ranges.<break/><break/>Users can also stake their LP tokens in select Gamma V3 farms to earn additional yield in farming rewards.",
   "faq-7-title": "What is QuickPerps?",
-  "faq-7-content": "<underline>QuickPerps</underline> is a decentralized Perpetual Exchange deployed on Polygon zkEVM where users can open long or short positions with up to 50x leverage on supported blue chip assets: $BTC, $ETH, $MATIC, $USDT, $USDC, and $DAI. It also supports a number of unique features that vastly improve user experience, including cross-usable assets, zero price impact on opening and closing positions, auto-compounding rewards, referral program, and high-value reward schemes for staking $QLP, an index token that users earn by providing liquidity."
+  "faq-7-content": "<underline>QuickPerps</underline> is a decentralized Perpetual Exchange deployed on Polygon zkEVM where users can open long or short positions with up to 50x leverage on supported blue chip assets: $BTC, $ETH, $MATIC, $USDT, $USDC, and $DAI. It also supports a number of unique features that vastly improve user experience, including cross-usable assets, zero price impact on opening and closing positions, auto-compounding rewards, referral program, and high-value reward schemes for staking $QLP, an index token that users earn by providing liquidity.",
+  "dragonslair": "DRAGON'S LAIR"
 }
diff --git a/src/assets/images/social/Blog.svg b/src/assets/images/social/Blog.svg
diff --git a/src/assets/images/social/Medium.svg b/src/assets/images/social/Medium.svg
diff --git a/src/assets/images/social/coinpaprika-logo.png b/src/assets/images/social/coinpaprika-logo.png
diff --git a/src/assets/images/social/instagram.png b/src/assets/images/social/instagram.png
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,15 +1,86 @@
 import React from 'react';
-import { Box } from '@material-ui/core';
-import { ReactComponent as QuickIcon } from 'assets/images/quickIcon.svg';
+import { Box, Grid } from '@material-ui/core';
+import QUICKLogo from 'assets/images/quickLogo.png';
 import 'components/styles/Footer.scss';
+import { useHistory } from 'react-router-dom';
 
 const Footer: React.FC = () => {
+  const history = useHistory();
   const copyrightYear = new Date().getFullYear();
 
+  const socialMenuItems = [
+    {
+      title: 'Services',
+      items: [
+        { title: 'Swap', link: '/swap' },
+        { title: 'Pool', link: '/pools' },
+        { title: 'Farm', link: '/farm' },
+        { title: 'Dragons Lair', link: '/dragons' },
+        { title: 'Convert', link: '/convert' },
+        { title: 'Analytics', link: '/analytics' },
+      ],
+    },
+    {
+      title: 'Developers',
+      items: [
+        { title: 'Github', link: 'https://github.com/QuickSwap' },
+        { title: 'Docs', link: 'https://docs.quickswap.exchange/' },
+      ],
+    },
+    {
+      title: 'Governance',
+      items: [
+        { title: 'Proposals', link: 'https://snapshot.org/#/quickvote.eth' },
+      ],
+    },
+  ];
+
   return (
     <Box className='footer'>
-      <QuickIcon />
-      <p>© {copyrightYear} QuickSwap.</p>
+      <Box className='footerContainer'>
+        <Grid container spacing={4} className='socialMenuWrapper'>
+          <Grid item xs={12} sm={12} md={4}>
+            <img src={QUICKLogo} alt='QUICK' height={40} />
+            <Box mt={2} maxWidth='240px'>
+              <small className='text-secondary'>
+                Our community is building a comprehensive decentralized trading
+                platform for the future of finance. Join us!
+              </small>
+            </Box>
+          </Grid>
+          <Grid item container xs={12} sm={12} md={8} spacing={4}>
+            {socialMenuItems.map((item) => (
+              <Grid key={item.title} item xs={12} sm={6} md={4}>
+                <small>{item.title}</small>
+                <Box mt={3}>
+                  {item.items.map((socialItem) => (
+                    <Box
+                      key={socialItem.title}
+                      className='cursor-pointer'
+                      my={1.5}
+                      onClick={() => {
+                        if (socialItem.link.includes('http')) {
+                          window.open(socialItem.link, '_blank');
+                        } else {
+                          history.push(socialItem.link);
+                        }
+                      }}
+                    >
+                      <small className='text-secondary'>
+                        {socialItem.title}
+                      </small>
+                    </Box>
+                  ))}
+                </Box>
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+        <Box className='copyrightWrapper'>
+          <small className='text-secondary'>© {copyrightYear} QuickSwap.</small>
+          <small className='text-secondary'>Terms of Use</small>
+        </Box>
+      </Box>
     </Box>
   );
 };

diff --git a/src/components/Swap/SwapBestTrade.tsx b/src/components/Swap/SwapBestTrade.tsx
@@ -379,6 +379,11 @@ const SwapBestTrade: React.FC<{
     inputCurrencyV3,
     outputCurrencyV3,
   ]);
+
+  const maxAmountInputV2 = maxAmountSpend(
+    chainIdToUse,
+    currencyBalances[Field.INPUT],
+  );
   const formattedAmounts = useMemo(() => {
     return {
       [independentField]: typedValue,
@@ -388,11 +393,40 @@ const SwapBestTrade: React.FC<{
     };
   }, [independentField, typedValue, dependentField, showWrap, parsedAmounts]);
 
+  const maxAmountInput =
+    maxAmountInputV2 && inputCurrencyV3
+      ? CurrencyAmount.fromRawAmount(inputCurrencyV3, maxAmountInputV2.raw)
+      : undefined;
+
+  const handleMaxInput = useCallback(() => {
+    maxAmountInput && onUserInput(Field.INPUT, maxAmountInput.toExact());
+    setSwapType(SwapSide.SELL);
+  }, [maxAmountInput, onUserInput]);
+
+  const handleHalfInput = useCallback(() => {
+    if (!maxAmountInput) {
+      return;
+    }
+
+    const halvedAmount = maxAmountInput.divide('2');
+
+    onUserInput(
+      Field.INPUT,
+      halvedAmount.toFixed(maxAmountInput.currency.decimals),
+    );
+    setSwapType(SwapSide.SELL);
+  }, [maxAmountInput, onUserInput]);
+
+  const atMaxAmountInput = Boolean(
+    maxAmountInput && parsedAmounts[Field.INPUT]?.equalTo(maxAmountInput),
+  );
+
   const [approval, approveCallback] = useApproveCallbackFromBestTrade(
     pct,
     inputCurrencyV3,
     optimalRate,
     bonusRouteFound,
+    atMaxAmountInput,
   );
 
   const showApproveFlow =
@@ -620,38 +654,6 @@ const SwapBestTrade: React.FC<{
     [onUserInput],
   );
 
-  const maxAmountInputV2 = maxAmountSpend(
-    chainIdToUse,
-    currencyBalances[Field.INPUT],
-  );
-  const maxAmountInput =
-    maxAmountInputV2 && inputCurrencyV3
-      ? CurrencyAmount.fromRawAmount(inputCurrencyV3, maxAmountInputV2.raw)
-      : undefined;
-
-  const handleMaxInput = useCallback(() => {
-    maxAmountInput && onUserInput(Field.INPUT, maxAmountInput.toExact());
-    setSwapType(SwapSide.SELL);
-  }, [maxAmountInput, onUserInput]);
-
-  const handleHalfInput = useCallback(() => {
-    if (!maxAmountInput) {
-      return;
-    }
-
-    const halvedAmount = maxAmountInput.divide('2');
-
-    onUserInput(
-      Field.INPUT,
-      halvedAmount.toFixed(maxAmountInput.currency.decimals),
-    );
-    setSwapType(SwapSide.SELL);
-  }, [maxAmountInput, onUserInput]);
-
-  const atMaxAmountInput = Boolean(
-    maxAmountInput && parsedAmounts[Field.INPUT]?.equalTo(maxAmountInput),
-  );
-
   const onParaswap = () => {
     if (showWrap && onWrap) {
       onWrap();
@@ -838,7 +840,8 @@ const SwapBestTrade: React.FC<{
         optimalRate &&
         account &&
         library &&
-        chainId
+        chainId &&
+        approval === ApprovalState.APPROVED
       ) {
         setBonusRouteFound(false);
         setBonusRouteLoading(true);
@@ -892,7 +895,18 @@ const SwapBestTrade: React.FC<{
     outputCurrencySymbol,
     outputCurrencyAddress,
     typedValue,
+    approval, //Added to trigger bonus route search when approval changes
   ]);
+  //Reset approvalSubmitted when approval changes, it's needed when user hadn't nor paraswap neither wallchain approvals
+  useEffect(() => {
+    if (
+      bonusRouteFound &&
+      (approval === ApprovalState.NOT_APPROVED ||
+        approval === ApprovalState.UNKNOWN)
+    ) {
+      setApprovalSubmitted(false);
+    }
+  }, [approval, bonusRouteFound]);
 
   useEffect(() => {
     fetchOptimalRate();

diff --git a/src/components/styles/Footer.scss b/src/components/styles/Footer.scss
@@ -1,12 +1,27 @@
 @use 'styles/variables' as *;
 
 .footer {
-  text-align: center;
-  padding-bottom: 110px;
+  border-top: 1px solid $divider;
   position: relative;
-  & p {
-    font-size: 14px;
-    line-height: 24px;
-    margin-top: 20px;
-  }
-}
+  display: flex;
+  justify-content: center;
+}
+
+.footerContainer {
+  max-width: 1296px;
+  width: 100%;
+  overflow: hidden;
+  padding: 0 24px;
+}
+
+.socialMenuWrapper {
+  padding: 40px 0;
+}
+
+.copyrightWrapper {
+  border-top: 1px solid $divider;
+  display: flex;
+  padding: 16px 0;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/src/components/styles/RewardSlider.scss b/src/components/styles/RewardSlider.scss
@@ -5,7 +5,7 @@
   width: 1072px;
   display: flex;
   justify-content: space-between;
-  margin: 64px auto 56px;
+  margin: 20px auto 20px;
   & .slick-list {
     width: 100%
   }