From 6a09f638ea309975440106c43fe97a3b6bd3022c Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Mon, 15 May 2023 14:39:13 -0600
Subject: [PATCH 1/3] Handle chainIcons consistently within Account Center
 minimized

---
 packages/core/package.json                    |  2 +-
 .../src/views/account-center/Minimized.svelte | 59 +++++++++++--------
 packages/demo/package.json                    |  2 +-
 packages/react/package.json                   |  4 +-
 packages/vue/package.json                     |  4 +-
 yarn.lock                                     |  8 +++
 6 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 510f92841..8966e3930 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.18.1-alpha.1",
+  "version": "2.18.1-alpha.2",
   "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/views/account-center/Minimized.svelte b/packages/core/src/views/account-center/Minimized.svelte
index 26ff1ea77..7a5971614 100644
--- a/packages/core/src/views/account-center/Minimized.svelte
+++ b/packages/core/src/views/account-center/Minimized.svelte
@@ -61,10 +61,19 @@
 
 <style>
   .minimized {
-    --background-color: var(--account-center-minimized-background, var(--w3o-background-color, white));
+    --background-color: var(
+      --account-center-minimized-background,
+      var(--w3o-background-color, white)
+    );
     --text-color: var(--w3o-text-color, var(--gray-700));
-    --border-color: var(--account-center-border, var(--w3o-border-color, var(--onboard-gray-200, var(--gray-200))));
-    --border-radius: var(--account-center-border-radius, var(--w3o-border-radius, 1rem));
+    --border-color: var(
+      --account-center-border,
+      var(--w3o-border-color, var(--onboard-gray-200, var(--gray-200)))
+    );
+    --border-radius: var(
+      --account-center-border-radius,
+      var(--w3o-border-radius, 1rem)
+    );
 
     cursor: pointer;
     pointer-events: auto;
@@ -118,11 +127,7 @@
     color: var(--account-center-minimized-balance-color, inherit);
   }
 
-  .chain-icon {
-    width: 22px;
-    height: 22px;
-    padding: 4px;
-    border-radius: 25px;
+  .chain-icon-container {
     margin-right: 4px;
   }
 
@@ -221,23 +226,32 @@
         })`}
       >
         <div class="flex items-center">
-          <div
-            class:color-yellow={!validAppChain}
-            class:color-white={validAppChain && !validAppChain.icon}
-            class="chain-icon flex justify-center items-center"
-            style={`background-color: ${
-              validAppChain
+          <div class="chain-icon-container">
+            <WalletAppBadge
+              size={22}
+              padding={4}
+              background="custom"
+              color={!validAppChain
+                ? `var(
+                        --account-center-chain-warning,
+                        var(--onboard-warning-500, var(--warning-500))
+                      )`
+                : !validAppChain.icon
+                ? `var(--onboard-primary-100, var(--primary-100))`
+                : undefined}
+              customBackgroundColor={validAppChain
                 ? validAppChain.color ||
                   (defaultChainStyles && defaultChainStyles.color) ||
                   unrecognizedChainStyle.color
-                : 'var(--onboard-warning-200, var(--warning-200))'
-            };`}
-          >
-            {@html validAppChain
-              ? validAppChain.icon ||
-                (defaultChainStyles && defaultChainStyles.icon) ||
-                unrecognizedChainStyle.icon
-              : warningIcon}
+                : `var(--onboard-warning-200, var(--warning-200))`}
+              border="transparent"
+              radius={25}
+              icon={validAppChain
+                ? validAppChain.icon ||
+                  (defaultChainStyles && defaultChainStyles.icon) ||
+                  unrecognizedChainStyle.icon
+                : warningIcon}
+            />
           </div>
 
           <NetworkSelector
@@ -249,6 +263,5 @@
         </div>
       </div>
     </div>
-
   </div>
 </div>
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 3cc370d03..e1303ab60 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -24,7 +24,7 @@
     "webpack-dev-server": "4.7.4"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.18.1-alpha.1",
+    "@web3-onboard/core": "^2.18.1-alpha.2",
     "@web3-onboard/coinbase": "^2.2.3",
     "@web3-onboard/transaction-preview": "^2.0.7",
     "@web3-onboard/dcent": "^2.2.6",
diff --git a/packages/react/package.json b/packages/react/package.json
index 072f7ceb2..83c6779cc 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.8.3-alpha.1",
+  "version": "2.8.3-alpha.2",
   "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.18.1-alpha.1",
+    "@web3-onboard/core": "^2.18.1-alpha.2",
     "@web3-onboard/common": "^2.3.2",
     "use-sync-external-store": "1.0.0"
   },
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 519c5784c..7766a5b29 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.7.2-alpha.1",
+  "version": "2.7.2-alpha.2",
   "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.3.2",
-    "@web3-onboard/core": "^2.18.1-alpha.1",
+    "@web3-onboard/core": "^2.18.1-alpha.2",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 997e432f1..42884847a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3782,6 +3782,14 @@
     "@walletconnect/window-getters" "^1.0.1"
     tslib "1.14.1"
 
+"@web3-onboard/cede-store@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/cede-store/-/cede-store-2.0.1.tgz#0dec82e6f511e5b89885586c3229732c824f1fc0"
+  integrity sha512-ZgC/cgGdci+TuFJ2Yt2NK7BH84kCvSTj/Ko+VxWaAfiAw8m249SIsJeqmW7hEGM0ZJhJW0rmQHvDpSv0w4wF5g==
+  dependencies:
+    "@cedelabs/providers" "^0.0.7"
+    "@web3-onboard/common" "^2.3.2"
+
 "@web3-react/abstract-connector@^6.0.7":
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/@web3-react/abstract-connector/-/abstract-connector-6.0.7.tgz#401b3c045f1e0fab04256311be49d5144e9badc6"

From fb5602bccf36020a50e008fd00d224aad95e8501 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Mon, 15 May 2023 14:40:10 -0600
Subject: [PATCH 2/3] Remove unused css vars

---
 .../core/src/views/account-center/Minimized.svelte    | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/core/src/views/account-center/Minimized.svelte b/packages/core/src/views/account-center/Minimized.svelte
index 7a5971614..40f312b4b 100644
--- a/packages/core/src/views/account-center/Minimized.svelte
+++ b/packages/core/src/views/account-center/Minimized.svelte
@@ -143,17 +143,6 @@
   .drop-shadow {
     filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2));
   }
-
-  .color-yellow {
-    color: var(
-      --account-center-chain-warning,
-      var(--onboard-warning-500, var(--warning-500))
-    );
-  }
-
-  .color-white {
-    color: var(--onboard-primary-100, var(--primary-100));
-  }
 </style>
 
 <div

From 41ca1a4b88d2420549c4bb7584babc7341461fcf Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Mon, 15 May 2023 14:52:12 -0600
Subject: [PATCH 3/3] Cleanup format

---
 packages/core/src/views/account-center/Minimized.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/views/account-center/Minimized.svelte b/packages/core/src/views/account-center/Minimized.svelte
index 40f312b4b..9dc81a725 100644
--- a/packages/core/src/views/account-center/Minimized.svelte
+++ b/packages/core/src/views/account-center/Minimized.svelte
@@ -222,9 +222,9 @@
               background="custom"
               color={!validAppChain
                 ? `var(
-                        --account-center-chain-warning,
-                        var(--onboard-warning-500, var(--warning-500))
-                      )`
+                    --account-center-chain-warning,
+                    var(--onboard-warning-500, var(--warning-500))
+                  )`
                 : !validAppChain.icon
                 ? `var(--onboard-primary-100, var(--primary-100))`
                 : undefined}