Enhancement: Account center updates (#1740)

Author: leightkt

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.24.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,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.24.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.19.2",
+  "version": "2.20.0-alpha.1",
   "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,9 +7,9 @@ export const APP_INITIAL_STATE: AppState = {
   chains: [],
   accountCenter: {
     enabled: true,
-    position: 'topRight',
+    position: 'bottomRight',
     expanded: false,
-    minimal: configuration.device.type === 'mobile'
+    minimal: true
   },
   notify: {
     enabled: true,

packages/core/src/views/Index.svelte

@@ -378,9 +378,9 @@
   .container {
     padding: 16px;
     font-family: var(--onboard-font-family-normal, var(--font-family-normal));
-    width: 100%;
     pointer-events: none;
     touch-action: none;
+    width: 100%;
   }
 
   .z-indexed {
@@ -442,18 +442,7 @@
     {#if $accountCenter$.position.includes('bottom')}
       <div id="w3o-transaction-preview-container" style="margin-bottom: 8px;" />
     {/if}
-    <div
-      style={!$accountCenter$.expanded &&
-      $accountCenter$.minimal &&
-      $accountCenter$.position.includes('Right')
-        ? 'margin-left: auto'
-        : !$accountCenter$.expanded &&
-          $accountCenter$.minimal &&
-          $accountCenter$.position.includes('Left')
-        ? 'margin-right: auto'
-        : ''}
-      id="account-center-with-notify"
-    >
+    <div id="account-center-with-notify">
       {#await accountCenterComponent then AccountCenter}
         {#if AccountCenter}
           <svelte:component this={AccountCenter} />
@@ -491,21 +480,11 @@
     {#if $accountCenter$.position.includes('bottom')}
       <div id="w3o-transaction-preview-container" style="margin-bottom: 8px;" />
     {/if}
-    <div
-      style={!$accountCenter$.expanded &&
-      $accountCenter$.minimal &&
-      $accountCenter$.position.includes('Right')
-        ? 'margin-left: auto'
-        : !$accountCenter$.expanded &&
-          $accountCenter$.minimal &&
-          $accountCenter$.position.includes('Left')
-        ? 'margin-right: auto'
-        : ''}
-    >
+    <div>
       {#if $accountCenter$.enabled && $wallets$.length}
         {#await accountCenterComponent then AccountCenter}
           {#if AccountCenter}
-            <svelte:component this={AccountCenter} />
+          <svelte:component this={AccountCenter} />
           {/if}
         {/await}
       {/if}