Revert "Enhancement: Account Center Updates (#1723)" (#1729)

This reverts commit 0297ebb.

Author: Adamj1232

docs/src/routes/docs/[...3]modules/[...1]core/+page.md

@@ -17,22 +17,6 @@ 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:

packages/core/README.md

@@ -6,20 +6,6 @@
 
 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

packages/core/package.json

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

packages/core/src/constants.ts

@@ -7,7 +7,7 @@ export const APP_INITIAL_STATE: AppState = {
   chains: [],
   accountCenter: {
     enabled: true,
-    position: 'bottomRight',
+    position: 'topRight',
     expanded: false,
     minimal: configuration.device.type === 'mobile'
   },

packages/core/src/views/Index.svelte

@@ -378,6 +378,7 @@
   .container {
     padding: 16px;
     font-family: var(--onboard-font-family-normal, var(--font-family-normal));
+    width: 100%;
     pointer-events: none;
     touch-action: none;
   }

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

@@ -1,11 +1,14 @@
 <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 AccountCenterPanel from './AccountCenterPanel.svelte'
-  import TriggerLarge from './AcctCenterTriggerLarge.svelte'
-  import TriggerSmall from './AcctCenterTriggerSmall.svelte'
+  import Maximized from './Maximized.svelte'
+  import Minimized from './Minimized.svelte'
+  import Micro from './Micro.svelte'
+
+  export let mountInContainer = false
 
   const accountCenter$ = state
     .select('accountCenter')
@@ -22,20 +25,19 @@
 
 <svelte:window on:click={minimize} />
 
-{#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 mountInContainer}
+  {#if $wallets$.length}
+    <div class="container flex flex-column fixed z-indexed">
+      <svelte:self />
+    </div>
   {/if}
-</div>
-{/key}
-{/key}
+{:else if !$accountCenter$.expanded && !$accountCenter$.minimal}
+  <!-- minimized -->
+  <Minimized />
+{:else if !$accountCenter$.expanded && $accountCenter$.minimal}
+  <!-- micro -->
+  <Micro />
+{:else}
+  <!-- maximized -->
+  <Maximized />
+{/if}