cruzo-web3 0.1.1 → 0.1.3

package/README.md

@@ -8,11 +8,6 @@ Web3 addon for [cruzo](https://github.com/MaratBektemirov/cruzo): wallet connect
 npm install cruzo cruzo-web3
 ```
 
-For mobile wallets, also install optional peer dependencies:
-
-```bash
-npm install @tonconnect/sdk @tonconnect/ui @walletconnect/ethereum-provider
-```
 
 ## Public API
 
@@ -83,12 +78,14 @@ Without a Project ID, the **Mobile wallet (WalletConnect)** option stays disable
 TON wallets (extension and mobile app) require a public `tonconnect-manifest.json`.
 
 1. Add the manifest file to your site root (must be reachable over HTTPS in production).
-2. Point `web3Service` to it:
+2. Point `web3Service` to the absolute manifest URL at app bootstrap:
 
 ```ts
-web3Service.setTonManifestUrl(
-  new URL("/tonconnect-manifest.json", window.location.href).href
-);
+import { web3Service } from "cruzo-web3";
+
+const tonManifestUrl = new URL("/tonconnect-manifest.json", window.location.href).href;
+
+web3Service.setTonManifestUrl(tonManifestUrl);
 ```
 
 Example manifest:

package/lib/components/web3-signer/web3-signer.component.ts

@@ -16,6 +16,7 @@ import {
 import type { SignerState, SignerWallet } from "../../types/signer-state";
 import { buildSigningPageUrl } from "../../signing-url";
 import { pubKeyToText } from "../../utils/format-pub-key";
+import { formatWalletError, isWalletUserCancellation } from "../../utils/wallet-error";
 import { web3Service } from "../../web3.service";
 import { isCustomWallet } from "../../web3-wallet";
 
@@ -309,7 +310,9 @@ export class Web3SignerComponent extends AbstractComponent<SignerConfig, any, Si
 
     action()
       .catch((error: unknown) => {
-        this.error$.update(error instanceof Error ? error.message : String(error));
+        if (isWalletUserCancellation(error)) return;
+
+        this.error$.update(formatWalletError(error));
       })
       .finally(() => {
         this.busy$.update(false);

package/lib/components/web3-signing/web3-signing.component.ts

@@ -85,7 +85,6 @@ export class Web3SigningComponent extends AbstractComponent {
   connectedCallback() {
     componentsRegistryService.connectBucket(this.innerBucket);
     super.connectedCallback();
-    this.ensureTonManifest();
     this.updateWalletHint();
     this.setupUrlSync();
   }
@@ -218,12 +217,6 @@ export class Web3SigningComponent extends AbstractComponent {
     return { pubKey: null, signed: false, wallet: null };
   }
 
-  private ensureTonManifest() {
-    if (web3Service.getTonManifestUrl()) return;
-
-    web3Service.setTonManifestUrl(new URL("/tonconnect-manifest.json", window.location.href).href);
-  }
-
   private updateWalletHint() {
     const extensions = detectInjectedWallets();
     const hints = ["Click Connect wallet to choose a provider (extension or mobile app)."];

package/lib/providers/tonconnect.provider.ts

@@ -70,9 +70,12 @@ export class TonConnectProvider implements Web3Provider {
       });
     }
 
-    return this.waitForAccount(() => {
-      void this.ui.openModal();
-    });
+    return this.waitForAccount(
+      () => {
+        void this.ui.openModal();
+      },
+      { watchModalClose: true },
+    );
   }
 
   async disconnect() {
@@ -80,6 +83,7 @@ export class TonConnectProvider implements Web3Provider {
   }
 
   async signMessage(message: string | Uint8Array) {
+    await this.ui.connectionRestored;
     const account = this.requireAccount();
     const text = new TextDecoder().decode(toMessageBytes(message));
 
@@ -114,28 +118,46 @@ export class TonConnectProvider implements Web3Provider {
     return account;
   }
 
-  private waitForAccount(start: () => void) {
+  private waitForAccount(start: () => void, options?: { watchModalClose?: boolean }) {
     return new Promise<PubKey>((resolve, reject) => {
-      const unsubscribe = this.ui.onStatusChange(
+      let settled = false;
+
+      const finish = (action: () => void) => {
+        if (settled) return;
+
+        settled = true;
+        unsubscribeStatus();
+        unsubscribeModal?.();
+        action();
+      };
+
+      const unsubscribeStatus = this.ui.onStatusChange(
         (wallet) => {
           if (!wallet?.account) return;
 
-          unsubscribe();
           const pubKey = this.toPubKey(wallet.account);
           this.onAccountChange?.(pubKey);
-          resolve(pubKey);
+          finish(() => resolve(pubKey));
         },
         (error) => {
-          unsubscribe();
-          reject(error);
+          finish(() => reject(error));
         },
       );
 
+      const unsubscribeModal = options?.watchModalClose
+        ? this.ui.onModalStateChange((state) => {
+            if (state.status === "opened" || this.ui.account) return;
+
+            if (state.closeReason === "action-cancelled") {
+              finish(() => reject(new Error("Connection cancelled")));
+            }
+          })
+        : null;
+
       try {
         start();
       } catch (error) {
-        unsubscribe();
-        reject(error);
+        finish(() => reject(error));
       }
     });
   }

package/lib/utils/wallet-error.ts

@@ -0,0 +1,67 @@
+function readMessage(error: unknown): string {
+  if (typeof error === "string") return error;
+
+  if (error instanceof Error) {
+    return error.message || error.name;
+  }
+
+  if (error && typeof error === "object") {
+    const record = error as Record<string, unknown>;
+    const message = record.message;
+
+    if (typeof message === "string" && message.length) return message;
+    if (message && typeof message === "object") {
+      const nested = message as Record<string, unknown>;
+
+      if (typeof nested.message === "string" && nested.message.length) {
+        return nested.message;
+      }
+    }
+
+    if (typeof record.reason === "string" && record.reason.length) {
+      return record.reason;
+    }
+  }
+
+  return "";
+}
+
+function isUserCancellationMessage(message: string) {
+  const text = message.toLowerCase();
+
+  return (
+    text.includes("user rejected") ||
+    text.includes("rejected the request") ||
+    text.includes("request rejected") ||
+    text.includes("action rejected") ||
+    text.includes("connection cancelled") ||
+    text.includes("connection canceled") ||
+    text.includes("wallet was not connected") ||
+    text.includes("was not sent") ||
+    text.includes("sign data canceled") ||
+    text.includes("sign data cancelled") ||
+    text.includes("sign message canceled") ||
+    text.includes("sign message cancelled") ||
+    text.includes("transaction canceled") ||
+    text.includes("transaction cancelled")
+  );
+}
+
+export function isWalletUserCancellation(error: unknown) {
+  if (error && typeof error === "object") {
+    const record = error as Record<string, unknown>;
+
+    if (record.code === 4001 || record.code === "4001") return true;
+    if (record.name === "UserRejectsError") return true;
+  }
+
+  const message = readMessage(error);
+
+  return message.length > 0 && isUserCancellationMessage(message);
+}
+
+export function formatWalletError(error: unknown) {
+  const message = readMessage(error);
+
+  return message || "Wallet request failed";
+}

package/lib/web3.service.ts

@@ -118,6 +118,7 @@ export class Web3Service extends AbstractService {
   readonly setup$ = this.newRx(0);
 
   private provider: Web3Provider | null = null;
+  private activeProviderKey: string | null = null;
   private tonManifestUrl: string | null = null;
   private walletConnectProjectId: string | null = null;
   private builtinProviders: Web3WalletSlot[] | null = null;
@@ -170,11 +171,20 @@ export class Web3Service extends AbstractService {
     return getWalletModeLabel(wallet.kind, wallet.transport);
   }
 
-  useProvider(provider: Web3Provider) {
+  useProvider(provider: Web3Provider, key: string | null = null) {
     this.provider = provider;
+    this.activeProviderKey = key;
     return this;
   }
 
+  private walletProviderKey(kind: WalletKind, transport: WalletTransport) {
+    return `${kind}:${transport}`;
+  }
+
+  private customProviderKey(providerId: string) {
+    return `custom:${providerId}`;
+  }
+
   getProvider() {
     return this.provider;
   }
@@ -218,6 +228,12 @@ export class Web3Service extends AbstractService {
     kind: InjectedWalletKind = "ethereum",
     options: InjectedProviderOptions = {},
   ) {
+    const key = this.walletProviderKey(kind, "extension");
+
+    if (this.provider && this.activeProviderKey === key) {
+      return this;
+    }
+
     const provider = createInjectedProvider(
       kind,
       (pubKey) => {
@@ -228,7 +244,7 @@ export class Web3Service extends AbstractService {
       },
     );
 
-    return this.useProvider(provider);
+    return this.useProvider(provider, key);
   }
 
   async useWalletProvider(
@@ -236,6 +252,12 @@ export class Web3Service extends AbstractService {
     transport: WalletTransport = "auto",
     options: WalletProviderOptions = {},
   ) {
+    const key = this.walletProviderKey(kind, transport);
+
+    if (this.provider && this.activeProviderKey === key) {
+      return this;
+    }
+
     const provider = await createWalletProvider(
       kind,
       transport,
@@ -245,7 +267,7 @@ export class Web3Service extends AbstractService {
       this.walletOptions(options),
     );
 
-    return this.useProvider(provider);
+    return this.useProvider(provider, key);
   }
 
   ensureInjectedProvider(
@@ -286,6 +308,8 @@ export class Web3Service extends AbstractService {
     }
 
     await this.provider.disconnect();
+    this.provider = null;
+    this.activeProviderKey = null;
     this.userPubKey$.update(null);
   }
 
@@ -314,8 +338,14 @@ export class Web3Service extends AbstractService {
   }
 
   async useCustomProvider(providerId: string) {
+    const key = this.customProviderKey(providerId);
+
+    if (this.provider && this.activeProviderKey === key) {
+      return this;
+    }
+
     const provider = await this.resolveCustomProvider(providerId);
-    return this.useProvider(provider);
+    return this.useProvider(provider, key);
   }
 
   async connectCustom(providerId: string) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cruzo-web3",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Web3 addon for cruzo: wallet providers, sign, verify",
   "license": "MIT",
   "type": "module",
@@ -31,28 +31,16 @@
     "typecheck": "tsc -p tsconfig.json",
     "prepublishOnly": "npm run typecheck"
   },
+  "dependencies": {
+    "@tonconnect/sdk": "^3.4.1",
+    "@tonconnect/ui": "^3.0.0",
+    "@walletconnect/ethereum-provider": "^2.23.9"
+  },
   "peerDependencies": {
-    "@tonconnect/sdk": ">=3.0.0",
-    "@tonconnect/ui": ">=3.0.0",
-    "@walletconnect/ethereum-provider": ">=2.0.0",
     "cruzo": "0.9.889"
   },
-  "peerDependenciesMeta": {
-    "@tonconnect/sdk": {
-      "optional": true
-    },
-    "@tonconnect/ui": {
-      "optional": true
-    },
-    "@walletconnect/ethereum-provider": {
-      "optional": true
-    }
-  },
   "devDependencies": {
-    "@tonconnect/sdk": "^3.4.1",
-    "@tonconnect/ui": "^3.0.0",
     "@types/node": "20.0.0",
-    "@walletconnect/ethereum-provider": "^2.23.9",
     "cruzo": "0.9.889",
     "typescript": "5.9.3"
   }