From a741e90591da9458eca6075570f737d5d80ffea6 Mon Sep 17 00:00:00 2001
From: Aaron Barnard <abarnard@protonmail.com>
Date: Thu, 11 Aug 2022 15:37:17 +1000
Subject: [PATCH 1/2] Dynamically import notify and account center

---
 packages/core/package.json           |  2 +-
 packages/core/src/views/Index.svelte | 67 ++++++++++++++++++++--------
 2 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index c7cc183f5..6f604df54 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.7.0-alpha.3",
+  "version": "2.7.0-alpha.4",
   "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/Index.svelte b/packages/core/src/views/Index.svelte
index 4ee459635..77bc4d4ec 100644
--- a/packages/core/src/views/Index.svelte
+++ b/packages/core/src/views/Index.svelte
@@ -5,8 +5,6 @@
   import Connect from './connect/Index.svelte'
   import SwitchChain from './chain/SwitchChain.svelte'
   import ActionRequired from './connect/ActionRequired.svelte'
-  import AccountCenter from './account-center/Index.svelte'
-  import Notify from './notify/Index.svelte'
   import { configuration } from '../configuration'
   import type { Observable } from 'rxjs'
   import type { Notification } from '../types'
@@ -43,6 +41,14 @@
     }
   }
 
+  const accountCenterComponent = $accountCenter$.enabled
+    ? import('./account-center/Index.svelte').then(mod => mod.default)
+    : Promise.resolve(null)
+
+  const notifyComponent = $notify$.enabled
+    ? import('./notify/Index.svelte').then(mod => mod.default)
+    : Promise.resolve(null)
+
   $: sharedContainer =
     $accountCenter$.enabled &&
     $notify$.enabled &&
@@ -359,11 +365,16 @@
       : ''} "
   >
     {#if $notify$.position.includes('bottom') && $accountCenter$.position.includes('bottom') && samePositionOrMobile}
-      <Notify
-        notifications={$notifications$}
-        position={$notify$.position}
-        {sharedContainer}
-      />
+      {#await notifyComponent then Notify}
+        {#if Notify}
+          <svelte:component
+            this={Notify}
+            notifications={$notifications$}
+            position={$notify$.position}
+            {sharedContainer}
+          />
+        {/if}
+      {/await}
     {/if}
     <div
       style={!$accountCenter$.expanded &&
@@ -376,14 +387,23 @@
         ? 'margin-right: auto'
         : ''}
     >
-      <AccountCenter settings={$accountCenter$} />
+      {#await accountCenterComponent then AccountCenter}
+        {#if AccountCenter}
+          <svelte:component this={AccountCenter} settings={$accountCenter$} />
+        {/if}
+      {/await}
     </div>
     {#if $notify$.position.includes('top') && $accountCenter$.position.includes('top') && samePositionOrMobile}
-      <Notify
-        notifications={$notifications$}
-        position={$notify$.position}
-        {sharedContainer}
-      />
+      {#await notifyComponent then Notify}
+        {#if Notify}
+          <svelte:component
+            this={Notify}
+            notifications={$notifications$}
+            position={$notify$.position}
+            {sharedContainer}
+          />
+        {/if}
+      {/await}
     {/if}
   </div>
 {/if}
@@ -410,7 +430,11 @@
         : ''}
     >
       {#if $accountCenter$.enabled && $wallets$.length}
-        <AccountCenter settings={$accountCenter$} />
+        {#await accountCenterComponent then AccountCenter}
+          {#if AccountCenter}
+            <svelte:component this={AccountCenter} settings={$accountCenter$} />
+          {/if}
+        {/await}
       {/if}
     </div>
   </div>
@@ -426,10 +450,15 @@
       ? 'padding-top:0;'
       : ''} "
   >
-    <Notify
-      notifications={$notifications$}
-      position={$notify$.position}
-      {sharedContainer}
-    />
+    {#await notifyComponent then Notify}
+      {#if Notify}
+        <svelte:component
+          this={Notify}
+          notifications={$notifications$}
+          position={$notify$.position}
+          {sharedContainer}
+        />
+      {/if}
+    {/await}
   </div>
 {/if}

From 613c2cd3b893bd2236b12c5b618cb47e8474e90c Mon Sep 17 00:00:00 2001
From: Aaron Barnard <abarnard@protonmail.com>
Date: Fri, 12 Aug 2022 12:35:26 +1000
Subject: [PATCH 2/2] Increment core version in vue and react pkg

---
 packages/react/package.json | 2 +-
 packages/vue/package.json   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 8b359aca1..ed7ec3290 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -62,7 +62,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.7.0-alpha.3",
+    "@web3-onboard/core": "^2.7.0-alpha.4",
     "@web3-onboard/common": "^2.1.8-alpha.1",
     "use-sync-external-store": "1.0.0"
   },
diff --git a/packages/vue/package.json b/packages/vue/package.json
index ab2210897..0ace33408 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -63,7 +63,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.1.8-alpha.1",
-    "@web3-onboard/core": "^2.7.0-alpha.3",
+    "@web3-onboard/core": "^2.7.0-alpha.4",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {