diff --git a/packages/react-params/src/Param/BaseBytes.tsx b/packages/react-params/src/Param/BaseBytes.tsx index 311acd8984..5abfa12252 100644 --- a/packages/react-params/src/Param/BaseBytes.tsx +++ b/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 { @@ -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(() => ({ 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 && ( )} + {isAddress && ( + + )} ); } -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; + } +`);