fix(ui-ux): increased custom slippage range to 0 to 1000 (#4172)

BirthdayResearch · Feb 27, 2024 · e4de099 · e4de099
1 parent c9e7f5d
commit e4de099
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 29 deletions.
diff --git a/mobile-app/app/components/__snapshots__/PinTextInput.test.tsx.snap b/mobile-app/app/components/__snapshots__/PinTextInput.test.tsx.snap
diff --git a/...e-app/app/screens/AppNavigator/screens/Dex/CompositeSwap/components/SlippageTolerance.tsx b/...e-app/app/screens/AppNavigator/screens/Dex/CompositeSwap/components/SlippageTolerance.tsx
@@ -53,12 +53,12 @@ export function SlippageTolerance({
 
   const checkIfCustomSlippage = (slippage: string) => {
     return !Object.values(SlippageAmountButtonTypes).some((buttonAmount) =>
-      new BigNumber(new BigNumber(buttonAmount).toFixed(8)).isEqualTo(slippage)
+      new BigNumber(new BigNumber(buttonAmount).toFixed(8)).isEqualTo(slippage),
     );
   };
 
   const [isCustomAmount, setIsCustomAmount] = useState(
-    checkIfCustomSlippage(slippage.toFixed(8))
+    checkIfCustomSlippage(slippage.toFixed(8)),
   );
 
   const isSlippageValid = (): boolean => {
@@ -70,13 +70,13 @@ export function SlippageTolerance({
     if (value === undefined || value === "") {
       return;
     } else if (
-      !(new BigNumber(value).gte(0) && new BigNumber(value).lte(100))
+      !(new BigNumber(value).gte(0) && new BigNumber(value).lte(1000))
     ) {
       setSlippageError({
         type: "error",
         text: translate(
           "screens/SlippageTolerance",
-          "Slippage rate must range from 0-100%"
+          "Slippage rate must range from 0-1000%",
         ),
       });
       return;
@@ -88,7 +88,7 @@ export function SlippageTolerance({
     validateSlippage(selectedSlippage);
     setIsRiskWarningDisplayed(
       new BigNumber(selectedSlippage).gte(20) &&
-        new BigNumber(selectedSlippage).lte(100)
+        new BigNumber(selectedSlippage).lte(1000),
     );
   }, [selectedSlippage]);
 
@@ -167,7 +167,7 @@ export function SlippageTolerance({
                   "p-2.5 justify-center items-center flex-grow rounded-full z-10",
                   {
                     "opacity-30": !isSlippageValid(),
-                  }
+                  },
                 )}
                 onPress={() => {
                   setIsEditing(false);
@@ -180,7 +180,7 @@ export function SlippageTolerance({
                     setIsCustomAmount(true);
                     updateSlippage(
                       new BigNumber(selectedSlippage).toFixed(2),
-                      true
+                      true,
                     );
                   }
                 }}
@@ -203,7 +203,7 @@ export function SlippageTolerance({
           light={tailwind("bg-mono-light-v2-00")}
           dark={tailwind("bg-mono-dark-v2-00")}
           style={tailwind(
-            "flex flex-row justify-around items-center rounded-full"
+            "flex flex-row justify-around items-center rounded-full",
           )}
         >
           {Object.values(SlippageAmountButtonTypes).map((type) => {
@@ -218,7 +218,7 @@ export function SlippageTolerance({
                 isSelected={
                   !isCustomAmount &&
                   new BigNumber(selectedSlippage).isEqualTo(
-                    new BigNumber(type).toFixed(2)
+                    new BigNumber(type).toFixed(2),
                   )
                 }
               />
@@ -242,7 +242,7 @@ export function SlippageTolerance({
         >
           {translate(
             "screens/SlippageTolerance",
-            "Set high tolerance at your own risk"
+            "Set high tolerance at your own risk",
           )}
         </ThemedTextV2>
       )}
@@ -266,7 +266,7 @@ function PercentageAmountButton({
       light={tailwind({ "bg-mono-light-v2-900": isSelected })}
       dark={tailwind({ "bg-mono-dark-v2-900": isSelected })}
       style={tailwind(
-        "w-3/12 items-center rounded-full justify-center self-stretch h-9"
+        "w-3/12 items-center rounded-full justify-center self-stretch h-9",
       )}
       onPress={onPress}
       testID={`slippage_${percentageAmount}%`}
@@ -315,7 +315,7 @@ function CustomAmountButton({
         light={tailwind("text-mono-light-v2-500")}
         dark={tailwind("text-mono-dark-v2-500")}
         style={tailwind(
-          "font-semibold-v2 text-xs px-4 py-2.5 flex-row items-center h-9"
+          "font-semibold-v2 text-xs px-4 py-2.5 flex-row items-center h-9",
         )}
       >
         <ThemedTextV2
@@ -327,6 +327,7 @@ function CustomAmountButton({
           })}
           style={tailwind("text-xs font-normal-v2", {
             "pr-1.5": isCustomAmount,
+            "pr-0.5": isCustomAmount && new BigNumber(customAmount).gte(100),
           })}
           testID="slippage_custom_amount"
         >
@@ -337,7 +338,7 @@ function CustomAmountButton({
         {isCustomAmount && (
           <ThemedIcon
             name="edit-2"
-            size={16}
+            size={14}
             iconType="Feather"
             dark={tailwind("text-mono-dark-v2-100")}
             light={tailwind("text-mono-light-v2-100")}

diff --git a/mobile-app/cypress/e2e/functional/wallet/dex/swap/swap_instant_non_dfi.spec.ts b/mobile-app/cypress/e2e/functional/wallet/dex/swap/swap_instant_non_dfi.spec.ts
@@ -50,18 +50,18 @@ context("Wallet - DEX - Instant Swap (non-DFI)", () => {
     cy.getByTestID("tokenB_displaySymbol").contains("dLTC");
     cy.getByTestID("button_confirm_submit").should(
       "have.attr",
-      "aria-disabled"
+      "aria-disabled",
     );
     cy.getByTestID("text_input_tokenA").clear().type("15").blur().wait(500);
     cy.getByTestID("transaction_details_hint_text").should(
       "have.text",
-      "By continuing, the required amount of DFI will be converted"
+      "By continuing, the required amount of DFI will be converted",
     );
     cy.getByTestID("button_confirm_submit").should("not.have.attr", "disabled");
     cy.getByTestID("text_input_tokenA").clear().type("0").blur().wait(100);
     cy.getByTestID("button_confirm_submit").should(
       "have.attr",
-      "aria-disabled"
+      "aria-disabled",
     );
   });
 
@@ -78,7 +78,7 @@ context("Wallet - DEX - Instant Swap (non-DFI)", () => {
     setCustomSlippage("22");
     cy.getByTestID("slippage_warning").should(
       "have.text",
-      "Set high tolerance at your own risk"
+      "Set high tolerance at your own risk",
     );
     cy.getByTestID("slippage_custom").click();
     cy.getByTestID("slippage_input").clear().click().type("5");
@@ -88,12 +88,12 @@ context("Wallet - DEX - Instant Swap (non-DFI)", () => {
     cy.getByTestID("slippage_input")
       .clear()
       .click()
-      .type("101")
+      .type("1001")
       .blur()
       .wait(100);
     cy.getByTestID("slippage_input_error").should(
       "have.text",
-      "Slippage rate must range from 0-100%"
+      "Slippage rate must range from 0-1000%",
     );
     cy.getByTestID("slippage_input").clear();
     cy.getByTestID("slippage_input")
@@ -104,7 +104,7 @@ context("Wallet - DEX - Instant Swap (non-DFI)", () => {
       .wait(100);
     cy.getByTestID("slippage_input_error").should(
       "have.text",
-      "Slippage rate must range from 0-100%"
+      "Slippage rate must range from 0-1000%",
     );
     cy.getByTestID("slippage_input")
       .clear()
@@ -114,11 +114,11 @@ context("Wallet - DEX - Instant Swap (non-DFI)", () => {
       .wait(100);
     cy.getByTestID("slippage_input_error").should(
       "have.text",
-      "Slippage rate must range from 0-100%"
+      "Slippage rate must range from 0-1000%",
     );
     cy.getByTestID("button_confirm_submit").should(
       "have.attr",
-      "aria-disabled"
+      "aria-disabled",
     );
   });
 

diff --git a/shared/translations/languages/de.json b/shared/translations/languages/de.json
@@ -1038,7 +1038,7 @@
     "Custom": "Anpassen",
     "USE THIS SLIPPAGE TOLERANCE": "SLIPPAGE-TOLERANZ VERWENDEN",
     "Required field is missing": "Erforderliches Feld fehlt",
-    "Slippage rate must range from 0-100%": "Die Slippage-Toleranz muss zwischen 0 und 100 % liegen.",
+    "Slippage rate must range from 0-1000%": "Die Slippage-Toleranz muss zwischen 0 und 1000 % liegen.",
     "Proceed at your own risk": "Handeln auf eigenes Risiko"
   },
   "screens/PoolSwapScreen": {

diff --git a/shared/translations/languages/es.json b/shared/translations/languages/es.json
@@ -1053,7 +1053,7 @@
     "Custom": "Personalizado",
     "USE THIS SLIPPAGE TOLERANCE": "USA ESTA TOLERANCIA DE FLUCTUACION.",
     "Required field is missing": "Falta la información requerida",
-    "Slippage rate must range from 0-100%": "La tasa de fluctuación debe cubrir desde 0-100%.",
+    "Slippage rate must range from 0-1000%": "La tasa de fluctuación debe cubrir desde 0-1000%.",
     "Proceed at your own risk": "Continúa a tu propio riesgo"
   },
   "screens/PoolSwapScreen": {

diff --git a/shared/translations/languages/fr.json b/shared/translations/languages/fr.json
@@ -1046,7 +1046,7 @@
     "Custom": "Personnaliser",
     "USE THIS SLIPPAGE TOLERANCE": "CHOISIR CETTE TOLÉRANCE DE GLISSEMENT.",
     "Required field is missing": "Le champ requis est manquant",
-    "Slippage rate must range from 0-100%": "Le taux de glissement doit être compris entre 0 et 100 %.",
+    "Slippage rate must range from 0-1000%": "Le taux de glissement doit être compris entre 0 et 1000 %.",
     "Proceed at your own risk": "Procédez à vos propres risques"
   },
   "screens/PoolSwapScreen": {

diff --git a/shared/translations/languages/it.json b/shared/translations/languages/it.json
@@ -1052,7 +1052,7 @@
     "Custom": "Personalizza",
     "USE THIS SLIPPAGE TOLERANCE": "UTILIZZA QUESTA TOLLERANZA DI SLIPPAGE.",
     "Required field is missing": "Il campo richiesto è mancante",
-    "Slippage rate must range from 0-100%": "Il tasso di slippage deve essere compreso tra lo 0 e il 100%.",
+    "Slippage rate must range from 0-1000%": "Il tasso di slippage deve essere compreso tra lo 0 e il 1000%.",
     "Proceed at your own risk": "Procedere a proprio rischio"
   },
   "screens/PoolSwapScreen": {

diff --git a/shared/translations/languages/zh-Hans.json b/shared/translations/languages/zh-Hans.json
@@ -1038,7 +1038,7 @@
     "Custom": "自订",
     "USE THIS SLIPPAGE TOLERANCE": "使用此滑点限制范围",
     "Required field is missing": "缺少必要填入的字栏",
-    "Slippage rate must range from 0-100%": "滑点率选择百分比必须在 0 - 100%",
+    "Slippage rate must range from 0-1000%": "滑点率选择百分比必须在 0 - 1000%",
     "Proceed at your own risk": "继续进行并自我承担风险"
   },
   "screens/PoolSwapScreen": {

diff --git a/shared/translations/languages/zh-Hant.json b/shared/translations/languages/zh-Hant.json
@@ -1038,7 +1038,7 @@
     "Custom": "自訂",
     "USE THIS SLIPPAGE TOLERANCE": "使用此滑點限制範圍",
     "Required field is missing": "缺少必要填入的字欄",
-    "Slippage rate must range from 0-100%": "滑點率選擇百分比必須在 0 - 100%",
+    "Slippage rate must range from 0-1000%": "滑點率選擇百分比必須在 0 - 1000%",
     "Proceed at your own risk": "繼續進行並自我承擔風險"
   },
   "screens/PoolSwapScreen": {