[core-v2.4.0-alpha.9, react-v2.2.3-alpha.6, vue-v2.1.3-alpha.6] : Feature - Expose css variables per AlienWorld and version bumps (#1139)

* Update css variables per AlienWorld and version bumps
* Prettier
* Add type-check and build step to PR request template
* Version bumps and merge develop
* More cleanup

Author: Adamj1232

packages/core/README.md

@@ -733,9 +733,24 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --onboard-warning-600: #cc8c00;
   --onboard-warning-700: #664600;
 
-  /* CUSTOMIZE ACCOUNT CENTER STACK POSITIONING*/
+  /* CUSTOMIZE ACCOUNT CENTER*/
   --account-center-z-index
-
+  --account-center-minimized-background
+  --account-center-maximized-upper-background
+  --account-center-maximized-network-section
+  --account-center-maximized-app-info-section
+  --account-center-minimized-address-color
+  --account-center-maximized-address-color
+  --account-center-maximized-account-section-background-hover
+  --account-center-maximized-action-background-hover
+  --account-center-minimized-chain-select-background
+  --account-center-network-selector-color
+  --account-center-maximized-network-selector-color
+  --account-center-minimized-network-selector-color
+  --account-center-app-btn-text-color
+  --account-center-app-btn-background
+  --account-center-app-btn-font-family
+  
   /* CUSTOMIZE SECTIONS OF THE CONNECT MODAL */
   --onboard-connect-content-width
   --onboard-connect-content-height

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.4.0-alpha.8",
+  "version": "2.4.0-alpha.9",
   "description": "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",

packages/core/src/validation.ts

@@ -198,7 +198,8 @@ const accountCenter = Joi.object({
   enabled: Joi.boolean(),
   position: commonPositions,
   expanded: Joi.boolean(),
-  minimal: Joi.boolean()
+  minimal: Joi.boolean(),
+  containerElement: Joi.string()
 })
 
 const customNotificationUpdate = Joi.object({

packages/core/src/views/account-center/Maximized.svelte

@@ -50,7 +50,10 @@
 
 <style>
   .outer-container {
-    background: var(--onboard-gray-600, var(--gray-600));
+    background: var(
+      --account-center-maximized-upper-background,
+      var(--onboard-gray-600, var(--gray-600))
+    );
     border-radius: var(--onboard-border-radius-3, var(--border-radius-3));
     width: 100%;
     filter: drop-shadow(0px 4px 16px rgba(178, 178, 178, 0.2));
@@ -84,7 +87,10 @@
   }
 
   .action-container:hover {
-    background-color: rgba(146, 155, 237, 0.2);
+    background-color: var(
+      --account-center-maximized-action-background-hover,
+      rgba(146, 155, 237, 0.2)
+    );
   }
 
   .plus-icon {
@@ -119,7 +125,10 @@
 
   .network-container {
     border-radius: var(--onboard-border-radius-3, var(--border-radius-3));
-    color: var(--onboard-gray-500, var(--gray-500));
+    color: var(
+      --account-center-maximized-network-section,
+      var(--onboard-gray-500, var(--gray-500))
+    );
   }
 
   .p5-5 {
@@ -136,7 +145,10 @@
   }
 
   .app-info-container {
-    background: var(--onboard-white, var(--white));
+    background: var(
+      --account-center-maximized-app-info-section,
+      var(--onboard-white, var(--white))
+    );
     border-radius: 16px;
     padding: 12px;
   }
@@ -183,6 +195,15 @@
 
   .app-button {
     margin-top: var(--onboard-spacing-5, var(--spacing-5));
+    color: var(
+      --account-center-app-btn-text-color,
+      var(--onboard-white, var(--white))
+    );
+    background: var(
+      --account-center-app-btn-background,
+      var(--onboard-gray-500, var(--gray-500))
+    );
+    font-family: var(--account-center-app-btn-font-family, inherit);
   }
 
   .powered-by-container {
@@ -318,7 +339,7 @@
           <div on:click class="flex items-center">
             <NetworkBadgeSelector
               chains={appChains}
-              color="#33394B"
+              colorVar="--account-center-maximized-network-selector-color"
               bold={true}
               selectIcon={caretLightIcon}
             />

packages/core/src/views/account-center/Minimized.svelte

@@ -58,7 +58,10 @@
 
 <style>
   .minimized {
-    background: var(--onboard-white, var(--white));
+    background: var(
+      --account-center-minimized-background,
+      var(--onboard-white, var(--white))
+    );
     border: 1px solid var(--onboard-gray-100, var(--gray-100));
     width: 100%;
     box-shadow: var(--onboard-shadow-3, var(--shadow-3));
@@ -80,6 +83,7 @@
   .address {
     font-weight: 700;
     line-height: var(--onboard-font-line-height-2, var(--font-line-height-2));
+    color: var(--account-center-minimized-address-color, initial);
   }
 
   .balance {
@@ -178,7 +182,9 @@
         class="container shadow-1 flex items-center"
         style={`border-color: ${
           validAppChain ? '#D0D4F7' : '#FFAF00'
-        }; background-color: ${validAppChain ? '#EFF1FC' : '#FFEFCC'}`}
+        }; background-color: var(--account-center-minimized-chain-select-background, var(${
+          validAppChain ? '--primary-100' : '--warning-100'
+        }))`}
       >
         <div class="flex items-center">
           <div
@@ -200,7 +206,11 @@
               : warningIcon}
           </div>
 
-          <NetworkSelector {chains} color="#33394B" selectIcon={caretIcon} />
+          <NetworkSelector
+            {chains}
+            colorVar="--account-center-minimized-network-selector-color"
+            selectIcon={caretIcon}
+          />
         </div>
       </div>
     </div>

packages/core/src/views/account-center/WalletRow.svelte

@@ -70,7 +70,10 @@
   }
 
   .container:hover {
-    background: var(--onboard-gray-500, var(--gray-500));
+    background: var(
+      --account-center-maximized-account-section-background-hover,
+      var(--onboard-gray-500, var(--gray-500))
+    );
   }
 
   .container:hover > div > span.balance {
@@ -84,7 +87,10 @@
   .address-ens {
     margin-left: 0.5rem;
     font-weight: 700;
-    color: var(--onboard-primary-100, var(--primary-100));
+    color: var(
+      --account-center-maximized-address-color,
+      var(--onboard-primary-100, var(--primary-100))
+    );
   }
 
   .balance {

packages/core/src/views/shared/NetworkSelector.svelte

@@ -8,7 +8,7 @@
   import caretIcon from '../../icons/caret'
 
   export let selectIcon: string = caretIcon
-  export let color = '#33394B'
+  export let colorVar: string
   export let chains: Chain[]
   export let bold = false
 
@@ -95,14 +95,24 @@
 
 {#if wallet}
   {#if $switching$}
-    <span style={`color: ${color}; padding: 0 8px 0 4px;`}>switching...</span>
+    <span
+      style={`
+        color: var(${colorVar}, 
+        var(--account-center-network-selector-color, var (--gray-500))); 
+        padding: 0 8px 0 4px;
+      `}
+      >switching...</span
+    >
   {:else}
     <select
       class="flex justify-center items-center pointer"
       bind:this={selectElement}
       value={wallet.chains[0].id}
       on:change={handleSelect}
-      style={`color: ${color}; background-image: url('data:image/svg+xml;utf8,${selectIcon}'); ${
+      style={`
+        color: var(${colorVar}, 
+        var(--account-center-network-selector-color, var (--gray-500)));
+        background-image: url('data:image/svg+xml;utf8,${selectIcon}'); ${
         bold ? 'font-weight: 700;' : ''
       }`}
     >

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.2.3-alpha.5",
+  "version": "2.2.3-alpha.6",
   "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",
@@ -59,7 +59,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.4.0-alpha.8",
+    "@web3-onboard/core": "^2.4.0-alpha.9",
     "@web3-onboard/common": "^2.1.4",
     "use-sync-external-store": "1.0.0"
   },

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.1.3-alpha.5",
+  "version": "2.1.3-alpha.6",
   "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 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",
@@ -60,7 +60,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.1.4",
-    "@web3-onboard/core": "^2.4.0-alpha.8",
+    "@web3-onboard/core": "^2.4.0-alpha.9",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {

pull_request_template.md

@@ -5,4 +5,5 @@
 - [ ] The version field in `package.json` is incremented following [semantic versioning](https://semver.org/)
 - [ ] The box that allows repo maintainers to update this PR is checked
 - [ ] I tested locally to make sure this feature/fix works
+- [ ] I have run `yarn type-check` & `yarn build` to confirm there are not any associated errors
 - [ ] This PR passes the Circle CI checks