355 - Purchase Confirmation Services (#558)

* various changes * main-container-header mixin * did everything outside of the purchaseConfirmationService page * flip focus and hover color for DropdownMenuButton * added the select input * added the checkbox logic * fixed a bug where if you're switching banks, the page did not go back to 1 * keep track on the indices of the selectedValidators, so that you can order them later by that * PaginatedTable * Updated the PurchaseConfirmationServicesModal * Testing connection in the beginning * Some style changes * fetch bankConfig at the beginning for both BulkPurchaseConfirmationServicesModal and PurchaseConfirmationServicesModal * disable amount input for PVs and validators without daily_rates (at least until the BE is updated) * done everything except handleSubmit * disable submit button when entered amount exceeds available balance * finished handleSubmit * remove 'active' from primaryValidator * use getBankTxFee for the bulk purchase modal * bankConfig change * fixed a bug where bank tx's fee was wrong if the selectedBank was the activeBank
thenewboston-blockchain · Feb 1, 2021 · 71b0d39 · 71b0d39
1 parent c4e3483
commit 71b0d39
Show file tree

Hide file tree

Showing 144 changed files with 2,281 additions and 948 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -40,6 +40,7 @@
     "import/prefer-default-export": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/control-has-associated-label": "off",
+    "jsx-a11y/label-has-associated-control": "off",
     "jsx-a11y/no-noninteractive-tabindex": "off",
     "jsx-a11y/no-static-element-interactions": "off",
     "no-param-reassign": "off",

diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
   </head>
   <body>
     <div id="root"></div>
-    <div id="modal-root"></div>
-    <div id="dropdown-root"></div>
+    <div id="modal-root" class="modal-root"></div>
+    <div id="dropdown-root" class="dropdown-root"></div>
   </body>
 </html>
diff --git a/src/renderer/components/DropdownMenuButton/DropdownMenuButton.scss b/src/renderer/components/DropdownMenuButton/DropdownMenuButton.scss
@@ -31,7 +31,7 @@ $button-height: 24px;
       cursor: pointer;
 
       &:hover {
-        background: var(--color-gray-100);
+        background: var(--color-gray-050);
       }
     }
 

diff --git a/src/renderer/components/FormComponents/Form/index.tsx b/src/renderer/components/FormComponents/Form/index.tsx
@@ -6,12 +6,25 @@ interface ComponentProps {
   className?: string;
   initialValues?: GenericFormValues;
   onSubmit(values: GenericFormValues): void | Promise<any>;
+  validateOnMount?: boolean;
   validationSchema?: any;
 }
 
-const Form: FC<ComponentProps> = ({children, className, onSubmit, initialValues = {}, validationSchema}) => {
+const Form: FC<ComponentProps> = ({
+  children,
+  className,
+  onSubmit,
+  initialValues = {},
+  validateOnMount = false,
+  validationSchema,
+}) => {
   return (
-    <Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
+    <Formik
+      initialValues={initialValues}
+      onSubmit={onSubmit}
+      validateOnMount={validateOnMount}
+      validationSchema={validationSchema}
+    >
       {() => (
         <FormikForm className={className} spellCheck="false">
           {children}

diff --git a/src/renderer/components/FormComponents/FormInput/index.tsx b/src/renderer/components/FormComponents/FormInput/index.tsx
@@ -24,9 +24,9 @@ const FormInput: FC<ComponentProps> = ({
 
   return (
     <div className={clsx('FormInput FormFieldComponent', className)}>
-      {renderFormLabel(name, className, label, required)}
+      {renderFormLabel({className, label, name, required})}
       <Field {...baseInputProps} as={Input} className="FormField" error={error} required={required} />
-      {hideErrorBlock ? null : renderFormError(name, className, hideErrorText)}
+      {hideErrorBlock ? null : renderFormError({className, hideErrorText, name})}
     </div>
   );
 };

diff --git a/src/renderer/components/FormComponents/FormRadioGroup/index.tsx b/src/renderer/components/FormComponents/FormRadioGroup/index.tsx
@@ -59,7 +59,7 @@ const FormRadioGroup: FC<ComponentProps> = ({
 
   return (
     <div className={clsx('FormRadioGroup FormFieldComponent', className)}>
-      {renderFormLabel(name, className, label, required)}
+      {renderFormLabel({className, label, name, required})}
       {options.map((option, index) => {
         const optionIsFocused = focused && index === focusedIndex;
         const selected = selectedOption?.value === option.value;
@@ -92,7 +92,7 @@ const FormRadioGroup: FC<ComponentProps> = ({
           </div>
         );
       })}
-      {renderFormError(name, className, hideErrorText)}
+      {renderFormError({className, hideErrorText, name})}
     </div>
   );
 };

diff --git a/src/renderer/components/FormComponents/FormSelect/index.tsx b/src/renderer/components/FormComponents/FormSelect/index.tsx
@@ -16,7 +16,7 @@ const FormSelect: FC<ComponentProps> = ({hideErrorText = false, label, required,
 
   return (
     <div className={clsx('FormSelect FormFieldComponent', className)}>
-      {renderFormLabel(name, className, label, required)}
+      {renderFormLabel({className, label, name, required})}
       <Select
         {...baseSelectProps}
         className="FormField"
@@ -25,7 +25,7 @@ const FormSelect: FC<ComponentProps> = ({hideErrorText = false, label, required,
         onChange={handleChange}
         value={selectedOption}
       />
-      {renderFormError(name, className, hideErrorText)}
+      {renderFormError({className, hideErrorText, name})}
     </div>
   );
 };

diff --git a/src/renderer/components/FormComponents/FormSelectDetailed/index.tsx b/src/renderer/components/FormComponents/FormSelectDetailed/index.tsx
@@ -15,8 +15,8 @@ const FormSelectDetailed: FC<ComponentProps> = ({hideErrorText = false, label, r
   const {error, handleBlur, handleChange, selectedOption} = useFormSelect(name, options, baseSelectProps);
 
   return (
-    <div className={clsx('FormSelectDetailed FormFieldComponent', className)}>
-      {renderFormLabel(name, className, label, required)}
+    <div className={clsx('FormSelectDetailed', 'FormFieldComponent', className)}>
+      {renderFormLabel({className, label, name, required})}
       <SelectDetailed
         {...baseSelectProps}
         className="FormField"
@@ -25,7 +25,7 @@ const FormSelectDetailed: FC<ComponentProps> = ({hideErrorText = false, label, r
         onChange={handleChange}
         value={selectedOption}
       />
-      {renderFormError(name, className, hideErrorText)}
+      {renderFormError({className, hideErrorText, name})}
     </div>
   );
 };

diff --git a/src/renderer/components/FormComponents/FormTextArea/index.tsx b/src/renderer/components/FormComponents/FormTextArea/index.tsx
@@ -18,9 +18,9 @@ const FormTextArea: FC<ComponentProps> = ({hideErrorText = false, label, require
 
   return (
     <div className={clsx('FormTextArea FormFieldComponent', className)}>
-      {renderFormLabel(name, className, label, required)}
+      {renderFormLabel({className, label, name, required})}
       <Field {...baseInputProps} as={TextArea} className="FormField" error={error} required={required} />
-      {renderFormError(name, className, hideErrorText)}
+      {renderFormError({className, hideErrorText, name})}
     </div>
   );
 };

diff --git a/.../components/FormElements/Radio/Radio.scss → ...ements/CheckableInput/CheckableInput.scss b/.../components/FormElements/Radio/Radio.scss → ...ements/CheckableInput/CheckableInput.scss
@@ -1,4 +1,4 @@
-.Radio {
+.CheckableInput {
   color: var(--color-gray-700);
   display: inline-flex;
 

diff --git a/src/renderer/components/FormElements/CheckableInput/index.tsx b/src/renderer/components/FormElements/CheckableInput/index.tsx
@@ -0,0 +1,103 @@
+import React, {FC, useEffect, useMemo, useRef} from 'react';
+import clsx from 'clsx';
+
+import Icon, {IconType} from '@renderer/components/Icon';
+import {getCustomClassNames} from '@renderer/utils/components';
+
+import './CheckableInput.scss';
+
+export interface BaseCheckableInputProps {
+  checked: boolean;
+  className?: string;
+  disabled?: boolean;
+  error?: boolean;
+  focused?: boolean;
+  name?: string;
+  onClick?(e?: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
+  onKeyDown?(e?: React.KeyboardEvent<HTMLDivElement>): void;
+  size?: number;
+  totalSize?: number;
+  unfocusable?: boolean;
+  value: string;
+}
+
+export interface CheckableInputType {
+  type: 'checkbox' | 'radio';
+}
+
+const CheckableInput: FC<BaseCheckableInputProps & CheckableInputType> = ({
+  checked,
+  className,
+  disabled = false,
+  error = false,
+  focused = false,
+  name,
+  onClick,
+  onKeyDown,
+  size,
+  totalSize = size,
+  unfocusable = false,
+  type,
+  value,
+}) => {
+  const iconRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (focused) {
+      iconRef.current?.focus();
+    }
+  }, [focused, iconRef]);
+
+  const checkedIcon = useMemo(() => {
+    if (type === 'radio') return IconType.radioboxMarked;
+    return IconType.checkboxMarked;
+  }, [type]);
+
+  const uncheckedIcon = useMemo(() => {
+    if (type === 'radio') return IconType.radioboxBlank;
+    return IconType.checkboxBlankOutline;
+  }, [type]);
+
+  const handleClick = onClick
+    ? (e?: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {
+        // blur if clicked. Don't blur if you pressed Enter on it.
+        if (e?.detail === 1) {
+          iconRef.current?.blur();
+        }
+        onClick(e);
+      }
+    : undefined;
+
+  return (
+    <>
+      <Icon
+        className={clsx('CheckableInput', className, {
+          'CheckableInput--checked': checked,
+          'CheckableInput--error': error,
+          ...getCustomClassNames(className, '--checked', checked),
+          ...getCustomClassNames(className, '--error', error),
+        })}
+        disabled={disabled}
+        icon={checked ? checkedIcon : uncheckedIcon}
+        onClick={handleClick}
+        onKeyDown={onKeyDown}
+        ref={iconRef}
+        size={size}
+        totalSize={totalSize}
+        unfocusable={unfocusable}
+      />
+      <input
+        className="CheckableInput__input"
+        checked={checked}
+        disabled={disabled}
+        id={name || value}
+        name={name || value}
+        readOnly
+        type={type}
+        value={value}
+      />
+    </>
+  );
+};
+
+export default CheckableInput;
diff --git a/src/renderer/components/FormElements/Checkbox/index.tsx b/src/renderer/components/FormElements/Checkbox/index.tsx
@@ -0,0 +1,22 @@
+/* eslint-disable react/jsx-props-no-spreading */
+
+import React, {FC} from 'react';
+import clsx from 'clsx';
+
+import CheckableInput, {BaseCheckableInputProps} from '../CheckableInput';
+
+export type BaseCheckboxProps = BaseCheckableInputProps;
+
+const Checkbox: FC<BaseCheckboxProps> = ({className, size = 22, ...props}) => {
+  return (
+    <CheckableInput
+      {...props}
+      className={clsx('Checkbox', className)}
+      size={size}
+      totalSize={size + 2}
+      type="checkbox"
+    />
+  );
+};
+
+export default Checkbox;
diff --git a/src/renderer/components/FormElements/Radio/index.tsx b/src/renderer/components/FormElements/Radio/index.tsx
@@ -1,76 +1,14 @@
-import React, {FC, useEffect, useRef} from 'react';
-import clsx from 'clsx';
-
-import Icon, {IconType} from '@renderer/components/Icon';
-import {getCustomClassNames} from '@renderer/utils/components';
+/* eslint-disable react/jsx-props-no-spreading */
 
-import './Radio.scss';
-
-export interface BaseRadioProps {
-  checked: boolean;
-  className?: string;
-  disabled?: boolean;
-  error?: boolean;
-  focused?: boolean;
-  name?: string;
-  onClick?(e?: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
-  onKeyDown?(e?: React.KeyboardEvent<HTMLDivElement>): void;
-  size?: number;
-  unfocusable?: boolean;
-  value: string;
-}
+import React, {FC} from 'react';
+import clsx from 'clsx';
 
-const Radio: FC<BaseRadioProps> = ({
-  checked,
-  className,
-  disabled = false,
-  error = false,
-  focused = false,
-  name,
-  onClick,
-  onKeyDown,
-  size = 24,
-  unfocusable = false,
-  value,
-}) => {
-  const radioRef = useRef<HTMLDivElement>(null);
+import CheckableInput, {BaseCheckableInputProps} from '../CheckableInput';
 
-  useEffect(() => {
-    if (focused) {
-      radioRef.current?.focus();
-    }
-  }, [focused, radioRef]);
+export type BaseRadioProps = BaseCheckableInputProps;
 
-  return (
-    <>
-      <Icon
-        className={clsx('Radio', className, {
-          'Radio--checked': checked,
-          'Radio--error': error,
-          ...getCustomClassNames(className, '--checked', checked),
-          ...getCustomClassNames(className, '--error', error),
-        })}
-        disabled={disabled}
-        icon={checked ? IconType.radioboxMarked : IconType.radioboxBlank}
-        onClick={onClick}
-        onKeyDown={onKeyDown}
-        ref={radioRef}
-        size={size}
-        totalSize={size}
-        unfocusable={unfocusable}
-      />
-      <input
-        className="Radio__input"
-        checked={checked}
-        disabled={disabled}
-        id={name || value}
-        name={name || value}
-        readOnly
-        type="radio"
-        value={value}
-      />
-    </>
-  );
+const Radio: FC<BaseRadioProps> = ({className, size = 24, ...props}) => {
+  return <CheckableInput {...props} className={clsx('Radio', className)} size={size} type="radio" />;
 };
 
 export default Radio;
diff --git a/src/renderer/components/FormElements/index.tsx b/src/renderer/components/FormElements/index.tsx
@@ -1,4 +1,5 @@
 import Button, {BaseButtonProps} from './Button';
+import Checkbox, {BaseCheckboxProps} from './Checkbox';
 import Input, {BaseInputProps} from './Input';
 import Loader from './Loader';
 import Radio, {BaseRadioProps} from './Radio';
@@ -8,10 +9,12 @@ import TextArea from './TextArea';
 
 export {
   BaseButtonProps,
+  BaseCheckboxProps,
   BaseInputProps,
   BaseRadioProps,
   BaseSelectProps,
   Button,
+  Checkbox,
   Input,
   Loader,
   Radio,

diff --git a/src/renderer/components/Icon/index.tsx b/src/renderer/components/Icon/index.tsx
@@ -10,6 +10,8 @@ import ArrowRightIcon from 'mdi-react/ArrowRightIcon';
 import BellIcon from 'mdi-react/BellIcon';
 import CheckboxBlankCircleIcon from 'mdi-react/CheckboxBlankCircleIcon';
 import CheckboxBlankCircleOutlineIcon from 'mdi-react/CheckboxBlankCircleOutlineIcon';
+import CheckboxBlankOutlineIcon from 'mdi-react/CheckboxBlankOutlineIcon';
+import CheckboxMarkedIcon from 'mdi-react/CheckboxMarkedIcon';
 import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
@@ -45,6 +47,8 @@ export enum IconType {
   bell,
   checkboxBlankCircle,
   checkboxBlankCircleOutline,
+  checkboxBlankOutline,
+  checkboxMarked,
   chevronLeft,
   chevronRight,
   close,
@@ -122,6 +126,10 @@ const Icon = forwardRef<HTMLDivElement, ComponentProps>(
           return <CheckboxBlankCircleIcon size={size || 24} />;
         case IconType.checkboxBlankCircleOutline:
           return <CheckboxBlankCircleOutlineIcon size={size || 24} />;
+        case IconType.checkboxBlankOutline:
+          return <CheckboxBlankOutlineIcon size={size || 24} />;
+        case IconType.checkboxMarked:
+          return <CheckboxMarkedIcon size={size || 24} />;
         case IconType.chevronLeft:
           return <ChevronLeftIcon size={size || 24} />;
         case IconType.chevronRight: