@dynamic-labs-wallet/browser-wallet-client 0.0.0-beta-191.1

package/index.esm.js

@@ -0,0 +1,581 @@
+import { parseMessageTransportData, createRequestChannel, applyDefaultMessageOrigin, createMessageTransport } from '@dynamic-labs/message-transport';
+import { Logger } from '@dynamic-labs/logger';
+import { WalletOperation, getEnvironmentFromUrl, IFRAME_DOMAIN_MAP } from '@dynamic-labs-wallet/core';
+export { MPC_RELAY_PREPROD_API_URL, MPC_RELAY_PROD_API_URL, ThresholdSignatureScheme, WalletOperation } from '@dynamic-labs-wallet/core';
+
+const setupMessageTransportBridge = (messageTransport, iframe, iframeOrigin)=>{
+    if (!(iframe == null ? void 0 : iframe.contentWindow)) {
+        throw new Error('Iframe or contentWindow not available');
+    }
+    const logger = new Logger('debug');
+    messageTransport.on((message)=>{
+        // Forward the message to webview via postMessage
+        if (message.origin === 'host') {
+            var _iframe_contentWindow;
+            iframe == null ? void 0 : (_iframe_contentWindow = iframe.contentWindow) == null ? void 0 : _iframe_contentWindow.postMessage(message, iframeOrigin);
+        }
+    });
+    const handleIncomingMessage = (message)=>{
+        const { data } = message;
+        if (!data) return;
+        if ((data == null ? void 0 : data.origin) !== 'webview') {
+            return;
+        }
+        if (typeof data !== 'object') {
+            return;
+        }
+        try {
+            const message = parseMessageTransportData(data);
+            messageTransport.emit(message);
+        } catch (error) {
+            if (!(error instanceof SyntaxError)) {
+                logger.error('Error handling incoming message:', error);
+            }
+        }
+    };
+    /**
+   * Handle incoming message from android client
+   */ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    document.addEventListener('message', handleIncomingMessage);
+    /**
+   * Handle incoming message from iOS client
+   */ window.addEventListener('message', handleIncomingMessage);
+};
+
+class iframeMessageHandler {
+    async getWallets(request) {
+        return this.requestChannel.request('getWallets', request);
+    }
+    async getWallet({ chainName, accountAddress, walletOperation, signedSessionId }) {
+        return this.requestChannel.request('getWallet', {
+            chainName,
+            accountAddress,
+            walletOperation,
+            signedSessionId
+        });
+    }
+    async createWalletAccount(request) {
+        return this.requestChannel.request('createWalletAccount', request);
+    }
+    async requiresPasswordForOperation(request) {
+        return this.requestChannel.request('requiresPasswordForOperation', request);
+    }
+    async signMessage(request) {
+        return this.requestChannel.request('signMessage', request);
+    }
+    async signRawMessage(request) {
+        return this.requestChannel.request('signRawMessage', request);
+    }
+    async signTransaction(request) {
+        return this.requestChannel.request('signTransaction', request);
+    }
+    async isPasswordEncrypted(request) {
+        return this.requestChannel.request('isPasswordEncrypted', request);
+    }
+    async backupKeySharesToGoogleDrive(request) {
+        await this.requestChannel.request('backupKeySharesToGoogleDrive', request);
+    }
+    async restoreBackupFromGoogleDrive(request) {
+        return this.requestChannel.request('restoreBackupFromGoogleDrive', request);
+    }
+    async refreshWalletAccountShares(request) {
+        return this.requestChannel.request('refreshWalletAccountShares', request);
+    }
+    async reshare(request) {
+        return this.requestChannel.request('reshare', request);
+    }
+    async exportPrivateKey(request) {
+        return this.requestChannel.request('exportPrivateKey', request);
+    }
+    async verifyPassword(request) {
+        return this.requestChannel.request('verifyPassword', request);
+    }
+    async updatePassword(request) {
+        return this.requestChannel.request('updatePassword', request);
+    }
+    async importPrivateKey(request) {
+        return this.requestChannel.request('importPrivateKey', request);
+    }
+    async sendAuthToken(token) {
+        return this.requestChannel.request('sendAuthToken', token);
+    }
+    async exportClientKeyshares(request) {
+        return this.requestChannel.request('exportClientKeyshares', request);
+    }
+    async offlineExportPrivateKey(request) {
+        return this.requestChannel.request('offlineExportPrivateKey', request);
+    }
+    async cleanup() {
+        return this.requestChannel.request('cleanup');
+    }
+    constructor(messageTransport){
+        this.requestChannel = createRequestChannel(messageTransport);
+    }
+}
+
+const logger = new Logger('DynamicWaasWalletClient');
+
+class DynamicWalletClient {
+    // Simply load the iframe from localhost
+    async initialize() {
+        await this.doInitializeIframeCommunication();
+    }
+    /**
+   * this is called on class construction time
+   * @returns {Promise<void>} that resolves when the iframe is loaded and the message transport and iframe storage are initialized
+   */ initializeIframeCommunication() {
+        if (!DynamicWalletClient.iframeLoadPromise) {
+            DynamicWalletClient.iframeLoadPromise = this.doInitializeIframeCommunication();
+        }
+        return DynamicWalletClient.iframeLoadPromise;
+    }
+    /**
+   * initialize the iframe communication by awaiting the iframe load promise
+   * and initializing the message transport and iframe storage after iframe is successfully loaded
+   */ async doInitializeIframeCommunication() {
+        try {
+            await this.loadIframe();
+        } catch (error) {
+            this.logger.error('Error initializing iframe:', error);
+            throw error;
+        }
+    }
+    /**
+   * initialize the message transport after iframe is successfully loaded
+   */ async initializeMessageTransport() {
+        await this.initializeIframeCommunication();
+        const transport = applyDefaultMessageOrigin({
+            defaultOrigin: 'host',
+            messageTransport: createMessageTransport()
+        });
+        this.messageTransport = transport;
+        if (!this.iframe) {
+            throw new Error('Iframe not available');
+        }
+        setupMessageTransportBridge(this.messageTransport, this.iframe, this.iframeDomain);
+        this.iframeMessageHandler = new iframeMessageHandler(this.messageTransport);
+        await this.initAuthToken();
+    }
+    /**
+   * securely exchange the auth token with iframe securely
+   */ async initAuthToken() {
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        try {
+            // Send auth token to iframe
+            await this.iframeMessageHandler.sendAuthToken(this.authToken);
+        } catch (error) {
+            throw new Error('Failed to establish secure token exchange: ' + error);
+        }
+    }
+    async loadIframe() {
+        // If the iframe is already loaded, just assign and resolve
+        if (DynamicWalletClient.sharedIframe) {
+            this.iframe = DynamicWalletClient.sharedIframe;
+            DynamicWalletClient.iframeInstanceCount++;
+            return Promise.resolve();
+        }
+        // If a load is in progress, wait for it, then assign
+        if (DynamicWalletClient.iframeLoadPromise) {
+            return DynamicWalletClient.iframeLoadPromise.then(()=>{
+                this.iframe = DynamicWalletClient.sharedIframe;
+                DynamicWalletClient.iframeInstanceCount++;
+            });
+        }
+        DynamicWalletClient.iframeLoadPromise = new Promise((resolve, reject)=>{
+            const iframe = document.createElement('iframe');
+            const iframeTimeoutId = setTimeout(()=>{
+                reject(new Error('Iframe load timeout'));
+            }, 10000);
+            iframe.style.display = 'none';
+            iframe.setAttribute('title', 'Dynamic Wallet Iframe');
+            iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-downloads');
+            iframe.setAttribute('referrerpolicy', 'origin');
+            iframe.style.position = 'fixed';
+            iframe.style.top = '0';
+            iframe.style.left = '0';
+            iframe.style.width = '0';
+            iframe.style.height = '0';
+            iframe.style.border = 'none';
+            iframe.style.pointerEvents = 'none';
+            var _this_instanceId;
+            const params = new URLSearchParams({
+                instanceId: (_this_instanceId = this.instanceId) != null ? _this_instanceId : '',
+                hostOrigin: window.location.origin,
+                environmentId: this.environmentId,
+                baseApiUrl: this.baseApiUrl,
+                baseMPCRelayApiUrl: this.baseMPCRelayApiUrl
+            });
+            iframe.src = `${this.iframeDomain}/waas-v1/${this.environmentId}?${params.toString()}`;
+            this.logger.debug('Creating iframe with src:', iframe.src);
+            document.body.appendChild(iframe);
+            iframe.onload = ()=>{
+                clearTimeout(iframeTimeoutId);
+                DynamicWalletClient.sharedIframe = iframe;
+                this.iframe = iframe;
+                DynamicWalletClient.iframeInstanceCount++;
+                resolve();
+            };
+            iframe.onerror = (error)=>{
+                clearTimeout(iframeTimeoutId);
+                this.logger.error('Iframe failed to load:', error);
+                reject(new Error('Failed to load iframe'));
+            };
+        });
+        return DynamicWalletClient.iframeLoadPromise;
+    }
+    /**
+   * Load an iframe for a specific container
+   * @param {HTMLElement} container - The container to which the iframe will be attached
+   * @returns {Promise<HTMLIFrameElement>} that resolves when the iframe is loaded
+   */ loadIframeForContainer(container) {
+        return new Promise((resolve, reject)=>{
+            const iframe = document.createElement('iframe');
+            const iframeTimeoutId = setTimeout(()=>{
+                reject(new Error('Iframe load timeout'));
+            }, 10000);
+            iframe.style.display = 'block';
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.setAttribute('title', 'Dynamic Wallet Storage');
+            iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+            iframe.setAttribute('referrerpolicy', 'origin');
+            var _this_instanceId;
+            const params = new URLSearchParams({
+                instanceId: (_this_instanceId = this.instanceId) != null ? _this_instanceId : '',
+                hostOrigin: window.location.origin,
+                environmentId: this.environmentId,
+                baseApiUrl: this.baseApiUrl,
+                baseMPCRelayApiUrl: this.baseMPCRelayApiUrl,
+                chain: this.chainName
+            });
+            iframe.src = `${this.iframeDomain}/waas-v1/${this.environmentId}?${params.toString()}`;
+            this.logger.debug('Creating iframe with src:', iframe.src);
+            // Add iframe to the provided container
+            container.appendChild(iframe);
+            iframe.onload = ()=>{
+                clearTimeout(iframeTimeoutId);
+                this.logger.debug('Iframe loaded successfully');
+                resolve(iframe);
+            };
+            iframe.onerror = (error)=>{
+                clearTimeout(iframeTimeoutId);
+                this.logger.error('Iframe failed to load:', error);
+                reject(new Error('Failed to load iframe'));
+            };
+        });
+    }
+    /**
+   * Initializes the iframe display for a specific container.
+   *
+   * @param {HTMLElement} container - The container to which the iframe will be attached.
+   * @returns:
+   *   iframe: HTMLIFrameElement;
+   *   iframeDisplay: IframeDisplayChannelAdapter;
+   *   cleanup: () => void;
+   */ async initializeIframeDisplayForContainer({ container }) {
+        try {
+            const iframe = await this.loadIframeForContainer(container);
+            const transport = applyDefaultMessageOrigin({
+                defaultOrigin: 'host',
+                messageTransport: createMessageTransport()
+            });
+            setupMessageTransportBridge(transport, iframe, this.iframeDomain);
+            const iframeDisplay = new iframeMessageHandler(transport);
+            // Send auth token to iframe
+            await iframeDisplay.sendAuthToken(this.authToken);
+            return {
+                iframe,
+                iframeDisplay,
+                cleanup: ()=>{
+                    container.removeChild(iframe);
+                }
+            };
+        } catch (error) {
+            this.logger.error('Error initializing iframe:', error);
+            throw error;
+        }
+    }
+    async getWallets() {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.getWallets({
+            chainName: this.chainName
+        });
+    }
+    async getWallet({ accountAddress, walletOperation = WalletOperation.NO_OPERATION, signedSessionId }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.getWallet({
+            chainName: this.chainName,
+            accountAddress,
+            walletOperation,
+            signedSessionId
+        });
+    }
+    async createWalletAccount({ thresholdSignatureScheme, password = undefined, signedSessionId }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.createWalletAccount({
+            chainName: this.chainName,
+            thresholdSignatureScheme,
+            password,
+            signedSessionId
+        });
+    }
+    async requiresPasswordForOperation({ accountAddress, walletOperation = WalletOperation.REACH_THRESHOLD }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.requiresPasswordForOperation({
+            chainName: this.chainName,
+            accountAddress,
+            walletOperation
+        });
+    }
+    async isPasswordEncrypted({ accountAddress }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.isPasswordEncrypted({
+            chainName: this.chainName,
+            accountAddress
+        });
+    }
+    async signMessage({ message, accountAddress, password = undefined, signedSessionId }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.signMessage({
+            chainName: this.chainName,
+            message,
+            accountAddress,
+            password,
+            signedSessionId
+        });
+    }
+    async signRawMessage({ message, accountAddress, password = undefined, signedSessionId }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.signRawMessage({
+            chainName: this.chainName,
+            message,
+            accountAddress,
+            password,
+            signedSessionId
+        });
+    }
+    /**
+   * Signs a transaction and returns the signature, @transaction is a string of the serialized transaction
+   * EVM:
+   *   transaction = serializeTransaction()
+   * SOL:
+   *   const messageBytes = transaction.serializeMessage();
+   *   const messageToSign = Buffer.from(messageBytes).toString("hex");
+   * SUI:
+   *  const txBytes = await txb.build({ client });
+   *  const txString = Buffer.from(txBytes).toString("hex");
+   */ async signTransaction({ senderAddress, transaction, password = undefined, signedSessionId }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.signTransaction({
+            chainName: this.chainName,
+            senderAddress,
+            transaction,
+            password,
+            signedSessionId
+        });
+    }
+    async backupKeySharesToGoogleDrive({ accountAddress, password = undefined, signedSessionId }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.backupKeySharesToGoogleDrive({
+            chainName: this.chainName,
+            accountAddress,
+            password,
+            signedSessionId
+        });
+    }
+    async restoreBackupFromGoogleDrive({ accountAddress, displayContainer, password, signedSessionId }) {
+        const { iframeDisplay } = await this.initializeIframeDisplayForContainer({
+            container: displayContainer
+        });
+        if (!iframeDisplay) {
+            throw new Error('Failed to initialize iframe handler with display functionality');
+        }
+        return iframeDisplay.restoreBackupFromGoogleDrive({
+            chainName: this.chainName,
+            accountAddress,
+            password,
+            signedSessionId
+        });
+    }
+    async refreshWalletAccountShares({ accountAddress, password, signedSessionId }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.refreshWalletAccountShares({
+            chainName: this.chainName,
+            accountAddress: accountAddress,
+            password: password,
+            signedSessionId
+        });
+    }
+    async reshare({ accountAddress, oldThresholdSignatureScheme, newThresholdSignatureScheme, password, signedSessionId }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.reshare({
+            chainName: this.chainName,
+            accountAddress,
+            oldThresholdSignatureScheme,
+            newThresholdSignatureScheme,
+            password,
+            signedSessionId
+        });
+    }
+    async exportPrivateKey({ accountAddress, displayContainer, password, signedSessionId }) {
+        const { iframeDisplay } = await this.initializeIframeDisplayForContainer({
+            container: displayContainer
+        });
+        if (!iframeDisplay) {
+            throw new Error('Failed to initialize iframe handler with display functionality');
+        }
+        return iframeDisplay.exportPrivateKey({
+            chainName: this.chainName,
+            accountAddress,
+            password,
+            signedSessionId
+        });
+    }
+    async verifyPassword({ accountAddress, password, walletOperation = WalletOperation.NO_OPERATION, signedSessionId }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.verifyPassword({
+            chainName: this.chainName,
+            accountAddress,
+            password,
+            walletOperation,
+            signedSessionId
+        });
+    }
+    async updatePassword({ accountAddress, existingPassword, newPassword, signedSessionId }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.updatePassword({
+            chainName: this.chainName,
+            accountAddress,
+            existingPassword,
+            newPassword,
+            signedSessionId
+        });
+    }
+    async importPrivateKey({ privateKey, thresholdSignatureScheme }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.importPrivateKey({
+            chainName: this.chainName,
+            privateKey,
+            thresholdSignatureScheme
+        });
+    }
+    async exportClientKeyshares({ accountAddress, password, signedSessionId }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        return this.iframeMessageHandler.exportClientKeyshares({
+            chainName: this.chainName,
+            accountAddress,
+            password,
+            signedSessionId
+        });
+    }
+    /**
+   * keyShares is stringified list of EcdsaKeygenResult[] and Ed25519KeygenResult[]
+   */ async offlineExportPrivateKey({ keyShares, derivationPath }) {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        const args = {
+            chainName: this.chainName,
+            keyShares,
+            derivationPath
+        };
+        const serializedArgs = JSON.stringify(args);
+        const argsBuffer = new TextEncoder().encode(serializedArgs);
+        const base64Args = Buffer.from(argsBuffer).toString('base64');
+        return this.iframeMessageHandler.offlineExportPrivateKey({
+            chainName: this.chainName,
+            base64Args
+        });
+    }
+    async cleanup() {
+        await this.initializeMessageTransport();
+        if (!this.iframeMessageHandler) {
+            throw new Error('Iframe message handler not initialized');
+        }
+        await this.iframeMessageHandler.cleanup();
+        if (this.iframe) {
+            DynamicWalletClient.iframeInstanceCount--;
+            if (DynamicWalletClient.sharedIframe && DynamicWalletClient.iframeInstanceCount === 0) {
+                document.body.removeChild(DynamicWalletClient.sharedIframe);
+                DynamicWalletClient.sharedIframe = null;
+                DynamicWalletClient.iframeLoadPromise = null;
+            }
+            this.iframe = null;
+        }
+    }
+    constructor({ environmentId, authToken, baseApiUrl, baseMPCRelayApiUrl, chainName, debug }){
+        this.logger = logger;
+        this.instanceId = null;
+        this.iframeDomain = null;
+        this.messageTransport = null;
+        this.iframeMessageHandler = null;
+        this.iframe = null;
+        this.environmentId = environmentId;
+        this.authToken = authToken;
+        this.baseApiUrl = baseApiUrl;
+        this.baseMPCRelayApiUrl = baseMPCRelayApiUrl;
+        this.chainName = chainName;
+        const environment = getEnvironmentFromUrl(baseApiUrl);
+        this.iframeDomain = IFRAME_DOMAIN_MAP[environment];
+        // Generate unique instanceId when client is created
+        this.instanceId = crypto.randomUUID();
+        this.debug = Boolean(debug);
+        this.logger.setLogLevel(this.debug ? 'DEBUG' : 'INFO');
+        // initialize the client
+        this.initialize();
+    }
+}
+DynamicWalletClient.iframeLoadPromise = null;
+DynamicWalletClient.sharedIframe = null;
+DynamicWalletClient.iframeInstanceCount = 0;
+
+export { DynamicWalletClient };

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@dynamic-labs-wallet/browser-wallet-client",
+  "version": "0.0.0-beta-191.1",
+  "license": "MIT",
+  "dependencies": {
+    "@dynamic-labs-wallet/core": "0.0.0-beta-191.1",
+    "@dynamic-labs/message-transport": "^4.9.9",
+    "@dynamic-labs/logger": "^4.9.9"
+  },
+  "nx": {
+    "sourceRoot": "packages/browser-wallet-client/src",
+    "projectType": "library",
+    "name": "browser-wallet-client",
+    "targets": {
+      "build": {}
+    }
+  },
+  "main": "./index.cjs.js",
+  "module": "./index.esm.js",
+  "types": "./index.esm.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.esm.d.ts",
+      "import": "./index.esm.js",
+      "require": "./index.cjs.js",
+      "default": "./index.cjs.js"
+    }
+  }
+}