From 3bf7c486477ba05da0808150504c23d4419423d3 Mon Sep 17 00:00:00 2001 From: Taylor Dawson Date: Tue, 24 Jan 2023 11:37:27 -0800 Subject: [PATCH 1/6] Enhancement/hw wallets mobile (#1453) * adjust table font size * Adds overflow hidden * adjust for small viewport heights * add 0 width space * Update packages/hw-common/src/elements/TableHeader.svelte * Update formatting + add note * Add max-height + fix max-width * update icon-container - adjust sizing on desktop - add svg styling to control sizing of 3rd party svgs - remove code to pre-fill icon metadata - update icon imports in components - remove old bn svg file * comment out logo and icon options in demo to view default bn-icon display * Add hw versions to the demo project * Add hw-common changes to dcent * bump version in demo for testing Co-authored-by: Adam Carpenter Co-authored-by: Gustavo Esquinca --- docs/package.json | 4 +- docs/src/routes/docs/[...3]modules/core.md | 3 + docs/yarn.lock | 178 ++---------------- packages/common/src/types.ts | 15 +- packages/core/README.md | 7 +- packages/core/package.json | 2 +- packages/core/src/icons/bn-icon.ts | 25 +++ packages/core/src/icons/index.ts | 6 +- packages/core/src/index.ts | 25 +-- packages/core/src/types.ts | 16 +- packages/core/src/validation.ts | 2 +- packages/core/src/views/connect/Index.svelte | 11 +- .../core/src/views/connect/Sidebar.svelte | 14 +- packages/dcent/package.json | 4 +- packages/demo/package.json | 10 +- packages/demo/src/App.svelte | 4 +- packages/hw-common/package.json | 2 +- packages/hw-common/src/account-select.ts | 1 + .../src/elements/AddressTable.svelte | 26 ++- .../hw-common/src/elements/TableHeader.svelte | 73 ++++++- .../hw-common/src/views/AccountSelect.svelte | 36 +++- packages/injected/src/icons/zerion.ts | 2 +- packages/keepkey/package.json | 4 +- packages/keystone/package.json | 4 +- packages/react/package.json | 4 +- packages/sequence/src/index.ts | 87 ++++----- packages/trezor/package.json | 4 +- packages/vue/package.json | 4 +- 28 files changed, 292 insertions(+), 281 deletions(-) create mode 100644 packages/core/src/icons/bn-icon.ts diff --git a/docs/package.json b/docs/package.json index 640548d0e..b707517eb 100644 --- a/docs/package.json +++ b/docs/package.json @@ -55,7 +55,7 @@ "type": "module", "dependencies": { "@web3-onboard/coinbase": "^2.1.4", - "@web3-onboard/core": "^2.12.0", + "@web3-onboard/core": "^2.13.1", "@web3-onboard/dcent": "^2.2.2", "@web3-onboard/enkrypt": "^2.0.0", "@web3-onboard/fortmatic": "^2.0.14", @@ -64,7 +64,7 @@ "@web3-onboard/injected-wallets": "^2.4.0", "@web3-onboard/keepkey": "^2.3.2", "@web3-onboard/keystone": "^2.3.2", - "@web3-onboard/ledger": "^2.3.2", + "@web3-onboard/ledger": "^2.4.1", "@web3-onboard/magic": "^2.1.3", "@web3-onboard/mew-wallet": "^2.0.0", "@web3-onboard/portis": "^2.1.3", diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md index 9ca88dac5..52079d872 100644 --- a/docs/src/routes/docs/[...3]modules/core.md +++ b/docs/src/routes/docs/[...3]modules/core.md @@ -102,8 +102,11 @@ type AppMetadata = { name: string // SVG icon string, with height or width (whichever is larger) set to 100% or a valid image URL // note: if using an emoji make sure to send base64 string + // Note: `icon` is displayed on both mobile AND desktop. If `logo` + // below is provided then `icon` displays on mobile and `logo` on desktop icon: string // Optional wide format logo (ie icon and text) to be displayed in the sidebar of connect modal. Defaults to icon if not provided + // Note: This will ONLY display on desktop. It is best used with wide format logos. Use `icon` for standard 40x40 icons. logo?: string // description of app description?: string diff --git a/docs/yarn.lock b/docs/yarn.lock index f0e6b1c53..235bb6efb 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1824,114 +1824,10 @@ rxjs "^6.6.3" typescript "^4.6.2" -"@ledgerhq/cryptoassets@^6.37.0": - version "6.37.0" - resolved "https://registry.yarnpkg.com/@ledgerhq/cryptoassets/-/cryptoassets-6.37.0.tgz#302833777bcd210809ca7820afb82cff8da5c296" - integrity sha512-xwrDKTS9koQBNNzc7CqgV6zfGHvNFWJjlIL0Kc4O4DVWYR2vUdztUHcvwHD1KPjxNYhVnsgIopmtq47fHt3nMg== - dependencies: - invariant "2" - -"@ledgerhq/devices@^5.51.1": - version "5.51.1" - resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-5.51.1.tgz#d741a4a5d8f17c2f9d282fd27147e6fe1999edb7" - integrity sha512-4w+P0VkbjzEXC7kv8T1GJ/9AVaP9I6uasMZ/JcdwZBS3qwvKo5A5z9uGhP5c7TvItzcmPb44b5Mw2kT+WjUuAA== - dependencies: - "@ledgerhq/errors" "^5.50.0" - "@ledgerhq/logs" "^5.50.0" - rxjs "6" - semver "^7.3.5" - -"@ledgerhq/devices@^7.0.4": - version "7.0.4" - resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-7.0.4.tgz#c348ca7d9225155c8fdd364206e14ecf409601c1" - integrity sha512-smN5/38w/a/TRBjFuqZTs3aSiADpRx6EF0yyFYBbwj/itkw/xfAnGeYzgrUdccEk26yZypcIzjjyCk+wr6gKhw== - dependencies: - "@ledgerhq/errors" "^6.12.0" - "@ledgerhq/logs" "^6.10.1" - rxjs "6" - semver "^7.3.5" - -"@ledgerhq/errors@^5.34.0", "@ledgerhq/errors@^5.50.0": - version "5.50.0" - resolved "https://registry.yarnpkg.com/@ledgerhq/errors/-/errors-5.50.0.tgz#e3a6834cb8c19346efca214c1af84ed28e69dad9" - integrity sha512-gu6aJ/BHuRlpU7kgVpy2vcYk6atjB4iauP2ymF7Gk0ez0Y/6VSMVSJvubeEQN+IV60+OBK0JgeIZG7OiHaw8ow== - -"@ledgerhq/errors@^6.12.0": - version "6.12.0" - resolved "https://registry.yarnpkg.com/@ledgerhq/errors/-/errors-6.12.0.tgz#96de365902bbafa2e6c2a5544bb8047b3a3fde84" - integrity sha512-gDUpXDz3Os4bK9tzqvwZtjXMCB8LQwNft1f3x6WrwIGuM4Wo5D6ccJDybw4rP9TOJ4qPbRcXFH4avzQGFvwWNA== - -"@ledgerhq/hw-app-eth@^6.19.0": - version "6.30.0" - resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-eth/-/hw-app-eth-6.30.0.tgz#a8e5878b0eac725f0f4fa5e9222ab6e71b536063" - integrity sha512-Mr0apxn/oUXD4DZ2gw3fWJQ1rHDzLCzvoGV7Y1/CLoLy85A3w5nROTrFY0+SZNAIB/tqzWZJ9SQpBg5yXVzmmA== - dependencies: - "@ethersproject/abi" "^5.5.0" - "@ethersproject/rlp" "^5.5.0" - "@ledgerhq/cryptoassets" "^6.37.0" - "@ledgerhq/errors" "^6.12.0" - "@ledgerhq/hw-transport" "^6.27.7" - "@ledgerhq/hw-transport-mocker" "^6.27.7" - "@ledgerhq/logs" "^6.10.1" - axios "^0.26.1" - bignumber.js "^9.1.0" - crypto-js "^4.1.1" - -"@ledgerhq/hw-transport-mocker@^6.27.7": - version "6.27.7" - resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-mocker/-/hw-transport-mocker-6.27.7.tgz#7f3e14f3db8b576c912f016aae24a479b2ffc887" - integrity sha512-naghEqtwbdpcBsfT4AvtGNI9ahIns2K55zO65dn08qUSj6LlfVzdN9vSbSiNHDcMoRmXttRFJdRQXeEDBMOd0w== - dependencies: - "@ledgerhq/hw-transport" "^6.27.7" - "@ledgerhq/logs" "^6.10.1" - -"@ledgerhq/hw-transport-u2f@^5.36.0-deprecated": - version "5.36.0-deprecated" - resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-u2f/-/hw-transport-u2f-5.36.0-deprecated.tgz#66e3ed399a117a1c0110871a055dd54f5fe707fd" - integrity sha512-T/+mGHIiUK/ZQATad6DMDmobCMZ1mVST952009jKzhaE1Et2Uy2secU+QhRkx3BfEAkvwa0zSRSYCL9d20Iqjg== - dependencies: - "@ledgerhq/errors" "^5.34.0" - "@ledgerhq/hw-transport" "^5.34.0" - "@ledgerhq/logs" "^5.30.0" - u2f-api "0.2.7" - -"@ledgerhq/hw-transport-webusb@^6.19.0": - version "6.27.7" - resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-webusb/-/hw-transport-webusb-6.27.7.tgz#392d8a87d26ddffb4f2c499b8753d38f09bed62f" - integrity sha512-Bjp2PWZAdj9Mp7yxJexcsLvpA2QmsPt1NlBYdN8vTgVajDg08TKcc0n8tD61fTaVJE0zNd4jccK1lN5rcaF17g== - dependencies: - "@ledgerhq/devices" "^7.0.4" - "@ledgerhq/errors" "^6.12.0" - "@ledgerhq/hw-transport" "^6.27.7" - "@ledgerhq/logs" "^6.10.1" - -"@ledgerhq/hw-transport@^5.34.0": - version "5.51.1" - resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-5.51.1.tgz#8dd14a8e58cbee4df0c29eaeef983a79f5f22578" - integrity sha512-6wDYdbWrw9VwHIcoDnqWBaDFyviyjZWv6H9vz9Vyhe4Qd7TIFmbTl/eWs6hZvtZBza9K8y7zD8ChHwRI4s9tSw== - dependencies: - "@ledgerhq/devices" "^5.51.1" - "@ledgerhq/errors" "^5.50.0" - events "^3.3.0" - -"@ledgerhq/hw-transport@^6.27.7": - version "6.27.7" - resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-6.27.7.tgz#ee46c456e012e2a78edbc69d12cc8d12d0a2c082" - integrity sha512-VLgqUaQo0PkvSUWJgltD89Q4uj9VGvgwR9i8OBYem+4j0NyDXee7tRxIfGp7SaavzNrnrUh5lXtXQfjfjkMZRg== - dependencies: - "@ledgerhq/devices" "^7.0.4" - "@ledgerhq/errors" "^6.12.0" - events "^3.3.0" - -"@ledgerhq/logs@^5.30.0", "@ledgerhq/logs@^5.50.0": - version "5.50.0" - resolved "https://registry.yarnpkg.com/@ledgerhq/logs/-/logs-5.50.0.tgz#29c6419e8379d496ab6d0426eadf3c4d100cd186" - integrity sha512-swKHYCOZUGyVt4ge0u8a7AwNcA//h4nx5wIi0sruGye1IJ5Cva0GyK9L2/WdX+kWVTKp92ZiEo1df31lrWGPgA== - -"@ledgerhq/logs@^6.10.1": - version "6.10.1" - resolved "https://registry.yarnpkg.com/@ledgerhq/logs/-/logs-6.10.1.tgz#5bd16082261d7364eabb511c788f00937dac588d" - integrity sha512-z+ILK8Q3y+nfUl43ctCPuR4Y2bIxk/ooCQFwZxhtci1EhAtMDzMAx2W25qx8G1PPL9UUOdnUax19+F0OjXoj4w== +"@ledgerhq/connect-kit-loader@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@ledgerhq/connect-kit-loader/-/connect-kit-loader-1.0.2.tgz#8554e16943f86cc2a5f6348a14dfe6e5bd0c572a" + integrity sha512-TQ21IjcZOw/scqypaVFY3jHVqI7X7Hta3qN/us6FvTol3AY06UmrhhXGww0E9xHmAbdX241ddwXEiMBSQZFr9g== "@magic-sdk/commons@^4.1.1": version "4.1.1" @@ -1972,17 +1868,6 @@ resolved "https://registry.yarnpkg.com/@metamask/detect-provider/-/detect-provider-2.0.0.tgz#4bc2795e5e6f7d8b84b2e845058d2f222c99917d" integrity sha512-sFpN+TX13E9fdBDh9lvQeZdJn4qYoRb/6QF2oZZK/Pn559IhCFacPMU1rMuqyXoFQF3JSJfii2l98B87QDPeCQ== -"@metamask/eth-sig-util@^4.0.0": - version "4.0.1" - resolved "https://registry.yarnpkg.com/@metamask/eth-sig-util/-/eth-sig-util-4.0.1.tgz#3ad61f6ea9ad73ba5b19db780d40d9aae5157088" - integrity sha512-tghyZKLHZjcdlDqCA3gNZmLeR0XvOE9U1qoQO9ohyAZT6Pya+H9vkBPcsyXytmYLNgVoin7CKCmweo/R43V+tQ== - dependencies: - ethereumjs-abi "^0.6.8" - ethereumjs-util "^6.2.1" - ethjs-util "^0.1.6" - tweetnacl "^1.0.3" - tweetnacl-util "^0.15.1" - "@metamask/eth-sig-util@^5.0.2": version "5.0.2" resolved "https://registry.yarnpkg.com/@metamask/eth-sig-util/-/eth-sig-util-5.0.2.tgz#c518279a6e17a88135a13d53a0b970f145ff8bce" @@ -3084,11 +2969,12 @@ ethers "5.5.4" joi "^17.6.1" -"@web3-onboard/core@^2.12.0": - version "2.12.0" - resolved "https://registry.npmjs.org/@web3-onboard/core/-/core-2.12.0.tgz#6f2c775064ff9cd1fe6619c62f1b6c1fa71db679" - integrity sha512-c4ZPOXqrT8NCT7Sc/EbwGU4UIpULpgWoDpFaQi5gvSLjvcIEUDCrwicEYBxXZ+4UPgONOxcW+PDiSBBVNUqRzg== +"@web3-onboard/core@^2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.13.1.tgz#c9d953751b239798ba1792c480babbd5b03ba015" + integrity sha512-1NL7Eev7Pjy/KxE9LaeoAhaNT+/UVoezXiW/GGFCe7Qx2efb74doCRQjjCf82KInyQAvfr8a/0lOQie4xFZ6ig== dependencies: + "@unstoppabledomains/resolution" "^8.0" "@web3-onboard/common" "^2.2.3" bignumber.js "^9.0.0" bnc-sdk "^4.6.2" @@ -3190,21 +3076,16 @@ "@web3-onboard/common" "^2.2.3" "@web3-onboard/hw-common" "^2.0.4" -"@web3-onboard/ledger@^2.3.2": - version "2.3.2" - resolved "https://registry.yarnpkg.com/@web3-onboard/ledger/-/ledger-2.3.2.tgz#aaa436393d8ffdc156fd318154df5e61361d54bb" - integrity sha512-0KLXmnXNs6iTZEhBdGDgg+L5t8rOTroZjYu8l3Qebd02hNBIeaNxgCXIOQ1Y97qvcQz/8rb6oZ1wMp7unmSA1g== +"@web3-onboard/ledger@^2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@web3-onboard/ledger/-/ledger-2.4.1.tgz#d719a4f3315ead3fce938d7cace7ef6c3f365cc3" + integrity sha512-ENA/kmLn2qgqx3SKziMo/10OPxEtEPjBe1e5eyMz7k7XOmb81+Q4rSXoIgTl0uoTu18Yn/5POGCV77/emR40IA== dependencies: - "@ethereumjs/tx" "^3.4.0" "@ethersproject/providers" "^5.5.0" - "@ledgerhq/hw-app-eth" "^6.19.0" - "@ledgerhq/hw-transport-u2f" "^5.36.0-deprecated" - "@ledgerhq/hw-transport-webusb" "^6.19.0" - "@metamask/eth-sig-util" "^4.0.0" + "@ledgerhq/connect-kit-loader" "^1.0.2" + "@walletconnect/client" "^1.7.1" "@web3-onboard/common" "^2.2.3" - "@web3-onboard/hw-common" "^2.0.4" - buffer "^6.0.3" - ethereumjs-util "^7.1.3" + rxjs "^7.5.2" "@web3-onboard/magic@^2.1.3": version "2.1.3" @@ -3817,13 +3698,6 @@ axios@^0.21.2: dependencies: follow-redirects "^1.14.0" -axios@^0.26.1: - version "0.26.1" - resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9" - integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA== - dependencies: - follow-redirects "^1.14.8" - b4a@^1.6.0: version "1.6.1" resolved "https://registry.yarnpkg.com/b4a/-/b4a-1.6.1.tgz#9effac93a469a868d024e16fd77162c653544cbd" @@ -5617,7 +5491,7 @@ ethereum-cryptography@^1.1.2: "@scure/bip32" "1.1.0" "@scure/bip39" "1.1.0" -ethereumjs-abi@^0.6.8, "ethereumjs-abi@git+https://github.com/ethereumjs/ethereumjs-abi.git": +"ethereumjs-abi@git+https://github.com/ethereumjs/ethereumjs-abi.git": version "0.6.8" resolved "git+https://github.com/ethereumjs/ethereumjs-abi.git#ee3994657fa7a427238e6ba92a84d0b529bbcde0" dependencies: @@ -5725,7 +5599,7 @@ ethereumjs-util@^5.0.0, ethereumjs-util@^5.1.1, ethereumjs-util@^5.1.2, ethereum rlp "^2.0.0" safe-buffer "^5.1.1" -ethereumjs-util@^6.0.0, ethereumjs-util@^6.2.1: +ethereumjs-util@^6.0.0: version "6.2.1" resolved "https://registry.yarnpkg.com/ethereumjs-util/-/ethereumjs-util-6.2.1.tgz#fcb4e4dd5ceacb9d2305426ab1a5cd93e3163b69" integrity sha512-W2Ktez4L01Vexijrm5EB6w7dg4n/TgpoYU4avuT5T3Vmnw/eCRtiBrJfQYS/DCSvDIOLn2k57GcHdeBcgVxAqw== @@ -6075,7 +5949,7 @@ follow-redirects@1.5.10: dependencies: debug "=3.1.0" -follow-redirects@^1.10.0, follow-redirects@^1.14.0, follow-redirects@^1.14.8: +follow-redirects@^1.10.0, follow-redirects@^1.14.0: version "1.15.2" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== @@ -6472,13 +6346,6 @@ intl-messageformat@^9.3.15: "@formatjs/icu-messageformat-parser" "2.1.0" tslib "^2.1.0" -invariant@2: - version "2.2.4" - resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" - integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== - dependencies: - loose-envify "^1.0.0" - is-arguments@^1.0.4: version "1.1.1" resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b" @@ -8242,7 +8109,7 @@ rustbn.js@~0.2.0: resolved "https://registry.yarnpkg.com/rustbn.js/-/rustbn.js-0.2.0.tgz#8082cb886e707155fd1cb6f23bd591ab8d55d0ca" integrity sha512-4VlvkRUuCJvr2J6Y0ImW7NvTCriMi7ErOAqWk1y69vAdoNIzCF3yPmgeNzx+RQTLEDFq5sHfscn1MwHxP9hNfA== -rxjs@6, rxjs@^6.4.0, rxjs@^6.6.3: +rxjs@^6.4.0, rxjs@^6.6.3: version "6.6.7" resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9" integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ== @@ -8994,11 +8861,6 @@ typescript@^4.6.2: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.3.tgz#3aea307c1746b8c384435d8ac36b8a2e580d85db" integrity sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA== -u2f-api@0.2.7: - version "0.2.7" - resolved "https://registry.yarnpkg.com/u2f-api/-/u2f-api-0.2.7.tgz#17bf196b242f6bf72353d9858e6a7566cc192720" - integrity sha512-fqLNg8vpvLOD5J/z4B6wpPg4Lvowz1nJ9xdHcCzdUPKcFE/qNCceV2gNZxSJd5vhAZemHr/K/hbzVA0zxB5mkg== - uc.micro@^1.0.1, uc.micro@^1.0.5: version "1.0.6" resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac" diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts index 95889241b..91183ad7c 100644 --- a/packages/common/src/types.ts +++ b/packages/common/src/types.ts @@ -79,10 +79,17 @@ export interface AppMetadata { /* App name */ name: string - /* SVG icon string or image url, with height set to 100% */ - icon: string - - /* SVG logo (icon and text) string or image url, with width set to 100% */ + /* An SVG icon string or image url, with height set to 100% + Note: `icon` is displayed on both mobile AND desktop. If `logo` + below is provided then `icon` displays on mobile and `logo` on + desktop. + */ + icon?: string + + /* SVG logo (icon and text) string or image url, with width set to 100% + Note: This will ONLY display on desktop. It is best used with wide + format logos. Use `icon` for standard 40x40 icons. + */ logo?: string /* Description of app*/ diff --git a/packages/core/README.md b/packages/core/README.md index ceacc81b9..3f918ece2 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -76,8 +76,11 @@ type AppMetadata = { name: string // SVG icon string, with height or width (whichever is larger) set to 100% or a valid image URL // note: if using an emoji make sure to send base64 string + // Note: `icon` is displayed on both mobile AND desktop. If `logo` + // below is provided then `icon` displays on mobile and `logo` on desktop icon: string // Optional wide format logo (ie icon and text) to be displayed in the sidebar of connect modal. Defaults to icon if not provided + // Note: This will ONLY display on desktop. It is best used with wide format logos. Use `icon` for standard 40x40 icons. logo?: string // description of app description?: string @@ -124,10 +127,10 @@ For an example please see containerElement usage [here](https://github.com/block ```typescript type ContainerElements = { - // When attaching the Connect Modal to a container el be aware that the modal was styled to be + // When attaching the Connect Modal to a container el be aware that the modal was styled to be // mounted through the app to the html body and will respond to screen width rather than container width // This is specifically apparent on mobile so please test thoroughly - // Also consider that other DOM elements(specifically Notifications and Account Center) will also + // Also consider that other DOM elements(specifically Notifications and Account Center) will also // append to this DOM el if enabled and their own containerEl are not defined connectModal?: string // when using the accountCenter with a container el the accountCenter position properties are ignored diff --git a/packages/core/package.json b/packages/core/package.json index 7273a747f..2f70f311e 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.13.1", + "version": "2.13.2-alpha.1", "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", diff --git a/packages/core/src/icons/bn-icon.ts b/packages/core/src/icons/bn-icon.ts new file mode 100644 index 000000000..c7790a9ab --- /dev/null +++ b/packages/core/src/icons/bn-icon.ts @@ -0,0 +1,25 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/packages/core/src/icons/index.ts b/packages/core/src/icons/index.ts index e44a9ffb7..775c1d05d 100644 --- a/packages/core/src/icons/index.ts +++ b/packages/core/src/icons/index.ts @@ -1,5 +1,8 @@ +// bn branding +export { default as defaultBnIcon } from './bn-icon.js' +export { default as poweredByBlocknativeIcon } from './poweredByBlocknative.js' +// other export { default as hourglass } from './hourglass.js' -export { default as blocknative } from './blocknative.js' export { default as ethereumIcon } from './ethereum.js' export { default as polygonIcon } from './polygon.js' export { default as questionIcon } from './question.js' @@ -18,4 +21,3 @@ export { default as caretIcon } from './caret.js' export { default as warningIcon } from './warning.js' export { default as successIcon } from './success.js' export { default as pendingIcon } from './pending.js' -export { default as poweredByBlocknativeIcon } from './poweredByBlocknative.js' diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index abc5b8330..54ef0cf8c 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -31,6 +31,7 @@ import { } from './store/actions.js' import type { PatchedEIP1193Provider } from '@web3-onboard/transaction-preview' import { getBlocknativeSdk } from './services.js' +import { defaultBnIcon } from './icons/index.js' const API = { connectWallet, @@ -251,7 +252,7 @@ function mountApp() { target.innerHTML = `
diff --git a/packages/hw-common/src/elements/TableHeader.svelte b/packages/hw-common/src/elements/TableHeader.svelte index 5cc436ba3..b79abb05d 100644 --- a/packages/hw-common/src/elements/TableHeader.svelte +++ b/packages/hw-common/src/elements/TableHeader.svelte @@ -10,7 +10,7 @@
diff --git a/packages/hw-common/src/views/AccountSelect.svelte b/packages/hw-common/src/views/AccountSelect.svelte index 81ca6cef7..8eff4c217 100644 --- a/packages/hw-common/src/views/AccountSelect.svelte +++ b/packages/hw-common/src/views/AccountSelect.svelte @@ -291,9 +291,10 @@ } .hardware-connect-modal { - width: 50rem; + width: 100%; + flex-flow: column; + display: flex; max-height: 51.75rem; - display: table; background: var(--account-select-white, var(--onboard-white, var(--white))); box-shadow: var( --account-select-shadow-1, @@ -320,6 +321,8 @@ --onboard-account-select-modal-right, var(--account-select-modal-right) ); + max-height: 100vh; + overflow: scroll; } .connect-wallet-header { @@ -337,6 +340,7 @@ .modal-controls { display: flex; + flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 1rem; @@ -372,10 +376,6 @@ ); } - .base-path-select { - min-width: 20rem; - } - .asset-select { width: 6rem; } @@ -421,6 +421,7 @@ .table-section { max-height: 31.8rem; padding: 1rem; + margin-top: 2rem; } .table-container { @@ -438,6 +439,29 @@ var(--onboard-gray-500, var(--gray-500)) ); } + @media all and (min-width: 768px) { + .hardware-connect-modal { + width: 50rem; + display: table; + flex-flow: unset; + } + .modal-controls { + flex-wrap: nowrap; + } + + .base-path-select { + min-width: 20rem; + } + + .table-section { + margin-top: unset; + } + + .account-select-modal-position { + max-height: unset; + overflow: unset; + } + }
diff --git a/packages/injected/src/icons/zerion.ts b/packages/injected/src/icons/zerion.ts index d568720fd..8d6689170 100644 --- a/packages/injected/src/icons/zerion.ts +++ b/packages/injected/src/icons/zerion.ts @@ -2,4 +2,4 @@ export default ` -` \ No newline at end of file +` diff --git a/packages/keepkey/package.json b/packages/keepkey/package.json index 00ab2ade0..4c8800b37 100644 --- a/packages/keepkey/package.json +++ b/packages/keepkey/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/keepkey", - "version": "2.3.2", + "version": "2.3.3-alpha.1", "description": "KeepKey hardware wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -64,7 +64,7 @@ "@shapeshiftoss/hdwallet-core": "^1.15.2", "@shapeshiftoss/hdwallet-keepkey-webusb": "^1.15.2", "@web3-onboard/common": "^2.2.3", - "@web3-onboard/hw-common": "^2.0.4", + "@web3-onboard/hw-common": "^2.0.5-alpha.1", "ethereumjs-util": "^7.1.3" } } diff --git a/packages/keystone/package.json b/packages/keystone/package.json index d194fc26c..b82eb5eb0 100644 --- a/packages/keystone/package.json +++ b/packages/keystone/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/keystone", - "version": "2.3.2", + "version": "2.3.3-alpha.1", "description": "Keystone hardware wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -59,6 +59,6 @@ "@ethersproject/providers": "^5.5.0", "@keystonehq/eth-keyring": "^0.14.00.3", "@web3-onboard/common": "^2.2.3", - "@web3-onboard/hw-common": "^2.0.4" + "@web3-onboard/hw-common": "^2.0.5-alpha.1" } } diff --git a/packages/react/package.json b/packages/react/package.json index 2fedcdcc9..93d88c595 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/react", - "version": "2.5.5", + "version": "2.5.6-alpha.1", "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -62,7 +62,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/core": "^2.13.1", + "@web3-onboard/core": "^2.13.2-alpha.1", "@web3-onboard/common": "^2.2.3", "use-sync-external-store": "1.0.0" }, diff --git a/packages/sequence/src/index.ts b/packages/sequence/src/index.ts index fe9143d79..8debd9bbb 100644 --- a/packages/sequence/src/index.ts +++ b/packages/sequence/src/index.ts @@ -1,7 +1,7 @@ import type { WalletInit } from '@web3-onboard/common' interface SequenceOptions { - appName?: string, + appName?: string network?: number | string } @@ -10,53 +10,54 @@ function sequence(options?: SequenceOptions): WalletInit { return () => { // @ts-ignore - return window?.ethereum && window.ethereum?.isSequence ? - [] - : - { - label: 'Sequence', - getIcon: async () => (await import('./icon.js')).default, - getInterface: async () => { - const { sequence } = await import('0xsequence') - const { createEIP1193Provider } = await import('@web3-onboard/common') - - const instance = await sequence.initWallet(network); - - if (!instance.isConnected()) { - const connectDetails = await instance.connect({ - app: appName, - authorize: true - }); - - if (!connectDetails.connected) { - throw new Error('Failed to connect to the wallet') - } - } + return window?.ethereum && window.ethereum?.isSequence + ? [] + : { + label: 'Sequence', + getIcon: async () => (await import('./icon.js')).default, + getInterface: async () => { + const { sequence } = await import('0xsequence') + const { createEIP1193Provider } = await import( + '@web3-onboard/common' + ) + + const instance = await sequence.initWallet(network) - // The check for connection is necessary in case the user closes the popup or cancels - if (instance.isConnected()) { - const sequenceProvider = instance.getProvider(); - const provider = createEIP1193Provider(sequenceProvider, { - eth_requestAccounts: async () => { - const address = await instance.getAddress() - return [address] - }, - eth_chainId: async () => { - const chainId = await instance.getChainId() - - return `0x${chainId.toString(16)}` + if (!instance.isConnected()) { + const connectDetails = await instance.connect({ + app: appName, + authorize: true + }) + + if (!connectDetails.connected) { + throw new Error('Failed to connect to the wallet') + } } - }) - return { - provider, - instance + // The check for connection is necessary in case the user closes the popup or cancels + if (instance.isConnected()) { + const sequenceProvider = instance.getProvider() + const provider = createEIP1193Provider(sequenceProvider, { + eth_requestAccounts: async () => { + const address = await instance.getAddress() + return [address] + }, + eth_chainId: async () => { + const chainId = await instance.getChainId() + + return `0x${chainId.toString(16)}` + } + }) + + return { + provider, + instance + } + } + + throw new Error('Failed to connect wallet') } } - - throw new Error('Failed to connect wallet') - } - } } } diff --git a/packages/trezor/package.json b/packages/trezor/package.json index f409f8de1..d14245f08 100644 --- a/packages/trezor/package.json +++ b/packages/trezor/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/trezor", - "version": "2.3.2", + "version": "2.3.3-alpha.1", "description": "Trezor hardware wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -61,7 +61,7 @@ "@ethereumjs/tx": "^3.4.0", "@ethersproject/providers": "^5.5.0", "@web3-onboard/common": "^2.2.3", - "@web3-onboard/hw-common": "^2.0.4", + "@web3-onboard/hw-common": "^2.0.5-alpha.1", "buffer": "^6.0.3", "eth-crypto": "^2.1.0", "ethereumjs-util": "^7.1.3", diff --git a/packages/vue/package.json b/packages/vue/package.json index 5fd36305d..6469b3500 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/vue", - "version": "2.4.5", + "version": "2.4.6-alpha.1", "description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -63,7 +63,7 @@ "@vueuse/core": "^8.4.2", "@vueuse/rxjs": "^8.2.0", "@web3-onboard/common": "^2.2.3", - "@web3-onboard/core": "^2.13.1", + "@web3-onboard/core": "^2.13.2-alpha.1", "vue-demi": "^0.12.4" }, "peerDependencies": { From c5988e78fb42eed4578a696fc529f571e0a5f8c0 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Wed, 25 Jan 2023 12:19:20 -0700 Subject: [PATCH 2/6] Feature: Add Theming Options (#1447) * Added theming updates to cover not dark mode mode * Refine theme types, add actions to set themes through API, add validation * updated layout further * Remove docs files not needed * Merge in develop * Cleanup and fixes * Notify matching theme * Light mode looking good on notify * Further refined tooling and themes * TP now works with themes, updated default behavior * Update handling of theme types * restore changes to indicator * Update Icon usage * update blocknative-icon svg * re-org and rename icon imports * remove hover states from mobile * Update packages to reflect fillColor icon use of css variable theming * updates * Minor fixups and functionality tightening * Refactor logic for handling theme updates * poc theming work - define top-level component variable. - comment old variable uses out for now. - add custom border-color class to WalletAppBadge component. * update close button to use only current text color - we could potentially remove the use `--onboard-close-button-color` based on these changes. * Update Account Select to use theming * update minimized ac component - use new theme top level variables - adjust layout - remove some helper classes * update micro ac component - use new variables - tweak layout, width - try to match class names with other components * add new theming variables to account center expanded component - use theme background-color, text-color, and border-color - comment out old styles for now - adjust borders + padding spacing * remove blue check from dapp info area - removing because this is purely cosmetic at the moment. * Add system option and check to theming * account center expanded tweaks - use --w3o-accent-text-color for --action-color - remove border radius from .wallets-section. We don't need it here since the parent has it. - use white background for WalletAppBadge. * update WalletRow component - use new theming variables for text and bg hover color - use ::before element trick for bg hovers * add z-index to bg hover element * Updating theme customizer in docs * add fallback legacy variables for connect modal * add legacy variable fallbacks to account center - resolve commented out lines * correct app name spacing - remove h4 and p element. These elements have no semantic value in this context. No need to use. * Update zindex of theming tool to avoid clash with docs themer * add legacy variable override to closebutton * update app-name styles * remove comment for action color * Fix ternary in handling mobile * Cleanup defaults * add font family override for AC button * update WalletRow - remove commented out code. - add back overrides using more specific legacy variables. - set default variable values to unset in theme mapping. * Fix validation * Fix validation for theming * Update copiable theming code from customizer * remove comments * fix network select color issue - remove extra space - set --account-center-network-selector-color to --text-color * add back border-bottom for mobile designs * update theming variables names and values - update --w3o variable names - set old variables to unset for now * fix WalletRow z-index issue - options menu display above now * update theme var names and set new default values - matches new design - supports light/dark themes - supports older variables * update connect modal - use theme var names - set new default values * update notify border - use new variable names * update transaction preview components - use new theme variables - set default values to match design * update notify and transaction-preview - unset theme mapping variables - add new theme variables * Refactor functionality and cleanup logic * Ready for testing * Fix up themeing tool in docs * Add custom theming option, enable account center * remove --w3o-tp variables from transaction preview components * Remove mock transaction code * Add theming docs * small tweaks to theme customizer * add border-radius theme var to connect and account-center * update indicators to use action-color theme var - set fallback values * update default box-shadow color * Refine ts and README notes around theming * Update docs/src/lib/components/ThemeCustomizer.svelte * Update packages/transaction-preview/src/views/Maximized.svelte * Clean up demo * Update packages/core/src/views/account-center/WalletRow.svelte * Update packages/transaction-preview/src/views/Maximized.svelte * Update packages/core/src/views/account-center/WalletRow.svelte * Fix handling of custom theme in theme customizer * Add quickstart options to README and docs for all examples we have available * Fix up docs layout * Cleanup readme * Add svelte example to options list * Fix up core docs * hook up hardware wallet components to theme vars - some minor cleanup * Update poweredBy svg var * Update poweredBy svg var * Fix sidebar theming * Add rxjs handling to event listener * update poweredby and default icon graphics - import newer default icon svg - use newer poweredby graphic in account center - remove older "powered by" span with text - plug in theme values for color to control svg - update svg fill to use currentColor * remove unused svg files * Remove behavior subject * ignore to keystone AirGapped type issue * Handle issue for readme Co-authored-by: Gustavo Esquinca --- README.md | 2 +- .../src/lib/components/ThemeCustomizer.svelte | 274 +++++---- docs/src/lib/services/onboard.js | 32 +- docs/src/routes/__layout-kit-docs.svelte | 1 - .../[...2]customization.md | 2 +- docs/src/routes/docs/[...3]modules/core.md | 52 +- examples/with-nextjs-13/yarn.lock | 4 +- packages/core/README.md | 51 +- packages/core/package.json | 2 +- packages/core/src/icons/blocknative-icon.ts | 26 + packages/core/src/icons/blocknative.ts | 23 - packages/core/src/icons/bn-icon.ts | 25 - packages/core/src/icons/index.ts | 6 +- .../core/src/icons/poweredByBlocknative.ts | 28 +- packages/core/src/index.ts | 19 +- packages/core/src/store/actions.ts | 17 +- packages/core/src/themes.ts | 71 +++ packages/core/src/types.ts | 18 + packages/core/src/validation.ts | 23 +- .../src/views/account-center/Maximized.svelte | 128 ++-- .../src/views/account-center/Micro.svelte | 37 +- .../src/views/account-center/Minimized.svelte | 157 ++--- .../src/views/account-center/WalletRow.svelte | 56 +- .../src/views/connect/ConnectedWallet.svelte | 4 + packages/core/src/views/connect/Index.svelte | 86 +-- .../src/views/connect/SelectingWallet.svelte | 9 +- .../core/src/views/connect/Sidebar.svelte | 41 +- .../src/views/connect/WalletButton.svelte | 46 +- packages/core/src/views/notify/Index.svelte | 6 +- .../core/src/views/notify/Notification.svelte | 45 +- .../views/notify/NotificationContent.svelte | 5 +- .../src/views/notify/StatusIconBadge.svelte | 2 +- .../core/src/views/shared/CloseButton.svelte | 58 +- packages/core/src/views/shared/Modal.svelte | 8 +- .../src/views/shared/NetworkSelector.svelte | 8 +- .../src/views/shared/WalletAppBadge.svelte | 6 + packages/dcent/package.json | 4 +- packages/demo/README.md | 4 +- packages/demo/package.json | 12 +- packages/demo/src/App.svelte | 545 +----------------- packages/gnosis/package.json | 2 +- packages/gnosis/src/icon.ts | 2 +- packages/hw-common/package.json | 2 +- packages/hw-common/src/account-select.ts | 10 +- .../src/elements/AddressTable.svelte | 12 +- .../hw-common/src/elements/CloseButton.svelte | 51 +- .../hw-common/src/elements/TableHeader.svelte | 29 +- .../hw-common/src/views/AccountSelect.svelte | 64 +- packages/keepkey/package.json | 4 +- packages/keepkey/src/icon.ts | 2 +- packages/keystone/package.json | 4 +- packages/keystone/src/icon.ts | 2 +- packages/keystone/src/index.ts | 1 + packages/ledger/package.json | 2 +- packages/react/package.json | 4 +- packages/react/src/hooks/index.ts | 1 + packages/react/src/hooks/useUpdateTheme.ts | 6 + packages/react/src/index.ts | 1 + packages/sequence/src/icon.ts | 2 +- packages/transaction-preview/src/index.ts | 8 +- .../src/views/Index.svelte | 20 +- .../src/views/Maximized.svelte | 37 +- .../src/views/Minimized.svelte | 18 +- .../src/views/components/Button.svelte | 9 +- .../src/views/components/IconBadge.svelte | 4 +- .../views/components/SimulationHeader.svelte | 1 - .../src/views/components/Timer.svelte | 2 +- packages/trezor/package.json | 4 +- packages/trezor/src/icon.ts | 2 +- packages/vue/package.json | 4 +- 70 files changed, 994 insertions(+), 1259 deletions(-) create mode 100644 packages/core/src/icons/blocknative-icon.ts delete mode 100644 packages/core/src/icons/blocknative.ts delete mode 100644 packages/core/src/icons/bn-icon.ts create mode 100644 packages/core/src/themes.ts create mode 100644 packages/react/src/hooks/useUpdateTheme.ts diff --git a/README.md b/README.md index 5d0855d87..16d761582 100644 --- a/README.md +++ b/README.md @@ -123,4 +123,4 @@ If you would like to test out the current functionality of V2 in a small browser - Checkout the V2 feature branch: `git checkout v2-web3-onboard` - Install the dependencies: `yarn` (if running a M1 mac - `yarn install-m1-mac`) - Run all packages in dev mode: `yarn dev` -- [View demo app in the browser](http://localhost:8080) +- To view the demo app in the browser after running the above steps navigate to [http://localhost:8080](http://localhost:8080) diff --git a/docs/src/lib/components/ThemeCustomizer.svelte b/docs/src/lib/components/ThemeCustomizer.svelte index 23e7c052e..7bbfa90ee 100644 --- a/docs/src/lib/components/ThemeCustomizer.svelte +++ b/docs/src/lib/components/ThemeCustomizer.svelte @@ -18,15 +18,44 @@ rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}` }, { - id: '0x3', - token: 'tROP', - label: 'Ethereum Ropsten Testnet', - rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}` + id: '0x5', + token: 'ETH', + label: 'Ethereum Goerli Testnet', + rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}` + }, + { + id: '0x13881', + token: 'MATIC', + label: 'Polygon - Mumbai', + rpcUrl: 'https://matic-mumbai.chainstacklabs.com ' + }, + { + id: '0x38', + token: 'BNB', + label: 'Binance', + rpcUrl: 'https://bsc-dataseed.binance.org/' + }, + { + id: 137, + token: 'MATIC', + label: 'Polygon', + rpcUrl: 'https://matic-mainnet.chainstacklabs.com' + }, + { + id: 10, + token: 'OETH', + label: 'Optimism', + rpcUrl: 'https://mainnet.optimism.io' + }, + { + id: 42161, + token: 'ARB-ETH', + label: 'Arbitrum', + rpcUrl: 'https://rpc.ankr.com/arbitrum' } ], appMetadata: { name: 'Documentation', - icon: '', description: 'Example showcasing how to connect a wallet.', recommendedInjectedWallets: [ { name: 'MetaMask', url: 'https://metamask.io' }, @@ -34,11 +63,15 @@ ] }, accountCenter: { - desktop: { enabled: false }, - mobile: { enabled: false } - } + desktop: { enabled: true }, + mobile: { enabled: true } + }, + theme: 'system' }) + const themes = ['system', 'default', 'light', 'dark', 'custom'] + let selectedTheme = 'system' + // Subscribe to wallet updates const wallets$ = onboard.state.select('wallets').pipe(share()) @@ -73,8 +106,9 @@ uploaded_image = undefined webURL = '' resetTheme() - const onboardCloseBtnVisible = - document?.querySelector('body > onboard-v2')?.shadowRoot?.querySelector('.close-button') + const onboardCloseBtnVisible = document + ?.querySelector('body > onboard-v2') + ?.shadowRoot?.querySelector('.close-button') if (onboardCloseBtnVisible) onboardCloseBtnVisible?.click() } @@ -84,34 +118,43 @@ : onboard.connectWallet() } - const baseStyles = { - '--background-color': '#ffffff', - '--text-color': '#1a1d26', - '--border-color': '#ebebed', - '--accent-background': '#ebebed', - '--accent-color': '#929bed', - '--accent-color-hover': '#eff1fc', - '--secondary-text-color': '#707481' - } - - let defaultStyling = {...baseStyles} - - const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background); - --onboard-close-button-background: var(--accent-background); - --onboard-connect-sidebar-color: var(--text-color); - --onboard-connect-sidebar-progress-background: var(--secondary-text-color); - --onboard-connect-sidebar-progress-color: var(--accent-color); - --onboard-connect-header-background: var(--background-color); - --onboard-connect-header-color: var(--text-color); - --onboard-main-scroll-container-background: var(--background-color); - --onboard-link-color: var(--accent-color); - --onboard-wallet-button-background: var(--background-color); - --onboard-wallet-button-background-hover: var(--accent-color-hover); - --onboard-wallet-button-border-color: var(--border-color); - --onboard-wallet-app-icon-border-color: var(--border-color);` + const themingObjects = { + default: { + '--w3o-background-color': 'unset', + '--w3o-foreground-color': 'unset', + '--w3o-text-color': 'unset', + '--w3o-border-color': 'unset', + '--w3o-action-color': 'unset', + '--w3o-border-radius': 'unset' + }, + custom: { + '--w3o-background-color': 'unset', + '--w3o-foreground-color': 'unset', + '--w3o-text-color': 'unset', + '--w3o-border-color': 'unset', + '--w3o-action-color': 'unset', + '--w3o-border-radius': 'unset' + }, + light: { + '--w3o-background-color': '#ffffff', + '--w3o-foreground-color': '#EFF1FC', + '--w3o-text-color': '#1a1d26', + '--w3o-border-color': '#d0d4f7', + '--w3o-action-color': '#6370E5', + '--w3o-border-radius': '16px' + }, + dark: { + '--w3o-background-color': '#1A1D26', + '--w3o-foreground-color': '#242835', + '--w3o-text-color': '#EFF1FC', + '--w3o-border-color': '#33394B', + '--w3o-action-color': '#929bed', + '--w3o-border-radius': '16px' + } + } const styleToString = (style) => { - return Object.keys(style).reduce((acc, key) => acc + key + ': ' + style[key] + '; \n ', '') + return Object.keys(style).reduce((acc, key) => acc + `"${key}": "${style[key]}", \n`, '') } async function copyStylingConfig() { @@ -123,18 +166,28 @@ } } - let copyableStyles = `:root {\n ${styleToString(defaultStyling)}${baseStyling}\n}` + let copyableStyles = + selectedTheme !== 'custom' ? '' : `{\n ${styleToString(themingObjects[selectedTheme])}}` + + const updateTheme = () => { + selectedTheme !== 'custom' + ? onboard.state.actions.updateTheme(selectedTheme) + : onboard.state.actions.updateTheme('default') + copyableStyles = + selectedTheme !== 'custom' ? '' : `{\n ${styleToString(themingObjects[selectedTheme])}}` + } - const updateTheme = (e, targetStyle) => { + const updateThemeEl = (e, targetStyle) => { + if (selectedTheme !== 'custom') return document.documentElement.style.setProperty(targetStyle, e.target.value) - copyableStyles = `:root {\n ${styleToString(defaultStyling)}${baseStyling}\n}` + copyableStyles = `{\n ${styleToString(themingObjects[selectedTheme])}}` } const resetTheme = () => { - defaultStyling = {...baseStyles} - Object.keys(defaultStyling).forEach(style => { - document.documentElement.style.setProperty(style, defaultStyling[style]) + selectedTheme = 'custom' + Object.keys(themingObjects['custom']).forEach((style) => { + document.documentElement.style.setProperty(style, themingObjects['custom'][style]) }) } @@ -187,28 +240,66 @@
- -
-
- {#each Object.keys(defaultStyling) as target} -
-
- updateTheme(e, target)} - /> -
- {target} : {defaultStyling[target]} -
+ +