feat: make prepend symbol non selectable

cowprotocol · Jan 2, 2025 · abb823f · abb823f
1 parent ed82912
commit abb823f
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 43 deletions.
diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx
@@ -48,7 +48,6 @@ export const CurrencyInputBox = styled.div`
 
   > div {
     display: flex;
-    flex-flow: row wrap;
     align-items: center;
     color: inherit;
   }

diff --git a/apps/cowswap-frontend/src/legacy/components/NumericalInput/index.tsx b/apps/cowswap-frontend/src/legacy/components/NumericalInput/index.tsx
@@ -3,27 +3,39 @@ import React from 'react'
 import { escapeRegExp } from '@cowprotocol/common-utils'
 import { UI } from '@cowprotocol/ui'
 
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 
 import { autofocus } from 'common/utils/autofocus'
 
-const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
+const textStyle = css<{ error?: boolean; fontSize?: string }>`
   color: ${({ error }) => (error ? `var(${UI.COLOR_DANGER})` : 'inherit')};
+  font-size: ${({ fontSize }) => fontSize ?? '28px'};
+  font-weight: 500;
+`
+
+const PrependSymbol = styled.span<{ error?: boolean; fontSize?: string }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  user-select: none;
+  ${textStyle}
+`
+
+const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
+  ${textStyle}
   width: 0;
   position: relative;
-  font-weight: 500;
   outline: none;
   border: none;
   flex: 1 1 auto;
   background-color: var(${UI.COLOR_PAPER});
-  font-size: ${({ fontSize }) => fontSize ?? '28px'};
-  text-align: ${({ align }) => align && align};
+  text-align: ${({ align }) => align || 'right'};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0px;
   appearance: textfield;
-  text-align: right;
 
   ::-webkit-search-decoration {
     -webkit-appearance: none;
@@ -70,41 +82,48 @@ export const Input = React.memo(function InnerInput({
   }
 
   return (
-    <StyledInput
-      {...rest}
-      value={prependSymbol && value ? prependSymbol + value : value}
-      readOnly={readOnly}
-      onFocus={(event) => {
-        autofocus(event)
-        onFocus?.(event)
-      }}
-      onChange={(event) => {
-        if (prependSymbol) {
-          const value = event.target.value
-
-          // cut off prepended symbol
-          const formattedValue = value.toString().includes(prependSymbol)
-            ? value.toString().slice(1, value.toString().length + 1)
-            : value
-
-          // replace commas with periods, because uniswap exclusively uses period as the decimal separator
-          enforcer(formattedValue.replace(/,/g, '.'))
-        } else {
-          enforcer(event.target.value.replace(/,/g, '.'))
-        }
-      }}
-      // universal input options
-      inputMode="decimal"
-      autoComplete="off"
-      autoCorrect="off"
-      // text-specific options
-      type={type || 'text'}
-      pattern="^[0-9]*[.,]?[0-9]*$"
-      placeholder={placeholder || '0.0'}
-      minLength={1}
-      maxLength={32}
-      spellCheck="false"
-    />
+    <>
+      {prependSymbol && (
+        <PrependSymbol error={rest.error} fontSize={rest.fontSize}>
+          {prependSymbol}
+        </PrependSymbol>
+      )}
+      <StyledInput
+        {...rest}
+        value={value}
+        readOnly={readOnly}
+        onFocus={(event) => {
+          autofocus(event)
+          onFocus?.(event)
+        }}
+        onChange={(event) => {
+          if (prependSymbol) {
+            const value = event.target.value
+
+            // cut off prepended symbol
+            const formattedValue = value.toString().includes(prependSymbol)
+              ? value.toString().slice(1, value.toString().length + 1)
+              : value
+
+            // replace commas with periods, because uniswap exclusively uses period as the decimal separator
+            enforcer(formattedValue.replace(/,/g, '.'))
+          } else {
+            enforcer(event.target.value.replace(/,/g, '.'))
+          }
+        }}
+        // universal input options
+        inputMode="decimal"
+        autoComplete="off"
+        autoCorrect="off"
+        // text-specific options
+        type={type || 'text'}
+        pattern="^[0-9]*[.,]?[0-9]*$"
+        placeholder={placeholder || '0.0'}
+        minLength={1}
+        maxLength={32}
+        spellCheck="false"
+      />
+    </>
   )
 })
 

diff --git a/apps/cowswap-frontend/src/modules/limitOrders/containers/RateInput/styled.ts b/apps/cowswap-frontend/src/modules/limitOrders/containers/RateInput/styled.ts
@@ -82,7 +82,7 @@ export const Body = styled.div`
   justify-content: space-between;
   width: 100%;
   max-width: 100%;
-  gap: 8px;
+  gap: 0;
   padding: 12px 0 4px;
   color: inherit;
 `
@@ -109,6 +109,7 @@ export const CurrencyToggleGroup = styled.div`
   align-items: center;
   background: transparent;
   overflow: hidden;
+  margin: 0 0 0 8px;
 `
 
 export const ActiveCurrency = styled.button<{ $active?: boolean }>`