feat:[CM-696] Decimal keyboard on mobile for Swap/Bridge (#1840)

immutable · Jun 20, 2024 · 2043329 · 2043329
1 parent 3df388a
commit 2043329
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 1 deletion.
diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx
@@ -7,7 +7,7 @@ import {
   selectStyle,
 } from './SelectInputStyles';
 import { SelectForm } from '../SelectForm/SelectForm';
-import { TextInputForm, TextInputType } from '../TextInputForm/TextInputForm';
+import { InputMode, TextInputForm, TextInputType } from '../TextInputForm/TextInputForm';
 import { CoinSelectorOptionProps } from '../../CoinSelector/CoinSelectorOption';
 
 interface SelectInputProps {
@@ -20,6 +20,7 @@ interface SelectInputProps {
   textInputSubtext?: string;
   textInputErrorMessage?: string;
   textInputType?: TextInputType;
+  testInputMode?: InputMode;
   selectSubtext?: string;
   selectErrorMessage?: string;
   coinSelectorHeading: string;
@@ -50,6 +51,7 @@ export function SelectInput({
   textInputTextAlign,
   textInputSubtext,
   textInputErrorMessage,
+  testInputMode,
   selectTextAlign,
   selectSubtext,
   selectErrorMessage,
@@ -96,6 +98,7 @@ export function SelectInput({
           onTextInputFocus={onTextInputFocus}
           maxButtonClick={textInputMaxButtonClick}
           disabled={textInputDisabled}
+          inputMode={testInputMode}
         />
       </Box>
     </Box>

diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.tsx
@@ -10,6 +10,7 @@ interface TextInputFormProps {
   type?: TextInputType;
   errorMessage?: string;
   disabled?: boolean;
+  inputMode?: InputMode;
   validator: (value: string) => boolean;
   onTextInputChange: (value: string) => void;
   onTextInputBlur?: (value: string) => void;
@@ -20,6 +21,8 @@ interface TextInputFormProps {
 
 export type TextInputType = 'text' | 'number';
 
+export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+
 export function TextInputForm({
   testId,
   value,
@@ -35,6 +38,7 @@ export function TextInputForm({
   subtext,
   maxButtonClick,
   disabled,
+  inputMode,
 }: TextInputFormProps) {
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>, previousValue: string) => {
     let inputValue = event.target.value;
@@ -84,6 +88,7 @@ export function TextInputForm({
         onChange={(event) => handleOnChange(event, value)}
         sizeVariant="large"
         value={value}
+        inputMode={inputMode}
         validationStatus={errorMessage ? 'error' : 'success'}
         placeholder={placeholder}
         onBlur={handleOnBlur}

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx
@@ -327,6 +327,7 @@ export function BridgeForm(props: BridgeFormProps) {
               onTextInputChange={(value) => handleBridgeAmountChange(value)}
               onTextInputEnter={submitBridgeValues}
               textAlign="right"
+              inputMode="decimal"
               errorMessage={t(amountError)}
             />
           </Box>

diff --git a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx
@@ -708,6 +708,7 @@ export function SwapForm({ data, theme }: SwapFromProps) {
               }
               selectTextAlign="left"
               textInputType="number"
+              testInputMode="decimal"
               textInputValue={fromAmount}
               textInputPlaceholder={t('views.SWAP.swapForm.from.inputPlaceholder')}
               textInputSubtext={`${t('views.SWAP.content.fiatPricePrefix')} 
@@ -764,6 +765,7 @@ export function SwapForm({ data, theme }: SwapFromProps) {
               options={tokensOptionsTo}
               selectTextAlign="left"
               textInputType="number"
+              testInputMode="decimal"
               textInputValue={toAmount}
               textInputPlaceholder={t('views.SWAP.swapForm.to.inputPlaceholder')}
               textInputTextAlign="right"