[core-v2.2.9-alpha.3, react-v2.1.7-alpha.4]: A minimal account center feature (#1004)

* Minimized the account center button removing balance, address, and network switch

* Remove disconnect all wallets and connect another wallet option on mobile

* Remove disconnect all wallets and connect another wallet option on mobile

* Version bump

* Formatting

* Version bump

* Added yarn lock to gitignore

* Version bump

* Yarn lock fix

* Delete yarn.lock

* Spacing and documentation update

* Documentation update

* Demo core version package update

* fixes

* Desktop and Mobile configurations

* Refine constant configurations

* Refine constant configurations

* Remove commented code

* Remove empty lines

* Packages bump

* Documentation update

* Cleanup

* Conflicts fix

* styling fixes

* styling fixes

* fixes

* Change width based on micro state

* Remove yarn.lock from demo

* Revert yarn.lock changes

Co-authored-by: Aaron Barnard <[email protected]>

Author: mahmud-bn

packages/core/README.md

@@ -92,20 +92,19 @@ To see a list of all of the text values that can be internationalized or replace
 Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood.
 
 **`accountCenter`**
-An object that defines whether the account center UI is enabled and it's position on the screen. Currently the account center is disabled for mobile devices, so only desktop options are available.
+An object that defines whether the account center UI (default and minimal) is enabled and it's position on the screen. Currently the account center is enabled for both desktop and mobile devices.
 
 ```typescript
-type AccountCenterOptions = {
-  desktop: {
-    position?: AccountCenterPosition // default: 'topRight'
-    enabled?: AccountCenter['enabled'] // default: true
-  }
+export type AccountCenter = {
+  enabled: boolean
+  position?: AccountCenterPosition // default: 'topRight'
+  expanded?: boolean // default: true
+  minimal?: boolean // enabled by default for mobile
 }
 
-type AccountCenter = {
-  enabled: boolean
-  position: AccountCenterPosition
-  expanded: boolean
+export type AccountCenterOptions = {
+  desktop: Omit<AccountCenter, 'expanded'>
+  mobile: Omit<AccountCenter, 'expanded'>
 }
 
 type AccountCenterPosition =
@@ -175,6 +174,18 @@ const onboard = Onboard({
       { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
     ]
   },
+  accountCenter: {
+    desktop: {
+      position: 'topRight',
+      enabled: true,
+      minimal: true
+    },
+    mobile: {
+      position: 'topRight',
+      enabled: true,
+      minimal: true
+    }
+  },
   i18n: {
     en: {
       connect: {
@@ -316,6 +327,7 @@ type AccountCenter = {
   enabled: boolean
   position: AccountCenterPosition
   expanded: boolean
+  minimal: boolean
 }
 
 type AccountCenterPosition =
@@ -516,8 +528,10 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --onboard-spacing-4: 1rem;
   --onboard-spacing-5: 0.5rem;
 
-  /* SHADOWS */
+  /* BORDER RADIUS */
   --onboard-border-radius-1: 24px;
+  --onboard-border-radius-2: 20px;
+  --onboard-border-radius-3: 16px;
 
   /* SHADOWS */
   --onboard-shadow-0: none;

packages/core/src/constants.ts

@@ -1,4 +1,5 @@
 import type { AppState } from './types'
+import { getDevice } from './utils'
 
 export const APP_INITIAL_STATE: AppState = {
   wallets: [],
@@ -7,7 +8,8 @@ export const APP_INITIAL_STATE: AppState = {
   accountCenter: {
     enabled: true,
     position: 'topRight',
-    expanded: false
+    expanded: false,
+    minimal: getDevice().type === 'mobile'
   },
   locale: ''
 }

packages/core/src/index.ts

@@ -15,6 +15,7 @@ import initI18N from './i18n'
 
 import App from './views/Index.svelte'
 import type { InitOptions, OnboardAPI } from './types'
+import { APP_INITIAL_STATE } from './constants'
 import { getDevice } from './utils'
 
 const API = {
@@ -58,19 +59,26 @@ function init(options: InitOptions): OnboardAPI {
   initI18N(i18n)
   addChains(chains)
 
-  let accountCenterUpdate
-
   const device = getDevice()
-
-  if (device.type === 'mobile') {
-    accountCenterUpdate = {
-      enabled: false
+  
+  // update accountCenter
+  if (typeof accountCenter !== 'undefined') {
+    let accountCenterUpdate
+
+    if (device.type === 'mobile' && accountCenter.mobile) {
+      accountCenterUpdate = {
+        ...APP_INITIAL_STATE.accountCenter,
+        ...accountCenter.mobile
+      }
+    } else if (accountCenter.desktop) {
+      accountCenterUpdate = {
+        ...APP_INITIAL_STATE.accountCenter,
+        ...accountCenter.desktop
+      }
     }
-  } else if (typeof accountCenter !== 'undefined' && accountCenter.desktop) {
-    accountCenterUpdate = accountCenter.desktop
-  }
 
-  accountCenterUpdate && updateAccountCenter(accountCenterUpdate)
+    updateAccountCenter(accountCenterUpdate)
+  }  
 
   const { svelteInstance } = internalState$.getValue()
 
@@ -187,7 +195,10 @@ function mountApp() {
           --spacing-7: 0.125rem;
   
           /* BORDER RADIUS */
-          --border-radius-1: 24px;  
+          --border-radius-1: 24px;
+          --border-radius-2: 20px;
+          --border-radius-3: 16px;
+
 
           /* SHADOWS */
           --shadow-0: none;

packages/core/src/types.ts

@@ -113,17 +113,16 @@ export type AccountCenterPosition =
   | 'bottomLeft'
   | 'topLeft'
 
-export type AccountCenterOptions = {
-  desktop?: {
+export type AccountCenter = {
+    enabled: boolean
     position?: AccountCenterPosition
-    enabled?: AccountCenter['enabled']
-  }
+    expanded?: boolean
+    minimal?: boolean
 }
-
-export type AccountCenter = {
-  enabled: boolean
-  position: AccountCenterPosition
-  expanded: boolean
+  
+export type AccountCenterOptions = {
+    desktop: Omit<AccountCenter, 'expanded'>
+    mobile: Omit<AccountCenter, 'expanded'>
 }
 
 // ==== ACTIONS ==== //

packages/core/src/validation.ts

@@ -114,11 +114,13 @@ const initOptions = Joi.object({
   accountCenter: Joi.object({
     desktop: Joi.object({
       enabled: Joi.boolean(),
+      minimal: Joi.boolean(),
       position: accountCenterPosition
     }),
     mobile: Joi.object({
       enabled: Joi.boolean(),
-      position: accountCenterPosition
+      minimal: Joi.boolean(),
+      position: accountCenterPosition,
     })
   })
 })
@@ -146,7 +148,8 @@ const setChainOptions = Joi.object({
 const accountCenter = Joi.object({
   enabled: Joi.boolean(),
   position: accountCenterPosition,
-  expanded: Joi.boolean()
+  expanded: Joi.boolean(),
+  minimal: Joi.boolean()
 })
 
 type ValidateReturn = Joi.ValidationResult | null

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

@@ -5,6 +5,7 @@
   import type { AccountCenter } from '../../types'
   import Maximized from './Maximized.svelte'
   import Minimized from './Minimized.svelte'
+  import Micro from './Micro.svelte'
 
   export let settings: AccountCenter
 
@@ -28,21 +29,31 @@
 <style>
   .container {
     padding: 16px;
-    max-width: 364px;
-    min-width: 348px;
     font-family: var(--onboard-font-family-normal, var(--font-family-normal));
+    width: 100%;
+  }
+
+  @media all and (min-width: 428px) {
+    .container {
+      max-width: 352px;
+    }
   }
 </style>
 
 <svelte:window on:click={minimize} />
 
 <div
   class="container flex flex-column absolute"
-  style={accountCenterPositions[settings.position]}
+  style="{accountCenterPositions[
+    settings.position
+  ]} width: {!settings.expanded && settings.minimal ? 'auto' : '100%'}"
 >
-  {#if !settings.expanded}
+  {#if !settings.expanded && !settings.minimal}
     <!-- minimized -->
     <Minimized />
+  {:else if !settings.expanded && settings.minimal}
+    <!-- micro -->
+    <Micro />
   {:else}
     <!-- maximized -->
     <Maximized />

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

@@ -20,6 +20,7 @@
   import { updateAccountCenter } from '../../store/actions'
   import blocknative from '../../icons/blocknative'
   import DisconnectAllConfirm from './DisconnectAllConfirm.svelte'
+  import { getDevice } from '../../utils'
 
   function disconnectAllWallets() {
     $wallets$.forEach(({ label }) => disconnect({ label }))
@@ -44,12 +45,13 @@
   )
 
   const { position } = state.get().accountCenter
+  const device = getDevice()
 </script>
 
 <style>
   .outer-container {
     background-color: var(--onboard-gray-600, var(--gray-600));
-    border-radius: 16px;
+    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));
   }
@@ -228,38 +230,40 @@
           />
         {/each}
       </div>
-
       <!-- actions -->
       <div class="actions flex flex-column items-start">
-        <!-- connect another wallet -->
-        <div
-          on:click={() => connect()}
-          class="action-container flex items-center pointer"
-        >
-          <div class="plus-icon flex items-center justify-center">
-            {@html plusCircleIcon}
-          </div>
-          <span class="action-text"
-            >{$_('accountCenter.connectAnotherWallet', {
-              default: en.accountCenter.connectAnotherWallet
-            })}</span
+        <!-- Hide for Mobile  -->
+        {#if device.type === 'desktop'}
+          <!-- connect another wallet -->
+          <div
+            on:click={() => connect()}
+            class="action-container flex items-center pointer"
           >
-        </div>
-
-        <!-- disconnect all wallets -->
-        <div
-          on:click={() => (disconnectConfirmModal = true)}
-          class="action-container flex items-center mt pointer"
-        >
-          <div class="arrow-forward flex items-center justify-center">
-            {@html arrowForwardIcon}
+            <div class="plus-icon flex items-center justify-center">
+              {@html plusCircleIcon}
+            </div>
+            <span class="action-text"
+              >{$_('accountCenter.connectAnotherWallet', {
+                default: en.accountCenter.connectAnotherWallet
+              })}</span
+            >
           </div>
-          <span class="action-text"
-            >{$_('accountCenter.disconnectAllWallets', {
-              default: en.accountCenter.disconnectAllWallets
-            })}</span
+
+          <!-- disconnect all wallets -->
+          <div
+            on:click={() => (disconnectConfirmModal = true)}
+            class="action-container flex items-center mt pointer"
           >
-        </div>
+            <div class="arrow-forward flex items-center justify-center">
+              {@html arrowForwardIcon}
+            </div>
+            <span class="action-text"
+              >{$_('accountCenter.disconnectAllWallets', {
+                default: en.accountCenter.disconnectAllWallets
+              })}</span
+            >
+          </div>
+        {/if}
       </div>
     </div>
 
@@ -414,7 +418,6 @@
             default: en.accountCenter.backToApp
           })}</button
         >
-
         <a
           href="https://blocknative.com"
           target="_blank"