diff --git a/packages/apps/public/locales/en/react-components.json b/packages/apps/public/locales/en/react-components.json index 9538bd03dd..dcc699fab5 100644 --- a/packages/apps/public/locales/en/react-components.json +++ b/packages/apps/public/locales/en/react-components.json @@ -1,4 +1,5 @@ { + "(enter value in standard units)": "(enter value in standard units)", "0.1x voting balance, no lockup period": "0.1x voting balance, no lockup period", "": "", "Add identity judgment": "Add identity judgment", diff --git a/packages/apps/public/locales/en/translation.json b/packages/apps/public/locales/en/translation.json index 624ba62e1f..55e4aa09d1 100644 --- a/packages/apps/public/locales/en/translation.json +++ b/packages/apps/public/locales/en/translation.json @@ -1,6 +1,7 @@ { "1000": "", " This update includes chain metadata and chain properties.": "", + "(enter value in standard units)": "(enter value in standard units)", "//hard": "", "//hard///password": "", "//hard/soft": "", diff --git a/packages/react-components/src/InputBalance.tsx b/packages/react-components/src/InputBalance.tsx index c15ca8af8a..f1f15a8cf5 100644 --- a/packages/react-components/src/InputBalance.tsx +++ b/packages/react-components/src/InputBalance.tsx @@ -4,11 +4,14 @@ import type { BN } from '@polkadot/util'; import type { SiDef } from '@polkadot/util/types'; -import React, { useMemo } from 'react'; +import React, { useMemo, useState } from 'react'; import { formatBalance, isUndefined } from '@polkadot/util'; +import { TokenUnit } from './InputConsts/units.js'; import InputNumber from './InputNumber.js'; +import { styled } from './styled.js'; +import { useTranslation } from './translate.js'; interface Props { autoFocus?: boolean; @@ -64,11 +67,17 @@ function reformat (value?: string | BN | null, isDisabled = false, siDecimals?: } function InputBalance ({ autoFocus, children, className = '', defaultValue: inDefault, isDisabled, isError, isFull, isLoading, isWarning, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siSymbol, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement { + const { t } = useTranslation(); + const { defaultValue, siDefault } = useMemo( () => reformat(inDefault, isDisabled, siDecimals), [inDefault, isDisabled, siDecimals] ); + const [si] = useState(() => + siDefault || formatBalance.findSi('-') + ); + return ( + {labelExtra} + {!!si && (siSymbol || TokenUnit.abbr) && +

+ {t('(enter value in standard units)')} +

+ } + + } maxValue={maxValue} onChange={onChange} onEnter={onEnter} @@ -102,4 +120,15 @@ function InputBalance ({ autoFocus, children, className = '', defaultValue: inDe ); } +const LabelledExtra = styled.div` + display: flex; + align-items: center; + gap: 0.1rem; + + p { + font-size: var(--font-size-tiny); + font-weight: var(--font-weight-normal); + } +`; + export default React.memo(InputBalance); diff --git a/packages/react-components/src/Labelled.tsx b/packages/react-components/src/Labelled.tsx index ce75ebaa41..6fa2de2634 100644 --- a/packages/react-components/src/Labelled.tsx +++ b/packages/react-components/src/Labelled.tsx @@ -34,7 +34,8 @@ function Labelled ({ children, className = '', isFull, isHidden, isOuter, isSmal + } + {labelExtra &&
{labelExtra}
}
{children} diff --git a/packages/react-components/src/Tooltip.tsx b/packages/react-components/src/Tooltip.tsx index 42650e9892..5f8e335cbe 100644 --- a/packages/react-components/src/Tooltip.tsx +++ b/packages/react-components/src/Tooltip.tsx @@ -60,7 +60,7 @@ function Tooltip ({ children, className = '', isClickable = false, place, text, // upgraded to latest, we probably don't want to start digging... const StyledReactTooltip = styled(ReactTooltip as unknown as React.ComponentType)` .tooltipSpacer { - padding: 0.375rem; + padding-bottom: 0.1rem; } > div {