Display bytes as ascii (as available) when signing (#871)

* Display bytes as ascii (as available) when signing

* expectation update

* Really fix tests :)

package.json

@@ -41,10 +41,10 @@
     "sinon-chrome": "^3.0.1"
   },
   "resolutions": {
-    "@polkadot/api": "^6.5.1",
+    "@polkadot/api": "^6.5.3-1",
     "@polkadot/keyring": "^7.6.1",
     "@polkadot/networks": "^7.6.1",
-    "@polkadot/types": "^6.5.1",
+    "@polkadot/types": "^6.5.3-1",
     "@polkadot/util": "^7.6.1",
     "@polkadot/util-crypto": "^7.6.1",
     "@polkadot/x-fetch": "^7.6.1",

packages/extension-base/package.json

@@ -19,11 +19,11 @@
   "main": "index.js",
   "dependencies": {
     "@babel/runtime": "^7.15.4",
-    "@polkadot/api": "^6.5.2",
+    "@polkadot/api": "^6.5.3-1",
     "@polkadot/extension-dapp": "^0.40.5-1",
     "@polkadot/extension-inject": "^0.40.5-1",
     "@polkadot/keyring": "^7.6.1",
     "@polkadot/phishing": "^0.6.383",
-    "@polkadot/ui-keyring": "^0.86.2"
+    "@polkadot/ui-keyring": "^0.86.3-3"
   }
 }

packages/extension-ui/package.json

@@ -29,8 +29,8 @@
     "@polkadot/hw-ledger": "^7.6.1",
     "@polkadot/keyring": "^7.6.1",
     "@polkadot/networks": "^7.6.1",
-    "@polkadot/react-identicon": "^0.86.2",
-    "@polkadot/react-qr": "^0.86.2",
+    "@polkadot/react-identicon": "^0.86.3-3",
+    "@polkadot/react-qr": "^0.86.3-3",
     "@polkadot/util": "^7.6.1",
     "@polkadot/util-crypto": "^7.6.1",
     "file-saver": "^2.0.5",

packages/extension-ui/src/Popup/Signing/Bytes.tsx

@@ -1,9 +1,11 @@
 // Copyright 2019-2021 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
+import { isAscii, u8aToString, u8aUnwrapBytes } from '@polkadot/util';
+
 import useTranslation from '../../hooks/useTranslation';
 
 interface Props {
@@ -15,6 +17,13 @@ interface Props {
 function Bytes ({ bytes, className, url }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
+  const text = useMemo(
+    () => isAscii(bytes)
+      ? u8aToString(u8aUnwrapBytes(bytes))
+      : bytes,
+    [bytes]
+  );
+
   return (
     <table className={className}>
       <tbody>
@@ -24,7 +33,7 @@ function Bytes ({ bytes, className, url }: Props): React.ReactElement<Props> {
         </tr>
         <tr>
           <td className='label'>{t<string>('bytes')}</td>
-          <td className='data'>{bytes}</td>
+          <td className='data'>{text}</td>
         </tr>
       </tbody>
     </table>

packages/extension-ui/src/Popup/Signing/Signing.test.tsx

@@ -248,10 +248,10 @@ describe('Signing requests', () => {
         'Westend',
         '45',
         '3',
-        `balances.transferKeepAlive(dest, value)[
-  "5GYQRJj3NUznYDzCduENRcocMsyxmb6tjb5xW87ZMErBe9R7",
-  "123.0000 WND"
-]`,
+        `balances.transferKeepAlive(dest, value){
+  "dest": "5GYQRJj3NUznYDzCduENRcocMsyxmb6tjb5xW87ZMErBe9R7",
+  "value": "123.0000 WND"
+}`,
         'Same as the [`transfer`] call, but with a check that the transfer will not kill the origin account.',
         'mortal, valid from {{birth}} to {{death}}'
       ]);
@@ -267,10 +267,10 @@ describe('Signing requests', () => {
         'Westend',
         '45',
         '3',
-        `balances.transfer(dest, value)[
-  "5Ggap6soAPaP5UeNaiJsgqQwdVhhNnm6ez7Ba1w9jJ62LM2Q",
-  "200.0000 mWND"
-]`,
+        `balances.transfer(dest, value){
+  "dest": "5Ggap6soAPaP5UeNaiJsgqQwdVhhNnm6ez7Ba1w9jJ62LM2Q",
+  "value": "200.0000 mWND"
+}`,
         'Transfer some liquid free balance to another account.',
         'mortal, valid from {{birth}} to {{death}}'
       ]);

yarn.lock

@@ -2274,37 +2274,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-derive@npm:6.5.1":
-  version: 6.5.1
-  resolution: "@polkadot/api-derive@npm:6.5.1"
+"@polkadot/api-derive@npm:6.5.3-1":
+  version: 6.5.3-1
+  resolution: "@polkadot/api-derive@npm:6.5.3-1"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/api": 6.5.1
-    "@polkadot/rpc-core": 6.5.1
-    "@polkadot/types": 6.5.1
+    "@polkadot/api": 6.5.3-1
+    "@polkadot/rpc-core": 6.5.3-1
+    "@polkadot/types": 6.5.3-1
     "@polkadot/util": ^7.6.1
     "@polkadot/util-crypto": ^7.6.1
     rxjs: ^7.4.0
-  checksum: 331fd48d1a09677233cf9f28e3271b172488981aac3f6e754be511ea40bb72d9d8e20190ff40fb85e0cbaacfdd37dfa36918a2f647419af5a85d75fd9b97306f
+  checksum: e5007b99de7e74743025c004bc5945ee26972d43a3dbf618343a90d598e844abfee21abb0b694264cd63066c2b154c0310302c78fee599b16e8d7b0fcdfce17f
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@polkadot/api@npm:6.5.1"
+"@polkadot/api@npm:^6.5.3-1":
+  version: 6.5.3-1
+  resolution: "@polkadot/api@npm:6.5.3-1"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/api-derive": 6.5.1
+    "@polkadot/api-derive": 6.5.3-1
     "@polkadot/keyring": ^7.6.1
-    "@polkadot/rpc-core": 6.5.1
-    "@polkadot/rpc-provider": 6.5.1
-    "@polkadot/types": 6.5.1
-    "@polkadot/types-known": 6.5.1
+    "@polkadot/rpc-core": 6.5.3-1
+    "@polkadot/rpc-provider": 6.5.3-1
+    "@polkadot/types": 6.5.3-1
+    "@polkadot/types-known": 6.5.3-1
     "@polkadot/util": ^7.6.1
     "@polkadot/util-crypto": ^7.6.1
     eventemitter3: ^4.0.7
     rxjs: ^7.4.0
-  checksum: 26eae8e8408d0b872d54202d3ee6950796bb6f75bf7e9744e37a8452f3a20cb1f6ad512ba41c09667cef3620d6d8b6b1844179fadac7f6ae68d30cc600711a36
+  checksum: 03383caa6fe78ad67f8231cad2add73bdae5bb71344ff02419c079c29d5f0d04a49c588583ae55eb7b4b4c093983ba84bea88fc2d9e893c7ee0d1fb8c9669725
   languageName: node
   linkType: hard
 
@@ -2407,12 +2407,12 @@ __metadata:
   resolution: "@polkadot/extension-base@workspace:packages/extension-base"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/api": ^6.5.2
+    "@polkadot/api": ^6.5.3-1
     "@polkadot/extension-dapp": ^0.40.5-1
     "@polkadot/extension-inject": ^0.40.5-1
     "@polkadot/keyring": ^7.6.1
     "@polkadot/phishing": ^0.6.383
-    "@polkadot/ui-keyring": ^0.86.2
+    "@polkadot/ui-keyring": ^0.86.3-3
   languageName: unknown
   linkType: soft
 
@@ -2484,8 +2484,8 @@ __metadata:
     "@polkadot/hw-ledger": ^7.6.1
     "@polkadot/keyring": ^7.6.1
     "@polkadot/networks": ^7.6.1
-    "@polkadot/react-identicon": ^0.86.2
-    "@polkadot/react-qr": ^0.86.2
+    "@polkadot/react-identicon": ^0.86.3-3
+    "@polkadot/react-qr": ^0.86.3-3
     "@polkadot/util": ^7.6.1
     "@polkadot/util-crypto": ^7.6.1
     "@types/bn.js": ^4.11.6
@@ -2606,14 +2606,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/react-identicon@npm:^0.86.2":
-  version: 0.86.2
-  resolution: "@polkadot/react-identicon@npm:0.86.2"
+"@polkadot/react-identicon@npm:^0.86.3-3":
+  version: 0.86.3-3
+  resolution: "@polkadot/react-identicon@npm:0.86.3-3"
   dependencies:
     "@babel/runtime": ^7.15.4
     "@polkadot/keyring": ^7.6.1
-    "@polkadot/ui-settings": 0.86.2
-    "@polkadot/ui-shared": 0.86.2
+    "@polkadot/ui-settings": 0.86.3-3
+    "@polkadot/ui-shared": 0.86.3-3
     "@polkadot/util": ^7.6.1
     "@polkadot/util-crypto": ^7.6.1
     color: ^3.2.1
@@ -2629,13 +2629,13 @@ __metadata:
     react-dom: "*"
     react-is: "*"
     styled-components: "*"
-  checksum: 0abcb1fd71360128b6dabfca51f00c14f234b168938faf9fba00d556650e236da14fc9781bcad2982cd8cb8de49bf549ab505c2cf3fcf03040769f084f2bd27c
+  checksum: ee805043f5c9af852e9b144344d47cb95cae4edafb238dcb3b958487c03b9169f467ec808ed87418a55585cac88a342226c97bdff883d9dafac74e53805b90db
   languageName: node
   linkType: hard
 
-"@polkadot/react-qr@npm:^0.86.2":
-  version: 0.86.2
-  resolution: "@polkadot/react-qr@npm:0.86.2"
+"@polkadot/react-qr@npm:^0.86.3-3":
+  version: 0.86.3-3
+  resolution: "@polkadot/react-qr@npm:0.86.3-3"
   dependencies:
     "@babel/runtime": ^7.15.4
     "@polkadot/util": ^7.6.1
@@ -2649,71 +2649,71 @@ __metadata:
     react: "*"
     react-dom: "*"
     styled-components: "*"
-  checksum: cfdceaa60b6a60033ce3100d336f307cf14a6f38ceb43d47b13d9465eb5237f9f48261270c67be39a6189d9d761ad2b955f7afafefbf32258b12a4e1450046aa
+  checksum: c1ab437e264fe3df465aa694c5b762bdce82a8d3d85a0711f20c511e7b094db7dcc336c8084e72c8abedfc0761a2ce50acc6db6f5357ecc8f4f36c1e63c8e67f
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-core@npm:6.5.1":
-  version: 6.5.1
-  resolution: "@polkadot/rpc-core@npm:6.5.1"
+"@polkadot/rpc-core@npm:6.5.3-1":
+  version: 6.5.3-1
+  resolution: "@polkadot/rpc-core@npm:6.5.3-1"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/rpc-provider": 6.5.1
-    "@polkadot/types": 6.5.1
+    "@polkadot/rpc-provider": 6.5.3-1
+    "@polkadot/types": 6.5.3-1
     "@polkadot/util": ^7.6.1
     rxjs: ^7.4.0
-  checksum: 3b41379ea773abd02200f7bbc1fd2f9a0fd522bec1e210da3ee53931ca6f46ca793f323daf41ec8c51f88299f9803119c712d85c3d6d42ce6f916ffbe2d18e0d
+  checksum: bcc3c9b13f602e2d2996168bfb62229f77c12c00409fa5a671a8a02d2e63ca2d9d9e2f313e507dde642a11260b90bdcc296e2f36ac54e79f342e625c2ea927da
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-provider@npm:6.5.1":
-  version: 6.5.1
-  resolution: "@polkadot/rpc-provider@npm:6.5.1"
+"@polkadot/rpc-provider@npm:6.5.3-1":
+  version: 6.5.3-1
+  resolution: "@polkadot/rpc-provider@npm:6.5.3-1"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/types": 6.5.1
+    "@polkadot/types": 6.5.3-1
     "@polkadot/util": ^7.6.1
     "@polkadot/util-crypto": ^7.6.1
     "@polkadot/x-fetch": ^7.6.1
     "@polkadot/x-global": ^7.6.1
     "@polkadot/x-ws": ^7.6.1
     eventemitter3: ^4.0.7
-  checksum: bfa71a621e46c60d030cff8e3618f8a727e164637f940b6c4b1d6449a727d4ab34445df599715c43528d96a5dd77a63f116e10e6d93cc09450161aacaab6ef84
+  checksum: 06aaaa3441983450f4acbd4d4c5bc7760c4145ffabd5276690a0416e9c4eed6e41a89eeabb246d92ef91ebb75793772e8de333fa345978f53c28c0eb67b79686
   languageName: node
   linkType: hard
 
-"@polkadot/types-known@npm:6.5.1":
-  version: 6.5.1
-  resolution: "@polkadot/types-known@npm:6.5.1"
+"@polkadot/types-known@npm:6.5.3-1":
+  version: 6.5.3-1
+  resolution: "@polkadot/types-known@npm:6.5.3-1"
   dependencies:
     "@babel/runtime": ^7.15.4
     "@polkadot/networks": ^7.6.1
-    "@polkadot/types": 6.5.1
+    "@polkadot/types": 6.5.3-1
     "@polkadot/util": ^7.6.1
-  checksum: b5d859bbd17ab2595865de8cb4be632aac5d6009606d9536bcf13e71abf8db82097eea1a77c8ab68f8f9c54c957c000b4065d7905b2a7568ce57f771d0eb1b65
+  checksum: a5b6bb3156e59e8a3964af142fe629b95b982d44a4dcbd32b222e86b390a1868433c23d7187516d6875d6f024ebc557dba8a0868b7cc827368b5cd93a97c8164
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@polkadot/types@npm:6.5.1"
+"@polkadot/types@npm:^6.5.3-1":
+  version: 6.5.3-1
+  resolution: "@polkadot/types@npm:6.5.3-1"
   dependencies:
     "@babel/runtime": ^7.15.4
     "@polkadot/util": ^7.6.1
     "@polkadot/util-crypto": ^7.6.1
     rxjs: ^7.4.0
-  checksum: f83590331ec8717ad33d67f30452baae64134cdda86c323d5a332028c6585c43b1b750190482a6c80a34561b6ce1bafeb916f54f413e4bb30714400f640af616
+  checksum: 0aa43bd8d1f8321f9ab7516b9c30a216b2bbf69faf9bd0671f5f3f95ba921223b526865d03d297161250ca45ed2218552215698318ab8ac10a0d8e9836551d76
   languageName: node
   linkType: hard
 
-"@polkadot/ui-keyring@npm:^0.86.2":
-  version: 0.86.2
-  resolution: "@polkadot/ui-keyring@npm:0.86.2"
+"@polkadot/ui-keyring@npm:^0.86.3-3":
+  version: 0.86.3-3
+  resolution: "@polkadot/ui-keyring@npm:0.86.3-3"
   dependencies:
     "@babel/runtime": ^7.15.4
     "@polkadot/hw-ledger": ^7.6.1
     "@polkadot/keyring": ^7.6.1
-    "@polkadot/ui-settings": 0.86.2
+    "@polkadot/ui-settings": 0.86.3-3
     "@polkadot/util": ^7.6.1
     mkdirp: ^1.0.4
     rxjs: ^7.4.0
@@ -2722,13 +2722,13 @@ __metadata:
     "@polkadot/keyring": "*"
     "@polkadot/ui-settings": "*"
     "@polkadot/util": "*"
-  checksum: da5b1276c1033660fe12505ab339a7b370941ac5091ab5e4e5eb2476cb51a5f3793bedf3329d4eddf9c9f5e0a4115c0f8ed188cb1ede05e4f87f230921f82b59
+  checksum: 97e646f41a09590fd5d6d3c9ed232406762fe8a56dbd777eb91f4280bd33bc17b58b6642b5bfa821f95b0c52f4048657f3af38fe6007faf4db3d98cf5007e0ac
   languageName: node
   linkType: hard
 
-"@polkadot/ui-settings@npm:0.86.2":
-  version: 0.86.2
-  resolution: "@polkadot/ui-settings@npm:0.86.2"
+"@polkadot/ui-settings@npm:0.86.3-3":
+  version: 0.86.3-3
+  resolution: "@polkadot/ui-settings@npm:0.86.3-3"
   dependencies:
     "@babel/runtime": ^7.15.4
     "@polkadot/networks": ^7.6.1
@@ -2738,20 +2738,20 @@ __metadata:
   peerDependencies:
     "@polkadot/networks": "*"
     "@polkadot/util": "*"
-  checksum: 06f085af21a0f1d84294860098f29d2f3474ba024893693b7836b676fc8b9fa323fe63bdb8966011da2196580c8786782daff33043a2464510ac2dbebac0dba6
+  checksum: b0aa42463ce9456543dc2e1d0646c362d3043937146c54fc959cc459f575b2c89fc7d2f333fce4f9e47b7cbd17123e555c190f9013a7a7648080b4fe51583a3e
   languageName: node
   linkType: hard
 
-"@polkadot/ui-shared@npm:0.86.2":
-  version: 0.86.2
-  resolution: "@polkadot/ui-shared@npm:0.86.2"
+"@polkadot/ui-shared@npm:0.86.3-3":
+  version: 0.86.3-3
+  resolution: "@polkadot/ui-shared@npm:0.86.3-3"
   dependencies:
     "@babel/runtime": ^7.15.4
     color: ^3.2.1
   peerDependencies:
     "@polkadot/util": "*"
     "@polkadot/util-crypto": "*"
-  checksum: cb0fe7d1d45a2551a7549936b72b29fb7b89ce45340f772966e50128ddeef1bf0139d8643a53d38c4c2f519325f94e075a6d49c06ca26bf2ad5c968a25527496
+  checksum: 0dc5c365668f708b93f72090950fd04fe5bb1b3feee4f28e8016dc158a34d71d8b9fb272fdecaa4d637020ce4fd31bc610fd9c013c92af724b0e36f0246bebd6
   languageName: node
   linkType: hard