@web3modal/scaffold - npm Package Compare versions

Comparing version 3.3.0-e39005b to 3.4.0-f1cf73f6

dist/esm/src/partials/w3m-connecting-wc-qrcode/index.js

@@ -41,4 +41,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         <wui-link @click=${this.onCopyUri} color="fg-200">
-          <wui-icon size="sm" color="fg-200" slot="iconLeft" name="copy"></wui-icon>
-          Copy Link
+          <wui-icon size="xs" color="fg-200" slot="iconLeft" name="copy"></wui-icon>
+          Copy link
         </wui-link>
@@ -45,0 +45,0 @@ </wui-flex>

dist/esm/src/partials/w3m-email-login-widget/styles.js

@@ -16,2 +16,3 @@ import { css } from 'lit';
     position: relative;
+    padding-bottom: var(--wui-spacing-m);
   }
@@ -18,0 +19,0 @@

dist/esm/src/partials/w3m-header/index.js

@@ -31,3 +31,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         EmailVerifyOtp: 'Confirm Email',
-        EmailVerifyDevice: 'Confirm Device',
+        EmailVerifyDevice: '',
         ApproveTransaction: 'Approve Transaction'
@@ -91,3 +91,3 @@ };
     separatorTemplate() {
-        if (!this.heading) {
+        if (!this.heading || RouterController.state.view === 'EmailVerifyDevice') {
             return null;
@@ -94,0 +94,0 @@ }

dist/esm/src/utils/w3m-connecting-widget/index.js

@@ -115,4 +115,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
               <wui-link @click=${this.onCopyUri} color="fg-200">
-                <wui-icon size="sm" color="fg-200" slot="iconLeft" name="copy"></wui-icon>
-                Copy Link
+                <wui-icon size="xs" color="fg-200" slot="iconLeft" name="copy"></wui-icon>
+                Copy link
               </wui-link>
@@ -119,0 +119,0 @@ </wui-flex>

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

@@ -9,9 +9,62 @@ 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.bodyObserver = 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.bodyObserver?.unobserve(window.document.body);
+    }
+    firstUpdated() {
+        this.iframe.style.display = 'block';
+        const blueprint = this.renderRoot.querySelector('div');
+        this.bodyObserver = 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 - 50}px`;
+            this.iframe.style.left = `${dimensions.left}px`;
+            this.iframe.style.top = `${dimensions.top}px`;
+            this.ready = true;
+        });
+        this.bodyObserver.observe(window.document.body);
+    }
     render() {
-        return html `<p>Hello Transaction</p>`;
+        if (this.ready) {
+            this.onShowIframe();
+        }
+        return html `<div data-ready=${this.ready}></div>`;
     }
+    onShowIframe() {
+        const isMobile = window.innerWidth <= 430;
+        this.iframe.animate([
+            { opacity: 0, transform: isMobile ? 'translateY(50px)' : 'scale(.95)' },
+            { opacity: 1, transform: isMobile ? 'translateY(0)' : 'scale(1)' }
+        ], { duration: 200, easing: 'ease', fill: 'forwards', delay: 300 });
+    }
+    async onHideIframe() {
+        await this.iframe.animate([{ opacity: 1 }, { opacity: 0 }], {
+            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 +71,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;
+  }
+
+  [data-ready='false'] {
+    transform: scale(1.05);
+  }
+
+  @media (max-width: 430px) {
+    [data-ready='false'] {
+      transform: translateY(-50px);
+    }
+  }
+`;
 //# sourceMappingURL=styles.js.map

dist/esm/src/views/w3m-email-verify-device-view/index.js

@@ -29,17 +29,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         alignItems="center"
-        .padding=${['l', '0', 'l', '0']}
-        gap="l"
+        .padding=${['0', '3xl', 'xxl', '3xl']}
       >
-        <wui-text variant="paragraph-500" color="fg-100">
-          Register this device to continue
-        </wui-text>
-
-        <wui-flex flexDirection="column" alignItems="center">
-          <wui-text variant="small-500" color="fg-200">Check the instructions sent to</wui-text>
+        <wui-flex justifyContent="center" .padding=${['0', '0', 'xxl', '0']}>
+          <wui-icon-box
+            size="xl"
+            iconcolor="accent-100"
+            backgroundcolor="accent-100"
+            icon="verify"
+            background="opaque"
+          ></wui-icon-box>
+        </wui-flex>
+        <wui-text variant="large-600" color="fg-100"> Register this device to continue </wui-text>
+        <wui-flex
+          flexDirection="column"
+          alignItems="center"
+          .padding=${['s', '0', '0', '0']}
+        >
+          <wui-text variant="paragraph-400" color="fg-200">Check the instructions sent to</wui-text>
           <wui-text variant="paragraph-600" color="fg-100">${this.email}</wui-text>
         </wui-flex>
 
-        <wui-flex alignItems="center">
-          <wui-text variant="small-500" color="fg-200">Didn't receive it?</wui-text>
-          <wui-link>Resend code</wui-link>
+        <wui-flex alignItems="center" .padding=${['xxl', '0', '0', '0']}>
+          <wui-text variant="paragraph-400" color="fg-200" align="center">
+            This is a quick one-time approval that will keep your account secure</wui-text
+          >
         </wui-flex>
@@ -46,0 +56,0 @@ </wui-flex>

dist/esm/src/views/w3m-email-verify-device-view/styles.js

 import { css } from 'lit';
-export default css ``;
+export default css `
+  wui-icon-box {
+    height: 64px;
+    width: 64px;
+  }
+`;
 //# sourceMappingURL=styles.js.map

dist/esm/src/views/w3m-email-verify-otp-view/index.js

@@ -32,7 +32,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         <wui-flex flexDirection="column" alignItems="center">
-          <wui-text variant="paragraph-500" color="fg-100"> Enter the code we sent to </wui-text>
-          <wui-text variant="paragraph-600" color="fg-100">${this.email}</wui-text>
+          <wui-text variant="paragraph-400" color="fg-100"> Enter the code we sent to </wui-text>
+          <wui-text variant="paragraph-500" color="fg-100">${this.email}</wui-text>
         </wui-flex>
 
-        <wui-text variant="small-500" color="fg-200">The code expires in 10 minutes</wui-text>
+        <wui-text variant="small-400" color="fg-200">The code expires in 10 minutes</wui-text>
 
@@ -48,3 +48,3 @@ ${this.loading
         <wui-flex alignItems="center">
-          <wui-text variant="small-500" color="fg-200">Didn't receive it?</wui-text>
+          <wui-text variant="small-400" color="fg-200">Didn't receive it?</wui-text>
           <wui-link>Resend code</wui-link>
@@ -51,0 +51,0 @@ </wui-flex>

dist/types/src/client.d.ts

@@ -25,3 +25,3 @@ import type { ConnectionControllerClient, SIWEControllerClient, EventsControllerState, NetworkControllerClient, NetworkControllerState, OptionsControllerState, PublicStateControllerState, ThemeControllerState, ThemeMode, ThemeVariables, SIWEControllerClientState } from '@web3modal/core';
 export interface OpenOptions {
-    view: 'Account' | 'Connect' | 'Networks';
+    view: 'Account' | 'Connect' | 'Networks' | 'ApproveTransaction';
 }
@@ -28,0 +28,0 @@ export declare class Web3ModalScaffold {

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 bodyObserver?;
+    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-e39005b",
+  "version": "3.4.0-f1cf73f6",
   "type": "module",
@@ -19,8 +19,8 @@ "main": "./dist/esm/index.js",
   "dependencies": {
-    "@web3modal/core": "3.3.0-e39005b",
-    "@web3modal/ui": "3.3.0-e39005b",
+    "@web3modal/core": "3.4.0-f1cf73f6",
+    "@web3modal/ui": "3.4.0-f1cf73f6",
     "lit": "3.0.2"
   },
   "devDependencies": {
-    "@web3modal/smart-account": "3.3.0-e39005b"
+    "@web3modal/smart-account": "3.4.0-f1cf73f6"
   },
@@ -27,0 +27,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

282722

increased by1.99%

Lines of code

4762

increased by1.97%

Dependency changes

• + Added@web3modal/core@3.4.0-f1cf73f6(transitive)

• + Added@web3modal/ui@3.4.0-f1cf73f6(transitive)

• - Removed@web3modal/core@3.3.0-e39005b(transitive)

• - Removed@web3modal/ui@3.3.0-e39005b(transitive)

• Updated@web3modal/core@3.4.0-f1cf73f6

• Updated@web3modal/ui@3.4.0-f1cf73f6