Number input component

dapp/package.json

@@ -22,7 +22,8 @@
     "@ledgerhq/wallet-api-client-react": "^1.1.2",
     "framer-motion": "^10.16.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-number-format": "^5.3.1"
   },
   "devDependencies": {
     "@thesis-co/eslint-config": "^0.6.1",

dapp/src/components/shared/CurrencyBalance/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react"
-import { Box, useMultiStyleConfig } from "@chakra-ui/react"
+import { Box, useMultiStyleConfig, TextProps } from "@chakra-ui/react"
 import { formatTokenAmount, toLocaleString } from "../../../utils"
 import { CurrencyType } from "../../../types"
 import { CURRENCIES_BY_TYPE } from "../../../constants"
@@ -11,7 +11,7 @@ export type CurrencyBalanceProps = {
   desiredDecimals?: number
   size?: string
   variant?: "greater-balance"
-}
+} & TextProps
 
 export function CurrencyBalance({
   currencyType,
@@ -20,6 +20,7 @@ export function CurrencyBalance({
   desiredDecimals = 2,
   size,
   variant,
+  ...textProps
 }: CurrencyBalanceProps) {
   const styles = useMultiStyleConfig("CurrencyBalance", { size, variant })
 
@@ -38,10 +39,10 @@ export function CurrencyBalance({
 
   return (
     <Box>
-      <Box as="span" __css={styles.balance}>
+      <Box as="span" __css={styles.balance} {...textProps}>
         {balance}
       </Box>
-      <Box as="span" __css={styles.symbol}>
+      <Box as="span" __css={styles.symbol} {...textProps}>
         {currency.symbol}
       </Box>
     </Box>

dapp/src/components/shared/NumberFormatInput/index.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+import { NumericFormat } from "react-number-format"
+import { InputProps, chakra, useMultiStyleConfig } from "@chakra-ui/react"
+
+const ChakraWrapper = chakra(NumericFormat)
+
+export type NumberFormatInputValues = {
+  formattedValue: string
+  value: string
+  floatValue: number
+}
+
+type NumberFormatInputProps = {
+  onValueChange: (values: NumberFormatInputValues) => void
+  decimalScale?: number
+} & InputProps
+
+/**
+ * Component is from the Threshold Network React Components repository.
+ * It has been used because it supports the thousandth separator
+ * and can be easily integrated with Chakra UI.
+ *
+ * More info:
+ * https://github.com/threshold-network/components/blob/main/src/components/NumberFormatInput/index.tsx
+ */
+const NumberFormatInput = React.forwardRef<
+  HTMLInputElement,
+  NumberFormatInputProps
+>((props, ref) => {
+  const { field: css } = useMultiStyleConfig("Input", props)
+
+  const { decimalScale, isDisabled, isInvalid, ...restProps } = props
+
+  return (
+    <ChakraWrapper
+      allowLeadingZeros={false}
+      thousandSeparator
+      decimalScale={decimalScale}
+      __css={css}
+      disabled={isDisabled}
+      aria-invalid={isInvalid}
+      getInputRef={ref}
+      {...restProps}
+    />
+  )
+})
+
+export default NumberFormatInput

dapp/src/components/shared/TokenBalanceInput/index.tsx

@@ -0,0 +1,170 @@
+import React, { useMemo } from "react"
+import {
+  Box,
+  Button,
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  Icon,
+  InputGroup,
+  InputProps,
+  InputRightElement,
+  useMultiStyleConfig,
+} from "@chakra-ui/react"
+import { fixedPointNumberToString } from "../../../utils"
+import { CurrencyType } from "../../../types"
+import { CURRENCIES_BY_TYPE } from "../../../constants"
+import NumberFormatInput, {
+  NumberFormatInputValues,
+} from "../NumberFormatInput"
+import { CurrencyBalance } from "../CurrencyBalance"
+import { AlertInfo } from "../../../static/icons"
+
+const VARIANT = "balance"
+
+type HelperErrorTextProps = {
+  errorMsgText?: string | JSX.Element
+  hasError?: boolean
+  helperText?: string | JSX.Element
+}
+
+function HelperErrorText({
+  helperText,
+  errorMsgText,
+  hasError,
+}: HelperErrorTextProps) {
+  if (hasError) {
+    return (
+      <FormErrorMessage>
+        {errorMsgText || "Please enter a valid value"}
+      </FormErrorMessage>
+    )
+  }
+
+  if (helperText) {
+    return (
+      <FormHelperText>
+        <Icon as={AlertInfo} />
+        {helperText}
+      </FormHelperText>
+    )
+  }
+
+  return null
+}
+
+type FiatCurrencyBalanceProps = {
+  fiatAmount?: string
+  fiatCurrencyType?: CurrencyType
+}
+
+function FiatCurrencyBalance({
+  fiatAmount,
+  fiatCurrencyType,
+}: FiatCurrencyBalanceProps) {
+  const styles = useMultiStyleConfig("Form")
+  const { fontWeight } = styles.helperText
+
+  if (fiatAmount && fiatCurrencyType) {
+    return (
+      <CurrencyBalance
+        currencyType={fiatCurrencyType}
+        amount={fiatAmount}
+        shouldBeFormatted={false}
+        fontWeight={fontWeight as string}
+        size="sm"
+      />
+    )
+  }
+
+  return null
+}
+
+type TokenBalanceInputProps = {
+  amount?: string
+  currencyType: CurrencyType
+  tokenBalance: string | number
+  placeholder?: string
+  size?: "lg" | "md"
+  setAmount: (value: string) => void
+} & InputProps &
+  HelperErrorTextProps &
+  FiatCurrencyBalanceProps
+
+export default function TokenBalanceInput({
+  amount,
+  currencyType,
+  tokenBalance,
+  placeholder,
+  size = "lg",
+  setAmount,
+  errorMsgText,
+  helperText,
+  hasError = false,
+  fiatAmount,
+  fiatCurrencyType,
+  ...inputProps
+}: TokenBalanceInputProps) {
+  const styles = useMultiStyleConfig("TokenBalanceInput", { size })
+
+  const tokenBalanceAmount = useMemo(
+    () =>
+      fixedPointNumberToString(
+        BigInt(tokenBalance || 0),
+        CURRENCIES_BY_TYPE[currencyType].decimals,
+      ),
+    [currencyType, tokenBalance],
+  )
+
+  return (
+    <FormControl isInvalid={hasError} isDisabled={inputProps.isDisabled}>
+      <FormLabel htmlFor={inputProps.name} size={size}>
+        <Box __css={styles.labelContainer}>
+          Amount
+          <Box __css={styles.balanceContainer}>
+            <Box as="span" __css={styles.balance}>
+              Balance
+            </Box>
+            <CurrencyBalance
+              size={size === "lg" ? "md" : "sm"}
+              amount={tokenBalance}
+              currencyType={currencyType}
+            />
+          </Box>
+        </Box>
+      </FormLabel>
+      <InputGroup variant={VARIANT}>
+        <NumberFormatInput
+          size={size}
+          value={amount}
+          variant={VARIANT}
+          isInvalid={hasError}
+          placeholder={placeholder}
+          onValueChange={(values: NumberFormatInputValues) =>
+            setAmount(values.value)
+          }
+          {...inputProps}
+        />
+        <InputRightElement>
+          <Button h="70%" onClick={() => setAmount(tokenBalanceAmount)}>
+            Max
+          </Button>
+        </InputRightElement>
+      </InputGroup>
+      <HelperErrorText
+        helperText={helperText}
+        errorMsgText={errorMsgText}
+        hasError={hasError}
+      />
+      {!hasError && !helperText && (
+        <FormHelperText>
+          <FiatCurrencyBalance
+            fiatAmount={fiatAmount}
+            fiatCurrencyType={fiatCurrencyType}
+          />
+        </FormHelperText>
+      )}
+    </FormControl>
+  )
+}

dapp/src/constants/currency.ts

@@ -27,5 +27,5 @@ export const CURRENCY_ID_ETHEREUM =
 export const CURRENCIES_BY_TYPE: Record<CurrencyType, Currency> = {
   bitcoin: BITCOIN,
   ethereum: ETHEREUM,
-  usd: ETHEREUM,
+  usd: USD,
 }

dapp/src/theme/Form.ts

@@ -0,0 +1,21 @@
+import { formAnatomy as parts } from "@chakra-ui/anatomy"
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys)
+
+const baseStyleHelperText = defineStyle({
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  fontWeight: "medium",
+  color: "grey.500",
+})
+
+const baseStyle = definePartsStyle({
+  helperText: baseStyleHelperText,
+})
+
+const Form = defineMultiStyleConfig({ baseStyle })
+
+export default Form

dapp/src/theme/FormError.ts

@@ -0,0 +1,19 @@
+import { defineStyle, createMultiStyleConfigHelpers } from "@chakra-ui/react"
+
+import { formErrorAnatomy as parts } from "@chakra-ui/anatomy"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys)
+
+const baseStyleText = defineStyle({
+  fontWeight: "medium",
+  color: "red.400",
+})
+
+const baseStyle = definePartsStyle({
+  text: baseStyleText,
+})
+
+const FormError = defineMultiStyleConfig({ baseStyle })
+
+export default FormError

dapp/src/theme/FormLabel.ts

@@ -0,0 +1,25 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+
+const baseStyle = defineStyle({
+  fontWeight: "semibold",
+  color: "grey.700",
+})
+
+const sizeMd = defineStyle({
+  fontSize: "sm",
+  lineHeight: "sm",
+})
+
+const sizeLg = defineStyle({
+  fontSize: "md",
+  lineHeight: "md",
+})
+
+const sizes = {
+  md: sizeMd,
+  lg: sizeLg,
+}
+
+const FormLabel = defineStyleConfig({ baseStyle, sizes })
+
+export default FormLabel

dapp/src/theme/Input.ts

@@ -0,0 +1,44 @@
+import { inputAnatomy as parts } from "@chakra-ui/anatomy"
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys)
+
+const variantBalanceField = defineStyle({
+  border: "1px solid",
+  borderColor: "gold.300",
+  color: "grey.700",
+  fontWeight: "bold",
+  bg: "opacity.white.5",
+  paddingRight: 20,
+  // TODO: Set the color correctly without using the chakra variable.
+  caretColor: "var(--chakra-colors-brand-400)",
+
+  _placeholder: {
+    color: "grey.300",
+    fontWeight: "medium",
+  },
+
+  _invalid: {
+    color: "red.400",
+  },
+})
+
+const variantBalanceElement = defineStyle({
+  h: "100%",
+  width: 14,
+  mr: 2,
+})
+
+const variantBalance = definePartsStyle({
+  field: variantBalanceField,
+  element: variantBalanceElement,
+})
+
+const variants = {
+  balance: variantBalance,
+}
+
+const Input = defineMultiStyleConfig({ variants })
+
+export default Input