From 0297ebb0298d59799852d51d9089cfcc09f37296 Mon Sep 17 00:00:00 2001
From: Kat Leight <33187102+leightkt@users.noreply.github.com>
Date: Thu, 18 May 2023 11:37:21 -0600
Subject: [PATCH] Enhancement: Account Center Updates (#1723)

---
 .../docs/[...3]modules/[...1]core/+page.md    |  16 +
 packages/core/README.md                       |  14 +
 packages/core/package.json                    |   2 +-
 packages/core/src/constants.ts                |   2 +-
 packages/core/src/views/Index.svelte          |   1 -
 ...mized.svelte => AccountCenterPanel.svelte} | 389 +++++++++---------
 ...d.svelte => AcctCenterTriggerLarge.svelte} |  12 +-
 ...o.svelte => AcctCenterTriggerSmall.svelte} |  61 ++-
 .../src/views/account-center/Index.svelte     |  40 +-
 packages/demo/package.json                    |   2 +-
 packages/demo/src/App.svelte                  |   4 +-
 packages/react/package.json                   |   4 +-
 packages/vue/package.json                     |   4 +-
 13 files changed, 308 insertions(+), 243 deletions(-)
 rename packages/core/src/views/account-center/{Maximized.svelte => AccountCenterPanel.svelte} (50%)
 rename packages/core/src/views/account-center/{Minimized.svelte => AcctCenterTriggerLarge.svelte} (95%)
 rename packages/core/src/views/account-center/{Micro.svelte => AcctCenterTriggerSmall.svelte} (66%)

diff --git a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md
index dcd637d50..a2cf00779 100644
--- a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md
+++ b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md
@@ -17,6 +17,22 @@ title: Core
 
 This is the core package that contains all of the UI and logic to be able to seamlessly connect user's wallets to your app and track the state of those wallets. Onboard no longer contains any wallet specific code, so wallets need to be passed in upon initialization.
 
+:::admonition type="tip"
+_note: Release 2.23.0 moves the default position of the account center from topRight to bottomRight. To reset your application to topRight, include the following when initializing onboard:_
+```typescript
+  accountCenter: {
+      desktop: {
+        enabled: true,
+        position: 'topRight'
+      },
+      mobile: {
+        enabled: true,
+        position: 'topRight'
+      }
+    }
+```
+:::
+
 ## Install
 
 Install the core module:
diff --git a/packages/core/README.md b/packages/core/README.md
index c641a8431..952822193 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -6,6 +6,20 @@
 
 This is the core package that contains all of the UI and logic to be able to seamlessly connect user's wallets to your app and track the state of those wallets. Onboard no longer contains any wallet specific code, so wallets need to be passed in upon initialization.
 
+_Tip: Release 2.23.0 moves the default position of the account center from topRight to bottomRight. To reset your application to topRight, include the following when initializing onboard:_
+```typescript
+  accountCenter: {
+      desktop: {
+        enabled: true,
+        position: 'topRight'
+      },
+      mobile: {
+        enabled: true,
+        position: 'topRight'
+      }
+    }
+```
+
 ## Quick start
 
 Checkout our full library of quick start examples for connecting and interacting with EVM based wallets
diff --git a/packages/core/package.json b/packages/core/package.json
index 8966e3930..b20388dd9 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.18.1-alpha.2",
+  "version": "2.18.1-alpha.3",
   "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/constants.ts b/packages/core/src/constants.ts
index 7fdc27265..e226d7833 100644
--- a/packages/core/src/constants.ts
+++ b/packages/core/src/constants.ts
@@ -7,7 +7,7 @@ export const APP_INITIAL_STATE: AppState = {
   chains: [],
   accountCenter: {
     enabled: true,
-    position: 'topRight',
+    position: 'bottomRight',
     expanded: false,
     minimal: configuration.device.type === 'mobile'
   },
diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte
index 57e612a54..798e5fdd5 100644
--- a/packages/core/src/views/Index.svelte
+++ b/packages/core/src/views/Index.svelte
@@ -378,7 +378,6 @@
   .container {
     padding: 16px;
     font-family: var(--onboard-font-family-normal, var(--font-family-normal));
-    width: 100%;
     pointer-events: none;
     touch-action: none;
   }
diff --git a/packages/core/src/views/account-center/Maximized.svelte b/packages/core/src/views/account-center/AccountCenterPanel.svelte
similarity index 50%
rename from packages/core/src/views/account-center/Maximized.svelte
rename to packages/core/src/views/account-center/AccountCenterPanel.svelte
index f31a3823b..86fe175dd 100644
--- a/packages/core/src/views/account-center/Maximized.svelte
+++ b/packages/core/src/views/account-center/AccountCenterPanel.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { shareReplay, startWith } from 'rxjs/operators'
   import { _ } from 'svelte-i18n'
   import { fly } from 'svelte/transition'
   import { quartOut } from 'svelte/easing'
@@ -52,6 +53,10 @@
 
   const { position } = state.get().accountCenter
   const { device } = configuration
+
+  const accountCenter$ = state
+    .select('accountCenter')
+    .pipe(startWith(state.get().accountCenter), shareReplay(1))
 </script>
 
 <style>
@@ -264,218 +269,222 @@
   />
 {/if}
 
-<div
-  in:fly={{
-    delay: position.includes('top') ? 100 : 0,
-    duration: 600,
-    y: position.includes('top') ? 56 : -76,
-    easing: quartOut,
-    opacity: 0
-  }}
-  on:click|stopPropagation={hideWalletRowMenu}
-  class="outer-container"
->
-  <!-- wallets section -->
-  <div class="wallets-section">
-    <!-- connected accounts -->
-    <div class="p5">
-      <div class="wallets">
-        {#each $wallets$ as wallet, i (wallet.label)}
-          <WalletRow
-            bind:hideMenu={hideWalletRowMenu}
-            {wallet}
-            primary={i === 0}
-          />
-        {/each}
-      </div>
-      <!-- actions -->
-      <div class="actions flex flex-column items-start">
-        <!-- Hide for Mobile  -->
-        {#if device.type === 'desktop'}
-          <!-- 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
+{#if $accountCenter$.expanded}
+  <div
+    transition:fly={{
+      duration: 600,
+      y: position.includes('bottom') ? 56 : -76,
+      easing: quartOut,
+      opacity: 0
+    }}
+    on:click|stopPropagation={hideWalletRowMenu}
+    class="outer-container"
+    style={$accountCenter$.position.includes('bottom')
+      ? 'margin-bottom: 10px;'
+      : 'margin-top: 10px;'}
+  >
+    <!-- wallets section -->
+    <div class="wallets-section">
+      <!-- connected accounts -->
+      <div class="p5">
+        <div class="wallets">
+          {#each $wallets$ as wallet, i (wallet.label)}
+            <WalletRow
+              bind:hideMenu={hideWalletRowMenu}
+              {wallet}
+              primary={i === 0}
+            />
+          {/each}
+        </div>
+        <!-- actions -->
+        <div class="actions flex flex-column items-start">
+          <!-- 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
-            >
-          </div>
-        {/if}
-      </div>
-    </div>
 
-    <!-- network section -->
-    <div
-      class="network-container shadow-1"
-      class:background-blue={(validAppChain && validAppChain.icon) ||
-        defaultChainStyles}
-      class:background-yellow={!validAppChain}
-      class:background-gray={validAppChain && !defaultChainStyles}
-    >
-      <div class="flex items-center p5-5">
-        <!-- network icon -->
-        <div class="relative flex">
-          <WalletAppBadge
-            size={32}
-            padding={4}
-            background="custom"
-            color={!validAppChain
-              ? '#FFAF00'
-              : !validAppChain.icon
-              ? '#EFF1FC'
-              : undefined}
-            customBackgroundColor={validAppChain
-              ? validAppChain.color ||
-                (defaultChainStyles && defaultChainStyles.color) ||
-                unrecognizedChainStyle.color
-              : '#FFE7B3'}
-            border="transparent"
-            radius={8}
-            icon={validAppChain
-              ? validAppChain.icon ||
-                (defaultChainStyles && defaultChainStyles.icon) ||
-                unrecognizedChainStyle.icon
-              : warningIcon}
-          />
-
-          {#if validAppChain}
+            <!-- disconnect all wallets -->
             <div
-              style="right: -5px; bottom: -5px;"
-              class="drop-shadow absolute"
+              on:click={() => (disconnectConfirmModal = true)}
+              class="action-container flex items-center mt pointer"
             >
-              <SuccessStatusIcon size={14} />
+              <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>
 
-        <!-- network selector -->
-        <div class="network-selector-container">
-          <div class="network-selector-label">
-            {$_('accountCenter.currentNetwork', {
-              default: en.accountCenter.currentNetwork
-            })}
-          </div>
-          <div on:click class="flex items-center" style=" width: 100%;">
-            <NetworkSelector
-              chains={appChains}
-              colorVar="--account-center-maximized-network-selector-color"
-              bold={true}
-              selectIcon={caretLightIcon}
-              parentCSSId="maximized_ac"
+      <!-- network section -->
+      <div
+        class="network-container shadow-1"
+        class:background-blue={(validAppChain && validAppChain.icon) ||
+          defaultChainStyles}
+        class:background-yellow={!validAppChain}
+        class:background-gray={validAppChain && !defaultChainStyles}
+      >
+        <div class="flex items-center p5-5">
+          <!-- network icon -->
+          <div class="relative flex">
+            <WalletAppBadge
+              size={32}
+              padding={4}
+              background="custom"
+              color={!validAppChain
+                ? '#FFAF00'
+                : !validAppChain.icon
+                ? '#EFF1FC'
+                : undefined}
+              customBackgroundColor={validAppChain
+                ? validAppChain.color ||
+                  (defaultChainStyles && defaultChainStyles.color) ||
+                  unrecognizedChainStyle.color
+                : '#FFE7B3'}
+              border="transparent"
+              radius={8}
+              icon={validAppChain
+                ? validAppChain.icon ||
+                  (defaultChainStyles && defaultChainStyles.icon) ||
+                  unrecognizedChainStyle.icon
+                : warningIcon}
             />
-          </div>
-        </div>
-      </div>
 
-      <!-- app info section -->
-      <div class="app-info-container">
-        {#if appMetadata}
-          <div class="flex items-start app-info-header">
-            <!-- app icon -->
-            <div class="relative flex app-icon-name">
-              <WalletAppBadge
-                size={32}
-                padding={4}
-                background="white"
-                border="black"
-                radius={8}
-                icon={(appMetadata && appMetadata.icon) || questionIcon}
-              />
-              <div class="app-name">
-                {(appMetadata && appMetadata.name) || 'App Name'}
+            {#if validAppChain}
+              <div
+                style="right: -5px; bottom: -5px;"
+                class="drop-shadow absolute"
+              >
+                <SuccessStatusIcon size={14} />
               </div>
-            </div>
+            {/if}
+          </div>
 
-            <div class="app-description">
-              {(appMetadata && appMetadata.description) ||
-                'This app has not added a description.'}
+          <!-- network selector -->
+          <div class="network-selector-container">
+            <div class="network-selector-label">
+              {$_('accountCenter.currentNetwork', {
+                default: en.accountCenter.currentNetwork
+              })}
+            </div>
+            <div on:click class="flex items-center" style=" width: 100%;">
+              <NetworkSelector
+                chains={appChains}
+                colorVar="--account-center-maximized-network-selector-color"
+                bold={true}
+                selectIcon={caretLightIcon}
+                parentCSSId="maximized_ac"
+              />
             </div>
           </div>
+        </div>
 
-          <!-- app info -->
-          {#if appMetadata.gettingStartedGuide || appMetadata.explore}
-            <div class="app-info">
-              <div class="app-info-heading">
-                {$_('accountCenter.appInfo', {
-                  default: en.accountCenter.appInfo
-                })}
+        <!-- app info section -->
+        <div class="app-info-container">
+          {#if appMetadata}
+            <div class="flex items-start app-info-header">
+              <!-- app icon -->
+              <div class="relative flex app-icon-name">
+                <WalletAppBadge
+                  size={32}
+                  padding={4}
+                  background="white"
+                  border="black"
+                  radius={8}
+                  icon={(appMetadata && appMetadata.icon) || questionIcon}
+                />
+                <div class="app-name">
+                  {(appMetadata && appMetadata.name) || 'App Name'}
+                </div>
               </div>
 
-              {#if appMetadata.gettingStartedGuide}
-                <div class="flex justify-between items-center w100">
-                  <div>
-                    {$_('accountCenter.learnMore', {
-                      default: en.accountCenter.learnMore
-                    })}
-                  </div>
-                  <a
-                    href={appMetadata.gettingStartedGuide}
-                    target="_blank"
-                    rel="noreferrer noopener"
-                  >
-                    {$_('accountCenter.gettingStartedGuide', {
-                      default: en.accountCenter.gettingStartedGuide
-                    })}
-                  </a>
+              <div class="app-description">
+                {(appMetadata && appMetadata.description) ||
+                  'This app has not added a description.'}
+              </div>
+            </div>
+
+            <!-- app info -->
+            {#if appMetadata.gettingStartedGuide || appMetadata.explore}
+              <div class="app-info">
+                <div class="app-info-heading">
+                  {$_('accountCenter.appInfo', {
+                    default: en.accountCenter.appInfo
+                  })}
                 </div>
-              {/if}
-
-              {#if appMetadata.explore}
-                <div class="flex justify-between items-center w100">
-                  <div>
-                    {$_('accountCenter.smartContracts', {
-                      default: en.accountCenter.smartContracts
-                    })}
+
+                {#if appMetadata.gettingStartedGuide}
+                  <div class="flex justify-between items-center w100">
+                    <div>
+                      {$_('accountCenter.learnMore', {
+                        default: en.accountCenter.learnMore
+                      })}
+                    </div>
+                    <a
+                      href={appMetadata.gettingStartedGuide}
+                      target="_blank"
+                      rel="noreferrer noopener"
+                    >
+                      {$_('accountCenter.gettingStartedGuide', {
+                        default: en.accountCenter.gettingStartedGuide
+                      })}
+                    </a>
                   </div>
-                  <a
-                    href={appMetadata.explore}
-                    target="_blank"
-                    rel="noreferrer noopener"
-                  >
-                    {$_('accountCenter.explore', {
-                      default: en.accountCenter.explore
-                    })}
-                  </a>
-                </div>
-              {/if}
-            </div>
+                {/if}
+
+                {#if appMetadata.explore}
+                  <div class="flex justify-between items-center w100">
+                    <div>
+                      {$_('accountCenter.smartContracts', {
+                        default: en.accountCenter.smartContracts
+                      })}
+                    </div>
+                    <a
+                      href={appMetadata.explore}
+                      target="_blank"
+                      rel="noreferrer noopener"
+                    >
+                      {$_('accountCenter.explore', {
+                        default: en.accountCenter.explore
+                      })}
+                    </a>
+                  </div>
+                {/if}
+              </div>
+            {/if}
           {/if}
-        {/if}
-        {#if secondaryTokens && secondaryTokens.length}
-          <SecondaryTokenTable {secondaryTokens} />
-        {/if}
-        <div class="w100">
-          <a
-            href="https://blocknative.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex justify-center items-center powered-by-container"
-          >
-            {@html poweredByBlocknative}
-          </a>
+          {#if secondaryTokens && secondaryTokens.length}
+            <SecondaryTokenTable {secondaryTokens} />
+          {/if}
+          <div class="w100">
+            <a
+              href="https://blocknative.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex justify-center items-center powered-by-container"
+            >
+              {@html poweredByBlocknative}
+            </a>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+{/if}
diff --git a/packages/core/src/views/account-center/Minimized.svelte b/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte
similarity index 95%
rename from packages/core/src/views/account-center/Minimized.svelte
rename to packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte
index 9dc81a725..e167d1196 100644
--- a/packages/core/src/views/account-center/Minimized.svelte
+++ b/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { shareReplay, startWith } from 'rxjs/operators'
   import { fade } from 'svelte/transition'
   import { wallets$ } from '../../streams.js'
   import {
@@ -54,8 +55,12 @@
 
   $: defaultChainStyles = getDefaultChainStyles(primaryChain && primaryChain.id)
 
-  function maximize() {
-    updateAccountCenter({ expanded: true })
+  const accountCenter$ = state
+    .select('accountCenter')
+    .pipe(startWith(state.get().accountCenter), shareReplay(1))
+
+  function toggle() {
+    updateAccountCenter({ expanded: !$accountCenter$.expanded })
   }
 </script>
 
@@ -89,6 +94,7 @@
       --account-center-box-shadow,
       var(--onboard-shadow-3, var(--shadow-3))
     );
+    z-index: 1;
   }
 
   .inner-row {
@@ -149,7 +155,7 @@
   in:fade={{ duration: 250 }}
   out:fade={{ duration: 100 }}
   class="minimized"
-  on:click|stopPropagation={maximize}
+  on:click|stopPropagation={toggle}
 >
   <div class="inner-row">
     <div class="flex relative">
diff --git a/packages/core/src/views/account-center/Micro.svelte b/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte
similarity index 66%
rename from packages/core/src/views/account-center/Micro.svelte
rename to packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte
index 12f59be35..b7ccede77 100644
--- a/packages/core/src/views/account-center/Micro.svelte
+++ b/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte
@@ -1,29 +1,46 @@
 <script lang="ts">
+  import { shareReplay, startWith } from 'rxjs/operators'
   import { wallets$ } from '../../streams.js'
   import { updateAccountCenter } from '../../store/actions.js'
   import { questionIcon } from '../../icons/index.js'
   import { WalletAppBadge, SuccessStatusIcon } from '../shared/index.js'
+  import { state } from '../../store/index.js'
   import { configuration } from '../../configuration.js'
 
   const { appMetadata } = configuration
   const appIcon = (appMetadata && appMetadata.icon) || questionIcon
+
   $: [primaryWallet] = $wallets$
 
-  function maximize() {
-    updateAccountCenter({ expanded: true })
+  const accountCenter$ = state
+    .select('accountCenter')
+    .pipe(startWith(state.get().accountCenter), shareReplay(1))
+
+  function toggle() {
+    updateAccountCenter({ expanded: !$accountCenter$.expanded })
   }
 </script>
 
 <style>
   .minimized {
-    --background-color: var(--account-center-micro-background, var(--w3o-background-color, white));
-    --text-color: var(--w3o-text-color);
-    --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));
+    --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)
+    );
 
     cursor: pointer;
     pointer-events: auto;
-    border: 1px solid transparent;
+    width: 80px;
+    border: 1px solid;
 
     background: var(--background-color);
     color: var(--text-color);
@@ -33,17 +50,7 @@
       --account-center-box-shadow,
       var(--onboard-shadow-3, var(--shadow-3))
     );
-  }
-
-  .drop-shadow {
-    filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2));
-  }
-
-  .inner-row {
-    display: flex;
-    flex-flow: row nowrap;
-    width: 80px;
-    padding: 0.75rem;
+    z-index: 1;
   }
 
   .wallet-square-wrapper {
@@ -56,9 +63,25 @@
     right: -4px;
     bottom: -4px;
   }
+
+  .inner-row {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 80px;
+    padding: 0.75rem;
+  }
+  .drop-shadow {
+    filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2));
+  }
 </style>
 
-<div class="minimized" on:click|stopPropagation={maximize}>
+<div
+  class="minimized"
+  on:click|stopPropagation={toggle}
+  style={$accountCenter$.position.includes('Left')
+    ? 'align-self: flex-start'
+    : null}
+>
   <div class="inner-row">
     <!-- app and wallet icon badge -->
     <div class="drop-shadow">
diff --git a/packages/core/src/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte
index 22097d111..ead09a185 100644
--- a/packages/core/src/views/account-center/Index.svelte
+++ b/packages/core/src/views/account-center/Index.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
   import { onDestroy } from 'svelte'
   import { updateAccountCenter } from '../../store/actions.js'
-  import { wallets$ } from '../../streams.js'
   import { state } from '../../store/index.js'
   import { shareReplay, startWith } from 'rxjs/operators'
-  import Maximized from './Maximized.svelte'
-  import Minimized from './Minimized.svelte'
-  import Micro from './Micro.svelte'
-
-  export let mountInContainer = false
+  import AccountCenterPanel from './AccountCenterPanel.svelte'
+  import TriggerLarge from './AcctCenterTriggerLarge.svelte'
+  import TriggerSmall from './AcctCenterTriggerSmall.svelte'
 
   const accountCenter$ = state
     .select('accountCenter')
@@ -25,19 +22,20 @@
 
 <svelte:window on:click={minimize} />
 
-{#if mountInContainer}
-  {#if $wallets$.length}
-    <div class="container flex flex-column fixed z-indexed">
-      <svelte:self />
-    </div>
+{#key $accountCenter$.position}
+{#key $accountCenter$.minimal}
+<div class="container flex flex-column items-end" style="width: 315px;">
+  {#if $accountCenter$.position.includes('bottom')}
+    <AccountCenterPanel />
+  {/if}
+  {#if $accountCenter$.minimal}
+    <TriggerSmall />
+  {:else}
+    <TriggerLarge />
+  {/if}
+  {#if $accountCenter$.position.includes('top')}
+    <AccountCenterPanel />
   {/if}
-{:else if !$accountCenter$.expanded && !$accountCenter$.minimal}
-  <!-- minimized -->
-  <Minimized />
-{:else if !$accountCenter$.expanded && $accountCenter$.minimal}
-  <!-- micro -->
-  <Micro />
-{:else}
-  <!-- maximized -->
-  <Maximized />
-{/if}
+</div>
+{/key}
+{/key}
diff --git a/packages/demo/package.json b/packages/demo/package.json
index bbae26a1f..a64f353ca 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.2",
+    "@web3-onboard/core": "^2.18.1-alpha.3",
     "@web3-onboard/coinbase": "^2.2.3",
     "@web3-onboard/transaction-preview": "^2.0.7",
     "@web3-onboard/dcent": "^2.2.7-alpha.1",
diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
index 312dda530..39839e917 100644
--- a/packages/demo/src/App.svelte
+++ b/packages/demo/src/App.svelte
@@ -310,9 +310,9 @@
     // // example customizing account center
     accountCenter: {
       desktop: {
-        position: 'topRight',
+        position: 'topLeft',
         enabled: true,
-        minimal: false
+        minimal: true
       }
     },
     // example customizing copy
diff --git a/packages/react/package.json b/packages/react/package.json
index 83c6779cc..6cd1dfcea 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.8.3-alpha.2",
+  "version": "2.8.3-alpha.3",
   "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.2",
+    "@web3-onboard/core": "^2.18.1-alpha.3",
     "@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 7766a5b29..7e21ef5dc 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.7.2-alpha.2",
+  "version": "2.7.2-alpha.3",
   "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.2",
+    "@web3-onboard/core": "^2.18.1-alpha.3",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {