thirdweb 5.52.0-nightly-3a32b11a80cb28f22575219ab8f80e703793ec10-20240906000338 → 5.52.0

package/src/react/core/utils/structuralSharing.ts

@@ -0,0 +1,53 @@
+import { replaceEqualDeep } from "@tanstack/react-query";
+
+/** Forked from https://github.com/epoberezkin/fast-deep-equal */
+// biome-ignore lint/suspicious/noExplicitAny: This function by nature takes any object
+export function deepEqual(a: any, b: any) {
+  if (a === b) return true;
+
+  if (a && b && typeof a === "object" && typeof b === "object") {
+    if (a.constructor !== b.constructor) return false;
+
+    let length: number;
+    let i: number;
+
+    if (Array.isArray(a) && Array.isArray(b)) {
+      length = a.length;
+      if (length !== b.length) return false;
+      for (i = length; i-- !== 0; ) if (!deepEqual(a[i], b[i])) return false;
+      return true;
+    }
+
+    if (a.valueOf !== Object.prototype.valueOf)
+      return a.valueOf() === b.valueOf();
+    if (a.toString !== Object.prototype.toString)
+      return a.toString() === b.toString();
+
+    const keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length) return false;
+
+    for (i = length; i-- !== 0; )
+      // biome-ignore lint/style/noNonNullAssertion: We know its there
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i]!)) return false;
+
+    for (i = length; i-- !== 0; ) {
+      const key = keys[i];
+
+      if (key && !deepEqual(a[key], b[key])) return false;
+    }
+
+    return true;
+  }
+
+  // true if both NaN, false otherwise
+  // biome-ignore lint/suspicious/noSelfCompare: <explanation>
+  return a !== a && b !== b;
+}
+
+export function structuralSharing<T>(oldData: T | undefined, newData: T) {
+  if (deepEqual(oldData, newData)) {
+    return oldData as T;
+  }
+  return replaceEqualDeep(oldData, newData) as T;
+}

package/src/react/core/utils/wallet.ts

@@ -5,11 +5,13 @@ import type { ThirdwebClient } from "../../../client/client.js";
 import { resolveAvatar } from "../../../extensions/ens/resolve-avatar.js";
 import { resolveName } from "../../../extensions/ens/resolve-name.js";
 import { shortenAddress } from "../../../utils/address.js";
+import { parseAvatarRecord } from "../../../utils/ens/avatar.js";
 import { getWalletInfo } from "../../../wallets/__generated__/getWalletInfo.js";
 import type { Account, Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { WalletInfo } from "../../../wallets/wallet-info.js";
 import type { WalletId } from "../../../wallets/wallet-types.js";
 import { useWalletBalance } from "../hooks/others/useWalletBalance.js";
+import { useSocialProfiles } from "../social/useSocialProfiles.js";
 
 /**
  * Get the ENS name and avatar for an address
@@ -98,6 +100,11 @@ export function useConnectedWalletDetails(
     ensName: ensNameQuery.data,
   });
 
+  const socialProfileQuery = useSocialProfiles({
+    client,
+    address: activeAccount?.address,
+  });
+
   const shortAddress = activeAccount?.address
     ? shortenAddress(activeAccount.address, 4)
     : "";
@@ -110,11 +117,31 @@ export function useConnectedWalletDetails(
   });
 
   const addressOrENS = ensNameQuery.data || shortAddress;
+  const pfpUnresolved = socialProfileQuery.data?.filter((p) => p.avatar)[0]
+    ?.avatar;
+
+  const { data: pfp } = useQuery({
+    queryKey: ["ens-avatar", pfpUnresolved],
+    queryFn: async () => {
+      if (!pfpUnresolved) {
+        return undefined;
+      }
+      return parseAvatarRecord({ client, uri: pfpUnresolved });
+    },
+    enabled: !!pfpUnresolved,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+  });
+  const name =
+    socialProfileQuery.data?.filter((p) => p.name)[0]?.name || addressOrENS;
 
   return {
+    socialProfileQuery,
     ensNameQuery,
     ensAvatarQuery,
     addressOrENS,
+    pfp,
+    name,
     shortAddress,
     balanceQuery,
   };

package/src/react/native/ui/components/WalletImage.tsx

@@ -21,9 +21,9 @@ export const WalletImage = (props: {
   theme: Theme;
   wallet: Wallet;
   size: number;
-  ensAvatar?: string | null;
+  avatar?: string | null;
 }) => {
-  const { wallet, ensAvatar, size } = props;
+  const { wallet, avatar, size } = props;
 
   const { data: imageData } = useQuery({
     queryKey: ["wallet-image", wallet.id, wallet.getAccount()?.address],
@@ -56,10 +56,10 @@ export const WalletImage = (props: {
 
       return WALLET_ICON;
     },
-    enabled: !ensAvatar,
+    enabled: !avatar,
   });
 
-  const data = ensAvatar || imageData || WALLET_ICON;
+  const data = avatar || imageData || WALLET_ICON;
   return <RNImage theme={props.theme} data={data} size={size} />;
 };
 

package/src/react/native/ui/connect/ConnectedButton.tsx

@@ -22,13 +22,12 @@ export function ConnectedButton(
   const theme = parseTheme(props.theme);
   const { account, wallet } = props;
   const walletChain = useActiveWalletChain();
-  const { ensAvatarQuery, addressOrENS, balanceQuery } =
-    useConnectedWalletDetails(
-      props.client,
-      walletChain,
-      account,
-      props.detailsButton?.displayBalanceToken,
-    );
+  const { pfp, name, balanceQuery } = useConnectedWalletDetails(
+    props.client,
+    walletChain,
+    account,
+    props.detailsButton?.displayBalanceToken,
+  );
   return (
     <ThemedButton
       theme={theme}
@@ -41,12 +40,7 @@ export function ConnectedButton(
       }}
     >
       <View style={styles.row}>
-        <WalletImage
-          theme={theme}
-          size={40}
-          wallet={wallet}
-          ensAvatar={ensAvatarQuery.data}
-        />
+        <WalletImage theme={theme} size={40} wallet={wallet} avatar={pfp} />
         <View style={styles.col}>
           <ThemedText
             theme={theme}
@@ -55,7 +49,7 @@ export function ConnectedButton(
               color: theme.colors.primaryButtonText,
             }}
           >
-            {addressOrENS}
+            {name}
           </ThemedText>
           {balanceQuery.data ? (
             <ThemedText

package/src/react/native/ui/connect/ConnectedModal.tsx

@@ -163,24 +163,18 @@ export function ConnectedModal(props: ConnectedModalProps) {
 const AccountHeader = (props: ConnectedModalProps) => {
   const { account, wallet, theme } = props;
   const walletChain = useActiveWalletChain();
-  const { ensAvatarQuery, addressOrENS, balanceQuery } =
-    useConnectedWalletDetails(
-      props.client,
-      walletChain,
-      account,
-      props.detailsButton?.displayBalanceToken,
-    );
+  const { pfp, name, balanceQuery } = useConnectedWalletDetails(
+    props.client,
+    walletChain,
+    account,
+    props.detailsButton?.displayBalanceToken,
+  );
   return (
     <View style={styles.accountHeaderContainer}>
-      <WalletImage
-        theme={theme}
-        size={70}
-        wallet={wallet}
-        ensAvatar={ensAvatarQuery.data}
-      />
+      <WalletImage theme={theme} size={70} wallet={wallet} avatar={pfp} />
       <SmartAccountBadge client={props.client} theme={theme} />
       <Spacer size="smd" />
-      <Address account={account} theme={theme} addressOrENS={addressOrENS} />
+      <Address account={account} theme={theme} addressOrENS={name} />
       <Spacer size="xxs" />
       {balanceQuery.data ? (
         <ThemedText

package/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -544,9 +544,6 @@ function ConnectButtonInner(
         showAllWallets: props.showAllWallets,
         walletConnect: props.walletConnect,
         wallets: props.wallets,
-        hideReceiveFunds: props.detailsModal?.hideReceiveFunds,
-        hideSendFunds: props.detailsModal?.hideSendFunds,
-        hideBuyFunds: props.detailsModal?.hideBuyFunds,
       }}
     />
   );

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -131,13 +131,12 @@ export const ConnectedWalletDetails: React.FC<{
   const activeAccount = useActiveAccount();
   const walletChain = useActiveWalletChain();
 
-  const { ensAvatarQuery, addressOrENS, balanceQuery } =
-    useConnectedWalletDetails(
-      client,
-      walletChain,
-      activeAccount,
-      props.detailsButton?.displayBalanceToken,
-    );
+  const { pfp, name, balanceQuery } = useConnectedWalletDetails(
+    client,
+    walletChain,
+    activeAccount,
+    props.detailsButton?.displayBalanceToken,
+  );
 
   function closeModal() {
     setRootEl(null);
@@ -185,8 +184,7 @@ export const ConnectedWalletDetails: React.FC<{
     );
   }
 
-  const avatarSrc =
-    props.detailsButton?.connectedAccountAvatarUrl ?? ensAvatarQuery.data;
+  const avatarSrc = props.detailsButton?.connectedAccountAvatarUrl || pfp;
 
   return (
     <WalletInfoButton
@@ -235,7 +233,7 @@ export const ConnectedWalletDetails: React.FC<{
           weight={500}
           className={`${TW_CONNECTED_WALLET}__address`}
         >
-          {props.detailsButton?.connectedAccountName ?? addressOrENS}
+          {props.detailsButton?.connectedAccountName ?? name}
         </Text>
 
         {/* Balance */}
@@ -280,13 +278,12 @@ function DetailsModal(props: {
   const { client, locale } = props;
   const walletChain = useActiveWalletChain();
   const activeAccount = useActiveAccount();
-  const { ensAvatarQuery, addressOrENS, balanceQuery } =
-    useConnectedWalletDetails(
-      client,
-      walletChain,
-      activeAccount,
-      props.displayBalanceToken,
-    );
+  const { pfp, name, balanceQuery } = useConnectedWalletDetails(
+    client,
+    walletChain,
+    activeAccount,
+    props.displayBalanceToken,
+  );
   const theme = parseTheme(props.theme);
 
   const activeWallet = useActiveWallet();
@@ -370,8 +367,7 @@ function DetailsModal(props: {
     </MenuButton>
   );
 
-  const avatarSrc =
-    props.detailsModal?.connectedAccountAvatarUrl ?? ensAvatarQuery.data;
+  const avatarSrc = props.detailsModal?.connectedAccountAvatarUrl ?? pfp;
 
   const { hideSendFunds, hideReceiveFunds, hideBuyFunds } =
     props.detailsModal || {};
@@ -483,7 +479,7 @@ function DetailsModal(props: {
             }}
           >
             <Text color="primaryText" weight={500} size="md">
-              {props.detailsModal?.connectedAccountName ?? addressOrENS}
+              {props.detailsModal?.connectedAccountName ?? name}
             </Text>
             <IconButton>
               <CopyIcon
@@ -1154,9 +1150,6 @@ export type DetailsModalConnectOptions = {
   chains?: Chain[];
   recommendedWallets?: Wallet[];
   showAllWallets?: boolean;
-  hideSendFunds?: boolean;
-  hideReceiveFunds?: boolean;
-  hideBuyFunds?: boolean;
 };
 
 export type UseWalletDetailsModalOptions = {
@@ -1380,6 +1373,27 @@ export type UseWalletDetailsModalOptions = {
    * Use custom avatar URL for the connected wallet image in the `ConnectButton` Details Modal, overriding ENS avatar or Blobbie icon.
    */
   connectedAccountAvatarUrl?: string;
+
+  /**
+   * Hide the "Send Funds" button in the Details Modal.
+   *
+   * By default the "Send Funds" button is shown.
+   */
+  hideSendFunds?: boolean;
+
+  /**
+   * Hide the "Receive Funds" button in the Details Modal.
+   *
+   * By default the "Receive Funds" button is shown.
+   */
+  hideReceiveFunds?: boolean;
+
+  /**
+   * Hide the "Buy Funds" button in the Details Modal.
+   *
+   * By default the "Buy Funds" button is shown.
+   */
+  hideBuyFunds?: boolean;
 };
 
 /**
@@ -1434,6 +1448,9 @@ export function useWalletDetailsModal() {
               showTestnetFaucet: props.showTestnetFaucet,
               connectedAccountName: props.connectedAccountName,
               connectedAccountAvatarUrl: props.connectedAccountAvatarUrl,
+              hideBuyFunds: props.hideBuyFunds,
+              hideReceiveFunds: props.hideReceiveFunds,
+              hideSendFunds: props.hideSendFunds,
             }}
             displayBalanceToken={props.displayBalanceToken}
             theme={props.theme || "dark"}

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -97,7 +97,13 @@ export type BuyScreenProps = {
  * @internal
  */
 export default function BuyScreen(props: BuyScreenProps) {
-  const supportedDestinationsQuery = useBuySupportedDestinations(props.client);
+  const isTestMode = props.payOptions.buyWithCrypto
+    ? props.payOptions.buyWithCrypto.testMode
+    : undefined;
+  const supportedDestinationsQuery = useBuySupportedDestinations(
+    props.client,
+    isTestMode,
+  );
 
   if (!supportedDestinationsQuery.data) {
     return <LoadingScreen />;

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts

@@ -50,7 +50,8 @@ export function useToTokenSelectionStates(options: {
       // use active chain if its supported as destination
       supportedDestinations.find((x) => x.chain.id === activeChain?.id)
         ?.chain ||
-      // default to polygon
+      // default to the first chain in supportedDestinations, or polygon if nothing is found at all
+      supportedDestinations[0]?.chain ||
       polygon,
   );
 

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.ts

@@ -36,11 +36,14 @@ export type SupportedChainAndTokens = Array<{
 
 export async function fetchBuySupportedDestinations(
   client: ThirdwebClient,
+  isTestMode?: boolean,
 ): Promise<SupportedChainAndTokens> {
   return withCache(
     async () => {
       const fetchWithHeaders = getClientFetch(client);
-      const res = await fetchWithHeaders(getPaySupportedDestinations());
+      const res = await fetchWithHeaders(
+        `${getPaySupportedDestinations()}?isTestMode=${isTestMode}`,
+      );
       const data = (await res.json()) as Response;
       return data.result.map((item) => ({
         chain: defineChain({
@@ -59,11 +62,14 @@ export async function fetchBuySupportedDestinations(
 /**
  * @internal
  */
-export function useBuySupportedDestinations(client: ThirdwebClient) {
+export function useBuySupportedDestinations(
+  client: ThirdwebClient,
+  isTestMode?: boolean,
+) {
   return useQuery({
     queryKey: ["destination-tokens", client],
     queryFn: async () => {
-      return fetchBuySupportedDestinations(client);
+      return fetchBuySupportedDestinations(client, isTestMode);
     },
   });
 }

package/src/social/profiles.ts

@@ -0,0 +1,46 @@
+import type { ThirdwebClient } from "../client/client.js";
+import { getThirdwebBaseUrl } from "../utils/domains.js";
+import { getClientFetch } from "../utils/fetch.js";
+import type { SocialProfiles } from "./types.js";
+
+/**
+ * Fetches the wallet's available social profiles.
+ * @param args - The arguments to use when fetching the social profiles.
+ * @param args.address - The wallet address to fetch the social profiles for.
+ * @param args.client - The Thirdweb client.
+ * @returns A promise resolving to the retrieved social profiles for different protocols. If a profile is not available for a protocol, the value will be `null`.
+ *
+ * @example
+ * ```ts
+ * import { getProfiles } from "thirdweb/social";
+ * const profiles = await getProfiles({
+ *   address: "0x...",
+ *   client,
+ * });
+ * ```
+ * @beta
+ */
+export async function getSocialProfiles(args: {
+  address: string;
+  client: ThirdwebClient;
+}): Promise<SocialProfiles> {
+  const { address, client } = args;
+
+  const clientFetch = getClientFetch(client);
+  const response = await clientFetch(
+    `${getThirdwebBaseUrl("social")}/v1/profiles/${address}`,
+  );
+
+  if (response.status !== 200) {
+    try {
+      const errorBody = await response.json();
+      throw new Error(`Failed to fetch profile: ${errorBody.message}`);
+    } catch {
+      throw new Error(
+        `Failed to fetch profile: ${response.status}\n${await response.text()}`,
+      );
+    }
+  }
+
+  return (await response.json()).data as SocialProfiles;
+}

package/src/social/types.ts

@@ -0,0 +1,43 @@
+export type FarcasterProfile = {
+  fid?: number;
+  bio?: string;
+  pfp?: string;
+  display?: string;
+  username?: string;
+  custodyAddress?: string;
+  addresses?: string[];
+};
+
+export type LensProfile = {
+  name?: string;
+  bio?: string;
+  picture?: string;
+  coverPicture?: string;
+};
+
+export type EnsProfile = {
+  name?: string;
+  address?: string;
+  avatar?: string;
+  display?: string;
+  description?: string;
+  keywords?: string[];
+  email?: string;
+  mail?: string;
+  notice?: string;
+  location?: string;
+  phone?: string;
+  url?: string;
+  twitter?: string;
+  github?: string;
+  discord?: string;
+  telegram?: string;
+};
+
+export type SocialProfiles = {
+  type: "farcaster" | "lens" | "ens";
+  name?: string;
+  avatar?: string;
+  bio?: string;
+  metadata?: FarcasterProfile | LensProfile | EnsProfile;
+}[];

package/src/utils/domains.ts

@@ -4,6 +4,11 @@ type DomainOverrides = {
    * @default "rpc.thirdweb.com"
    */
   rpc?: string;
+  /**
+   * The base URL for the social service.
+   * @default "social.thirdweb.com"
+   */
+  social?: string;
   /**
    * The base URL for the in-app wallet service
    * @default "embedded-wallet.thirdweb.com"
@@ -28,6 +33,7 @@ type DomainOverrides = {
 
 export const DEFAULT_RPC_URL = "rpc.thirdweb.com";
 const DEFAULT_IN_APP_WALLET_URL = "embedded-wallet.thirdweb.com";
+const DEFAULT_SOCIAL_URL = "social.thirdweb.com";
 const DEFAULT_PAY_URL = "pay.thirdweb.com";
 const DEFAULT_STORAGE_URL = "storage.thirdweb.com";
 const DEFAULT_BUNDLER_URL = "bundler.thirdweb.com";
@@ -35,6 +41,7 @@ const DEFAULT_BUNDLER_URL = "bundler.thirdweb.com";
 let domains: { [k in keyof DomainOverrides]-?: string } = {
   rpc: DEFAULT_RPC_URL,
   inAppWallet: DEFAULT_IN_APP_WALLET_URL,
+  social: DEFAULT_SOCIAL_URL,
   pay: DEFAULT_PAY_URL,
   storage: DEFAULT_STORAGE_URL,
   bundler: DEFAULT_BUNDLER_URL,
@@ -47,6 +54,7 @@ export const setThirdwebDomains = (DomainOverrides: DomainOverrides) => {
   domains = {
     rpc: DomainOverrides.rpc ?? DEFAULT_RPC_URL,
     inAppWallet: DomainOverrides.inAppWallet ?? DEFAULT_IN_APP_WALLET_URL,
+    social: DomainOverrides.social ?? DEFAULT_SOCIAL_URL,
     pay: DomainOverrides.pay ?? DEFAULT_PAY_URL,
     storage: DomainOverrides.storage ?? DEFAULT_STORAGE_URL,
     bundler: DomainOverrides.bundler ?? DEFAULT_BUNDLER_URL,

package/src/utils/function-id.ts

@@ -1,11 +1,9 @@
-import { sha256 } from "@noble/hashes/sha256";
-import { uint8ArrayToHex } from "./encoding/hex.js";
+import { randomBytesHex } from "./random.js";
 
 // biome-ignore lint/suspicious/noExplicitAny: the whoel point here is to accept anything
 type AnyFunction = (...args: any[]) => any;
 
-// WeakMap should be fine, if we de-reference the function, it should be garbage collected
-const functionIdCache = new WeakMap<AnyFunction, string>();
+const functionIdCache = new Map<AnyFunction, string>();
 
 /**
  * Retrieves the unique identifier for a given function.
@@ -20,7 +18,7 @@ export function getFunctionId(fn: AnyFunction) {
     // biome-ignore lint/style/noNonNullAssertion: the `has` above ensures that this will always be set
     return functionIdCache.get(fn)!;
   }
-  const id = uint8ArrayToHex(sha256(fn.toString()));
+  const id = randomBytesHex();
   functionIdCache.set(fn, id);
   return id;
 }

package/src/utils/ipfs.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, it } from "vitest";
 import { createThirdwebClient } from "../client/client.js";
-import { findIPFSCidFromUri, resolveScheme } from "./ipfs.js";
+import {
+  findIPFSCidFromUri,
+  getBaseUriFromBatch,
+  resolveScheme,
+} from "./ipfs.js";
 
 describe("resolveScheme", () => {
   it("should resolve ipfs scheme when not passing a gateway override", () => {
@@ -70,3 +74,55 @@ describe("resolveScheme", () => {
     expect(findIPFSCidFromUri(uri)).toBe(cid);
   });
 });
+
+describe("getBaseUriFromBatch", () => {
+  it("should return the base uri", () => {
+    const batchOfUris = ["ipfs://Qm.../0", "ipfs://Qm.../1", "ipfs://Qm.../2"];
+    const baseUri = getBaseUriFromBatch(batchOfUris);
+    expect(baseUri).toMatchInlineSnapshot(`"ipfs://Qm.../"`);
+  });
+  it("should throw if the batch is empty", () => {
+    expect(() => getBaseUriFromBatch([])).toThrowErrorMatchingInlineSnapshot(
+      "[Error: Batch of URIs is empty]",
+    );
+  });
+
+  it("should throw if an element of the array does not have the same base", () => {
+    const batchOfUris = ["ipfs://Qm.../0", "ipfs://Qm.../1", "ipfs://Qm2.../2"];
+    expect(() =>
+      getBaseUriFromBatch(batchOfUris),
+    ).toThrowErrorMatchingInlineSnapshot(
+      "[Error: All URIs in the batch must have the same base URI]",
+    );
+  });
+
+  it("should work with a custom domain", () => {
+    const batchOfUris = [
+      "https://example.com/0",
+      "https://example.com/1",
+      "https://example.com/2",
+    ];
+    const baseUri = getBaseUriFromBatch(batchOfUris);
+    expect(baseUri).toMatchInlineSnapshot(`"https://example.com/"`);
+  });
+
+  it("should work with a custom domain and path", () => {
+    const batchOfUris = [
+      "https://example.com/path/0",
+      "https://example.com/path/1",
+      "https://example.com/path/2",
+    ];
+    const baseUri = getBaseUriFromBatch(batchOfUris);
+    expect(baseUri).toMatchInlineSnapshot(`"https://example.com/path/"`);
+  });
+
+  it("should work with a custom domain and path with trailing slash", () => {
+    const batchOfUris = [
+      "https://example.com/path/0/",
+      "https://example.com/path/1/",
+      "https://example.com/path/2/",
+    ];
+    const baseUri = getBaseUriFromBatch(batchOfUris);
+    expect(baseUri).toMatchInlineSnapshot(`"https://example.com/path/"`);
+  });
+});

package/src/utils/ipfs.ts

@@ -1,5 +1,4 @@
 import type { ThirdwebClient } from "../client/client.js";
-
 import type { FileOrBufferOrString } from "../storage/upload/types.js";
 
 export type ResolveSchemeOptions = {
@@ -109,23 +108,32 @@ export async function uploadOrExtractURIs<
  * @internal
  */
 export function getBaseUriFromBatch(uris: string[]): string {
-  const urisWithSlashes = uris.map((uri) => new URL(uri));
-  const baseUri = urisWithSlashes[0];
-  for (let i = 0; i < urisWithSlashes.length; i++) {
-    const uri = urisWithSlashes[i];
-    if (baseUri?.host !== uri?.host) {
-      throw new Error(
-        `Can only create batches with the same base URI for every entry in the batch. Expected '${baseUri}' but got '${uri}'`,
-      );
+  const [base, ...rest] = uris.map((uri) => {
+    // remove query parameters
+    // biome-ignore lint/style/noParameterAssign: lemme do my stuff
+    [uri] = uri.split("?") as [string];
+    // remove fragments
+    // biome-ignore lint/style/noParameterAssign: lemme do my stuff
+    [uri] = uri.split("#") as [string];
+
+    // if the URI ends with a `/`, remove it
+    if (uri.endsWith("/")) {
+      // biome-ignore lint/style/noParameterAssign: lemme do my stuff
+      uri = uri.slice(0, -1);
     }
-  }
 
-  if (!baseUri) {
-    throw new Error("No base URI found in the batch");
+    // remove the last part of the URI & add the trailing `/`
+    return `${uri.split("/").slice(0, -1).join("/")}/`;
+  });
+
+  if (!base) {
+    throw new Error("Batch of URIs is empty");
   }
 
-  // Ensure that baseUri ends with trailing slash
-  return `${baseUri.protocol}//${baseUri.host}/`;
+  if (rest.some((uri) => uri !== base)) {
+    throw new Error("All URIs in the batch must have the same base URI");
+  }
+  return base;
 }
 
 function isUriList<T extends FileOrBufferOrString | Record<string, unknown>>(