add sign a message

CHANGELOG.md

@@ -1,3 +1,7 @@
+### [0.14.0](https://github.com/elven-js/elven.js/releases/tag/v0.14.0) (2023-11-25)
+- add tools for signing messages with all supported providers (`ElvenJS.signMessage`). Find more details in the [demo example]((/example/index.html)) and [documentation]((https://www.elvenjs.com)).
+- update dependencies
+
 ### [0.13.0](https://github.com/elven-js/elven.js/releases/tag/v0.13.0) (2023-10-27)
  - add xAlias login support `ElvenJS.login('x-alias')` (check the [docs](https://www.elvenjs.com) and [demo example](/example/index.html))
  - update dependencies

build/types/elven.d.ts

@@ -8,6 +8,7 @@ export { TransactionPayload } from '@multiversx/sdk-core/out/transactionPayload'
 export { TransactionWatcher } from '@multiversx/sdk-core/out/transactionWatcher';
 export { SmartContract } from '@multiversx/sdk-core/out/smartcontracts/smartContract';
 export { ContractFunction } from '@multiversx/sdk-core/out/smartcontracts/function';
+export { SignableMessage } from '@multiversx/sdk-core/out/signableMessage';
 export { BytesType, BytesValue, } from '@multiversx/sdk-core/out/smartcontracts/typesystem/bytes';
 export { U16Type, U16Value, U32Type, U32Value, U64Type, U64Value, U8Type, U8Value, BigUIntType, BigUIntValue, } from '@multiversx/sdk-core/out/smartcontracts/typesystem/numerical';
 export { BooleanType, BooleanValue, } from '@multiversx/sdk-core/out/smartcontracts/typesystem/boolean';

build/types/interaction/web-wallet-sign-message-finalize.d.ts

@@ -0,0 +1 @@
+export declare const webWalletSignMessageFinalize: () => void;

build/types/main.d.ts

@@ -21,6 +21,15 @@ export declare class ElvenJS {
      * Sign and send function
      */
     static signAndSendTransaction(transaction: Transaction): Promise<Transaction | undefined>;
+    /**
+     * Sign a single message
+     */
+    static signMessage(message: string, options?: {
+        callbackUrl?: string;
+    }): Promise<{
+        message: string;
+        messageSignature: string;
+    }>;
     /**
      * Query Smart Contracts
      */

build/types/types.d.ts

@@ -17,6 +17,9 @@ export interface InitOptions {
     onTxSent?: (transaction: Transaction) => void;
     onTxFinalized?: (transaction: Transaction) => void;
     onTxError?: (transaction: Transaction, error: string) => void;
+    onSignMsgStarted?: (message: string) => void;
+    onSignMsgFinalized?: (messageSignature: string) => void;
+    onSignMsgError?: (message: string, error: string) => void;
 }
 export declare enum LoginMethodsEnum {
     ledger = "ledger",
@@ -43,7 +46,10 @@ export declare enum EventStoreEvents {
     onTxStarted = "onTxStarted",
     onTxSent = "onTxSent",
     onTxFinalized = "onTxFinalized",
-    onTxError = "onTxError"
+    onTxError = "onTxError",
+    onSignMsgStarted = "onSignMsgStarted",
+    onSignMsgFinalized = "onSignMsgFinalized",
+    onSignMsgError = "onSignMsgError"
 }
 export declare enum WebWalletUrlParamsEnum {
     hasWebWalletGuardianSign = "hasWebWalletGuardianSign"

example/demo-styles.css

@@ -24,6 +24,7 @@ body * {
   border-radius: 8px;
   font-weight: bold;
   text-decoration: none;
+  white-space: nowrap;
 }
 
 .button.right {
@@ -36,6 +37,7 @@ body * {
   border-bottom: 1px dashed #000;
   padding-bottom: 20px;
   margin-bottom: 20px;
+  flex-wrap: wrap;
 }
 
 a {
@@ -46,10 +48,11 @@ a {
   display: inline-block;
 }
 
-.tx-hash-or-query-result {
+.operation-result {
   font-size: 16px;
   font-weight: bold;
   word-break: break-all;
+  margin-bottom: 30px;
 }
 
 @media screen and (max-width: 680px) {
@@ -66,16 +69,16 @@ a {
   }
 }
 
-.esdt-info {
+.operation-info {
   margin-top: 10px;
 }
 
-.esdt-info:nth-child(3) {
+.operation-info.mb {
   margin-bottom: 30px;
 }
 
-.esdt-info,
-.esdt-info a {
+.operation-info,
+.operation-info a {
   font-size: 13px;
 }
 

example/demo-ui-tools.js

@@ -23,6 +23,8 @@ export const uiLoggedInState = (loggedIn) => {
   const txEsdtButton = document.getElementById('button-tx-esdt');
   const mintButton = document.getElementById('button-mint');
   const queryButton = document.getElementById('button-query');
+  const signMessageButton = document.getElementById('button-sign-message');
+
   if (loggedIn) {
     loginExtensionButton.style.display = 'none';
     loginButton.style.display = 'none';
@@ -33,6 +35,7 @@ export const uiLoggedInState = (loggedIn) => {
     txEsdtButton.style.display = 'block';
     mintButton.style.display = 'block';
     queryButton.style.display = 'block';
+    signMessageButton.style.display = 'block';
   } else {
     loginExtensionButton.style.display = 'block';
     loginButton.style.display = 'block';
@@ -43,13 +46,14 @@ export const uiLoggedInState = (loggedIn) => {
     txEsdtButton.style.display = 'none';
     mintButton.style.display = 'none';
     queryButton.style.display = 'none';
+    signMessageButton.style.display = 'none';
   }
   uiPending(false);
 };
 
 export const updateTxHashContainer = (txHash) => {
   if (txHash) {
-    const txHashContainer = document.getElementById('tx-hash-or-query-result');
+    const txHashContainer = document.getElementById('operation-result');
     const url = `https://devnet-explorer.multiversx.com/transactions/${txHash}`;
     const link = document.createElement('a');
     link.setAttribute('href', url);
@@ -59,8 +63,8 @@ export const updateTxHashContainer = (txHash) => {
   }
 };
 
-export const updateQueryResultContainer = (result) => {
-  const queryContainer = document.getElementById('tx-hash-or-query-result');
+export const updateOperationResultContainer = (result) => {
+  const queryContainer = document.getElementById('operation-result');
   if (result) {
     queryContainer?.replaceChildren();
     const divElem = document.createElement('div');

example/index.html

@@ -32,33 +32,39 @@
       <button class="button" id="button-tx-esdt" style="display: none;">ESDT transaction*</button>
       <button class="button" id="button-mint" style="display: none;">Mint NFT</button>
       <button class="button" id="button-query" style="display: none;">Query SC**</button>
+      <button class="button" id="button-sign-message" style="display: none;">Sign a message***</button>
       <button class="button" id="button-login-extension" style="display: block;">Login with Extension</button>
       <button class="button" id="button-login-mobile" style="display: block;">Login
         with xPortal</button>
       <button class="button" id="button-login-web" style="display: block;">Login
         with Web Wallet</button>
       <button class="button" id="button-login-x-alias" style="display: block;">Login
         with xAlias</button>
-
       <button class="button" id="button-logout" style="display: none;">Logout</button>
-      <a class="button right" href="https://github.com/elven-js/elven.js" target="_blank"
-        rel="noopener noreferrer">GitHub</a>
+      <a class="button" href="https://github.com/elven-js/elven.js" target="_blank" rel="noopener noreferrer">GitHub</a>
     </div>
     <div class="loader-wrapper">
       <div class="loader">Loading...</div>
     </div>
-    <div class="esdt-info">* For the ESDT transfer you will need to get the <a
+
+    <div id="operation-result" class="operation-result"></div>
+
+    <div class="operation-info">* For the ESDT transfer you will need to get the <a
         href="https://devnet-explorer.multiversx.com/tokens/BUILDO-22c0a5" target="_blank"
         rel="noopener noreferrer">BUILDO-22c0a5</a> token from the faucet: <a
         href="https://devnet-multiversx-esdt-faucet.netlify.app/" target="_blank"
         rel="noopener noreferrer">https://devnet-multiversx-esdt-faucet.netlify.app</a> (you can also modify the
       hardcoded
       token and test it with yours locally, check the sourcecode of this website for more info).</div>
-    <div class="esdt-info">** The query will trigger a 'getMintedPerAddressTotal' with currently logged in user's
+    <div class="operation-info">** The query will trigger a 'getMintedPerAddressTotal' with currently logged in user's
       address using
       the <a href="https://www.elven.tools">Elven Tools</a> Smart Contract.</div>
 
-    <div id="tx-hash-or-query-result" class="tx-hash-or-query-result"></div>
+    <div class="operation-info mb">*** The signing message example will sign the: '<a href="https://www.elven.family"
+        target="_blank" title="MultiversX indie developer tools">Elven Family</a> is awesome!' message.
+      You can
+      check the source code of this page and how to use it.</div>
+
     <div id="qr-code-container" class="qr-code-container"></div>
 
     <h1>ElvenJS (demo)</h1>
@@ -116,6 +122,12 @@ <h3>Demo transactions/queries description (devnet):</h3>
       <li>after the transaction is finished below, you will find the transaction hash</li>
     </ul>
 
+    <div>Sign a message</div>
+    <ul>
+      <li>Signing a hardcoded message</li>
+      <li>After signing you will see the message onece again and signature for it</li>
+    </ul>
+
     <div>Query the smart contract:</div>
     <ul>
       <li>Smart Contract query. The Elven Tools smart contract has the 'getMintedPerAddressTotal' function</li>
@@ -144,7 +156,7 @@ <h3>Other demos:</h3>
       uiPending,
       updateTxHashContainer,
       base64ToDecimalHex,
-      updateQueryResultContainer,
+      updateOperationResultContainer,
       clearQrCodeContainer
     } from './demo-ui-tools.js'
 
@@ -184,6 +196,9 @@ <h3>Other demos:</h3>
           onTxError: (tx, error) => { console.log('Tx error: ', error); uiPending(false); },
           onQrPending: () => { uiPending(true); },
           onQrLoaded: () => { uiPending(false); },
+          onSignMsgStarted: () => { uiPending(true); },
+          onSignMsgFinalized: (message, messageSignature) => { messageSignature && updateOperationResultContainer(`➡️ The signature for "${message}" message:\n${messageSignature}`); uiPending(false); },
+          onSignMsgError: (message, error) => { console.log('Signing message error: ', error); uiPending(false); },
         }
       );
     }
@@ -253,7 +268,7 @@ <h3>Other demos:</h3>
       const isXalias = ElvenJS.storage.get('loginMethod') === 'x-alias';
       // Additional 50000 when there is an active guardian
       // See more about gas limit calculation here: https://docs.multiversx.com/developers/gas-and-fees/overview/
-      const gasLimit = ((isGuardian || isXalias) ? 100000 : 50000) + 1500 * demoMessage.length; 
+      const gasLimit = ((isGuardian || isXalias) ? 100000 : 50000) + 1500 * demoMessage.length;
 
       const tx = new Transaction({
         nonce: ElvenJS.storage.get('nonce'),
@@ -317,7 +332,7 @@ <h3>Other demos:</h3>
       const isGuardian = ElvenJS.storage.get('activeGuardian');
       // Additional 50000 when there is an active guardian
       // See more about gas limit calculation here: https://docs.multiversx.com/developers/gas-and-fees/overview/
-      const gasLimit = isGuardian ? 14050000 : 14000000; 
+      const gasLimit = isGuardian ? 14050000 : 14000000;
 
       const tx = contract.call({
         caller: new Address(ElvenJS.storage.get('address')),
@@ -342,7 +357,7 @@ <h3>Other demos:</h3>
     // Read more about the Elven Tools Smart Contract here: https://www.elven.tools/docs/sc-endpoints.html
     document.getElementById('button-query').addEventListener('click', async () => {
       try {
-        updateQueryResultContainer();
+        updateOperationResultContainer();
         uiPending(true);
 
         const results = await ElvenJS.queryContract({
@@ -353,15 +368,27 @@ <h3>Other demos:</h3>
 
         uiPending(false);
 
-        // Manual decoding of a simple type (number here), there will be additional tools for that
-        // For more possibilities, for now please check data converter in Buildo.dev: 
+        // Manual decoding of a simple type (number here), there will be additional tools for that using ABI
+        // For now please check data converter in Buildo.dev: 
         // https://github.com/xdevguild/buildo.dev/blob/main/components/operations/utils-operations/data-converters.tsx#L103
         const hexVal = base64ToDecimalHex(results?.returnData?.[0]);
         let intVal = 0;
         if (hexVal) {
           intVal = parseInt(hexVal, 16);
         }
-        updateQueryResultContainer(`➡️ The result of the query is: ${intVal}`);
+        updateOperationResultContainer(`➡️ The result of the query is: ${intVal}`);
+      } catch (e) {
+        uiPending(false);
+        throw new Error(e?.message);
+      }
+    });
+
+    // You can sign a single message, use 
+    // You will get a message and signature back in the ElvenJS callback function 'onSignMsgFinalized'
+    // In case of browser extension provider and xPortal you can also get it from ElvenJS.signMessage return
+    document.getElementById('button-sign-message').addEventListener('click', async () => {
+      try {
+        await ElvenJS.signMessage('Elven Family is awesome!');
       } catch (e) {
         uiPending(false);
         throw new Error(e?.message);