Add genesisHash to signer payload (#323)

* Add genesisHash to signer payload

* fix order and add tests (#324)

* fix order and add tests

* Update packages/react-qr/src/util.spec.ts

* Update packages/react-qr/src/util.spec.ts

Co-authored-by: Jaco Greeff <jacogr@gmail.com>

* Apply suggestions from code review

Co-authored-by: Hanwen Cheng <heawen.cheng@gmail.com>

packages/react-qr/src/DisplayPayload.tsx

@@ -12,15 +12,16 @@ import QrDisplay from './Display';
 interface Props extends BaseProps {
   address: string;
   cmd: number;
+  genesisHash: Uint8Array | string;
   payload: Uint8Array;
 }
 
-function DisplayPayload ({ address, className, cmd, payload, size, style }: Props): React.ReactElement<Props> | null {
+function DisplayPayload ({ address, className, cmd, genesisHash, payload, size, style }: Props): React.ReactElement<Props> | null {
   const [data, setData] = useState<Uint8Array | null>(null);
 
   useEffect((): void => {
-    setData(createSignPayload(address, cmd, payload));
-  }, [address, cmd, payload]);
+    setData(createSignPayload(address, cmd, payload, genesisHash));
+  }, [address, cmd, payload, genesisHash]);
 
   if (!data) {
     return null;

packages/react-qr/src/util.spec.ts

@@ -64,7 +64,7 @@ describe('util', (): void => {
     it('encodes a payload properly', (): void => {
       expect(
         u8aToHex(
-          createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', 3, 'THIS IS SPARTA!')
+          createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', 3, 'THIS IS SPARTA!', '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe')
         )
       ).toEqual(
         '0x' + // prefix
@@ -72,7 +72,8 @@ describe('util', (): void => {
         '01' + // sr25519
         '03' + // sign tx
         'f4cd755672a8f9542ca9da4fbf2182e79135d94304002e6a09ffc96fef6e6c4c' + // publickey
-        '544849532049532053504152544121' // THIS IS SPARTA!
+        '544849532049532053504152544121' + // THIS IS SPARTA!
+        'b0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe' // genesisHash
       );
     });
   });
@@ -81,7 +82,7 @@ describe('util', (): void => {
     it('encodes frames properly', (): void => {
       expect(
         createFrames(
-          createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', 0, '0x12345678')
+          createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', 0, '0x12345678', '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe')
         ).map((u8a): string => u8aToHex(u8a))
       ).toEqual([
         '0x' +
@@ -90,7 +91,8 @@ describe('util', (): void => {
         '0000' + // index
         '530100' + // payload info, substrate + sr25519 + signtx
         'f4cd755672a8f9542ca9da4fbf2182e79135d94304002e6a09ffc96fef6e6c4c' + // publicKey
-        '12345678' // data
+        '12345678' + // data
+        'b0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe' // genesisHash
       ]);
     });
   });

packages/react-qr/src/util.ts

@@ -33,13 +33,14 @@ export function createAddressPayload (address: string, genesisHash: string): Uin
   return encodeString(`${ADDRESS_PREFIX}:${address}:${genesisHash}`);
 }
 
-export function createSignPayload (address: string, cmd: number, payload: string | Uint8Array): Uint8Array {
+export function createSignPayload (address: string, cmd: number, payload: string | Uint8Array, genesisHash: string | Uint8Array): Uint8Array {
   return u8aConcat(
     SUBSTRATE_ID,
     CRYPTO_SR25519,
     new Uint8Array([cmd]),
     decodeAddress(address),
-    u8aToU8a(payload)
+    u8aToU8a(payload),
+    u8aToU8a(genesisHash)
   );
 }