@web3modal/scaffold - npm Package Compare versions

Comparing version 3.0.0-f1fdfdc9 to 3.0.0

dist/esm/index.js

@@ -29,4 +29,6 @@ export * from './src/modal/w3m-account-button/index.js';
 export * from './src/partials/w3m-legal-footer/index.js';
+export * from './src/partials/w3m-mobile-download-links/index.js';
 export * from './src/partials/w3m-snackbar/index.js';
 export { Web3ModalScaffold } from './src/client.js';
+export { CoreHelperUtil } from '@web3modal/core';
 //# sourceMappingURL=index.js.map

dist/esm/src/client.js

@@ -1,2 +0,2 @@
-import { AccountController, ApiController, BlockchainApiController, ConnectionController, ConnectorController, CoreHelperUtil, ModalController, NetworkController, OptionsController, ThemeController } from '@web3modal/core';
+import { AccountController, ApiController, BlockchainApiController, ConnectionController, ConnectorController, CoreHelperUtil, ModalController, NetworkController, OptionsController, PublicStateController, ThemeController } from '@web3modal/core';
 import { setColorTheme, setThemeVariables } from '@web3modal/ui';
@@ -39,2 +39,5 @@ let isInitialized = false;
         };
+        this.addConnector = connector => {
+            ConnectorController.addConnector(connector);
+        };
         this.resetWcConnection = () => {
@@ -75,2 +78,8 @@ ConnectionController.resetWcConnection();
     }
+    getState() {
+        return { ...PublicStateController.state };
+    }
+    subscribeState(callback) {
+        return PublicStateController.subscribe(callback);
+    }
     initControllers(options) {
@@ -100,3 +109,3 @@ NetworkController.setClient(options.networkControllerClient);
             this.initPromise = new Promise(async (resolve) => {
-                await Promise.all([import('@web3modal/ui'), import('./modal/w3m-modal')]);
+                await Promise.all([import('@web3modal/ui'), import('./modal/w3m-modal/index.js')]);
                 const modal = document.createElement('w3m-modal');
@@ -103,0 +112,0 @@ document.body.insertAdjacentElement('beforeend', modal);

dist/esm/src/modal/w3m-modal/index.js

@@ -30,3 +30,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             ? html `
-          <wui-overlay @click=${this.onOverlayClick.bind(this)}>
+          <wui-flex @click=${this.onOverlayClick.bind(this)}>
             <wui-card role="alertdialog" aria-modal="true" tabindex="0">
@@ -37,3 +37,3 @@ <w3m-header></w3m-header>
             </wui-card>
-          </wui-overlay>
+          </wui-flex>
         `
@@ -49,5 +49,4 @@ : null;
         const { themeVariables, themeMode } = ThemeController.state;
-        initializeTheming(themeVariables, themeMode);
         const defaultThemeMode = UiHelperUtil.getColorTheme(themeMode);
-        ThemeController.setThemeMode(defaultThemeMode);
+        initializeTheming(themeVariables, defaultThemeMode);
     }
@@ -71,3 +70,4 @@ async onClose() {
             easing: 'ease',
-            fill: 'forwards'
+            fill: 'forwards',
+            delay: 300
         }).finished;
@@ -77,6 +77,2 @@ this.onAddKeyboardListener();
     onScrollLock() {
-        const { body } = document;
-        const { innerHeight: viewportHeight } = window;
-        const scrollHeight = body?.scrollHeight;
-        const scrollbarGutter = scrollHeight > viewportHeight ? 'scrollbar-gutter: stable;' : '';
         const styleTag = document.createElement('style');
@@ -89,5 +85,6 @@ styleTag.dataset['w3m'] = SCROLL_LOCK;
         overscroll-behavior: contain;
-        min-height: 100vh;
-       ${scrollbarGutter}
       }
+      w3m-modal {
+        pointer-events: auto;
+      }
     `;
@@ -94,0 +91,0 @@ document.head.appendChild(styleTag);

dist/esm/src/modal/w3m-modal/styles.js

 import { css } from 'lit';
 export default css `
+  :host {
+    z-index: var(--w3m-z-index);
+    display: block;
+    backface-visibility: hidden;
+    will-change: opacity;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    opacity: 0;
+    background-color: var(--wui-cover);
+  }
+
   @keyframes zoom-in {
@@ -25,2 +40,3 @@ 0% {
     position: relative;
+    animation-delay: 0.3s;
     animation-duration: 0.2s;
@@ -33,4 +49,24 @@ animation-name: zoom-in;
 
+  wui-flex {
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  @media (max-height: 700px) and (min-width: 431px) {
+    wui-flex {
+      align-items: flex-start;
+    }
+
+    wui-card {
+      margin: var(--wui-spacing-xxl) 0px;
+    }
+  }
+
   @media (max-width: 430px) {
-    wui-overlay {
+    wui-flex {
       align-items: flex-end;
@@ -37,0 +73,0 @@ }

dist/esm/src/modal/w3m-network-button/index.js

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { AccountController, AssetController, ModalController, NetworkController } from '@web3modal/core';
+import { AccountController, AssetUtil, ModalController, NetworkController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
@@ -17,3 +17,2 @@ import { customElement, property, state } from 'lit/decorators.js';
         this.disabled = false;
-        this.networkImages = AssetController.state.networkImages;
         this.network = NetworkController.state.caipNetwork;
@@ -23,4 +22,3 @@ this.connected = AccountController.state.isConnected;
             NetworkController.subscribeKey('caipNetwork', val => (this.network = val)),
-            AccountController.subscribeKey('isConnected', val => (this.connected = val)),
-            AssetController.subscribeNetworkImages(val => (this.networkImages = { ...val }))
+            AccountController.subscribeKey('isConnected', val => (this.connected = val))
         ]);
@@ -32,7 +30,6 @@ }
     render() {
-        const networkImage = this.networkImages[this.network?.imageId ?? ''];
         return html `
       <wui-network-button
         .disabled=${Boolean(this.disabled)}
-        imageSrc=${ifDefined(networkImage)}
+        imageSrc=${ifDefined(AssetUtil.getNetworkImage(this.network))}
         @click=${this.onClick.bind(this)}
@@ -53,5 +50,2 @@ >
     state()
-], W3mNetworkButton.prototype, "networkImages", void 0);
-__decorate([
-    state()
 ], W3mNetworkButton.prototype, "network", void 0);
@@ -58,0 +52,0 @@ __decorate([

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

@@ -24,3 +24,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                 this.onConnect?.();
-            }, 250);
+            }, 200);
         }
@@ -27,0 +27,0 @@ }

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

@@ -22,3 +22,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             this.error = false;
-            await ConnectionController.connectExternal('injected');
+            await ConnectionController.connectExternal({ id: 'injected' });
             ModalController.close();
@@ -25,0 +25,0 @@ }

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

@@ -40,2 +40,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
       </wui-flex>
+
+      <w3m-mobile-download-links .wallet=${this.wallet}></w3m-mobile-download-links>
     `;
@@ -47,3 +49,3 @@ }
                 this.ready = true;
-            }, 250);
+            }, 200);
         }
@@ -50,0 +52,0 @@ }

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

@@ -34,2 +34,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         this.buffering = false;
+        this.isMobile = false;
         this.onRetry = undefined;
@@ -121,2 +122,5 @@ this.unsubscribe.push(...[
             : null}
+      ${this.isMobile
+            ? html `<w3m-mobile-download-links .wallet=${this.wallet}></w3m-mobile-download-links>`
+            : null}
     `;
@@ -180,4 +184,7 @@ }
 __decorate([
+    property({ type: Boolean })
+], W3mConnectingWidget.prototype, "isMobile", void 0);
+__decorate([
     property()
 ], W3mConnectingWidget.prototype, "onRetry", void 0);
 //# sourceMappingURL=index.js.map

dist/esm/src/views/w3m-account-view/index.js

@@ -83,7 +83,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             </wui-text>
-            <wui-button size="sm" variant="shade" @click=${this.onExplorer.bind(this)}>
-              <wui-icon size="sm" color="inherit" slot="iconLeft" name="compass"></wui-icon>
-              Block Explorer
-              <wui-icon size="sm" color="inherit" slot="iconRight" name="externalLink"></wui-icon>
-            </wui-button>
+
+            ${this.explorerBtnTemplate()}
           </wui-flex>
@@ -119,2 +116,15 @@ </wui-flex>
     }
+    explorerBtnTemplate() {
+        const { addressExplorerUrl } = AccountController.state;
+        if (!addressExplorerUrl) {
+            return null;
+        }
+        return html `
+      <wui-button size="sm" variant="shade" @click=${this.onExplorer.bind(this)}>
+        <wui-icon size="sm" color="inherit" slot="iconLeft" name="compass"></wui-icon>
+        Block Explorer
+        <wui-icon size="sm" color="inherit" slot="iconRight" name="externalLink"></wui-icon>
+      </wui-button>
+    `;
+    }
     isMultiNetwork() {
@@ -121,0 +131,0 @@ const { requestedCaipNetworks } = NetworkController.state;

dist/esm/src/views/w3m-connect-view/index.js

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ApiController, AssetUtil, ConnectionController, ConnectorController, CoreHelperUtil, OptionsController, RouterController, StorageUtil } from '@web3modal/core';
+import { ApiController, AssetUtil, ConnectorController, CoreHelperUtil, OptionsController, RouterController, StorageUtil } from '@web3modal/core';
 import { LitElement, html } from 'lit';
@@ -26,3 +26,4 @@ import { customElement, state } from 'lit/decorators.js';
       <wui-flex flexDirection="column" padding="s" gap="xs">
-        ${this.walletConnectConnectorTemplate()} ${this.recentTemplate()} ${this.featuredTemplate()}
+        ${this.walletConnectConnectorTemplate()} ${this.recentTemplate()}
+        ${this.announcedTemplate()} ${this.injectedTemplate()} ${this.featuredTemplate()}
         ${this.customTemplate()} ${this.recommendedTemplate()} ${this.connectorsTemplate()}
@@ -96,16 +97,24 @@ ${this.allWalletsTemplate()}
     }
-    connectorsTemplate() {
+    announcedTemplate() {
         return this.connectors.map(connector => {
-            if (connector.type === 'WALLET_CONNECT') {
+            if (connector.type !== 'EIP6963') {
                 return null;
             }
-            let tagLabel = undefined;
-            let tagVariant = undefined;
-            if (connector.type === 'INJECTED') {
-                const isInstalled = ConnectionController.checkInjectedInstalled();
-                if (!isInstalled) {
-                    return null;
-                }
-                tagLabel = 'installed';
-                tagVariant = 'success';
+            return html `
+        <wui-list-wallet
+          imageSrc=${ifDefined(AssetUtil.getConnectorImage(connector))}
+          name=${connector.name ?? 'Unknown'}
+          @click=${() => this.onConnector(connector)}
+          tagLabel="installed"
+          tagVariant="success"
+        >
+        </wui-list-wallet>
+      `;
+        });
+    }
+    injectedTemplate() {
+        const announced = this.connectors.find(c => c.type === 'EIP6963');
+        return this.connectors.map(connector => {
+            if (connector.type !== 'INJECTED') {
+                return null;
             }
@@ -117,4 +126,4 @@ return html `
           @click=${() => this.onConnector(connector)}
-          tagLabel=${ifDefined(tagLabel)}
-          tagVariant=${ifDefined(tagVariant)}
+          tagLabel=${ifDefined(announced ? undefined : 'installed')}
+          tagVariant=${ifDefined(announced ? undefined : 'success')}
         >
@@ -125,3 +134,19 @@ </wui-list-wallet>
     }
+    connectorsTemplate() {
+        return this.connectors.map(connector => {
+            if (['WALLET_CONNECT', 'INJECTED', 'EIP6963'].includes(connector.type)) {
+                return null;
+            }
+            return html `
+        <wui-list-wallet
+          imageSrc=${ifDefined(AssetUtil.getConnectorImage(connector))}
+          name=${connector.name ?? 'Unknown'}
+          @click=${() => this.onConnector(connector)}
+        >
+        </wui-list-wallet>
+      `;
+        });
+    }
     allWalletsTemplate() {
+        const roundedCount = Math.floor(ApiController.state.count / 10) * 10;
         return html `
@@ -133,3 +158,3 @@ <wui-list-wallet
         @click=${() => RouterController.push('AllWallets')}
-        tagLabel=${`${ApiController.state.count}+`}
+        tagLabel=${`${roundedCount}+`}
         tagVariant="shade"
@@ -142,7 +167,14 @@ ></wui-list-wallet>
         const { customWallets } = OptionsController.state;
-        if (!recommended.length || featured.length || customWallets?.length) {
+        const { connectors } = ConnectorController.state;
+        const recent = StorageUtil.getRecentWallets();
+        const eip6963 = connectors.filter(c => c.type === 'EIP6963');
+        if (!recommended.length) {
             return null;
         }
-        const [first, second] = this.filterOutRecentWallets(recommended);
-        return [first, second].map(wallet => html `
+        const featuredLength = featured?.length ?? 0;
+        const customLength = customWallets?.length ?? 0;
+        const overrideLength = featuredLength + customLength + eip6963.length + recent.length;
+        const maxRecommended = Math.max(0, 2 - overrideLength);
+        const wallets = this.filterOutRecentWallets(recommended).slice(0, maxRecommended);
+        return wallets.map(wallet => html `
         <wui-list-wallet
@@ -149,0 +181,0 @@ imageSrc=${ifDefined(AssetUtil.getWalletImage(wallet))}

dist/esm/src/views/w3m-connecting-external-view/index.js

@@ -24,3 +24,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             if (this.connector) {
-                await ConnectionController.connectExternal(this.connector.id);
+                await ConnectionController.connectExternal(this.connector);
                 ModalController.close();
@@ -27,0 +27,0 @@ }

dist/esm/src/views/w3m-connecting-wc-view/index.js

@@ -112,3 +112,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                 return html `
-          <w3m-connecting-wc-mobile .onRetry=${() => this.initializeConnection(true)}>
+          <w3m-connecting-wc-mobile isMobile .onRetry=${() => this.initializeConnection(true)}>
           </w3m-connecting-wc-mobile>
@@ -115,0 +115,0 @@ `;

dist/esm/src/views/w3m-network-switch-view/index.js

@@ -100,2 +100,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                 await NetworkController.switchActiveNetwork(this.network);
+                RouterController.goBack();
             }
@@ -102,0 +103,0 @@ }

dist/types/index.d.ts

@@ -29,2 +29,3 @@ export * from './src/modal/w3m-account-button/index.js';
 export * from './src/partials/w3m-legal-footer/index.js';
+export * from './src/partials/w3m-mobile-download-links/index.js';
 export * from './src/partials/w3m-snackbar/index.js';
@@ -34,1 +35,2 @@ export { Web3ModalScaffold } from './src/client.js';
 export type * from '@web3modal/core';
+export { CoreHelperUtil } from '@web3modal/core';

dist/types/src/client.d.ts

@@ -1,2 +0,2 @@
-import type { ApiControllerState, ConnectionControllerClient, NetworkControllerClient, NetworkControllerState, OptionsControllerState, ThemeControllerState, ThemeMode, ThemeVariables } from '@web3modal/core';
+import type { ApiControllerState, ConnectionControllerClient, NetworkControllerClient, NetworkControllerState, OptionsControllerState, PublicStateControllerState, ThemeControllerState, ThemeMode, ThemeVariables } from '@web3modal/core';
 import { AccountController, BlockchainApiController, ConnectionController, ConnectorController, NetworkController } from '@web3modal/core';
@@ -34,2 +34,7 @@ export interface LibraryOptions {
     subscribeTheme(callback: (newState: ThemeControllerState) => void): () => void;
+    getState(): {
+        open: boolean;
+        selectedNetworkId?: `${string}:${string}` | undefined;
+    };
+    subscribeState(callback: (newState: PublicStateControllerState) => void): () => void;
     protected setIsConnected: (typeof AccountController)['setIsConnected'];
@@ -47,2 +52,3 @@ protected setCaipAddress: (typeof AccountController)['setCaipAddress'];
     protected setConnectors: (typeof ConnectorController)['setConnectors'];
+    protected addConnector: (typeof ConnectorController)['addConnector'];
     protected resetWcConnection: (typeof ConnectionController)['resetWcConnection'];
@@ -49,0 +55,0 @@ protected fetchIdentity: (typeof BlockchainApiController)['fetchIdentity'];

dist/types/src/modal/w3m-network-button/index.d.ts

@@ -6,3 +6,2 @@ import type { WuiNetworkButton } from '@web3modal/ui';
     disabled?: WuiNetworkButton['disabled'];
-    private networkImages;
     private network;
@@ -9,0 +8,0 @@ private connected;

dist/types/src/utils/w3m-connecting-widget/index.d.ts

@@ -24,2 +24,3 @@ import type { IconType } from '@web3modal/ui';
     buffering: boolean;
+    isMobile: boolean;
     onRetry?: (() => void) | (() => Promise<void>);
@@ -26,0 +27,0 @@ constructor();

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

@@ -16,2 +16,3 @@ import { LitElement } from 'lit';
     render(): import("lit-html").TemplateResult<1>;
+    private explorerBtnTemplate;
     private isMultiNetwork;
@@ -18,0 +19,0 @@ private onCopyAddress;

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

@@ -13,2 +13,4 @@ import { LitElement } from 'lit';
     private recentTemplate;
+    private announcedTemplate;
+    private injectedTemplate;
     private connectorsTemplate;
@@ -15,0 +17,0 @@ private allWalletsTemplate;

package.json

 {
   "name": "@web3modal/scaffold",
-  "version": "3.0.0-f1fdfdc9",
+  "version": "3.0.0",
   "type": "module",
@@ -8,7 +8,8 @@ "main": "./dist/esm/index.js",
   "files": [
-    "dist"
+    "dist",
+    "!tsconfig.tsbuildinfo"
   ],
   "scripts": {
     "build:clean": "rm -rf dist",
-    "build": "npm run build:clean; tsc --build; rm dist/esm/tsconfig.tsbuildinfo",
+    "build": "npm run build:clean; tsc --build",
     "watch": "npm run build:clean; tsc --watch",
@@ -19,4 +20,4 @@ "typecheck": "tsc --noEmit",
   "dependencies": {
-    "@web3modal/core": "3.0.0-f1fdfdc9",
-    "@web3modal/ui": "3.0.0-f1fdfdc9",
+    "@web3modal/core": "3.0.0",
+    "@web3modal/ui": "3.0.0",
     "lit": "2.8.0"
@@ -23,0 +24,0 @@ },

readme.md

 #### 📚 [Documentation](https://docs.walletconnect.com/2.0/web3modal/about)
 
-#### 🔎 [Examples](https://github.com/WalletConnect/web3modal-examples)
-
 #### 🔗 [Website](https://web3modal.com)
@@ -10,1 +8,5 @@
 Your on-ramp to web3 multichain. Web3Modal is a versatile library that makes it super easy to connect users with your Dapp and start interacting with the blockchain.
+
+<p align="center">
+  <img src="./.github/assets/header.png" alt="" border="0">
+</p>

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

223685

increased by5.03%

Number of package files

140

increased by4.48%

Lines of code

3814

increased by6.18%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

12

increased by20%

Dependency changes

• + Added@web3modal/core@3.0.0(transitive)

• + Added@web3modal/ui@3.0.0(transitive)

• - Removed@web3modal/core@3.0.0-f1fdfdc9(transitive)

• - Removed@web3modal/ui@3.0.0-f1fdfdc9(transitive)

• Updated@web3modal/core@3.0.0

• Updated@web3modal/ui@3.0.0