SOV-2023: Show maximum price (#2527)

DistributedCollective · May 4, 2023 · 5e9e6cd · 5e9e6cd
1 parent f59623e
commit 5e9e6cd
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 12 deletions.
diff --git a/src/app/containers/SwapFormContainer/components/ReviewDialog/index.tsx b/src/app/containers/SwapFormContainer/components/ReviewDialog/index.tsx
@@ -15,6 +15,8 @@ import { stringToFixedPrecision } from 'utils/display-text/format';
 import { ErrorBadge } from 'app/components/Form/ErrorBadge';
 import { discordInvite } from 'utils/classifiers';
 import { useMaintenance } from 'app/hooks/useMaintenance';
+import { AssetValue } from 'app/components/AssetValue';
+import { AssetValueMode } from 'app/components/AssetValue/types';
 
 interface IReviewDialogProps {
   isOpen: boolean;
@@ -25,6 +27,7 @@ interface IReviewDialogProps {
   amount: string;
   expectedReturn: string;
   amountReceived: string;
+  maximumPrice: string;
 }
 export const ReviewDialog: React.FC<IReviewDialogProps> = ({
   isOpen,
@@ -35,6 +38,7 @@ export const ReviewDialog: React.FC<IReviewDialogProps> = ({
   amount,
   expectedReturn,
   amountReceived,
+  maximumPrice,
 }) => {
   const { t } = useTranslation();
   const { checkMaintenance, States } = useMaintenance();
@@ -74,14 +78,26 @@ export const ReviewDialog: React.FC<IReviewDialogProps> = ({
               className="tw-h-10 tw-truncate"
             />
             <div className="tw-truncate tw-text-xs tw-font-light tw-tracking-normal tw-flex tw-justify-between tw-mt-1">
-              <p className="tw-mb-3">
+              <p className="tw-m-0">
                 {t(translations.swapTradeForm.minimumReceived)}
               </p>
               <div className="tw-font-semibold">
                 {weiToFixed(amountReceived, 6)}{' '}
                 <AssetRenderer asset={targetToken} />
               </div>
             </div>
+
+            <div className="tw-truncate tw-text-xs tw-font-light tw-tracking-normal tw-flex tw-justify-between tw-mt-1">
+              <p className="tw-mb-3">{t(translations.swap.maximumPrice)}</p>
+              <div className="tw-font-semibold">
+                <AssetValue
+                  value={maximumPrice}
+                  assetString={sourceToken}
+                  mode={AssetValueMode.auto}
+                  maxDecimals={6}
+                />
+              </div>
+            </div>
           </FormGroup>
 
           <TxFeeCalculator

diff --git a/src/app/containers/SwapFormContainer/index.tsx b/src/app/containers/SwapFormContainer/index.tsx
@@ -216,6 +216,8 @@ export const SwapFormContainer: React.FC = () => {
         onClose={() => setDialogOpen(false)}
         onChange={setSlippage}
         dataActionId="swap-"
+        maximumPrice={sourceTokenValue}
+        maximumPriceAsset={sourceToken}
       />
 
       <div className="tw-bg-gray-3 tw-w-full tw-mb-10 tw-overflow-hidden">
@@ -420,6 +422,7 @@ export const SwapFormContainer: React.FC = () => {
         amount={amount}
         expectedReturn={rateByPath}
         amountReceived={minReturn}
+        maximumPrice={sourceTokenValue}
       />
     </>
   );

diff --git a/src/app/pages/BuySovPage/components/BuyForm/Dialogs/SlippageDialog.tsx b/src/app/pages/BuySovPage/components/BuyForm/Dialogs/SlippageDialog.tsx
@@ -11,6 +11,8 @@ import { FormGroup } from 'app/components/Form/FormGroup';
 import { AssetRenderer } from 'app/components/AssetRenderer';
 import { Slider } from 'app/components/Form/Slider';
 import { sliderDefaultLabelValues } from 'app/components/Form/Slider/sliderDefaultLabelValues';
+import { AssetValue } from 'app/components/AssetValue';
+import { AssetValueMode } from 'app/components/AssetValue/types';
 
 interface ISlippageDialogProps {
   isOpen: boolean;
@@ -20,6 +22,8 @@ interface ISlippageDialogProps {
   onChange: (value: number) => void;
   asset?: Asset;
   dataActionId?: string;
+  maximumPrice?: string;
+  maximumPriceAsset?: Asset;
 }
 
 export const SlippageDialog: React.FC<ISlippageDialogProps> = ({
@@ -29,6 +33,8 @@ export const SlippageDialog: React.FC<ISlippageDialogProps> = ({
   dataActionId,
   isOpen,
   asset,
+  maximumPrice,
+  maximumPriceAsset,
   ...props
 }) => {
   const { t } = useTranslation();
@@ -87,8 +93,22 @@ export const SlippageDialog: React.FC<ISlippageDialogProps> = ({
                   <AssetRenderer asset={asset || Asset.SOV} />
                 </>
               }
-              className="tw-mt-5"
+              className="tw-mb-0 tw-mt-5"
             />
+
+            {maximumPrice && maximumPriceAsset && (
+              <LabelValuePair
+                label={t(translations.buySovPage.slippageDialog.maximumPrice)}
+                value={
+                  <AssetValue
+                    value={maximumPrice}
+                    assetString={maximumPriceAsset}
+                    mode={AssetValueMode.auto}
+                    maxDecimals={6}
+                  />
+                }
+              />
+            )}
           </FormGroup>
         </div>
       </div>

diff --git a/src/app/pages/SpotTradingPage/components/TradeDialog/index.tsx b/src/app/pages/SpotTradingPage/components/TradeDialog/index.tsx
@@ -35,6 +35,7 @@ interface ITradeDialogProps {
   duration?: number;
   fee?: React.ReactNode;
   buttonLoading?: boolean;
+  maximumSpotPrice?: string;
 }
 
 export const TradeDialog: React.FC<ITradeDialogProps> = ({
@@ -52,6 +53,7 @@ export const TradeDialog: React.FC<ITradeDialogProps> = ({
   duration,
   fee,
   buttonLoading,
+  maximumSpotPrice,
 }) => {
   const { t } = useTranslation();
   const { connected } = useWalletContext();
@@ -114,15 +116,29 @@ export const TradeDialog: React.FC<ITradeDialogProps> = ({
               }
             />
             {orderType === OrderType.MARKET && (
-              <LabelValuePair
-                label={t(translations.swap.minimumReceived)}
-                value={
-                  <>
-                    {weiToNumberFormat(minReturn, 6)}{' '}
-                    <AssetRenderer asset={targetToken} />
-                  </>
-                }
-              />
+              <>
+                <LabelValuePair
+                  label={t(translations.swap.minimumReceived)}
+                  value={
+                    <>
+                      {weiToNumberFormat(minReturn, 6)}{' '}
+                      <AssetRenderer asset={targetToken} />
+                    </>
+                  }
+                />
+
+                {maximumSpotPrice && (
+                  <LabelValuePair
+                    label={t(translations.swap.maximumPrice)}
+                    value={
+                      <>
+                        {weiToNumberFormat(maximumSpotPrice, 6)}{' '}
+                        <AssetRenderer asset={sourceToken} />
+                      </>
+                    }
+                  />
+                )}
+              </>
             )}
 
             {orderType === OrderType.LIMIT && (

diff --git a/src/app/pages/SpotTradingPage/components/TradeForm/MarketForm.tsx b/src/app/pages/SpotTradingPage/components/TradeForm/MarketForm.tsx
@@ -166,6 +166,7 @@ export const MarketForm: React.FC<ITradeFormProps> = ({
         orderType={OrderType.MARKET}
         amount={amount}
         minReturn={minReturn}
+        maximumSpotPrice={maximumSpotPrice}
         targetToken={targetToken}
         sourceToken={sourceToken}
         expectedReturn={weiToFixed(rateByPath, 6)}

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -1826,7 +1826,8 @@
       "title": "Advanced Settings",
       "tolerance": "Slippage Tolerance:",
       "minimumReceived": "Minimum Received",
-      "minEntryPrice": "Minimum Entry Price"
+      "minEntryPrice": "Minimum Entry Price",
+      "maximumPrice": "Maximum Price"
     },
     "txDialog": {
       "pendingUser": {