Merge branch 'master' into release/v0.3.0

golemfoundation · Mar 21, 2024 · 3c5187b · 3c5187b
2 parents 7479bfa + 92e7a14
commit 3c5187b
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 25 deletions.
diff --git a/client/cypress/e2e/earn.cy.ts b/client/cypress/e2e/earn.cy.ts
@@ -88,17 +88,43 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes
       cy.get('[data-test=ModalGlmLock__overflow]').should('exist');
     });
 
-    it('Wallet connected: Lock 1 GLM', () => {
+    it('Wallet connected: inputs allow to type multiple characters without focus problems', () => {
+      /**
+       * In EarnGlmLock there are multiple autofocus rules set.
+       * This test checks if user is still able to type without any autofocus disruption.
+       */
       connectWallet();
+      cy.get('[data-test=BoxGlmLock__Button]').click();
+      cy.get('[data-test=ModalGlmLock]').should('be.visible');
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.focus');
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').clear().type('100');
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.value', '100');
+      cy.get('[data-test=EarnGlmLockTabs__tab--1]').click();
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').clear().type('100');
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.value', '100');
+    });
 
+    it('Wallet connected: "ModalGlmLock" - changing tabs keep focus on first input', () => {
+      connectWallet();
       cy.get('[data-test=BoxGlmLock__Button]').click();
-      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').blur();
-      cy.get('[data-test=BudgetBox__currentlyLocked__value]')
+      cy.get('[data-test=ModalGlmLock]').should('be.visible');
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.focus');
+      cy.get('[data-test=EarnGlmLockTabs__tab--1]').click();
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.focus');
+      cy.get('[data-test=EarnGlmLockTabs__tab--0]').click();
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.focus');
+    });
+
+    it('Wallet connected: Lock 1 GLM', () => {
+      connectWallet();
+
+      cy.get('[data-test=BoxGlmLock__Section--current__DoubleValue__primary]')
         .invoke('text')
         .then(text => {
           const amountToLock = 1;
           const lockedGlms = parseInt(text, 10);
 
+          cy.get('[data-test=BoxGlmLock__Button]').click();
           cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').clear().type(`${amountToLock}`);
           cy.get('[data-test=GlmLockTabs__Button]').should('have.text', 'Lock');
           cy.get('[data-test=GlmLockTabs__Button]').click();
@@ -142,15 +168,14 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes
     it('Wallet connected: Unlock 1 GLM', () => {
       connectWallet();
 
-      cy.get('[data-test=BoxGlmLock__Button]').click();
-      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').blur();
-      cy.get('[data-test=BudgetBox__currentlyLocked__value]')
+      cy.get('[data-test=BoxGlmLock__Section--current__DoubleValue__primary]')
         .invoke('text')
         .then(text => {
           const amountToUnlock = 1;
           const lockedGlms = parseInt(text, 10);
 
-          cy.get('[data-test=BoxRounded__tab--1]').click();
+          cy.get('[data-test=BoxGlmLock__Button]').click();
+          cy.get('[data-test=EarnGlmLockTabs__tab--1]').click();
           cy.get('[data-test=InputsCryptoFiat__InputText--crypto]')
             .clear()
             .type(`${amountToUnlock}`);

diff --git a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabs/EarnGlmLockTabs.tsx b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabs/EarnGlmLockTabs.tsx
@@ -88,6 +88,7 @@ const EarnGlmLockTabs: FC<EarnGlmLockTabsProps> = ({
   return (
     <BoxRounded
       className={cx(styles.box, className)}
+      dataTest="EarnGlmLockTabs"
       isGrey
       tabs={[
         {
@@ -119,7 +120,6 @@ const EarnGlmLockTabs: FC<EarnGlmLockTabsProps> = ({
         error={formik.values.valueToDeposeOrWithdraw && formik.errors.valueToDeposeOrWithdraw}
         inputCryptoProps={{
           name: 'valueToDeposeOrWithdraw',
-          onChange: onSetValue,
           onClear: formik.resetForm,
           suffix: 'GLM',
           value: formik.values.valueToDeposeOrWithdraw,
@@ -155,6 +155,8 @@ const EarnGlmLockTabs: FC<EarnGlmLockTabsProps> = ({
             )}
           </div>
         }
+        mode={currentMode}
+        onChange={onSetValue}
         onInputsFocusChange={onInputsFocusChange}
       />
       <Button

diff --git a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/EarnGlmLockTabsInputs.tsx b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/EarnGlmLockTabsInputs.tsx
@@ -16,12 +16,14 @@ import EarnGlmLockTabsInputsProps from './types';
 const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputsProps>(
   (
     {
-      error,
-      label,
-      inputCryptoProps,
-      cryptoCurrency,
       areInputsDisabled,
+      cryptoCurrency,
       dataTest = 'InputsCryptoFiat',
+      error,
+      inputCryptoProps,
+      label,
+      mode,
+      onChange,
       onInputsFocusChange = () => {},
     },
     ref,
@@ -41,9 +43,9 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
     const isAnyInputFocused = useDeferredValue(isCryptoInputFocused || isFiatInputFocused);
 
     const inputCryptoPropsLabel = isCryptoMainValueDisplay
-      ? { ...inputCryptoProps, error, label }
+      ? { ...inputCryptoProps, error, label, mode }
       : { ...inputCryptoProps, error };
-    const inputFiatPropsLabel = isCryptoMainValueDisplay ? { error } : { error, label };
+    const inputFiatPropsLabel = isCryptoMainValueDisplay ? { error } : { error, label, mode };
 
     const cryptoFiatRatio = cryptoValues?.[cryptoCurrency][displayCurrency || 'usd'] || 1;
 
@@ -57,7 +59,7 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
       const cryptoToFiat = valueComma ? (parseFloat(valueComma) * cryptoFiatRatio).toFixed(2) : '';
 
       setFiat(cryptoToFiat);
-      inputCryptoProps.onChange(valueComma);
+      onChange(valueComma);
     };
 
     const onFiatValueChange = (value: string) => {
@@ -69,7 +71,7 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
 
       const fiatToCrypto = valueComma ? (parseFloat(valueComma) / cryptoFiatRatio).toFixed(18) : '';
       setFiat(valueComma);
-      inputCryptoProps.onChange(fiatToCrypto);
+      onChange(fiatToCrypto);
     };
 
     const handleClear = () => {
@@ -109,20 +111,23 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
       <div className={cx(styles.root, isCryptoMainValueDisplay && styles.isCryptoMainValueDisplay)}>
         <InputText
           ref={isCryptoMainValueDisplay ? ref : undefined}
+          autocomplete="off"
           className={cx(styles.input, isCryptoMainValueDisplay && styles.isCryptoMainValueDisplay)}
           dataTest={`${dataTest}__InputText--crypto`}
           inputMode="decimal"
-          placeholder="0.00"
-          variant="simple"
-          {...inputCryptoPropsLabel}
-          autocomplete="off"
           isDisabled={areInputsDisabled}
           isErrorInlineVisible={false}
           onBlur={() => setIsCryptoInputFocused(false)}
-          onChange={e => onCryptoValueChange(e.target.value)}
+          onChange={e => {
+            onCryptoValueChange(e.target.value);
+          }}
           onClear={handleClear}
           onFocus={() => setIsCryptoInputFocused(true)}
+          placeholder="0.00"
           shouldAutoFocusAndSelect={isCryptoMainValueDisplay}
+          shouldAutoFocusAndSelectOnModeChange
+          variant="simple"
+          {...inputCryptoPropsLabel}
         />
         <InputText
           ref={isCryptoMainValueDisplay ? undefined : ref}
@@ -137,10 +142,11 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
           onClear={handleClear}
           onFocus={() => setIsFiatInputFocused(true)}
           placeholder="0.00"
+          shouldAutoFocusAndSelect={!isCryptoMainValueDisplay}
+          shouldAutoFocusAndSelectOnModeChange
           suffix={displayCurrency.toUpperCase()}
           value={fiat}
           {...inputFiatPropsLabel}
-          shouldAutoFocusAndSelect={!isCryptoMainValueDisplay}
         />
       </div>
     );

diff --git a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/types.ts b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/types.ts
@@ -1,3 +1,4 @@
+import { CurrentMode } from 'components/Earn/EarnGlmLock/types';
 import InputTextProps from 'components/ui/InputText/types';
 import { CryptoCurrency } from 'types/cryptoCurrency';
 
@@ -8,11 +9,12 @@ export default interface EarnGlmLockTabsInputsProps {
   error: string | undefined;
   inputCryptoProps: {
     name: InputTextProps['name'];
-    onChange: (value: string) => void;
     onClear?: InputTextProps['onClear'];
     suffix: InputTextProps['suffix'];
     value: InputTextProps['value'];
   };
   label: InputTextProps['label'];
+  mode: CurrentMode;
+  onChange: (value: string) => void;
   onInputsFocusChange?: (isAnyInputFocused: boolean) => void;
 }
diff --git a/client/src/components/ui/InputText/InputText.tsx b/client/src/components/ui/InputText/InputText.tsx
@@ -19,6 +19,7 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
       isDisabled,
       isErrorInlineVisible = true,
       label,
+      mode,
       onChange,
       onClear,
       suffix,
@@ -29,6 +30,7 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
       showLoader = false,
       dataTest = 'InputText',
       shouldAutoFocusAndSelect = true,
+      shouldAutoFocusAndSelectOnModeChange,
       ...rest
     },
     ref,
@@ -63,7 +65,12 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
       }
       inputRef.current.focus();
       inputRef.current.select();
-    }, [inputProps.ref, shouldAutoFocusAndSelect]);
+    }, [
+      inputProps.ref,
+      shouldAutoFocusAndSelect,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...(shouldAutoFocusAndSelectOnModeChange ? [shouldAutoFocusAndSelectOnModeChange, mode] : []),
+    ]);
 
     return (
       <div className={cx(styles.root, styles[`variant--${variant}`], className)}>

diff --git a/client/src/components/ui/InputText/types.ts b/client/src/components/ui/InputText/types.ts
@@ -13,13 +13,15 @@ export default interface InputTextProps {
   isDisabled?: boolean;
   isErrorInlineVisible?: boolean;
   label?: string | ReactNode;
+  mode?: string;
   name?: string;
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   onClear?: () => void;
   onFocus?: FocusEventHandler<HTMLInputElement>;
   placeholder?: string;
   shouldAutoFocusAndSelect?: boolean;
+  shouldAutoFocusAndSelectOnModeChange?: boolean;
   showLoader?: boolean;
   suffix?: string;
   suffixClassName?: string;

diff --git a/client/src/components/ui/Slider/Slider.tsx b/client/src/components/ui/Slider/Slider.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { FC, useState, useEffect } from 'react';
+import React, { FC, useState, useEffect, useRef } from 'react';
 import ReactSlider from 'react-slider';
 
 import styles from './Slider.module.scss';
@@ -15,6 +15,7 @@ const Slider: FC<SliderProps> = ({
   hideThumb,
   ...rest
 }) => {
+  const reactSliderRef = useRef(null);
   const [localValue, setLocalValue] = useState(value);
 
   useEffect(() => {
@@ -40,9 +41,19 @@ const Slider: FC<SliderProps> = ({
     }
   };
 
+  useEffect(() => {
+    if (isDisabled || hideThumb || !reactSliderRef?.current) {
+      return;
+    }
+    // Calling handleResize() method solves the problem with rendering thumb outside the box.
+    // @ts-expect-error method isn't typed
+    reactSliderRef.current.handleResize();
+  }, [isDisabled, hideThumb]);
+
   return (
     <div className={cx(styles.root, className)}>
       <ReactSlider
+        ref={reactSliderRef}
         className={styles.slider}
         disabled={isDisabled || hideThumb}
         onChange={localOnChange}