fix(WalletConnectConnection): fix wallet connect uri parsing (#2626)

Author: jnsdls

.changeset/heavy-hats-fold.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+fix wallet connect uri parsing

.github/workflows/build-test-lint.yml

@@ -19,6 +19,7 @@ env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
   TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
+  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
 jobs:
   build:
@@ -120,7 +121,7 @@ jobs:
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v4
         with:
-          files: ./packages/thirdweb/coverage/lcov.info
+          directory: ./legacy_packages
 
   test_legacy:
     timeout-minutes: 15
@@ -156,7 +157,7 @@ jobs:
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v4
         with:
-          files: ./legacy_packages/sdk/coverage/evm/lcov.info
+          directory: ./legacy_packages
 
   e2e:
     timeout-minutes: 15

packages/thirdweb/package.json

@@ -225,7 +225,7 @@
     "push": "yalc push",
     "size": "size-limit",
     "test:watch": "vitest -c ./test/vitest.config.ts dev",
-    "test": "CI=true vitest -c ./test/vitest.config.ts --coverage --bail=1",
+    "test": "vitest run -c ./test/vitest.config.ts --coverage --bail=1",
     "test:cov": "vitest dev -c ./test/vitest.config.ts --coverage",
     "test:dev": "vitest dev -c ./test/vitest.config.ts",
     "typedoc": "node scripts/typedoc.mjs",

packages/thirdweb/src/react/web/wallets/shared/WalletConnectConnection.tsx

@@ -9,6 +9,7 @@ import type { WCSupportedWalletIds } from "../../../../wallets/__generated__/wal
 import { isMobile, isAndroid, isIOS } from "../../../../utils/web/isMobile.js";
 import { openWindow } from "../../../../utils/web/openWindow.js";
 import { wait } from "../../../../utils/promise/wait.js";
+import { formatWalletConnectUrl } from "../../../../utils/url.js";
 
 /**
  * QR Scan UI for connecting a specific wallet on desktop.
@@ -49,15 +50,15 @@ export const WalletConnectConnection: React.FC<{
             if (isMobile()) {
               if (isAndroid()) {
                 openWindow(
-                  `${platformUris.android}wc?uri=${encodeURIComponent(uri)}`,
+                  formatWalletConnectUrl(platformUris.android, uri).redirect,
                 );
               } else if (isIOS()) {
                 openWindow(
-                  `${platformUris.ios}wc?uri=${encodeURIComponent(uri)}`,
+                  formatWalletConnectUrl(platformUris.ios, uri).redirect,
                 );
               } else {
                 openWindow(
-                  `${platformUris.other}wc?uri=${encodeURIComponent(uri)}`,
+                  formatWalletConnectUrl(platformUris.other, uri).redirect,
                 );
               }
             }

packages/thirdweb/src/utils/url.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { formatWalletConnectUrl } from "./url.js";
+
+describe("formatWalletConnectUrl", () => {
+  it("should format a wallet connect URL for an HTTP app URL", () => {
+    const appUrl = "https://example.com";
+    const wcUri = "wc:1234567890";
+
+    const result = formatWalletConnectUrl(appUrl, wcUri);
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "href": "https://example.com/",
+        "redirect": "https://example.com/wc?uri=wc%3A1234567890",
+      }
+    `);
+  });
+
+  it("should format a wallet connect URL for a native app URL", () => {
+    const appUrl = "myapp://example";
+    const wcUri = "wc:1234567890";
+
+    const result = formatWalletConnectUrl(appUrl, wcUri);
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "href": "myapp://example/",
+        "redirect": "myapp://example/wc?uri=wc%3A1234567890",
+      }
+    `);
+  });
+});

packages/thirdweb/src/utils/url.ts

@@ -0,0 +1,65 @@
+/**
+ * @internal
+ */
+export function isHttpUrl(url: string) {
+  return url.startsWith("http://") || url.startsWith("https://");
+}
+
+type LinkingRecord = {
+  redirect: string;
+  href: string;
+};
+
+/**
+ * @internal
+ */
+function formatUniversalUrl(appUrl: string, wcUri: string): LinkingRecord {
+  if (!isHttpUrl(appUrl)) {
+    return formatNativeUrl(appUrl, wcUri);
+  }
+  let safeAppUrl = appUrl;
+  if (!safeAppUrl.endsWith("/")) {
+    safeAppUrl = `${safeAppUrl}/`;
+  }
+  const encodedWcUrl = encodeURIComponent(wcUri);
+
+  return {
+    redirect: `${safeAppUrl}wc?uri=${encodedWcUrl}`,
+    href: safeAppUrl,
+  };
+}
+
+/**
+ * @internal
+ */
+function formatNativeUrl(appUrl: string, wcUri: string): LinkingRecord {
+  if (isHttpUrl(appUrl)) {
+    return formatUniversalUrl(appUrl, wcUri);
+  }
+  let safeAppUrl = appUrl;
+  if (!safeAppUrl.includes("://")) {
+    safeAppUrl = appUrl.replaceAll("/", "").replaceAll(":", "");
+    safeAppUrl = `${safeAppUrl}://`;
+  }
+  if (!safeAppUrl.endsWith("/")) {
+    safeAppUrl = `${safeAppUrl}/`;
+  }
+  const encodedWcUrl = encodeURIComponent(wcUri);
+
+  return {
+    redirect: `${safeAppUrl}wc?uri=${encodedWcUrl}`,
+    href: safeAppUrl,
+  };
+}
+
+/**
+ * @internal
+ */
+export function formatWalletConnectUrl(
+  appUrl: string,
+  wcUri: string,
+): LinkingRecord {
+  return isHttpUrl(appUrl)
+    ? formatUniversalUrl(appUrl, wcUri)
+    : formatNativeUrl(appUrl, wcUri);
+}