From 593f39247c75ceac43750e4d9bea63f4d3214fcc Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Thu, 11 May 2023 14:57:43 -0600
Subject: [PATCH 01/14] move default position to bottomRight

---
 packages/core/package.json     | 2 +-
 packages/core/src/constants.ts | 2 +-
 packages/demo/package.json     | 2 +-
 packages/react/package.json    | 4 ++--
 packages/vue/package.json      | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index bb7a99bd5..510f92841 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.18.0",
+  "version": "2.18.1-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",
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/demo/package.json b/packages/demo/package.json
index 19abec5cc..3cc370d03 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.0",
+    "@web3-onboard/core": "^2.18.1-alpha.1",
     "@web3-onboard/coinbase": "^2.2.3",
     "@web3-onboard/transaction-preview": "^2.0.7",
     "@web3-onboard/dcent": "^2.2.6",
diff --git a/packages/react/package.json b/packages/react/package.json
index e7cf5425b..072f7ceb2 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.8.2",
+  "version": "2.8.3-alpha.1",
   "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.0",
+    "@web3-onboard/core": "^2.18.1-alpha.1",
     "@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 5832ba042..519c5784c 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.7.1",
+  "version": "2.7.2-alpha.1",
   "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.0",
+    "@web3-onboard/core": "^2.18.1-alpha.1",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {

From a46a006186aecd13868ac22825ebf90d82016561 Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Thu, 11 May 2023 16:58:57 -0600
Subject: [PATCH 02/14] changes to minimized

---
 packages/core/src/views/Index.svelte          |   1 -
 .../src/views/account-center/Index.svelte     |   9 +-
 .../src/views/account-center/Maximized.svelte |   6 +
 .../src/views/account-center/Minimized.svelte | 182 ++++--------------
 4 files changed, 50 insertions(+), 148 deletions(-)

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/Index.svelte b/packages/core/src/views/account-center/Index.svelte
index 22097d111..2d87b6b19 100644
--- a/packages/core/src/views/account-center/Index.svelte
+++ b/packages/core/src/views/account-center/Index.svelte
@@ -31,9 +31,12 @@
       <svelte:self />
     </div>
   {/if}
-{:else if !$accountCenter$.expanded && !$accountCenter$.minimal}
-  <!-- minimized -->
-  <Minimized />
+{:else if !$accountCenter$.minimal}
+    {#if $accountCenter$.expanded}
+      <Maximized />
+    {/if}
+    <!-- micro -->
+    <Minimized />
 {:else if !$accountCenter$.expanded && $accountCenter$.minimal}
   <!-- micro -->
   <Micro />
diff --git a/packages/core/src/views/account-center/Maximized.svelte b/packages/core/src/views/account-center/Maximized.svelte
index f31a3823b..ae5f8a42b 100644
--- a/packages/core/src/views/account-center/Maximized.svelte
+++ b/packages/core/src/views/account-center/Maximized.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>
@@ -274,6 +279,7 @@
   }}
   on:click|stopPropagation={hideWalletRowMenu}
   class="outer-container"
+  style="{$accountCenter$.position.includes('bottom') ? 'margin-bottom: 10px;' : 'margin-top: 10px;'}"
 >
   <!-- wallets section -->
   <div class="wallets-section">
diff --git a/packages/core/src/views/account-center/Minimized.svelte b/packages/core/src/views/account-center/Minimized.svelte
index 26ff1ea77..25715eb1b 100644
--- a/packages/core/src/views/account-center/Minimized.svelte
+++ b/packages/core/src/views/account-center/Minimized.svelte
@@ -61,15 +61,23 @@
 
 <style>
   .minimized {
-    --background-color: var(--account-center-minimized-background, var(--w3o-background-color, white));
+    --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));
+    --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;
-    width: 100%;
-    padding: 0.5rem;
+    width: 80px;
     border: 1px solid;
 
     background: var(--background-color);
@@ -82,95 +90,46 @@
     );
   }
 
-  .inner-row {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0 0.25rem;
-  }
-
-  .wallet-info {
-    display: flex;
-    flex: 1;
-    flex-flow: column;
-    height: 2.5rem;
-    overflow: hidden;
+  .wallet-square-wrapper {
+    position: relative;
+    margin-left: -8px;
   }
 
-  .address {
-    font-weight: 600;
-    line-height: 1.25rem;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    /* legacy variables */
-    color: var(--account-center-minimized-address-color, inherit);
+  .check-icon-wrapper {
+    position: absolute;
+    right: -4px;
+    bottom: -4px;
   }
 
-  .balance {
-    font-weight: 400;
-    line-height: 1.25rem;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    opacity: 0.6;
-    color: var(--account-center-minimized-balance-color, inherit);
-  }
-
-  .chain-icon {
-    width: 22px;
-    height: 22px;
-    padding: 4px;
-    border-radius: 25px;
-    margin-right: 4px;
-  }
-
-  .container {
-    border: 1px solid transparent;
-    border-radius: 16px;
-    padding: 1px;
-    transition: border-color 250ms ease-in-out, backround 250ms ease-in-out;
-    max-width: 128px;
-    cursor: default;
+  .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));
   }
-
-  .color-yellow {
-    color: var(
-      --account-center-chain-warning,
-      var(--onboard-warning-500, var(--warning-500))
-    );
-  }
-
-  .color-white {
-    color: var(--onboard-primary-100, var(--primary-100));
-  }
 </style>
 
 <div
-  in:fade={{ duration: 250 }}
-  out:fade={{ duration: 100 }}
   class="minimized"
   on:click|stopPropagation={maximize}
 >
   <div class="inner-row">
-    <div class="flex relative">
+    <!-- app and wallet icon badge -->
+    <div class="drop-shadow">
+      <WalletAppBadge
+        size={32}
+        padding={4}
+        background={'white'}
+        border="darkGreen"
+        radius={8}
+        icon={appIcon}
+      />
+    </div>
+    <div class="wallet-square-wrapper">
       <div class="drop-shadow">
-        <WalletAppBadge
-          size={32}
-          padding={4}
-          background={'white'}
-          border="darkGreen"
-          radius={8}
-          icon={appIcon}
-        />
-      </div>
-
-      <div style="margin-left: -0.5rem;" class="drop-shadow">
         <WalletAppBadge
           size={32}
           padding={4}
@@ -181,74 +140,9 @@
         />
       </div>
 
-      <div style="right: -4px; bottom: -4px;" class="drop-shadow absolute">
+      <div class="check-icon-wrapper drop-shadow">
         <SuccessStatusIcon size={14} />
       </div>
     </div>
-
-    <!-- address and balance -->
-    <div class="wallet-info">
-      <div class="address">
-        {ensName
-          ? shortenDomain(ensName)
-          : unsName
-          ? shortenDomain(unsName)
-          : shortenedFirstAddress}
-      </div>
-      {#if firstAddressBalance}
-        <div in:fade class="balance">
-          {firstAddressBalance.length > 7
-            ? firstAddressBalance.slice(0, 7)
-            : firstAddressBalance}
-          {firstAddressAsset}
-        </div>
-      {/if}
-    </div>
-
-    <!-- network badge -->
-    <div class="network">
-      <div
-        on:click|stopPropagation
-        class="container shadow-1 flex items-center"
-        style={`border-color: var(${
-          validAppChain
-            ? '--onboard-primary-200, var(--primary-200)'
-            : '--onboard-warning-500, var(--warning-500)'
-        }); background-color: var(${
-          validAppChain
-            ? '--account-center-minimized-chain-select-background, var(--primary-100)'
-            : '--account-center-minimized-chain-select-background-warning, var(--warning-100)'
-        })`}
-      >
-        <div class="flex items-center">
-          <div
-            class:color-yellow={!validAppChain}
-            class:color-white={validAppChain && !validAppChain.icon}
-            class="chain-icon flex justify-center items-center"
-            style={`background-color: ${
-              validAppChain
-                ? validAppChain.color ||
-                  (defaultChainStyles && defaultChainStyles.color) ||
-                  unrecognizedChainStyle.color
-                : 'var(--onboard-warning-200, var(--warning-200))'
-            };`}
-          >
-            {@html validAppChain
-              ? validAppChain.icon ||
-                (defaultChainStyles && defaultChainStyles.icon) ||
-                unrecognizedChainStyle.icon
-              : warningIcon}
-          </div>
-
-          <NetworkSelector
-            {chains}
-            colorVar="--account-center-minimized-network-selector-color"
-            selectIcon={caretIcon}
-            parentCSSId="minimized_ac"
-          />
-        </div>
-      </div>
-    </div>
-
   </div>
 </div>

From 3832095d7a57b1a5bb1b2ce7cca200dc856be28a Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Thu, 11 May 2023 17:04:56 -0600
Subject: [PATCH 03/14] toggle on minimized click

---
 packages/core/src/views/account-center/Index.svelte   |  4 +++-
 .../core/src/views/account-center/Minimized.svelte    | 11 ++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte
index 2d87b6b19..7fca135db 100644
--- a/packages/core/src/views/account-center/Index.svelte
+++ b/packages/core/src/views/account-center/Index.svelte
@@ -23,7 +23,7 @@
   }
 </script>
 
-<svelte:window on:click={minimize} />
+<!-- <svelte:window on:click={minimize} /> -->
 
 {#if mountInContainer}
   {#if $wallets$.length}
@@ -32,11 +32,13 @@
     </div>
   {/if}
 {:else if !$accountCenter$.minimal}
+  <div class="container flex flex-column items-end">
     {#if $accountCenter$.expanded}
       <Maximized />
     {/if}
     <!-- micro -->
     <Minimized />
+  </div>
 {:else if !$accountCenter$.expanded && $accountCenter$.minimal}
   <!-- micro -->
   <Micro />
diff --git a/packages/core/src/views/account-center/Minimized.svelte b/packages/core/src/views/account-center/Minimized.svelte
index 25715eb1b..670a4a0db 100644
--- a/packages/core/src/views/account-center/Minimized.svelte
+++ b/packages/core/src/views/account-center/Minimized.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>
 
@@ -114,7 +119,7 @@
 
 <div
   class="minimized"
-  on:click|stopPropagation={maximize}
+  on:click|stopPropagation={toggle}
 >
   <div class="inner-row">
     <!-- app and wallet icon badge -->

From 1e4e0e0e0961278c2a41173f40841444ca7419d8 Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Mon, 15 May 2023 16:45:20 -0600
Subject: [PATCH 04/14] fix transition

---
 .../src/views/account-center/Index.svelte     |  33 ++--
 .../src/views/account-center/Maximized.svelte |  12 +-
 .../src/views/account-center/Micro.svelte     |  63 ++++--
 .../src/views/account-center/Minimized.svelte | 184 ++++++++++++++----
 4 files changed, 212 insertions(+), 80 deletions(-)

diff --git a/packages/core/src/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte
index 7fca135db..e0d0a47d7 100644
--- a/packages/core/src/views/account-center/Index.svelte
+++ b/packages/core/src/views/account-center/Index.svelte
@@ -1,48 +1,47 @@
 <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
-
   const accountCenter$ = state
     .select('accountCenter')
     .pipe(startWith(state.get().accountCenter), shareReplay(1))
 
   onDestroy(minimize)
+  let visible = false
 
   function minimize() {
     if ($accountCenter$.expanded) {
       updateAccountCenter({ expanded: false })
+      visible=false
     }
   }
 </script>
 
-<!-- <svelte:window on:click={minimize} /> -->
-
-{#if mountInContainer}
-  {#if $wallets$.length}
-    <div class="container flex flex-column fixed z-indexed">
-      <svelte:self />
-    </div>
-  {/if}
-{:else if !$accountCenter$.minimal}
+{#if !$accountCenter$.minimal}
   <div class="container flex flex-column items-end">
-    {#if $accountCenter$.expanded}
+    {#if $accountCenter$.position.includes('bottom')}
       <Maximized />
     {/if}
     <!-- micro -->
     <Minimized />
+    {#if $accountCenter$.position.includes('top')}
+      <Maximized />
+    {/if}
   </div>
-{:else if !$accountCenter$.expanded && $accountCenter$.minimal}
+{:else if $accountCenter$.minimal}
+  <div class="container flex flex-column items-end">
   <!-- micro -->
+  {#if $accountCenter$.position.includes('bottom')}
+    <Maximized />
+  {/if}
   <Micro />
-{:else}
-  <!-- maximized -->
-  <Maximized />
+  {#if $accountCenter$.position.includes('top')}
+    <Maximized />
+  {/if}
+  </div>
 {/if}
diff --git a/packages/core/src/views/account-center/Maximized.svelte b/packages/core/src/views/account-center/Maximized.svelte
index ae5f8a42b..a1d577cdd 100644
--- a/packages/core/src/views/account-center/Maximized.svelte
+++ b/packages/core/src/views/account-center/Maximized.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { shareReplay, startWith } from 'rxjs/operators'
   import { _ } from 'svelte-i18n'
-  import { fly } from 'svelte/transition'
+  import { fly, fade } from 'svelte/transition'
   import { quartOut } from 'svelte/easing'
   import { wallets$ } from '../../streams.js'
   import en from '../../i18n/en.json'
@@ -269,11 +269,14 @@
   />
 {/if}
 
+
+
+{#if $accountCenter$.expanded}
 <div
-  in:fly={{
-    delay: position.includes('top') ? 100 : 0,
+  transition:fly={{
+    delay: position.includes('bottom') ? 100 : 0,
     duration: 600,
-    y: position.includes('top') ? 56 : -76,
+    y: position.includes('bottom') ? 56 : -76,
     easing: quartOut,
     opacity: 0
   }}
@@ -485,3 +488,4 @@
     </div>
   </div>
 </div>
+{/if}
\ No newline at end of file
diff --git a/packages/core/src/views/account-center/Micro.svelte b/packages/core/src/views/account-center/Micro.svelte
index 12f59be35..ac516b955 100644
--- a/packages/core/src/views/account-center/Micro.svelte
+++ b/packages/core/src/views/account-center/Micro.svelte
@@ -1,29 +1,49 @@
 <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 {
+    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);
@@ -35,17 +55,6 @@
     );
   }
 
-  .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;
-  }
-
   .wallet-square-wrapper {
     position: relative;
     margin-left: -8px;
@@ -56,9 +65,23 @@
     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/Minimized.svelte b/packages/core/src/views/account-center/Minimized.svelte
index 670a4a0db..9ddca9c9e 100644
--- a/packages/core/src/views/account-center/Minimized.svelte
+++ b/packages/core/src/views/account-center/Minimized.svelte
@@ -66,23 +66,15 @@
 
 <style>
   .minimized {
-    --background-color: var(
-      --account-center-minimized-background,
-      var(--w3o-background-color, white)
-    );
+    --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)
-    );
+    --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;
-    width: 80px;
+    width: 100%;
+    padding: 0.5rem;
     border: 1px solid;
 
     background: var(--background-color);
@@ -95,46 +87,95 @@
     );
   }
 
-  .wallet-square-wrapper {
-    position: relative;
-    margin-left: -8px;
+  .inner-row {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0 0.25rem;
   }
 
-  .check-icon-wrapper {
-    position: absolute;
-    right: -4px;
-    bottom: -4px;
+  .wallet-info {
+    display: flex;
+    flex: 1;
+    flex-flow: column;
+    height: 2.5rem;
+    overflow: hidden;
   }
 
-  .inner-row {
-    display: flex;
-    flex-flow: row nowrap;
-    width: 80px;
-    padding: 0.75rem;
+  .address {
+    font-weight: 600;
+    line-height: 1.25rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    /* legacy variables */
+    color: var(--account-center-minimized-address-color, inherit);
   }
+
+  .balance {
+    font-weight: 400;
+    line-height: 1.25rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    opacity: 0.6;
+    color: var(--account-center-minimized-balance-color, inherit);
+  }
+
+  .chain-icon {
+    width: 22px;
+    height: 22px;
+    padding: 4px;
+    border-radius: 25px;
+    margin-right: 4px;
+  }
+
+  .container {
+    border: 1px solid transparent;
+    border-radius: 16px;
+    padding: 1px;
+    transition: border-color 250ms ease-in-out, backround 250ms ease-in-out;
+    max-width: 128px;
+    cursor: default;
+  }
+
   .drop-shadow {
     filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2));
   }
+
+  .color-yellow {
+    color: var(
+      --account-center-chain-warning,
+      var(--onboard-warning-500, var(--warning-500))
+    );
+  }
+
+  .color-white {
+    color: var(--onboard-primary-100, var(--primary-100));
+  }
 </style>
 
 <div
+  in:fade={{ duration: 250 }}
+  out:fade={{ duration: 100 }}
   class="minimized"
   on:click|stopPropagation={toggle}
 >
   <div class="inner-row">
-    <!-- app and wallet icon badge -->
-    <div class="drop-shadow">
-      <WalletAppBadge
-        size={32}
-        padding={4}
-        background={'white'}
-        border="darkGreen"
-        radius={8}
-        icon={appIcon}
-      />
-    </div>
-    <div class="wallet-square-wrapper">
+    <div class="flex relative">
       <div class="drop-shadow">
+        <WalletAppBadge
+          size={32}
+          padding={4}
+          background={'white'}
+          border="darkGreen"
+          radius={8}
+          icon={appIcon}
+        />
+      </div>
+
+      <div style="margin-left: -0.5rem;" class="drop-shadow">
         <WalletAppBadge
           size={32}
           padding={4}
@@ -145,9 +186,74 @@
         />
       </div>
 
-      <div class="check-icon-wrapper drop-shadow">
+      <div style="right: -4px; bottom: -4px;" class="drop-shadow absolute">
         <SuccessStatusIcon size={14} />
       </div>
     </div>
+
+    <!-- address and balance -->
+    <div class="wallet-info">
+      <div class="address">
+        {ensName
+          ? shortenDomain(ensName)
+          : unsName
+          ? shortenDomain(unsName)
+          : shortenedFirstAddress}
+      </div>
+      {#if firstAddressBalance}
+        <div in:fade class="balance">
+          {firstAddressBalance.length > 7
+            ? firstAddressBalance.slice(0, 7)
+            : firstAddressBalance}
+          {firstAddressAsset}
+        </div>
+      {/if}
+    </div>
+
+    <!-- network badge -->
+    <div class="network">
+      <div
+        on:click|stopPropagation
+        class="container shadow-1 flex items-center"
+        style={`border-color: var(${
+          validAppChain
+            ? '--onboard-primary-200, var(--primary-200)'
+            : '--onboard-warning-500, var(--warning-500)'
+        }); background-color: var(${
+          validAppChain
+            ? '--account-center-minimized-chain-select-background, var(--primary-100)'
+            : '--account-center-minimized-chain-select-background-warning, var(--warning-100)'
+        })`}
+      >
+        <div class="flex items-center">
+          <div
+            class:color-yellow={!validAppChain}
+            class:color-white={validAppChain && !validAppChain.icon}
+            class="chain-icon flex justify-center items-center"
+            style={`background-color: ${
+              validAppChain
+                ? validAppChain.color ||
+                  (defaultChainStyles && defaultChainStyles.color) ||
+                  unrecognizedChainStyle.color
+                : 'var(--onboard-warning-200, var(--warning-200))'
+            };`}
+          >
+            {@html validAppChain
+              ? validAppChain.icon ||
+                (defaultChainStyles && defaultChainStyles.icon) ||
+                unrecognizedChainStyle.icon
+              : warningIcon}
+          </div>
+
+          <NetworkSelector
+            {chains}
+            colorVar="--account-center-minimized-network-selector-color"
+            selectIcon={caretIcon}
+            parentCSSId="minimized_ac"
+          />
+        </div>
+      </div>
+    </div>
+
   </div>
-</div>
+</div>
\ No newline at end of file

From 10ff1049176e8f8e6cbbbebe753d273a57d0b2ce Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Mon, 15 May 2023 17:09:04 -0600
Subject: [PATCH 05/14] fix jump on transition

---
 packages/core/package.json                              | 2 +-
 packages/core/src/views/account-center/Index.svelte     | 4 ++--
 packages/core/src/views/account-center/Maximized.svelte | 1 -
 packages/demo/package.json                              | 2 +-
 packages/react/package.json                             | 8 ++------
 packages/vue/package.json                               | 8 ++------
 6 files changed, 8 insertions(+), 17 deletions(-)

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/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte
index e0d0a47d7..1d9766ece 100644
--- a/packages/core/src/views/account-center/Index.svelte
+++ b/packages/core/src/views/account-center/Index.svelte
@@ -23,7 +23,7 @@
 </script>
 
 {#if !$accountCenter$.minimal}
-  <div class="container flex flex-column items-end">
+  <div class="container flex flex-column items-end" style="width: 315px;">
     {#if $accountCenter$.position.includes('bottom')}
       <Maximized />
     {/if}
@@ -34,7 +34,7 @@
     {/if}
   </div>
 {:else if $accountCenter$.minimal}
-  <div class="container flex flex-column items-end">
+  <div class="container flex flex-column items-end" style="width: 315px;">
   <!-- micro -->
   {#if $accountCenter$.position.includes('bottom')}
     <Maximized />
diff --git a/packages/core/src/views/account-center/Maximized.svelte b/packages/core/src/views/account-center/Maximized.svelte
index a1d577cdd..b33fe3a03 100644
--- a/packages/core/src/views/account-center/Maximized.svelte
+++ b/packages/core/src/views/account-center/Maximized.svelte
@@ -274,7 +274,6 @@
 {#if $accountCenter$.expanded}
 <div
   transition:fly={{
-    delay: position.includes('bottom') ? 100 : 0,
     duration: 600,
     y: position.includes('bottom') ? 56 : -76,
     easing: quartOut,
diff --git a/packages/demo/package.json b/packages/demo/package.json
index e1303ab60..e0cdaad52 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.6",
diff --git a/packages/react/package.json b/packages/react/package.json
index 5d82e401f..6cd1dfcea 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,10 +1,6 @@
 {
   "name": "@web3-onboard/react",
-<<<<<<< HEAD
-  "version": "2.8.3-alpha.1",
-=======
-  "version": "2.8.3-alpha.2",
->>>>>>> develop
+  "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",
@@ -66,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 026eb4512..7e21ef5dc 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,10 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-<<<<<<< HEAD
-  "version": "2.7.2-alpha.1",
-=======
-  "version": "2.7.2-alpha.2",
->>>>>>> develop
+  "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",
@@ -67,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": {

From 0917993cae8fd304cfcde7544be4bcf7afe57b29 Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Tue, 16 May 2023 10:23:41 -0600
Subject: [PATCH 06/14] rename components

---
 ...mized.svelte => AccountCenterPanel.svelte} | 386 +++++++++---------
 ...d.svelte => AcctCenterTriggerLarge.svelte} |   2 +-
 ...o.svelte => AcctCenterTriggerSmall.svelte} |   9 +-
 .../src/views/account-center/Index.svelte     |  36 +-
 4 files changed, 211 insertions(+), 222 deletions(-)
 rename packages/core/src/views/account-center/{Maximized.svelte => AccountCenterPanel.svelte} (52%)
 rename packages/core/src/views/account-center/{Minimized.svelte => AcctCenterTriggerLarge.svelte} (99%)
 rename packages/core/src/views/account-center/{Micro.svelte => AcctCenterTriggerSmall.svelte} (93%)

diff --git a/packages/core/src/views/account-center/Maximized.svelte b/packages/core/src/views/account-center/AccountCenterPanel.svelte
similarity index 52%
rename from packages/core/src/views/account-center/Maximized.svelte
rename to packages/core/src/views/account-center/AccountCenterPanel.svelte
index b33fe3a03..609b9be42 100644
--- a/packages/core/src/views/account-center/Maximized.svelte
+++ b/packages/core/src/views/account-center/AccountCenterPanel.svelte
@@ -269,222 +269,222 @@
   />
 {/if}
 
-
-
 {#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 class="plus-icon flex items-center justify-center">
-              {@html plusCircleIcon}
-            </div>
-            <span class="action-text"
-              >{$_('accountCenter.connectAnotherWallet', {
-                default: en.accountCenter.connectAnotherWallet
-              })}</span
+  <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 secondaryTokens && secondaryTokens.length}
+            <SecondaryTokenTable {secondaryTokens} />
           {/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>
+          <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}
\ No newline at end of file
+{/if}
diff --git a/packages/core/src/views/account-center/Minimized.svelte b/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte
similarity index 99%
rename from packages/core/src/views/account-center/Minimized.svelte
rename to packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte
index e26d4536e..5c0e87098 100644
--- a/packages/core/src/views/account-center/Minimized.svelte
+++ b/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte
@@ -258,4 +258,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/core/src/views/account-center/Micro.svelte b/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte
similarity index 93%
rename from packages/core/src/views/account-center/Micro.svelte
rename to packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte
index ac516b955..09c96d6da 100644
--- a/packages/core/src/views/account-center/Micro.svelte
+++ b/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte
@@ -3,10 +3,7 @@
   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 { WalletAppBadge, SuccessStatusIcon } from '../shared/index.js'
   import { state } from '../../store/index.js'
   import { configuration } from '../../configuration.js'
 
@@ -80,7 +77,9 @@
 <div
   class="minimized"
   on:click|stopPropagation={toggle}
-  style="{$accountCenter$.position.includes('Left') ? 'align-self: flex-start': null}"
+  style={$accountCenter$.position.includes('Left')
+    ? 'align-self: flex-start'
+    : null}
 >
   <div class="inner-row">
     <!-- app and wallet icon badge -->
diff --git a/packages/core/src/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte
index 1d9766ece..1aad411df 100644
--- a/packages/core/src/views/account-center/Index.svelte
+++ b/packages/core/src/views/account-center/Index.svelte
@@ -3,9 +3,9 @@
   import { updateAccountCenter } from '../../store/actions.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'
+  import AccountCenterPanel from './AccountCenterPanel.svelte'
+  import TriggerLarge from './AcctCenterTriggerLarge.svelte'
+  import TriggerSmall from './AcctCenterTriggerSmall.svelte'
 
   const accountCenter$ = state
     .select('accountCenter')
@@ -17,31 +17,21 @@
   function minimize() {
     if ($accountCenter$.expanded) {
       updateAccountCenter({ expanded: false })
-      visible=false
+      visible = false
     }
   }
 </script>
 
-{#if !$accountCenter$.minimal}
-  <div class="container flex flex-column items-end" style="width: 315px;">
-    {#if $accountCenter$.position.includes('bottom')}
-      <Maximized />
-    {/if}
-    <!-- micro -->
-    <Minimized />
-    {#if $accountCenter$.position.includes('top')}
-      <Maximized />
-    {/if}
-  </div>
-{:else if $accountCenter$.minimal}
-  <div class="container flex flex-column items-end" style="width: 315px;">
-  <!-- micro -->
+<div class="container flex flex-column items-end" style="width: 315px;">
   {#if $accountCenter$.position.includes('bottom')}
-    <Maximized />
+    <AccountCenterPanel />
+  {/if}
+  {#if $accountCenter$.minimal}
+    <TriggerSmall />
+  {:else}
+    <TriggerLarge />
   {/if}
-  <Micro />
   {#if $accountCenter$.position.includes('top')}
-    <Maximized />
+    <AccountCenterPanel />
   {/if}
-  </div>
-{/if}
+</div>

From 0ab4f6d42987ecb76e76b48e3bd61d2a9b3d2db3 Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Tue, 16 May 2023 10:30:31 -0600
Subject: [PATCH 07/14] remove unused variable

---
 packages/core/src/views/account-center/Index.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/core/src/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte
index 1aad411df..14ed7ab7e 100644
--- a/packages/core/src/views/account-center/Index.svelte
+++ b/packages/core/src/views/account-center/Index.svelte
@@ -12,12 +12,10 @@
     .pipe(startWith(state.get().accountCenter), shareReplay(1))
 
   onDestroy(minimize)
-  let visible = false
 
   function minimize() {
     if ($accountCenter$.expanded) {
       updateAccountCenter({ expanded: false })
-      visible = false
     }
   }
 </script>

From 920b4e420430778866657c0b5ce43b57d9f66be3 Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Tue, 16 May 2023 10:31:26 -0600
Subject: [PATCH 08/14] remove unused import

---
 .../core/src/views/account-center/AccountCenterPanel.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/views/account-center/AccountCenterPanel.svelte b/packages/core/src/views/account-center/AccountCenterPanel.svelte
index 609b9be42..86fe175dd 100644
--- a/packages/core/src/views/account-center/AccountCenterPanel.svelte
+++ b/packages/core/src/views/account-center/AccountCenterPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { shareReplay, startWith } from 'rxjs/operators'
   import { _ } from 'svelte-i18n'
-  import { fly, fade } from 'svelte/transition'
+  import { fly } from 'svelte/transition'
   import { quartOut } from 'svelte/easing'
   import { wallets$ } from '../../streams.js'
   import en from '../../i18n/en.json'

From e484beecf361d146791f3362d48da11755d0d604 Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Wed, 17 May 2023 09:23:38 -0600
Subject: [PATCH 09/14] add zindex to triggers

---
 .../core/src/views/account-center/AcctCenterTriggerLarge.svelte  | 1 +
 .../core/src/views/account-center/AcctCenterTriggerSmall.svelte  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte b/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte
index 5c0e87098..e167d1196 100644
--- a/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte
+++ b/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte
@@ -94,6 +94,7 @@
       --account-center-box-shadow,
       var(--onboard-shadow-3, var(--shadow-3))
     );
+    z-index: 1;
   }
 
   .inner-row {
diff --git a/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte b/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte
index 09c96d6da..b7ccede77 100644
--- a/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte
+++ b/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte
@@ -50,6 +50,7 @@
       --account-center-box-shadow,
       var(--onboard-shadow-3, var(--shadow-3))
     );
+    z-index: 1;
   }
 
   .wallet-square-wrapper {

From 9300b4d160c95ebdc9b4709d28c79eef45138cac Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Wed, 17 May 2023 10:11:33 -0600
Subject: [PATCH 10/14] fix duplicate accountCenter issue

---
 packages/core/src/views/account-center/Index.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/core/src/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte
index 14ed7ab7e..5bfad84bb 100644
--- a/packages/core/src/views/account-center/Index.svelte
+++ b/packages/core/src/views/account-center/Index.svelte
@@ -20,6 +20,7 @@
   }
 </script>
 
+{#key $accountCenter$.position}
 <div class="container flex flex-column items-end" style="width: 315px;">
   {#if $accountCenter$.position.includes('bottom')}
     <AccountCenterPanel />
@@ -33,3 +34,4 @@
     <AccountCenterPanel />
   {/if}
 </div>
+{/key}

From ea47dc37d32c48f3b63aa746fe4ec2fee7cdd0a7 Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Wed, 17 May 2023 10:20:38 -0600
Subject: [PATCH 11/14] make key accountCenter

---
 packages/core/src/views/account-center/Index.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte
index 5bfad84bb..6ba068549 100644
--- a/packages/core/src/views/account-center/Index.svelte
+++ b/packages/core/src/views/account-center/Index.svelte
@@ -20,7 +20,7 @@
   }
 </script>
 
-{#key $accountCenter$.position}
+{#key $accountCenter$}
 <div class="container flex flex-column items-end" style="width: 315px;">
   {#if $accountCenter$.position.includes('bottom')}
     <AccountCenterPanel />

From cac5d380d0204c3f5988bef5f5bc9985f43df2b4 Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Wed, 17 May 2023 15:38:13 -0600
Subject: [PATCH 12/14] reenable off center click to minimize, fix duplicate
 issue

---
 packages/core/src/views/account-center/Index.svelte | 6 +++++-
 packages/demo/src/App.svelte                        | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte
index 6ba068549..ead09a185 100644
--- a/packages/core/src/views/account-center/Index.svelte
+++ b/packages/core/src/views/account-center/Index.svelte
@@ -20,7 +20,10 @@
   }
 </script>
 
-{#key $accountCenter$}
+<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 />
@@ -35,3 +38,4 @@
   {/if}
 </div>
 {/key}
+{/key}
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

From 4677255b4491f661dca413137d48acef56154c17 Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Thu, 18 May 2023 11:10:47 -0600
Subject: [PATCH 13/14] add warning about default position change

---
 .../docs/[...3]modules/[...1]core/+page.md       | 16 ++++++++++++++++
 packages/core/README.md                          | 14 ++++++++++++++
 2 files changed, 30 insertions(+)

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..6744f4e95 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="warning"
+_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..2186595b3 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.
 
+_Warning: 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

From 0736f3aba20a869951f72405d1658fbb8b9cc725 Mon Sep 17 00:00:00 2001
From: Kat Leight <leightkt@gmail.com>
Date: Thu, 18 May 2023 11:21:07 -0600
Subject: [PATCH 14/14] change warning to tip

---
 docs/src/routes/docs/[...3]modules/[...1]core/+page.md | 2 +-
 packages/core/README.md                                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 6744f4e95..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,7 +17,7 @@ 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="warning"
+:::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: {
diff --git a/packages/core/README.md b/packages/core/README.md
index 2186595b3..952822193 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -6,7 +6,7 @@
 
 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.
 
-_Warning: 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:_
+_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: {