Allow ascii inputs on Bytes fields (#3908)

* Allow ascii inputs on Bytes fields

* Remove help

package.json

@@ -85,7 +85,7 @@
     "@babel/register": "^7.12.1",
     "@babel/runtime": "^7.12.1",
     "@pinata/sdk": "^1.1.11",
-    "@polkadot/dev": "^0.58.4",
+    "@polkadot/dev": "^0.59.1",
     "@polkadot/ts": "^0.3.49",
     "@types/bn.js": "^4.11.6",
     "@types/chart.js": "^2.9.25",

packages/apps-electron/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@babel/core": "^7.12.3",
     "@babel/polyfill": "^7.12.1",
-    "@polkadot/dev": "^0.58.4",
+    "@polkadot/dev": "^0.59.1",
     "@polkadot/react-components": "0.63.2-7",
     "electron-log": "^4.2.4",
     "electron-updater": "^4.3.5"

packages/apps/package.json

@@ -18,7 +18,7 @@
     "@babel/runtime": "^7.12.1",
     "@polkadot/apps-config": "0.63.2-7",
     "@polkadot/apps-routing": "0.63.2-7",
-    "@polkadot/dev": "^0.58.4",
+    "@polkadot/dev": "^0.59.1",
     "@polkadot/react-api": "0.63.2-7",
     "@polkadot/react-components": "0.63.2-7",
     "@polkadot/react-hooks": "0.63.2-7",

packages/react-api/package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "@babel/runtime": "^7.12.1",
     "@polkadot/api": "^2.3.2-2",
-    "@polkadot/extension-dapp": "^0.35.0-beta.25",
+    "@polkadot/extension-dapp": "^0.35.0-beta.30",
     "rxjs-compat": "^6.6.3"
   }
 }

packages/react-components/src/Labelled.tsx

@@ -51,6 +51,7 @@ export default React.memo(styled(Labelled)`
     position: relative;
 
     .withEllipsis {
+      display: inline;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

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

@@ -7,9 +7,10 @@ import { RawParam, RawParamOnChange, RawParamOnEnter, RawParamOnEscape, Size } f
 import React, { useCallback, useState } from 'react';
 import { Compact } from '@polkadot/types';
 import { Input } from '@polkadot/react-components';
-import { hexToU8a, isAscii, isHex, isU8a, u8aToHex, u8aToString } from '@polkadot/util';
+import { hexToU8a, isAscii, isHex, isU8a, stringToU8a, u8aToHex, u8aToString } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
+import { useTranslation } from '../translate';
 import Bare from './Bare';
 
 interface Props {
@@ -36,11 +37,14 @@ const defaultValidate = (): boolean =>
   true;
 
 function convertInput (value: string): [boolean, Uint8Array] {
-  // try hex conversion
-  try {
-    return [true, hexToU8a(value)];
-  } catch (error) {
-    // we continue...
+  if (value === '0x') {
+    return [true, new Uint8Array([])];
+  } else if (value.startsWith('0x')) {
+    try {
+      return [true, hexToU8a(value)];
+    } catch (error) {
+      return [false, new Uint8Array([])];
+    }
   }
 
   // maybe it is an ss58?
@@ -50,10 +54,13 @@ function convertInput (value: string): [boolean, Uint8Array] {
     // we continue
   }
 
-  return [value === '0x', new Uint8Array([])];
+  return isAscii(value)
+    ? [true, stringToU8a(value)]
+    : [value === '0x', new Uint8Array([])];
 }
 
 function BaseBytes ({ asHex, children, className = '', defaultValue: { value }, isDisabled, isError, label, length = -1, onChange, onEnter, onEscape, size = 'full', validate = defaultValidate, withLabel, withLength }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [defaultValue] = useState(
     value
       ? isDisabled && isU8a(value) && isAscii(value)
@@ -103,7 +110,7 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
         onChange={_onChange}
         onEnter={onEnter}
         onEscape={onEscape}
-        placeholder='0x...'
+        placeholder={t<string>('0x prefixed hex, e.g. 0x1234 or ascii data')}
         type='text'
         withEllipsis
         withLabel={withLabel}

packages/react-params/src/initValue.ts

@@ -4,7 +4,7 @@
 import { TypeDef, TypeDefInfo } from '@polkadot/types/types';
 
 import { registry } from '@polkadot/react-api';
-import { Bytes, Raw, createType, getTypeDef } from '@polkadot/types';
+import { Raw, createType, getTypeDef } from '@polkadot/types';
 import { BN_ZERO, isBn } from '@polkadot/util';
 
 const warnList: string[] = [];
@@ -63,6 +63,9 @@ export default function getInitValue (def: TypeDef): unknown {
     case 'bool':
       return false;
 
+    case 'Bytes':
+      return undefined;
+
     case 'String':
     case 'Text':
       return '';
@@ -76,9 +79,6 @@ export default function getInitValue (def: TypeDef): unknown {
     case 'VoteThreshold':
       return 0;
 
-    case 'Bytes':
-      return new Bytes(registry);
-
     case 'BlockHash':
     case 'CodeHash':
     case 'Hash':