diff --git a/packages/extension-base/package.json b/packages/extension-base/package.json
index 6a798e24..26299aff 100644
--- a/packages/extension-base/package.json
+++ b/packages/extension-base/package.json
@@ -30,8 +30,8 @@
"@polkadot/phishing": "^0.21.5",
"@polkadot/rpc-provider": "^10.9.1",
"@polkadot/types": "^10.9.1",
- "@polkadot/ui-keyring": "^3.5.1",
- "@polkadot/ui-settings": "^3.5.1",
+ "@polkadot/ui-keyring": "^3.6.1",
+ "@polkadot/ui-settings": "^3.6.1",
"@polkadot/util": "^12.4.1",
"@polkadot/util-crypto": "^12.4.1",
"eventemitter3": "^5.0.1",
diff --git a/packages/extension-ui/package.json b/packages/extension-ui/package.json
index d921fa60..1c28491c 100644
--- a/packages/extension-ui/package.json
+++ b/packages/extension-ui/package.json
@@ -30,12 +30,12 @@
"@polkadot/hw-ledger": "^12.4.1",
"@polkadot/keyring": "^12.4.1",
"@polkadot/networks": "^12.4.1",
- "@polkadot/react-identicon": "^3.5.1",
- "@polkadot/react-qr": "^3.5.1",
+ "@polkadot/react-identicon": "^3.6.1",
+ "@polkadot/react-qr": "^3.6.1",
"@polkadot/types": "^10.9.1",
"@polkadot/types-augment": "^10.9.1",
- "@polkadot/ui-keyring": "^3.5.1",
- "@polkadot/ui-settings": "^3.5.1",
+ "@polkadot/ui-keyring": "^3.6.1",
+ "@polkadot/ui-settings": "^3.6.1",
"@polkadot/util": "^12.4.1",
"@polkadot/util-crypto": "^12.4.1",
"file-saver": "^2.0.5",
@@ -60,7 +60,6 @@
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"@types/sinon-chrome": "^2.2.11",
- "@types/styled-components": "^5.1.26",
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.7",
diff --git a/packages/extension/public/index.html b/packages/extension/public/index.html
index 8664b666..9862076b 100644
--- a/packages/extension/public/index.html
+++ b/packages/extension/public/index.html
@@ -4,99 +4,10 @@
polkadot{.js}
+
diff --git a/packages/extension/public/notification.html b/packages/extension/public/notification.html
index cf5aa6ca..25a77ae1 100644
--- a/packages/extension/public/notification.html
+++ b/packages/extension/public/notification.html
@@ -4,9 +4,10 @@
polkadot{.js}
+
-
-
+
+
diff --git a/packages/extension/public/theme.css b/packages/extension/public/theme.css
new file mode 100644
index 00000000..e0ec803f
--- /dev/null
+++ b/packages/extension/public/theme.css
@@ -0,0 +1,92 @@
+body {
+ margin: 0;
+ overflow-x: hidden;
+ text-align: center;
+}
+
+div#root {
+ box-sizing: border-box;
+ height: calc(100vh - 2px);
+ margin: 0 auto;
+ max-width: 100%;
+ padding: 0;
+ text-align: left;
+ width: 560px;
+}
+
+:root {
+ /* general items */
+ --borderRadius: 4px;
+ --boxLineHeight: 1rem;
+ --boxMargin: 0.75rem 0;
+ --boxPadding: 0 0.25rem;
+ --fontFamily: Nunito, sans-serif;
+ --fontSize: 16px;
+ --inputLabelFontSize: 10px;
+ --labelFontSize: 13px;
+ --labelLineHeight: 18px;
+ --lineHeight: 26px;
+ /* shared colors */
+ --accountDotsIconColor: #8E8E8E;
+ --buttonBackground: #E86F00;
+ --buttonBackgroundDangerHover: #D93B3B;
+ --buttonBackgroundHover: #ED9329;
+ --buttonTextColor: #FFFFFF;
+ --connectedDotColor: seagreen;
+ --errorColor: #E42F2F;
+ --iconWarningColor: #FF7D01;
+ --identiconBackground: #F4F5F8;
+ --primaryColor: #FF7D01;
+}
+
+[data-theme="dark"] {
+ --addAccountImageBackground: #1A1B20;
+ --backButtonBackground: #3A3B41;
+ --backButtonBackgroundHover: #3a3b41ad;
+ --backButtonTextColor: #FFFFFF;
+ --background: #26272C;
+ --bodyColor: #20222A;
+ --boxBackground: #1A1B20;
+ --boxBorderColor: #303030;
+ --boxShadow: rgba(0, 0, 0, 0.86);
+ --buttonBackgroundDanger: #AF1111;
+ --errorBorderColor: #7E3530;
+ --highlightedAreaBackground: #212226;
+ --iconDangerColor: #AF1111;
+ --iconNeutralColor: #8E8E8E;
+ --inputBackground: #111218;
+ --inputBorderColor: #43444B;
+ --labelColor: #9F9E99;
+ --parentLabelColor: #4A7463;
+ --popupBackground: #38393F;
+ --readonlyInputBackground: #1A1B20;
+ --subTextColor: #DDD;
+ --textColor: #FFFFFF;
+ --textColorDanger: #FF8686;
+}
+
+[data-theme="light"] {
+ --addAccountImageBackground: #FFF;
+ --backButtonBackground: #D7D7D7;
+ --backButtonBackgroundHover: #d7d7d7ad;
+ --backButtonTextColor: #454545;
+ --background: #FAFAFA;
+ --bodyColor: #FFFFFF;
+ --boxBackground: #FFFFFF;
+ --boxBorderColor: #DADFEA;
+ --boxShadow: rgba(0, 0, 0, 0.3);
+ --buttonBackgroundDanger: #DC2222;
+ --errorBorderColor: #E42F2F;
+ --highlightedAreaBackground: #EFEFEF;
+ --iconDangerColor: #DC2222;
+ --iconNeutralColor: #939CB1;
+ --inputBackground: #FFFFFF;
+ --inputBorderColor: #DDE1EB;
+ --labelColor: #333333;
+ --parentLabelColor: #215B4F;
+ --popupBackground: #FFFFFF;
+ --readonlyInputBackground: #FFF;
+ --subTextColor: #454545;
+ --textColor: #242529;
+ --textColorDanger: #F24A4A;
+}
diff --git a/yarn.lock b/yarn.lock
index d1cf210f..08f9f8ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -101,7 +101,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-annotate-as-pure@npm:^7.16.0, @babel/helper-annotate-as-pure@npm:^7.22.5":
+"@babel/helper-annotate-as-pure@npm:^7.22.5":
version: 7.22.5
resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
dependencies:
@@ -214,7 +214,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.16.0, @babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.22.5":
+"@babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.22.5":
version: 7.22.5
resolution: "@babel/helper-module-imports@npm:7.22.5"
dependencies:
@@ -1466,7 +1466,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/traverse@npm:^7.21.2, @babel/traverse@npm:^7.22.10, @babel/traverse@npm:^7.4.5":
+"@babel/traverse@npm:^7.21.2, @babel/traverse@npm:^7.22.10":
version: 7.22.10
resolution: "@babel/traverse@npm:7.22.10"
dependencies:
@@ -1502,7 +1502,7 @@ __metadata:
languageName: node
linkType: hard
-"@emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.2.1":
+"@emotion/is-prop-valid@npm:^1.2.1":
version: 1.2.1
resolution: "@emotion/is-prop-valid@npm:1.2.1"
dependencies:
@@ -1518,20 +1518,6 @@ __metadata:
languageName: node
linkType: hard
-"@emotion/stylis@npm:^0.8.4":
- version: 0.8.5
- resolution: "@emotion/stylis@npm:0.8.5"
- checksum: 67ff5958449b2374b329fb96e83cb9025775ffe1e79153b499537c6c8b2eb64b77f32d7b5d004d646973662356ceb646afd9269001b97c54439fceea3203ce65
- languageName: node
- linkType: hard
-
-"@emotion/unitless@npm:^0.7.4":
- version: 0.7.5
- resolution: "@emotion/unitless@npm:0.7.5"
- checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
- languageName: node
- linkType: hard
-
"@emotion/unitless@npm:^0.8.0":
version: 0.8.1
resolution: "@emotion/unitless@npm:0.8.1"
@@ -2477,8 +2463,8 @@ __metadata:
"@polkadot/phishing": ^0.21.5
"@polkadot/rpc-provider": ^10.9.1
"@polkadot/types": ^10.9.1
- "@polkadot/ui-keyring": ^3.5.1
- "@polkadot/ui-settings": ^3.5.1
+ "@polkadot/ui-keyring": ^3.6.1
+ "@polkadot/ui-settings": ^3.6.1
"@polkadot/util": ^12.4.1
"@polkadot/util-crypto": ^12.4.1
eventemitter3: ^5.0.1
@@ -2579,12 +2565,12 @@ __metadata:
"@polkadot/hw-ledger": ^12.4.1
"@polkadot/keyring": ^12.4.1
"@polkadot/networks": ^12.4.1
- "@polkadot/react-identicon": ^3.5.1
- "@polkadot/react-qr": ^3.5.1
+ "@polkadot/react-identicon": ^3.6.1
+ "@polkadot/react-qr": ^3.6.1
"@polkadot/types": ^10.9.1
"@polkadot/types-augment": ^10.9.1
- "@polkadot/ui-keyring": ^3.5.1
- "@polkadot/ui-settings": ^3.5.1
+ "@polkadot/ui-keyring": ^3.6.1
+ "@polkadot/ui-settings": ^3.6.1
"@polkadot/util": ^12.4.1
"@polkadot/util-crypto": ^12.4.1
"@types/enzyme": ^3.10.13
@@ -2595,7 +2581,6 @@ __metadata:
"@types/react-router": ^5.1.20
"@types/react-router-dom": ^5.3.3
"@types/sinon-chrome": ^2.2.11
- "@types/styled-components": ^5.1.26
"@wojtekmaj/enzyme-adapter-react-17": ^0.8.0
enzyme: ^3.11.0
enzyme-adapter-react-16: ^1.15.7
@@ -2709,20 +2694,20 @@ __metadata:
languageName: node
linkType: hard
-"@polkadot/react-identicon@npm:^3.5.1":
- version: 3.5.1
- resolution: "@polkadot/react-identicon@npm:3.5.1"
+"@polkadot/react-identicon@npm:^3.6.1":
+ version: 3.6.1
+ resolution: "@polkadot/react-identicon@npm:3.6.1"
dependencies:
- "@polkadot/keyring": ^12.3.1
- "@polkadot/ui-settings": 3.5.1
- "@polkadot/ui-shared": 3.5.1
- "@polkadot/util": ^12.3.1
- "@polkadot/util-crypto": ^12.3.1
+ "@polkadot/keyring": ^12.4.1
+ "@polkadot/ui-settings": 3.6.1
+ "@polkadot/ui-shared": 3.6.1
+ "@polkadot/util": ^12.4.1
+ "@polkadot/util-crypto": ^12.4.1
ethereum-blockies-base64: ^1.0.2
jdenticon: 3.2.0
react-copy-to-clipboard: ^5.1.0
- styled-components: ^5.3.11
- tslib: ^2.5.3
+ styled-components: ^6.0.7
+ tslib: ^2.6.2
peerDependencies:
"@polkadot/keyring": "*"
"@polkadot/util": "*"
@@ -2730,28 +2715,28 @@ __metadata:
react: "*"
react-dom: "*"
react-is: "*"
- checksum: cc2239028c9d3c5ccef3e51ad0c6c81e4737fa61fcde1a58af1b2349e2349b062dbc15c576390e909f411504853ffeefa06fe7bf281c4c1b6f8d8871527a4244
+ checksum: 43040c4474fad135c5d0fbe7389fb8b9cca37efbc0d3d3625a64d0321ad47864d2ea60dbf372d59a68afe5bac90e6541e0c066344756fd1381510a8c5090b10f
languageName: node
linkType: hard
-"@polkadot/react-qr@npm:^3.5.1":
- version: 3.5.1
- resolution: "@polkadot/react-qr@npm:3.5.1"
+"@polkadot/react-qr@npm:^3.6.1":
+ version: 3.6.1
+ resolution: "@polkadot/react-qr@npm:3.6.1"
dependencies:
- "@polkadot/ui-settings": 3.5.1
- "@polkadot/util": ^12.3.1
- "@polkadot/util-crypto": ^12.3.1
+ "@polkadot/ui-settings": 3.6.1
+ "@polkadot/util": ^12.4.1
+ "@polkadot/util-crypto": ^12.4.1
qrcode-generator: ^1.4.4
react-qr-reader: ^2.2.1
- styled-components: ^5.3.11
- tslib: ^2.5.3
+ styled-components: ^6.0.7
+ tslib: ^2.6.2
peerDependencies:
"@polkadot/util": "*"
"@polkadot/util-crypto": "*"
react: "*"
react-dom: "*"
react-is: "*"
- checksum: f291dbec27e964affe78a5ce1d25332fc7e04a65cf1ef5365c8496ec7f4d0f75c415101d77fde8575072b78c91911eb2de611a14f8cc759609573e2b3cb365b1
+ checksum: 6df0ec369a1114d4e4efae65f438dee7ca8b99f967dab218f4f2f95a2bfe551ef1c7bc33d238be8c525fadbf037030b5aef1cbc03f797995cd5c3e52468a8f52
languageName: node
linkType: hard
@@ -2880,52 +2865,52 @@ __metadata:
languageName: node
linkType: hard
-"@polkadot/ui-keyring@npm:^3.5.1":
- version: 3.5.1
- resolution: "@polkadot/ui-keyring@npm:3.5.1"
+"@polkadot/ui-keyring@npm:^3.6.1":
+ version: 3.6.1
+ resolution: "@polkadot/ui-keyring@npm:3.6.1"
dependencies:
- "@polkadot/keyring": ^12.3.1
- "@polkadot/ui-settings": 3.5.1
- "@polkadot/util": ^12.3.1
- "@polkadot/util-crypto": ^12.3.1
+ "@polkadot/keyring": ^12.4.1
+ "@polkadot/ui-settings": 3.6.1
+ "@polkadot/util": ^12.4.1
+ "@polkadot/util-crypto": ^12.4.1
mkdirp: ^3.0.1
rxjs: ^7.8.1
store: ^2.0.12
- tslib: ^2.5.3
+ tslib: ^2.6.2
peerDependencies:
"@polkadot/keyring": "*"
"@polkadot/ui-settings": "*"
"@polkadot/util": "*"
- checksum: f29a5552cb2a6d63edddf63d027602dc9eeee97926bef9b0df085030629bcfef671ecd211e8abbc32a4af51f3486e8332a7b537d2505632ff8800e147798db3a
+ checksum: b9a0831664dc1beac351aaf718a13e37e9ea7ee323d207505cde6d213e3aa73637eef818a767e70e7df1ce5b93d1af137a41b9fafe6f9f0a8ccf23fa0e4cf8e0
languageName: node
linkType: hard
-"@polkadot/ui-settings@npm:3.5.1, @polkadot/ui-settings@npm:^3.5.1":
- version: 3.5.1
- resolution: "@polkadot/ui-settings@npm:3.5.1"
+"@polkadot/ui-settings@npm:3.6.1, @polkadot/ui-settings@npm:^3.6.1":
+ version: 3.6.1
+ resolution: "@polkadot/ui-settings@npm:3.6.1"
dependencies:
- "@polkadot/networks": ^12.3.1
- "@polkadot/util": ^12.3.1
+ "@polkadot/networks": ^12.4.1
+ "@polkadot/util": ^12.4.1
eventemitter3: ^5.0.1
store: ^2.0.12
- tslib: ^2.5.3
+ tslib: ^2.6.2
peerDependencies:
"@polkadot/networks": "*"
"@polkadot/util": "*"
- checksum: d3489b0cd3d659ea19cd4da0b4e53ce7020b1ec90591d94b340efbc4d6760ef5e7e71b5af7b83014054fb349b968f30c2a1d484953dd991dc616ddc16b74fabc
+ checksum: 7e53b96b431a95435ff0575a424f21c1770b2efd043b922f997691a742dfbd6a3f379642ac94da801b3d15d2f5cca5ed2437d8dd69b261ec0e3038cca5d3b3f1
languageName: node
linkType: hard
-"@polkadot/ui-shared@npm:3.5.1":
- version: 3.5.1
- resolution: "@polkadot/ui-shared@npm:3.5.1"
+"@polkadot/ui-shared@npm:3.6.1":
+ version: 3.6.1
+ resolution: "@polkadot/ui-shared@npm:3.6.1"
dependencies:
colord: ^2.9.3
- tslib: ^2.5.3
+ tslib: ^2.6.2
peerDependencies:
"@polkadot/util": "*"
"@polkadot/util-crypto": "*"
- checksum: 5a3cd1a41df51a4bb340602454c4ebbe64b335ada148bd2cab04637afdee3b6c775eb32ff574d6d625dafe3cffc1a02db2f96693ee901e1e5f03edef50f53828
+ checksum: 1e12177bd98111c9707ba530019acbcc71432123cc9c904b02b236ba6e4da8cd68cf81e5cd2c90fd9c1032d4b7cc3f9ad00ea32330338530d7f1d43fdba70af4
languageName: node
linkType: hard
@@ -3586,16 +3571,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/hoist-non-react-statics@npm:*":
- version: 3.3.1
- resolution: "@types/hoist-non-react-statics@npm:3.3.1"
- dependencies:
- "@types/react": "*"
- hoist-non-react-statics: ^3.3.0
- checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719
- languageName: node
- linkType: hard
-
"@types/http-cache-semantics@npm:*":
version: 4.0.1
resolution: "@types/http-cache-semantics@npm:4.0.1"
@@ -3847,17 +3822,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/styled-components@npm:^5.1.26":
- version: 5.1.26
- resolution: "@types/styled-components@npm:5.1.26"
- dependencies:
- "@types/hoist-non-react-statics": "*"
- "@types/react": "*"
- csstype: ^3.0.2
- checksum: 84f53b3101739b20d1731554fb7735bc2f3f5d050a8b392e9845403c8c8bbd729737d033978649f9195a97b557875b010d46e35a4538564a2d0dbcce661dbf76
- languageName: node
- linkType: hard
-
"@types/stylis@npm:^4.0.2":
version: 4.2.0
resolution: "@types/stylis@npm:4.2.0"
@@ -5245,21 +5209,6 @@ __metadata:
languageName: node
linkType: hard
-"babel-plugin-styled-components@npm:>= 1.12.0":
- version: 2.0.7
- resolution: "babel-plugin-styled-components@npm:2.0.7"
- dependencies:
- "@babel/helper-annotate-as-pure": ^7.16.0
- "@babel/helper-module-imports": ^7.16.0
- babel-plugin-syntax-jsx: ^6.18.0
- lodash: ^4.17.11
- picomatch: ^2.3.0
- peerDependencies:
- styled-components: ">= 2"
- checksum: 80b06b10db02d749432a0ac43a5feedd686f6b648628d7433a39b1844260b2b7c72431f6e705c82636ee025fcfd4f6c32fc05677e44033b8a39ddcd4488b3147
- languageName: node
- linkType: hard
-
"babel-plugin-syntax-async-functions@npm:^6.8.0":
version: 6.13.0
resolution: "babel-plugin-syntax-async-functions@npm:6.13.0"
@@ -5274,13 +5223,6 @@ __metadata:
languageName: node
linkType: hard
-"babel-plugin-syntax-jsx@npm:^6.18.0":
- version: 6.18.0
- resolution: "babel-plugin-syntax-jsx@npm:6.18.0"
- checksum: 0c7ce5b81d6cfc01a7dd7a76a9a8f090ee02ba5c890310f51217ef1a7e6163fb7848994bbc14fd560117892e82240df9c7157ad0764da67ca5f2afafb73a7d27
- languageName: node
- linkType: hard
-
"babel-plugin-syntax-trailing-function-commas@npm:^6.22.0":
version: 6.22.0
resolution: "babel-plugin-syntax-trailing-function-commas@npm:6.22.0"
@@ -6981,7 +6923,7 @@ __metadata:
languageName: node
linkType: hard
-"css-to-react-native@npm:^3.0.0, css-to-react-native@npm:^3.2.0":
+"css-to-react-native@npm:^3.2.0":
version: 3.2.0
resolution: "css-to-react-native@npm:3.2.0"
dependencies:
@@ -9851,7 +9793,7 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0":
+"hoist-non-react-statics@npm:^3.1.0":
version: 3.3.2
resolution: "hoist-non-react-statics@npm:3.3.2"
dependencies:
@@ -11431,7 +11373,7 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
-"lodash@npm:^4.0.0, lodash@npm:^4.16.3, lodash@npm:^4.17.11, lodash@npm:^4.17.15, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
+"lodash@npm:^4.0.0, lodash@npm:^4.16.3, lodash@npm:^4.17.15, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
version: 4.17.21
resolution: "lodash@npm:4.17.21"
checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -13001,7 +12943,7 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1":
version: 2.3.1
resolution: "picomatch@npm:2.3.1"
checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf
@@ -15210,28 +15152,6 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
-"styled-components@npm:^5.3.11":
- version: 5.3.11
- resolution: "styled-components@npm:5.3.11"
- dependencies:
- "@babel/helper-module-imports": ^7.0.0
- "@babel/traverse": ^7.4.5
- "@emotion/is-prop-valid": ^1.1.0
- "@emotion/stylis": ^0.8.4
- "@emotion/unitless": ^0.7.4
- babel-plugin-styled-components: ">= 1.12.0"
- css-to-react-native: ^3.0.0
- hoist-non-react-statics: ^3.0.0
- shallowequal: ^1.1.0
- supports-color: ^5.5.0
- peerDependencies:
- react: ">= 16.8.0"
- react-dom: ">= 16.8.0"
- react-is: ">= 16.8.0"
- checksum: 10edd4dae3b0231ec02d86bdd09c88e894eedfa7e9d4f8e562b09fb69c67a27d586cbcf35c785002d59b3bf11e6c0940b0efce40d13ae9ed148b26b1dc8f3284
- languageName: node
- linkType: hard
-
"styled-components@npm:^6.0.7":
version: 6.0.7
resolution: "styled-components@npm:6.0.7"