From 7325977f38633ae8e01c2ce3d54af7dcae514406 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Mon, 12 Sep 2022 14:51:09 -0600
Subject: [PATCH 01/16] start on theming customizer

---
 docs/src/lib/components/examples/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/lib/components/examples/index.ts b/docs/src/lib/components/examples/index.ts
index d7e8d00f2..2304a8b0d 100644
--- a/docs/src/lib/components/examples/index.ts
+++ b/docs/src/lib/components/examples/index.ts
@@ -1,3 +1,4 @@
 export { default as ConnectWallet } from './ConnectWallet.svelte'
+export { default as ThemeCustomizer } from './ThemeCustomizer.svelte'
 export { default as ReactConnectWallet } from './ReactConnectWallet.md'
 export { default as SvelteConnectWallet } from './SvelteConnectWallet.md'
\ No newline at end of file

From 2cdd1b6be73a2b3d16b05df24d4d2591edacf6b9 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Tue, 13 Sep 2022 08:31:25 -0600
Subject: [PATCH 02/16] Theming comp coming along

---
 .../examples/ThemeCustomizer.svelte           | 534 ++++++++++++++++++
 docs/src/routes/examples/theming.md           |   7 +
 2 files changed, 541 insertions(+)
 create mode 100644 docs/src/lib/components/examples/ThemeCustomizer.svelte
 create mode 100644 docs/src/routes/examples/theming.md

diff --git a/docs/src/lib/components/examples/ThemeCustomizer.svelte b/docs/src/lib/components/examples/ThemeCustomizer.svelte
new file mode 100644
index 000000000..41ed61f7b
--- /dev/null
+++ b/docs/src/lib/components/examples/ThemeCustomizer.svelte
@@ -0,0 +1,534 @@
+<script>
+  import Onboard from '@web3-onboard/core'
+  import injectedModule from '@web3-onboard/injected-wallets'
+
+  import { share } from 'rxjs/operators'
+  import { onMount } from 'svelte'
+
+  const INFURA_ID = 'e0b15c21b7d54cd4814586334af72618'
+  const injected = injectedModule()
+
+  const onboard = Onboard({
+    wallets: [injected],
+    chains: [
+      {
+        id: '0x1',
+        token: 'ETH',
+        label: 'Ethereum Mainnet',
+        rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
+      },
+      {
+        id: '0x3',
+        token: 'tROP',
+        label: 'Ethereum Ropsten Testnet',
+        rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
+      }
+    ],
+    appMetadata: {
+      name: 'Documentation',
+      icon: '<svg></svg>',
+      description: 'Example showcasing how to connect a wallet.',
+      recommendedInjectedWallets: [
+        { name: 'MetaMask', url: 'https://metamask.io' },
+        { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
+      ]
+    },
+    accountCenter: {
+      desktop: { enabled: false, containerElement: '#theming-container' },
+      mobile: { enabled: false }
+    }
+  })
+
+  // Subscribe to wallet updates
+  const wallets$ = onboard.state.select('wallets').pipe(share())
+
+  const defaultStyling = {
+    '--background-color': '#ffffff',
+    '--text-color': '#1a1d26',
+    '--border-color': '#ebebed',
+    '--accent-background': '#ebebed',
+    '--accent-color': '#929bed',
+    '--accent-color-hover': '#eff1fc',
+    '--secondary-text-color': '#707481',
+    '--secondary-accent-background': '#242835'
+  }
+
+  const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
+  --onboard-close-button-background: var(--accent-background);
+  --onboard-connect-sidebar-color: var(--text-color);
+  --onboard-connect-sidebar-progress-background: var(--secondary-text-color);
+  --onboard-connect-sidebar-progress-color: var(--accent-color);
+  --onboard-connect-header-background: var(--background-color);
+  --onboard-connect-header-color: var(--text-color);
+  --onboard-main-scroll-container-background: var(--background-color);
+  --onboard-link-color: var(--accent-color);
+  --onboard-wallet-button-background: var(--background-color);
+  --onboard-wallet-button-background-hover: var(--accent-color-hover);
+  --onboard-wallet-button-border-color: var(--border-color);
+  --onboard-wallet-app-icon-border-color: var(--border-color);
+
+  --account-center-minimized-background: var(--background-color);
+  --account-center-minimized-address-color: var(--text-color);
+  --account-center-minimized-balance-color: var(--secondary-text-color);
+  --account-center-minimized-chain-select-background: var(
+    --accent-color-hover
+  );
+  --account-center-maximized-info-section-background: var(
+    --background-color
+  );
+  --account-center-maximized-network-section-background: var(
+    --accent-background
+  );
+  --account-center-maximized-upper-background: var(
+    --secondary-accent-background
+  );
+  --account-center-maximized-address-color: var(--background-color);
+  --account-center-maximized-account-section-background-hover: var(
+    --text-color
+  );
+  --account-center-maximized-balance-color: var(--border-color);
+  --account-center-maximized-upper-action-color: var(--accent-color);
+  --account-center-maximized-network-text-color: var(
+    --secondary-accent-background
+  );
+  --account-center-maximized-info-section-background-color: var(
+    --background-color
+  );
+  --account-center-maximized-app-name-color: var(
+    --secondary-accent-background
+  );
+  --account-center-maximized-app-info-color: var(
+    --secondary-accent-background
+  );
+  --account-center-app-btn-background: var(--secondary-accent-background);
+  --account-center-app-btn-text-color: var(--background-color);
+
+  --notify-onboard-background: var(----secondary-accent-color);
+  --notify-onboard-transaction-status: var(--accent-background);
+  --notify-onboard-address-hash-color: var(--accent-color-hover);
+  --notify-onboard-anchor-color: var(--accent-color);
+  --notify-onboard-timer-color: var(--secondary-text-color);`
+
+  const styleToString = (style) => {
+    return Object.keys(style).reduce((acc, key) => acc + key + ': ' + style[key] + '; \n  ', '')
+  }
+
+  async function copyStylingConfig() {
+    try {
+      const copy = await navigator.clipboard.writeText(copyableStyles)
+      return copy
+    } catch (err) {
+      console.error('Failed to copy: ', err)
+    }
+  }
+
+  let copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
+
+  const updateTheme = (e, targetStyle) => {
+    const iframe = document.getElementById('inlineFrameExample')
+    iframe.contentWindow.document.documentElement.style.setProperty(targetStyle, e.target.value)
+
+    copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
+  }
+
+  let checked = false
+
+  const handleBackdrop = () => {
+    const iframe = document.getElementById('inlineFrameExample')
+
+    if (!checked) {
+      iframe.contentWindow.document.documentElement.style.setProperty(
+        '--onboard-modal-backdrop',
+        'rgba(0, 0, 0, 0)'
+      )
+    } else {
+      iframe.contentWindow.document.documentElement.style.setProperty(
+        '--onboard-modal-backdrop',
+        'rgba(0, 0, 0, 0.6)'
+      )
+    }
+  }
+
+  // Converts the image into a data URI
+  const readImage = (file) => {
+    const reader = new FileReader()
+    reader.addEventListener('load', (event) => {
+      uploaded_image = event.target.result
+      document.querySelector('#image_drop_area').style.backgroundImage = `url(${uploaded_image})`
+    })
+    reader.readAsDataURL(file)
+  }
+
+  let hideForIframe = false
+  let uploaded_image
+  const handleImageDrop = () => {
+    if (window.location !== window.parent.location) {
+      if (image_drop_area) {
+        // Event listener for dragging the image over the div
+        const connectButton = window.document.getElementById('connectBtn')
+        connectButton.style.visibility = 'hidden'
+        image_drop_area.addEventListener('dragover', (event) => {
+          event.stopPropagation()
+          event.preventDefault()
+          // Style the drag-and-drop as a "copy file" operation.
+          event.dataTransfer.dropEffect = 'copy'
+        })
+
+        // Event listener for dropping the image inside the div
+        image_drop_area.addEventListener('drop', (event) => {
+          const image_drop_area_direction = document.querySelector('#image_drop_area_direction')
+          document.body.style.padding = 0
+          image_drop_area_direction.style.display = 'none'
+          connectButton.click()
+          connectButton.style.display = 'none'
+          event.stopPropagation()
+          event.preventDefault()
+          let fileList = event.dataTransfer.files
+
+          readImage(fileList[0])
+        })
+      }
+    }
+  }
+  const initIFrame = async () => {
+    if (window.location !== window.parent.location) {
+      return (hideForIframe = true)
+    }
+  }
+
+  onMount(async () => {
+    await initIFrame()
+    handleImageDrop()
+  })
+
+</script>
+<main>
+  <div id="image_drop_area">
+      <div id="theming-container"></div>
+      <p id="image_drop_area_direction">
+        Drag and drop a screen shot of your site to customize styling.
+        <br />
+        Click color circles above to change the theme.
+      </p>
+      {#if uploaded_image}
+        <button on:click={() => onboard.connectWallet()}>Connect Wallet</button>
+        {#if $wallets$}
+          <div class="notify-chain-container">
+            <div class="notify-action-container">
+              <button
+                on:click={() =>
+                  onboard.state.actions.customNotification({
+                    type: 'hint',
+                    message: 'This is a custom DApp hint',
+                    autoDismiss: 0
+                  })}>Send Hint Notification</button
+              >
+              <button
+                on:click={() => {
+                  const { update, dismiss } = onboard.state.actions.customNotification({
+                    type: 'pending',
+                    message: 'This is a custom DApp pending notification to use however you want',
+                    autoDismiss: 0
+                  })
+                  setTimeout(
+                    () =>
+                      update({
+                        eventCode: 'dbUpdateSuccess',
+                        message: 'Updated status for custom notification',
+                        type: 'success',
+                        autoDismiss: 0
+                      }),
+                    4000
+                  )
+                }}>Send Success Notification</button
+              >
+              <button
+                on:click={() =>
+                  onboard.state.actions.customNotification({
+                    message: 'This is a custom DApp success notification to use however you want',
+                    autoDismiss: 0,
+                    type: 'pending'
+                  })}>Send Pending Notification</button
+              >
+              <button
+                on:click={() =>
+                  onboard.state.actions.customNotification({
+                    type: 'error',
+                    message: 'This is a custom DApp Error notification to use however you want',
+                    autoDismiss: 0
+                  })}>Send Error Notification</button
+              >
+              <button
+                on:click={() =>
+                  onboard.state.actions.customNotification({
+                    message:
+                      'This is a custom non-descript DApp notification to use however you want',
+                    autoDismiss: 0
+                  })}>Send DApp Notification</button
+              >
+            </div>
+          </div>
+        {/if}
+      {/if}
+    </div>
+    <div class="themes">
+      <label for="Theme">Click Color Circles to Set Theme: </label>
+      <div class="theming-container">
+        {#each Object.keys(defaultStyling) as target}
+          <div class="theming-inputs-wrapper">
+            <div class="theming-inputs">
+              <input
+                type="color"
+                name="Theme"
+                bind:value={defaultStyling[target]}
+                on:input={(e) => updateTheme(e, target)}
+              />
+            </div>
+            <span class="text" id="current-theme">{target} : {defaultStyling[target]}</span>
+          </div>
+        {/each}
+      </div>
+      <div class="backdrop-toggle">
+        <label class="switch">
+          <input type="checkbox" on:change={() => handleBackdrop()} bind:checked />
+          <span class="slider" />
+        </label>
+        Disabled Backdrop for Styling
+      </div>
+      <div class="copy-styles-container">
+        <textarea readonly bind:value={copyableStyles} class="copy-styles-textarea" />
+        <button on:click={async () => await copyStylingConfig()}> Copy Styling Config </button>
+      </div>
+    </div>
+</main>
+
+<style>
+  :root {
+    --background-color: #ffffff; /* --white */
+    --text-color: #1a1d26; /* --gray-700 */
+    --border-color: #ebebed; /* --gray-100 taken from future mock */
+
+    --accent-background: #ebebed; /* --gray-100 (currently gray-100 in connect modal) */
+    --accent-color: #929bed; /* --primary-400 */
+    --accent-color-hover: #eff1fc; /* --primary-200 */
+
+    /* Account Center & Notify */
+    --secondary-text-color: #707481; /* --gray-400 (balance and token name) */
+    --secondary-accent-background: #242835; /* --gray-600 (Upper background in maximized) */
+
+    /* --onboard-font-family-normal: System,monospace; */
+    --onboard-connect-sidebar-background: var(--accent-background);
+    --onboard-close-button-background: var(--accent-background);
+    --onboard-connect-sidebar-color: var(--text-color);
+    --onboard-connect-sidebar-progress-background: var(
+      --secondary-text-color
+    ); /* defaults to gray-200 */
+    --onboard-connect-sidebar-progress-color: var(--accent-color); /* defaults to  primary-600 */
+    --onboard-connect-header-background: var(--background-color);
+    --onboard-connect-header-color: var(--text-color);
+    --onboard-main-scroll-container-background: var(--background-color);
+    --onboard-link-color: var(--accent-color);
+    --onboard-wallet-button-background: var(--background-color);
+    --onboard-wallet-button-background-hover: var(--accent-color-hover);
+    --onboard-wallet-button-border-color: var(--border-color);
+    --onboard-wallet-app-icon-border-color: var(--border-color);
+
+    --account-center-minimized-background: var(--background-color);
+    --account-center-minimized-address-color: var(--text-color);
+    --account-center-minimized-balance-color: var(--secondary-text-color);
+    --account-center-minimized-chain-select-background: var(--accent-color-hover);
+    --account-center-maximized-info-section-background: var(--background-color);
+    --account-center-maximized-network-section-background: var(--accent-background);
+    --account-center-maximized-upper-background: var(--secondary-accent-background);
+    --account-center-maximized-address-color: var(--background-color);
+    --account-center-maximized-account-section-background-hover: var(--text-color);
+    --account-center-maximized-balance-color: var(--border-color);
+    --account-center-maximized-upper-action-color: var(--accent-color);
+    --account-center-maximized-network-text-color: var(--secondary-accent-background);
+    --account-center-maximized-info-section-background-color: var(--background-color);
+    --account-center-maximized-app-name-color: var(--secondary-accent-background);
+    --account-center-maximized-app-info-color: var(--secondary-accent-background);
+    --account-center-app-btn-background: var(--secondary-accent-background);
+    --account-center-app-btn-text-color: var(--background-color);
+
+    --notify-onboard-background: var(--secondary-accent-background);
+    --notify-onboard-transaction-status: var(--accent-background);
+    --notify-onboard-address-hash-color: var(--accent-color-hover);
+    --notify-onboard-anchor-color: var(--accent-color);
+    --notify-onboard-timer-color: var(--secondary-text-color);
+
+    /* 
+		NEEDS TARGET AS IT USES OPACITY: 
+		--account-center-maximized-upper-action-background-hover
+		NEEDS UPDATES FOR DIFFERNT STYLING, DOESNT FIT BASIC VARIABLES ABOVE:
+		Notify status icons, icon backgrounds and icon borders
+	*/
+  }
+  main {
+    height: 100%;
+  }
+  button {
+    width: 14rem;
+    margin: 8px;
+  }
+  .connected-wallet {
+    padding: 1rem;
+    border-radius: 4px;
+    margin: 0.5rem;
+    border: 1px solid gray;
+  }
+
+  .flex-centered {
+    display: flex;
+    align-items: center;
+  }
+
+  .account-info div {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .text-input {
+    width: 18rem;
+  }
+
+  .copy-styles-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+  }
+
+  .copy-styles-textarea {
+    width: 30rem;
+    height: 16rem;
+    margin: 0 0 8px;
+  }
+
+  .notify-chain-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .switch-chain-container,
+  .notify-action-container {
+    display: flex;
+    flex-direction: column;
+    width: 15rem;
+  }
+
+  .themes {
+    padding: 1rem;
+    border-radius: 4px;
+    margin: 0.5rem;
+    border: 1px solid gray;
+  }
+
+  .theming-container {
+    font-size: 1rem;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
+
+  .theming-inputs-wrapper {
+    display: flex;
+    align-items: center;
+    width: 25rem;
+  }
+  .theming-inputs {
+    display: inline-flex;
+    overflow: hidden;
+    width: 2em;
+    height: 2em;
+    /* optional formatting below here */
+    border-radius: 50%;
+    box-shadow: 1px 1px 3px 0px grey;
+    margin: 1em;
+  }
+  input[type='color'] {
+    padding: 0;
+    width: 150%;
+    height: 150%;
+    margin: -25%;
+  }
+  iframe {
+    height: 850px;
+    width: 1000px;
+    resize: both;
+    overflow: auto;
+    margin: 8px 8px 16px;
+  }
+  #image_drop_area {
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-size: cover;
+    box-sizing: border-box;
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+  }
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 34px;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: '';
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 50%;
+  }
+
+  input:checked + .slider {
+    background-color: #929bed;
+  }
+
+  input:checked + .slider {
+    box-shadow: 0 0 1px #929bed;
+  }
+
+  input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+  }
+
+  .backdrop-toggle {
+    display: flex;
+    align-items: center;
+    margin: 8px 8px 16px 4px;
+  }
+
+  .backdrop-toggle > label {
+    margin-right: 8px;
+  }
+</style>
diff --git a/docs/src/routes/examples/theming.md b/docs/src/routes/examples/theming.md
new file mode 100644
index 000000000..505d1f86b
--- /dev/null
+++ b/docs/src/routes/examples/theming.md
@@ -0,0 +1,7 @@
+<script>
+    import { ThemeCustomizer } from '$lib/components'
+</script>
+
+# Theming Customizer
+
+<ThemeCustomizer />
\ No newline at end of file

From 68fe024f9e2854df265c0cc16f001da416838231 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Tue, 13 Sep 2022 16:42:23 -0600
Subject: [PATCH 03/16] docs working as expected

---
 .../examples/ThemeCustomizer.svelte           | 724 +++++---------
 packages/demo/src/App.svelte                  | 898 +++++++++---------
 yarn.lock                                     |  38 +
 3 files changed, 727 insertions(+), 933 deletions(-)

diff --git a/docs/src/lib/components/examples/ThemeCustomizer.svelte b/docs/src/lib/components/examples/ThemeCustomizer.svelte
index 41ed61f7b..6d58181c5 100644
--- a/docs/src/lib/components/examples/ThemeCustomizer.svelte
+++ b/docs/src/lib/components/examples/ThemeCustomizer.svelte
@@ -5,211 +5,265 @@
   import { share } from 'rxjs/operators'
   import { onMount } from 'svelte'
 
-  const INFURA_ID = 'e0b15c21b7d54cd4814586334af72618'
-  const injected = injectedModule()
+  // const INFURA_ID = 'e0b15c21b7d54cd4814586334af72618'
+  // const injected = injectedModule()
+
+  // const onboard = Onboard({
+  //   wallets: [injected],
+  //   chains: [
+  //     {
+  //       id: '0x1',
+  //       token: 'ETH',
+  //       label: 'Ethereum Mainnet',
+  //       rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
+  //     },
+  //     {
+  //       id: '0x3',
+  //       token: 'tROP',
+  //       label: 'Ethereum Ropsten Testnet',
+  //       rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
+  //     }
+  //   ],
+  //   appMetadata: {
+  //     name: 'Documentation',
+  //     icon: '<svg></svg>',
+  //     description: 'Example showcasing how to connect a wallet.',
+  //     recommendedInjectedWallets: [
+  //       { name: 'MetaMask', url: 'https://metamask.io' },
+  //       { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
+  //     ]
+  //   },
+  //   accountCenter: {
+  //     desktop: { enabled: false },
+  //     mobile: { enabled: false }
+  //   }
+  // })
+
+  // // Subscribe to wallet updates
+  // const wallets$ = onboard.state.select('wallets').pipe(share())
+
+  // const defaultStyling = {
+  //   '--background-color': '#ffffff',
+  //   '--text-color': '#1a1d26',
+  //   '--border-color': '#ebebed',
+  //   '--accent-background': '#ebebed',
+  //   '--accent-color': '#929bed',
+  //   '--accent-color-hover': '#eff1fc',
+  //   '--secondary-text-color': '#707481',
+  //   '--secondary-accent-background': '#242835'
+  // }
+
+  // const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
+  // --onboard-close-button-background: var(--accent-background);
+  // --onboard-connect-sidebar-color: var(--text-color);
+  // --onboard-connect-sidebar-progress-background: var(--secondary-text-color);
+  // --onboard-connect-sidebar-progress-color: var(--accent-color);
+  // --onboard-connect-header-background: var(--background-color);
+  // --onboard-connect-header-color: var(--text-color);
+  // --onboard-main-scroll-container-background: var(--background-color);
+  // --onboard-link-color: var(--accent-color);
+  // --onboard-wallet-button-background: var(--background-color);
+  // --onboard-wallet-button-background-hover: var(--accent-color-hover);
+  // --onboard-wallet-button-border-color: var(--border-color);
+  // --onboard-wallet-app-icon-border-color: var(--border-color);
+
+  // --account-center-minimized-background: var(--background-color);
+  // --account-center-minimized-address-color: var(--text-color);
+  // --account-center-minimized-balance-color: var(--secondary-text-color);
+  // --account-center-minimized-chain-select-background: var(
+  //   --accent-color-hover
+  // );
+  // --account-center-maximized-info-section-background: var(
+  //   --background-color
+  // );
+  // --account-center-maximized-network-section-background: var(
+  //   --accent-background
+  // );
+  // --account-center-maximized-upper-background: var(
+  //   --secondary-accent-background
+  // );
+  // --account-center-maximized-address-color: var(--background-color);
+  // --account-center-maximized-account-section-background-hover: var(
+  //   --text-color
+  // );
+  // --account-center-maximized-balance-color: var(--border-color);
+  // --account-center-maximized-upper-action-color: var(--accent-color);
+  // --account-center-maximized-network-text-color: var(
+  //   --secondary-accent-background
+  // );
+  // --account-center-maximized-info-section-background-color: var(
+  //   --background-color
+  // );
+  // --account-center-maximized-app-name-color: var(
+  //   --secondary-accent-background
+  // );
+  // --account-center-maximized-app-info-color: var(
+  //   --secondary-accent-background
+  // );
+  // --account-center-app-btn-background: var(--secondary-accent-background);
+  // --account-center-app-btn-text-color: var(--background-color);
+
+  // --notify-onboard-background: var(----secondary-accent-color);
+  // --notify-onboard-transaction-status: var(--accent-background);
+  // --notify-onboard-address-hash-color: var(--accent-color-hover);
+  // --notify-onboard-anchor-color: var(--accent-color);
+  // --notify-onboard-timer-color: var(--secondary-text-color);`
+
+  // const styleToString = (style) => {
+  //   return Object.keys(style).reduce((acc, key) => acc + key + ': ' + style[key] + '; \n  ', '')
+  // }
+
+  // async function copyStylingConfig() {
+  //   try {
+  //     const copy = await navigator.clipboard.writeText(copyableStyles)
+  //     return copy
+  //   } catch (err) {
+  //     console.error('Failed to copy: ', err)
+  //   }
+  // }
+
+  // let copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
+
+  // const updateTheme = (e, targetStyle) => {
+  //   const iframe = driver.findElements(webdriver.By.tagName("iframe"))[0];
+  //   // const iframe = document.getElementById('inlineFrameExample')
+  //   console.log(iframe)
+  //   iframe.contentWindow.document.documentElement.style.setProperty(targetStyle, e.target.value)
+
+  //   copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
+  // }
+
+  // let checked = false
+
+  // const handleBackdrop = () => {
+  //   const iframe = document.getElementById('inlineFrameExample')
+
+  //   if (!checked) {
+  //     iframe.contentWindow.document.documentElement.style.setProperty(
+  //       '--onboard-modal-backdrop',
+  //       'rgba(0, 0, 0, 0)'
+  //     )
+  //   } else {
+  //     iframe.contentWindow.document.documentElement.style.setProperty(
+  //       '--onboard-modal-backdrop',
+  //       'rgba(0, 0, 0, 0.6)'
+  //     )
+  //   }
+  // }
+
+  // // Converts the image into a data URI
+  // const readImage = (file) => {
+  //   const reader = new FileReader()
+  //   reader.addEventListener('load', (event) => {
+  //     uploaded_image = event.target.result
+  //     document.querySelector('#image_drop_area').style.backgroundImage = `url(${uploaded_image})`
+  //   })
+  //   reader.readAsDataURL(file)
+  // }
+
+  // let uploaded_image
+  // const handleImageDrop = () => {
+  //   // if (window.location !== window.parent.location) {
+  //     if (image_drop_area) {
+  //       // Event listener for dragging the image over the div
+  //       const connectButton = window.document.getElementById('connectBtn')
+  //       connectButton.style.visibility = 'hidden'
+  //       image_drop_area.addEventListener('dragover', (event) => {
+  //         event.stopPropagation()
+  //         event.preventDefault()
+  //         // Style the drag-and-drop as a "copy file" operation.
+  //         event.dataTransfer.dropEffect = 'copy'
+  //       })
+
+  //       // Event listener for dropping the image inside the div
+  //       image_drop_area.addEventListener('drop', (event) => {
+  //         const image_drop_area_direction = document.querySelector('#image_drop_area_direction')
+  //         document.body.style.padding = 0
+  //         image_drop_area_direction.style.display = 'none'
+  //         connectButton.click()
+  //         connectButton.style.display = 'none'
+  //         event.stopPropagation()
+  //         event.preventDefault()
+  //         let fileList = event.dataTransfer.files
+
+  //         readImage(fileList[0])
+  //       })
+  //     }
+  //   // }
+  // }
+
+  // onMount(async () => {
+  //   handleImageDrop()
+  //   const sheet = document.createElement('style')
+  //   document.getElementById('#image_drop_area')?.append(sheet)
+  // })
 
-  const onboard = Onboard({
-    wallets: [injected],
-    chains: [
-      {
-        id: '0x1',
-        token: 'ETH',
-        label: 'Ethereum Mainnet',
-        rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
-      },
-      {
-        id: '0x3',
-        token: 'tROP',
-        label: 'Ethereum Ropsten Testnet',
-        rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
-      }
-    ],
-    appMetadata: {
-      name: 'Documentation',
-      icon: '<svg></svg>',
-      description: 'Example showcasing how to connect a wallet.',
-      recommendedInjectedWallets: [
-        { name: 'MetaMask', url: 'https://metamask.io' },
-        { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
-      ]
-    },
-    accountCenter: {
-      desktop: { enabled: false, containerElement: '#theming-container' },
-      mobile: { enabled: false }
-    }
-  })
-
-  // Subscribe to wallet updates
-  const wallets$ = onboard.state.select('wallets').pipe(share())
-
-  const defaultStyling = {
-    '--background-color': '#ffffff',
-    '--text-color': '#1a1d26',
-    '--border-color': '#ebebed',
-    '--accent-background': '#ebebed',
-    '--accent-color': '#929bed',
-    '--accent-color-hover': '#eff1fc',
-    '--secondary-text-color': '#707481',
-    '--secondary-accent-background': '#242835'
-  }
-
-  const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
-  --onboard-close-button-background: var(--accent-background);
-  --onboard-connect-sidebar-color: var(--text-color);
-  --onboard-connect-sidebar-progress-background: var(--secondary-text-color);
-  --onboard-connect-sidebar-progress-color: var(--accent-color);
-  --onboard-connect-header-background: var(--background-color);
-  --onboard-connect-header-color: var(--text-color);
-  --onboard-main-scroll-container-background: var(--background-color);
-  --onboard-link-color: var(--accent-color);
-  --onboard-wallet-button-background: var(--background-color);
-  --onboard-wallet-button-background-hover: var(--accent-color-hover);
-  --onboard-wallet-button-border-color: var(--border-color);
-  --onboard-wallet-app-icon-border-color: var(--border-color);
-
-  --account-center-minimized-background: var(--background-color);
-  --account-center-minimized-address-color: var(--text-color);
-  --account-center-minimized-balance-color: var(--secondary-text-color);
-  --account-center-minimized-chain-select-background: var(
-    --accent-color-hover
-  );
-  --account-center-maximized-info-section-background: var(
-    --background-color
-  );
-  --account-center-maximized-network-section-background: var(
-    --accent-background
-  );
-  --account-center-maximized-upper-background: var(
-    --secondary-accent-background
-  );
-  --account-center-maximized-address-color: var(--background-color);
-  --account-center-maximized-account-section-background-hover: var(
-    --text-color
-  );
-  --account-center-maximized-balance-color: var(--border-color);
-  --account-center-maximized-upper-action-color: var(--accent-color);
-  --account-center-maximized-network-text-color: var(
-    --secondary-accent-background
-  );
-  --account-center-maximized-info-section-background-color: var(
-    --background-color
-  );
-  --account-center-maximized-app-name-color: var(
-    --secondary-accent-background
-  );
-  --account-center-maximized-app-info-color: var(
-    --secondary-accent-background
-  );
-  --account-center-app-btn-background: var(--secondary-accent-background);
-  --account-center-app-btn-text-color: var(--background-color);
-
-  --notify-onboard-background: var(----secondary-accent-color);
-  --notify-onboard-transaction-status: var(--accent-background);
-  --notify-onboard-address-hash-color: var(--accent-color-hover);
-  --notify-onboard-anchor-color: var(--accent-color);
-  --notify-onboard-timer-color: var(--secondary-text-color);`
-
-  const styleToString = (style) => {
-    return Object.keys(style).reduce((acc, key) => acc + key + ': ' + style[key] + '; \n  ', '')
-  }
-
-  async function copyStylingConfig() {
-    try {
-      const copy = await navigator.clipboard.writeText(copyableStyles)
-      return copy
-    } catch (err) {
-      console.error('Failed to copy: ', err)
-    }
-  }
-
-  let copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
-
-  const updateTheme = (e, targetStyle) => {
-    const iframe = document.getElementById('inlineFrameExample')
-    iframe.contentWindow.document.documentElement.style.setProperty(targetStyle, e.target.value)
-
-    copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
-  }
-
-  let checked = false
-
-  const handleBackdrop = () => {
-    const iframe = document.getElementById('inlineFrameExample')
-
-    if (!checked) {
-      iframe.contentWindow.document.documentElement.style.setProperty(
-        '--onboard-modal-backdrop',
-        'rgba(0, 0, 0, 0)'
-      )
-    } else {
-      iframe.contentWindow.document.documentElement.style.setProperty(
-        '--onboard-modal-backdrop',
-        'rgba(0, 0, 0, 0.6)'
-      )
-    }
-  }
-
-  // Converts the image into a data URI
-  const readImage = (file) => {
-    const reader = new FileReader()
-    reader.addEventListener('load', (event) => {
-      uploaded_image = event.target.result
-      document.querySelector('#image_drop_area').style.backgroundImage = `url(${uploaded_image})`
-    })
-    reader.readAsDataURL(file)
-  }
-
-  let hideForIframe = false
-  let uploaded_image
-  const handleImageDrop = () => {
-    if (window.location !== window.parent.location) {
-      if (image_drop_area) {
-        // Event listener for dragging the image over the div
-        const connectButton = window.document.getElementById('connectBtn')
-        connectButton.style.visibility = 'hidden'
-        image_drop_area.addEventListener('dragover', (event) => {
-          event.stopPropagation()
-          event.preventDefault()
-          // Style the drag-and-drop as a "copy file" operation.
-          event.dataTransfer.dropEffect = 'copy'
-        })
+</script>
 
-        // Event listener for dropping the image inside the div
-        image_drop_area.addEventListener('drop', (event) => {
-          const image_drop_area_direction = document.querySelector('#image_drop_area_direction')
-          document.body.style.padding = 0
-          image_drop_area_direction.style.display = 'none'
-          connectButton.click()
-          connectButton.style.display = 'none'
-          event.stopPropagation()
-          event.preventDefault()
-          let fileList = event.dataTransfer.files
 
-          readImage(fileList[0])
-        })
-      }
-    }
-  }
-  const initIFrame = async () => {
-    if (window.location !== window.parent.location) {
-      return (hideForIframe = true)
-    }
+<style>
+  :root {
+    --kd-main-max-width: 100%;
+    --kd-article-max-width: 100%;
   }
-
-  onMount(async () => {
-    await initIFrame()
-    handleImageDrop()
-  })
-
-</script>
+  iframe { width: 100%; height: 62.5rem;}
+</style>
+<iframe
+src="https://melodic-sfogliatella-f45328.netlify.app/"
+title="The Themenator - Theming for Web3Onboard"
+/>
+<!-- 
 <main>
-  <div id="image_drop_area">
-      <div id="theming-container"></div>
+    <div class="themes">
+      <label for="Theme">Click Color Circles to Set Theme: </label>
+      <div class="theming-container">
+        {#each Object.keys(defaultStyling) as target}
+          <div class="theming-inputs-wrapper">
+            <div class="theming-inputs">
+              <input
+                type="color"
+                name="Theme"
+                bind:value={defaultStyling[target]}
+                on:input={e => updateTheme(e, target)}
+              />
+            </div>
+            <span class="text" id="current-theme"
+              >{target} : {defaultStyling[target]}</span
+            >
+          </div>
+        {/each}
+      </div>
+      <div class="backdrop-toggle">
+        <label class="switch">
+          <input
+            type="checkbox"
+            on:change={() => handleBackdrop()}
+            bind:checked
+          />
+          <span class="slider" />
+        </label>
+        Disabled Backdrop for Styling
+      </div>
+      <div class="copy-styles-container">
+        <textarea
+          readonly
+          bind:value={copyableStyles}
+          class="copy-styles-textarea"
+        />
+        <button on:click={async () => await copyStylingConfig()}>
+          Copy Styling Config
+        </button>
+      </div>
+    </div>
+    <div id="image_drop_area">
       <p id="image_drop_area_direction">
         Drag and drop a screen shot of your site to customize styling.
         <br />
         Click color circles above to change the theme.
       </p>
+      <button on:click={() => onboard.connectWallet()} id="connectBtn"
+        >Connect Wallet</button
+      >
       {#if uploaded_image}
         <button on:click={() => onboard.connectWallet()}>Connect Wallet</button>
         {#if $wallets$}
@@ -225,11 +279,13 @@
               >
               <button
                 on:click={() => {
-                  const { update, dismiss } = onboard.state.actions.customNotification({
-                    type: 'pending',
-                    message: 'This is a custom DApp pending notification to use however you want',
-                    autoDismiss: 0
-                  })
+                  const { update, dismiss } =
+                    onboard.state.actions.customNotification({
+                      type: 'pending',
+                      message:
+                        'This is a custom DApp pending notification to use however you want',
+                      autoDismiss: 0
+                    })
                   setTimeout(
                     () =>
                       update({
@@ -245,7 +301,8 @@
               <button
                 on:click={() =>
                   onboard.state.actions.customNotification({
-                    message: 'This is a custom DApp success notification to use however you want',
+                    message:
+                      'This is a custom DApp success notification to use however you want',
                     autoDismiss: 0,
                     type: 'pending'
                   })}>Send Pending Notification</button
@@ -254,7 +311,8 @@
                 on:click={() =>
                   onboard.state.actions.customNotification({
                     type: 'error',
-                    message: 'This is a custom DApp Error notification to use however you want',
+                    message:
+                      'This is a custom DApp Error notification to use however you want',
                     autoDismiss: 0
                   })}>Send Error Notification</button
               >
@@ -271,264 +329,4 @@
         {/if}
       {/if}
     </div>
-    <div class="themes">
-      <label for="Theme">Click Color Circles to Set Theme: </label>
-      <div class="theming-container">
-        {#each Object.keys(defaultStyling) as target}
-          <div class="theming-inputs-wrapper">
-            <div class="theming-inputs">
-              <input
-                type="color"
-                name="Theme"
-                bind:value={defaultStyling[target]}
-                on:input={(e) => updateTheme(e, target)}
-              />
-            </div>
-            <span class="text" id="current-theme">{target} : {defaultStyling[target]}</span>
-          </div>
-        {/each}
-      </div>
-      <div class="backdrop-toggle">
-        <label class="switch">
-          <input type="checkbox" on:change={() => handleBackdrop()} bind:checked />
-          <span class="slider" />
-        </label>
-        Disabled Backdrop for Styling
-      </div>
-      <div class="copy-styles-container">
-        <textarea readonly bind:value={copyableStyles} class="copy-styles-textarea" />
-        <button on:click={async () => await copyStylingConfig()}> Copy Styling Config </button>
-      </div>
-    </div>
-</main>
-
-<style>
-  :root {
-    --background-color: #ffffff; /* --white */
-    --text-color: #1a1d26; /* --gray-700 */
-    --border-color: #ebebed; /* --gray-100 taken from future mock */
-
-    --accent-background: #ebebed; /* --gray-100 (currently gray-100 in connect modal) */
-    --accent-color: #929bed; /* --primary-400 */
-    --accent-color-hover: #eff1fc; /* --primary-200 */
-
-    /* Account Center & Notify */
-    --secondary-text-color: #707481; /* --gray-400 (balance and token name) */
-    --secondary-accent-background: #242835; /* --gray-600 (Upper background in maximized) */
-
-    /* --onboard-font-family-normal: System,monospace; */
-    --onboard-connect-sidebar-background: var(--accent-background);
-    --onboard-close-button-background: var(--accent-background);
-    --onboard-connect-sidebar-color: var(--text-color);
-    --onboard-connect-sidebar-progress-background: var(
-      --secondary-text-color
-    ); /* defaults to gray-200 */
-    --onboard-connect-sidebar-progress-color: var(--accent-color); /* defaults to  primary-600 */
-    --onboard-connect-header-background: var(--background-color);
-    --onboard-connect-header-color: var(--text-color);
-    --onboard-main-scroll-container-background: var(--background-color);
-    --onboard-link-color: var(--accent-color);
-    --onboard-wallet-button-background: var(--background-color);
-    --onboard-wallet-button-background-hover: var(--accent-color-hover);
-    --onboard-wallet-button-border-color: var(--border-color);
-    --onboard-wallet-app-icon-border-color: var(--border-color);
-
-    --account-center-minimized-background: var(--background-color);
-    --account-center-minimized-address-color: var(--text-color);
-    --account-center-minimized-balance-color: var(--secondary-text-color);
-    --account-center-minimized-chain-select-background: var(--accent-color-hover);
-    --account-center-maximized-info-section-background: var(--background-color);
-    --account-center-maximized-network-section-background: var(--accent-background);
-    --account-center-maximized-upper-background: var(--secondary-accent-background);
-    --account-center-maximized-address-color: var(--background-color);
-    --account-center-maximized-account-section-background-hover: var(--text-color);
-    --account-center-maximized-balance-color: var(--border-color);
-    --account-center-maximized-upper-action-color: var(--accent-color);
-    --account-center-maximized-network-text-color: var(--secondary-accent-background);
-    --account-center-maximized-info-section-background-color: var(--background-color);
-    --account-center-maximized-app-name-color: var(--secondary-accent-background);
-    --account-center-maximized-app-info-color: var(--secondary-accent-background);
-    --account-center-app-btn-background: var(--secondary-accent-background);
-    --account-center-app-btn-text-color: var(--background-color);
-
-    --notify-onboard-background: var(--secondary-accent-background);
-    --notify-onboard-transaction-status: var(--accent-background);
-    --notify-onboard-address-hash-color: var(--accent-color-hover);
-    --notify-onboard-anchor-color: var(--accent-color);
-    --notify-onboard-timer-color: var(--secondary-text-color);
-
-    /* 
-		NEEDS TARGET AS IT USES OPACITY: 
-		--account-center-maximized-upper-action-background-hover
-		NEEDS UPDATES FOR DIFFERNT STYLING, DOESNT FIT BASIC VARIABLES ABOVE:
-		Notify status icons, icon backgrounds and icon borders
-	*/
-  }
-  main {
-    height: 100%;
-  }
-  button {
-    width: 14rem;
-    margin: 8px;
-  }
-  .connected-wallet {
-    padding: 1rem;
-    border-radius: 4px;
-    margin: 0.5rem;
-    border: 1px solid gray;
-  }
-
-  .flex-centered {
-    display: flex;
-    align-items: center;
-  }
-
-  .account-info div {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .text-input {
-    width: 18rem;
-  }
-
-  .copy-styles-container {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
-  }
-
-  .copy-styles-textarea {
-    width: 30rem;
-    height: 16rem;
-    margin: 0 0 8px;
-  }
-
-  .notify-chain-container {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .switch-chain-container,
-  .notify-action-container {
-    display: flex;
-    flex-direction: column;
-    width: 15rem;
-  }
-
-  .themes {
-    padding: 1rem;
-    border-radius: 4px;
-    margin: 0.5rem;
-    border: 1px solid gray;
-  }
-
-  .theming-container {
-    font-size: 1rem;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    flex-wrap: wrap;
-    justify-content: space-around;
-  }
-
-  .theming-inputs-wrapper {
-    display: flex;
-    align-items: center;
-    width: 25rem;
-  }
-  .theming-inputs {
-    display: inline-flex;
-    overflow: hidden;
-    width: 2em;
-    height: 2em;
-    /* optional formatting below here */
-    border-radius: 50%;
-    box-shadow: 1px 1px 3px 0px grey;
-    margin: 1em;
-  }
-  input[type='color'] {
-    padding: 0;
-    width: 150%;
-    height: 150%;
-    margin: -25%;
-  }
-  iframe {
-    height: 850px;
-    width: 1000px;
-    resize: both;
-    overflow: auto;
-    margin: 8px 8px 16px;
-  }
-  #image_drop_area {
-    width: 100%;
-    height: 100%;
-    background-position: center;
-    background-size: cover;
-    box-sizing: border-box;
-  }
-
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
-  }
-
-  .switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 34px;
-  }
-
-  .slider:before {
-    position: absolute;
-    content: '';
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 50%;
-  }
-
-  input:checked + .slider {
-    background-color: #929bed;
-  }
-
-  input:checked + .slider {
-    box-shadow: 0 0 1px #929bed;
-  }
-
-  input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
-  }
-
-  .backdrop-toggle {
-    display: flex;
-    align-items: center;
-    margin: 8px 8px 16px 4px;
-  }
-
-  .backdrop-toggle > label {
-    margin-right: 8px;
-  }
-</style>
+</main> -->
diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
index 8ecd45536..c7b045ea4 100644
--- a/packages/demo/src/App.svelte
+++ b/packages/demo/src/App.svelte
@@ -1,550 +1,508 @@
 <script>
   import Onboard from '@web3-onboard/core'
-  import fortmaticModule from '@web3-onboard/fortmatic'
-  import gnosisModule from '@web3-onboard/gnosis'
   import injectedModule from '@web3-onboard/injected-wallets'
-  import keepkeyModule from '@web3-onboard/keepkey'
-  import keystoneModule from '@web3-onboard/keystone'
-  import ledgerModule from '@web3-onboard/ledger'
-  import portisModule from '@web3-onboard/portis'
-  import torusModule from '@web3-onboard/torus'
-  import trezorModule from '@web3-onboard/trezor'
-  import walletConnectModule from '@web3-onboard/walletconnect'
-  import coinbaseModule from '@web3-onboard/coinbase'
-  import magicModule from '@web3-onboard/magic'
-  import web3authModule from '@web3-onboard/web3auth'
-
-  import dcentModule from '@web3-onboard/dcent'
-  import {
-    recoverAddress,
-    arrayify,
-    hashMessage,
-    verifyTypedData
-  } from 'ethers/lib/utils'
-  import { ethers } from 'ethers'
   import { share } from 'rxjs/operators'
-  import VConsole from 'vconsole'
-  import blocknativeIcon from './blocknative-icon'
-  import blocknativeLogo from './blocknative-logo'
+  import { onMount } from 'svelte'
 
-  if (window.innerWidth < 700) {
-    new VConsole()
-  }
-
-  let defaultTransactionObject = JSON.stringify(
-    {
-      from: '0xD87927847330FC926afd2B66C478A42a004aB4e7',
-      to: '0xd0d6d6c5fe4a677d343cc433536bb717bae167dd',
-      value: '0xf4240',
-      data: '0xa',
-      chainId: 1,
-      nonce: '0x0',
-      maxFeePerGas: '0x14',
-      maxPriorityFeePerGas: '0x0',
-      gasLimit: '0x14'
-    },
-    undefined,
-    4
-  )
-
-  let transactionObject = defaultTransactionObject
-  let signMsg = 'Any string message'
-  let signTypedMsg
-
-  const injected = injectedModule({
-    custom: [
-      // include custom injected wallet modules here
-    ],
-    filter: {
-      // mapping of wallet label to filter here
-    }
-  })
-
-  const coinbaseWallet = coinbaseModule()
-
-  const walletConnect = walletConnectModule({
-    connectFirstChainId: true
-  })
-  const portis = portisModule({
-    apiKey: 'b2b7586f-2b1e-4c30-a7fb-c2d1533b153b'
-  })
-
-  const fortmatic = fortmaticModule({
-    apiKey: 'pk_test_886ADCAB855632AA'
-  })
-
-  const web3auth = web3authModule({
-    clientId:
-      'DJuUOKvmNnlzy6ruVgeWYWIMKLRyYtjYa9Y10VCeJzWZcygDlrYLyXsBQjpJ2hxlBO9dnl8t9GmAC2qOP5vnIGo'
-  })
-
-  const torus = torusModule()
-  const ledger = ledgerModule()
-  const keepkey = keepkeyModule()
-  const keystone = keystoneModule()
-  const gnosis = gnosisModule()
-
-  const trezorOptions = {
-    email: 'test@test.com',
-    appUrl: 'https://www.blocknative.com'
-  }
-  const trezor = trezorModule(trezorOptions)
-
-  const magic = magicModule({
-    apiKey: 'pk_live_02207D744E81C2BA'
-    // userEmail: 'test@test.com'
-    // userEmail is optional - if user has already logged in and/or session is still active a login modal will not appear
-    // for more info see the @web3-onboard/magic docs
-  })
-
-  const dcent = dcentModule()
+  const INFURA_ID = 'e0b15c21b7d54cd4814586334af72618'
+  const injected = injectedModule()
 
   const onboard = Onboard({
-    wallets: [
-      web3auth,
-      ledger,
-      trezor,
-      walletConnect,
-      keepkey,
-      keystone,
-      coinbaseWallet,
-      injected,
-      magic,
-      fortmatic,
-      portis,
-      torus,
-      gnosis,
-      dcent
-    ],
+    wallets: [injected],
     chains: [
       {
         id: '0x1',
         token: 'ETH',
-        label: 'Ethereum',
-        rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e'
+        label: 'Ethereum Mainnet',
+        rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
       },
       {
-        id: 3,
+        id: '0x3',
         token: 'tROP',
-        label: 'Ropsten',
-        rpcUrl: 'https://ropsten.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e'
-      },
-      {
-        id: 4,
-        token: 'rETH',
-        label: 'Rinkeby',
-        rpcUrl: 'https://rinkeby.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e'
-      },
-      {
-        id: 137,
-        token: 'MATIC',
-        label: 'Polygon',
-        rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
-      },
-      {
-        id: '0x13881',
-        token: 'MATIC',
-        label: 'Polygon - Mumbai',
-        rpcUrl: 'https://matic-mumbai.chainstacklabs.com	'
-      },
-      {
-        id: 10,
-        token: 'OETH',
-        label: 'Optimism',
-        rpcUrl: 'https://mainnet.optimism.io'
+        label: 'Ethereum Ropsten Testnet',
+        rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
       }
     ],
     appMetadata: {
-      name: 'Blocknative',
-      icon: blocknativeIcon,
-      logo: blocknativeLogo,
-      description: 'Demo app for Onboard V2',
+      name: 'Documentation',
+      icon: '<svg></svg>',
+      description: 'Example showcasing how to connect a wallet.',
       recommendedInjectedWallets: [
         { name: 'MetaMask', url: 'https://metamask.io' },
         { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
-      ],
-      agreement: {
-        version: '1.0.0',
-        termsUrl: 'https://www.blocknative.com/terms-conditions',
-        privacyUrl: 'https://www.blocknative.com/privacy-policy'
-      },
-      gettingStartedGuide: 'https://blocknative.com',
-      explore: 'https://blocknative.com'
+      ]
     },
-    // // example customizing account center
     accountCenter: {
-      desktop: {
-        position: 'topRight',
-        enabled: true,
-        minimal: false
-      }
-    },
-    // example customizing copy
-    i18n: {
-      en: {
-        notify: {
-          watched: {
-            // "txConfirmed": "you paid a foo {formattedValue} {asset}!"
-          }
-        }
-      }
-    },
-    notify: {
-      desktop: {
-        enabled: true,
-        transactionHandler: transaction => {
-          console.log({ transaction })
-          //   if (transaction.eventCode === 'txConfirmed') {
-          //     return {
-          //       type: 'error',
-          //       message: 'Your in the pool, hope you brought a towel!',
-          //       autoDismiss: 0,
-          //       id: '123',
-          //       key: '321',
-          //       onClick: () =>
-          //         window.open(`https://rinkeby.etherscan.io/tx/${transaction.hash}`)
-          //     }
-          //   }
-          // if (transaction.eventCode === 'txPool') {
-          //   return {
-          //     type: 'hint',
-          //     message: 'Your in the pool, hope you brought a towel!',
-          //     autoDismiss: 0,
-          //     link: `https://ropsten.etherscan.io/tx/${transaction.hash}`
-          //   }
-          // }
-        },
-        position: 'topRight'
-      }
-    },
-    // Sign up for your free api key at www.Blocknative.com
-    apiKey: 'xxxxxx-bf21-42ec-a093-9d37e426xxxx'
+      desktop: { enabled: false },
+      mobile: { enabled: false }
+    }
   })
 
   // Subscribe to wallet updates
   const wallets$ = onboard.state.select('wallets').pipe(share())
 
-  const signTransactionMessage = async provider => {
-    const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
-
-    const signer = ethersProvider.getSigner()
-
-    const signature = await signer.signTransaction({
-      to: '',
-      value: 100000000000000
-    })
-
-    console.log(signature)
+  const defaultStyling = {
+    '--background-color': '#ffffff',
+    '--text-color': '#1a1d26',
+    '--border-color': '#ebebed',
+    '--accent-background': '#ebebed',
+    '--accent-color': '#929bed',
+    '--accent-color-hover': '#eff1fc',
+    '--secondary-text-color': '#707481',
+    // '--secondary-accent-background': '#242835'
   }
 
-  let toAddress
-  const sendTransaction = async provider => {
-    const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
-
-    const signer = ethersProvider.getSigner()
-
-    const txn = await signer.sendTransaction({
-      to: toAddress,
-      value: 100000000000000
-    })
-
-    const receipt = await txn.wait()
-    console.log(receipt)
+  const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
+  --onboard-close-button-background: var(--accent-background);
+  --onboard-connect-sidebar-color: var(--text-color);
+  --onboard-connect-sidebar-progress-background: var(--secondary-text-color);
+  --onboard-connect-sidebar-progress-color: var(--accent-color);
+  --onboard-connect-header-background: var(--background-color);
+  --onboard-connect-header-color: var(--text-color);
+  --onboard-main-scroll-container-background: var(--background-color);
+  --onboard-link-color: var(--accent-color);
+  --onboard-wallet-button-background: var(--background-color);
+  --onboard-wallet-button-background-hover: var(--accent-color-hover);
+  --onboard-wallet-button-border-color: var(--border-color);
+  --onboard-wallet-app-icon-border-color: var(--border-color);
+  --onboard-close-button-background: var(--accent-background);
+  --onboard-wallet-button-color-hover: var(--text-color);
+  --onboard-wallet-button-color: var(--text-color);`
+
+  const styleToString = style => {
+    return Object.keys(style).reduce(
+      (acc, key) => acc + key + ': ' + style[key] + '; \n  ',
+      ''
+    )
   }
 
-  const sendTransactionWithPreFlight = async (provider, balance) => {
-    const balanceValue = Object.values(balance)[0]
-    const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
-
-    const signer = ethersProvider.getSigner()
-    const txDetails = {
-      to: toAddress,
-      value: 100000000000000
-    }
-
-    const sendTransaction = () => {
-      return signer.sendTransaction(txDetails).then(tx => tx.hash)
+  async function copyStylingConfig() {
+    try {
+      const copy = await navigator.clipboard.writeText(copyableStyles)
+      return copy
+    } catch (err) {
+      console.error('Failed to copy: ', err)
     }
+  }
 
-    const gasPrice = () =>
-      ethersProvider.getGasPrice().then(res => res.toString())
+  let copyableStyles = `:root {\n  ${styleToString(
+    defaultStyling
+  )}${baseStyling}\n}`
 
-    const estimateGas = () => {
-      return ethersProvider.estimateGas(txDetails).then(res => res.toString())
-    }
-
-    const transactionHash = await onboard.state.actions.preflightNotifications({
-      sendTransaction,
-      gasPrice,
-      estimateGas,
-      balance: balanceValue,
-      txDetails: txDetails
-    })
+  const updateTheme = (e, targetStyle) => {
+    const iframe = document.getElementById('inlineFrameExample')
+    iframe.contentWindow.document.documentElement.style.setProperty(
+      targetStyle,
+      e.target.value
+    )
 
-    console.log(transactionHash)
+    copyableStyles = `:root {\n  ${styleToString(
+      defaultStyling
+    )}${baseStyling}\n}`
   }
 
-  const signMessage = async (provider, address) => {
-    const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
+  let checked = false
 
-    const signer = ethersProvider?.getSigner()
-    const addr = await signer?.getAddress()
-    const signature = await signer?.signMessage(signMsg)
+  const handleBackdrop = () => {
+    const iframe = document.getElementById('inlineFrameExample')
 
-    const recoveredAddress = recoverAddress(
-      arrayify(hashMessage(signMsg)),
-      signature
-    )
-
-    if (recoveredAddress !== address) {
-      console.error(
-        "Signature failed. Recovered address doesn' match signing address."
+    if (!checked) {
+      iframe.contentWindow.document.documentElement.style.setProperty(
+        '--onboard-modal-backdrop',
+        'rgba(0, 0, 0, 0)'
+      )
+    } else {
+      iframe.contentWindow.document.documentElement.style.setProperty(
+        '--onboard-modal-backdrop',
+        'rgba(0, 0, 0, 0.6)'
       )
     }
-
-    console.log({ signMsg, signature, recoveredAddress, addr })
   }
 
-  const signTypedMessage = async (provider, address) => {
-    const data = JSON.parse(signTypedMsg)
-    const signature = await provider.request({
-      method: 'eth_signTypedData',
-      params: [address, data]
+  // Converts the image into a data URI
+  const readImage = file => {
+    const reader = new FileReader()
+    reader.addEventListener('load', event => {
+      uploaded_image = event.target.result
+      document.querySelector(
+        '#image_drop_area'
+      ).style.backgroundImage = `url(${uploaded_image})`
     })
-    const { domain, types, message } = data
+    reader.readAsDataURL(file)
+  }
 
-    delete types.EIP712Domain
-    console.log(verifyTypedData(domain, types, message, signature))
+  let hideForIframe = false
+  let uploaded_image
+  const handleImageDrop = (dataFromDocument) => {
+    if (dataFromDocument) {
+      if (image_drop_area) {
+        // Event listener for dragging the image over the div
+        image_drop_area.addEventListener('dragover', event => {
+          event.stopPropagation()
+          event.preventDefault()
+          // Style the drag-and-drop as a "copy file" operation.
+          event.dataTransfer.dropEffect = 'copy'
+        })
+
+        // Event listener for dropping the image inside the div
+        image_drop_area.addEventListener('drop', event => {
+          const image_drop_area_direction = document.querySelector(
+            '#image_drop_area_direction'
+          )
+          document.body.style.padding = 0
+          image_drop_area_direction.style.display = 'none'
+          onboard.connectWallet()
+          event.stopPropagation()
+          event.preventDefault()
+          let fileList = event.dataTransfer.files
+
+          readImage(fileList[0])
+        })
+      }
+    }
+  }
+  const initIFrame = async (dataFromDocument) => {
+    if (dataFromDocument) {
+      return (hideForIframe = true)
+    }
   }
+
+  onMount(async () => {
+    var dataFromDocument = location.hash.replace(/#/, "");
+    console.log(dataFromDocument)
+    await initIFrame(dataFromDocument)
+    handleImageDrop(dataFromDocument)
+  })
 </script>
 
 <style>
+  :root {
+    --background-color: #ffffff; /* --white */
+    --text-color: #1a1d26; /* --gray-700 */
+    --border-color: #ebebed; /* --gray-100 taken from future mock */
+
+    --accent-background: #ebebed; /* --gray-100 (currently gray-100 in connect modal) */
+    --accent-color: #929bed; /* --primary-400 */
+    --accent-color-hover: #eff1fc; /* --primary-200 */
+
+    /* Account Center & Notify */
+    --secondary-text-color: #707481; /* --gray-400 (balance and token name) */
+    /* --secondary-accent-background: #242835; --gray-600 (Upper background in maximized) */
+
+    /* --onboard-font-family-normal: System,monospace; */
+    --onboard-connect-sidebar-background: var(--accent-background);
+    --onboard-close-button-background: var(--accent-background);
+    --onboard-connect-sidebar-color: var(--text-color);
+    --onboard-connect-sidebar-progress-background: var(
+      --secondary-text-color
+    ); /* defaults to gray-200 */
+    --onboard-connect-sidebar-progress-color: var(
+      --accent-color
+    ); /* defaults to  primary-600 */
+    --onboard-connect-header-background: var(--background-color);
+    --onboard-connect-header-color: var(--text-color);
+    --onboard-main-scroll-container-background: var(--background-color);
+    --onboard-link-color: var(--accent-color);
+    --onboard-wallet-button-background: var(--background-color);
+    --onboard-wallet-button-background-hover: var(--accent-color-hover);
+    --onboard-wallet-button-color-hover: var(--text-color);
+    --onboard-wallet-button-color: var(--text-color);
+    --onboard-wallet-button-border-color: var(--border-color);
+    --onboard-wallet-app-icon-border-color: var(--border-color);
+/* 
+    --account-center-minimized-background: var(--background-color);
+    --account-center-minimized-address-color: var(--text-color);
+    --account-center-minimized-balance-color: var(--secondary-text-color);
+    --account-center-minimized-chain-select-background: var(
+      --accent-color-hover
+    );
+    --account-center-maximized-info-section-background: var(--background-color);
+    --account-center-maximized-network-section-background: var(
+      --accent-background
+    );
+    --account-center-maximized-upper-background: var(
+      --secondary-accent-background
+    );
+    --account-center-maximized-address-color: var(--background-color);
+    --account-center-maximized-account-section-background-hover: var(
+      --text-color
+    );
+    --account-center-maximized-balance-color: var(--border-color);
+    --account-center-maximized-upper-action-color: var(--accent-color);
+    --account-center-maximized-network-text-color: var(
+      --secondary-accent-background
+    );
+    --account-center-maximized-info-section-background-color: var(
+      --background-color
+    );
+    --account-center-maximized-app-name-color: var(
+      --secondary-accent-background
+    );
+    --account-center-maximized-app-info-color: var(
+      --secondary-accent-background
+    );
+    --account-center-app-btn-background: var(--secondary-accent-background);
+    --account-center-app-btn-text-color: var(--background-color);
+
+    --notify-onboard-background: var(--secondary-accent-background);
+    --notify-onboard-transaction-status: var(--accent-background);
+    --notify-onboard-address-hash-color: var(--accent-color-hover);
+    --notify-onboard-anchor-color: var(--accent-color);
+    --notify-onboard-timer-color: var(--secondary-text-color); */
+
+    /* 
+		NEEDS TARGET AS IT USES OPACITY: 
+		--account-center-maximized-upper-action-background-hover
+		NEEDS UPDATES FOR DIFFERNT STYLING, DOESNT FIT BASIC VARIABLES ABOVE:
+		Notify status icons, icon backgrounds and icon borders
+	*/
+  }
+  main {
+    height: 100%;
+  }
   button {
     width: 14rem;
     margin: 8px;
   }
-  .connected-wallet {
-    padding: 1rem;
-    border-radius: 4px;
-    margin: 0.5rem;
-    border: 1px solid gray;
+
+  .copy-styles-container {
+    display: flex;
+    flex-direction: row;
+    align-items: end;
   }
 
-  .flex-centered {
+  .copy-styles-textarea {
+    width: 30rem;
+    height: 16rem;
+    margin: 0 0 8px;
+  }
+
+  /* .notify-chain-container {
     display: flex;
-    align-items: center;
+    flex-wrap: wrap;
   }
+  .notify-action-container {
+    display: flex;
+    flex-direction: column;
+    width: 15rem;
+  } */
 
-  .account-info div {
+  .theming-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    width: 100%;
+  }
+
+  .theming-inputs-wrapper {
+    display: flex;
+    align-items: center;
+    width: 19rem;
+  }
+  .theming-inputs {
+    display: inline-flex;
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    width: 2em;
+    height: 2em;
+    border-radius: 50%;
+    box-shadow: 1px 1px 3px 0px grey;
+    margin: 0.4em;
+  }
+  input[type='color'] {
+    padding: 0;
+    width: 150%;
+    height: 150%;
+    margin: -25%;
+  }
+  iframe {
+    height: 450px;
+    width: 100%;
+    resize: both;
+    overflow: auto;
+    margin: 8px 0px;
+  }
+  #image_drop_area {
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-size: cover;
+    box-sizing: border-box;
   }
 
-  .text-input {
-    width: 18rem;
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
   }
 
-  .sign-transaction {
-    display: flex;
-    align-items: end;
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
   }
 
-  .sign-transaction-textarea {
-    width: 24rem;
-    height: 12rem;
-    margin: 0;
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 34px;
   }
-  .notify-chain-container {
-    display: flex;
-    flex-wrap: wrap;
+
+  .slider:before {
+    position: absolute;
+    content: '';
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 50%;
   }
-  .switch-chain-container,
-  .notify-action-container {
+
+  input:checked + .slider {
+    background-color: #929bed;
+  }
+
+  input:checked + .slider {
+    box-shadow: 0 0 1px #929bed;
+  }
+
+  input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+  }
+
+  .backdrop-toggle {
     display: flex;
-    flex-direction: column;
-    width: 15rem;
+    align-items: center;
+    margin: 8px 8px 16px 4px;
+  }
+
+  .backdrop-toggle > label {
+    margin-right: 8px;
   }
 </style>
 
 <main>
-  <div class="cta">
-    <button on:click={() => onboard.connectWallet()}>Connect Wallet</button>
-
-    {#if $wallets$}
-      <button on:click={() => onboard.state.actions.updateBalances()}
-        >Update Wallet Balance</button
-      >
-      <div class="notify-chain-container">
-        <div class="notify-action-container">
-          <button
-            on:click={() =>
-              onboard.state.actions.customNotification({
-                type: 'hint',
-                message: 'This is a custom DApp hint',
-                autoDismiss: 0
-              })}>Send Hint Notification</button
-          >
-          <button
-            on:click={() => {
-              const { update, dismiss } =
-                onboard.state.actions.customNotification({
-                  type: 'pending',
-                  message:
-                    'This is a custom DApp pending notification to use however you want',
-                  autoDismiss: 0
-                })
-              setTimeout(
-                () =>
-                  update({
-                    eventCode: 'dbUpdateSuccess',
-                    message: 'Updated status for custom notification',
-                    type: 'success',
+  {#if hideForIframe}
+    <div id="image_drop_area">
+      <p id="image_drop_area_direction">
+        Drag and drop a screen shot of your site to customize styling.
+        <br />
+        Click color circles above to change the theme.
+      </p>
+      <!-- {#if uploaded_image}
+        {#if $wallets$}
+          <div class="notify-chain-container">
+            <div class="notify-action-container">
+              <button
+                on:click={() =>
+                  onboard.state.actions.customNotification({
+                    type: 'hint',
+                    message: 'This is a custom DApp hint',
                     autoDismiss: 0
-                  }),
-                4000
-              )
-            }}>Send Success Notification</button
-          >
-          <button
-            on:click={() =>
-              onboard.state.actions.customNotification({
-                message:
-                  'This is a custom DApp success notification to use however you want',
-                autoDismiss: 0,
-                type: 'pending'
-              })}>Send Pending Notification</button
-          >
-          <button
-            on:click={() =>
-              onboard.state.actions.customNotification({
-                type: 'error',
-                message:
-                  'This is a custom DApp Error notification to use however you want',
-                autoDismiss: 0
-              })}>Send Error Notification</button
-          >
-          <button
-            on:click={() =>
-              onboard.state.actions.customNotification({
-                message:
-                  'This is a custom non-descript DApp notification to use however you want',
-                autoDismiss: 0
-              })}>Send DApp Notification</button
-          >
-        </div>
-        <div class="switch-chain-container">
-          <button on:click={() => onboard.setChain({ chainId: '0x1' })}
-            >Set Chain to Mainnet</button
-          >
-          <button on:click={() => onboard.setChain({ chainId: '0x4' })}
-            >Set Chain to Rinkeby</button
-          >
-          <button on:click={() => onboard.setChain({ chainId: '0x89' })}
-            >Set Chain to Matic</button
-          >
-        </div>
-      </div>
-    {/if}
-  </div>
-
-  {#if $wallets$}
-    {#each $wallets$ as { icon, label, accounts, chains, provider }}
-      <div class="connected-wallet">
-        <div class="flex-centered" style="width: 10rem;">
-          <div style="width: 2rem; height: 2rem">{@html icon}</div>
-          <span>{label}</span>
-        </div>
-
-        <div>Chains: {JSON.stringify(chains, null, 2)}</div>
-
-        {#each accounts as { address, ens, balance }}
-          <div
-            class="account-info"
-            style="margin-top: 0.25rem; margin-bottom: 0.25rem; padding: 0.25rem; border: 1px solid gray;"
-          >
-            <div>Address: {address}</div>
-            {#if balance}
-              <div>Balances:</div>
-              {#each Object.entries(balance) as [token, amount]}
-                <div style="margin-left: 1rem;">{token}: {amount}</div>
-              {/each}
-            {/if}
-
-            {#if ens}
-              <div>ENS Name: {(ens && ens.name) || ''}</div>
-            {/if}
-          </div>
-          <div>
-            <input
-              id="sign-msg-input"
-              type="text"
-              class="text-input"
-              placeholder="Message..."
-              bind:value={signMsg}
-            />
-            <button on:click={signMessage(provider, address)}>
-              Sign Message
-            </button>
-          </div>
-          <div>
-            <input
-              id="sign-type-msg-input"
-              type="text"
-              class="text-input"
-              placeholder="Typed message..."
-              bind:value={signTypedMsg}
-            />
-            <button on:click={signTypedMessage(provider, address)}>
-              Sign Typed Message
-            </button>
-          </div>
-
-          <div>
-            <input
-              type="text"
-              class="text-input"
-              placeholder="0x..."
-              bind:value={toAddress}
-            />
-            <button on:click={sendTransaction(provider)}>
-              Send Transaction
-            </button>
-          </div>
-          <div>
-            <input
-              type="text"
-              class="text-input"
-              placeholder="0x..."
-              bind:value={toAddress}
-            />
-            <button on:click={sendTransactionWithPreFlight(provider, balance)}>
-              Send with Preflight Notifications
-            </button>
+                  })}>Send Hint Notification</button
+              >
+              <button
+                on:click={() => {
+                  onboard.state.actions.customNotification({
+                      type: 'pending',
+                      message:
+                        'This is a custom DApp pending notification to use however you want',
+                      autoDismiss: 0
+                    })
+                }}>Send Success Notification</button
+              >
+              <button
+                on:click={() =>
+                  onboard.state.actions.customNotification({
+                    message:
+                      'This is a custom DApp success notification to use however you want',
+                    autoDismiss: 0,
+                    type: 'pending'
+                  })}>Send Pending Notification</button
+              >
+              <button
+                on:click={() =>
+                  onboard.state.actions.customNotification({
+                    type: 'error',
+                    message:
+                      'This is a custom DApp Error notification to use however you want',
+                    autoDismiss: 0
+                  })}>Send Error Notification</button
+              >
+              <button
+                on:click={() =>
+                  onboard.state.actions.customNotification({
+                    message:
+                      'This is a custom non-descript DApp notification to use however you want',
+                    autoDismiss: 0
+                  })}>Send DApp Notification</button
+              >
+            </div>
           </div>
-
-          <div class="sign-transaction">
-            <textarea
-              bind:value={transactionObject}
-              id="sign-transaction-input"
-              type="text"
-              class="sign-transaction-textarea"
-            />
-            <button
-              on:click={signTransactionMessage(provider)}
-              style="margin: 0 0 0 .5rem"
+        {/if}
+      {/if} -->
+    </div>
+  {/if}
+  {#if !hideForIframe}
+    <div class="themes">
+      <label for="Theme">Click Color Circles to Set Theme: </label>
+      <div class="theming-container">
+        {#each Object.keys(defaultStyling) as target}
+          <div class="theming-inputs-wrapper">
+            <div class="theming-inputs">
+              <input
+                type="color"
+                name="Theme"
+                bind:value={defaultStyling[target]}
+                on:input={e => updateTheme(e, target)}
+              />
+            </div>
+            <span class="text" id="current-theme"
+              >{target} : {defaultStyling[target]}</span
             >
-              Sign Transaction
-            </button>
           </div>
         {/each}
-        <button
-          style="margin-top: 0.5rem;"
-          on:click={() => onboard.disconnectWallet({ label })}
-        >
-          Disconnect Wallet
+      </div>
+      <div class="backdrop-toggle">
+        <label class="switch">
+          <input
+            type="checkbox"
+            on:change={() => handleBackdrop()}
+            bind:checked
+          />
+          <span class="slider" />
+        </label>
+        Disabled Backdrop for Styling
+      </div>
+      <div class="copy-styles-container">
+        <textarea
+          readonly
+          bind:value={copyableStyles}
+          class="copy-styles-textarea"
+        />
+        <button on:click={async () => await copyStylingConfig()}>
+          Copy Styling Config
         </button>
       </div>
-    {/each}
+    </div>
+    <iframe
+      id="inlineFrameExample"
+      name="inlineFrameExample"
+      title="Inline Frame Example"
+      src={window.location.href + '#stylize'}
+    />
   {/if}
-</main>
+</main>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 109165e31..eb14c09ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2516,6 +2516,34 @@
   dependencies:
     "@walletconnect/window-getters" "^1.0.0"
 
+"@web3-onboard/common@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/common/-/common-2.2.2.tgz#abef8ca861835ab00e5b4641462de2c3db73fc89"
+  integrity sha512-04Y2Fryiu48nW27dgAtYmPugdhYbeIZq4HM1wsqRftQjgyEWnsam3YyeKRWBABa5iTsE2a/Fo4LofuBG5RMVYw==
+  dependencies:
+    bignumber.js "^9.1.0"
+    ethers "5.5.4"
+    joi "^17.4.2"
+
+"@web3-onboard/core@^2.6.0-alpha.1":
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.8.3.tgz#e41c3e11b5a38d7b5e2ee15d4dc2cf49307d38c5"
+  integrity sha512-3CKc33dKqC9jurbf0+7mfvddBJgvCU4n9ADu68XlmCws3xP8Gq1nji4Y/AEUqcfhfdPWno6vIgc/j1cYseCIhw==
+  dependencies:
+    "@web3-onboard/common" "^2.2.2"
+    bignumber.js "^9.0.0"
+    bnc-sdk "^4.4.1"
+    bowser "^2.11.0"
+    ethers "5.5.3"
+    eventemitter3 "^4.0.7"
+    joi "17.6.0"
+    lodash.merge "^4.6.2"
+    lodash.partition "^4.6.0"
+    nanoid "^4.0.0"
+    rxjs "^7.5.2"
+    svelte "^3.49.0"
+    svelte-i18n "^3.3.13"
+
 "@web3auth/base-plugin@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@web3auth/base-plugin/-/base-plugin-1.0.1.tgz#1e2a87acf745299fdff6f92e6c46ee9bc38aa670"
@@ -3277,6 +3305,11 @@ bignumber.js@^9.0.0, bignumber.js@^9.0.1, bignumber.js@^9.0.2:
   resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.0.2.tgz#71c6c6bed38de64e24a65ebe16cfcf23ae693673"
   integrity sha512-GAcQvbpsM0pUb0zw1EI0KhQEZ+lRwR5fYaAp3vPOYuP7aDvGy6cVN6XHLauvF8SOga2y0dcLcjt3iQDTSEliyw==
 
+bignumber.js@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.0.tgz#8d340146107fe3a6cb8d40699643c302e8773b62"
+  integrity sha512-4LwHK4nfDOraBCtst+wOWIHbu1vhvAPJK8g8nROd4iuc3PSEjWif/qwbkh8jwCJz6yDBvtU4KPynETgrfh7y3A==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -9609,6 +9642,11 @@ svelte@^3.31.2, svelte@^3.42.5, svelte@^3.46.4:
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.46.4.tgz#0c46bc4a3e20a2617a1b7dc43a722f9d6c084a38"
   integrity sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==
 
+svelte@^3.49.0:
+  version "3.50.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.50.1.tgz#b35fbc5e79ddd71e8bb27c3149ee6ff903841239"
+  integrity sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==
+
 swarm-js@^0.1.40:
   version "0.1.40"
   resolved "https://registry.yarnpkg.com/swarm-js/-/swarm-js-0.1.40.tgz#b1bc7b6dcc76061f6c772203e004c11997e06b99"

From 06051d1f00f01b8b41d2f18275e80ead24cd45d0 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Wed, 14 Sep 2022 16:24:25 -0600
Subject: [PATCH 04/16] Theming within docs Gustavo rocks!

---
 .../examples/ThemeCustomizer.svelte           | 630 ++++++++++++------
 docs/src/routes/__layout-kit-docs.svelte      |   3 +-
 .../[...2]getting-started/[...2]theming.md    |   7 +
 .../routes/theming/__layout@homepage.svelte   |   3 +
 docs/src/routes/theming/index.md              |   7 +
 5 files changed, 444 insertions(+), 206 deletions(-)
 create mode 100644 docs/src/routes/docs/[...2]getting-started/[...2]theming.md
 create mode 100644 docs/src/routes/theming/__layout@homepage.svelte
 create mode 100644 docs/src/routes/theming/index.md

diff --git a/docs/src/lib/components/examples/ThemeCustomizer.svelte b/docs/src/lib/components/examples/ThemeCustomizer.svelte
index 6d58181c5..c14c16a71 100644
--- a/docs/src/lib/components/examples/ThemeCustomizer.svelte
+++ b/docs/src/lib/components/examples/ThemeCustomizer.svelte
@@ -5,216 +5,210 @@
   import { share } from 'rxjs/operators'
   import { onMount } from 'svelte'
 
-  // const INFURA_ID = 'e0b15c21b7d54cd4814586334af72618'
-  // const injected = injectedModule()
-
-  // const onboard = Onboard({
-  //   wallets: [injected],
-  //   chains: [
-  //     {
-  //       id: '0x1',
-  //       token: 'ETH',
-  //       label: 'Ethereum Mainnet',
-  //       rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
-  //     },
-  //     {
-  //       id: '0x3',
-  //       token: 'tROP',
-  //       label: 'Ethereum Ropsten Testnet',
-  //       rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
-  //     }
-  //   ],
-  //   appMetadata: {
-  //     name: 'Documentation',
-  //     icon: '<svg></svg>',
-  //     description: 'Example showcasing how to connect a wallet.',
-  //     recommendedInjectedWallets: [
-  //       { name: 'MetaMask', url: 'https://metamask.io' },
-  //       { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
-  //     ]
-  //   },
-  //   accountCenter: {
-  //     desktop: { enabled: false },
-  //     mobile: { enabled: false }
-  //   }
-  // })
-
-  // // Subscribe to wallet updates
-  // const wallets$ = onboard.state.select('wallets').pipe(share())
-
-  // const defaultStyling = {
-  //   '--background-color': '#ffffff',
-  //   '--text-color': '#1a1d26',
-  //   '--border-color': '#ebebed',
-  //   '--accent-background': '#ebebed',
-  //   '--accent-color': '#929bed',
-  //   '--accent-color-hover': '#eff1fc',
-  //   '--secondary-text-color': '#707481',
-  //   '--secondary-accent-background': '#242835'
-  // }
-
-  // const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
-  // --onboard-close-button-background: var(--accent-background);
-  // --onboard-connect-sidebar-color: var(--text-color);
-  // --onboard-connect-sidebar-progress-background: var(--secondary-text-color);
-  // --onboard-connect-sidebar-progress-color: var(--accent-color);
-  // --onboard-connect-header-background: var(--background-color);
-  // --onboard-connect-header-color: var(--text-color);
-  // --onboard-main-scroll-container-background: var(--background-color);
-  // --onboard-link-color: var(--accent-color);
-  // --onboard-wallet-button-background: var(--background-color);
-  // --onboard-wallet-button-background-hover: var(--accent-color-hover);
-  // --onboard-wallet-button-border-color: var(--border-color);
-  // --onboard-wallet-app-icon-border-color: var(--border-color);
-
-  // --account-center-minimized-background: var(--background-color);
-  // --account-center-minimized-address-color: var(--text-color);
-  // --account-center-minimized-balance-color: var(--secondary-text-color);
-  // --account-center-minimized-chain-select-background: var(
-  //   --accent-color-hover
-  // );
-  // --account-center-maximized-info-section-background: var(
-  //   --background-color
-  // );
-  // --account-center-maximized-network-section-background: var(
-  //   --accent-background
-  // );
-  // --account-center-maximized-upper-background: var(
-  //   --secondary-accent-background
-  // );
-  // --account-center-maximized-address-color: var(--background-color);
-  // --account-center-maximized-account-section-background-hover: var(
-  //   --text-color
-  // );
-  // --account-center-maximized-balance-color: var(--border-color);
-  // --account-center-maximized-upper-action-color: var(--accent-color);
-  // --account-center-maximized-network-text-color: var(
-  //   --secondary-accent-background
-  // );
-  // --account-center-maximized-info-section-background-color: var(
-  //   --background-color
-  // );
-  // --account-center-maximized-app-name-color: var(
-  //   --secondary-accent-background
-  // );
-  // --account-center-maximized-app-info-color: var(
-  //   --secondary-accent-background
-  // );
-  // --account-center-app-btn-background: var(--secondary-accent-background);
-  // --account-center-app-btn-text-color: var(--background-color);
-
-  // --notify-onboard-background: var(----secondary-accent-color);
-  // --notify-onboard-transaction-status: var(--accent-background);
-  // --notify-onboard-address-hash-color: var(--accent-color-hover);
-  // --notify-onboard-anchor-color: var(--accent-color);
-  // --notify-onboard-timer-color: var(--secondary-text-color);`
-
-  // const styleToString = (style) => {
-  //   return Object.keys(style).reduce((acc, key) => acc + key + ': ' + style[key] + '; \n  ', '')
-  // }
-
-  // async function copyStylingConfig() {
-  //   try {
-  //     const copy = await navigator.clipboard.writeText(copyableStyles)
-  //     return copy
-  //   } catch (err) {
-  //     console.error('Failed to copy: ', err)
-  //   }
-  // }
-
-  // let copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
-
-  // const updateTheme = (e, targetStyle) => {
-  //   const iframe = driver.findElements(webdriver.By.tagName("iframe"))[0];
-  //   // const iframe = document.getElementById('inlineFrameExample')
-  //   console.log(iframe)
-  //   iframe.contentWindow.document.documentElement.style.setProperty(targetStyle, e.target.value)
-
-  //   copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
-  // }
-
-  // let checked = false
-
-  // const handleBackdrop = () => {
-  //   const iframe = document.getElementById('inlineFrameExample')
-
-  //   if (!checked) {
-  //     iframe.contentWindow.document.documentElement.style.setProperty(
-  //       '--onboard-modal-backdrop',
-  //       'rgba(0, 0, 0, 0)'
-  //     )
-  //   } else {
-  //     iframe.contentWindow.document.documentElement.style.setProperty(
-  //       '--onboard-modal-backdrop',
-  //       'rgba(0, 0, 0, 0.6)'
-  //     )
-  //   }
-  // }
-
-  // // Converts the image into a data URI
-  // const readImage = (file) => {
-  //   const reader = new FileReader()
-  //   reader.addEventListener('load', (event) => {
-  //     uploaded_image = event.target.result
-  //     document.querySelector('#image_drop_area').style.backgroundImage = `url(${uploaded_image})`
-  //   })
-  //   reader.readAsDataURL(file)
-  // }
-
-  // let uploaded_image
-  // const handleImageDrop = () => {
-  //   // if (window.location !== window.parent.location) {
-  //     if (image_drop_area) {
-  //       // Event listener for dragging the image over the div
-  //       const connectButton = window.document.getElementById('connectBtn')
-  //       connectButton.style.visibility = 'hidden'
-  //       image_drop_area.addEventListener('dragover', (event) => {
-  //         event.stopPropagation()
-  //         event.preventDefault()
-  //         // Style the drag-and-drop as a "copy file" operation.
-  //         event.dataTransfer.dropEffect = 'copy'
-  //       })
-
-  //       // Event listener for dropping the image inside the div
-  //       image_drop_area.addEventListener('drop', (event) => {
-  //         const image_drop_area_direction = document.querySelector('#image_drop_area_direction')
-  //         document.body.style.padding = 0
-  //         image_drop_area_direction.style.display = 'none'
-  //         connectButton.click()
-  //         connectButton.style.display = 'none'
-  //         event.stopPropagation()
-  //         event.preventDefault()
-  //         let fileList = event.dataTransfer.files
-
-  //         readImage(fileList[0])
-  //       })
-  //     }
-  //   // }
-  // }
-
-  // onMount(async () => {
-  //   handleImageDrop()
-  //   const sheet = document.createElement('style')
-  //   document.getElementById('#image_drop_area')?.append(sheet)
-  // })
+  const INFURA_ID = 'e0b15c21b7d54cd4814586334af72618'
+  const injected = injectedModule()
 
-</script>
+  const onboard = Onboard({
+    wallets: [injected],
+    chains: [
+      {
+        id: '0x1',
+        token: 'ETH',
+        label: 'Ethereum Mainnet',
+        rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
+      },
+      {
+        id: '0x3',
+        token: 'tROP',
+        label: 'Ethereum Ropsten Testnet',
+        rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
+      }
+    ],
+    appMetadata: {
+      name: 'Documentation',
+      icon: '<svg></svg>',
+      description: 'Example showcasing how to connect a wallet.',
+      recommendedInjectedWallets: [
+        { name: 'MetaMask', url: 'https://metamask.io' },
+        { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
+      ]
+    },
+    accountCenter: {
+      desktop: { enabled: false },
+      mobile: { enabled: false }
+    }
+  })
 
+  // Subscribe to wallet updates
+  const wallets$ = onboard.state.select('wallets').pipe(share())
 
-<style>
-  :root {
-    --kd-main-max-width: 100%;
-    --kd-article-max-width: 100%;
+  const defaultStyling = {
+    '--background-color': '#ffffff',
+    '--text-color': '#1a1d26',
+    '--border-color': '#ebebed',
+    '--accent-background': '#ebebed',
+    '--accent-color': '#929bed',
+    '--accent-color-hover': '#eff1fc',
+    '--secondary-text-color': '#707481',
+    '--secondary-accent-background': '#242835'
+  }
+
+  const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
+  --onboard-close-button-background: var(--accent-background);
+  --onboard-connect-sidebar-color: var(--text-color);
+  --onboard-connect-sidebar-progress-background: var(--secondary-text-color);
+  --onboard-connect-sidebar-progress-color: var(--accent-color);
+  --onboard-connect-header-background: var(--background-color);
+  --onboard-connect-header-color: var(--text-color);
+  --onboard-main-scroll-container-background: var(--background-color);
+  --onboard-link-color: var(--accent-color);
+  --onboard-wallet-button-background: var(--background-color);
+  --onboard-wallet-button-background-hover: var(--accent-color-hover);
+  --onboard-wallet-button-border-color: var(--border-color);
+  --onboard-wallet-app-icon-border-color: var(--border-color);
+
+  --account-center-minimized-background: var(--background-color);
+  --account-center-minimized-address-color: var(--text-color);
+  --account-center-minimized-balance-color: var(--secondary-text-color);
+  --account-center-minimized-chain-select-background: var(
+    --accent-color-hover
+  );
+  --account-center-maximized-info-section-background: var(
+    --background-color
+  );
+  --account-center-maximized-network-section-background: var(
+    --accent-background
+  );
+  --account-center-maximized-upper-background: var(
+    --secondary-accent-background
+  );
+  --account-center-maximized-address-color: var(--background-color);
+  --account-center-maximized-account-section-background-hover: var(
+    --text-color
+  );
+  --account-center-maximized-balance-color: var(--border-color);
+  --account-center-maximized-upper-action-color: var(--accent-color);
+  --account-center-maximized-network-text-color: var(
+    --secondary-accent-background
+  );
+  --account-center-maximized-info-section-background-color: var(
+    --background-color
+  );
+  --account-center-maximized-app-name-color: var(
+    --secondary-accent-background
+  );
+  --account-center-maximized-app-info-color: var(
+    --secondary-accent-background
+  );
+  --account-center-app-btn-background: var(--secondary-accent-background);
+  --account-center-app-btn-text-color: var(--background-color);
+
+  --notify-onboard-background: var(----secondary-accent-color);
+  --notify-onboard-transaction-status: var(--accent-background);
+  --notify-onboard-address-hash-color: var(--accent-color-hover);
+  --notify-onboard-anchor-color: var(--accent-color);
+  --notify-onboard-timer-color: var(--secondary-text-color);`
+
+  const styleToString = (style) => {
+    return Object.keys(style).reduce((acc, key) => acc + key + ': ' + style[key] + '; \n  ', '')
+  }
+
+  async function copyStylingConfig() {
+    try {
+      const copy = await navigator.clipboard.writeText(copyableStyles)
+      return copy
+    } catch (err) {
+      console.error('Failed to copy: ', err)
+    }
+  }
+
+  let copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
+
+  const updateThemes = (e, targetStyle) => {
+    const iframe = driver.findElements(webdriver.By.tagName("iframe"))[0];
+    // const iframe = document.getElementById('inlineFrameExample')
+    console.log(iframe)
+    document.documentElement.style.setProperty(targetStyle, e.target.value)
+
+    copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
+  }
+
+  let checked = false
+
+  const handleBackdrop = () => {
+    const iframe = document.getElementById('inlineFrameExample')
+
+    if (!checked) {
+      document.documentElement.style.setProperty(
+        '--onboard-modal-backdrop',
+        'rgba(0, 0, 0, 0)'
+      )
+    } else {
+      document.documentElement.style.setProperty(
+        '--onboard-modal-backdrop',
+        'rgba(0, 0, 0, 0.6)'
+      )
+    }
   }
-  iframe { width: 100%; height: 62.5rem;}
-</style>
-<iframe
+
+  // Converts the image into a data URI
+  const readImage = (file) => {
+    const reader = new FileReader()
+    reader.addEventListener('load', (event) => {
+      uploaded_image = event.target.result
+      document.querySelector('#image_drop_area').style.backgroundImage = `url(${uploaded_image})`
+    })
+    reader.readAsDataURL(file)
+  }
+
+  let uploaded_image
+  const handleImageDrop = () => {
+    // if (window.location !== window.parent.location) {
+      if (image_drop_area) {
+        // Event listener for dragging the image over the div
+        const connectButton = window.document.getElementById('connectBtn')
+        connectButton.style.visibility = 'hidden'
+        image_drop_area.addEventListener('dragover', (event) => {
+          event.stopPropagation()
+          event.preventDefault()
+          // Style the drag-and-drop as a "copy file" operation.
+          event.dataTransfer.dropEffect = 'copy'
+        })
+
+        // Event listener for dropping the image inside the div
+        image_drop_area.addEventListener('drop', (event) => {
+          const image_drop_area_direction = document.querySelector('#image_drop_area_direction')
+          document.body.style.padding = 0
+          image_drop_area_direction.style.display = 'none'
+          connectButton.click()
+          connectButton.style.display = 'none'
+          event.stopPropagation()
+          event.preventDefault()
+          let fileList = event.dataTransfer.files
+
+          readImage(fileList[0])
+        })
+      }
+    // }
+  }
+
+  onMount(async () => {
+    handleImageDrop()
+    const sheet = document.createElement('style')
+    document.getElementById('#image_drop_area')?.append(sheet)
+  })
+
+</script>
+
+
+
+<!-- <iframe
 src="https://melodic-sfogliatella-f45328.netlify.app/"
-title="The Themenator - Theming for Web3Onboard"
-/>
-<!-- 
+title="The Themesnator - Theming for Web3Onboard"
+/> -->
+
 <main>
-    <div class="themes">
+    <div class="control-panel">
       <label for="Theme">Click Color Circles to Set Theme: </label>
       <div class="theming-container">
         {#each Object.keys(defaultStyling) as target}
@@ -329,4 +323,230 @@ title="The Themenator - Theming for Web3Onboard"
         {/if}
       {/if}
     </div>
-</main> -->
+</main>
+<style>
+  :root {
+    --kd-main-max-width: 100%;
+    --kd-article-max-width: 100%;
+  }
+  /* iframe { width: 100%; height: 62.5rem;} */
+:root {
+    --background-color: #ffffff; /* --white */
+    --text-color: #1a1d26; /* --gray-700 */
+    --border-color: #ebebed; /* --gray-100 taken from future mock */
+
+    --accent-background: #ebebed; /* --gray-100 (currently gray-100 in connect modal) */
+    --accent-color: #929bed; /* --primary-400 */
+    --accent-color-hover: #eff1fc; /* --primary-200 */
+
+    /* Account Center & Notify */
+    --secondary-text-color: #707481; /* --gray-400 (balance and token name) */
+    /* --secondary-accent-background: #242835; --gray-600 (Upper background in maximized) */
+
+    /* --onboard-font-family-normal: System,monospace; */
+    --onboard-connect-sidebar-background: var(--accent-background);
+    --onboard-close-button-background: var(--accent-background);
+    --onboard-connect-sidebar-color: var(--text-color);
+    --onboard-connect-sidebar-progress-background: var(
+      --secondary-text-color
+    ); /* defaults to gray-200 */
+    --onboard-connect-sidebar-progress-color: var(
+      --accent-color
+    ); /* defaults to  primary-600 */
+    --onboard-connect-header-background: var(--background-color);
+    --onboard-connect-header-color: var(--text-color);
+    --onboard-main-scroll-container-background: var(--background-color);
+    --onboard-link-color: var(--accent-color);
+    --onboard-wallet-button-background: var(--background-color);
+    --onboard-wallet-button-background-hover: var(--accent-color-hover);
+    --onboard-wallet-button-color-hover: var(--text-color);
+    --onboard-wallet-button-color: var(--text-color);
+    --onboard-wallet-button-border-color: var(--border-color);
+    --onboard-wallet-app-icon-border-color: var(--border-color);
+/* 
+    --account-center-minimized-background: var(--background-color);
+    --account-center-minimized-address-color: var(--text-color);
+    --account-center-minimized-balance-color: var(--secondary-text-color);
+    --account-center-minimized-chain-select-background: var(
+      --accent-color-hover
+    );
+    --account-center-maximized-info-section-background: var(--background-color);
+    --account-center-maximized-network-section-background: var(
+      --accent-background
+    );
+    --account-center-maximized-upper-background: var(
+      --secondary-accent-background
+    );
+    --account-center-maximized-address-color: var(--background-color);
+    --account-center-maximized-account-section-background-hover: var(
+      --text-color
+    );
+    --account-center-maximized-balance-color: var(--border-color);
+    --account-center-maximized-upper-action-color: var(--accent-color);
+    --account-center-maximized-network-text-color: var(
+      --secondary-accent-background
+    );
+    --account-center-maximized-info-section-background-color: var(
+      --background-color
+    );
+    --account-center-maximized-app-name-color: var(
+      --secondary-accent-background
+    );
+    --account-center-maximized-app-info-color: var(
+      --secondary-accent-background
+    );
+    --account-center-app-btn-background: var(--secondary-accent-background);
+    --account-center-app-btn-text-color: var(--background-color);
+
+    --notify-onboard-background: var(--secondary-accent-background);
+    --notify-onboard-transaction-status: var(--accent-background);
+    --notify-onboard-address-hash-color: var(--accent-color-hover);
+    --notify-onboard-anchor-color: var(--accent-color);
+    --notify-onboard-timer-color: var(--secondary-text-color); */
+
+    /* 
+		NEEDS TARGET AS IT USES OPACITY: 
+		--account-center-maximized-upper-action-background-hover
+		NEEDS UPDATES FOR DIFFERNT STYLING, DOESNT FIT BASIC VARIABLES ABOVE:
+		Notify status icons, icon backgrounds and icon borders
+	*/
+  }
+  main {
+    height: 100%;
+  }
+  button {
+    width: 14rem;
+    margin: 8px;
+  }
+
+  .copy-styles-container {
+    display: flex;
+    flex-direction: row;
+    align-items: end;
+  }
+
+  .copy-styles-textarea {
+    width: 30rem;
+    height: 16rem;
+    margin: 0 0 8px;
+  }
+
+  .control-panel {
+    z-index: 9999;
+    left: 0;
+    right: auto;
+    top: auto;
+    bottom: auto;
+    position: fixed;
+    overflow: hidden;
+    background-color: black;
+    width: 480px;
+    margin: auto;
+  }
+
+  .theming-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    width: 100%;
+  }
+
+  .theming-inputs-wrapper {
+    display: flex;
+    align-items: center;
+    width: 24rem;
+  }
+  .theming-inputs {
+    display: inline-flex;
+    overflow: hidden;
+    width: 2em;
+    height: 2em;
+    border-radius: 50%;
+    box-shadow: 1px 1px 3px 0px grey;
+    margin: 0.4em;
+  }
+  input[type='color'] {
+    padding: 0;
+    width: 150%;
+    height: 150%;
+    margin: -25%;
+  }
+  iframe {
+    height: 450px;
+    width: 100%;
+    resize: both;
+    overflow: auto;
+    margin: 8px 0px;
+  }
+  #image_drop_area {
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-size: cover;
+    box-sizing: border-box;
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+  }
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 34px;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: '';
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 50%;
+  }
+
+  input:checked + .slider {
+    background-color: #929bed;
+  }
+
+  input:checked + .slider {
+    box-shadow: 0 0 1px #929bed;
+  }
+
+  input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+  }
+
+  .backdrop-toggle {
+    display: flex;
+    align-items: center;
+    margin: 8px 8px 16px 4px;
+  }
+
+  .backdrop-toggle > label {
+    margin-right: 8px;
+  }
+</style>
\ No newline at end of file
diff --git a/docs/src/routes/__layout-kit-docs.svelte b/docs/src/routes/__layout-kit-docs.svelte
index 0df338da2..1a31f5672 100644
--- a/docs/src/routes/__layout-kit-docs.svelte
+++ b/docs/src/routes/__layout-kit-docs.svelte
@@ -6,7 +6,8 @@
       '/': '/',
       '/docs': '/docs',
       '/faq': '/faq',
-      '/examples': '/examples'
+      '/examples': '/examples',
+      '/theming': '/theming'
     }
   })
 </script>
diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
new file mode 100644
index 000000000..505d1f86b
--- /dev/null
+++ b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
@@ -0,0 +1,7 @@
+<script>
+    import { ThemeCustomizer } from '$lib/components'
+</script>
+
+# Theming Customizer
+
+<ThemeCustomizer />
\ No newline at end of file
diff --git a/docs/src/routes/theming/__layout@homepage.svelte b/docs/src/routes/theming/__layout@homepage.svelte
new file mode 100644
index 000000000..de0058d5e
--- /dev/null
+++ b/docs/src/routes/theming/__layout@homepage.svelte
@@ -0,0 +1,3 @@
+<!-- This layout inherits from `routes/__layout-kit-docs.svelte` -->
+<!-- Learn more: https://kit.svelte.dev/docs/layouts#named-layouts-inheritance-chains -->
+<slot />
diff --git a/docs/src/routes/theming/index.md b/docs/src/routes/theming/index.md
new file mode 100644
index 000000000..505d1f86b
--- /dev/null
+++ b/docs/src/routes/theming/index.md
@@ -0,0 +1,7 @@
+<script>
+    import { ThemeCustomizer } from '$lib/components'
+</script>
+
+# Theming Customizer
+
+<ThemeCustomizer />
\ No newline at end of file

From 6a7bc503257a1fafff6746f99545224f4a92e865 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Wed, 14 Sep 2022 16:25:42 -0600
Subject: [PATCH 05/16] Refine vars

---
 .../examples/ThemeCustomizer.svelte           | 45 +------------------
 1 file changed, 1 insertion(+), 44 deletions(-)

diff --git a/docs/src/lib/components/examples/ThemeCustomizer.svelte b/docs/src/lib/components/examples/ThemeCustomizer.svelte
index c14c16a71..a0e89440b 100644
--- a/docs/src/lib/components/examples/ThemeCustomizer.svelte
+++ b/docs/src/lib/components/examples/ThemeCustomizer.svelte
@@ -50,7 +50,6 @@
     '--accent-color': '#929bed',
     '--accent-color-hover': '#eff1fc',
     '--secondary-text-color': '#707481',
-    '--secondary-accent-background': '#242835'
   }
 
   const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
@@ -65,49 +64,7 @@
   --onboard-wallet-button-background: var(--background-color);
   --onboard-wallet-button-background-hover: var(--accent-color-hover);
   --onboard-wallet-button-border-color: var(--border-color);
-  --onboard-wallet-app-icon-border-color: var(--border-color);
-
-  --account-center-minimized-background: var(--background-color);
-  --account-center-minimized-address-color: var(--text-color);
-  --account-center-minimized-balance-color: var(--secondary-text-color);
-  --account-center-minimized-chain-select-background: var(
-    --accent-color-hover
-  );
-  --account-center-maximized-info-section-background: var(
-    --background-color
-  );
-  --account-center-maximized-network-section-background: var(
-    --accent-background
-  );
-  --account-center-maximized-upper-background: var(
-    --secondary-accent-background
-  );
-  --account-center-maximized-address-color: var(--background-color);
-  --account-center-maximized-account-section-background-hover: var(
-    --text-color
-  );
-  --account-center-maximized-balance-color: var(--border-color);
-  --account-center-maximized-upper-action-color: var(--accent-color);
-  --account-center-maximized-network-text-color: var(
-    --secondary-accent-background
-  );
-  --account-center-maximized-info-section-background-color: var(
-    --background-color
-  );
-  --account-center-maximized-app-name-color: var(
-    --secondary-accent-background
-  );
-  --account-center-maximized-app-info-color: var(
-    --secondary-accent-background
-  );
-  --account-center-app-btn-background: var(--secondary-accent-background);
-  --account-center-app-btn-text-color: var(--background-color);
-
-  --notify-onboard-background: var(----secondary-accent-color);
-  --notify-onboard-transaction-status: var(--accent-background);
-  --notify-onboard-address-hash-color: var(--accent-color-hover);
-  --notify-onboard-anchor-color: var(--accent-color);
-  --notify-onboard-timer-color: var(--secondary-text-color);`
+  --onboard-wallet-app-icon-border-color: var(--border-color);`
 
   const styleToString = (style) => {
     return Object.keys(style).reduce((acc, key) => acc + key + ': ' + style[key] + '; \n  ', '')

From 8c182565d6bcd750d0403d0033a709b12f728aea Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Wed, 14 Sep 2022 16:34:48 -0600
Subject: [PATCH 06/16] Styling controls working

---
 .../examples/ThemeCustomizer.svelte           | 239 +++++-------------
 1 file changed, 70 insertions(+), 169 deletions(-)

diff --git a/docs/src/lib/components/examples/ThemeCustomizer.svelte b/docs/src/lib/components/examples/ThemeCustomizer.svelte
index a0e89440b..8a4ef7dc5 100644
--- a/docs/src/lib/components/examples/ThemeCustomizer.svelte
+++ b/docs/src/lib/components/examples/ThemeCustomizer.svelte
@@ -49,7 +49,7 @@
     '--accent-background': '#ebebed',
     '--accent-color': '#929bed',
     '--accent-color-hover': '#eff1fc',
-    '--secondary-text-color': '#707481',
+    '--secondary-text-color': '#707481'
   }
 
   const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
@@ -82,9 +82,6 @@
   let copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
 
   const updateThemes = (e, targetStyle) => {
-    const iframe = driver.findElements(webdriver.By.tagName("iframe"))[0];
-    // const iframe = document.getElementById('inlineFrameExample')
-    console.log(iframe)
     document.documentElement.style.setProperty(targetStyle, e.target.value)
 
     copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
@@ -96,15 +93,9 @@
     const iframe = document.getElementById('inlineFrameExample')
 
     if (!checked) {
-      document.documentElement.style.setProperty(
-        '--onboard-modal-backdrop',
-        'rgba(0, 0, 0, 0)'
-      )
+      document.documentElement.style.setProperty('--onboard-modal-backdrop', 'rgba(0, 0, 0, 0)')
     } else {
-      document.documentElement.style.setProperty(
-        '--onboard-modal-backdrop',
-        'rgba(0, 0, 0, 0.6)'
-      )
+      document.documentElement.style.setProperty('--onboard-modal-backdrop', 'rgba(0, 0, 0, 0.6)')
     }
   }
 
@@ -120,174 +111,85 @@
 
   let uploaded_image
   const handleImageDrop = () => {
-    // if (window.location !== window.parent.location) {
-      if (image_drop_area) {
-        // Event listener for dragging the image over the div
-        const connectButton = window.document.getElementById('connectBtn')
-        connectButton.style.visibility = 'hidden'
-        image_drop_area.addEventListener('dragover', (event) => {
-          event.stopPropagation()
-          event.preventDefault()
-          // Style the drag-and-drop as a "copy file" operation.
-          event.dataTransfer.dropEffect = 'copy'
-        })
-
-        // Event listener for dropping the image inside the div
-        image_drop_area.addEventListener('drop', (event) => {
-          const image_drop_area_direction = document.querySelector('#image_drop_area_direction')
-          document.body.style.padding = 0
-          image_drop_area_direction.style.display = 'none'
-          connectButton.click()
-          connectButton.style.display = 'none'
-          event.stopPropagation()
-          event.preventDefault()
-          let fileList = event.dataTransfer.files
-
-          readImage(fileList[0])
-        })
-      }
-    // }
+    if (image_drop_area) {
+      // Event listener for dragging the image over the div
+      const connectButton = window.document.getElementById('connectBtn')
+      connectButton.style.visibility = 'hidden'
+      image_drop_area.addEventListener('dragover', (event) => {
+        event.stopPropagation()
+        event.preventDefault()
+        // Style the drag-and-drop as a "copy file" operation.
+        event.dataTransfer.dropEffect = 'copy'
+      })
+
+      // Event listener for dropping the image inside the div
+      image_drop_area.addEventListener('drop', (event) => {
+        const image_drop_area_direction = document.querySelector('#image_drop_area_direction')
+        document.body.style.padding = 0
+        image_drop_area_direction.style.display = 'none'
+        connectButton.click()
+        connectButton.style.display = 'none'
+        event.stopPropagation()
+        event.preventDefault()
+        let fileList = event.dataTransfer.files
+
+        readImage(fileList[0])
+      })
+    }
   }
 
   onMount(async () => {
     handleImageDrop()
-    const sheet = document.createElement('style')
-    document.getElementById('#image_drop_area')?.append(sheet)
   })
-
 </script>
 
-
-
-<!-- <iframe
-src="https://melodic-sfogliatella-f45328.netlify.app/"
-title="The Themesnator - Theming for Web3Onboard"
-/> -->
-
 <main>
-    <div class="control-panel">
-      <label for="Theme">Click Color Circles to Set Theme: </label>
-      <div class="theming-container">
-        {#each Object.keys(defaultStyling) as target}
-          <div class="theming-inputs-wrapper">
-            <div class="theming-inputs">
-              <input
-                type="color"
-                name="Theme"
-                bind:value={defaultStyling[target]}
-                on:input={e => updateTheme(e, target)}
-              />
-            </div>
-            <span class="text" id="current-theme"
-              >{target} : {defaultStyling[target]}</span
-            >
+  <div class="control-panel">
+    <label for="Theme">Click Color Circles to Set Theme: </label>
+    <div class="theming-container">
+      {#each Object.keys(defaultStyling) as target}
+        <div class="theming-inputs-wrapper">
+          <div class="theming-inputs">
+            <input
+              type="color"
+              name="Theme"
+              bind:value={defaultStyling[target]}
+              on:input={(e) => updateThemes(e, target)}
+            />
           </div>
-        {/each}
-      </div>
-      <div class="backdrop-toggle">
-        <label class="switch">
-          <input
-            type="checkbox"
-            on:change={() => handleBackdrop()}
-            bind:checked
-          />
-          <span class="slider" />
-        </label>
-        Disabled Backdrop for Styling
-      </div>
-      <div class="copy-styles-container">
-        <textarea
-          readonly
-          bind:value={copyableStyles}
-          class="copy-styles-textarea"
-        />
-        <button on:click={async () => await copyStylingConfig()}>
-          Copy Styling Config
-        </button>
-      </div>
+          <span class="text" id="current-theme">{target} : {defaultStyling[target]}</span>
+        </div>
+      {/each}
     </div>
-    <div id="image_drop_area">
-      <p id="image_drop_area_direction">
-        Drag and drop a screen shot of your site to customize styling.
-        <br />
-        Click color circles above to change the theme.
-      </p>
-      <button on:click={() => onboard.connectWallet()} id="connectBtn"
-        >Connect Wallet</button
-      >
-      {#if uploaded_image}
-        <button on:click={() => onboard.connectWallet()}>Connect Wallet</button>
-        {#if $wallets$}
-          <div class="notify-chain-container">
-            <div class="notify-action-container">
-              <button
-                on:click={() =>
-                  onboard.state.actions.customNotification({
-                    type: 'hint',
-                    message: 'This is a custom DApp hint',
-                    autoDismiss: 0
-                  })}>Send Hint Notification</button
-              >
-              <button
-                on:click={() => {
-                  const { update, dismiss } =
-                    onboard.state.actions.customNotification({
-                      type: 'pending',
-                      message:
-                        'This is a custom DApp pending notification to use however you want',
-                      autoDismiss: 0
-                    })
-                  setTimeout(
-                    () =>
-                      update({
-                        eventCode: 'dbUpdateSuccess',
-                        message: 'Updated status for custom notification',
-                        type: 'success',
-                        autoDismiss: 0
-                      }),
-                    4000
-                  )
-                }}>Send Success Notification</button
-              >
-              <button
-                on:click={() =>
-                  onboard.state.actions.customNotification({
-                    message:
-                      'This is a custom DApp success notification to use however you want',
-                    autoDismiss: 0,
-                    type: 'pending'
-                  })}>Send Pending Notification</button
-              >
-              <button
-                on:click={() =>
-                  onboard.state.actions.customNotification({
-                    type: 'error',
-                    message:
-                      'This is a custom DApp Error notification to use however you want',
-                    autoDismiss: 0
-                  })}>Send Error Notification</button
-              >
-              <button
-                on:click={() =>
-                  onboard.state.actions.customNotification({
-                    message:
-                      'This is a custom non-descript DApp notification to use however you want',
-                    autoDismiss: 0
-                  })}>Send DApp Notification</button
-              >
-            </div>
-          </div>
-        {/if}
-      {/if}
+    <div class="backdrop-toggle">
+      <label class="switch">
+        <input type="checkbox" on:change={() => handleBackdrop()} bind:checked />
+        <span class="slider" />
+      </label>
+      Disabled Backdrop for Styling
     </div>
+    <div class="copy-styles-container">
+      <textarea readonly bind:value={copyableStyles} class="copy-styles-textarea" />
+      <button on:click={async () => await copyStylingConfig()}> Copy Styling Config </button>
+    </div>
+  </div>
+  <div id="image_drop_area">
+    <p id="image_drop_area_direction">
+      Drag and drop a screen shot of your site to customize styling.
+      <br />
+      Click color circles above to change the theme.
+    </p>
+    <button on:click={() => onboard.connectWallet()} id="connectBtn">Connect Wallet</button>
+  </div>
 </main>
+
 <style>
   :root {
     --kd-main-max-width: 100%;
     --kd-article-max-width: 100%;
   }
   /* iframe { width: 100%; height: 62.5rem;} */
-:root {
+  :root {
     --background-color: #ffffff; /* --white */
     --text-color: #1a1d26; /* --gray-700 */
     --border-color: #ebebed; /* --gray-100 taken from future mock */
@@ -307,9 +209,7 @@ title="The Themesnator - Theming for Web3Onboard"
     --onboard-connect-sidebar-progress-background: var(
       --secondary-text-color
     ); /* defaults to gray-200 */
-    --onboard-connect-sidebar-progress-color: var(
-      --accent-color
-    ); /* defaults to  primary-600 */
+    --onboard-connect-sidebar-progress-color: var(--accent-color); /* defaults to  primary-600 */
     --onboard-connect-header-background: var(--background-color);
     --onboard-connect-header-color: var(--text-color);
     --onboard-main-scroll-container-background: var(--background-color);
@@ -320,7 +220,7 @@ title="The Themesnator - Theming for Web3Onboard"
     --onboard-wallet-button-color: var(--text-color);
     --onboard-wallet-button-border-color: var(--border-color);
     --onboard-wallet-app-icon-border-color: var(--border-color);
-/* 
+    /* 
     --account-center-minimized-background: var(--background-color);
     --account-center-minimized-address-color: var(--text-color);
     --account-center-minimized-balance-color: var(--secondary-text-color);
@@ -437,8 +337,9 @@ title="The Themesnator - Theming for Web3Onboard"
     margin: 8px 0px;
   }
   #image_drop_area {
-    width: 100%;
-    height: 100%;
+    width: 62%;
+    height: 80%;
+    margin: auto;
     background-position: center;
     background-size: cover;
     box-sizing: border-box;
@@ -506,4 +407,4 @@ title="The Themesnator - Theming for Web3Onboard"
   .backdrop-toggle > label {
     margin-right: 8px;
   }
-</style>
\ No newline at end of file
+</style>

From d12b2e3932a68fb14a8f917126dd52e9fd0e79e3 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Wed, 14 Sep 2022 16:38:36 -0600
Subject: [PATCH 07/16] Controls working and styled image container

---
 .../examples/ThemeCustomizer.svelte           | 78 +++++--------------
 1 file changed, 19 insertions(+), 59 deletions(-)

diff --git a/docs/src/lib/components/examples/ThemeCustomizer.svelte b/docs/src/lib/components/examples/ThemeCustomizer.svelte
index 8a4ef7dc5..c37123dce 100644
--- a/docs/src/lib/components/examples/ThemeCustomizer.svelte
+++ b/docs/src/lib/components/examples/ThemeCustomizer.svelte
@@ -173,13 +173,18 @@
       <button on:click={async () => await copyStylingConfig()}> Copy Styling Config </button>
     </div>
   </div>
-  <div id="image_drop_area">
-    <p id="image_drop_area_direction">
-      Drag and drop a screen shot of your site to customize styling.
-      <br />
-      Click color circles above to change the theme.
-    </p>
-    <button on:click={() => onboard.connectWallet()} id="connectBtn">Connect Wallet</button>
+  <div class="image-drop-container">
+    <div id="image_drop_area">
+      <p id="image_drop_area_direction">
+        Drag and drop a screen shot of your site to customize styling.
+        <br />
+        Click color circles above to change the theme.
+      </p>
+      {#if uploaded_image}
+        <button on:click={() => onboard.connectWallet()}>Connect Wallet</button>
+      {/if}
+      <button on:click={() => onboard.connectWallet()} id="connectBtn">Connect Wallet</button>
+    </div>
   </div>
 </main>
 
@@ -220,53 +225,6 @@
     --onboard-wallet-button-color: var(--text-color);
     --onboard-wallet-button-border-color: var(--border-color);
     --onboard-wallet-app-icon-border-color: var(--border-color);
-    /* 
-    --account-center-minimized-background: var(--background-color);
-    --account-center-minimized-address-color: var(--text-color);
-    --account-center-minimized-balance-color: var(--secondary-text-color);
-    --account-center-minimized-chain-select-background: var(
-      --accent-color-hover
-    );
-    --account-center-maximized-info-section-background: var(--background-color);
-    --account-center-maximized-network-section-background: var(
-      --accent-background
-    );
-    --account-center-maximized-upper-background: var(
-      --secondary-accent-background
-    );
-    --account-center-maximized-address-color: var(--background-color);
-    --account-center-maximized-account-section-background-hover: var(
-      --text-color
-    );
-    --account-center-maximized-balance-color: var(--border-color);
-    --account-center-maximized-upper-action-color: var(--accent-color);
-    --account-center-maximized-network-text-color: var(
-      --secondary-accent-background
-    );
-    --account-center-maximized-info-section-background-color: var(
-      --background-color
-    );
-    --account-center-maximized-app-name-color: var(
-      --secondary-accent-background
-    );
-    --account-center-maximized-app-info-color: var(
-      --secondary-accent-background
-    );
-    --account-center-app-btn-background: var(--secondary-accent-background);
-    --account-center-app-btn-text-color: var(--background-color);
-
-    --notify-onboard-background: var(--secondary-accent-background);
-    --notify-onboard-transaction-status: var(--accent-background);
-    --notify-onboard-address-hash-color: var(--accent-color-hover);
-    --notify-onboard-anchor-color: var(--accent-color);
-    --notify-onboard-timer-color: var(--secondary-text-color); */
-
-    /* 
-		NEEDS TARGET AS IT USES OPACITY: 
-		--account-center-maximized-upper-action-background-hover
-		NEEDS UPDATES FOR DIFFERNT STYLING, DOESNT FIT BASIC VARIABLES ABOVE:
-		Notify status icons, icon backgrounds and icon borders
-	*/
   }
   main {
     height: 100%;
@@ -329,12 +287,12 @@
     height: 150%;
     margin: -25%;
   }
-  iframe {
-    height: 450px;
+  .image-drop-container {
+    height: 100%;
     width: 100%;
-    resize: both;
-    overflow: auto;
-    margin: 8px 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
   #image_drop_area {
     width: 62%;
@@ -343,6 +301,8 @@
     background-position: center;
     background-size: cover;
     box-sizing: border-box;
+    border: 1px solid grey;
+    border-radius: 12px;
   }
 
   .switch {

From d4756ed1f6cd4429c5febf04d7934576e8dd1d5a Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 14 Sep 2022 20:04:48 -0400
Subject: [PATCH 08/16] style theming control panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💥
---
 .../examples/ThemeCustomizer.svelte           | 106 ++++++++++--------
 1 file changed, 58 insertions(+), 48 deletions(-)

diff --git a/docs/src/lib/components/examples/ThemeCustomizer.svelte b/docs/src/lib/components/examples/ThemeCustomizer.svelte
index c37123dce..ff53a67ef 100644
--- a/docs/src/lib/components/examples/ThemeCustomizer.svelte
+++ b/docs/src/lib/components/examples/ThemeCustomizer.svelte
@@ -143,9 +143,10 @@
   })
 </script>
 
-<main>
+<section>
   <div class="control-panel">
     <label for="Theme">Click Color Circles to Set Theme: </label>
+    <hr>
     <div class="theming-container">
       {#each Object.keys(defaultStyling) as target}
         <div class="theming-inputs-wrapper">
@@ -161,6 +162,11 @@
         </div>
       {/each}
     </div>
+    <div class="copy-styles-container">
+      <textarea readonly bind:value={copyableStyles} rows="10" class="copy-styles-textarea" />
+      <button on:click={async () => await copyStylingConfig()}> Copy Styling Config </button>
+    </div>
+    <hr>
     <div class="backdrop-toggle">
       <label class="switch">
         <input type="checkbox" on:change={() => handleBackdrop()} bind:checked />
@@ -168,10 +174,6 @@
       </label>
       Disabled Backdrop for Styling
     </div>
-    <div class="copy-styles-container">
-      <textarea readonly bind:value={copyableStyles} class="copy-styles-textarea" />
-      <button on:click={async () => await copyStylingConfig()}> Copy Styling Config </button>
-    </div>
   </div>
   <div class="image-drop-container">
     <div id="image_drop_area">
@@ -186,13 +188,9 @@
       <button on:click={() => onboard.connectWallet()} id="connectBtn">Connect Wallet</button>
     </div>
   </div>
-</main>
+</section>
 
 <style>
-  :root {
-    --kd-main-max-width: 100%;
-    --kd-article-max-width: 100%;
-  }
   /* iframe { width: 100%; height: 62.5rem;} */
   :root {
     --background-color: #ffffff; /* --white */
@@ -226,66 +224,82 @@
     --onboard-wallet-button-border-color: var(--border-color);
     --onboard-wallet-app-icon-border-color: var(--border-color);
   }
-  main {
-    height: 100%;
-  }
-  button {
-    width: 14rem;
-    margin: 8px;
-  }
 
-  .copy-styles-container {
-    display: flex;
-    flex-direction: row;
-    align-items: end;
+  button {
+    color: var(--kd-color-gray-body);
+    background: var(--kd-color-gray-inverse);
+    padding: 1rem;
   }
 
-  .copy-styles-textarea {
-    width: 30rem;
-    height: 16rem;
-    margin: 0 0 8px;
+  hr {
+    border-color: var(--kd-color-gray-soft);
   }
 
   .control-panel {
     z-index: 9999;
-    left: 0;
-    right: auto;
-    top: auto;
-    bottom: auto;
+    left: auto;
+    right: 0;
+    /* top: 10rem; */
+    bottom: 0;
     position: fixed;
     overflow: hidden;
-    background-color: black;
-    width: 480px;
-    margin: auto;
+    width: 420px;
+    margin: 1rem;
+    padding: 1rem;
+    color: var(--kd-color-gray-inverse);
+    background-color: var(--kd-color-gray-divider);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+    display: flex;
+    flex-flow: column;
+    gap: 1rem;
+  }
+
+  .copy-styles-container {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: stretch;
+    gap: inherit;
+  }
+
+  .copy-styles-textarea {
+    padding: 1rem;
+    color: var(--kd-color-gray-inverse);
+    background: rgba(0, 0, 0, 0.2);
   }
 
   .theming-container {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    width: 100%;
+    flex-direction: column;
   }
 
   .theming-inputs-wrapper {
     display: flex;
     align-items: center;
-    width: 24rem;
   }
   .theming-inputs {
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
     overflow: hidden;
     width: 2em;
     height: 2em;
-    border-radius: 50%;
-    box-shadow: 1px 1px 3px 0px grey;
-    margin: 0.4em;
+    margin: 0.5em;
   }
   input[type='color'] {
+    width: inherit;
+    height: inherit;
+    background: none;
+  }
+  input[type='color']::-webkit-color-swatch-wrapper {
     padding: 0;
-    width: 150%;
-    height: 150%;
-    margin: -25%;
+    background: none;
+  }
+  input[type='color']::-webkit-color-swatch {
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
   }
   .image-drop-container {
     height: 100%;
@@ -361,10 +375,6 @@
   .backdrop-toggle {
     display: flex;
     align-items: center;
-    margin: 8px 8px 16px 4px;
-  }
-
-  .backdrop-toggle > label {
-    margin-right: 8px;
+    gap: 1rem;
   }
 </style>

From 5a7d16289b0055832cff8149fb0ad342abef0ab8 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Wed, 14 Sep 2022 21:34:03 -0600
Subject: [PATCH 09/16] Fix layout and file locations

---
 .../{examples => }/ThemeCustomizer.svelte     | 28 ++++++++-----------
 docs/src/lib/components/examples/index.ts     |  1 -
 docs/src/lib/components/index.ts              |  1 +
 docs/src/routes/examples/theming.md           |  7 -----
 4 files changed, 13 insertions(+), 24 deletions(-)
 rename docs/src/lib/components/{examples => }/ThemeCustomizer.svelte (95%)
 delete mode 100644 docs/src/routes/examples/theming.md

diff --git a/docs/src/lib/components/examples/ThemeCustomizer.svelte b/docs/src/lib/components/ThemeCustomizer.svelte
similarity index 95%
rename from docs/src/lib/components/examples/ThemeCustomizer.svelte
rename to docs/src/lib/components/ThemeCustomizer.svelte
index ff53a67ef..eff8c5981 100644
--- a/docs/src/lib/components/examples/ThemeCustomizer.svelte
+++ b/docs/src/lib/components/ThemeCustomizer.svelte
@@ -90,8 +90,6 @@
   let checked = false
 
   const handleBackdrop = () => {
-    const iframe = document.getElementById('inlineFrameExample')
-
     if (!checked) {
       document.documentElement.style.setProperty('--onboard-modal-backdrop', 'rgba(0, 0, 0, 0)')
     } else {
@@ -99,22 +97,21 @@
     }
   }
 
+  let uploaded_image
   // Converts the image into a data URI
   const readImage = (file) => {
     const reader = new FileReader()
     reader.addEventListener('load', (event) => {
-      uploaded_image = event.target.result
+      uploaded_image = event?.target?.result
       document.querySelector('#image_drop_area').style.backgroundImage = `url(${uploaded_image})`
     })
     reader.readAsDataURL(file)
   }
 
-  let uploaded_image
   const handleImageDrop = () => {
+    const image_drop_area = document.querySelector('#image_drop_area')
     if (image_drop_area) {
       // Event listener for dragging the image over the div
-      const connectButton = window.document.getElementById('connectBtn')
-      connectButton.style.visibility = 'hidden'
       image_drop_area.addEventListener('dragover', (event) => {
         event.stopPropagation()
         event.preventDefault()
@@ -125,10 +122,9 @@
       // Event listener for dropping the image inside the div
       image_drop_area.addEventListener('drop', (event) => {
         const image_drop_area_direction = document.querySelector('#image_drop_area_direction')
-        document.body.style.padding = 0
+        // document.body.style.padding = 0
         image_drop_area_direction.style.display = 'none'
-        connectButton.click()
-        connectButton.style.display = 'none'
+        onboard.connectWallet()
         event.stopPropagation()
         event.preventDefault()
         let fileList = event.dataTransfer.files
@@ -185,7 +181,6 @@
       {#if uploaded_image}
         <button on:click={() => onboard.connectWallet()}>Connect Wallet</button>
       {/if}
-      <button on:click={() => onboard.connectWallet()} id="connectBtn">Connect Wallet</button>
     </div>
   </div>
 </section>
@@ -225,6 +220,10 @@
     --onboard-wallet-app-icon-border-color: var(--border-color);
   }
 
+  section {
+    height: 100%;
+    width: 100%;
+  }
   button {
     color: var(--kd-color-gray-body);
     background: var(--kd-color-gray-inverse);
@@ -239,18 +238,16 @@
     z-index: 9999;
     left: auto;
     right: 0;
-    /* top: 10rem; */
     bottom: 0;
     position: fixed;
     overflow: hidden;
-    width: 420px;
+    width: 360px;
     margin: 1rem;
     padding: 1rem;
     color: var(--kd-color-gray-inverse);
     background-color: var(--kd-color-gray-divider);
     border: 1px solid rgba(0, 0, 0, 0.05);
     box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-
     display: flex;
     flex-flow: column;
     gap: 1rem;
@@ -282,7 +279,6 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-
     overflow: hidden;
     width: 2em;
     height: 2em;
@@ -309,8 +305,8 @@
     align-items: center;
   }
   #image_drop_area {
-    width: 62%;
-    height: 80%;
+    width: 70%;
+    height: 90%;
     margin: auto;
     background-position: center;
     background-size: cover;
diff --git a/docs/src/lib/components/examples/index.ts b/docs/src/lib/components/examples/index.ts
index 2304a8b0d..d7e8d00f2 100644
--- a/docs/src/lib/components/examples/index.ts
+++ b/docs/src/lib/components/examples/index.ts
@@ -1,4 +1,3 @@
 export { default as ConnectWallet } from './ConnectWallet.svelte'
-export { default as ThemeCustomizer } from './ThemeCustomizer.svelte'
 export { default as ReactConnectWallet } from './ReactConnectWallet.md'
 export { default as SvelteConnectWallet } from './SvelteConnectWallet.md'
\ No newline at end of file
diff --git a/docs/src/lib/components/index.ts b/docs/src/lib/components/index.ts
index 4bd9babec..6fa4e9b35 100644
--- a/docs/src/lib/components/index.ts
+++ b/docs/src/lib/components/index.ts
@@ -1,2 +1,3 @@
 export * from './examples'
 export { default as NavBar } from './NavBar.svelte'
+export { default as ThemeCustomizer } from './ThemeCustomizer.svelte'
diff --git a/docs/src/routes/examples/theming.md b/docs/src/routes/examples/theming.md
deleted file mode 100644
index 505d1f86b..000000000
--- a/docs/src/routes/examples/theming.md
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-    import { ThemeCustomizer } from '$lib/components'
-</script>
-
-# Theming Customizer
-
-<ThemeCustomizer />
\ No newline at end of file

From fe3fa8a5e861fea8e6461badd1a114405ea2d982 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Thu, 15 Sep 2022 12:03:01 -0600
Subject: [PATCH 10/16] Iframe working with input, new layout

---
 .../src/lib/components/ThemeCustomizer.svelte | 115 +++++++++++++++---
 docs/src/routes/theming/index.md              |   3 -
 2 files changed, 96 insertions(+), 22 deletions(-)

diff --git a/docs/src/lib/components/ThemeCustomizer.svelte b/docs/src/lib/components/ThemeCustomizer.svelte
index eff8c5981..1b285afbe 100644
--- a/docs/src/lib/components/ThemeCustomizer.svelte
+++ b/docs/src/lib/components/ThemeCustomizer.svelte
@@ -42,6 +42,38 @@
   // Subscribe to wallet updates
   const wallets$ = onboard.state.select('wallets').pipe(share())
 
+  let webURL = ''
+  let iframeUsed = false
+  let hideDirections = false
+
+  const isValidUrl = (urlString) => {
+    try {
+      return Boolean(new URL(urlString))
+    } catch (e) {
+      return false
+    }
+  }
+
+  const addURLToIFrame = () => {
+    if (!webURL || !isValidUrl(webURL)) {
+      alert('Invaled URL entered')
+      return
+    }
+    iframeUsed = true
+    document.querySelector('#iframe_underlay').setAttribute('src', webURL)
+    hideDirections = true
+    onboard.connectWallet()
+  }
+
+  const resetPage = () => {
+    iframeUsed = false
+    document.querySelector('#iframe_underlay').setAttribute('src', '')
+    hideDirections = false
+    document.querySelector('#image_drop_area').style.backgroundImage = ''
+    uploaded_image = undefined
+    webURL = ''
+  }
+
   const defaultStyling = {
     '--background-color': '#ffffff',
     '--text-color': '#1a1d26',
@@ -111,19 +143,14 @@
   const handleImageDrop = () => {
     const image_drop_area = document.querySelector('#image_drop_area')
     if (image_drop_area) {
-      // Event listener for dragging the image over the div
       image_drop_area.addEventListener('dragover', (event) => {
         event.stopPropagation()
         event.preventDefault()
-        // Style the drag-and-drop as a "copy file" operation.
         event.dataTransfer.dropEffect = 'copy'
       })
 
-      // Event listener for dropping the image inside the div
       image_drop_area.addEventListener('drop', (event) => {
-        const image_drop_area_direction = document.querySelector('#image_drop_area_direction')
-        // document.body.style.padding = 0
-        image_drop_area_direction.style.display = 'none'
+        hideDirections = true
         onboard.connectWallet()
         event.stopPropagation()
         event.preventDefault()
@@ -142,7 +169,7 @@
 <section>
   <div class="control-panel">
     <label for="Theme">Click Color Circles to Set Theme: </label>
-    <hr>
+    <hr />
     <div class="theming-container">
       {#each Object.keys(defaultStyling) as target}
         <div class="theming-inputs-wrapper">
@@ -162,7 +189,7 @@
       <textarea readonly bind:value={copyableStyles} rows="10" class="copy-styles-textarea" />
       <button on:click={async () => await copyStylingConfig()}> Copy Styling Config </button>
     </div>
-    <hr>
+    <hr />
     <div class="backdrop-toggle">
       <label class="switch">
         <input type="checkbox" on:change={() => handleBackdrop()} bind:checked />
@@ -172,15 +199,35 @@
     </div>
   </div>
   <div class="image-drop-container">
-    <div id="image_drop_area">
-      <p id="image_drop_area_direction">
-        Drag and drop a screen shot of your site to customize styling.
-        <br />
-        Click color circles above to change the theme.
-      </p>
-      {#if uploaded_image}
-        <button on:click={() => onboard.connectWallet()}>Connect Wallet</button>
-      {/if}
+    <div class="id" style={'height: 100%; width: 70%;'}>
+
+      <button on:click={resetPage} class="reset-btn" style={(iframeUsed || uploaded_image) ? 'visibility : visible' : 'visibility: hidden'}> Reset </button>
+      <div id="image_drop_area">
+        <section
+          style={hideDirections ? 'display: none; border: none;' : 'display: block'}
+          class="drop-area-controls"
+        >
+          <p>
+            Drag and drop a screen shot of your site to customize styling or enter your website
+            below...
+          </p>
+          <div>
+            <input
+              type="text"
+              class="iframe-input"
+              placeholder="Enter your Website URL"
+              bind:value={webURL}
+            />
+            <button on:click={addURLToIFrame} class="iframe-btn"> View With Your Website </button>
+          </div>
+          <p>Then click color circles above to change the theme.</p>
+        </section>
+        <iframe
+          id="iframe_underlay"
+          title="iframe area for testing W3O with your app"
+          class={iframeUsed ? 'iframe-visible' : 'iframe-hidden'}
+        />
+      </div>
     </div>
   </div>
 </section>
@@ -284,6 +331,21 @@
     height: 2em;
     margin: 0.5em;
   }
+  .iframe-input {
+    width: 28rem;
+    padding: 0.5rem;
+    margin: 16px 0px;
+  }
+
+  .iframe-btn {
+    padding: 0.5rem;
+  }
+
+  .reset-btn {
+    width: 8rem;
+    padding: 0.75rem;
+    margin: 8px 0;
+  }
   input[type='color'] {
     width: inherit;
     height: inherit;
@@ -305,9 +367,8 @@
     align-items: center;
   }
   #image_drop_area {
-    width: 70%;
+    width: 100%;
     height: 90%;
-    margin: auto;
     background-position: center;
     background-size: cover;
     box-sizing: border-box;
@@ -315,6 +376,22 @@
     border-radius: 12px;
   }
 
+  .drop-area-controls {
+    padding: 12px;
+  }
+  .drop-area-controls p {
+    font-size: 1.2rem;
+  }
+
+  .iframe-visible {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .iframe-hidden {
+    display: none;
+  }
+
   .switch {
     position: relative;
     display: inline-block;
diff --git a/docs/src/routes/theming/index.md b/docs/src/routes/theming/index.md
index 505d1f86b..86689637f 100644
--- a/docs/src/routes/theming/index.md
+++ b/docs/src/routes/theming/index.md
@@ -1,7 +1,4 @@
 <script>
     import { ThemeCustomizer } from '$lib/components'
 </script>
-
-# Theming Customizer
-
 <ThemeCustomizer />
\ No newline at end of file

From 39f07fc51a842cf599f7a4949d81af101613379b Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Thu, 15 Sep 2022 17:00:29 -0400
Subject: [PATCH 11/16] Style new controls

- style and move url controls around
- add connect button
- other design tweaks
---
 .../src/lib/components/ThemeCustomizer.svelte | 135 +++++++++++-------
 1 file changed, 83 insertions(+), 52 deletions(-)

diff --git a/docs/src/lib/components/ThemeCustomizer.svelte b/docs/src/lib/components/ThemeCustomizer.svelte
index 1b285afbe..3e6f76c52 100644
--- a/docs/src/lib/components/ThemeCustomizer.svelte
+++ b/docs/src/lib/components/ThemeCustomizer.svelte
@@ -199,34 +199,30 @@
     </div>
   </div>
   <div class="image-drop-container">
-    <div class="id" style={'height: 100%; width: 70%;'}>
-
-      <button on:click={resetPage} class="reset-btn" style={(iframeUsed || uploaded_image) ? 'visibility : visible' : 'visibility: hidden'}> Reset </button>
-      <div id="image_drop_area">
-        <section
-          style={hideDirections ? 'display: none; border: none;' : 'display: block'}
-          class="drop-area-controls"
-        >
-          <p>
-            Drag and drop a screen shot of your site to customize styling or enter your website
-            below...
-          </p>
-          <div>
-            <input
-              type="text"
-              class="iframe-input"
-              placeholder="Enter your Website URL"
-              bind:value={webURL}
-            />
-            <button on:click={addURLToIFrame} class="iframe-btn"> View With Your Website </button>
-          </div>
-          <p>Then click color circles above to change the theme.</p>
-        </section>
-        <iframe
-          id="iframe_underlay"
-          title="iframe area for testing W3O with your app"
-          class={iframeUsed ? 'iframe-visible' : 'iframe-hidden'}
-        />
+    <div id="image_drop_area">
+      <div class="drop-area-controls">
+        <div>Enter your website url or drag and drop a screenshot to preview web3-onboard on your site</div>
+        <!-- <div>Then click color circles above to change the theme.</div> -->
+        <div class="website-input-row">
+          <input
+            type="text"
+            class="iframe-input"
+            placeholder="Enter your Website URL"
+            bind:value={webURL}
+          />
+          <button on:click={addURLToIFrame}>Preview on your website</button>
+          <button on:click={resetPage} type="button" disabled={(iframeUsed || uploaded_image) ? false : true }>Reset</button>
+        </div>
+      </div>
+      <iframe
+        id="iframe_underlay"
+        title="iframe area for testing W3O with your app"
+        class={iframeUsed ? 'iframe-visible' : 'iframe-hidden'}
+      />
+      <div style:display={hideDirections ? 'none' : ''}>
+        <button on:click={() => onboard.connectWallet()} id="connectBtn">Connect Wallet</button>
+        <div>or</div>
+        <div>Drag and drop an image here to preview</div>
       </div>
     </div>
   </div>
@@ -268,14 +264,25 @@
   }
 
   section {
+    position: relative;
     height: 100%;
-    width: 100%;
+    padding: 1rem;
   }
+
   button {
     color: var(--kd-color-gray-body);
     background: var(--kd-color-gray-inverse);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     padding: 1rem;
   }
+  button:hover {
+    background: var(--kd-color-gray-hover-inverse);
+  }
+  button:disabled {
+    background: var(--kd-color-gray-inverse);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
   hr {
     border-color: var(--kd-color-gray-soft);
@@ -288,9 +295,12 @@
     bottom: 0;
     position: fixed;
     overflow: hidden;
+    overflow-y: scroll;
+    max-height: 100vh;
     width: 360px;
     margin: 1rem;
     padding: 1rem;
+    font-size: 14px;
     color: var(--kd-color-gray-inverse);
     background-color: var(--kd-color-gray-divider);
     border: 1px solid rgba(0, 0, 0, 0.05);
@@ -310,7 +320,8 @@
   .copy-styles-textarea {
     padding: 1rem;
     color: var(--kd-color-gray-inverse);
-    background: rgba(0, 0, 0, 0.2);
+    background: var(--kd-color-gray-hover);
+    border: 1px solid var(--kd-color-gray-soft);
   }
 
   .theming-container {
@@ -332,20 +343,13 @@
     margin: 0.5em;
   }
   .iframe-input {
-    width: 28rem;
-    padding: 0.5rem;
-    margin: 16px 0px;
-  }
-
-  .iframe-btn {
-    padding: 0.5rem;
+    flex: 1;
+    padding: 1rem;
+    color: var(--kd-color-gray-inverse);
+    background: var(--kd-color-gray-hover);
+    border: 1px solid var(--kd-color-gray-soft);
   }
 
-  .reset-btn {
-    width: 8rem;
-    padding: 0.75rem;
-    margin: 8px 0;
-  }
   input[type='color'] {
     width: inherit;
     height: inherit;
@@ -359,28 +363,55 @@
     border: 1px solid rgba(0, 0, 0, 0.5);
     border-radius: 50%;
   }
+
   .image-drop-container {
-    height: 100%;
-    width: 100%;
+    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
+
+    height: 100%;
+    max-width: 100%;
+    padding: 0.5rem;
+
+    border: 1px solid var(--kd-color-gray-soft);
+    border-style: dotted;
   }
+
   #image_drop_area {
     width: 100%;
-    height: 90%;
-    background-position: center;
-    background-size: cover;
+    height: 100%;
+    background: center no-repeat;
+    background-size: contain;
+    background-color: rgba(0,0,0, 0.25);
     box-sizing: border-box;
-    border: 1px solid grey;
-    border-radius: 12px;
+
+    display: flex;
+    flex-flow: column;
+    gap: 2rem;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
   }
 
   .drop-area-controls {
-    padding: 12px;
+    position: absolute;
+    top: 0;
+    padding: 1rem;
+    font-size: 14px;
+    color: var(--kd-color-gray-inverse);
+    background-color: var(--kd-color-gray-divider);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    display: flex;
+    flex-flow: column;
+    gap: 1rem;
   }
-  .drop-area-controls p {
-    font-size: 1.2rem;
+
+  .website-input-row {
+    display: flex;
+    flex-flow: row;
+    gap: 0.5rem;
   }
 
   .iframe-visible {

From 16667d52306a8ef7450f9a33827cd825de3fcea8 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Thu, 15 Sep 2022 15:24:14 -0600
Subject: [PATCH 12/16] added connect button to top controls

---
 .../src/lib/components/ThemeCustomizer.svelte |  25 +++-
 packages/demo/src/App.svelte                  | 141 ++++++++++--------
 2 files changed, 96 insertions(+), 70 deletions(-)

diff --git a/docs/src/lib/components/ThemeCustomizer.svelte b/docs/src/lib/components/ThemeCustomizer.svelte
index 3e6f76c52..c8cabbf29 100644
--- a/docs/src/lib/components/ThemeCustomizer.svelte
+++ b/docs/src/lib/components/ThemeCustomizer.svelte
@@ -74,6 +74,12 @@
     webURL = ''
   }
 
+  const handleConnectWalletBtn = () => {
+    !!$wallets$ && $wallets$.length
+      ? onboard.disconnectWallet({label: $wallets$[0].label})
+      : onboard.connectWallet()
+  }
+
   const defaultStyling = {
     '--background-color': '#ffffff',
     '--text-color': '#1a1d26',
@@ -201,7 +207,9 @@
   <div class="image-drop-container">
     <div id="image_drop_area">
       <div class="drop-area-controls">
-        <div>Enter your website url or drag and drop a screenshot to preview web3-onboard on your site</div>
+        <div>
+          Enter your website url or drag and drop a screenshot to preview web3-onboard on your site
+        </div>
         <!-- <div>Then click color circles above to change the theme.</div> -->
         <div class="website-input-row">
           <input
@@ -210,8 +218,15 @@
             placeholder="Enter your Website URL"
             bind:value={webURL}
           />
-          <button on:click={addURLToIFrame}>Preview on your website</button>
-          <button on:click={resetPage} type="button" disabled={(iframeUsed || uploaded_image) ? false : true }>Reset</button>
+          <button on:click={addURLToIFrame}>Preview On Your Website</button>
+          <button
+            on:click={resetPage}
+            type="button"
+            disabled={iframeUsed || !!uploaded_image ? false : true}>Reset</button
+          >
+          <button on:click={handleConnectWalletBtn} type="button"
+            >{!!$wallets$ && $wallets$.length ? 'Disconnect Wallet' : 'Connect Wallet'}</button
+          >
         </div>
       </div>
       <iframe
@@ -220,8 +235,6 @@
         class={iframeUsed ? 'iframe-visible' : 'iframe-hidden'}
       />
       <div style:display={hideDirections ? 'none' : ''}>
-        <button on:click={() => onboard.connectWallet()} id="connectBtn">Connect Wallet</button>
-        <div>or</div>
         <div>Drag and drop an image here to preview</div>
       </div>
     </div>
@@ -383,7 +396,7 @@
     height: 100%;
     background: center no-repeat;
     background-size: contain;
-    background-color: rgba(0,0,0, 0.25);
+    background-color: rgba(0, 0, 0, 0.25);
     box-sizing: border-box;
 
     display: flex;
diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
index c7b045ea4..029e0fa6b 100644
--- a/packages/demo/src/App.svelte
+++ b/packages/demo/src/App.svelte
@@ -41,6 +41,14 @@
   // Subscribe to wallet updates
   const wallets$ = onboard.state.select('wallets').pipe(share())
 
+  let webURL = ''
+  let iframeUsed = false
+
+  const addURLToIFrame = () => {
+    document.getElementById('iframe_underlay').setAttribute('src', webURL)
+    iframeUsed = true
+  }
+
   const defaultStyling = {
     '--background-color': '#ffffff',
     '--text-color': '#1a1d26',
@@ -48,7 +56,7 @@
     '--accent-background': '#ebebed',
     '--accent-color': '#929bed',
     '--accent-color-hover': '#eff1fc',
-    '--secondary-text-color': '#707481',
+    '--secondary-text-color': '#707481'
     // '--secondary-accent-background': '#242835'
   }
 
@@ -131,9 +139,8 @@
     reader.readAsDataURL(file)
   }
 
-  let hideForIframe = false
   let uploaded_image
-  const handleImageDrop = (dataFromDocument) => {
+  const handleImageDrop = dataFromDocument => {
     if (dataFromDocument) {
       if (image_drop_area) {
         // Event listener for dragging the image over the div
@@ -161,14 +168,14 @@
       }
     }
   }
-  const initIFrame = async (dataFromDocument) => {
+  const initIFrame = async dataFromDocument => {
     if (dataFromDocument) {
       return (hideForIframe = true)
     }
   }
 
   onMount(async () => {
-    var dataFromDocument = location.hash.replace(/#/, "");
+    var dataFromDocument = location.hash.replace(/#/, '')
     console.log(dataFromDocument)
     await initIFrame(dataFromDocument)
     handleImageDrop(dataFromDocument)
@@ -209,7 +216,7 @@
     --onboard-wallet-button-color: var(--text-color);
     --onboard-wallet-button-border-color: var(--border-color);
     --onboard-wallet-app-icon-border-color: var(--border-color);
-/* 
+    /* 
     --account-center-minimized-background: var(--background-color);
     --account-center-minimized-address-color: var(--text-color);
     --account-center-minimized-balance-color: var(--secondary-text-color);
@@ -315,14 +322,8 @@
     height: 150%;
     margin: -25%;
   }
-  iframe {
-    height: 450px;
-    width: 100%;
-    resize: both;
-    overflow: auto;
-    margin: 8px 0px;
-  }
-  #image_drop_area {
+  #image_drop_area,
+  #iframe_underlay {
     width: 100%;
     height: 100%;
     background-position: center;
@@ -395,13 +396,22 @@
 </style>
 
 <main>
-  {#if hideForIframe}
+  {#if !iframeUsed}
     <div id="image_drop_area">
       <p id="image_drop_area_direction">
-        Drag and drop a screen shot of your site to customize styling.
+        Drag and drop a screen shot of your site to customize styling origin....
         <br />
-        Click color circles above to change the theme.
       </p>
+      <div>
+        <input
+          type="text"
+          class="text-input"
+          placeholder="Enter your Website URL"
+          bind:value={webURL}
+        />
+        <button on:click={addURLToIFrame}> View With Your Website </button>
+      </div>
+      Click color circles above to change the theme.
       <!-- {#if uploaded_image}
         {#if $wallets$}
           <div class="notify-chain-container">
@@ -455,54 +465,57 @@
         {/if}
       {/if} -->
     </div>
+  {:else}
+    <iframe
+      id="iframe_underlay"
+      title="iframe area for testing W3O with your app"
+    />
   {/if}
-  {#if !hideForIframe}
-    <div class="themes">
-      <label for="Theme">Click Color Circles to Set Theme: </label>
-      <div class="theming-container">
-        {#each Object.keys(defaultStyling) as target}
-          <div class="theming-inputs-wrapper">
-            <div class="theming-inputs">
-              <input
-                type="color"
-                name="Theme"
-                bind:value={defaultStyling[target]}
-                on:input={e => updateTheme(e, target)}
-              />
-            </div>
-            <span class="text" id="current-theme"
-              >{target} : {defaultStyling[target]}</span
-            >
+  <div class="themes">
+    <label for="Theme">Click Color Circles to Set Theme: </label>
+    <div class="theming-container">
+      {#each Object.keys(defaultStyling) as target}
+        <div class="theming-inputs-wrapper">
+          <div class="theming-inputs">
+            <input
+              type="color"
+              name="Theme"
+              bind:value={defaultStyling[target]}
+              on:input={e => updateTheme(e, target)}
+            />
           </div>
-        {/each}
-      </div>
-      <div class="backdrop-toggle">
-        <label class="switch">
-          <input
-            type="checkbox"
-            on:change={() => handleBackdrop()}
-            bind:checked
-          />
-          <span class="slider" />
-        </label>
-        Disabled Backdrop for Styling
-      </div>
-      <div class="copy-styles-container">
-        <textarea
-          readonly
-          bind:value={copyableStyles}
-          class="copy-styles-textarea"
+          <span class="text" id="current-theme"
+            >{target} : {defaultStyling[target]}</span
+          >
+        </div>
+      {/each}
+    </div>
+    <div class="backdrop-toggle">
+      <label class="switch">
+        <input
+          type="checkbox"
+          on:change={() => handleBackdrop()}
+          bind:checked
         />
-        <button on:click={async () => await copyStylingConfig()}>
-          Copy Styling Config
-        </button>
-      </div>
+        <span class="slider" />
+      </label>
+      Disabled Backdrop for Styling
     </div>
-    <iframe
-      id="inlineFrameExample"
-      name="inlineFrameExample"
-      title="Inline Frame Example"
-      src={window.location.href + '#stylize'}
-    />
-  {/if}
-</main>
\ No newline at end of file
+    <div class="copy-styles-container">
+      <textarea
+        readonly
+        bind:value={copyableStyles}
+        class="copy-styles-textarea"
+      />
+      <button on:click={async () => await copyStylingConfig()}>
+        Copy Styling Config
+      </button>
+    </div>
+  </div>
+  <iframe
+    id="inlineFrameExample"
+    name="inlineFrameExample"
+    title="Inline Frame Example"
+    src={window.location.href + '#stylize'}
+  />
+</main>

From d6736e865e57897b95e7bfd4ca664975947e2bc1 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Fri, 16 Sep 2022 10:16:32 -0600
Subject: [PATCH 13/16] Add link to theming

---
 .../src/routes/docs/[...2]getting-started/[...2]theming.md | 7 -------
 docs/src/routes/docs/[...4]packages/core.md                | 5 +++++
 2 files changed, 5 insertions(+), 7 deletions(-)
 delete mode 100644 docs/src/routes/docs/[...2]getting-started/[...2]theming.md

diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
deleted file mode 100644
index 505d1f86b..000000000
--- a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-    import { ThemeCustomizer } from '$lib/components'
-</script>
-
-# Theming Customizer
-
-<ThemeCustomizer />
\ No newline at end of file
diff --git a/docs/src/routes/docs/[...4]packages/core.md b/docs/src/routes/docs/[...4]packages/core.md
index b7c0f7991..a317df5e2 100644
--- a/docs/src/routes/docs/[...4]packages/core.md
+++ b/docs/src/routes/docs/[...4]packages/core.md
@@ -964,6 +964,11 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --notify-onboard-main-padding
 }
 ```
+### Theming
+
+Interested in seeing what your site would look like with web3-onboard styled o fit your application?
+
+[Try out our theming tool](https://onboard.blocknative.com/theming) that not only allows you to drop a screenshot or enter your sites web address to see how web3-onboard looks on your site but also style web3-onboard and match your sites look and feel. You can then copy the theme configuration, add it to your site's main css file and you will have onboard themed specifically for your application.
 
 ## Build Environments
 

From 7fd17f45a1d67c5e492b9058c9c442ca7b027f18 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Fri, 16 Sep 2022 11:58:14 -0600
Subject: [PATCH 14/16] Add Icon to sidebar!!

---
 docs/src/lib/icons/LinkOutIcon.svelte    |   9 +
 docs/src/routes/__layout-kit-docs.svelte |  13 +
 packages/demo/src/App.svelte             | 911 ++++++++++++-----------
 3 files changed, 492 insertions(+), 441 deletions(-)
 create mode 100644 docs/src/lib/icons/LinkOutIcon.svelte

diff --git a/docs/src/lib/icons/LinkOutIcon.svelte b/docs/src/lib/icons/LinkOutIcon.svelte
new file mode 100644
index 000000000..b2c098c31
--- /dev/null
+++ b/docs/src/lib/icons/LinkOutIcon.svelte
@@ -0,0 +1,9 @@
+<script>
+  let linkOut = `<svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z" fill="currentColor"/>
+</svg>`
+</script>
+
+<div style="width: 24px; height: 24px;">
+  {@html linkOut}
+</div>
\ No newline at end of file
diff --git a/docs/src/routes/__layout-kit-docs.svelte b/docs/src/routes/__layout-kit-docs.svelte
index 1a31f5672..491f095f4 100644
--- a/docs/src/routes/__layout-kit-docs.svelte
+++ b/docs/src/routes/__layout-kit-docs.svelte
@@ -20,6 +20,8 @@
   import '$lib/styles/fonts.css'
   import '$lib/styles/kit-docs.css'
 
+  import LinkOutIcon from '$lib/icons/LinkOutIcon.svelte';
+
   import { page } from '$app/stores'
 
   import {
@@ -37,6 +39,17 @@
 
   /** @type {import('@svelteness/kit-docs').ResolvedSidebarConfig | null} */
   export let sidebar = null
+  const themingLink = {
+    slug: '/theming',
+    title: 'Theming',
+    icon: { after: LinkOutIcon }
+  }
+
+  const addThemingLinkToSideBar = () => {
+    sidebar?.links['Getting Started'].splice(1, 0, themingLink)
+  }
+
+  addThemingLinkToSideBar()
 
   /** @type {import('@svelteness/kit-docs').NavbarConfig} */
   const navbar = {
diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
index 029e0fa6b..8ecd45536 100644
--- a/packages/demo/src/App.svelte
+++ b/packages/demo/src/App.svelte
@@ -1,521 +1,550 @@
 <script>
   import Onboard from '@web3-onboard/core'
+  import fortmaticModule from '@web3-onboard/fortmatic'
+  import gnosisModule from '@web3-onboard/gnosis'
   import injectedModule from '@web3-onboard/injected-wallets'
+  import keepkeyModule from '@web3-onboard/keepkey'
+  import keystoneModule from '@web3-onboard/keystone'
+  import ledgerModule from '@web3-onboard/ledger'
+  import portisModule from '@web3-onboard/portis'
+  import torusModule from '@web3-onboard/torus'
+  import trezorModule from '@web3-onboard/trezor'
+  import walletConnectModule from '@web3-onboard/walletconnect'
+  import coinbaseModule from '@web3-onboard/coinbase'
+  import magicModule from '@web3-onboard/magic'
+  import web3authModule from '@web3-onboard/web3auth'
+
+  import dcentModule from '@web3-onboard/dcent'
+  import {
+    recoverAddress,
+    arrayify,
+    hashMessage,
+    verifyTypedData
+  } from 'ethers/lib/utils'
+  import { ethers } from 'ethers'
   import { share } from 'rxjs/operators'
-  import { onMount } from 'svelte'
+  import VConsole from 'vconsole'
+  import blocknativeIcon from './blocknative-icon'
+  import blocknativeLogo from './blocknative-logo'
 
-  const INFURA_ID = 'e0b15c21b7d54cd4814586334af72618'
-  const injected = injectedModule()
+  if (window.innerWidth < 700) {
+    new VConsole()
+  }
+
+  let defaultTransactionObject = JSON.stringify(
+    {
+      from: '0xD87927847330FC926afd2B66C478A42a004aB4e7',
+      to: '0xd0d6d6c5fe4a677d343cc433536bb717bae167dd',
+      value: '0xf4240',
+      data: '0xa',
+      chainId: 1,
+      nonce: '0x0',
+      maxFeePerGas: '0x14',
+      maxPriorityFeePerGas: '0x0',
+      gasLimit: '0x14'
+    },
+    undefined,
+    4
+  )
+
+  let transactionObject = defaultTransactionObject
+  let signMsg = 'Any string message'
+  let signTypedMsg
+
+  const injected = injectedModule({
+    custom: [
+      // include custom injected wallet modules here
+    ],
+    filter: {
+      // mapping of wallet label to filter here
+    }
+  })
+
+  const coinbaseWallet = coinbaseModule()
+
+  const walletConnect = walletConnectModule({
+    connectFirstChainId: true
+  })
+  const portis = portisModule({
+    apiKey: 'b2b7586f-2b1e-4c30-a7fb-c2d1533b153b'
+  })
+
+  const fortmatic = fortmaticModule({
+    apiKey: 'pk_test_886ADCAB855632AA'
+  })
+
+  const web3auth = web3authModule({
+    clientId:
+      'DJuUOKvmNnlzy6ruVgeWYWIMKLRyYtjYa9Y10VCeJzWZcygDlrYLyXsBQjpJ2hxlBO9dnl8t9GmAC2qOP5vnIGo'
+  })
+
+  const torus = torusModule()
+  const ledger = ledgerModule()
+  const keepkey = keepkeyModule()
+  const keystone = keystoneModule()
+  const gnosis = gnosisModule()
+
+  const trezorOptions = {
+    email: 'test@test.com',
+    appUrl: 'https://www.blocknative.com'
+  }
+  const trezor = trezorModule(trezorOptions)
+
+  const magic = magicModule({
+    apiKey: 'pk_live_02207D744E81C2BA'
+    // userEmail: 'test@test.com'
+    // userEmail is optional - if user has already logged in and/or session is still active a login modal will not appear
+    // for more info see the @web3-onboard/magic docs
+  })
+
+  const dcent = dcentModule()
 
   const onboard = Onboard({
-    wallets: [injected],
+    wallets: [
+      web3auth,
+      ledger,
+      trezor,
+      walletConnect,
+      keepkey,
+      keystone,
+      coinbaseWallet,
+      injected,
+      magic,
+      fortmatic,
+      portis,
+      torus,
+      gnosis,
+      dcent
+    ],
     chains: [
       {
         id: '0x1',
         token: 'ETH',
-        label: 'Ethereum Mainnet',
-        rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
+        label: 'Ethereum',
+        rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e'
       },
       {
-        id: '0x3',
+        id: 3,
         token: 'tROP',
-        label: 'Ethereum Ropsten Testnet',
-        rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
+        label: 'Ropsten',
+        rpcUrl: 'https://ropsten.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e'
+      },
+      {
+        id: 4,
+        token: 'rETH',
+        label: 'Rinkeby',
+        rpcUrl: 'https://rinkeby.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e'
+      },
+      {
+        id: 137,
+        token: 'MATIC',
+        label: 'Polygon',
+        rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
+      },
+      {
+        id: '0x13881',
+        token: 'MATIC',
+        label: 'Polygon - Mumbai',
+        rpcUrl: 'https://matic-mumbai.chainstacklabs.com	'
+      },
+      {
+        id: 10,
+        token: 'OETH',
+        label: 'Optimism',
+        rpcUrl: 'https://mainnet.optimism.io'
       }
     ],
     appMetadata: {
-      name: 'Documentation',
-      icon: '<svg></svg>',
-      description: 'Example showcasing how to connect a wallet.',
+      name: 'Blocknative',
+      icon: blocknativeIcon,
+      logo: blocknativeLogo,
+      description: 'Demo app for Onboard V2',
       recommendedInjectedWallets: [
         { name: 'MetaMask', url: 'https://metamask.io' },
         { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
-      ]
+      ],
+      agreement: {
+        version: '1.0.0',
+        termsUrl: 'https://www.blocknative.com/terms-conditions',
+        privacyUrl: 'https://www.blocknative.com/privacy-policy'
+      },
+      gettingStartedGuide: 'https://blocknative.com',
+      explore: 'https://blocknative.com'
     },
+    // // example customizing account center
     accountCenter: {
-      desktop: { enabled: false },
-      mobile: { enabled: false }
-    }
+      desktop: {
+        position: 'topRight',
+        enabled: true,
+        minimal: false
+      }
+    },
+    // example customizing copy
+    i18n: {
+      en: {
+        notify: {
+          watched: {
+            // "txConfirmed": "you paid a foo {formattedValue} {asset}!"
+          }
+        }
+      }
+    },
+    notify: {
+      desktop: {
+        enabled: true,
+        transactionHandler: transaction => {
+          console.log({ transaction })
+          //   if (transaction.eventCode === 'txConfirmed') {
+          //     return {
+          //       type: 'error',
+          //       message: 'Your in the pool, hope you brought a towel!',
+          //       autoDismiss: 0,
+          //       id: '123',
+          //       key: '321',
+          //       onClick: () =>
+          //         window.open(`https://rinkeby.etherscan.io/tx/${transaction.hash}`)
+          //     }
+          //   }
+          // if (transaction.eventCode === 'txPool') {
+          //   return {
+          //     type: 'hint',
+          //     message: 'Your in the pool, hope you brought a towel!',
+          //     autoDismiss: 0,
+          //     link: `https://ropsten.etherscan.io/tx/${transaction.hash}`
+          //   }
+          // }
+        },
+        position: 'topRight'
+      }
+    },
+    // Sign up for your free api key at www.Blocknative.com
+    apiKey: 'xxxxxx-bf21-42ec-a093-9d37e426xxxx'
   })
 
   // Subscribe to wallet updates
   const wallets$ = onboard.state.select('wallets').pipe(share())
 
-  let webURL = ''
-  let iframeUsed = false
+  const signTransactionMessage = async provider => {
+    const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
-  const addURLToIFrame = () => {
-    document.getElementById('iframe_underlay').setAttribute('src', webURL)
-    iframeUsed = true
-  }
+    const signer = ethersProvider.getSigner()
+
+    const signature = await signer.signTransaction({
+      to: '',
+      value: 100000000000000
+    })
 
-  const defaultStyling = {
-    '--background-color': '#ffffff',
-    '--text-color': '#1a1d26',
-    '--border-color': '#ebebed',
-    '--accent-background': '#ebebed',
-    '--accent-color': '#929bed',
-    '--accent-color-hover': '#eff1fc',
-    '--secondary-text-color': '#707481'
-    // '--secondary-accent-background': '#242835'
+    console.log(signature)
   }
 
-  const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
-  --onboard-close-button-background: var(--accent-background);
-  --onboard-connect-sidebar-color: var(--text-color);
-  --onboard-connect-sidebar-progress-background: var(--secondary-text-color);
-  --onboard-connect-sidebar-progress-color: var(--accent-color);
-  --onboard-connect-header-background: var(--background-color);
-  --onboard-connect-header-color: var(--text-color);
-  --onboard-main-scroll-container-background: var(--background-color);
-  --onboard-link-color: var(--accent-color);
-  --onboard-wallet-button-background: var(--background-color);
-  --onboard-wallet-button-background-hover: var(--accent-color-hover);
-  --onboard-wallet-button-border-color: var(--border-color);
-  --onboard-wallet-app-icon-border-color: var(--border-color);
-  --onboard-close-button-background: var(--accent-background);
-  --onboard-wallet-button-color-hover: var(--text-color);
-  --onboard-wallet-button-color: var(--text-color);`
-
-  const styleToString = style => {
-    return Object.keys(style).reduce(
-      (acc, key) => acc + key + ': ' + style[key] + '; \n  ',
-      ''
-    )
+  let toAddress
+  const sendTransaction = async provider => {
+    const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
+
+    const signer = ethersProvider.getSigner()
+
+    const txn = await signer.sendTransaction({
+      to: toAddress,
+      value: 100000000000000
+    })
+
+    const receipt = await txn.wait()
+    console.log(receipt)
   }
 
-  async function copyStylingConfig() {
-    try {
-      const copy = await navigator.clipboard.writeText(copyableStyles)
-      return copy
-    } catch (err) {
-      console.error('Failed to copy: ', err)
+  const sendTransactionWithPreFlight = async (provider, balance) => {
+    const balanceValue = Object.values(balance)[0]
+    const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
+
+    const signer = ethersProvider.getSigner()
+    const txDetails = {
+      to: toAddress,
+      value: 100000000000000
     }
-  }
 
-  let copyableStyles = `:root {\n  ${styleToString(
-    defaultStyling
-  )}${baseStyling}\n}`
+    const sendTransaction = () => {
+      return signer.sendTransaction(txDetails).then(tx => tx.hash)
+    }
 
-  const updateTheme = (e, targetStyle) => {
-    const iframe = document.getElementById('inlineFrameExample')
-    iframe.contentWindow.document.documentElement.style.setProperty(
-      targetStyle,
-      e.target.value
-    )
+    const gasPrice = () =>
+      ethersProvider.getGasPrice().then(res => res.toString())
+
+    const estimateGas = () => {
+      return ethersProvider.estimateGas(txDetails).then(res => res.toString())
+    }
+
+    const transactionHash = await onboard.state.actions.preflightNotifications({
+      sendTransaction,
+      gasPrice,
+      estimateGas,
+      balance: balanceValue,
+      txDetails: txDetails
+    })
 
-    copyableStyles = `:root {\n  ${styleToString(
-      defaultStyling
-    )}${baseStyling}\n}`
+    console.log(transactionHash)
   }
 
-  let checked = false
+  const signMessage = async (provider, address) => {
+    const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
-  const handleBackdrop = () => {
-    const iframe = document.getElementById('inlineFrameExample')
+    const signer = ethersProvider?.getSigner()
+    const addr = await signer?.getAddress()
+    const signature = await signer?.signMessage(signMsg)
 
-    if (!checked) {
-      iframe.contentWindow.document.documentElement.style.setProperty(
-        '--onboard-modal-backdrop',
-        'rgba(0, 0, 0, 0)'
-      )
-    } else {
-      iframe.contentWindow.document.documentElement.style.setProperty(
-        '--onboard-modal-backdrop',
-        'rgba(0, 0, 0, 0.6)'
+    const recoveredAddress = recoverAddress(
+      arrayify(hashMessage(signMsg)),
+      signature
+    )
+
+    if (recoveredAddress !== address) {
+      console.error(
+        "Signature failed. Recovered address doesn' match signing address."
       )
     }
+
+    console.log({ signMsg, signature, recoveredAddress, addr })
   }
 
-  // Converts the image into a data URI
-  const readImage = file => {
-    const reader = new FileReader()
-    reader.addEventListener('load', event => {
-      uploaded_image = event.target.result
-      document.querySelector(
-        '#image_drop_area'
-      ).style.backgroundImage = `url(${uploaded_image})`
+  const signTypedMessage = async (provider, address) => {
+    const data = JSON.parse(signTypedMsg)
+    const signature = await provider.request({
+      method: 'eth_signTypedData',
+      params: [address, data]
     })
-    reader.readAsDataURL(file)
-  }
+    const { domain, types, message } = data
 
-  let uploaded_image
-  const handleImageDrop = dataFromDocument => {
-    if (dataFromDocument) {
-      if (image_drop_area) {
-        // Event listener for dragging the image over the div
-        image_drop_area.addEventListener('dragover', event => {
-          event.stopPropagation()
-          event.preventDefault()
-          // Style the drag-and-drop as a "copy file" operation.
-          event.dataTransfer.dropEffect = 'copy'
-        })
-
-        // Event listener for dropping the image inside the div
-        image_drop_area.addEventListener('drop', event => {
-          const image_drop_area_direction = document.querySelector(
-            '#image_drop_area_direction'
-          )
-          document.body.style.padding = 0
-          image_drop_area_direction.style.display = 'none'
-          onboard.connectWallet()
-          event.stopPropagation()
-          event.preventDefault()
-          let fileList = event.dataTransfer.files
-
-          readImage(fileList[0])
-        })
-      }
-    }
-  }
-  const initIFrame = async dataFromDocument => {
-    if (dataFromDocument) {
-      return (hideForIframe = true)
-    }
+    delete types.EIP712Domain
+    console.log(verifyTypedData(domain, types, message, signature))
   }
-
-  onMount(async () => {
-    var dataFromDocument = location.hash.replace(/#/, '')
-    console.log(dataFromDocument)
-    await initIFrame(dataFromDocument)
-    handleImageDrop(dataFromDocument)
-  })
 </script>
 
 <style>
-  :root {
-    --background-color: #ffffff; /* --white */
-    --text-color: #1a1d26; /* --gray-700 */
-    --border-color: #ebebed; /* --gray-100 taken from future mock */
-
-    --accent-background: #ebebed; /* --gray-100 (currently gray-100 in connect modal) */
-    --accent-color: #929bed; /* --primary-400 */
-    --accent-color-hover: #eff1fc; /* --primary-200 */
-
-    /* Account Center & Notify */
-    --secondary-text-color: #707481; /* --gray-400 (balance and token name) */
-    /* --secondary-accent-background: #242835; --gray-600 (Upper background in maximized) */
-
-    /* --onboard-font-family-normal: System,monospace; */
-    --onboard-connect-sidebar-background: var(--accent-background);
-    --onboard-close-button-background: var(--accent-background);
-    --onboard-connect-sidebar-color: var(--text-color);
-    --onboard-connect-sidebar-progress-background: var(
-      --secondary-text-color
-    ); /* defaults to gray-200 */
-    --onboard-connect-sidebar-progress-color: var(
-      --accent-color
-    ); /* defaults to  primary-600 */
-    --onboard-connect-header-background: var(--background-color);
-    --onboard-connect-header-color: var(--text-color);
-    --onboard-main-scroll-container-background: var(--background-color);
-    --onboard-link-color: var(--accent-color);
-    --onboard-wallet-button-background: var(--background-color);
-    --onboard-wallet-button-background-hover: var(--accent-color-hover);
-    --onboard-wallet-button-color-hover: var(--text-color);
-    --onboard-wallet-button-color: var(--text-color);
-    --onboard-wallet-button-border-color: var(--border-color);
-    --onboard-wallet-app-icon-border-color: var(--border-color);
-    /* 
-    --account-center-minimized-background: var(--background-color);
-    --account-center-minimized-address-color: var(--text-color);
-    --account-center-minimized-balance-color: var(--secondary-text-color);
-    --account-center-minimized-chain-select-background: var(
-      --accent-color-hover
-    );
-    --account-center-maximized-info-section-background: var(--background-color);
-    --account-center-maximized-network-section-background: var(
-      --accent-background
-    );
-    --account-center-maximized-upper-background: var(
-      --secondary-accent-background
-    );
-    --account-center-maximized-address-color: var(--background-color);
-    --account-center-maximized-account-section-background-hover: var(
-      --text-color
-    );
-    --account-center-maximized-balance-color: var(--border-color);
-    --account-center-maximized-upper-action-color: var(--accent-color);
-    --account-center-maximized-network-text-color: var(
-      --secondary-accent-background
-    );
-    --account-center-maximized-info-section-background-color: var(
-      --background-color
-    );
-    --account-center-maximized-app-name-color: var(
-      --secondary-accent-background
-    );
-    --account-center-maximized-app-info-color: var(
-      --secondary-accent-background
-    );
-    --account-center-app-btn-background: var(--secondary-accent-background);
-    --account-center-app-btn-text-color: var(--background-color);
-
-    --notify-onboard-background: var(--secondary-accent-background);
-    --notify-onboard-transaction-status: var(--accent-background);
-    --notify-onboard-address-hash-color: var(--accent-color-hover);
-    --notify-onboard-anchor-color: var(--accent-color);
-    --notify-onboard-timer-color: var(--secondary-text-color); */
-
-    /* 
-		NEEDS TARGET AS IT USES OPACITY: 
-		--account-center-maximized-upper-action-background-hover
-		NEEDS UPDATES FOR DIFFERNT STYLING, DOESNT FIT BASIC VARIABLES ABOVE:
-		Notify status icons, icon backgrounds and icon borders
-	*/
-  }
-  main {
-    height: 100%;
-  }
   button {
     width: 14rem;
     margin: 8px;
   }
-
-  .copy-styles-container {
-    display: flex;
-    flex-direction: row;
-    align-items: end;
-  }
-
-  .copy-styles-textarea {
-    width: 30rem;
-    height: 16rem;
-    margin: 0 0 8px;
+  .connected-wallet {
+    padding: 1rem;
+    border-radius: 4px;
+    margin: 0.5rem;
+    border: 1px solid gray;
   }
 
-  /* .notify-chain-container {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .notify-action-container {
-    display: flex;
-    flex-direction: column;
-    width: 15rem;
-  } */
-
-  .theming-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    width: 100%;
-  }
-
-  .theming-inputs-wrapper {
+  .flex-centered {
     display: flex;
     align-items: center;
-    width: 19rem;
-  }
-  .theming-inputs {
-    display: inline-flex;
-    overflow: hidden;
-    width: 2em;
-    height: 2em;
-    border-radius: 50%;
-    box-shadow: 1px 1px 3px 0px grey;
-    margin: 0.4em;
-  }
-  input[type='color'] {
-    padding: 0;
-    width: 150%;
-    height: 150%;
-    margin: -25%;
-  }
-  #image_drop_area,
-  #iframe_underlay {
-    width: 100%;
-    height: 100%;
-    background-position: center;
-    background-size: cover;
-    box-sizing: border-box;
-  }
-
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
   }
 
-  .switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 34px;
-  }
-
-  .slider:before {
-    position: absolute;
-    content: '';
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 50%;
+  .account-info div {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
-  input:checked + .slider {
-    background-color: #929bed;
+  .text-input {
+    width: 18rem;
   }
 
-  input:checked + .slider {
-    box-shadow: 0 0 1px #929bed;
+  .sign-transaction {
+    display: flex;
+    align-items: end;
   }
 
-  input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
+  .sign-transaction-textarea {
+    width: 24rem;
+    height: 12rem;
+    margin: 0;
   }
-
-  .backdrop-toggle {
+  .notify-chain-container {
     display: flex;
-    align-items: center;
-    margin: 8px 8px 16px 4px;
+    flex-wrap: wrap;
   }
-
-  .backdrop-toggle > label {
-    margin-right: 8px;
+  .switch-chain-container,
+  .notify-action-container {
+    display: flex;
+    flex-direction: column;
+    width: 15rem;
   }
 </style>
 
 <main>
-  {#if !iframeUsed}
-    <div id="image_drop_area">
-      <p id="image_drop_area_direction">
-        Drag and drop a screen shot of your site to customize styling origin....
-        <br />
-      </p>
-      <div>
-        <input
-          type="text"
-          class="text-input"
-          placeholder="Enter your Website URL"
-          bind:value={webURL}
-        />
-        <button on:click={addURLToIFrame}> View With Your Website </button>
-      </div>
-      Click color circles above to change the theme.
-      <!-- {#if uploaded_image}
-        {#if $wallets$}
-          <div class="notify-chain-container">
-            <div class="notify-action-container">
-              <button
-                on:click={() =>
-                  onboard.state.actions.customNotification({
-                    type: 'hint',
-                    message: 'This is a custom DApp hint',
-                    autoDismiss: 0
-                  })}>Send Hint Notification</button
-              >
-              <button
-                on:click={() => {
-                  onboard.state.actions.customNotification({
-                      type: 'pending',
-                      message:
-                        'This is a custom DApp pending notification to use however you want',
-                      autoDismiss: 0
-                    })
-                }}>Send Success Notification</button
-              >
-              <button
-                on:click={() =>
-                  onboard.state.actions.customNotification({
-                    message:
-                      'This is a custom DApp success notification to use however you want',
-                    autoDismiss: 0,
-                    type: 'pending'
-                  })}>Send Pending Notification</button
-              >
-              <button
-                on:click={() =>
-                  onboard.state.actions.customNotification({
-                    type: 'error',
-                    message:
-                      'This is a custom DApp Error notification to use however you want',
-                    autoDismiss: 0
-                  })}>Send Error Notification</button
-              >
-              <button
-                on:click={() =>
-                  onboard.state.actions.customNotification({
-                    message:
-                      'This is a custom non-descript DApp notification to use however you want',
+  <div class="cta">
+    <button on:click={() => onboard.connectWallet()}>Connect Wallet</button>
+
+    {#if $wallets$}
+      <button on:click={() => onboard.state.actions.updateBalances()}
+        >Update Wallet Balance</button
+      >
+      <div class="notify-chain-container">
+        <div class="notify-action-container">
+          <button
+            on:click={() =>
+              onboard.state.actions.customNotification({
+                type: 'hint',
+                message: 'This is a custom DApp hint',
+                autoDismiss: 0
+              })}>Send Hint Notification</button
+          >
+          <button
+            on:click={() => {
+              const { update, dismiss } =
+                onboard.state.actions.customNotification({
+                  type: 'pending',
+                  message:
+                    'This is a custom DApp pending notification to use however you want',
+                  autoDismiss: 0
+                })
+              setTimeout(
+                () =>
+                  update({
+                    eventCode: 'dbUpdateSuccess',
+                    message: 'Updated status for custom notification',
+                    type: 'success',
                     autoDismiss: 0
-                  })}>Send DApp Notification</button
-              >
-            </div>
+                  }),
+                4000
+              )
+            }}>Send Success Notification</button
+          >
+          <button
+            on:click={() =>
+              onboard.state.actions.customNotification({
+                message:
+                  'This is a custom DApp success notification to use however you want',
+                autoDismiss: 0,
+                type: 'pending'
+              })}>Send Pending Notification</button
+          >
+          <button
+            on:click={() =>
+              onboard.state.actions.customNotification({
+                type: 'error',
+                message:
+                  'This is a custom DApp Error notification to use however you want',
+                autoDismiss: 0
+              })}>Send Error Notification</button
+          >
+          <button
+            on:click={() =>
+              onboard.state.actions.customNotification({
+                message:
+                  'This is a custom non-descript DApp notification to use however you want',
+                autoDismiss: 0
+              })}>Send DApp Notification</button
+          >
+        </div>
+        <div class="switch-chain-container">
+          <button on:click={() => onboard.setChain({ chainId: '0x1' })}
+            >Set Chain to Mainnet</button
+          >
+          <button on:click={() => onboard.setChain({ chainId: '0x4' })}
+            >Set Chain to Rinkeby</button
+          >
+          <button on:click={() => onboard.setChain({ chainId: '0x89' })}
+            >Set Chain to Matic</button
+          >
+        </div>
+      </div>
+    {/if}
+  </div>
+
+  {#if $wallets$}
+    {#each $wallets$ as { icon, label, accounts, chains, provider }}
+      <div class="connected-wallet">
+        <div class="flex-centered" style="width: 10rem;">
+          <div style="width: 2rem; height: 2rem">{@html icon}</div>
+          <span>{label}</span>
+        </div>
+
+        <div>Chains: {JSON.stringify(chains, null, 2)}</div>
+
+        {#each accounts as { address, ens, balance }}
+          <div
+            class="account-info"
+            style="margin-top: 0.25rem; margin-bottom: 0.25rem; padding: 0.25rem; border: 1px solid gray;"
+          >
+            <div>Address: {address}</div>
+            {#if balance}
+              <div>Balances:</div>
+              {#each Object.entries(balance) as [token, amount]}
+                <div style="margin-left: 1rem;">{token}: {amount}</div>
+              {/each}
+            {/if}
+
+            {#if ens}
+              <div>ENS Name: {(ens && ens.name) || ''}</div>
+            {/if}
           </div>
-        {/if}
-      {/if} -->
-    </div>
-  {:else}
-    <iframe
-      id="iframe_underlay"
-      title="iframe area for testing W3O with your app"
-    />
-  {/if}
-  <div class="themes">
-    <label for="Theme">Click Color Circles to Set Theme: </label>
-    <div class="theming-container">
-      {#each Object.keys(defaultStyling) as target}
-        <div class="theming-inputs-wrapper">
-          <div class="theming-inputs">
+          <div>
             <input
-              type="color"
-              name="Theme"
-              bind:value={defaultStyling[target]}
-              on:input={e => updateTheme(e, target)}
+              id="sign-msg-input"
+              type="text"
+              class="text-input"
+              placeholder="Message..."
+              bind:value={signMsg}
             />
+            <button on:click={signMessage(provider, address)}>
+              Sign Message
+            </button>
           </div>
-          <span class="text" id="current-theme"
-            >{target} : {defaultStyling[target]}</span
-          >
-        </div>
-      {/each}
-    </div>
-    <div class="backdrop-toggle">
-      <label class="switch">
-        <input
-          type="checkbox"
-          on:change={() => handleBackdrop()}
-          bind:checked
-        />
-        <span class="slider" />
-      </label>
-      Disabled Backdrop for Styling
-    </div>
-    <div class="copy-styles-container">
-      <textarea
-        readonly
-        bind:value={copyableStyles}
-        class="copy-styles-textarea"
-      />
-      <button on:click={async () => await copyStylingConfig()}>
-        Copy Styling Config
-      </button>
-    </div>
-  </div>
-  <iframe
-    id="inlineFrameExample"
-    name="inlineFrameExample"
-    title="Inline Frame Example"
-    src={window.location.href + '#stylize'}
-  />
+          <div>
+            <input
+              id="sign-type-msg-input"
+              type="text"
+              class="text-input"
+              placeholder="Typed message..."
+              bind:value={signTypedMsg}
+            />
+            <button on:click={signTypedMessage(provider, address)}>
+              Sign Typed Message
+            </button>
+          </div>
+
+          <div>
+            <input
+              type="text"
+              class="text-input"
+              placeholder="0x..."
+              bind:value={toAddress}
+            />
+            <button on:click={sendTransaction(provider)}>
+              Send Transaction
+            </button>
+          </div>
+          <div>
+            <input
+              type="text"
+              class="text-input"
+              placeholder="0x..."
+              bind:value={toAddress}
+            />
+            <button on:click={sendTransactionWithPreFlight(provider, balance)}>
+              Send with Preflight Notifications
+            </button>
+          </div>
+
+          <div class="sign-transaction">
+            <textarea
+              bind:value={transactionObject}
+              id="sign-transaction-input"
+              type="text"
+              class="sign-transaction-textarea"
+            />
+            <button
+              on:click={signTransactionMessage(provider)}
+              style="margin: 0 0 0 .5rem"
+            >
+              Sign Transaction
+            </button>
+          </div>
+        {/each}
+        <button
+          style="margin-top: 0.5rem;"
+          on:click={() => onboard.disconnectWallet({ label })}
+        >
+          Disconnect Wallet
+        </button>
+      </div>
+    {/each}
+  {/if}
 </main>

From e36b3746a415501a9eb9ca301a7eaee765d1acc6 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Fri, 16 Sep 2022 12:04:15 -0600
Subject: [PATCH 15/16] Remove from sidebar

---
 docs/src/lib/icons/LinkOutIcon.svelte    |  9 ---------
 docs/src/routes/__layout-kit-docs.svelte | 13 -------------
 2 files changed, 22 deletions(-)
 delete mode 100644 docs/src/lib/icons/LinkOutIcon.svelte

diff --git a/docs/src/lib/icons/LinkOutIcon.svelte b/docs/src/lib/icons/LinkOutIcon.svelte
deleted file mode 100644
index b2c098c31..000000000
--- a/docs/src/lib/icons/LinkOutIcon.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-  let linkOut = `<svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z" fill="currentColor"/>
-</svg>`
-</script>
-
-<div style="width: 24px; height: 24px;">
-  {@html linkOut}
-</div>
\ No newline at end of file
diff --git a/docs/src/routes/__layout-kit-docs.svelte b/docs/src/routes/__layout-kit-docs.svelte
index 491f095f4..1a31f5672 100644
--- a/docs/src/routes/__layout-kit-docs.svelte
+++ b/docs/src/routes/__layout-kit-docs.svelte
@@ -20,8 +20,6 @@
   import '$lib/styles/fonts.css'
   import '$lib/styles/kit-docs.css'
 
-  import LinkOutIcon from '$lib/icons/LinkOutIcon.svelte';
-
   import { page } from '$app/stores'
 
   import {
@@ -39,17 +37,6 @@
 
   /** @type {import('@svelteness/kit-docs').ResolvedSidebarConfig | null} */
   export let sidebar = null
-  const themingLink = {
-    slug: '/theming',
-    title: 'Theming',
-    icon: { after: LinkOutIcon }
-  }
-
-  const addThemingLinkToSideBar = () => {
-    sidebar?.links['Getting Started'].splice(1, 0, themingLink)
-  }
-
-  addThemingLinkToSideBar()
 
   /** @type {import('@svelteness/kit-docs').NavbarConfig} */
   const navbar = {

From a6252727d413c384be7e035f60c31674d6221c99 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Fri, 16 Sep 2022 12:58:27 -0600
Subject: [PATCH 16/16] Add zindex to drop area controls

---
 docs/src/lib/components/ThemeCustomizer.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/lib/components/ThemeCustomizer.svelte b/docs/src/lib/components/ThemeCustomizer.svelte
index c8cabbf29..3c628fc71 100644
--- a/docs/src/lib/components/ThemeCustomizer.svelte
+++ b/docs/src/lib/components/ThemeCustomizer.svelte
@@ -419,6 +419,7 @@
     display: flex;
     flex-flow: column;
     gap: 1rem;
+    z-index: 9999;
   }
 
   .website-input-row {