@portal-hq/web 1.0.3 → 2.0.0

package/README.md

@@ -0,0 +1,36 @@
+# Portal Web SDK
+
+Welcome to the `@portal-hq/web` SDK, the official TypeScript library for integrating Portal's features into your web applications. This package enables you to seamlessly incorporate embedded MPC wallets.
+
+## Features
+
+- **Portal Class Constructor**: Initialize the Portal instance in your application.
+- **PortalContext Provider**: Expose the Portal instance to your React component tree.
+- **usePortal Hook**: Consume the Portal instance within your child components for easy access and interaction.
+- **Types and Enums**: Utilize helper types and enums for efficient development with the Portal SDK.
+
+## Documentation
+
+For a comprehensive guide and API reference, please visit our [documentation portal](https://docs.portalhq.io/sdk/web).
+
+## Quick Start
+
+### Prerequisites
+
+- Node.js and npm or yarn installed.
+- Basic knowledge of TypeScript and React.
+- Access to a Portal Account. 
+
+### Installation
+
+Install the SDK package using npm or yarn:
+
+```bash
+npm install @portal-hq/web
+# or
+yarn add @portal-hq/web
+```
+
+### Support
+
+For issues or questions please reach out to our support team at support@portalhq.io.

package/lib/commonjs/index.js

@@ -111,14 +111,14 @@ class Portal {
         // Noop
     }, backupConfigs = {}) {
         return __awaiter(this, void 0, void 0, function* () {
-            const cipherText = yield this.mpc.backup({
+            const response = yield this.mpc.backup({
                 backupMethod,
                 backupConfigs,
                 host: this.host,
                 mpcVersion: this.mpcVersion,
                 featureFlags: this.featureFlags,
             }, progress);
-            return cipherText;
+            return response;
         });
     }
     recoverWallet(cipherText, backupMethod, backupConfigs = {}, progress = () => {
@@ -167,84 +167,94 @@ class Portal {
     /****************************
      * Provider Methods
      ****************************/
-    ethEstimateGas(transaction) {
+    ethEstimateGas(transaction, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_estimateGas',
                 params: transaction,
             });
         });
     }
-    ethGasPrice() {
+    ethGasPrice(chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_gasPrice',
                 params: [],
             });
         });
     }
-    ethGetBalance() {
+    ethGetBalance(chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_getBalance',
                 params: [this.address, 'latest'],
             });
         });
     }
-    ethSendTransaction(transaction) {
+    ethSendTransaction(transaction, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_sendTransaction',
                 params: transaction,
             });
         });
     }
-    ethSign(message) {
+    ethSign(message, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_sign',
                 params: [this.address, this.stringToHex(message)],
             });
         });
     }
-    ethSignTransaction(transaction) {
+    ethSignTransaction(transaction, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_signTransaction',
                 params: transaction,
             });
         });
     }
-    ethSignTypedData(data) {
+    ethSignTypedData(data, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_signTypedData',
                 params: [this.address, data],
             });
         });
     }
-    ethSignTypedDataV3(data) {
+    ethSignTypedDataV3(data, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_signTypedData_v3',
                 params: [this.address, data],
             });
         });
     }
-    ethSignTypedDataV4(data) {
+    ethSignTypedDataV4(data, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_signTypedData_v4',
                 params: [this.address, data],
             });
         });
     }
-    personalSign(message) {
+    personalSign(message, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
-            return this.provider.request({
+            return (yield this.provider.request({
+                chainId,
                 method: 'personal_sign',
                 params: [this.stringToHex(message), this.address],
-            });
+            }));
         });
     }
     /*******************************
@@ -295,16 +305,16 @@ class Portal {
     /*******************************
      * Swaps Methods
      *******************************/
-    getQuote(apiKey, args) {
+    getQuote(apiKey, args, chainId) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            return (_a = this.mpc) === null || _a === void 0 ? void 0 : _a.getQuote(apiKey, args);
+            return (_a = this.mpc) === null || _a === void 0 ? void 0 : _a.getQuote(apiKey, args, chainId);
         });
     }
-    getSources(apiKey) {
+    getSources(apiKey, chainId) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            return (_a = this.mpc) === null || _a === void 0 ? void 0 : _a.getSources(apiKey);
+            return (_a = this.mpc) === null || _a === void 0 ? void 0 : _a.getSources(apiKey, chainId);
         });
     }
     /*******************************

package/lib/commonjs/mpc/index.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MpcErrorCodes = exports.MpcError = void 0;
 const errors_1 = require("./errors");
 const index_1 = require("../index");
-const WEB_SDK_VERSION = '1.0.3';
+const WEB_SDK_VERSION = '2.0.0';
 class Mpc {
     constructor({ portal }) {
         this.configureIframe = () => {
@@ -76,8 +76,14 @@ class Mpc {
                         // Remove the event listeners
                         window.removeEventListener('message', handleBackup);
                         window.removeEventListener('message', handleProgress);
+                        const storageCallback = () => __awaiter(this, void 0, void 0, function* () {
+                            yield this.setBackupStatus('STORED_CLIENT_BACKUP_SHARE', result.backupIds);
+                        });
                         // Resolve the promise with the result
-                        resolve(result);
+                        resolve({
+                            cipherText: result.cipherText,
+                            storageCallback,
+                        });
                     }
                 };
                 const handleProgress = (message) => {
@@ -334,7 +340,7 @@ class Mpc {
     /*******************************
      * API Methods
      *******************************/
-    getBalances() {
+    getBalances(chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
                 const handleGetBalances = (event) => {
@@ -362,7 +368,7 @@ class Mpc {
                 // Send the request to the iframe
                 this.postMessage({
                     type: 'portal:getBalances',
-                    data: {},
+                    data: { chainId },
                 });
             });
         });
@@ -400,7 +406,7 @@ class Mpc {
             });
         });
     }
-    getNFTs() {
+    getNFTs(chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
                 const handleGetNFTs = (event) => {
@@ -428,12 +434,12 @@ class Mpc {
                 // Send the request to the iframe
                 this.postMessage({
                     type: 'portal:getNFTs',
-                    data: {},
+                    data: { chainId },
                 });
             });
         });
     }
-    getQuote(apiKey, args) {
+    getQuote(apiKey, args, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
                 const handleGetQuote = (event) => {
@@ -464,12 +470,13 @@ class Mpc {
                     data: {
                         apiKey,
                         args,
+                        chainId,
                     },
                 });
             });
         });
     }
-    getSources(apiKey) {
+    getSources(apiKey, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
                 const handleGetSources = (event) => {
@@ -499,6 +506,7 @@ class Mpc {
                     type: 'portal:swaps:getSources',
                     data: {
                         apiKey,
+                        chainId,
                     },
                 });
             });
@@ -542,7 +550,42 @@ class Mpc {
             });
         });
     }
-    simulateTransaction(transaction) {
+    setBackupStatus(status, backupIds) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const handleSetBackupStatus = (event) => {
+                    const { type, data } = event.data;
+                    const { origin } = event;
+                    // ignore any broadcast postMessages
+                    if (origin !== this.getOrigin()) {
+                        return;
+                    }
+                    if (type === 'portal:api:setBackupStatusError') {
+                        // Remove the event listener
+                        window.removeEventListener('message', handleSetBackupStatus);
+                        // Reject the promise with the error
+                        return reject(new errors_1.PortalMpcError(data));
+                    }
+                    else if (type === 'portal:api:setBackupStatusResult') {
+                        // Remove the event listener
+                        window.removeEventListener('message', handleSetBackupStatus);
+                        // Resolve the promise with the result
+                        return resolve(data);
+                    }
+                };
+                // Bind the function to the message event
+                window.addEventListener('message', handleSetBackupStatus);
+                this.postMessage({
+                    type: 'portal:api:setBackupStatus',
+                    data: {
+                        backupIds,
+                        status,
+                    },
+                });
+            });
+        });
+    }
+    simulateTransaction(transaction, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
                 const handleSimulateTransaction = (event) => {
@@ -570,7 +613,10 @@ class Mpc {
                 // Send the request to the iframe
                 this.postMessage({
                     type: 'portal:simulateTransaction',
-                    data: transaction,
+                    data: {
+                        chainId,
+                        transaction,
+                    },
                 });
             });
         });

package/lib/commonjs/provider/index.js

@@ -110,17 +110,21 @@ class Provider {
      * @param args The arguments of the request being made
      * @returns Promise<any>
      */
-    request({ method, params }) {
+    request({ chainId, method, params, }) {
         return __awaiter(this, void 0, void 0, function* () {
             if (method === 'eth_chainId') {
-                return this.portal.chainId;
+                return chainId ? parseInt(chainId.split(':')[1]) : this.portal.chainId;
             }
             const isSignerMethod = signerMethods.includes(method);
-            let result;
             if (!isSignerMethod && !method.startsWith('wallet_')) {
                 // Send to Gateway for RPC calls
-                const response = yield this.handleGatewayRequest({ method, params });
+                const response = yield this.handleGatewayRequest({
+                    chainId,
+                    method,
+                    params,
+                });
                 this.emit('portal_signatureReceived', {
+                    chainId,
                     method,
                     params,
                     signature: response,
@@ -128,21 +132,23 @@ class Provider {
                 if (response.error) {
                     throw new errors_1.ProviderRpcError(response.error);
                 }
-                result = response.result;
+                return response.result;
             }
             else if (isSignerMethod) {
                 // Handle signing
                 const transactionHash = yield this.handleSigningRequest({
+                    chainId,
                     method,
                     params,
                 });
                 if (transactionHash) {
                     this.emit('portal_signatureReceived', {
+                        chainId,
                         method,
                         params,
                         signature: transactionHash,
                     });
-                    result = transactionHash;
+                    return transactionHash;
                 }
             }
             else {
@@ -155,7 +161,6 @@ class Provider {
                     },
                 });
             }
-            return result;
         });
     }
     /************************
@@ -218,13 +223,13 @@ class Provider {
      * @param args The arguments of the request being made
      * @returns Promise<any>
      */
-    handleGatewayRequest({ method, params, }) {
+    handleGatewayRequest({ chainId, method, params, }) {
         return __awaiter(this, void 0, void 0, function* () {
             // Pass request off to the gateway
             const result = yield fetch(this.portal.getRpcUrl(), {
                 body: JSON.stringify({
                     jsonrpc: '2.0',
-                    id: this.portal.chainId,
+                    id: chainId ? parseInt(chainId.split(':')[1]) : this.portal.chainId,
                     method,
                     params,
                 }),
@@ -239,7 +244,7 @@ class Provider {
      * @param args The arguments of the request being made
      * @returns Promise<any>
      */
-    handleSigningRequest({ method, params, }) {
+    handleSigningRequest({ chainId, method, params, }) {
         return __awaiter(this, void 0, void 0, function* () {
             const isApproved = passiveSignerMethods.includes(method)
                 ? true
@@ -261,7 +266,9 @@ class Provider {
                 case 'eth_signTypedData_v4':
                 case 'personal_sign': {
                     const result = yield this.portal.mpc.sign({
-                        chainId: this.portal.chainId.toString(),
+                        chainId: chainId
+                            ? chainId.split(':')[1]
+                            : this.portal.chainId.toString(),
                         method,
                         params: this.buildParams(method, params),
                         rpcUrl: this.portal.getRpcUrl(),

package/lib/esm/index.js

@@ -105,14 +105,14 @@ class Portal {
         // Noop
     }, backupConfigs = {}) {
         return __awaiter(this, void 0, void 0, function* () {
-            const cipherText = yield this.mpc.backup({
+            const response = yield this.mpc.backup({
                 backupMethod,
                 backupConfigs,
                 host: this.host,
                 mpcVersion: this.mpcVersion,
                 featureFlags: this.featureFlags,
             }, progress);
-            return cipherText;
+            return response;
         });
     }
     recoverWallet(cipherText, backupMethod, backupConfigs = {}, progress = () => {
@@ -161,84 +161,94 @@ class Portal {
     /****************************
      * Provider Methods
      ****************************/
-    ethEstimateGas(transaction) {
+    ethEstimateGas(transaction, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_estimateGas',
                 params: transaction,
             });
         });
     }
-    ethGasPrice() {
+    ethGasPrice(chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_gasPrice',
                 params: [],
             });
         });
     }
-    ethGetBalance() {
+    ethGetBalance(chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_getBalance',
                 params: [this.address, 'latest'],
             });
         });
     }
-    ethSendTransaction(transaction) {
+    ethSendTransaction(transaction, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_sendTransaction',
                 params: transaction,
             });
         });
     }
-    ethSign(message) {
+    ethSign(message, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_sign',
                 params: [this.address, this.stringToHex(message)],
             });
         });
     }
-    ethSignTransaction(transaction) {
+    ethSignTransaction(transaction, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_signTransaction',
                 params: transaction,
             });
         });
     }
-    ethSignTypedData(data) {
+    ethSignTypedData(data, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_signTypedData',
                 params: [this.address, data],
             });
         });
     }
-    ethSignTypedDataV3(data) {
+    ethSignTypedDataV3(data, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_signTypedData_v3',
                 params: [this.address, data],
             });
         });
     }
-    ethSignTypedDataV4(data) {
+    ethSignTypedDataV4(data, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.provider.request({
+                chainId,
                 method: 'eth_signTypedData_v4',
                 params: [this.address, data],
             });
         });
     }
-    personalSign(message) {
+    personalSign(message, chainId) {
         return __awaiter(this, void 0, void 0, function* () {
-            return this.provider.request({
+            return (yield this.provider.request({
+                chainId,
                 method: 'personal_sign',
                 params: [this.stringToHex(message), this.address],
-            });
+            }));
         });
     }
     /*******************************
@@ -289,16 +299,16 @@ class Portal {
     /*******************************
      * Swaps Methods
      *******************************/
-    getQuote(apiKey, args) {
+    getQuote(apiKey, args, chainId) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            return (_a = this.mpc) === null || _a === void 0 ? void 0 : _a.getQuote(apiKey, args);
+            return (_a = this.mpc) === null || _a === void 0 ? void 0 : _a.getQuote(apiKey, args, chainId);
         });
     }
-    getSources(apiKey) {
+    getSources(apiKey, chainId) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            return (_a = this.mpc) === null || _a === void 0 ? void 0 : _a.getSources(apiKey);
+            return (_a = this.mpc) === null || _a === void 0 ? void 0 : _a.getSources(apiKey, chainId);
         });
     }
     /*******************************