Create slippage tolerance dropdown

Add droprown on the swap transaction settings to set slippage tolerance. Fix SharedSelect styling to match new place of usage
tahowallet · Jun 23, 2022 · 8cf22e4 · 8cf22e4
1 parent fe82497
commit 8cf22e4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/ui/components/Onboarding/OnboardingDerivationPathSelect.tsx b/ui/components/Onboarding/OnboardingDerivationPathSelect.tsx
@@ -183,6 +183,7 @@ export default function OnboardingDerivationPathSelect({
         triggerLabel="Add custom path"
         onTrigger={() => setModalStep(1)}
         showValue
+        showOptionValue
         placement="top"
       />
       <style jsx>{`

diff --git a/ui/components/Shared/SharedSelect.tsx b/ui/components/Shared/SharedSelect.tsx
@@ -20,6 +20,8 @@ type Props = {
   triggerLabel?: string
   onTrigger?: () => void
   showValue?: boolean
+  showOptionValue?: boolean
+  width?: number
 }
 
 export default function SharedSelect(props: Props): ReactElement {
@@ -32,6 +34,8 @@ export default function SharedSelect(props: Props): ReactElement {
     triggerLabel,
     onTrigger,
     showValue,
+    showOptionValue,
+    width = 320,
   } = props
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
@@ -128,7 +132,7 @@ export default function SharedSelect(props: Props): ReactElement {
               >
                 <div className="option_content">
                   <span>{option.label}</span>
-                  <span>{option.value}</span>
+                  {showOptionValue && <span>{option.value}</span>}
                 </div>
               </li>
             )
@@ -148,7 +152,7 @@ export default function SharedSelect(props: Props): ReactElement {
             box-sizing: border-box;
             display: inline-block;
             position: relative;
-            width: 320px;
+            width: ${width}px;
             background-color: transparent;
           }
 
@@ -214,7 +218,7 @@ export default function SharedSelect(props: Props): ReactElement {
             position: absolute;
             left: 2px;
             box-sizing: border-box;
-            width: 316px;
+            width: ${width - 4}px;
             text-align: right;
             background-color: var(--green-95);
             border-radius: 5px;
@@ -228,6 +232,7 @@ export default function SharedSelect(props: Props): ReactElement {
             opacity: 0;
             line-height: 1.5;
             transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out;
+            z-index: 1;
           }
 
           .select.bottom .options {

diff --git a/ui/components/Swap/SwapTransactionSettingsChooser.tsx b/ui/components/Swap/SwapTransactionSettingsChooser.tsx
@@ -15,6 +15,7 @@ import { useBackgroundDispatch, useBackgroundSelector } from "../../hooks"
 import NetworkSettingsSelect from "../NetworkFees/NetworkSettingsSelect"
 import FeeSettingsText from "../NetworkFees/FeeSettingsText"
 import t from "../../utils/i18n"
+import SharedSelect, { Option } from "../Shared/SharedSelect"
 
 export type SwapTransactionSettings = {
   slippageTolerance: number
@@ -27,6 +28,13 @@ interface SwapTransactionSettingsProps {
   onSwapTransactionSettingsSave?: (setting: SwapTransactionSettings) => void
 }
 
+const slippageToleranceOptions: Option[] = [
+  { value: "0.005", label: "0.5%" },
+  { value: "0.01", label: "1%" },
+  { value: "0.02", label: "2%" },
+  { value: "0.04", label: "4%" },
+]
+
 export default function SwapTransactionSettingsChooser({
   isSettingsLocked,
   swapTransactionSettings,
@@ -38,7 +46,7 @@ export default function SwapTransactionSettingsChooser({
   const [networkSettings, setNetworkSettings] = useState(
     useBackgroundSelector(selectDefaultNetworkFeeSettings)
   )
-
+  const [slippageTolerance, setSlippageTolerance] = useState(0.01)
   const [isSlideUpMenuOpen, setIsSlideUpMenuOpen] = useState(false)
 
   const openSettings = () => {
@@ -47,12 +55,15 @@ export default function SwapTransactionSettingsChooser({
     }
   }
 
+  const onSlippageToleranceChange = (value: string) =>
+    setSlippageTolerance(parseFloat(value))
+
   const saveSettings = () => {
     dispatch(setFeeType(networkSettings.feeType))
 
     onSwapTransactionSettingsSave?.({
       ...swapTransactionSettings,
-      slippageTolerance: 0.01,
+      slippageTolerance,
       networkSettings,
     })
 
@@ -77,7 +88,16 @@ export default function SwapTransactionSettingsChooser({
                 <span className="settings_label">
                   {t("transactionSettingsSlippageTolerance")}
                 </span>
-                <span>1%</span>
+                <SharedSelect
+                  width={94}
+                  options={slippageToleranceOptions}
+                  onChange={onSlippageToleranceChange}
+                  defaultIndex={slippageToleranceOptions.findIndex(
+                    ({ value }) =>
+                      parseFloat(value) ===
+                      swapTransactionSettings.slippageTolerance
+                  )}
+                />
               </div>
               <div className="row row_fee">
                 <NetworkSettingsSelect