wip

Emurgo · Mar 28, 2024 · 2aafb30 · 2aafb30
1 parent f291499
commit 2aafb30
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 131 deletions.
diff --git a/packages/yoroi-extension/app/components/swap/ShowPriceImpact.js b/packages/yoroi-extension/app/components/swap/ShowPriceImpact.js
@@ -0,0 +1,6 @@
+// @flow
+import React from 'react';
+
+export const ShowPriceImpact = ({ priceImpact }): React$Node => {
+  return <div>ShowPriceImpact</div>;
+};
diff --git a/packages/yoroi-extension/app/components/swap/SwapPriceInput.js b/packages/yoroi-extension/app/components/swap/SwapPriceInput.js
@@ -13,7 +13,7 @@ import {
   FormattedActualPrice,
   PriceImpactColored,
   PriceImpactPercent,
-  PriceImpactTitle
+  PriceImpactTitle,
 } from './PriceImpact';
 
 type Props = {|
@@ -24,36 +24,30 @@ type Props = {|
 const NO_PRICE_VALUE_PLACEHOLDER = ' ';
 
 function SwapPriceInput({ swapStore, priceImpactState }: Props): Node {
-  const {
-    orderData,
-    limitPriceChanged,
-  } = useSwap();
-  const {
-    sellTokenInfo,
-    buyTokenInfo,
-  } = useSwapForm();
+  const { orderData, limitPriceChanged } = useSwap();
+  const { sellTokenInfo, buyTokenInfo } = useSwapForm();
 
   const isMarketOrder = orderData.type === 'market';
   const pricePlaceholder = isMarketOrder ? NO_PRICE_VALUE_PLACEHOLDER : '0';
 
+  console.log('ORDER DATATATATATTATA PROICESS', orderData.selectedPoolCalculation?.prices);
+
   const marketPrice = orderData.selectedPoolCalculation?.prices.market;
-  const formattedPrice = marketPrice ? Quantities.format(
-    marketPrice,
-    orderData.tokens.priceDenomination,
-    PRICE_PRECISION
-  ) : pricePlaceholder;
+  const formattedPrice = marketPrice
+    ? Quantities.format(marketPrice, orderData.tokens.priceDenomination, PRICE_PRECISION)
+    : pricePlaceholder;
 
   if (swapStore.limitOrderDisplayValue === '' && marketPrice != null) {
     runInAction(() => {
       swapStore.setLimitOrderDisplayValue(formattedPrice);
-    })
+    });
   }
   const displayValue = isMarketOrder ? formattedPrice : swapStore.limitOrderDisplayValue;
   const isValidTickers = sellTokenInfo?.ticker && buyTokenInfo?.ticker;
   const isReadonly = !isValidTickers || isMarketOrder;
 
   return (
-    <Box>
+    <Box mt="16px">
       <Box
         component="fieldset"
         sx={{
@@ -103,7 +97,7 @@ function SwapPriceInput({ swapStore, priceImpactState }: Props): Node {
             if (/^\d+\.?\d*$/.test(value)) {
               runInAction(() => {
                 swapStore.setLimitOrderDisplayValue(value);
-              })
+              });
               if (!value.endsWith('.')) {
                 limitPriceChanged(value);
               }
@@ -119,14 +113,13 @@ function SwapPriceInput({ swapStore, priceImpactState }: Props): Node {
         </Box>
       </Box>
       {priceImpactState && (
-        <Typography
-          component="div"
-          variant="caption"
-          pt="4px"
-        >
+        <Typography component="div" variant="caption" pt="4px">
           <PriceImpactColored priceImpactState={priceImpactState} sx={{ display: 'flex' }}>
             <PriceImpactTitle small isSevere={priceImpactState.isSevere} />
-            &nbsp;=&nbsp;<PriceImpactPercent />&nbsp;(<FormattedActualPrice />)
+            &nbsp;=&nbsp;
+            <PriceImpactPercent />
+            &nbsp;(
+            <FormattedActualPrice />)
           </PriceImpactColored>
         </Typography>
       )}

diff --git a/packages/yoroi-extension/app/containers/swap/asset-swap/ConfirmationStep.js b/packages/yoroi-extension/app/containers/swap/asset-swap/ConfirmationStep.js
@@ -16,7 +16,7 @@ import {
   PriceImpactBanner,
   PriceImpactColored,
   PriceImpactIcon,
-  PriceImpactPercent
+  PriceImpactPercent,
 } from '../../../components/swap/PriceImpact';
 import type { State } from '../context/swap-form/types';
 import { useEffect } from 'react';
@@ -43,6 +43,7 @@ export default function SwapConfirmationStep({
   defaultTokenInfo,
   getFormattedPairingValue,
 }: Props): React$Node {
+  console.log('priceImpactState', priceImpactState);
 
   const { orderData } = useSwap();
   const {
@@ -58,30 +59,31 @@ export default function SwapConfirmationStep({
   const isIncorrectPassword = txSubmitErrorState.value instanceof IncorrectWalletPasswordError;
 
   const { createOrderData } = useSwapCreateOrder({
-    onSuccess: (data) => {
-      onRemoteOrderDataResolved(data)
-        .catch(e => {
-          console.error('Failed to handle remote order resolution', e);
-          alert('Failed to prepare order transaction');
-        });
+    onSuccess: data => {
+      onRemoteOrderDataResolved(data).catch(e => {
+        console.error('Failed to handle remote order resolution', e);
+        alert('Failed to prepare order transaction');
+      });
     },
     onError: error => {
       console.error('useSwapCreateOrder fail', error);
       alert('Failed to receive remote data for the order');
-    }
+    },
   });
   useEffect(() => {
     if (walletAddress == null) {
       alert('Wallet address is not available');
       return;
     }
-    createOrderData((isMarketOrder ? makePossibleMarketOrder : makeLimitOrder)(
-      orderData.amounts.sell,
-      orderData.amounts.buy,
-      orderData.selectedPoolCalculation?.pool,
-      orderData.slippage,
-      walletAddress,
-    ));
+    createOrderData(
+      (isMarketOrder ? makePossibleMarketOrder : makeLimitOrder)(
+        orderData.amounts.sell,
+        orderData.amounts.buy,
+        orderData.selectedPoolCalculation?.pool,
+        orderData.slippage,
+        walletAddress
+      )
+    );
   }, []);
 
   return (

diff --git a/packages/yoroi-extension/app/containers/swap/asset-swap/CreateSwapOrder.js b/packages/yoroi-extension/app/containers/swap/asset-swap/CreateSwapOrder.js
@@ -1,9 +1,6 @@
 // @flow
 import { useState } from 'react';
 import { Box, Button, Typography } from '@mui/material';
-import { ReactComponent as SwitchIcon } from '../../../assets/images/revamp/icons/switch.inline.svg';
-import { ReactComponent as InfoIcon } from '../../../assets/images/revamp/icons/info.inline.svg';
-import { ReactComponent as EditIcon } from '../../../assets/images/revamp/icons/edit.inline.svg';
 import SwapPriceInput from '../../../components/swap/SwapPriceInput';
 import SlippageDialog from '../../../components/swap/SlippageDialog';
 import Tabs from '../../../components/common/tabs/Tabs';
@@ -22,6 +19,7 @@ import type { PriceImpact } from '../../../components/swap/types';
 
 import { TopActions } from './actions/TopActions';
 import { MiddleActions } from './actions/MiddleActions';
+import { EditSlippage } from './actions/EditSlippage';
 
 type Props = {|
   slippageValue: string,
@@ -83,34 +81,13 @@ export const CreateSwapOrder = ({
         />
 
         {/* Price between assets */}
-        <Box mt="16px">
-          <SwapPriceInput swapStore={swapStore} priceImpactState={priceImpactState} />
-        </Box>
+        <SwapPriceInput swapStore={swapStore} priceImpactState={priceImpactState} />
 
         {/* Slippage settings */}
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Box display="flex" gap="8px" alignItems="center">
-            <Typography component="div" variant="body1" color="grayscale.500">
-              Slippage tolerance
-            </Typography>
-            <InfoIcon />
-          </Box>
-          <Box
-            onClick={() => setOpenedDialog('slippage')}
-            sx={{ cursor: 'pointer', display: 'flex', gap: '4px', alignItems: 'center' }}
-          >
-            <Typography component="div" variant="body1" color="grayscale.max">
-              {slippageValue}%
-            </Typography>
-            <EditIcon />
-          </Box>
-        </Box>
+        <EditSlippage
+          setOpenedDialog={() => setOpenedDialog('slippage')}
+          slippageValue={slippageValue}
+        />
 
         {/* Available pools */}
         <EditSwapPool