@lukso/up-connector 0.4.0-dev.a8c9315

package/src/restore-modal.ts

@@ -0,0 +1,702 @@
+/**
+ * Restore Modal - Lit Component
+ *
+ * Framework-agnostic restore modal for wallet data import.
+ * Uses lukso-modal from @lukso/web-components for consistent UI.
+ */
+
+import type {
+  BackupFile,
+  PasskeyAuthProvider,
+  WalletData,
+} from '@lukso/passkey-auth'
+import { readBackupFile } from '@lukso/passkey-auth'
+import { html, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { CoreLitElement } from './styles'
+
+// Import lukso web components
+import '@lukso/web-components/dist/components/lukso-modal'
+import '@lukso/web-components/dist/components/lukso-button'
+import '@lukso/web-components/dist/components/lukso-input'
+
+enum Step {
+  UPLOAD = 1,
+  PASSWORD = 2,
+  PREVIEW = 3,
+  SUCCESS = 4,
+}
+
+@customElement('restore-modal')
+export class RestoreModal extends CoreLitElement {
+  // Public properties
+  @property({ type: Boolean, reflect: true }) isOpen = false
+  @property({ type: String }) theme: 'light' | 'dark' | 'auto' = 'auto'
+  @property({ type: Object }) keyGenerator: PasskeyAuthProvider | null = null
+
+  // Private state
+  @state() private currentStep: Step = Step.UPLOAD
+  @state() private selectedFile: File | null = null
+  @state() private backupData: BackupFile | null = null
+  @state() private fileError: string | null = null
+  @state() private isDragging = false
+  @state() private password = ''
+  @state() private passwordErrors: string[] = []
+  @state() private isRestoring = false
+  @state() private walletData: WalletData | null = null
+  @state() private validationWarnings: string[] = []
+  @state() private validationInfo: string[] = []
+  @state() private controllers: Array<{
+    address: string
+    status: 'new' | 'existing'
+  }> = []
+  @state() private restoredAddresses: string[] = []
+
+  /**
+   * Public method for parent to set preview result
+   * Called after parent handles the 'preview' event
+   */
+  public setPreviewResult(options: {
+    controllers: Array<{ address: string; status: 'new' | 'existing' }>
+    warnings?: string[]
+  }) {
+    this.controllers = options.controllers
+    this.validationWarnings = options.warnings || []
+  }
+
+  /**
+   * Public method for parent to set validation result
+   * Called after parent handles the 'validate' event
+   */
+  public setValidationResult(
+    walletData: WalletData | null,
+    options?: {
+      error?: string
+      warnings?: string[]
+      info?: string[]
+    }
+  ) {
+    this.isRestoring = false
+
+    if (options?.error) {
+      this.passwordErrors = [options.error]
+      this.validationWarnings = []
+      this.validationInfo = []
+    } else if (walletData) {
+      this.walletData = walletData
+      this.validationWarnings = options?.warnings || []
+      this.validationInfo = options?.info || []
+      this.currentStep = Step.SUCCESS
+    }
+  }
+
+  render() {
+    return html`
+      <lukso-modal
+        ?is-open=${this.isOpen}
+        size="medium"
+        @on-backdrop-click=${this.close}
+      >
+        <div class="p-6">
+          <!-- Header -->
+          <h2 class="m-0 mb-6 text-neutral-20 dark:text-white heading-inter-21-semi-bold">
+            ${this.getStepTitle()}
+          </h2>
+
+          <!-- Step content -->
+          ${this.renderStep()}
+        </div>
+      </lukso-modal>
+    `
+  }
+
+  private renderStep() {
+    switch (this.currentStep) {
+      case Step.UPLOAD:
+        return this.renderUploadStep()
+      case Step.PASSWORD:
+        return this.renderPasswordStep()
+      case Step.PREVIEW:
+        return this.renderPreviewStep()
+      case Step.SUCCESS:
+        return this.renderSuccessStep()
+      default:
+        return nothing
+    }
+  }
+
+  private renderUploadStep() {
+    return html`
+      <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular">
+        Select your backup file to restore your wallet data. Your backup file stays on your device and is never uploaded.
+      </p>
+
+      <div
+        class="border-2 border-dashed rounded-xl p-10 text-center bg-neutral-95 dark:bg-neutral-80 transition-all cursor-pointer my-6 ${
+          this.isDragging
+            ? 'border-blue-60 bg-blue-95 dark:bg-blue-95/10'
+            : this.fileError
+              ? 'border-red-55 bg-red-95'
+              : 'border-neutral-90 dark:border-neutral-70'
+        }"
+        @drop=${this.handleDrop}
+        @dragover=${this.handleDragOver}
+        @dragleave=${this.handleDragLeave}
+        @click=${this.triggerFileInput}
+      >
+        <div class="flex flex-col items-center gap-3">
+          <p class="m-0 text-neutral-10 dark:text-white heading-inter-16-semi-bold">
+            Drag and drop your backup file here
+          </p>
+          <p class="m-0 text-neutral-40 paragraph-inter-14-regular">or</p>
+          <lukso-button
+            variant="primary"
+            @click=${(e: Event) => {
+              e.stopPropagation()
+              this.triggerFileInput()
+            }}
+          >
+            Choose File
+          </lukso-button>
+          ${
+            this.selectedFile
+              ? html`
+            <p class="mt-2 mb-0 text-green-54 paragraph-inter-14-semi-bold">
+              ${this.selectedFile.name}
+            </p>
+          `
+              : nothing
+          }
+          ${
+            this.fileError
+              ? html`
+            <p class="mt-2 mb-0 text-red-55 paragraph-inter-14-semi-bold">
+              ${this.fileError}
+            </p>
+          `
+              : nothing
+          }
+        </div>
+      </div>
+
+      <input
+        type="file"
+        class="hidden"
+        accept=".json"
+        @change=${this.handleFileSelect}
+      />
+
+      <div class="flex justify-end mt-6">
+        <lukso-button variant="text" @click=${this.close}>
+          Cancel
+        </lukso-button>
+      </div>
+    `
+  }
+
+  private renderPasswordStep() {
+    const canProceed = this.password && this.password.length > 0
+
+    return html`
+      <p class="mb-5 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
+        This backup is encrypted. Enter the password to decrypt it.
+      </p>
+
+      <div>
+        <lukso-input
+          type="password"
+          label="Password"
+          placeholder="Enter decryption password"
+          .value=${this.password}
+          @on-input=${(e: CustomEvent) => (this.password = e.detail.value)}
+          @keyup=${(e: KeyboardEvent) => e.key === 'Enter' && canProceed && this.previewRestore()}
+          is-full-width
+          autofocus
+        ></lukso-input>
+        ${this.passwordErrors.map(
+          (error) => html`
+          <div class="mt-1 text-red-55 paragraph-inter-13-regular">${error}</div>
+        `
+        )}
+      </div>
+
+      <div class="flex justify-between gap-3 mt-6">
+        <div class="flex gap-3">
+          <lukso-button variant="text" @click=${this.close}>
+            Cancel
+          </lukso-button>
+          <lukso-button variant="secondary" @click=${this.goBack}>
+            Back
+          </lukso-button>
+        </div>
+        <lukso-button
+          variant="primary"
+          ?disabled=${!canProceed || this.isRestoring}
+          ?is-loading=${this.isRestoring}
+          @click=${this.previewRestore}
+        >
+          Continue
+        </lukso-button>
+      </div>
+    `
+  }
+
+  private renderPreviewStep() {
+    return html`
+      <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular">
+        ${
+          this.controllers.length > 0
+            ? `Found ${this.controllers.length} controller${this.controllers.length === 1 ? '' : 's'} in backup.`
+            : 'No controllers found in backup.'
+        }
+      </p>
+
+      ${
+        this.controllers.length > 0
+          ? html`
+          <div class="mb-6">
+            <div class="mb-3 text-neutral-20 dark:text-neutral-90 paragraph-inter-14-semi-bold">
+              Controllers:
+            </div>
+            ${this.controllers.map(
+              (controller) => html`
+                <div class="bg-neutral-95 dark:bg-neutral-80 border border-neutral-90 dark:border-neutral-70 rounded-lg px-3 py-2.5 mb-2">
+                  <div class="flex items-center justify-between">
+                    <div class="text-neutral-40 paragraph-inter-13-regular font-mono">
+                      ${this.truncateAddress(controller.address)}
+                    </div>
+                    <div
+                      class="px-2 py-0.5 rounded text-xs font-semibold ${
+                        controller.status === 'new'
+                          ? 'bg-green-95 dark:bg-green-95/10 text-green-55 border border-green-55/30'
+                          : 'bg-neutral-90 dark:bg-neutral-70 text-neutral-50 border border-neutral-80 dark:border-neutral-60'
+                      }"
+                    >
+                      ${controller.status === 'new' ? 'NEW' : 'EXISTS'}
+                    </div>
+                  </div>
+                  <div class="text-neutral-60 paragraph-inter-12-regular mt-1">
+                    ${controller.address}
+                  </div>
+                </div>
+              `
+            )}
+          </div>
+        `
+          : nothing
+      }
+
+      ${
+        this.validationWarnings.length > 0
+          ? html`
+          <div class="mb-4">
+            ${this.validationWarnings.map(
+              (warning) => html`
+                <div class="bg-yellow-95 dark:bg-yellow-95/10 border border-yellow-55 dark:border-yellow-55/50 rounded-lg px-3 py-2.5 mb-2 flex items-start gap-2">
+                  <span class="text-yellow-55 dark:text-yellow-55 text-lg leading-none">⚠️</span>
+                  <span class="text-yellow-55 dark:text-yellow-55 paragraph-inter-13-regular flex-1">${warning}</span>
+                </div>
+              `
+            )}
+          </div>
+        `
+          : nothing
+      }
+
+      <div class="flex justify-between gap-3 mt-6">
+        <div class="flex gap-3">
+          <lukso-button variant="text" @click=${this.close}>
+            Cancel
+          </lukso-button>
+          <lukso-button variant="secondary" @click=${this.goBackFromPreview}>
+            Back
+          </lukso-button>
+        </div>
+        <lukso-button
+          variant="primary"
+          @click=${this.confirmRestore}
+        >
+          Confirm Restore
+        </lukso-button>
+      </div>
+    `
+  }
+
+  private renderSuccessStep() {
+    return html`
+      <!-- Success header with icon -->
+      <div class="text-center mb-6">
+        <div class="w-16 h-16 mx-auto mb-4 bg-green-95 dark:bg-green-95/20 rounded-full flex items-center justify-center">
+          <span class="text-2xl text-green-55">✅</span>
+        </div>
+        <h3 class="text-neutral-20 dark:text-white heading-inter-18-semi-bold mb-2">
+          Wallet Restored Successfully!
+        </h3>
+        <p class="text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
+          ${
+            this.restoredAddresses.length > 0
+              ? `Imported ${this.restoredAddresses.length} address${this.restoredAddresses.length > 1 ? 'es' : ''} to your wallet.`
+              : 'Your wallet has been restored successfully.'
+          }
+        </p>
+      </div>
+      
+      <!-- Restored addresses -->
+      ${
+        this.restoredAddresses.length > 0
+          ? html`
+        <div class="mb-6">
+          <div class="mb-3 text-neutral-20 dark:text-neutral-90 paragraph-inter-14-semi-bold">
+            Restored Addresses:
+          </div>
+          ${this.restoredAddresses.map(
+            (address: string) => html`
+            <div class="bg-green-95 dark:bg-green-95/10 border border-green-60 dark:border-green-60/50 rounded-lg px-3 py-2.5 mb-2 flex items-center gap-2">
+              <span class="text-green-60 dark:text-green-45 text-sm">✓</span>
+              <span class="text-neutral-20 dark:text-white paragraph-inter-13-regular font-mono flex-1">${this.truncateAddress(address)}</span>
+            </div>
+          `
+          )}
+        </div>
+      `
+          : ''
+      }
+
+      <!-- Action buttons for success -->
+      <div class="flex justify-center mt-6">
+        <lukso-button variant="primary" @click=${this.close}>
+          OK
+        </lukso-button>
+      </div>
+    `
+  }
+
+  private getStepTitle(): string {
+    switch (this.currentStep) {
+      case Step.UPLOAD:
+        return 'Restore Wallet'
+      case Step.PASSWORD:
+        return 'Enter Password'
+      case Step.PREVIEW:
+        return 'Review Changes'
+      case Step.SUCCESS:
+        return 'Restore Complete'
+      default:
+        return 'Restore Wallet'
+    }
+  }
+
+  private triggerFileInput() {
+    const input = this.shadowRoot?.querySelector(
+      'input[type="file"]'
+    ) as HTMLInputElement
+    if (input) {
+      input.click()
+    }
+  }
+
+  private async handleFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement
+    const file = input.files?.[0]
+    if (file) {
+      await this.handleFile(file)
+    }
+  }
+
+  private handleDragOver(e: DragEvent) {
+    e.preventDefault()
+    this.isDragging = true
+  }
+
+  private handleDragLeave() {
+    this.isDragging = false
+  }
+
+  private async handleDrop(e: DragEvent) {
+    e.preventDefault()
+    this.isDragging = false
+
+    const file = e.dataTransfer?.files?.[0]
+    if (file) {
+      await this.handleFile(file)
+    }
+  }
+
+  private async handleFile(file: File) {
+    this.fileError = null
+
+    if (!file.name.endsWith('.json')) {
+      this.fileError = 'Please select a valid JSON backup file'
+      return
+    }
+
+    try {
+      // Use passkey-auth readBackupFile function
+      const backup = await readBackupFile(file)
+
+      this.selectedFile = file
+      this.backupData = backup
+
+      // Check if encrypted (handle both current and legacy formats)
+      const isEncrypted = backup.encryptedSecrets // Legacy: always encrypted if encryptedSecrets exists
+        ? true
+        : backup.secrets?.encrypted // Current: check encrypted flag
+
+      if (isEncrypted) {
+        this.currentStep = Step.PASSWORD
+      } else {
+        // Unencrypted backup - preview directly
+        await this.previewRestore()
+      }
+    } catch (error) {
+      this.fileError =
+        error instanceof Error ? error.message : 'Failed to read backup file'
+      console.error('Failed to read backup file:', error)
+    }
+  }
+
+  private async previewRestore() {
+    if (!this.backupData) return
+
+    this.isRestoring = true
+    this.passwordErrors = []
+
+    try {
+      // First, we need to decrypt the backup if it's encrypted
+      let decryptedBackup = this.backupData
+
+      if (
+        this.backupData.encryptedSecrets ||
+        this.backupData.secrets?.encrypted
+      ) {
+        // PREVIEW ONLY: Use verify to check password and get preview data (don't actually import yet)
+        if (!this.keyGenerator) {
+          throw new Error('KeyGenerator not available')
+        }
+
+        // Use verifyBackup for preview - this validates password and returns public data only
+        const verifiedBackup = await this.keyGenerator.verifyBackup(
+          this.backupData,
+          this.password
+        )
+
+        // Use the verified backup data (which has filtered public data)
+        decryptedBackup = verifiedBackup
+      } else {
+        // Unencrypted - use data directly for preview (no import needed)
+        decryptedBackup = this.backupData
+      }
+
+      // Extract all controller addresses from the backup
+      const backupControllers = new Set<string>()
+
+      // Get addresses from the secrets (the actual private keys we're restoring)
+      const secretsData = (decryptedBackup.secrets?.data as any[]) || []
+      for (const secret of secretsData) {
+        if (secret.address) {
+          backupControllers.add(secret.address.toLowerCase())
+        }
+      }
+
+      // Also get controllers from account metadata (V2 format with networks)
+      for (const account of decryptedBackup.accounts || []) {
+        // V2 format: accounts have networks array with controllers
+        if (account.networks) {
+          for (const network of account.networks) {
+            for (const controller of network.controllers || []) {
+              if (controller.address) {
+                backupControllers.add(controller.address.toLowerCase())
+              }
+            }
+          }
+        }
+      }
+
+      // Also get controllers from LSP23CrossChainDeployment if present
+      const lsp23Deployments =
+        (decryptedBackup as any).LSP23CrossChainDeployment || []
+      for (const deployment of lsp23Deployments) {
+        for (const controller of deployment.initialControllers || []) {
+          if (controller.address) {
+            backupControllers.add(controller.address.toLowerCase())
+          }
+        }
+      }
+
+      console.log(
+        '🔍 [RestoreModal] Found controller addresses:',
+        Array.from(backupControllers)
+      )
+
+      // Extract addresses from the decrypted backup for preview
+      for (const secret of secretsData) {
+        if (secret.address) {
+          backupControllers.add(secret.address.toLowerCase())
+        }
+      }
+
+      // For now, mark all addresses as 'new' - could enhance this later
+      this.controllers = Array.from(backupControllers).map((address) => ({
+        address,
+        status: 'new' as const,
+      }))
+
+      this.currentStep = Step.PREVIEW
+    } catch (error) {
+      console.error('Failed to preview restore:', error)
+      const errorMessage =
+        error instanceof Error ? error.message : 'Failed to preview restore'
+
+      // Check for password-specific errors
+      if (errorMessage.toLowerCase().includes('password')) {
+        this.passwordErrors = ['Incorrect password. Please try again.']
+      } else {
+        // For non-password errors, set as file error to show in upload step
+        this.fileError = errorMessage
+        this.currentStep = Step.UPLOAD
+        // Clear the file selection so user can try again
+        this.selectedFile = null
+        this.backupData = null
+        // Clear the file input
+        const input = this.shadowRoot?.querySelector(
+          'input[type="file"]'
+        ) as HTMLInputElement
+        if (input) {
+          input.value = ''
+        }
+      }
+    } finally {
+      this.isRestoring = false
+    }
+  }
+
+  private async confirmRestore() {
+    if (!this.backupData || !this.keyGenerator) {
+      console.error(
+        '❌ [RestoreModal] Missing backup data or keyGenerator for restore'
+      )
+      this.dispatchEvent(
+        new CustomEvent('error', {
+          detail: { error: 'Missing backup data or keyGenerator' },
+          bubbles: true,
+          composed: true,
+        })
+      )
+      return
+    }
+
+    try {
+      this.isRestoring = true
+      console.log('🔄 [RestoreModal] Starting secure restoration process...')
+
+      // ✅ SECURE: Use keyGenerator.restoreFromBackup internally
+      const result = await this.keyGenerator.restoreFromBackup(
+        this.backupData,
+        this.password
+      )
+
+      if (result.success) {
+        console.log('✅ [RestoreModal] Restore successful:', result.addresses)
+
+        // Store restored addresses for display on success screen
+        this.restoredAddresses = result.addresses
+
+        // Emit success event (only public addresses, no sensitive data)
+        this.dispatchEvent(
+          new CustomEvent('success', {
+            detail: { addresses: result.addresses },
+            bubbles: true,
+            composed: true,
+          })
+        )
+
+        // Move to success step
+        this.currentStep = Step.SUCCESS
+      } else {
+        console.error('❌ [RestoreModal] Restore failed')
+        this.dispatchEvent(
+          new CustomEvent('error', {
+            detail: {
+              error:
+                'Restore failed. Please check the backup file and password.',
+            },
+            bubbles: true,
+            composed: true,
+          })
+        )
+      }
+    } catch (error) {
+      console.error('❌ [RestoreModal] Restore error:', error)
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error'
+
+      this.dispatchEvent(
+        new CustomEvent('error', {
+          detail: { error: errorMessage },
+          bubbles: true,
+          composed: true,
+        })
+      )
+    } finally {
+      this.isRestoring = false
+    }
+  }
+
+  private goBack() {
+    if (this.currentStep === Step.PASSWORD) {
+      this.currentStep = Step.UPLOAD
+      this.password = ''
+      this.passwordErrors = []
+    }
+  }
+
+  private goBackFromPreview() {
+    // Go back to password step (or upload if unencrypted)
+    const isEncrypted = this.backupData?.encryptedSecrets
+      ? true
+      : this.backupData?.secrets?.encrypted
+
+    if (isEncrypted) {
+      this.currentStep = Step.PASSWORD
+    } else {
+      this.currentStep = Step.UPLOAD
+    }
+    // Clear preview data
+    this.controllers = []
+    this.validationWarnings = []
+  }
+
+  private close() {
+    this.isOpen = false
+    this.dispatchEvent(
+      new CustomEvent('close', { bubbles: true, composed: true })
+    )
+
+    // Reset state after animation
+    setTimeout(() => {
+      this.currentStep = Step.UPLOAD
+      this.selectedFile = null
+      this.backupData = null
+      this.fileError = null
+      this.isDragging = false
+      this.password = ''
+      this.passwordErrors = []
+      this.isRestoring = false
+      this.walletData = null
+      this.restoredAddresses = []
+      this.controllers = []
+      this.validationWarnings = []
+    }, 300)
+  }
+
+  private truncateAddress(address: string): string {
+    if (!address || address.length < 10) return address
+    return `${address.slice(0, 6)}...${address.slice(-4)}`
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'restore-modal': RestoreModal
+  }
+}