[BRO-13] Payload decoding in the browser wallet of the CIS3 standard

sponsoredTransactions/frontend/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Unreleased changes
 
+## 2.0.3
+
+-   Change the dApp to use new `signCIS3Message` function from the BrowserWallet.
+
 ## 2.0.2
 
 -   Change the dApp to use the testnet smart contract index.

sponsoredTransactions/frontend/README.md

@@ -14,7 +14,7 @@ The smart contract code at {index: SMART_CONTRACT_INDEX, subindex: 0} can be fou
 
 ## Prerequisites
 
--   Browser wallet extension must be installed in Google Chrome and the Concordium testnet needs to be selected or a mobile wallet needs to be set up that supports wallet connect in order to view smart contract details or submit transactions.
+-   Browser wallet extension version 1.5.2 or above must be installed in Google Chrome and the Concordium testnet needs to be selected or a mobile wallet needs to be set up that supports wallet connect in order to view smart contract details or submit transactions.
 
 ## Running the sponsored txs example (without backend -> submitting the sponsored transaction to chain will fail)
 

sponsoredTransactions/frontend/package.json

@@ -1,7 +1,7 @@
 {
     "name": "sponsored-transactions",
     "packageManager": "yarn@3.2.0",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "license": "Apache-2.0",
     "engines": {
         "node": ">=16.x"

sponsoredTransactions/frontend/src/SponsoredTransactions.tsx

@@ -9,14 +9,15 @@ import {
     deserializeTypeValue,
     AccountAddress,
     ConcordiumGRPCClient,
+    AccountTransactionSignature,
 } from '@concordium/web-sdk';
 import {
     useGrpcClient,
     WalletConnectionProps,
     useConnection,
     useConnect,
-    typeSchemaFromBase64,
     TESTNET,
+    WalletConnection,
 } from '@concordium/react-components';
 import { version } from '../package.json';
 
@@ -25,7 +26,6 @@ import {
     SPONSORED_TX_CONTRACT_NAME,
     NONCE_OF_PARAMETER_SCHEMA,
     NONCE_OF_RETURN_VALUE_SCHEMA,
-    SERIALIZATION_HELPER_SCHEMA,
     CONTRACT_SUB_INDEX,
     BROWSER_WALLET,
     WALLET_CONNECT,
@@ -83,13 +83,7 @@ const InputFieldStyle = {
     padding: '10px 20px',
 };
 
-function generateTransferMessage(
-    expiryTimeSignature: string,
-    nonce: string,
-    tokenID: string,
-    from: string,
-    to: string,
-) {
+function generateTransferPayload(nonce: string, tokenID: string, from: string, to: string) {
     if (nonce === '') {
         alert('Insert a nonce.');
         return '';
@@ -145,30 +139,13 @@ function generateTransferMessage(
         },
     ];
 
-    const payload = serializeTypeValue(transfer, toBuffer(TRANSFER_SCHEMA, 'base64'));
-
-    const message = {
-        contract_address: {
-            index: Number(process.env.SMART_CONTRACT_INDEX),
-            subindex: 0,
-        },
-        nonce: Number(nonce),
-        timestamp: expiryTimeSignature,
-        entry_point: 'transfer',
-        payload: Array.from(payload),
-    };
-
-    const serializedMessage = serializeTypeValue(message, toBuffer(SERIALIZATION_HELPER_SCHEMA, 'base64'));
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
+    const payload = serializeTypeValue(transfer, toBuffer(TRANSFER_SCHEMA, 'base64')).toString('hex');
 
-    return serializedMessage;
+    return payload;
 }
 
-function generateUpdateOperatorMessage(
-    expiryTimeSignature: string,
-    nonce: string,
-    operator: string,
-    addOperator: boolean,
-) {
+function generateUpdateOperatorPayload(nonce: string, operator: string, addOperator: boolean) {
     if (nonce === '') {
         alert('Insert a nonce.');
         return '';
@@ -207,22 +184,35 @@ function generateUpdateOperatorMessage(
         },
     ];
 
-    const payload = serializeTypeValue(updateOperator, toBuffer(UPDATE_OPERATOR_SCHEMA, 'base64'));
-
-    const message = {
-        contract_address: {
-            index: Number(process.env.SMART_CONTRACT_INDEX),
-            subindex: 0,
-        },
-        nonce: Number(nonce),
-        timestamp: expiryTimeSignature,
-        entry_point: 'updateOperator',
-        payload: Array.from(payload),
-    };
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
+    const payload = serializeTypeValue(updateOperator, toBuffer(UPDATE_OPERATOR_SCHEMA, 'base64')).toString('hex');
 
-    const serializedMessage = serializeTypeValue(message, toBuffer(SERIALIZATION_HELPER_SCHEMA, 'base64'));
+    return payload;
+}
 
-    return serializedMessage;
+function signCIS3Message(
+    connection: WalletConnection,
+    isUpdateOperatorTab: boolean,
+    nonce: string,
+    expiryTimeSignature: string,
+    account: string,
+    payload: string,
+): Promise<AccountTransactionSignature> {
+    const contractAddress = { index: Number(process.env.SMART_CONTRACT_INDEX), subindex: 0 };
+    const contractName = { value: SPONSORED_TX_CONTRACT_NAME };
+    const entrypointName = { value: isUpdateOperatorTab ? 'updateOperator' : 'transfer' };
+    const _nonce = Number(nonce);
+    const payloadMessage = { data: payload, schema: isUpdateOperatorTab ? UPDATE_OPERATOR_SCHEMA : TRANSFER_SCHEMA };
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-return
+    return connection.client.signCIS3Message(
+        contractAddress,
+        contractName,
+        entrypointName,
+        _nonce,
+        expiryTimeSignature,
+        account,
+        payloadMessage,
+    );
 }
 
 async function getPublicKey(rpcClient: ConcordiumGRPCClient, account: string) {
@@ -638,16 +628,19 @@ export default function SponsoredTransactions(props: WalletConnectionProps) {
                             const expiryTimeSignature = date.toISOString();
                             setExpiryTime(expiryTimeSignature);
 
-                            const serializedMessage = isUpdateOperatorTab
-                                ? generateUpdateOperatorMessage(expiryTimeSignature, nonce, operator, addOperator)
-                                : generateTransferMessage(expiryTimeSignature, nonce, tokenID, from, to);
-
-                            if (serializedMessage !== '') {
-                                const promise = connection.signMessage(account, {
-                                    type: 'BinaryMessage',
-                                    value: serializedMessage,
-                                    schema: typeSchemaFromBase64(SERIALIZATION_HELPER_SCHEMA),
-                                });
+                            const payload = isUpdateOperatorTab
+                                ? generateUpdateOperatorPayload(nonce, operator, addOperator)
+                                : generateTransferPayload(nonce, tokenID, from, to);
+
+                            if (payload !== '') {
+                                const promise = signCIS3Message(
+                                    connection,
+                                    isUpdateOperatorTab,
+                                    nonce,
+                                    expiryTimeSignature,
+                                    account,
+                                    payload,
+                                );
 
                                 promise
                                     .then((permitSignature) => {

sponsoredTransactions/frontend/src/constants.ts

@@ -15,9 +15,6 @@ export const UPDATE_OPERATOR_SCHEMA =
 export const TRANSFER_SCHEMA =
     'EAEUAAUAAAAIAAAAdG9rZW5faWQdAAYAAABhbW91bnQbJQAAAAQAAABmcm9tFQIAAAAHAAAAQWNjb3VudAEBAAAACwgAAABDb250cmFjdAEBAAAADAIAAAB0bxUCAAAABwAAAEFjY291bnQBAQAAAAsIAAAAQ29udHJhY3QBAgAAAAwWAQQAAABkYXRhEAEC';
 
-export const SERIALIZATION_HELPER_SCHEMA =
-    'FAAFAAAAEAAAAGNvbnRyYWN0X2FkZHJlc3MMBQAAAG5vbmNlBQkAAAB0aW1lc3RhbXANCwAAAGVudHJ5X3BvaW50FgEHAAAAcGF5bG9hZBABAg==';
-
 export const NONCE_OF_PARAMETER_SCHEMA = 'FAABAAAABwAAAHF1ZXJpZXMQARQAAQAAAAcAAABhY2NvdW50Cw==';
 
 export const NONCE_OF_RETURN_VALUE_SCHEMA = 'FAEBAAAAEAEF';

sponsoredTransactionsAuction/frontend/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Unreleased changes
 
+## 1.0.4
+
+-   Change the dApp to use new `signCIS3Message` function from the BrowserWallet.
+
 ## 1.0.3
 
 -   Fix `Writable` error via polyfill in `walletConnect` dependency.

sponsoredTransactionsAuction/frontend/README.md

@@ -17,7 +17,7 @@ The smart contract code at {index: AUCTION_CONTRACT_INDEX, subindex: 0} can be f
 
 ## Prerequisites
 
--   Browser wallet extension must be installed in Google Chrome and the Concordium testnet needs to be selected.
+-   Browser wallet extension version 1.5.2 or above must be installed in Google Chrome and the Concordium testnet needs to be selected.
 
 ## Running the sponsored txs example (without backend -> submitting the sponsored transaction to chain will fail)
 

sponsoredTransactionsAuction/frontend/package.json

@@ -1,7 +1,7 @@
 {
     "name": "auction-sponsored-transactions",
     "private": true,
-    "version": "1.0.3",
+    "version": "1.0.4",
     "type": "module",
     "engines": {
         "npm": ">=10.0.0",

sponsoredTransactionsAuction/frontend/src/components/Bid.tsx

@@ -2,16 +2,17 @@ import { useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { Alert, Button, Form } from 'react-bootstrap';
 
-import { TransactionHash, serializeTypeValue, toBuffer } from '@concordium/web-sdk';
-import { WalletConnection, typeSchemaFromBase64 } from '@concordium/react-components';
-
-import { Buffer } from 'buffer/';
-
 import {
-    SERIALIZATION_HELPER_SCHEMA_ADDITIONAL_DATA,
-    SERIALIZATION_HELPER_SCHEMA_PERMIT_MESSAGE,
-    TRANSFER_SCHEMA,
-} from '../constants';
+    AccountTransactionSignature,
+    EntrypointName,
+    Parameter,
+    serializeTypeValue,
+    toBuffer,
+    TransactionHash,
+} from '@concordium/web-sdk';
+import { WalletConnection } from '@concordium/react-components';
+
+import { SERIALIZATION_HELPER_SCHEMA_ADDITIONAL_DATA, SPONSORED_TX_CONTRACT_NAME, TRANSFER_SCHEMA } from '../constants';
 import { submitBid, validateAccountAddress } from '../utils';
 
 import { viewItemState } from '../auction_contract';
@@ -20,11 +21,9 @@ import * as AuctionContract from '../../generated/sponsored_tx_enabled_auction_s
 /**
  * This function generates the transfer message to be signed in the browser wallet.
  */
-async function generateTransferMessage(
+async function generateTransferPayload(
     setTokenID: (arg0: string) => void,
-    expiryTimeSignature: string,
     account: string,
-    nonce: string,
     amount: string | undefined,
     itemIndexAuction: string,
 ) {
@@ -70,30 +69,40 @@ async function generateTransferMessage(
             },
         ];
 
-        const payload = serializeTypeValue(transfer, toBuffer(TRANSFER_SCHEMA, 'base64'));
-
-        const message = {
-            contract_address: {
-                index: Number(process.env.CIS2_TOKEN_CONTRACT_INDEX),
-                subindex: 0,
-            },
-            nonce: Number(nonce),
-            timestamp: expiryTimeSignature,
-            entry_point: 'transfer',
-            payload: Array.from(payload.buffer),
-        };
-
-        const serializedMessage = serializeTypeValue(
-            message,
-            toBuffer(SERIALIZATION_HELPER_SCHEMA_PERMIT_MESSAGE, 'base64'),
-        );
+        const payload = Parameter.toHexString(serializeTypeValue(transfer, toBuffer(TRANSFER_SCHEMA, 'base64')));
 
-        return serializedMessage;
+        return payload;
     } catch (error) {
         throw new Error(`Generating transfer message failed. Orginal error: ${(error as Error).message}`);
     }
 }
 
+function signCIS3Message(
+    connection: WalletConnection,
+    nonce: string,
+    expiryTimeSignature: string,
+    account: string,
+    payload: string,
+): Promise<AccountTransactionSignature> {
+    const contractAddress = { index: Number(process.env.CIS2_TOKEN_CONTRACT_INDEX), subindex: 0 };
+    const contractName = SPONSORED_TX_CONTRACT_NAME;
+    const entrypointName = EntrypointName.fromString('transfer');
+    const _nonce = Number(nonce);
+    const payloadMessage = { data: payload, schema: TRANSFER_SCHEMA };
+
+    // @ts-expect-error Temporary expected ts-error, will be fixed with WalletConnection update
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+    return connection.client.signCIS3Message(
+        contractAddress,
+        contractName,
+        entrypointName,
+        _nonce,
+        expiryTimeSignature,
+        account,
+        payloadMessage,
+    );
+}
+
 interface ConnectionProps {
     account: string | undefined;
     connection: WalletConnection;
@@ -148,20 +157,20 @@ export default function Bid(props: ConnectionProps) {
 
         if (account) {
             try {
-                const serializedMessage = await generateTransferMessage(
+                const serializedMessage = await generateTransferPayload(
                     setTokenID,
-                    expiryTimeSignature,
                     account,
-                    data.nonce,
                     data.tokenAmount,
                     data.itemIndex,
                 );
 
-                const permitSignature = await connection.signMessage(account, {
-                    type: 'BinaryMessage',
-                    value: Buffer.from(serializedMessage.buffer),
-                    schema: typeSchemaFromBase64(SERIALIZATION_HELPER_SCHEMA_PERMIT_MESSAGE),
-                });
+                const permitSignature = await signCIS3Message(
+                    connection,
+                    data.nonce,
+                    expiryTimeSignature,
+                    account,
+                    serializedMessage,
+                );
 
                 setSignature(permitSignature[0][0]);
             } catch (err) {

sponsoredTransactionsAuction/frontend/src/constants.ts

@@ -32,9 +32,6 @@ export const METADATA_URL =
 export const TRANSFER_SCHEMA =
     'EAEUAAUAAAAIAAAAdG9rZW5faWQdAAYAAABhbW91bnQbJQAAAAQAAABmcm9tFQIAAAAHAAAAQWNjb3VudAEBAAAACwgAAABDb250cmFjdAEBAAAADAIAAAB0bxUCAAAABwAAAEFjY291bnQBAQAAAAsIAAAAQ29udHJhY3QBAgAAAAwWAQQAAABkYXRhHQE=';
 
-export const SERIALIZATION_HELPER_SCHEMA_PERMIT_MESSAGE =
-    'FAAFAAAAEAAAAGNvbnRyYWN0X2FkZHJlc3MMBQAAAG5vbmNlBQkAAAB0aW1lc3RhbXANCwAAAGVudHJ5X3BvaW50FgEHAAAAcGF5bG9hZBABAg==';
-
 export const SERIALIZATION_HELPER_SCHEMA_ADDITIONAL_DATA = 'Aw==';
 
 export const BROWSER_WALLET = ephemeralConnectorType(BrowserWalletConnector.create);