From 3dda0ca70f63724e1aa2937726c1a14752516beb Mon Sep 17 00:00:00 2001
From: unbreakablery <unbreakablery@gmail.com>
Date: Thu, 11 Aug 2022 22:10:32 +0900
Subject: [PATCH] fix: stop loss ui

---
 src/features/stop-loss/LimitPriceInputPanel.tsx | 6 +++++-
 src/features/stop-loss/StopLimitOrderButton.tsx | 4 ++--
 src/features/stop-loss/StopPriceInputPanel.tsx  | 6 +++++-
 src/pages/stop-loss/[[...tokens]].tsx           | 8 ++++++++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/features/stop-loss/LimitPriceInputPanel.tsx b/src/features/stop-loss/LimitPriceInputPanel.tsx
index 3672d1f96e..9401ffc5c6 100644
--- a/src/features/stop-loss/LimitPriceInputPanel.tsx
+++ b/src/features/stop-loss/LimitPriceInputPanel.tsx
@@ -25,7 +25,11 @@ const LimitPriceInputPanel: FC<LimitPriceInputPanel> = ({ trade, limitPrice }) =
     <div className="flex flex-col gap-1">
       <Typography variant="sm" className="px-2 flex items-center">
         {i18n._(t`Minimum Rate`)}
-        <QuestionHelper text={i18n._(t`Minimum output amount`)} />
+        <QuestionHelper
+          text={i18n._(
+            t`Minimum output amount. The difference between the output token at the stop and minimum rates is used to pay the execution (gas) fee, therefore it needs to be sufficiently large to be $1 assuming the worst case.`
+          )}
+        />
       </Typography>
       <div className="flex justify-between items-baseline bg-dark-900 rounded px-4 py-1.5 border border-dark-700 hover:border-dark-600">
         <Typography weight={700} variant="lg" className="relative flex items-baseline flex-grow gap-3 overflow-hidden">
diff --git a/src/features/stop-loss/StopLimitOrderButton.tsx b/src/features/stop-loss/StopLimitOrderButton.tsx
index e2ceebccab..ba6e43a40b 100644
--- a/src/features/stop-loss/StopLimitOrderButton.tsx
+++ b/src/features/stop-loss/StopLimitOrderButton.tsx
@@ -116,9 +116,9 @@ const StopLimitOrderButton: FC<StopLimitOrderButton> = ({ trade, parsedAmounts }
               {error
                 ? error
                 : tooNarrowMarginOfRates
-                ? 'Too narrow margin of rates'
+                ? 'Rate diff not enough for fee'
                 : fromBentoBalance
-                ? i18n._(t`Review Stop Limit Order`)
+                ? i18n._(t`Create Stop Limit Order`)
                 : i18n._(t`Confirm Deposit`)}
             </Button>
           )
diff --git a/src/features/stop-loss/StopPriceInputPanel.tsx b/src/features/stop-loss/StopPriceInputPanel.tsx
index 977987501e..c6a953a241 100644
--- a/src/features/stop-loss/StopPriceInputPanel.tsx
+++ b/src/features/stop-loss/StopPriceInputPanel.tsx
@@ -25,7 +25,11 @@ const StopPriceInputPanel: FC<StopPriceInputPanel> = ({ trade, stopPrice }) => {
     <div className="flex flex-col gap-1">
       <Typography variant="sm" className="px-2 flex items-center">
         {i18n._(t`Stop Rate`)}
-        <QuestionHelper text={i18n._(t`Rate required to trigger limit rate`)} />
+        <QuestionHelper
+          text={i18n._(
+            t`Rate required to trigger limit rate. The difference between the output token at the stop and minimum rates is used to pay the execution (gas) fee, therefore it needs to be sufficiently large to be $1 assuming the worst case.`
+          )}
+        />
       </Typography>
       <div className="flex justify-between items-baseline bg-dark-900 rounded px-4 py-1.5 border border-dark-700 hover:border-dark-600">
         <Typography weight={700} variant="lg" className="relative flex items-baseline flex-grow gap-3 overflow-hidden">
diff --git a/src/pages/stop-loss/[[...tokens]].tsx b/src/pages/stop-loss/[[...tokens]].tsx
index 8a233db8db..791f166a05 100644
--- a/src/pages/stop-loss/[[...tokens]].tsx
+++ b/src/pages/stop-loss/[[...tokens]].tsx
@@ -179,6 +179,14 @@ const StopLoss = () => {
         </div>
 
         {isExpertMode && <RecipientField recipient={recipient} action={setRecipient} />}
+
+        <div className="text-xs py-2 flex justify-center">
+          <span className="text-secondary">Powered by</span>&nbsp;
+          <a href="https://www.autonomynetwork.io/" target="_blank" rel="noreferrer">
+            Autonomy Network
+          </a>
+        </div>
+
         <StopLimitOrderButton trade={trade} parsedAmounts={parsedAmounts} />
         <StopLossReviewModal
           parsedAmounts={parsedAmounts}