@lukso/up-connector 0.4.0-dev.a8c9315

package/dist/wagmi-CVuDs_0h.d.ts

@@ -0,0 +1,386 @@
+import { TemplateResult } from 'lit';
+
+interface WalletConnector {
+    id: string;
+    name?: string;
+    rdns?: string;
+    slug?: string;
+    type: 'embedded' | 'extension' | 'mobile' | 'injected' | 'walletconnect';
+    connect: () => Promise<void>;
+    getProvider?: () => Promise<any>;
+}
+interface ConnectModalSetup {
+    /**
+     * Wagmi config instance
+     */
+    wagmiConfig: any;
+    /**
+     * Optional chain ID to use for connections (defaults to first chain in config)
+     */
+    chainId?: number;
+    /**
+     * Optional embedded wallet ID (to identify it in wagmi connectors)
+     * If provided, this connector will be shown first as "Create Passkey Wallet"
+     * Example: 'dev.lukso.auth'
+     */
+    embeddedWalletId?: string;
+}
+interface WagmiConnector {
+    uid: string;
+    name: string;
+    id: string;
+    type: string;
+    icon?: string;
+    [key: string]: any;
+}
+type ConnectModalTheme = 'light' | 'dark' | 'auto';
+type ConnectionModalView = 'up_connection' | 'qr_code' | 'eoa_connection';
+type Wallet = {
+    id: string;
+    name: string;
+    slug: string;
+    description: string;
+    homepage: string;
+    chains: string[];
+    versions: string[];
+    sdks: string[];
+    app_type: string;
+    category: string;
+    image_id: string;
+    image_url: WalletImageUrl;
+    app: WalletApp;
+    rdns: string;
+    mobile: WalletMobile;
+    desktop: WalletDesktop;
+    isInstalled: boolean;
+    connector: WalletConnector | undefined;
+};
+type WalletImageUrl = {
+    sm: string;
+    md: string;
+    lg: string;
+};
+type WalletAppType = 'browser' | 'ios' | 'android' | 'mac' | 'windows' | 'linux' | 'chrome' | 'firefox' | 'safari' | 'edge' | 'opera';
+type WalletApp = {
+    [key in WalletAppType]?: string;
+};
+interface WalletMobile {
+    native?: string;
+    universal?: string;
+}
+interface WalletDesktop {
+    native?: string;
+    universal?: string;
+}
+
+/**
+ * EOA Connection View - Lit Component
+ *
+ * Displays available EOA (Externally Owned Account) wallets for connection.
+ */
+
+declare const EoaConnectionView_base: any;
+declare class EoaConnectionView extends EoaConnectionView_base {
+    connectors: WalletConnector[];
+    private isConnecting;
+    private connectingRdns;
+    /**
+     * Get WalletConnect connector
+     */
+    private get walletConnectConnector();
+    /**
+     * Get EOA connectors
+     */
+    private get eoaConnectors();
+    /**
+     * Get supported wallet IDs based on device type
+     *
+     * @returns
+     */
+    private supportedWalletIds;
+    /**
+     * Task to fetch EOA wallets - handles loading/error states automatically
+     */
+    private walletsTask;
+    /**
+     * Get device type
+     */
+    private deviceType;
+    /**
+     * Close modal
+     */
+    private handleClose;
+    /**
+     * Back to initial screen
+     */
+    private handleBack;
+    /**
+     * Handle wallet connect click
+     *
+     * @param wallet
+     */
+    private handleConnect;
+    /**
+     * Connect to wallet on desktop using selected connector
+     *
+     * @param wallet
+     */
+    private connectDesktop;
+    /**
+     * Connect to wallet on mobile using WalletConnect
+     */
+    private connectMobile;
+    /**
+     * Render the list of EOA wallets
+     */
+    private renderWalletsList;
+    /**
+     * Main render method
+     */
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'eoa-connection-view': EoaConnectionView;
+    }
+}
+
+/**
+ * Connection View - Lit Component
+ *
+ * Main connection view displaying primary Lukso connectors and option to show EOA connectors.
+ */
+
+declare const ConnectionView_base: any;
+declare class ConnectionView extends ConnectionView_base {
+    isConnecting: boolean;
+    connectingRdns: string | undefined;
+    connectors: WalletConnector[];
+    /**
+     * Get WalletConnect connector
+     */
+    private get walletConnectConnector();
+    /**
+     * Universal Profile browser extension connector
+     */
+    private get upExtensionConnector();
+    /**
+     * Passkey / Embedded wallet connector
+     */
+    private get embeddedWalletConnector();
+    /**
+     * Get browser extension store info
+     */
+    private get extensionStore();
+    /**
+     * Check if browser supports extension installation
+     */
+    private get browserSupportExtension();
+    /**
+     * Handle connect via embedded wallet
+     */
+    private handleConnectEmbedded;
+    /**
+     * Handle connect via UP Extension
+     */
+    private handleConnectExtension;
+    /**
+     * Handle connect via UP Mobile (WalletConnect)
+     */
+    private handleConnectMobile;
+    /**
+     * Close modal
+     */
+    private handleClose;
+    /**
+     * Handle showing EOA connections
+     */
+    private handleShowEoaConnections;
+    /**
+     * Handle showing QR code
+     */
+    private handleShowQrCode;
+    /**
+     * Render connector button
+     *
+     * @param iconName
+     * @param label
+     * @param onClick
+     * @param isLoading
+     * @param isDisabled
+     */
+    private renderConnectorButton;
+    private renderConnectors;
+    /**
+     * Render divider with text
+     */
+    private renderDivider;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'connection-view': ConnectionView;
+    }
+}
+
+/**
+ * QR Code View - Lit Component
+ *
+ * Displays Wallet Connect QR code for mobile connection.
+ */
+
+declare const QrCodeView_base: any;
+declare class QrCodeView extends QrCodeView_base {
+    data: string | undefined;
+    /**
+     * Back to initial screen
+     */
+    private handleBack;
+    /**
+     * Close modal
+     */
+    private handleClose;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qr-code-view': QrCodeView;
+    }
+}
+
+/**
+ * Connect Modal - Lit Component
+ *
+ * Framework-agnostic connection modal for wallet/profile connections.
+ */
+
+declare const ConnectModal_base: any;
+declare class ConnectModal extends ConnectModal_base {
+    open: boolean;
+    theme: ConnectModalTheme;
+    private connectors;
+    private isDark;
+    private modalView;
+    private qrCodeData;
+    private mediaQueryList;
+    updated(changedProperties: Map<string, any>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handle system theme changes
+     *
+     * @param event
+     */
+    private handleMediaQueryChange;
+    /**
+     * Close modal
+     */
+    handleClose(): void;
+    /**
+     * Update isDark state based on theme property
+     */
+    private updateTheme;
+    private loadConnectors;
+    /**
+     * Successful connection handler
+     *
+     * @param connector
+     */
+    private handleOnConnectSuccess;
+    /**
+     * Error connection handler
+     *
+     * @param error
+     */
+    private handleOnConnectError;
+    private handleBackToConnectionView;
+    private handleShowEoaConnectionsView;
+    private handleShowQrCodeView;
+    /**
+     * Render modal content based on current view flag
+     */
+    private renderModalContent;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'connect-modal': ConnectModal;
+    }
+}
+
+/**
+ * Wagmi Connector Adapter
+ * Converts wagmi/viem connectors to our WalletConnector format
+ */
+
+/**
+ * Convert a wagmi connector to our WalletConnector format
+ * @param connector - Wagmi connector instance
+ * @param connectFn - Function to call connect (from wagmi's useConnect)
+ * @param chainId - Optional chain ID to use for connection
+ */
+declare function fromWagmiConnector(connector: WagmiConnector, connectFn: (options: {
+    connector: WagmiConnector;
+    chainId?: number;
+}) => Promise<any>, chainId?: number): WalletConnector;
+/**
+ * Convert array of wagmi connectors to WalletConnector array
+ * @param connectors - Array of wagmi connectors
+ * @param connectFn - Function to call connect (from wagmi's useConnect)
+ * @param chainId - Optional chain ID to use for connection
+ * @param embeddedWalletId - Optional embedded wallet ID to identify it (e.g., 'dev.lukso.auth')
+ */
+declare function fromWagmiConnectors(connectors: WagmiConnector[], connectFn: (options: {
+    connector: WagmiConnector;
+    chainId?: number;
+}) => Promise<any>, chainId?: number, embeddedWalletId?: string): WalletConnector[];
+/**
+ * Setup wagmi for connect modal
+ * Call this once from your app initialization with wagmi config
+ *
+ * @example
+ * ```typescript
+ * import { setupConnectModal } from '@lukso/up-connector'
+ * import { wagmiConfig } from './wagmi-config'
+ *
+ * setupConnectModal({
+ *   wagmiConfig,
+ *   chainId: 42, // Optional: LUKSO mainnet
+ *   embeddedWalletConnect: async () => {
+ *     // Your passkey wallet logic
+ *   }
+ * })
+ * ```
+ */
+declare function setupConnectModal(setup: ConnectModalSetup): void;
+/**
+ * Get the current wagmi setup (for internal use by connector)
+ */
+declare function getWagmiSetup(): ConnectModalSetup | null;
+/**
+ * Get current wagmi account state
+ * Returns null if wagmi is not set up
+ */
+declare function getWagmiAccount(): Promise<{
+    isConnected: boolean;
+    address?: string;
+    chainId?: number;
+    connector?: any;
+} | null>;
+/**
+ * Subscribe to wagmi account changes
+ * Returns unsubscribe function
+ */
+declare function watchWagmiAccount(callback: (account: {
+    isConnected: boolean;
+    address?: string;
+    chainId?: number;
+    connector?: any;
+}) => void): Promise<(() => void) | null>;
+/**
+ * Disconnect from wagmi
+ * Returns true if disconnect was successful
+ */
+declare function disconnectWagmi(): Promise<boolean>;
+
+export { ConnectModal as C, type WalletConnector as W, type WagmiConnector as a, type ConnectionModalView as b, type ConnectModalSetup as c, type ConnectModalTheme as d, disconnectWagmi as e, getWagmiSetup as f, getWagmiAccount as g, fromWagmiConnector as h, fromWagmiConnectors as i, type Wallet as j, setupConnectModal as s, watchWagmiAccount as w };

package/package.json

@@ -0,0 +1,158 @@
+{
+  "name": "@lukso/up-connector",
+  "version": "0.4.0-dev.a8c9315",
+  "description": "Universal Profile connector with draggable avatar and connection modal",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./avatar": {
+      "types": "./dist/avatar.d.ts",
+      "import": "./dist/avatar.js",
+      "require": "./dist/avatar.cjs"
+    },
+    "./intl": {
+      "types": "./dist/intl.d.ts",
+      "import": "./dist/intl.js",
+      "require": "./dist/intl.cjs"
+    },
+    "./device": {
+      "types": "./dist/device.d.ts",
+      "import": "./dist/device.js",
+      "require": "./dist/device.cjs"
+    },
+    "./modal": {
+      "types": "./dist/modal.d.ts",
+      "import": "./dist/modal.js",
+      "require": "./dist/modal.cjs"
+    },
+    "./backup-modal": {
+      "types": "./dist/backup-modal.d.ts",
+      "import": "./dist/backup-modal.js",
+      "require": "./dist/backup-modal.cjs"
+    },
+    "./restore-modal": {
+      "types": "./dist/restore-modal.d.ts",
+      "import": "./dist/restore-modal.js",
+      "require": "./dist/restore-modal.cjs"
+    },
+    "./connect-modal": {
+      "types": "./dist/connect-modal/index.d.ts",
+      "import": "./dist/connect-modal/index.js",
+      "require": "./dist/connect-modal/index.cjs"
+    },
+    "./auto-setup": {
+      "types": "./dist/auto-setup.d.ts",
+      "import": "./dist/auto-setup.js",
+      "require": "./dist/auto-setup.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "lukso",
+    "universal-profile",
+    "web3",
+    "wallet",
+    "connector",
+    "avatar",
+    "modal",
+    "blockchain"
+  ],
+  "author": "LUKSO",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lukso-network/up-connector.git"
+  },
+  "dependencies": {
+    "@lit/task": "^1.0.3",
+    "@lukso/up-provider": "npm:@lukso-network/up-provider@0.3.5-main.c50af46",
+    "@lukso/web-components": "^1.171.2",
+    "debug": "^4.4.3",
+    "lit": "^3.3.1",
+    "ws": "^8.18.3",
+    "zxcvbn": "^4.4.2",
+    "@lukso/core": "0.1.0-dev.a8c9315",
+    "@lukso/passkey-auth": "1.0.2-dev.a8c9315",
+    "@lukso/transaction-view-core": "0.3.1-dev.a8c9315",
+    "@lukso/transaction-view-headless": "0.2.2-dev.a8c9315"
+  },
+  "peerDependencies": {
+    "@wagmi/connectors": "^7.0.0",
+    "@wagmi/core": "^3.0.0",
+    "viem": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@wagmi/connectors": {
+      "optional": true
+    },
+    "@wagmi/core": {
+      "optional": true
+    },
+    "viem": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/debug": "^4.1.12",
+    "@types/zxcvbn": "^4.4.5",
+    "@wagmi/connectors": "^7.0.2",
+    "@wagmi/core": "^3.0.0",
+    "autoprefixer": "^10.4.22",
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
+    "tailwindcss": "^3.4.18",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "viem": "^2.41.2",
+    "vitest": "^4.0.15"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts",
+      "src/avatar.ts",
+      "src/intl.ts",
+      "src/device.ts",
+      "src/modal.ts",
+      "src/backup-modal.ts",
+      "src/restore-modal.ts",
+      "src/connect-modal/index.ts",
+      "src/wagmi-adapter.ts",
+      "src/auto-setup.ts"
+    ],
+    "format": [
+      "cjs",
+      "esm"
+    ],
+    "dts": true,
+    "splitting": true,
+    "sourcemap": true,
+    "clean": false,
+    "minify": false,
+    "external": [
+      "@lukso/transaction-view-core"
+    ]
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "dev-alt": "tsup --watch",
+    "serve": "node dev-server.js",
+    "dev:serve": "pnpm build && pnpm serve",
+    "clean": "rm -rf dist",
+    "deploy:prepare": "./deploy.sh",
+    "test": "vitest",
+    "test:run": "vitest run"
+  }
+}

package/src/account-modal.ts

@@ -0,0 +1,142 @@
+/**
+ * Account Modal - Lit Component
+ *
+ * Framework-agnostic account management modal showing connected wallet details.
+ * Uses lukso-modal from @lukso/web-components for consistent UI.
+ */
+
+import { html } from 'lit'
+import { customElement, property } 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'
+
+@customElement('account-modal')
+export class AccountModal extends CoreLitElement {
+  // Public properties
+  @property({ type: Boolean, reflect: true }) open = false
+  @property({ type: String }) theme: 'light' | 'dark' | 'auto' = 'auto'
+  @property({ type: String }) address = ''
+  @property({ type: Number }) chainId?: number
+  @property({ type: String }) connectorName = ''
+
+  private close() {
+    this.open = false
+    this.dispatchEvent(new CustomEvent('close'))
+  }
+
+  private handleDisconnect() {
+    this.dispatchEvent(new CustomEvent('disconnect'))
+    this.close()
+  }
+
+  private getChainName(): string {
+    switch (this.chainId) {
+      case 42:
+        return 'LUKSO Mainnet'
+      case 4201:
+        return 'LUKSO Testnet'
+      default:
+        return this.chainId ? `Chain ${this.chainId}` : 'Unknown Network'
+    }
+  }
+
+  render() {
+    return html`
+      <lukso-modal
+        ?is-open=${this.open}
+        size="small"
+        @on-backdrop-click=${this.close}
+      >
+        <div class="p-6">
+          <!-- Header with close button -->
+          <div class="flex justify-between items-center mb-6">
+            <h2 class="text-xl font-semibold">Connected Account</h2>
+            <button
+              @click=${this.close}
+              class="text-neutral-50 hover:text-neutral-20 transition-colors"
+              aria-label="Close"
+            >
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+
+          <!-- Connection Status -->
+          <div class="flex items-center gap-2 mb-5">
+            <div
+              class="w-2 h-2 rounded-full"
+              style="background: #10b981;"
+            ></div>
+            <span class="text-sm font-semibold" style="color: #10b981;">
+              Connected
+            </span>
+          </div>
+
+          <!-- Address -->
+          <div
+            class="mb-4 p-3 rounded-lg bg-neutral-98 border border-neutral-90"
+          >
+            <div
+              class="text-xs font-semibold text-neutral-50 mb-1.5 uppercase"
+            >
+              Address
+            </div>
+            <div
+              class="text-xs font-mono text-neutral-20 break-all leading-relaxed"
+            >
+              ${this.address}
+            </div>
+          </div>
+
+          <!-- Network & Connector Info -->
+          <div class="grid grid-cols-2 gap-3 mb-5">
+            <div class="p-3 rounded-lg bg-neutral-98 border border-neutral-90">
+              <div
+                class="text-xs font-semibold text-neutral-50 mb-1.5 uppercase"
+              >
+                Network
+              </div>
+              <div class="text-sm font-semibold text-neutral-20">
+                ${this.getChainName()}
+              </div>
+            </div>
+
+            <div class="p-3 rounded-lg bg-neutral-98 border border-neutral-90">
+              <div
+                class="text-xs font-semibold text-neutral-50 mb-1.5 uppercase"
+              >
+                Connector
+              </div>
+              <div class="text-sm font-semibold text-neutral-20">
+                ${this.connectorName || 'Unknown'}
+              </div>
+            </div>
+          </div>
+
+          <!-- Disconnect Button -->
+          <lukso-button
+            variant="danger"
+            is-full-width
+            @click=${this.handleDisconnect}
+          >
+            Disconnect
+          </lukso-button>
+        </div>
+      </lukso-modal>
+    `
+  }
+}