From 204332977b993df26044c4c7b2624a1d2afbd5b0 Mon Sep 17 00:00:00 2001
From: Jimmy Hardwick <jwhardwick@gmail.com>
Date: Thu, 20 Jun 2024 10:44:17 +1000
Subject: [PATCH] feat:[CM-696] Decimal keyboard on mobile for Swap/Bridge
 (#1840)

---
 .../components/FormComponents/SelectInput/SelectInput.tsx    | 5 ++++-
 .../FormComponents/TextInputForm/TextInputForm.tsx           | 5 +++++
 .../widgets-lib/src/widgets/bridge/components/BridgeForm.tsx | 1 +
 .../widgets-lib/src/widgets/swap/components/SwapForm.tsx     | 2 ++
 4 files changed, 12 insertions(+), 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
index 8845651ab1..4286c3efc4 100644
--- 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
index 67df78fc7d..65bb879cfe 100644
--- 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
index 5610d3fcc5..61181c0e49 100644
--- 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
index 4e2a699c0c..38ab4eb5e0 100644
--- 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"