Merge pull request #1636 from QuickSwap/dev2

Dev2
QuickSwap · Dec 6, 2024 · 479bb54 · 479bb54
2 parents 4b3f73e + 77b3fa8
commit 479bb54
Show file tree

Hide file tree

Showing 14 changed files with 1,168 additions and 48 deletions.
diff --git a/public/POL.png b/public/POL.png
diff --git a/public/bridge/polygon.svg b/public/bridge/polygon.svg
diff --git a/public/bridge/polygon_cover_img.webp b/public/bridge/polygon_cover_img.webp
diff --git a/public/polygon/polygon_new.webp b/public/polygon/polygon_new.webp
diff --git a/src/assets/images/bridge/polygon.svg b/src/assets/images/bridge/polygon.svg
diff --git a/src/components/AvailableChainList/AvailableChain.tsx b/src/components/AvailableChainList/AvailableChain.tsx
@@ -16,7 +16,7 @@ const AvailableChain: React.FC<AvailableChainProps> = ({
       <img
         src={nativeCurrencyImage}
         alt='network Image'
-        className='networkIcon'
+        className='availableChainIcon'
       />
       <Typography>{networkName}</Typography>
     </Box>

diff --git a/src/components/Bridge/BridgeBlockItem.tsx b/src/components/Bridge/BridgeBlockItem.tsx
@@ -51,7 +51,7 @@ const BridgeBlockItem: React.FC<BridgeBlockItemProps> = ({
               alt='item'
               width={16}
               height={16}
-              style={{ marginLeft: '-2px' }}
+              style={{ marginLeft: '-2px', borderRadius: '8px' }}
             />
           );
         })}

diff --git a/src/components/Swap/SwapBestTrade.tsx b/src/components/Swap/SwapBestTrade.tsx
@@ -1051,7 +1051,10 @@ const SwapBestTrade: React.FC<{
     const betterPriceFound = await getBetterPrice({
       dexOutAmount: optimalRate?.destAmount,
       allowedSlippage,
-      skip: liquidityHubDisabled,
+      skip:
+        liquidityHubDisabled ||
+        wrapType === WrapType.WRAP ||
+        wrapType === WrapType.UNWRAP,
     });
 
     if (betterPriceFound) {
@@ -1067,6 +1070,7 @@ const SwapBestTrade: React.FC<{
     getBetterPrice,
     isLhPureAggregationMode,
     onPureAggregationSubmit,
+    wrapType,
   ]);
 
   const paraRate = optimalRate

diff --git a/src/components/Swap/orbs/LiquidityHub/LiquidityHubSwapConfirmation.tsx b/src/components/Swap/orbs/LiquidityHub/LiquidityHubSwapConfirmation.tsx
@@ -124,7 +124,11 @@ const useLiquidityHubConfirmationContext = () => React.useContext(Context);
 const useLiquidityHubApproval = () => {
   const { inCurrency, inAmount } = useLiquidityHubConfirmationContext();
 
-  return useApproval(permit2Address, inCurrency, inAmount);
+  return useApproval(
+    permit2Address,
+    inCurrency,
+    fromRawAmount(inCurrency, inAmount)?.toExact(),
+  );
 };
 
 const useAmounts = () => {
@@ -390,6 +394,7 @@ const useLiquidityHubSwapCallback = () => {
     outCurrency,
     getLatestQuote,
     onLiquidityHubSwapInProgress,
+    quote,
   } = useLiquidityHubConfirmationContext();
   const { mutateAsync: signCallback } = useSignEIP712Callback();
   const getSteps = useGetStepsCallback();
@@ -431,17 +436,15 @@ const useLiquidityHubSwapCallback = () => {
           await approvalCallback();
         }
 
-        const acceptedQuote = getLatestQuote();
+        const acceptedQuote = getLatestQuote() || quote;
 
         if (!acceptedQuote) {
-          throw new Error('Failed to fetch quote');
+          throw new Error('missing  quote');
         }
+
         onAcceptQuote(acceptedQuote);
         updateStore({ currentStep: Steps.SWAP });
-        const signature = await promiseWithTimeout(
-          signCallback(acceptedQuote.permitData),
-          SIGNATURE_TIMEOUT,
-        );
+        const signature = await signCallback(acceptedQuote.permitData);
         onSignature(signature);
 
         const txHash = await swapCallback({

diff --git a/src/components/Swap/orbs/LiquidityHub/hooks.ts b/src/components/Swap/orbs/LiquidityHub/hooks.ts
@@ -1,6 +1,6 @@
 import { ChainId, Currency } from '@uniswap/sdk';
 import { useActiveWeb3React } from 'hooks';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { getConfig } from 'config';
 import { wrappedCurrency } from 'utils/wrappedCurrency';
 import {
@@ -134,37 +134,36 @@ export const useGetBetterPrice = (
 ) => {
   const [seekingBetterPrice, setSeekingBestPrice] = useState(false);
 
-  const mutation = useMutation({
-    mutationFn: async ({
-      dexOutAmount = '',
-      allowedSlippage = 0,
+  const getBetterPrice = useCallback(
+    async ({
       skip,
+      allowedSlippage = 0,
+      dexOutAmount = '',
     }: {
-      dexOutAmount?: string;
+      skip: boolean;
       allowedSlippage?: number;
-      skip?: boolean;
+      dexOutAmount?: string;
     }) => {
-      if (skip) return false;
-      setSeekingBestPrice(true);
-      const quote = await promiseWithTimeout(fetchLiquidityHubQuote(), 5_000);
-      const dexMinAmountOut =
-        subtractSlippage(allowedSlippage, dexOutAmount) || 0;
-      return BN(quote?.userMinOutAmountWithGas || 0).gt(dexMinAmountOut);
-    },
-    onError: (error) => {
-      console.error('useSeekingBetterPrice', error);
-    },
-    onSettled: () => {
-      setTimeout(() => {
-        setSeekingBestPrice(false);
-      }, 50);
+      try {
+        if (skip) return false;
+        setSeekingBestPrice(true);
+        const quote = await promiseWithTimeout(fetchLiquidityHubQuote(), 5_000);
+        const dexMinAmountOut =
+          subtractSlippage(allowedSlippage, dexOutAmount) || 0;
+        return BN(quote?.userMinOutAmountWithGas || 0).gt(dexMinAmountOut);
+      } catch (error) {
+        console.error('useSeekingBetterPrice', error);
+      } finally {
+        setTimeout(() => {
+          setSeekingBestPrice(false);
+        }, 50);
+      }
     },
-  });
+    [fetchLiquidityHubQuote],
+  );
 
   return {
     seekingBetterPrice,
-    quote: mutation.data,
-    error: mutation.error,
-    getBetterPrice: mutation.mutateAsync,
+    getBetterPrice,
   };
 };
diff --git a/src/components/Swap/orbs/Twap/Components/Components.tsx b/src/components/Swap/orbs/Twap/Components/Components.tsx
@@ -156,7 +156,7 @@ export const LimitInputPanel = () => {
           </button>
         </Box>
         <CardInput>
-          <Box style={{ display: 'flex', gap: '20px', width: '100%' }}>
+          <Box style={{ display: 'flex', width: '100%' }}>
             <LimitPriceInput />
             <CurrencySelect
               id='twap-limit-currency-select'

diff --git a/src/config/polygon.json b/src/config/polygon.json
@@ -8,7 +8,7 @@
   "isMainnet": true,
   "visible": true,
   "networkName": "Polygon",
-  "nativeCurrencyImage": "/polygon/image.png",
+  "nativeCurrencyImage": "/polygon/polygon_new.webp",
   "nativeCurrency": {
     "name": "Matic Token",
     "symbol": "MATIC",

diff --git a/src/pages/Bridge/BridgePage.tsx b/src/pages/Bridge/BridgePage.tsx
@@ -217,7 +217,7 @@ const BridgePage: React.FC = ({}) => {
                         alt='item'
                         width={16}
                         height={16}
-                        style={{ marginLeft: '-2px' }}
+                        style={{ marginLeft: '-2px', borderRadius: '8px' }}
                       />
                     );
                   },

diff --git a/src/pages/styles/landing.scss b/src/pages/styles/landing.scss
@@ -172,6 +172,8 @@
       background-color: #9b9b9b0f;
       img {
         margin: 0 auto;
+        width: 40px;
+        border-radius: 24px;
       }
       @media screen and (max-width: '900px') {
         width: 100%;