fix(ui): surface pairing and preimage failures

Author: pgherveou

packages/protocol/src/client.ts

@@ -742,6 +742,14 @@ export function createRemoteChainProvider(
           void postRequest("chainSend", {
             connectionId,
             message: JSON.stringify(message),
+          }).catch((error: unknown) => {
+            const errResponse = buildJsonRpcError(
+              message,
+              serializeError(error),
+            );
+            if (errResponse !== null) {
+              onMessage(errResponse);
+            }
           });
         }
         remote.pendingMessages = [];

packages/ui/src/bridge.ts

@@ -630,18 +630,15 @@ export function requestCoreLogin(
           });
           resolve(result.value);
         } else {
+          const error = new LoginRequestError(result.value);
           emitDotliDebugEvent({
             layer: "sso",
             event: "login_request_failed",
             flowId,
             timestamp: Date.now(),
             payload: { requestId },
           });
-          if (result.value.tag === "Domain") {
-            reject(new LoginRequestError(result.value.value));
-          } else {
-            reject(new Error(JSON.stringify(result.value)));
-          }
+          reject(error);
         }
       } catch (error) {
         emitDotliDebugEvent({

packages/ui/src/host-callbacks/Chain.ts

@@ -41,6 +41,8 @@ import {
 const STATEMENT_SUBMIT_METHOD = "statement_submit";
 const STATEMENT_SUBSCRIBE_METHOD = "statement_subscribeStatement";
 const STATEMENT_UNSUBSCRIBE_METHOD = "statement_unsubscribeStatement";
+const STATEMENT_NOTIFICATION_METHOD = "statement_statement";
+const LOGIN_PROGRESS_EVENT = "dotli:truapi-login-progress";
 
 interface StatementStoreDebugRequest {
   method: string;
@@ -169,9 +171,6 @@ function emitStatementStoreResponse(
   response: string,
   debugRequests: Map<string, StatementStoreDebugRequest>,
 ): void {
-  if (!hasDotliDebugListeners()) {
-    return;
-  }
   let parsed: unknown;
   try {
     parsed = JSON.parse(response);
@@ -182,6 +181,18 @@ function emitStatementStoreResponse(
     return;
   }
   const record = parsed as Record<string, unknown>;
+  const statementPage = parseStatementStorePage(record);
+  if (
+    statementPage !== null &&
+    statementPage.statementCount > 0 &&
+    typeof window !== "undefined"
+  ) {
+    window.dispatchEvent(new Event(LOGIN_PROGRESS_EVENT));
+  }
+
+  if (!hasDotliDebugListeners()) {
+    return;
+  }
   const responseId = jsonRpcId(record.id);
   if (responseId !== null) {
     const request = debugRequests.get(responseId);
@@ -203,9 +214,42 @@ function emitStatementStoreResponse(
     return;
   }
 
-  if (record.method !== STATEMENT_SUBSCRIBE_METHOD) {
+  if (statementPage === null) {
     return;
   }
+  emitSsoStatementStoreResponse({
+    method: statementPage.method,
+    requestKind: "page",
+    frameKind: statementPage.malformed ? "malformed-page" : "page",
+    ...(statementPage.remoteSubscriptionId !== undefined
+      ? { remoteSubscriptionId: statementPage.remoteSubscriptionId }
+      : {}),
+    ...(statementPage.eventName !== undefined
+      ? { eventName: statementPage.eventName }
+      : {}),
+    statementCount: statementPage.statementCount,
+    ...(statementPage.remaining !== undefined
+      ? { remaining: statementPage.remaining }
+      : {}),
+  });
+}
+
+function parseStatementStorePage(record: Record<string, unknown>):
+  | {
+      method: string;
+      malformed: boolean;
+      remoteSubscriptionId?: string;
+      eventName?: string;
+      statementCount: number;
+      remaining?: number;
+    }
+  | null {
+  if (
+    record.method !== STATEMENT_NOTIFICATION_METHOD &&
+    record.method !== STATEMENT_SUBSCRIBE_METHOD
+  ) {
+    return null;
+  }
   const params =
     typeof record.params === "object" && record.params !== null
       ? (record.params as Record<string, unknown>)
@@ -219,19 +263,16 @@ function emitStatementStoreResponse(
       ? (result.data as Record<string, unknown>)
       : null;
   const statements = Array.isArray(data?.statements) ? data.statements : [];
-  emitSsoStatementStoreResponse({
-    method: STATEMENT_SUBSCRIBE_METHOD,
-    requestKind: "page",
-    frameKind: result === null ? "malformed-page" : "page",
+  return {
+    method: record.method,
+    malformed: result === null,
     ...(typeof params?.subscription === "string"
       ? { remoteSubscriptionId: params.subscription }
       : {}),
     ...(typeof result?.event === "string" ? { eventName: result.event } : {}),
     statementCount: statements.length,
-    ...(typeof data?.remaining === "number"
-      ? { remaining: data.remaining }
-      : {}),
-  });
+    ...(typeof data?.remaining === "number" ? { remaining: data.remaining } : {}),
+  };
 }
 
 function statementRequestKind(method: string): string | null {

packages/ui/src/login-request-error.ts

@@ -2,13 +2,34 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { VersionedHostRequestLoginError } from "@parity/truapi";
+import type { CallErrorValue } from "@parity/truapi/scale";
+
+type LoginRequestFailure = CallErrorValue<VersionedHostRequestLoginError>;
 
 export class LoginRequestError extends Error {
-  readonly error: VersionedHostRequestLoginError;
+  readonly error: LoginRequestFailure;
 
-  constructor(error: VersionedHostRequestLoginError) {
-    super(JSON.stringify(error));
+  constructor(error: LoginRequestFailure) {
+    super(formatLoginRequestError(error));
     this.name = "LoginRequestError";
     this.error = error;
   }
 }
+
+export function formatLoginRequestError(error: LoginRequestFailure): string {
+  switch (error.tag) {
+    case "Domain":
+      return formatDomainLoginError(error.value);
+    case "Denied":
+      return "Login request denied";
+    case "Unsupported":
+      return "Login is not supported by this host";
+    case "MalformedFrame":
+    case "HostFailure":
+      return error.value.reason;
+  }
+}
+
+function formatDomainLoginError(error: VersionedHostRequestLoginError): string {
+  return error.value.value.reason;
+}