@web3modal/scaffold - npm Package Compare versions

Comparing version 3.3.0-4df4ae5 to 3.3.0-5ccf4c52

dist/esm/src/client.js

@@ -1,2 +0,2 @@
-import { AccountController, BlockchainApiController, ConnectionController, ConnectorController, CoreHelperUtil, EventsController, ModalController, NetworkController, OptionsController, PublicStateController, ThemeController } from '@web3modal/core';
+import { AccountController, BlockchainApiController, ConnectionController, ConnectorController, CoreHelperUtil, EventsController, ModalController, NetworkController, OptionsController, PublicStateController, ThemeController, SIWEController } from '@web3modal/core';
 import { setColorTheme, setThemeVariables } from '@web3modal/ui';
@@ -50,2 +50,18 @@ let isInitialized = false;
         };
+        this.setSIWENonce = nonce => {
+            SIWEController.setNonce(nonce);
+        };
+        this.setSIWESession = session => {
+            SIWEController.setSession(session);
+        };
+        this.setSIWEStatus = status => {
+            SIWEController.setStatus(status);
+        };
+        this.setSIWEMessage = message => {
+            SIWEController.setMessage(message);
+        };
+        this.getSIWENonce = () => SIWEController.state.nonce;
+        this.getSIWESession = () => SIWEController.state.session;
+        this.getSIWEStatus = () => SIWEController.state.status;
+        this.getSIWEMessage = () => SIWEController.state.message;
         this.initControllers(options);
@@ -91,2 +107,5 @@ this.initOrContinue();
     }
+    subscribeSIWEState(callback) {
+        return SIWEController.subscribe(callback);
+    }
     initControllers(options) {
@@ -106,2 +125,5 @@ NetworkController.setClient(options.networkControllerClient);
         ConnectionController.setClient(options.connectionControllerClient);
+        if (options.siweControllerClient) {
+            SIWEController.setSIWEClient(options.siweControllerClient);
+        }
         if (options.metadata) {
@@ -108,0 +130,0 @@ OptionsController.setMetadata(options.metadata);

dist/esm/src/views/w3m-approve-transaction-view/index.js

@@ -9,9 +9,60 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { LitElement, html } from 'lit';
+import { state } from 'lit/decorators.js';
 import styles from './styles.js';
+import { ModalController } from '@web3modal/core';
 let W3mApproveTransactionView = class W3mApproveTransactionView extends LitElement {
+    constructor() {
+        super();
+        this.resizeObserver = undefined;
+        this.unsubscribe = [];
+        this.iframe = document.getElementById('w3m-iframe');
+        this.ready = false;
+        this.unsubscribe.push(ModalController.subscribeKey('open', val => {
+            if (!val) {
+                this.onHideIframe();
+            }
+        }));
+    }
+    disconnectedCallback() {
+        this.unsubscribe.forEach(unsubscribe => unsubscribe());
+        this.resizeObserver?.unobserve(window.document.body);
+    }
+    firstUpdated() {
+        this.iframe.style.display = 'block';
+        const blueprint = this.renderRoot.querySelector('div');
+        this.resizeObserver = new ResizeObserver(() => {
+            const data = blueprint?.getBoundingClientRect();
+            const dimensions = data ?? { left: 0, top: 0, width: 0, height: 0 };
+            this.iframe.style.width = `${dimensions.width}px`;
+            this.iframe.style.height = `${dimensions.height}px`;
+            this.iframe.style.left = `${dimensions.left}px`;
+            this.iframe.style.top = `${dimensions.top}px`;
+            this.ready = true;
+        });
+        this.resizeObserver.observe(window.document.body);
+    }
     render() {
-        return html `<p>Hello Transaction</p>`;
+        if (this.ready) {
+            this.onShowIframe();
+        }
+        return html `<div></div>`;
     }
+    onShowIframe() {
+        this.iframe.animate([
+            { opacity: 0, transform: 'scale(.95)' },
+            { opacity: 1, transform: 'scale(1)' }
+        ], { duration: 200, easing: 'ease', fill: 'forwards', delay: 300 });
+    }
+    async onHideIframe() {
+        await this.iframe.animate([
+            { opacity: 1, transform: 'scale(1)' },
+            { opacity: 0, transform: 'scale(.95)' }
+        ], { duration: 200, easing: 'ease', fill: 'forwards' }).finished;
+        this.iframe.style.display = 'none';
+    }
 };
 W3mApproveTransactionView.styles = styles;
+__decorate([
+    state()
+], W3mApproveTransactionView.prototype, "ready", void 0);
 W3mApproveTransactionView = __decorate([
@@ -18,0 +69,0 @@ customElement('w3m-approve-transaction-view')

dist/esm/src/views/w3m-approve-transaction-view/styles.js

 import { css } from 'lit';
-export default css ``;
+export default css `
+  div {
+    width: 100%;
+    height: 300px;
+  }
+`;
 //# sourceMappingURL=styles.js.map

dist/types/src/client.d.ts

@@ -1,3 +0,3 @@
-import type { ConnectionControllerClient, EventsControllerState, NetworkControllerClient, NetworkControllerState, OptionsControllerState, PublicStateControllerState, ThemeControllerState, ThemeMode, ThemeVariables } from '@web3modal/core';
-import { AccountController, BlockchainApiController, ConnectionController, ConnectorController, NetworkController } from '@web3modal/core';
+import type { ConnectionControllerClient, SIWEControllerClient, EventsControllerState, NetworkControllerClient, NetworkControllerState, OptionsControllerState, PublicStateControllerState, ThemeControllerState, ThemeMode, ThemeVariables, SIWEControllerClientState } from '@web3modal/core';
+import { AccountController, BlockchainApiController, ConnectionController, ConnectorController, NetworkController, SIWEController } from '@web3modal/core';
 export interface LibraryOptions {
@@ -22,5 +22,6 @@ projectId: OptionsControllerState['projectId'];
     connectionControllerClient: ConnectionControllerClient;
+    siweControllerClient?: SIWEControllerClient;
 }
 export interface OpenOptions {
-    view: 'Account' | 'Connect' | 'Networks';
+    view: 'Account' | 'Connect' | 'Networks' | 'ApproveTransaction';
 }
@@ -64,4 +65,13 @@ export declare class Web3ModalScaffold {
     protected setAddressExplorerUrl: (typeof AccountController)['setAddressExplorerUrl'];
+    protected setSIWENonce: (typeof SIWEController)['setNonce'];
+    protected setSIWESession: (typeof SIWEController)['setSession'];
+    protected setSIWEStatus: (typeof SIWEController)['setStatus'];
+    protected setSIWEMessage: (typeof SIWEController)['setMessage'];
+    subscribeSIWEState(callback: (newState: SIWEControllerClientState) => void): () => void;
+    protected getSIWENonce: () => string | undefined;
+    protected getSIWESession: () => import("@web3modal/core").SIWESession | undefined;
+    protected getSIWEStatus: () => "error" | "success" | "ready" | "loading" | "uninitialized" | "rejected";
+    protected getSIWEMessage: () => string | undefined;
     private initControllers;
     private initOrContinue;
 }

dist/types/src/views/w3m-approve-transaction-view/index.d.ts

 import { LitElement } from 'lit';
 export declare class W3mApproveTransactionView extends LitElement {
     static styles: import("lit").CSSResult;
+    private resizeObserver?;
+    private unsubscribe;
+    private iframe;
+    ready: boolean;
+    constructor();
+    disconnectedCallback(): void;
+    firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
+    private onShowIframe;
+    private onHideIframe;
 }
@@ -6,0 +15,0 @@ declare global {

package.json

 {
   "name": "@web3modal/scaffold",
-  "version": "3.3.0-4df4ae5",
+  "version": "3.3.0-5ccf4c52",
   "type": "module",
@@ -19,8 +19,8 @@ "main": "./dist/esm/index.js",
   "dependencies": {
-    "@web3modal/core": "3.3.0-4df4ae5",
-    "@web3modal/ui": "3.3.0-4df4ae5",
-    "lit": "3.0.1"
+    "@web3modal/core": "3.3.0-5ccf4c52",
+    "@web3modal/ui": "3.3.0-5ccf4c52",
+    "lit": "3.0.2"
   },
   "devDependencies": {
-    "@web3modal/smart-account": "3.3.0-4df4ae5"
+    "@web3modal/smart-account": "3.3.0-5ccf4c52"
   },
@@ -27,0 +27,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

281550

increased by2.48%

Lines of code

4735

increased by2.11%

Dependency changes

• + Added@web3modal/core@3.3.0-5ccf4c52(transitive)

• + Added@web3modal/ui@3.3.0-5ccf4c52(transitive)

• + Addedderive-valtio@0.1.0(transitive)

• + Addedlit@3.0.2(transitive)

• + Addedvaltio@1.12.0(transitive)

• - Removed@web3modal/core@3.3.0-4df4ae5(transitive)

• - Removed@web3modal/ui@3.3.0-4df4ae5(transitive)

• - Removedlit@3.0.1(transitive)

• - Removedvaltio@1.11.3(transitive)

• Updated@web3modal/core@3.3.0-5ccf4c52

• Updated@web3modal/ui@3.3.0-5ccf4c52

• Updatedlit@3.0.2