chore: extract modal content to separate component

getAlby · Aug 25, 2023 · be0c0d9 · be0c0d9
1 parent e2ad6c9
commit be0c0d9
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 92 deletions.
diff --git a/dev/vite/index.html b/dev/vite/index.html
@@ -88,6 +88,11 @@ <h3>Dark</h3>
     <h3>Icon only</h3>
     <lwc-button icon-only></lwc-button>
 
+    <h2>Modal Content</h2>
+    <div style="width: 448px">
+      <lwc-modal-content></lwc-modal-content>
+    </div>
+
     <h2>Connector List</h2>
     <lwc-connector-list></lwc-connector-list>
   </body>

diff --git a/src/components/lwc-modal-content.ts b/src/components/lwc-modal-content.ts
@@ -0,0 +1,110 @@
+import {html} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {LwcElement} from './lwc-element';
+import './lwc-connector-list.js';
+import {withTwind} from './twind/withTwind';
+import store from '../state/store';
+import {loadingIcon2} from './icons/loadingIcon';
+import {exitIcon} from './icons/exitIcon';
+import {color} from './utils/colors';
+
+@customElement('lwc-modal-content')
+export class LwcModalContent extends withTwind(LwcElement) {
+  override render() {
+    return html`<div
+      part="modal-content"
+      class="flex flex-col justify-center items-center w-full"
+    >
+      ${this._connecting
+        ? html`<div class="py-32">${loadingIcon2}</div>`
+        : this._connected
+        ? html` <h1 class="font-sans text-lg my-8" style="color: ${color(
+            'text-secondary'
+          )}">
+            Hello,
+            <span
+              class="font-bold"
+              style="
+          background: -webkit-linear-gradient(${color('primary')}, ${color(
+            'secondary'
+          )});
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          "
+            >
+              ${this._alias || 'Anon'}
+            </span>
+          </h1>
+
+          <span class="font-sans text-xs mb-2" style="color: ${color(
+            'text-secondary'
+          )}">Balance</span>
+
+          <h2 class="font-sans text-2xl mb-12" style="color: ${color(
+            'text-secondary'
+          )}">
+            <span
+              class="font-bold font-mono text-4xl align-bottom"
+              style="
+          background: -webkit-linear-gradient(${color('primary')}, ${color(
+            'secondary'
+          )});
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          "
+            >${this._balance || 0}</span>&nbsp;sats
+          </h2>
+
+          <hr class="border border-neutral-200 w-full mb-4"></div>
+
+          <span class="font-sans text-xs mb-4" style="color: ${color(
+            'text-secondary'
+          )}">Connected through ${this._connectorName}</span>
+
+          <button
+            @click=${this._handleDisconnect}
+            class="relative mt-4 h-8 px-3 font-medium font-sans shadow rounded-lg flex gap-2 justify-center items-center"
+          >
+            <div
+              class="absolute -z-10 top-0 left-0 w-full h-full border-2 border-solid border-transparent rounded-lg"
+              style="
+              background-image: linear-gradient(${color('bg-primary')}, ${color(
+            'bg-primary'
+          )}), linear-gradient(to bottom, ${color('primary')}, ${color(
+            'secondary'
+          )});
+              background-origin: border-box;
+              background-clip: content-box, border-box;"
+            ></div>
+            ${exitIcon}
+            <span style="
+            background: -webkit-linear-gradient(${color('primary')}, ${color(
+            'secondary'
+          )});
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          ">Disconnect</span>
+          </button>`
+        : html`
+            <h1
+              class="font-sans my-8"
+              style="color: ${color('text-secondary')}"
+            >
+              How would you like to connect?
+            </h1>
+
+            <lwc-connector-list />
+          `}
+    </div>`;
+  }
+
+  private _handleDisconnect() {
+    store.getState().disconnect();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lwc-modal-content': LwcModalContent;
+  }
+}
diff --git a/src/components/lwc-modal.ts b/src/components/lwc-modal.ts
@@ -1,15 +1,13 @@
 import {html} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
 import {LwcElement} from './lwc-element';
-import {crossIcon} from './icons/crossIcon';
-import './lwc-connector-list.js';
+import './lwc-modal-content.js';
 import {withTwindExtended} from './twind/withTwind';
 import store from '../state/store';
 import {dispatchLwcEvent} from '../utils/dispatchLwcEvent';
-import {bcLogo} from './icons/bcLogo';
-import {loadingIcon2} from './icons/loadingIcon';
-import {exitIcon} from './icons/exitIcon';
 import {color} from './utils/colors';
+import {crossIcon} from './icons/crossIcon';
+import {bcLogo} from './icons/bcLogo';
 
 @customElement('lwc-modal')
 export class LwcModal extends withTwindExtended({
@@ -70,7 +68,6 @@ export class LwcModal extends withTwindExtended({
     dispatchLwcEvent('lwc:modalclosed');
   }
 
-  // TODO: move buttons to a separate component so they can be displayed outside of a modal
   override render() {
     return html` <div
       part="modal"
@@ -84,7 +81,7 @@ export class LwcModal extends withTwindExtended({
       ></div>
       <div
         class="transition-all p-4 pt-6 pb-8 rounded-3xl shadow-2xl flex flex-col justify-center items-center w-full max-w-md max-sm:rounded-b-none
-        ${this._closing ? 'animate-fade-out' : 'animate-fade-in'}"
+    ${this._closing ? 'animate-fade-out' : 'animate-fade-in'}"
         style="background: ${color('bg-primary')}"
       >
         <div class="flex justify-center items-center gap-2 w-full relative">
@@ -95,96 +92,12 @@ export class LwcModal extends withTwindExtended({
           </div>
           ${bcLogo}
         </div>
-        ${this._connecting
-          ? html`<div class="py-32">${loadingIcon2}</div>`
-          : this._connected
-          ? html` <h1 class="font-sans text-lg my-8" style="color: ${color(
-              'text-secondary'
-            )}">
-                Hello,
-                <span
-                  class="font-bold"
-                  style="
-              background: -webkit-linear-gradient(${color('primary')}, ${color(
-              'secondary'
-            )});
-              -webkit-background-clip: text;
-              -webkit-text-fill-color: transparent;
-              "
-                >
-                  ${this._alias || 'Anon'}
-                </span>
-              </h1>
-
-              <span class="font-sans text-xs mb-2" style="color: ${color(
-                'text-secondary'
-              )}">Balance</span>
-
-              <h2 class="font-sans text-2xl mb-12" style="color: ${color(
-                'text-secondary'
-              )}">
-                <span
-                  class="font-bold font-mono text-4xl align-bottom"
-                  style="
-              background: -webkit-linear-gradient(${color('primary')}, ${color(
-              'secondary'
-            )});
-              -webkit-background-clip: text;
-              -webkit-text-fill-color: transparent;
-              "
-                >${this._balance || 0}</span>&nbsp;sats
-              </h2>
 
-              <hr class="border border-neutral-200 w-full mb-4"></div>
-
-              <span class="font-sans text-xs mb-4" style="color: ${color(
-                'text-secondary'
-              )}">Connected through ${this._connectorName}</span>
-
-              <button
-                @click=${this._handleDisconnect}
-                class="relative mt-4 h-8 px-3 font-medium font-sans shadow rounded-lg flex gap-2 justify-center items-center"
-              >
-                <div
-                  class="absolute -z-10 top-0 left-0 w-full h-full border-2 border-solid border-transparent rounded-lg"
-                  style="
-                  background-image: linear-gradient(${color(
-                    'bg-primary'
-                  )}, ${color(
-              'bg-primary'
-            )}), linear-gradient(to bottom, ${color('primary')}, ${color(
-              'secondary'
-            )});
-                  background-origin: border-box;
-                  background-clip: content-box, border-box;"
-                ></div>
-                ${exitIcon}
-                <span style="
-                background: -webkit-linear-gradient(${color(
-                  'primary'
-                )}, ${color('secondary')});
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-              ">Disconnect</span>
-              </button>`
-          : html`
-              <h1
-                class="font-sans my-8"
-                style="color: ${color('text-secondary')}"
-              >
-                How would you like to connect?
-              </h1>
-
-              <lwc-connector-list />
-            `}
+        <lwc-modal-content class="flex w-full"></lwc-modal-content>
       </div>
     </div>`;
   }
 
-  private _handleDisconnect() {
-    store.getState().disconnect();
-  }
-
   private _handleClose() {
     this._closing = true;
     setTimeout(() => this.onClose?.(), 750);