thirdweb-dev · mahmud-bn · May 25, 2022 · May 13, 2022 · May 13, 2022 · May 15, 2022
diff --git a/packages/core/README.md b/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;

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.2.9-alpha.2",
+  "version": "2.2.9-alpha.3",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

diff --git a/packages/core/src/constants.ts b/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: ''
 }

diff --git a/packages/core/src/index.ts b/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;

diff --git a/packages/core/src/types.ts b/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 ==== //

diff --git a/packages/core/src/validation.ts b/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

diff --git a/packages/core/src/views/account-center/Index.svelte b/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 />

diff --git a/packages/core/src/views/account-center/Maximized.svelte b/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"