Merge pull request #1644 from QuickSwap/dev2

Dev2
QuickSwap · Dec 17, 2024 · d56dff4 · d56dff4
2 parents 479bb54 + 2f5100e
commit d56dff4
Show file tree

Hide file tree

Showing 13 changed files with 92 additions and 97 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -98,7 +98,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.5",
-    "@orbs-network/liquidity-hub-sdk": "^1.0.45",
+    "@orbs-network/liquidity-hub-sdk": "^1.0.47",
     "@orbs-network/swap-ui": "^0.0.14",
     "@orbs-network/twap-sdk": "^2.0.33",
     "@orderly.network/hooks": "^1.4.3",

diff --git a/public/locales/en.json b/public/locales/en.json
@@ -1038,5 +1038,7 @@
   "networkFeeHelper": "Network fees are paid for transaction",
   "dragonEggAlert": "Screenshot this and DM  <alink>@QuickswapDEX on X (Twitter)</alink>  for a chance to win prizes! First come, first serve.",
   "cancelOrder": "Cancel Order",
-  "seekingBetterPrice": "Seeking better price"
+  "seekingBetterPrice": "Seeking better price",
+  "wrapError": "Your {{ native }} has been wrapped to {{ wrapped }}",
+  "txFailed": "Transaction failed"
 }
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -30,7 +30,7 @@ const Footer: React.FC = () => {
       title: t('Products'),
       items: [
         { title: t('swap'), link: '/swap' },
-        { title: t('Perps - zkEVM V1'), link: process.env.REACT_APP_PERPS_URL },
+        { title: t('Hydra'), link: process.env.REACT_APP_HYDRA_URL },
         { title: 'Perps - PoS', link: '/falkor', isNew: true },
         { title: t('pool'), link: '/pools' },
         { title: t('farm'), link: '/farm' },

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -186,7 +186,7 @@ const Header: React.FC<{ onUpdateNewsletter: (val: boolean) => void }> = ({
       menuItems.push(hydraItem);
     }
   }
-  if (showPerps) {
+  if (showPerps && process.env.NODE_ENV !== 'production') {
     if (showHydra || showPerpsV2) {
       perpsTab.items?.push(perpsItem);
     } else {

diff --git a/src/components/Header/MobileHeader.tsx b/src/components/Header/MobileHeader.tsx
@@ -70,7 +70,7 @@ const MobileHeader: React.FC<MobileHeaderProps> = ({
       },
     });
   }
-  if (showPerps) {
+  if (showPerps && process.env.NODE_ENV !== 'production') {
     perpMenuItems.push({
       id: 'perps-v1-page-link',
       link: process.env.REACT_APP_PERPS_URL || '#',

diff --git a/src/components/Swap/SwapBestTrade.tsx b/src/components/Swap/SwapBestTrade.tsx
@@ -453,7 +453,6 @@ const SwapBestTrade: React.FC<{
     isLoading: liquidityHubQuoteLoading,
     error: liquidityHubQuoteError,
     refetch: fetchLiquidityHubQuote,
-    getLatestQuote,
   } = useLiquidityHubQuote({
     allowedSlippage,
     inAmount: parsedAmount?.raw.toString(),
@@ -1279,6 +1278,8 @@ const SwapBestTrade: React.FC<{
     }
   }, [handleParaswap, onApprove, showApproveFlow]);
 
+  const getLatestOptimalRate = useCallback(() => optimalRate, [optimalRate]);
+
   return (
     <Box>
       <TokenWarningModal
@@ -1294,9 +1295,9 @@ const SwapBestTrade: React.FC<{
         isOpen={showLiquidityHubConfirm}
         onDismiss={handleLiquidityHubConfirmDismiss}
         quote={liquidityHubQuote}
-        getLatestQuote={getLatestQuote}
+        fetchLiquidityHubQuote={fetchLiquidityHubQuote}
         onSwapFailed={onLiquidityHubSwapFailed}
-        optimalRate={optimalRate}
+        getOptimalRate={getLatestOptimalRate}
         allowedSlippage={allowedSlippage}
         onLiquidityHubSwapInProgress={setSwappingLiquidityHub}
       />

diff --git a/src/components/Swap/orbs/ConfirmationModal.tsx b/src/components/Swap/orbs/ConfirmationModal.tsx
@@ -51,7 +51,6 @@ export type ConfirmationState = {
   txHash?: string;
   steps?: Steps[];
   error?: string;
-  stapStatus?: SwapStatus;
 };
 
 interface ConfirmationModalProps extends SharedProps {
@@ -117,14 +116,14 @@ const ConfirmationProvider = (props: ContextProps) => {
   );
 
   const onDismiss = useCallback(() => {
+    if (store.swapStatus) {
+      dispatch(updateUserBalance());
+    }
     setTimeout(() => {
       resetStore();
     }, 5_00);
     props.onDismiss();
-    if (store.stapStatus === SwapStatus.SUCCESS) {
-      dispatch(updateUserBalance());
-    }
-  }, [props, resetStore, store.stapStatus, dispatch]);
+  }, [props, resetStore, store.swapStatus, dispatch]);
 
   return (
     <Context.Provider
@@ -249,30 +248,40 @@ function ConfirmationContainer({
 
 export const Error = () => {
   const {
-    onDismiss,
+    onDismiss: _onDismiss,
     inAmount,
-    state: { shouldUnwrap, error },
+    state: { shouldUnwrap },
   } = useConfirmationContext();
   const { t } = useTranslation();
   const { chainId } = useActiveWeb3React();
   const nativeSymbol = ETHER[chainId].symbol;
+  const wSymbol = WETH[chainId].symbol;
+  const [isLoading, setIsLoading] = useState(false);
 
-  const { execute, wrapType } = useWrapCallback(
+  const { execute, inputError } = useWrapCallback(
     WETH[chainId],
     ETHER[chainId],
     inAmount,
   );
+
   const [success, setSuccess] = useState(false);
-  const isLoading = wrapType === WrapType.UNWRAPPING;
   const unwrap = useCallback(async () => {
     try {
+      setIsLoading(true);
       await execute?.();
       setSuccess(true);
     } catch (error) {
       console.error(error);
+    } finally {
+      setIsLoading(false);
     }
   }, [execute]);
 
+  const onDismiss = useCallback(() => {
+    _onDismiss();
+    setSuccess(false);
+  }, [_onDismiss]);
+
   if (success) {
     return (
       <Success
@@ -300,11 +309,21 @@ export const Error = () => {
 
   return (
     <ConfirmationContainer className='orbsErrorContent' title={t('txFailed')}>
-      <Box>
+      <Box
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
         <img src={TransactionFailed} alt='Transaction Failed' />
-        {error && <p className='orbsErrorContentText'>Transaction Failed</p>}
+        {shouldUnwrap && (
+          <p className='orbsErrorContentText'>
+            {t('wrapError', { native: nativeSymbol, wrapped: wSymbol })}
+          </p>
+        )}
       </Box>
-      {shouldUnwrap ? (
+      {!inputError && shouldUnwrap ? (
         <Box className='orbsErrorContentButtons'>
           <Button className='txSubmitButton' onClick={unwrap}>
             {t('unwrap')}
@@ -324,24 +343,6 @@ export const Error = () => {
   );
 };
 
-const SwapButton = ({
-  text,
-  onSubmit,
-}: {
-  text?: string;
-  onSubmit: () => void;
-}) => {
-  return (
-    <Box className='swapButtonWrapper'>
-      <Box width='100%'>
-        <Button fullWidth onClick={onSubmit}>
-          {text}
-        </Button>
-      </Box>
-    </Box>
-  );
-};
-
 export const Main = ({
   parseSteps,
   swapDetails,