EditWalletRules: Integer quorum percent (#1856)

solana-labs · Oct 9, 2023 · dc30183 · dc30183 · vercel · Oct 9, 2023
1 parent 1a07037
commit dc30183
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/hub/components/EditWalletRules/Form/index.tsx b/hub/components/EditWalletRules/Form/index.tsx
@@ -29,7 +29,6 @@ interface Props
 }
 
 function Form(props: Props & { title: string; description: string }) {
-  console.log('form props', props);
   const [showCouncilOptions, setShowCouncilOptions] = useState(
     props.initialCouncilRules?.canVote || false,
   );

diff --git a/hub/components/EditWalletRules/RulesDetailsInputs.tsx b/hub/components/EditWalletRules/RulesDetailsInputs.tsx
@@ -226,6 +226,7 @@ export function QuorumPercent(props: Props) {
             });
             props.onRulesChange?.(newRules);
           }}
+          integer
         />
         <Slider
           min={1}
@@ -239,6 +240,7 @@ export function QuorumPercent(props: Props) {
             props.onRulesChange?.(newRules);
           }}
           onRenderValue={(val) => `${val}%`}
+          step={1}
         />
       </div>
     </ValueBlock>

diff --git a/hub/components/EditWalletRules/SliderValue/index.tsx b/hub/components/EditWalletRules/SliderValue/index.tsx
@@ -10,6 +10,7 @@ interface Props {
   value: number;
   units: React.ReactNode;
   onChange?(value: number): void;
+  integer?: boolean;
 }
 
 export function SliderValue(props: Props) {
@@ -32,9 +33,14 @@ export function SliderValue(props: Props) {
             /.*?(([0-9]*\.)?[0-9]+).*/g,
             '$1',
           );
-          const parsed = parseFloat(text);
+          const parsed = props.integer
+            ? Math.floor(parseFloat(text))
+            : parseFloat(text);
           const value = Number.isNaN(parsed) ? props.min : parsed;
-          props.onChange?.(Math.max(props.min, value));
+          const newValue = Math.max(props.min, value);
+          setValue(String(props.value)); // this is to force the input to update to the correct value
+          // even if the user enters an invalid value that doesnt actually change props.value
+          props.onChange?.(newValue);
         }}
       />
       <div