Display IdentityIcon when ss58 address in Bytes (#6351)

packages/react-params/src/Param/BaseBytes.tsx

@@ -5,8 +5,9 @@ import type { TypeDef } from '@polkadot/types/types';
 import type { RawParam, RawParamOnChange, RawParamOnEnter, RawParamOnEscape, Size } from '../types';
 
 import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
 
-import { CopyButton, Input } from '@polkadot/react-components';
+import { CopyButton, IdentityIcon, Input } from '@polkadot/react-components';
 import { compactAddLength, hexToU8a, isAscii, isHex, isU8a, stringToU8a, u8aToHex, u8aToString } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
@@ -34,30 +35,36 @@ interface Props {
   withLength?: boolean;
 }
 
+interface Validity {
+  isAddress: boolean;
+  isValid: boolean;
+  lastValue?: Uint8Array;
+}
+
 const defaultValidate = (): boolean =>
   true;
 
-function convertInput (value: string): [boolean, Uint8Array] {
+function convertInput (value: string): [boolean, boolean, Uint8Array] {
   if (value === '0x') {
-    return [true, new Uint8Array([])];
+    return [true, false, new Uint8Array([])];
   } else if (value.startsWith('0x')) {
     try {
-      return [true, hexToU8a(value)];
+      return [true, false, hexToU8a(value)];
     } catch (error) {
-      return [false, new Uint8Array([])];
+      return [false, false, new Uint8Array([])];
     }
   }
 
   // maybe it is an ss58?
   try {
-    return [true, decodeAddress(value)];
+    return [true, true, decodeAddress(value)];
   } catch (error) {
     // we continue
   }
 
   return isAscii(value)
-    ? [true, stringToU8a(value)]
-    : [value === '0x', new Uint8Array([])];
+    ? [true, false, stringToU8a(value)]
+    : [value === '0x', false, new Uint8Array([])];
 }
 
 function BaseBytes ({ asHex, children, className = '', defaultValue: { value }, isDisabled, isError, label, length = -1, onChange, onEnter, onEscape, size = 'full', validate = defaultValidate, withCopy, withLabel, withLength }: Props): React.ReactElement<Props> {
@@ -71,11 +78,11 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
           : u8aToHex(value as Uint8Array, isDisabled ? 256 : -1)
       : undefined
   );
-  const [isValid, setIsValid] = useState(false);
+  const [{ isAddress, isValid, lastValue }, setValidity] = useState<Validity>(() => ({ isAddress: false, isValid: false }));
 
   const _onChange = useCallback(
     (hex: string): void => {
-      let [isValid, value] = convertInput(hex);
+      let [isValid, isAddress, value] = convertInput(hex);
 
       isValid = isValid && validate(value) && (
         length !== -1
@@ -94,7 +101,7 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
           : value
       });
 
-      setIsValid(isValid);
+      setValidity({ isAddress, isValid, lastValue: value });
     },
     [asHex, length, onChange, validate, withLength]
   );
@@ -120,9 +127,25 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
         {withCopy && (
           <CopyButton value={defaultValue} />
         )}
+        {isAddress && (
+          <IdentityIcon
+            className='ui--InputAddressSimpleIcon'
+            size={32}
+            value={lastValue}
+          />
+        )}
       </Input>
     </Bare>
   );
 }
 
-export default React.memo(BaseBytes);
+export default React.memo(styled(BaseBytes)`
+  .ui--InputAddressSimpleIcon {
+    background: #eee;
+    border: 1px solid #888;
+    border-radius: 50%;
+    left: -16px;
+    position: absolute;
+    top: 8px;
+  }
+`);