diff --git a/apps/laboratory/package.json b/apps/laboratory/package.json index 0937276147..b13e0c697e 100644 --- a/apps/laboratory/package.json +++ b/apps/laboratory/package.json @@ -12,7 +12,7 @@ "@emotion/react": "11.11.1", "@emotion/styled": "11.11.0", "next": "13.4.12", - "framer-motion": "10.14.0", + "framer-motion": "10.15.0", "wagmi": "1.3.9", "viem": "1.4.2" } diff --git a/package-lock.json b/package-lock.json index 4bdf8c7738..58c46eaf16 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "@typescript-eslint/eslint-plugin": "6.2.0", "@typescript-eslint/parser": "6.2.0", "danger": "11.2.7", - "eslint": "8.45.0", + "eslint": "8.46.0", "eslint-config-prettier": "8.9.0", "lerna": "7.1.4", "prettier": "3.0.0", @@ -57,7 +57,7 @@ "@emotion/react": "11.11.1", "@emotion/styled": "11.11.0", "@web3modal/wagmi": "3.0.0", - "framer-motion": "10.14.0", + "framer-motion": "10.15.0", "next": "13.4.12", "viem": "1.4.2", "wagmi": "1.3.9" @@ -3744,9 +3744,9 @@ } }, "node_modules/@eslint/eslintrc": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.0.tgz", - "integrity": "sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.1.tgz", + "integrity": "sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==", "dev": true, "dependencies": { "ajv": "^6.12.4", @@ -3767,9 +3767,9 @@ } }, "node_modules/@eslint/js": { - "version": "8.44.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz", - "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==", + "version": "8.46.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz", + "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -5339,9 +5339,9 @@ } }, "node_modules/@safe-global/safe-gateway-typescript-sdk": { - "version": "3.7.3", - "resolved": "https://registry.npmjs.org/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.7.3.tgz", - "integrity": "sha512-O6JCgXNZWG0Vv8FnOEjKfcbsP0WxGvoPJk5ufqUrsyBlHup16It6oaLnn+25nXFLBZOHI1bz8429JlqAc2t2hg==", + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.8.0.tgz", + "integrity": "sha512-CiGWIHgIaOdICpDxp05Jw3OPslWTu8AnL0PhrCT1xZgIO86NlMMLzkGbeycJ4FHpTjA999O791Oxp4bZPIjgHA==", "dependencies": { "cross-fetch": "^3.1.5" } @@ -5500,11 +5500,11 @@ } }, "node_modules/@solana/web3.js": { - "version": "1.78.0", - "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-1.78.0.tgz", - "integrity": "sha512-CSjCjo+RELJ5puoZALfznN5EF0YvL1V8NQrQYovsdjE1lCV6SqbKAIZD0+9LlqCBoa1ibuUaR7G2SooYzvzmug==", + "version": "1.78.1", + "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-1.78.1.tgz", + "integrity": "sha512-r0WZAYwCfVElfONP/dmWkEfw6wufL+u7lWojEsNecn9PyIIYq+r4eb0h2MRiJ3xkctvTN76G0T6FTGcTJhXh3Q==", "dependencies": { - "@babel/runtime": "^7.22.3", + "@babel/runtime": "^7.22.6", "@noble/curves": "^1.0.0", "@noble/hashes": "^1.3.0", "@solana/buffer-layout": "^4.0.0", @@ -5516,7 +5516,7 @@ "buffer": "6.0.3", "fast-stable-stringify": "^1.0.0", "jayson": "^4.1.0", - "node-fetch": "^2.6.11", + "node-fetch": "^2.6.12", "rpc-websockets": "^7.5.1", "superstruct": "^0.14.2" } @@ -9817,9 +9817,9 @@ } }, "node_modules/browserslist": { - "version": "4.21.9", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz", - "integrity": "sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==", + "version": "4.21.10", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz", + "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==", "funding": [ { "type": "opencollective", @@ -9835,9 +9835,9 @@ } ], "dependencies": { - "caniuse-lite": "^1.0.30001503", - "electron-to-chromium": "^1.4.431", - "node-releases": "^2.0.12", + "caniuse-lite": "^1.0.30001517", + "electron-to-chromium": "^1.4.477", + "node-releases": "^2.0.13", "update-browserslist-db": "^1.0.11" }, "bin": { @@ -11322,9 +11322,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.475", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.475.tgz", - "integrity": "sha512-mTye5u5P98kSJO2n7zYALhpJDmoSQejIGya0iR01GpoRady8eK3bw7YHHnjA1Rfi4ZSLdpuzlAC7Zw+1Zu7Z6A==" + "version": "1.4.477", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.477.tgz", + "integrity": "sha512-shUVy6Eawp33dFBFIoYbIwLHrX0IZ857AlH9ug2o4rvbWmpaCUdBpQ5Zw39HRrfzAFm4APJE9V+E2A/WB0YqJw==" }, "node_modules/emoji-regex": { "version": "8.0.0", @@ -11517,27 +11517,27 @@ } }, "node_modules/eslint": { - "version": "8.45.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.45.0.tgz", - "integrity": "sha512-pd8KSxiQpdYRfYa9Wufvdoct3ZPQQuVuU5O6scNgMuOMYuxvH0IGaYK0wUFjo4UYYQQCUndlXiMbnxopwvvTiw==", + "version": "8.46.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.46.0.tgz", + "integrity": "sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", - "@eslint-community/regexpp": "^4.4.0", - "@eslint/eslintrc": "^2.1.0", - "@eslint/js": "8.44.0", + "@eslint-community/regexpp": "^4.6.1", + "@eslint/eslintrc": "^2.1.1", + "@eslint/js": "^8.46.0", "@humanwhocodes/config-array": "^0.11.10", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", - "ajv": "^6.10.0", + "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.2", "debug": "^4.3.2", "doctrine": "^3.0.0", "escape-string-regexp": "^4.0.0", - "eslint-scope": "^7.2.0", - "eslint-visitor-keys": "^3.4.1", - "espree": "^9.6.0", + "eslint-scope": "^7.2.2", + "eslint-visitor-keys": "^3.4.2", + "espree": "^9.6.1", "esquery": "^1.4.2", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", @@ -11613,9 +11613,9 @@ } }, "node_modules/eslint-scope": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.1.tgz", - "integrity": "sha512-CvefSOsDdaYYvxChovdrPo/ZGt8d5lrJWleAc1diXRKhHGiTYEI26cvo8Kle/wGnsizoCJjK73FMg1/IkIwiNA==", + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz", + "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==", "dev": true, "dependencies": { "esrecurse": "^4.3.0", @@ -11629,9 +11629,9 @@ } }, "node_modules/eslint-visitor-keys": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz", - "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==", + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz", + "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -12462,9 +12462,9 @@ } }, "node_modules/foreground-child/node_modules/signal-exit": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.0.2.tgz", - "integrity": "sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", "engines": { "node": ">=14" }, @@ -12494,9 +12494,9 @@ } }, "node_modules/framer-motion": { - "version": "10.14.0", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.14.0.tgz", - "integrity": "sha512-XMZCbki8+9+D9of6P0cFtGrSGItNvXUJqvGI8O5v5aSvprA3PNlcpgfLEfTIZ9woNuZtYv56dprktuQ+S2welw==", + "version": "10.15.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.15.0.tgz", + "integrity": "sha512-HDjWrYWgbO5orKuhnXETLFzk7UUvwWur2HFs2elAZ8lVpI49ClHql31DNTVvVBcOrSHfAOS4eBDBedIvOx634w==", "dependencies": { "tslib": "^2.4.0" }, @@ -19518,9 +19518,9 @@ } }, "node_modules/rollup": { - "version": "3.26.3", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.3.tgz", - "integrity": "sha512-7Tin0C8l86TkpcMtXvQu6saWH93nhG3dGQ1/+l5V2TDMceTxO7kDiK6GzbfLWNNxqJXm591PcEZUozZm51ogwQ==", + "version": "3.27.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.27.0.tgz", + "integrity": "sha512-aOltLCrYZ0FhJDm7fCqwTjIUEVjWjcydKBV/Zeid6Mn8BWgDCUBBWT5beM5ieForYNo/1ZHuGJdka26kvQ3Gzg==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -20803,9 +20803,9 @@ } }, "node_modules/ufo": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.1.2.tgz", - "integrity": "sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.2.0.tgz", + "integrity": "sha512-RsPyTbqORDNDxqAdQPQBpgqhWle1VcTSou/FraClYlHf6TZnQcGslpLcAphNR+sQW4q5lLWLbOsRlh9j24baQg==", "dev": true }, "node_modules/uglify-js": { @@ -21721,9 +21721,9 @@ } }, "node_modules/write-file-atomic/node_modules/signal-exit": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.0.2.tgz", - "integrity": "sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", "dev": true, "engines": { "node": ">=14" diff --git a/package.json b/package.json index 254d58e41e..14d7d2533d 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "@typescript-eslint/parser": "6.2.0", "@types/react": "18.2.17", "@types/react-dom": "18.2.7", - "eslint": "8.45.0", + "eslint": "8.46.0", "eslint-config-prettier": "8.9.0", "lerna": "7.1.4", "prettier": "3.0.0", diff --git a/packages/core/src/controllers/AccountController.ts b/packages/core/src/controllers/AccountController.ts index 77eb3de7ca..692ce7b220 100644 --- a/packages/core/src/controllers/AccountController.ts +++ b/packages/core/src/controllers/AccountController.ts @@ -9,6 +9,7 @@ export interface AccountControllerState { caipAddress?: CaipAddress address?: string balance?: string + balanceSymbol?: string profileName?: string profileImage?: string } @@ -41,8 +42,12 @@ export const AccountController = { state.address = caipAddress ? CoreHelperUtil.getPlainAddress(caipAddress) : undefined }, - setBalance(balance: AccountControllerState['balance']) { + setBalance( + balance: AccountControllerState['balance'], + balanceSymbol: AccountControllerState['balanceSymbol'] + ) { state.balance = balance + state.balanceSymbol = balanceSymbol }, setProfileName(profileName: AccountControllerState['profileName']) { @@ -58,6 +63,7 @@ export const AccountController = { state.caipAddress = undefined state.address = undefined state.balance = undefined + state.balanceSymbol = undefined state.profileName = undefined state.profileImage = undefined } diff --git a/packages/core/tests/controllers/AccountController.test.ts b/packages/core/tests/controllers/AccountController.test.ts index 250030739b..60a03a05ef 100644 --- a/packages/core/tests/controllers/AccountController.test.ts +++ b/packages/core/tests/controllers/AccountController.test.ts @@ -4,6 +4,7 @@ import { AccountController } from '../../index' // -- Setup -------------------------------------------------------------------- const caipAddress = 'eip155:1:0x123' const balance = '0.100' +const balanceSymbol = 'ETH' const profileName = 'john.eth' const profileImage = 'https://ipfs.com/0x123.png' @@ -25,8 +26,9 @@ describe('AccountController', () => { }) it('should update state correctly on setBalance()', () => { - AccountController.setBalance(balance) + AccountController.setBalance(balance, balanceSymbol) expect(AccountController.state.balance).toEqual(balance) + expect(AccountController.state.balanceSymbol).toEqual(balanceSymbol) }) it('should update state correctly on setProfileName()', () => { diff --git a/packages/scaffold-html/src/client.ts b/packages/scaffold-html/src/client.ts index d16c471063..8072049e84 100644 --- a/packages/scaffold-html/src/client.ts +++ b/packages/scaffold-html/src/client.ts @@ -57,8 +57,8 @@ export class Web3ModalScaffoldHtml { AccountController.setCaipAddress(caipAddress) } - protected setBalance: (typeof AccountController)['setBalance'] = balance => { - AccountController.setBalance(balance) + protected setBalance: (typeof AccountController)['setBalance'] = (balance, balanceSymbol) => { + AccountController.setBalance(balance, balanceSymbol) } protected setProfileName: (typeof AccountController)['setProfileName'] = profileName => { diff --git a/packages/scaffold-html/src/modal/w3m-modal/index.ts b/packages/scaffold-html/src/modal/w3m-modal/index.ts index fbab463b6e..2adbd43ada 100644 --- a/packages/scaffold-html/src/modal/w3m-modal/index.ts +++ b/packages/scaffold-html/src/modal/w3m-modal/index.ts @@ -5,6 +5,9 @@ import { customElement, state } from 'lit/decorators.js' import { animate } from 'motion' import styles from './styles' +// -- Helpers --------------------------------------------- // +const SCROLL_LOCK = 'scroll-lock' + @customElement('w3m-modal') export class W3mModal extends LitElement { public static styles = styles @@ -12,6 +15,8 @@ export class W3mModal extends LitElement { // -- Members ------------------------------------------- // private unsubscribe: (() => void)[] = [] + private abortController?: AbortController = undefined + // -- State & Properties -------------------------------- // @state() private open = ModalController.state.open @@ -26,6 +31,7 @@ export class W3mModal extends LitElement { public disconnectedCallback() { this.unsubscribe.forEach(unsubscribe => unsubscribe()) + this.onRemoveKeyboardListener() } // -- Render -------------------------------------------- // @@ -33,7 +39,7 @@ export class W3mModal extends LitElement { return this.open ? html` - + @@ -51,14 +57,64 @@ export class W3mModal extends LitElement { } private async onClose() { + this.onScrollUnlock() await animate(this, { opacity: [1, 0] }, { duration: 0.2 }).finished SnackController.hide() this.open = false + this.onRemoveKeyboardListener() } - private onOpen() { + private async onOpen() { + this.onScrollLock() this.open = true - animate(this, { opacity: [0, 1] }, { duration: 0.2 }) + await animate(this, { opacity: [0, 1] }, { duration: 0.2 }).finished + this.onAddKeyboardListener() + } + + private onScrollLock() { + const styleTag = document.createElement('style') + styleTag.dataset.w3m = SCROLL_LOCK + styleTag.textContent = ` + html, body { + touch-action: none; + overflow: hidden; + overscroll-behavior: contain; + scrollbar-gutter: stable; + } + ` + document.head.appendChild(styleTag) + } + + private onScrollUnlock() { + const styleTag = document.head.querySelector(`style[data-w3m="${SCROLL_LOCK}"]`) + if (styleTag) { + styleTag.remove() + } + } + + private onAddKeyboardListener() { + this.abortController = new AbortController() + const card = this.shadowRoot?.querySelector('wui-card') + card?.focus() + window.addEventListener( + 'keydown', + event => { + if (event.key === 'Escape') { + ModalController.close() + } else if (event.key === 'Tab') { + const { tagName } = event.target as HTMLElement + if (tagName && !tagName.includes('W3M-') && !tagName.includes('WUI-')) { + card?.focus() + } + } + }, + this.abortController + ) + } + + private onRemoveKeyboardListener() { + this.abortController?.abort() + this.abortController = undefined } } diff --git a/packages/scaffold-html/src/modal/w3m-modal/styles.ts b/packages/scaffold-html/src/modal/w3m-modal/styles.ts index be2430ce0c..47a51377fb 100644 --- a/packages/scaffold-html/src/modal/w3m-modal/styles.ts +++ b/packages/scaffold-html/src/modal/w3m-modal/styles.ts @@ -1,6 +1,24 @@ import { css } from 'lit' export default css` + @keyframes zoom-in { + 0% { + transform: scale(0.95) translateY(0); + } + 100% { + transform: scale(1) translateY(0); + } + } + + @keyframes slide-in { + 0% { + transform: scale(1) translateY(50px); + } + 100% { + transform: scale(1) translateY(0); + } + } + wui-overlay { display: flex; align-items: center; @@ -11,11 +29,24 @@ export default css` max-width: 360px; width: 100%; position: relative; + animation-duration: 0.2s; + animation-name: zoom-in; + animation-fill-mode: backwards; + animation-timing-function: var(--wui-ease-out-power-4); + outline: none; } - @media (max-width: 360px) { + @media (max-width: 430px) { wui-overlay { align-items: flex-end; } + + wui-card { + max-width: 100%; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom: none; + animation-name: slide-in; + } } ` diff --git a/packages/scaffold-html/src/partials/w3m-connecting-wc-desktop/index.ts b/packages/scaffold-html/src/partials/w3m-connecting-wc-desktop/index.ts index 8f479b0ebb..4e2064853b 100644 --- a/packages/scaffold-html/src/partials/w3m-connecting-wc-desktop/index.ts +++ b/packages/scaffold-html/src/partials/w3m-connecting-wc-desktop/index.ts @@ -46,17 +46,13 @@ export class W3mConnectingWcDesktop extends LitElement { this.isReady() - const label = `Continue in ${this.listing.name}` - const subLabel = this.error ? 'Connection declined' : 'Accept connection request in the wallet' - return html` ` diff --git a/packages/scaffold-html/src/partials/w3m-connecting-wc-injected/index.ts b/packages/scaffold-html/src/partials/w3m-connecting-wc-injected/index.ts index 122892dcce..d75f3a70b1 100644 --- a/packages/scaffold-html/src/partials/w3m-connecting-wc-injected/index.ts +++ b/packages/scaffold-html/src/partials/w3m-connecting-wc-injected/index.ts @@ -25,16 +25,12 @@ export class W3mConnectingWcInjected extends LitElement { throw new Error('w3m-connecting-wc-injected: No listing provided') } - const label = `Continue in ${this.listing.name}` - const subLabel = this.error ? 'Connection declined' : 'Accept connection request in the wallet' - return html` ` } diff --git a/packages/scaffold-html/src/partials/w3m-connecting-wc-mobile/index.ts b/packages/scaffold-html/src/partials/w3m-connecting-wc-mobile/index.ts index 2f9ef9402f..fbaa81cdbb 100644 --- a/packages/scaffold-html/src/partials/w3m-connecting-wc-mobile/index.ts +++ b/packages/scaffold-html/src/partials/w3m-connecting-wc-mobile/index.ts @@ -17,8 +17,6 @@ export class W3mConnectingWcMobile extends LitElement { private unsubscribe: (() => void)[] = [] - private timeout?: ReturnType = undefined - // -- State & Properties -------------------------------- // @state() private error = false @@ -35,7 +33,6 @@ export class W3mConnectingWcMobile extends LitElement { public disconnectedCallback() { this.unsubscribe.forEach(unsubscribe => unsubscribe()) - clearTimeout(this.timeout) } // -- Render -------------------------------------------- // @@ -46,17 +43,14 @@ export class W3mConnectingWcMobile extends LitElement { this.isReady() - const label = `Continue in ${this.listing.name}` - const subLabel = this.error ? 'Connection declined' : 'Accept connection request in the wallet' - return html` ` } @@ -64,10 +58,8 @@ export class W3mConnectingWcMobile extends LitElement { // -- Private ------------------------------------------- // private isReady() { if (!this.ready && this.uri) { - this.timeout = setTimeout(() => { - this.ready = true - this.onConnect() - }, 250) + this.ready = true + this.onConnect() } } diff --git a/packages/scaffold-html/src/partials/w3m-connecting-wc-web/index.ts b/packages/scaffold-html/src/partials/w3m-connecting-wc-web/index.ts index 2ca82e1c8a..973edd5c6f 100644 --- a/packages/scaffold-html/src/partials/w3m-connecting-wc-web/index.ts +++ b/packages/scaffold-html/src/partials/w3m-connecting-wc-web/index.ts @@ -46,17 +46,13 @@ export class W3mConnectingWcWeb extends LitElement { this.isReady() - const label = `Continue in ${this.listing.name}` - const subLabel = this.error ? 'Connection declined' : 'Accept connection request in the wallet' - return html` ` diff --git a/packages/scaffold-html/src/partials/w3m-connecting-widget/index.ts b/packages/scaffold-html/src/partials/w3m-connecting-widget/index.ts index 438079e6b8..671bfaf066 100644 --- a/packages/scaffold-html/src/partials/w3m-connecting-widget/index.ts +++ b/packages/scaffold-html/src/partials/w3m-connecting-widget/index.ts @@ -15,9 +15,7 @@ export class W3mConnectingWidget extends LitElement { @property({ type: Boolean }) public error = false - @property() public label = '' - - @property() public subLabel?: string = undefined + @property() public name = 'Wallet' @property() public onConnect?: (() => void) | (() => Promise) = undefined @@ -36,6 +34,8 @@ export class W3mConnectingWidget extends LitElement { public render() { this.onShowRetry() const subLabelColor = this.error ? 'error-100' : 'fg-200' + const subLabel = this.error ? 'Connection declined' : 'Accept connection request in the wallet' + const label = `Continue in ${this.name}` return html` - ${this.label} - - ${this.subLabel - ? html`${this.subLabel}` - : null} + ${label} + ${subLabel} diff --git a/packages/scaffold-html/src/views/w3m-account-view/index.ts b/packages/scaffold-html/src/views/w3m-account-view/index.ts index bed510a82c..2cc0ecc7ca 100644 --- a/packages/scaffold-html/src/views/w3m-account-view/index.ts +++ b/packages/scaffold-html/src/views/w3m-account-view/index.ts @@ -27,6 +27,8 @@ export class W3mAccountView extends LitElement { @state() private balance = AccountController.state.balance + @state() private balanceSymbol = AccountController.state.balanceSymbol + public constructor() { super() this.usubscribe.push( @@ -36,6 +38,7 @@ export class W3mAccountView extends LitElement { this.profileImage = val.profileImage this.profileName = val.profileName this.balance = val.balance + this.balanceSymbol = val.balanceSymbol } else { ModalController.close() } @@ -86,7 +89,7 @@ export class W3mAccountView extends LitElement { icon="networkPlaceholder" @click=${this.onNetworks.bind(this)} > - ${this.balance ?? '_._'} + ${this.showBalance()} 6) { + formattedBalance = this.balance.substring(0, 6) + } else if (typeof this.balance === 'string') { + formattedBalance = this.balance + } + + return formattedBalance ? `${formattedBalance} ${this.balanceSymbol}` : '_._' + } } declare global { diff --git a/packages/scaffold-html/src/views/w3m-connecting-external-view/index.ts b/packages/scaffold-html/src/views/w3m-connecting-external-view/index.ts index 266ff16462..3c3bc40d85 100644 --- a/packages/scaffold-html/src/views/w3m-connecting-external-view/index.ts +++ b/packages/scaffold-html/src/views/w3m-connecting-external-view/index.ts @@ -1,6 +1,7 @@ import { ConnectionController, ModalController, RouterController } from '@web3modal/core' import { LitElement, html } from 'lit' import { customElement, state } from 'lit/decorators.js' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connecting-external-view') export class W3mConnectingExternalView extends LitElement { @@ -16,15 +17,11 @@ export class W3mConnectingExternalView extends LitElement { throw new Error('w3m-connecting-view: No connector provided') } - const label = `Continue in ${this.connector.name}` - const subLabel = this.error ? 'Connection declined' : 'Accept connection request in the wallet' - return html` ` } diff --git a/packages/scaffold-html/src/views/w3m-connecting-wc-view/index.ts b/packages/scaffold-html/src/views/w3m-connecting-wc-view/index.ts index d24d87e64c..61aa8a4d4c 100644 --- a/packages/scaffold-html/src/views/w3m-connecting-wc-view/index.ts +++ b/packages/scaffold-html/src/views/w3m-connecting-wc-view/index.ts @@ -91,7 +91,7 @@ export class W3mConnectingWcView extends LitElement { const isInjectedConnector = connectors.find(c => c.type === 'INJECTED') const isInjectedInstalled = ConnectionController.checkInjectedInstalled(injectedIds) const isInjectedWc = isInjected && isInjectedInstalled && isInjectedConnector - const isDesktopWc = desktop?.native + const isDesktopWc = desktop?.native && !CoreHelperUtil.isMobile() // Populate all preferences if (isInjectedWc) { diff --git a/packages/scaffold-html/src/views/w3m-network-switch-view/index.ts b/packages/scaffold-html/src/views/w3m-network-switch-view/index.ts index e115526e41..401b88ba61 100644 --- a/packages/scaffold-html/src/views/w3m-network-switch-view/index.ts +++ b/packages/scaffold-html/src/views/w3m-network-switch-view/index.ts @@ -66,7 +66,6 @@ export class W3mNetworkSwitchView extends LitElement {