refactor(widget): improve overall widget codebase, flow (#696)

Author: sidvishnoi

components/src/widget/views/confirmation/confirmation.ts

@@ -3,7 +3,7 @@ import { property, state } from 'lit/decorators.js'
 import type { WalletAddressInfo } from 'publisher-tools-api'
 import { CloseBtn } from '@c/shared/components/close-btn'
 import { DotsLoader } from '@c/shared/components/dots-loader'
-import { getCurrencySymbol, getFormattedAmount } from '@c/utils'
+import { getFormattedAmount } from '@c/utils'
 import {
   NO_OP_CONTROLLER,
   type Controller,
@@ -13,7 +13,7 @@ import { toAmount } from '@shared/utils'
 import confirmationCss from './confirmation.css?raw'
 import { type AmountChangeEventDetail, PaymentAmount } from '../amount/amount'
 
-export class PaymentConfirmation extends LitElement {
+export class PaymentInitiate extends LitElement {
   @property({ type: Object }) configController!: WidgetController
   @property({ type: String }) note = ''
 
@@ -183,13 +183,12 @@ export class PaymentConfirmation extends LitElement {
         walletAddress: sender,
         receiver,
         amount,
-        note = '',
       } = this.configController.state
       const res = await this.#controller.initiatePayment({
         sender,
         receiver,
         amount,
-        note,
+        note: this.note,
       })
 
       this.configController.updateState({

components/src/widget/views/interaction/interaction.ts

@@ -3,12 +3,8 @@ import { property, state } from 'lit/decorators.js'
 import failedIcon from '@c/assets/interaction/authorization_failed.svg'
 import loadingIcon from '@c/assets/interaction/authorization_loading.svg'
 import successIcon from '@c/assets/interaction/authorization_success.svg'
-import {
-  NO_OP_CONTROLLER,
-  type Controller,
-  type WidgetController,
-} from '@c/widget/controller'
-import interactionStyles from './interaction.css?raw'
+import { NO_OP_CONTROLLER, type Controller } from '@c/widget/controller'
+import styles from './interaction.css?raw'
 
 type ButtonAction = {
   label: string
@@ -27,36 +23,38 @@ type InteractionView = {
   description?: string
 }
 
-export class PaymentInteraction extends LitElement {
+export class PaymentWaiting extends LitElement {
   #pollingAbortController: AbortController | null = null
   #interactionCompleted = false
 
-  @property({ type: Object }) configController!: WidgetController
   @state() private currentView:
     | 'authorizing'
     | 'processing'
     | 'success'
     | 'failed' = 'authorizing'
   @state() private errorMessage = ''
 
-  static styles = unsafeCSS(interactionStyles)
+  @property({ type: String, attribute: false }) private paymentId = ''
+  @property({ type: String, attribute: false }) private grantRedirectUrl = ''
+
+  static styles = unsafeCSS(styles)
 
   connectedCallback() {
     super.connectedCallback()
-    const { grantRedirectUrl, paymentId } = this.configController.state
-    if (!grantRedirectUrl) {
+
+    if (!this.grantRedirectUrl) {
       throw new Error('Grant redirect URL not found')
     }
     if (!this.#controller.isPreviewMode) {
-      window.open(grantRedirectUrl, '_blank')
+      window.open(this.grantRedirectUrl, '_blank')
     }
 
     const POLLING_TIMEOUT = 25_000 * 5
     this.#pollingAbortController = new AbortController()
     AbortSignal.timeout(POLLING_TIMEOUT).addEventListener('abort', (ev) => {
       this.#pollingAbortController?.abort(ev)
     })
-    void this.waitForCompletion(paymentId)
+    void this.waitForCompletion(this.paymentId)
   }
 
   #controller = NO_OP_CONTROLLER
@@ -75,7 +73,6 @@ export class PaymentInteraction extends LitElement {
   }
 
   private async waitForCompletion(paymentId: string) {
-    console.log(this.#controller?.getStatus)
     try {
       for await (const status of this.#controller.getStatus(
         paymentId,

components/src/widget/widget.ts

@@ -9,15 +9,15 @@ import {
   WidgetController,
 } from './controller'
 import type { WidgetConfig } from './types'
-import { PaymentConfirmation } from './views/confirmation/confirmation'
+import { PaymentInitiate } from './views/confirmation/confirmation'
 import { HomeView, type SubmitEventDetail } from './views/home/home'
-import { PaymentInteraction } from './views/interaction/interaction'
+import { PaymentWaiting } from './views/interaction/interaction'
 import styles from './widget.css?raw'
 
 const COMPONENTS = {
   'wm-payment-home': HomeView,
-  'wm-payment-confirmation': PaymentConfirmation,
-  'wm-payment-interaction': PaymentInteraction,
+  'wm-payment-initiate': PaymentInitiate,
+  'wm-payment-waiting': PaymentWaiting,
 }
 
 export class PaymentWidget extends LitElement {
@@ -38,7 +38,7 @@ export class PaymentWidget extends LitElement {
 
   @property({ type: Boolean }) isOpen = false
 
-  @state() private currentView: 'home' | 'confirmation' | 'interact' = 'home'
+  @state() private currentView: 'home' | 'initiate' | 'waiting' = 'home'
 
   static styles = unsafeCSS(styles)
 
@@ -70,7 +70,7 @@ export class PaymentWidget extends LitElement {
         walletAddress: walletInfo,
         receiver: await this.#receiver,
       })
-      this.currentView = 'confirmation'
+      this.currentView = 'initiate'
     } catch (error) {
       return error instanceof Error
         ? error.message
@@ -97,24 +97,24 @@ export class PaymentWidget extends LitElement {
   }
 
   private handleInteractionCancelled() {
-    this.currentView = 'confirmation'
+    this.currentView = 'initiate'
   }
 
   private renderCurrentView() {
     switch (this.currentView) {
       case 'home':
         return this.renderHomeView()
-      case 'confirmation':
-        return this.renderConfirmationView()
-      case 'interact':
-        return this.renderInteractionView()
+      case 'initiate':
+        return this.renderInitiateView()
+      case 'waiting':
+        return this.renderWaitingView()
       default:
         return this.renderHomeView()
     }
   }
 
   private navigateToInteraction() {
-    this.currentView = 'interact'
+    this.currentView = 'waiting'
   }
 
   private navigateToHome() {
@@ -136,27 +136,29 @@ export class PaymentWidget extends LitElement {
     `
   }
 
-  private renderConfirmationView() {
+  private renderInitiateView() {
     return html`
-      <wm-payment-confirmation
+      <wm-payment-initiate
         .configController=${this.configController}
         .controller=${this.#controller}
         .note=${this.config.note || ''}
         @back=${this.navigateToHome}
         @close=${this.toggleWidget}
         @payment-confirmed=${this.navigateToInteraction}
-      ></wm-payment-confirmation>
+      ></wm-payment-initiate>
     `
   }
 
-  private renderInteractionView() {
+  private renderWaitingView() {
+    const { paymentId, grantRedirectUrl } = this.configController.state
     return html`
-      <wm-payment-interaction
-        .configController=${this.configController}
+      <wm-payment-waiting
+        .paymentId=${paymentId}
+        .grantRedirectUrl=${grantRedirectUrl}
         .controller=${this.#controller}
         @interaction-cancelled=${this.handleInteractionCancelled}
         @back=${this.navigateToHome}
-      ></wm-payment-interaction>
+      ></wm-payment-waiting>
     `
   }