Skip to content

Commit 4965c91

Browse files
aziolekaziolek
authored
OCT-1457 Fix interaction issues with Lock/Unlock flow (#84)
1 parent f5803a6 commit 4965c91

File tree

6 files changed

+43
-21
lines changed

6 files changed

+43
-21
lines changed

‎client/cypress/e2e/earn.cy.ts‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -88,17 +88,27 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes
8888
cy.get('[data-test=ModalGlmLock__overflow]').should('exist');
8989
});
9090

91+
it('Wallet connected: "ModalGlmLock" - changing tabs keep focus on first input', () => {
92+
connectWallet();
93+
cy.get('[data-test=BoxGlmLock__Button]').click();
94+
cy.get('[data-test=ModalGlmLock]').should('be.visible');
95+
cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.focus');
96+
cy.get('[data-test=EarnGlmLockTabs__tab--1]').click();
97+
cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.focus');
98+
cy.get('[data-test=EarnGlmLockTabs__tab--0]').click();
99+
cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.focus');
100+
});
101+
91102
it('Wallet connected: Lock 1 GLM', () => {
92103
connectWallet();
93104

94-
cy.get('[data-test=BoxGlmLock__Button]').click();
95-
cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').blur();
96-
cy.get('[data-test=BudgetBox__currentlyLocked__value]')
105+
cy.get('[data-test=BoxGlmLock__Section--current__DoubleValue__primary]')
97106
.invoke('text')
98107
.then(text => {
99108
const amountToLock = 1;
100109
const lockedGlms = parseInt(text, 10);
101110

111+
cy.get('[data-test=BoxGlmLock__Button]').click();
102112
cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').clear().type(`${amountToLock}`);
103113
cy.get('[data-test=GlmLockTabs__Button]').should('have.text', 'Lock');
104114
cy.get('[data-test=GlmLockTabs__Button]').click();
@@ -142,18 +152,15 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes
142152
it('Wallet connected: Unlock 1 GLM', () => {
143153
connectWallet();
144154

145-
cy.get('[data-test=BoxGlmLock__Button]').click();
146-
cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').blur();
147-
cy.get('[data-test=BudgetBox__currentlyLocked__value]')
155+
cy.get('[data-test=BoxGlmLock__Section--current__DoubleValue__primary]')
148156
.invoke('text')
149157
.then(text => {
150158
const amountToUnlock = 1;
151159
const lockedGlms = parseInt(text, 10);
152160

153-
cy.get('[data-test=BoxRounded__tab--1]').click();
154-
cy.get('[data-test=InputsCryptoFiat__InputText--crypto]')
155-
.clear()
156-
.type(`${amountToUnlock}`);
161+
cy.get('[data-test=BoxGlmLock__Button]').click();
162+
cy.get('[data-test=EarnGlmLockTabs__tab--1]').click();
163+
cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').clear().type(`${amountToUnlock}`);
157164
cy.get('[data-test=GlmLockTabs__Button]').should('have.text', 'Unlock');
158165
cy.get('[data-test=GlmLockTabs__Button]').click();
159166
cy.get('[data-test=GlmLockTabs__Button]').should('have.text', 'Waiting for confirmation');

‎client/src/components/Earn/EarnGlmLock/EarnGlmLockTabs/EarnGlmLockTabs.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ const EarnGlmLockTabs: FC<EarnGlmLockTabsProps> = ({
8888
return (
8989
<BoxRounded
9090
className={cx(styles.box, className)}
91+
dataTest="EarnGlmLockTabs"
9192
isGrey
9293
tabs={[
9394
{
@@ -119,7 +120,6 @@ const EarnGlmLockTabs: FC<EarnGlmLockTabsProps> = ({
119120
error={formik.values.valueToDeposeOrWithdraw && formik.errors.valueToDeposeOrWithdraw}
120121
inputCryptoProps={{
121122
name: 'valueToDeposeOrWithdraw',
122-
onChange: onSetValue,
123123
onClear: formik.resetForm,
124124
suffix: 'GLM',
125125
value: formik.values.valueToDeposeOrWithdraw,
@@ -155,6 +155,7 @@ const EarnGlmLockTabs: FC<EarnGlmLockTabsProps> = ({
155155
)}
156156
</div>
157157
}
158+
onChange={onSetValue}
158159
onInputsFocusChange={onInputsFocusChange}
159160
/>
160161
<Button

‎client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/EarnGlmLockTabsInputs.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
2020
label,
2121
inputCryptoProps,
2222
cryptoCurrency,
23+
onChange,
2324
areInputsDisabled,
2425
dataTest = 'InputsCryptoFiat',
2526
onInputsFocusChange = () => {},
@@ -57,7 +58,7 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
5758
const cryptoToFiat = valueComma ? (parseFloat(valueComma) * cryptoFiatRatio).toFixed(2) : '';
5859

5960
setFiat(cryptoToFiat);
60-
inputCryptoProps.onChange(valueComma);
61+
onChange(valueComma);
6162
};
6263

6364
const onFiatValueChange = (value: string) => {
@@ -69,7 +70,7 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
6970

7071
const fiatToCrypto = valueComma ? (parseFloat(valueComma) / cryptoFiatRatio).toFixed(18) : '';
7172
setFiat(valueComma);
72-
inputCryptoProps.onChange(fiatToCrypto);
73+
onChange(fiatToCrypto);
7374
};
7475

7576
const handleClear = () => {
@@ -109,20 +110,23 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
109110
<div className={cx(styles.root, isCryptoMainValueDisplay && styles.isCryptoMainValueDisplay)}>
110111
<InputText
111112
ref={isCryptoMainValueDisplay ? ref : undefined}
113+
autocomplete="off"
112114
className={cx(styles.input, isCryptoMainValueDisplay && styles.isCryptoMainValueDisplay)}
113115
dataTest={`${dataTest}__InputText--crypto`}
114116
inputMode="decimal"
115-
placeholder="0.00"
116-
variant="simple"
117-
{...inputCryptoPropsLabel}
118-
autocomplete="off"
119117
isDisabled={areInputsDisabled}
120118
isErrorInlineVisible={false}
121119
onBlur={() => setIsCryptoInputFocused(false)}
122-
onChange={e => onCryptoValueChange(e.target.value)}
120+
onChange={e => {
121+
onCryptoValueChange(e.target.value);
122+
}}
123123
onClear={handleClear}
124124
onFocus={() => setIsCryptoInputFocused(true)}
125+
placeholder="0.00"
125126
shouldAutoFocusAndSelect={isCryptoMainValueDisplay}
127+
shouldAutoFocusAndSelectOnLabelChange
128+
variant="simple"
129+
{...inputCryptoPropsLabel}
126130
/>
127131
<InputText
128132
ref={isCryptoMainValueDisplay ? undefined : ref}
@@ -137,10 +141,11 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
137141
onClear={handleClear}
138142
onFocus={() => setIsFiatInputFocused(true)}
139143
placeholder="0.00"
144+
shouldAutoFocusAndSelect={!isCryptoMainValueDisplay}
145+
shouldAutoFocusAndSelectOnLabelChange
140146
suffix={displayCurrency.toUpperCase()}
141147
value={fiat}
142148
{...inputFiatPropsLabel}
143-
shouldAutoFocusAndSelect={!isCryptoMainValueDisplay}
144149
/>
145150
</div>
146151
);

‎client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ export default interface EarnGlmLockTabsInputsProps {
88
error: string | undefined;
99
inputCryptoProps: {
1010
name: InputTextProps['name'];
11-
onChange: (value: string) => void;
1211
onClear?: InputTextProps['onClear'];
1312
suffix: InputTextProps['suffix'];
1413
value: InputTextProps['value'];
1514
};
1615
label: InputTextProps['label'];
16+
onChange: (value: string) => void;
1717
onInputsFocusChange?: (isAnyInputFocused: boolean) => void;
1818
}

‎client/src/components/ui/InputText/InputText.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
2929
showLoader = false,
3030
dataTest = 'InputText',
3131
shouldAutoFocusAndSelect = true,
32+
shouldAutoFocusAndSelectOnLabelChange,
3233
...rest
3334
},
3435
ref,
@@ -63,7 +64,14 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
6364
}
6465
inputRef.current.focus();
6566
inputRef.current.select();
66-
}, [inputProps.ref, shouldAutoFocusAndSelect]);
67+
}, [
68+
inputProps.ref,
69+
shouldAutoFocusAndSelect,
70+
// eslint-disable-next-line react-hooks/exhaustive-deps
71+
...(shouldAutoFocusAndSelectOnLabelChange
72+
? [shouldAutoFocusAndSelectOnLabelChange, label]
73+
: []),
74+
]);
6775

6876
return (
6977
<div className={cx(styles.root, styles[`variant--${variant}`], className)}>

‎client/src/components/ui/InputText/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default interface InputTextProps {
2020
onFocus?: FocusEventHandler<HTMLInputElement>;
2121
placeholder?: string;
2222
shouldAutoFocusAndSelect?: boolean;
23+
shouldAutoFocusAndSelectOnLabelChange?: boolean;
2324
showLoader?: boolean;
2425
suffix?: string;
2526
suffixClassName?: string;

0 commit comments

Comments
 (0)