Remove si dropdown (#8787)

packages/react-components/src/InputNumber.tsx

@@ -5,13 +5,12 @@ import type { ApiPromise } from '@polkadot/api';
 import type { SiDef } from '@polkadot/util/types';
 import type { BitLength } from './types';
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import { useApi } from '@polkadot/react-hooks';
 import { BN, BN_ONE, BN_TEN, BN_TWO, BN_ZERO, formatBalance, isBn, isUndefined } from '@polkadot/util';
 
-import Dropdown from './Dropdown';
 import Input, { KEYS_PRE } from './Input';
 import { useTranslation } from './translate';
 
@@ -71,15 +70,6 @@ function getRegex (isDecimal: boolean, isSigned: boolean): RegExp {
   );
 }
 
-function getSiOptions (symbol: string, decimals?: number): { text: string; value: string }[] {
-  return formatBalance.getOptions(decimals).map(({ power, text, value }): { text: string; value: string } => ({
-    text: power === 0
-      ? symbol
-      : text,
-    value
-  }));
-}
-
 function getSiPowers (si: SiDef | null, decimals?: number): [BN, number, number] {
   if (!si) {
     return [BN_ZERO, 0, 0];
@@ -174,7 +164,7 @@ function getValues (api: ApiPromise, value: BN | string = BN_ZERO, si: SiDef | n
 function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, className = '', defaultValue, isDecimal, isFull, isSi, isDisabled, isError = false, isLoading, isWarning, isSigned = false, isZeroable = true, label, labelExtra, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siDefault, siSymbol, value: propsValue }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const [si, setSi] = useState<SiDef | null>(() =>
+  const [si] = useState<SiDef | null>(() =>
     isSi
       ? siDefault || formatBalance.findSi('-')
       : null
@@ -184,11 +174,6 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
   );
   const [isPreKeyDown, setIsPreKeyDown] = useState(false);
 
-  const siOptions = useMemo(
-    () => getSiOptions(siSymbol || TokenUnit.abbr, siDecimals),
-    [siDecimals, siSymbol]
-  );
-
   useEffect((): void => {
     onChange && onChange(isValid ? valueBn : undefined);
   }, [isValid, onChange, valueBn]);
@@ -249,16 +234,6 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
     [isDecimal, isSigned, si]
   );
 
-  const _onSelectSiUnit = useCallback(
-    (siUnit: string): void => {
-      const si = formatBalance.findSi(siUnit);
-
-      setSi(si);
-      _onChangeWithSi(value, si);
-    },
-    [_onChangeWithSi, value]
-  );
-
   // Same as the number of digits, which means it can still overflow, i.e.
   // for u8 we allow 3, which could be 999 (however 2 digits will limit to only 99,
   // so this is more-or-less the lesser of evils without a max-value check)
@@ -268,7 +243,6 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
     <Input
       autoFocus={autoFocus}
       className={`ui--InputNumber${isDisabled ? ' isDisabled' : ''} ${className}`}
-      isAction={isSi}
       isDisabled={isDisabled}
       isError={!isValid || isError}
       isFull={isFull}
@@ -291,22 +265,10 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
       type='text'
       value={value}
     >
-      {!!si && (
-        <Dropdown
-          defaultValue={
-            isDisabled && siDefault
-              ? siDefault.value
-              : si.value
-          }
-          dropdownClassName='ui--SiDropdown'
-          isButton
-          onChange={
-            isDisabled
-              ? undefined
-              : _onSelectSiUnit
-          }
-          options={siOptions}
-        />
+      {si && (
+        <div className='siUnit'>
+          {siSymbol || TokenUnit.abbr}
+        </div>
       )}
       {children}
     </Input>
@@ -314,18 +276,13 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
 }
 
 export default React.memo(styled(InputNumber)`
-  &.isDisabled {
-    .ui--SiDropdown {
-      background: transparent;
-      border-color: var(--border-input) !important;
-      border-style: dashed;
-      color: #666 !important;
-      cursor: default !important;
-
-      .dropdown.icon {
-        display: none;
-      }
-    }
+  .siUnit {
+    font-size: var(--font-size-tiny);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-weight: var(--font-weight-bold);
+    right: 1.25rem;
   }
 
   .ui.buttons+.ui--Toggle.isOverlay {