diff --git a/.changeset/ismobile-narrow-viewport.md b/.changeset/ismobile-narrow-viewport.md new file mode 100644 index 00000000000..ca3b76597cf --- /dev/null +++ b/.changeset/ismobile-narrow-viewport.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Show the WalletConnect QR code on desktop browsers with narrow viewports diff --git a/packages/thirdweb/src/utils/web/isMobile.test.ts b/packages/thirdweb/src/utils/web/isMobile.test.ts new file mode 100644 index 00000000000..c7f8ecd855a --- /dev/null +++ b/packages/thirdweb/src/utils/web/isMobile.test.ts @@ -0,0 +1,43 @@ +// @vitest-environment happy-dom +import { afterEach, describe, expect, it, vi } from "vitest"; +import { isMobile } from "./isMobile.js"; + +const DESKTOP_UA = + "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36"; +const IPHONE_UA = + "Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Mobile/15E148 Safari/604.1"; +const ANDROID_UA = + "Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Mobile Safari/537.36"; + +function setUserAgent(userAgent: string) { + vi.spyOn(navigator, "userAgent", "get").mockReturnValue(userAgent); +} + +function setViewportWidth(width: number) { + vi.spyOn(window, "innerWidth", "get").mockReturnValue(width); +} + +describe("isMobile", () => { + afterEach(() => { + vi.restoreAllMocks(); + }); + + it("returns false for a desktop browser with a narrow viewport", () => { + setUserAgent(DESKTOP_UA); + setViewportWidth(500); + + expect(isMobile()).toBe(false); + }); + + it("returns true for iOS", () => { + setUserAgent(IPHONE_UA); + + expect(isMobile()).toBe(true); + }); + + it("returns true for Android", () => { + setUserAgent(ANDROID_UA); + + expect(isMobile()).toBe(true); + }); +}); diff --git a/packages/thirdweb/src/utils/web/isMobile.ts b/packages/thirdweb/src/utils/web/isMobile.ts index 4ca8d58dc69..f41e77bae18 100644 --- a/packages/thirdweb/src/utils/web/isMobile.ts +++ b/packages/thirdweb/src/utils/web/isMobile.ts @@ -71,12 +71,5 @@ export function isMobile(): boolean { return true; } - const isMobileViewport = - typeof window !== "undefined" && window.innerWidth < 640; - - if (isMobileViewport) { - return true; - } - return false; }