WIP: fix: amount field and max button

src/components/basic/Input/Input.js

@@ -69,7 +69,7 @@ const Input = ({
       target: { value },
     } = ev
 
-    if (justNumbers && value.match(/[^0-9,.]/)) return false
+    if (justNumbers && value.match(/[^0-9.]/)) return false
 
     let newValue = password ? value : value.toString().trim()
     if (mask && getMaskedValue) {

src/components/composed/Balance/Balance.js

@@ -28,6 +28,8 @@ const Balance = ({ balance, balanceLocked, exchangeRate, walletType }) => {
     return tokenBalances[walletType.name].token_info.token_ticker.string
   }
 
+  const cryptoDecimals = walletType.name === 'Bitcoin' ? 8 : 11
+
   const logo = () => {
     if (walletType.name === 'Mintlayer') {
       return <LogoRound />
@@ -55,7 +57,7 @@ const Balance = ({ balance, balanceLocked, exchangeRate, walletType }) => {
           className="balance-btc"
           data-testid="balance-paragraph"
         >
-          <span>{Format.BTCValue(balance)}</span> {symbol()}
+          <span>{Format.BTCValue(balance, cryptoDecimals)}</span> {symbol()}
         </p>
         <p
           className="balance-usd"

src/components/composed/CryptoField/CryptoField.css

@@ -0,0 +1,81 @@
+.crypto-fiat-field {
+  position: relative;
+  display: flex;
+  padding-bottom: 37px;
+  width: 100%;
+}
+
+.crypto-fiat-field-label {
+  display: flex;
+  width: 7.5rem;
+  font-size: 1.5rem;
+  justify-content: flex-start;
+  align-items: center;
+  word-break: break-all;
+}
+
+.fiat-field-input {
+  position: relative;
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.crypto-fiat-bottom-text {
+  position: absolute;
+  bottom: 8px;
+  left: 1.85rem;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.crypto-fiat-input {
+  width: 100%;
+}
+
+.crypto-fiat-input-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 87px;
+}
+
+.crypto-fiat-input-button.outline {
+  background: transparent;
+  border: 1px solid black;
+  color: black;
+}
+
+.crypto-fiat-switch-button {
+  position: absolute;
+  top: 18px;
+  right: 23px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.crypto-fiat-icon {
+  height: 30px;
+  width: auto;
+  margin-left: -5px;
+}
+
+.crypto-fiat-icon-reverse {
+  height: 30px;
+  width: auto;
+  transform: rotate(180deg);
+}
+
+.crypto-fiat-icon path,
+.crypto-fiat-icon-reverse path {
+  fill: black;
+}
+
+.current-value-type {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-left: 5px;
+}

src/components/composed/CryptoField/CryptoField.js

@@ -0,0 +1,146 @@
+import React, { useState, useContext } from 'react'
+import { Input } from '@BasicComponents'
+import { AccountContext, SettingsContext, TransactionContext } from '@Contexts'
+
+import './CryptoField.css'
+import { Format, NumbersHelper } from '@Helpers'
+import { AppInfo } from '@Constants'
+
+const CryptoField = ({
+  placeholder,
+  buttonTitle,
+  transactionData,
+  inputValue: value,
+  validity,
+  id,
+  changeValueHandle,
+  exchangeRate,
+  maxValueInToken,
+}) => {
+  const { walletType } = useContext(AccountContext)
+  const { networkType } = useContext(SettingsContext)
+  const { transactionMode } = useContext(TransactionContext)
+  const maxValue = NumbersHelper.floatStringToNumber(maxValueInToken)
+
+  // eslint-disable-next-line no-unused-vars
+  const [currentValueType, setCurrentValueType] = useState(
+    transactionData ? transactionData.tokenName : 'Token',
+  )
+  const isDelegationMode =
+    transactionMode === AppInfo.ML_TRANSACTION_MODES.DELEGATION &&
+    walletType.name === 'Mintlayer'
+
+  if (!transactionData) return null
+
+  console.log('inputValue < maxValue', value, maxValue)
+  console.log(value < maxValueInToken)
+
+  const { tokenName, fiatName } = transactionData
+  const inputExtraClasses = ['crypto-fiat-input']
+
+  const isTypeFiat = () => currentValueType === fiatName
+
+
+  const calculateFiatValue = (value) => {
+    if (!value) {
+      return Format.fiatValue(0)
+    }
+    const parsedValue = NumbersHelper.floatStringToNumber(value)
+    return Format.fiatValue(parsedValue * exchangeRate)
+  }
+
+  const bottomValue = calculateFiatValue(value)
+
+  const formattedBottomValue = `≈ ${
+    bottomValue ? bottomValue : Format.fiatValue(0)
+  } ${isTypeFiat() ? tokenName : fiatName}`
+
+  // Consider the correct format for 0,00 that might also be 0.00
+  const displayedBottomValue =
+    networkType === AppInfo.NETWORK_TYPES.TESTNET
+      ? ''
+      : formattedBottomValue
+
+  const maxButtonClickHandler = () => {
+    console.log('maxValue', maxValue)
+    changeValueHandle({
+      currency: currentValueType,
+      value: maxValue,
+    })
+  }
+
+  const changeHandler = ({ target: { value } }) => {
+    // remove non-numeric characters from the input without 3rd party libraries
+    const numericValue = value.replace(/[^0-9.]/g, '')
+
+    if (value !== numericValue) {
+      return
+    }
+
+    changeValueHandle({
+      currency: currentValueType,
+      value: numericValue,
+    })
+  }
+
+  return (
+    <div
+      className="crypto-fiat-field"
+      data-testid="crypto-fiat-field"
+    >
+      <div className="fiat-field-input">
+        <Input
+          id={id}
+          extraStyleClasses={inputExtraClasses}
+          placeholder={placeholder || Format.BTCValue(0)}
+          value={value}
+          onChangeHandle={changeHandler}
+          validity={validity}
+          justNumbers={true}
+        />
+
+        <button
+          className="crypto-fiat-switch-button"
+          data-testid="crypto-fiat-switch-button"
+          onClick={()=>{}}
+        >
+          {/* {networkType !== AppInfo.NETWORK_TYPES.TESTNET && (
+            <>
+              <ArrowIcon
+                className="crypto-fiat-icon-reverse"
+                data-testid="arrow-icon"
+              />
+              <ArrowIcon
+                className="crypto-fiat-icon"
+                data-testid="arrow-icon"
+              />
+            </>
+          )} */}
+
+          <span className="current-value-type">{currentValueType}</span>
+        </button>
+      </div>
+
+      <button
+        className={['btn', 'crypto-fiat-input-button', value < maxValueInToken ? 'outline' : ''].join(' ')}
+        onClick={maxButtonClickHandler}
+        disabled={isDelegationMode}
+      >
+        {buttonTitle}
+      </button>
+
+      {
+        displayedBottomValue && (
+          <p
+            className="crypto-fiat-bottom-text"
+            data-testid="crypto-fiat-bottom-text"
+          >
+            {displayedBottomValue}
+          </p>
+        )
+      }
+    </div>
+  )
+}
+
+export default CryptoField

src/components/composed/CryptoField/CryptoField.stories.js

@@ -0,0 +1,103 @@
+import React from 'react'
+import CryptoFiatField from './CryptoFiatField'
+
+export default {
+  title: 'Components/Composed/CryptoFiatField',
+  component: CryptoFiatField,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    placeholder: 'Placeholder',
+    buttonTitle: 'Button',
+  },
+  argTypes: {
+    placeholder: {
+      description: 'The contents of the field when empty',
+      type: 'string',
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      control: 'text',
+    },
+    buttonTitle: {
+      description: 'The contents of the button',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    transactionData: {
+      control: 'object',
+    },
+    inputValue: {
+      description: 'The contents of the field',
+      type: 'number',
+      table: {
+        type: {
+          summary: 'number',
+        },
+      },
+      control: 'number',
+    },
+    validity: {
+      description: 'Validity of the input',
+      type: { name: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+      },
+      control: {
+        type: 'select',
+        options: [undefined, true, false],
+      },
+    },
+    id: {
+      description: 'The id of the input',
+      type: 'string',
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      control: 'text',
+    },
+    changeValueHandle: {
+      control: 'func',
+    },
+  },
+}
+
+const Template = (args) => <CryptoFiatField {...args} />
+
+export const Empty = Template.bind({})
+Empty.args = {}
+
+export const Btc450 = Template.bind({})
+Btc450.args = {
+  transactionData: {
+    fiatName: 'USD',
+    tokenName: 'BTC',
+    exchangeRate: 22343.23,
+    maxValueInToken: 450,
+  },
+  inputValue: 450,
+}
+
+export const BtcSmall = Template.bind({})
+BtcSmall.args = {
+  transactionData: {
+    fiatName: 'USD',
+    tokenName: 'BTC',
+    exchangeRate: 1,
+    maxValueInToken: 450,
+  },
+  inputValue: 0.00000001,
+}