thirdweb 5.43.2 → 5.43.3-nightly-baefa5e9c7d72fd8645b0e33452a83fc0ef229d4-20240804000345

package/dist/types/transaction/read-contract.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"read-contract.d.ts","sourceRoot":"","sources":["../../../src/transaction/read-contract.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,GAAG,EACR,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,6BAA6B,EAClC,KAAK,uBAAuB,EAE7B,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,KAAK,kBAAkB,EAAuB,MAAM,MAAM,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,KAAK,EACV,sBAAsB,EACtB,YAAY,EACZ,WAAW,EACZ,MAAM,YAAY,CAAC;AAKpB,OAAO,EACL,KAAK,cAAc,EAEpB,MAAM,gCAAgC,CAAC;AAGxC,MAAM,MAAM,kBAAkB,CAAC,OAAO,SAAS,SAAS,YAAY,EAAE,IACpE,OAAO,SAAS;IAAE,MAAM,EAAE,CAAC,CAAA;CAAE,GACzB,KAAK,GACL,OAAO,SAAS;IAAE,MAAM,EAAE,CAAC,CAAA;CAAE,GAE3B,6BAA6B,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAEzC,6BAA6B,CAAC,OAAO,CAAC,CAAC;AAE/C,MAAM,MAAM,mBAAmB,CAC7B,IAAI,SAAS,GAAG,GAAG,EAAE,EACrB,OAAO,SACH,WAAW,GACX,MAAM,GACN,CAAC,CACC,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAC7B,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,IAAI,SAAS;IAAE,MAAM,EAAE,CAAC,CAAA;CAAE,GACvD,WAAW,GAAG,MAAM,GACpB,uBAAuB,CAAC,IAAI,CAAC,EACjC,eAAe,SAAS,cAAc,CACpC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAC3B,GAAG,cAAc,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,IAC5C,sBAAsB,CACxB,IAAI,CACF,kBAAkB,EAChB,MAAM,GACN,IAAI,GACJ,MAAM,GACN,OAAO,GACP,YAAY,GACZ,KAAK,GACL,UAAU,GACV,cAAc,GACd,sBAAsB,GACtB,OAAO,CACV,GAAG;IACF,MAAM,EAAE,OAAO,GAAG,eAAe,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,GAClC,IAAI,CAAC,yBAAyB,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC,EACrE,IAAI,CACL,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAsB,YAAY,CAChC,KAAK,CAAC,IAAI,SAAS,GAAG,EACtB,KAAK,CAAC,OAAO,SAAS,IAAI,SAAS;IACjC,MAAM,EAAE,CAAC,CAAC;CACX,GAEO,WAAW,GACX,YAAY,MAAM,EAAE,GACpB,CAAC,CAAC,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC,GAChE,uBAAuB,CAAC,IAAI,CAAC,EACjC,KAAK,CAAC,eAAe,SAAS,cAAc,CAC1C,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAC3B,GAAG,cAAc,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,EAE9C,OAAO,EAAE,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,eAAe,CAAC,GAC3D,OAAO,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAiFjD"}
+{"version":3,"file":"read-contract.d.ts","sourceRoot":"","sources":["../../../src/transaction/read-contract.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,GAAG,EACR,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,6BAA6B,EAClC,KAAK,uBAAuB,EAE7B,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,KAAK,kBAAkB,EAAuB,MAAM,MAAM,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,KAAK,EACV,sBAAsB,EACtB,YAAY,EACZ,WAAW,EACZ,MAAM,YAAY,CAAC;AAKpB,OAAO,EACL,KAAK,cAAc,EAEpB,MAAM,gCAAgC,CAAC;AAGxC,MAAM,MAAM,kBAAkB,CAAC,OAAO,SAAS,SAAS,YAAY,EAAE,IACpE,OAAO,SAAS;IAAE,MAAM,EAAE,CAAC,CAAA;CAAE,GACzB,KAAK,GACL,OAAO,SAAS;IAAE,MAAM,EAAE,CAAC,CAAA;CAAE,GAE3B,6BAA6B,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAEzC,6BAA6B,CAAC,OAAO,CAAC,CAAC;AAE/C,MAAM,MAAM,mBAAmB,CAC7B,IAAI,SAAS,GAAG,GAAG,EAAE,EACrB,OAAO,SACH,WAAW,GACX,MAAM,GACN,CAAC,CACC,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAC7B,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,IAAI,SAAS;IAAE,MAAM,EAAE,CAAC,CAAA;CAAE,GACvD,WAAW,GAAG,MAAM,GACpB,uBAAuB,CAAC,IAAI,CAAC,EACjC,eAAe,SAAS,cAAc,CACpC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAC3B,GAAG,cAAc,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,IAC5C,sBAAsB,CACxB,IAAI,CACF,kBAAkB,EAChB,MAAM,GACN,IAAI,GACJ,MAAM,GACN,OAAO,GACP,YAAY,GACZ,KAAK,GACL,UAAU,GACV,cAAc,GACd,sBAAsB,GACtB,OAAO,CACV,GAAG;IACF,MAAM,EAAE,OAAO,GAAG,eAAe,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,GAClC,IAAI,CAAC,yBAAyB,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC,EACrE,IAAI,CACL,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAsB,YAAY,CAChC,KAAK,CAAC,IAAI,SAAS,GAAG,EACtB,KAAK,CAAC,OAAO,SAAS,IAAI,SAAS;IACjC,MAAM,EAAE,CAAC,CAAC;CACX,GAEO,WAAW,GACX,YAAY,MAAM,EAAE,GACpB,CAAC,CAAC,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC,GAChE,uBAAuB,CAAC,IAAI,CAAC,EACjC,KAAK,CAAC,eAAe,SAAS,cAAc,CAC1C,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAC3B,GAAG,cAAc,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,EAE9C,OAAO,EAAE,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,eAAe,CAAC,GAC3D,OAAO,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAiFjD"}

package/dist/types/utils/fetch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fetch.d.ts","sourceRoot":"","sources":["../../../src/utils/fetch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAehE;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,SAAS,CAAC,EAAE,SAAS,UANpE,MAAM,SAAS,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,WAgB/C,MAAM,SACJ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG;IAAE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAAE,KACjE,OAAO,CAAC,QAAQ,CAAC,EAsDrB;AAaD;;GAEG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAyBlD;AAKD;;GAEG;AACH,wBAAgB,kBAAkB,uBA0BjC"}
+{"version":3,"file":"fetch.d.ts","sourceRoot":"","sources":["../../../src/utils/fetch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAehE;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,SAAS,CAAC,EAAE,SAAS,UANpE,MAAM,SAAS,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,WAgB/C,MAAM,SACJ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG;IAAE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAAE,KACjE,OAAO,CAAC,QAAQ,CAAC,EAuDrB;AAaD;;GAEG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAyBlD;AAeD;;GAEG;AACH,wBAAgB,kBAAkB,uBA0BjC"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "5.43.2";
+export declare const version = "5.43.3-nightly-baefa5e9c7d72fd8645b0e33452a83fc0ef229d4-20240804000345";
 //# sourceMappingURL=version.d.ts.map

package/dist/types/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,2EAA2E,CAAC"}

package/dist/types/wallets/in-app/web/in-app.d.ts

@@ -36,7 +36,7 @@ import type { CreateWalletArgs } from "../../wallet-types.js";
  *
  * [View all available social auth methods](https://portal.thirdweb.com/references/typescript/v5/InAppWalletSocialAuth)
  *
- * * ### Login with email
+ * ### Login with email
  *
  * ```ts
  * import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
@@ -55,6 +55,7 @@ import type { CreateWalletArgs } from "../../wallet-types.js";
  *   client,
  *   chain,
  *   strategy: "email",
+ *   email: "example@example.com",
  *   verificationCode: "123456",
  * });
  * ```
@@ -77,8 +78,10 @@ import type { CreateWalletArgs } from "../../wallet-types.js";
  *   client,
  *   chain,
  *   strategy: "phone",
+ *   honeNumber: "+1234567890",
  *   verificationCode: "123456",
  * });
+ * ```
  *
  * ### Login with passkey
  *

package/dist/types/wallets/in-app/web/in-app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"in-app.d.ts","sourceRoot":"","sources":["../../../../../src/wallets/in-app/web/in-app.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4JG;AACH,wBAAgB,WAAW,CACzB,aAAa,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAC3C,MAAM,CAAC,OAAO,CAAC,CAUjB"}
+{"version":3,"file":"in-app.d.ts","sourceRoot":"","sources":["../../../../../src/wallets/in-app/web/in-app.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+JG;AACH,wBAAgB,WAAW,CACzB,aAAa,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAC3C,MAAM,CAAC,OAAO,CAAC,CAUjB"}

package/dist/types/wallets/in-app/web/lib/auth/index.d.ts

@@ -49,6 +49,7 @@ export declare function getUserEmail(options: GetAuthenticatedUserParams): Promi
 export declare function getUserPhoneNumber(options: GetAuthenticatedUserParams): Promise<string | undefined>;
 /**
  * Pre-authenticates the user based on the provided authentication strategy.
+ * Use this function to send a verification code to the user's email or phone number.
  * @param args - The arguments required for pre-authentication.
  * @returns A promise that resolves to the pre-authentication result.
  * @throws An error if the provided authentication strategy doesn't require pre-authentication.

package/dist/types/wallets/in-app/web/lib/auth/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/wallets/in-app/web/lib/auth/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,0BAA0B,EAC/B,KAAK,eAAe,EAErB,MAAM,sCAAsC,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAyBhD;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,0BAA0B,uFAWpC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAsB,YAAY,CAAC,OAAO,EAAE,0BAA0B,+BAMrE;AAED;;;;;;;;;;;;GAYG;AACH,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,0BAA0B,+BAM3E;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAsB,eAAe,CAAC,IAAI,EAAE,eAAe,kFAG1D;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAsB,YAAY,CAChC,IAAI,EAAE,KAAK,CACP,YAAY,GACZ;IACE,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB,CACJ,sFAMF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/wallets/in-app/web/lib/auth/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,0BAA0B,EAC/B,KAAK,eAAe,EAErB,MAAM,sCAAsC,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAyBhD;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,0BAA0B,uFAWpC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAsB,YAAY,CAAC,OAAO,EAAE,0BAA0B,+BAMrE;AAED;;;;;;;;;;;;GAYG;AACH,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,0BAA0B,+BAM3E;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAsB,eAAe,CAAC,IAAI,EAAE,eAAe,kFAG1D;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAsB,YAAY,CAChC,IAAI,EAAE,KAAK,CACP,YAAY,GACZ;IACE,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB,CACJ,sFAMF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.43.2",
+  "version": "5.43.3-nightly-baefa5e9c7d72fd8645b0e33452a83fc0ef229d4-20240804000345",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"
@@ -296,12 +296,13 @@
     "expo-linking": "6.3.1",
     "expo-web-browser": "13.0.3",
     "happy-dom": "^14.12.0",
+    "msw": "^2.3.4",
     "react-native": "0.74.2",
     "react-native-aes-gcm-crypto": "0.2.2",
     "react-native-quick-crypto": "0.7.0-rc.6",
     "react-native-svg": "15.3.0",
-    "vitest": "1.6.0",
-    "typescript": "5.5.2"
+    "typescript": "5.5.2",
+    "vitest": "1.6.0"
   },
   "scripts": {
     "bench:compare": "bun run ./benchmarks/run.ts",

package/src/extensions/marketplace/direct-listings/types.ts

@@ -20,4 +20,5 @@ export type DirectListing = {
   endTimeInSeconds: bigint;
   isReservedListing: boolean;
   status: ListingStatus;
+  type: "direct-listing";
 };

package/src/extensions/marketplace/direct-listings/utils.ts

@@ -64,6 +64,7 @@ export async function mapDirectListing(
     endTimeInSeconds: rawListing.endTimestamp,
     isReservedListing: rawListing.reserved,
     status,
+    type: "direct-listing",
   };
 }
 

package/src/extensions/marketplace/english-auctions/types.ts

@@ -23,4 +23,5 @@ export type EnglishAuction = {
   endTimeInSeconds: bigint;
   asset: NFT;
   status: ListingStatus;
+  type: "english-auction";
 };

package/src/extensions/marketplace/english-auctions/utils.ts

@@ -72,5 +72,6 @@ export async function mapEnglishAuction(
     },
     timeBufferInSeconds: rawAuction.timeBufferInSeconds,
     bidBufferBps: rawAuction.bidBufferBps,
+    type: "english-auction",
   };
 }

package/src/react/core/hooks/contract/useContractEvents.ts

@@ -25,10 +25,21 @@ type UseContractEventsOptions<
 };
 
 /**
- * Watches contract events and returns the logs.
- * @param options - The {@link UseContractEventsOptions | options} for watching contract events.
+ * Watches contract events and returns the parsed logs.
+ * @param options - The options for watching contract events.
+ * @param options.contract - The contract to watch events for.
+ * @param options.events - The events to watch. Shuould be an array of [prepared events](https://portal.thirdweb.com/references/typescript/v5/prepareEvent).
+ * @param options.blockRange - The number of blocks to search for events.
+ * @param options.enabled - Whether to enable the query.
+ * @param options.watch - Whether to watch for new events.
  * @returns The contract events of the watched contract events.
  * @example
+ *
+ * ### Using event extensions
+ *
+ * The `thirdweb/extesions` export contains event definitions for many popular contracts.
+ * You can use these event definitions to watch for specific events with a type-safe API.
+ *
  * ```jsx
  * import { useContractEvents } from "thirdweb/react";
  * import { tokensClaimedEvent } from "thirdweb/extensions/erc721";
@@ -39,6 +50,25 @@ type UseContractEventsOptions<
  *  events: [tokensClaimedEvent({ claimer: account?.address })],
  * });
  * ```
+ *
+ * ### Using custom events
+ *
+ * You can also watch for custom events by passing an array of [prepared events](https://portal.thirdweb.com/references/typescript/v5/prepareEvent).
+ *
+ * ```jsx
+ * import { useContractEvents } from "thirdweb/react";
+ * import { prepareEvent } from "thirdweb";
+ *
+ * const myEvent = prepareEvent({
+ *  signature: "event MyEvent(uint256 myArg)",
+ * });
+ *
+ * const contractEvents = useContractEvents({
+ *  contract,
+ *  events: [myEvent],
+ * });
+ * ```
+ *
  * @contract
  */
 export function useContractEvents<

package/src/react/core/hooks/contract/useReadContract.ts

@@ -28,13 +28,29 @@ type PickedQueryOptions = Prettify<
 >;
 
 /**
- * A hook to read from a contract.
+ * A hook to read state from a contract that automatically updates when the contract changes.
+ *
+ * You can use raw read calls or read [extensions](https://portal.thirdweb.com/react/v5/extensions) to read from a contract.
+ *
  * @param options - The options for reading from a contract
- * @returns a query object.
+ * @returns a UseQueryResult object.
  * @example
  * ```jsx
+ * import { getContract } from "thirdweb";
+ * import { sepolia } from "thirdweb/chains";
  * import { useReadContract } from "thirdweb/react";
- * const { data, isLoading } = useReadContract({contract, method: "totalSupply"});
+ *
+ * const contract = getContract({
+ *   client,
+ *   address: "0x...",
+ *   chain: sepolia,
+ * });
+ *
+ * const { data, isLoading } = useReadContract({
+ *   contract,
+ *   method: "function tokenURI(uint256 tokenId) returns (string)"});
+ *   params: [1n],
+ * });
  * ```
  * @contract
  */
@@ -51,14 +67,20 @@ export function useReadContract<
   ReadContractResult<PreparedMethod<ParseMethod<abi, method>>[2]>
 >;
 /**
- * A hook to read from a contract.
+ * A hook to read state from a contract that automatically updates when the contract changes.
+ * You can use raw read calls or read [extensions](https://portal.thirdweb.com/react/v5/extensions) to read from a contract.
+ *
  * @param extension - An extension to call.
  * @param options - The read extension params.
- * @returns a query object.
+ * @returns a UseQueryResult object.
  * @example
+ *
+ * Read a contract extension let you do complex contract queries with less code.
+ *
  * ```jsx
  * import { useReadContract } from "thirdweb/react";
- * import { getOwnedNFTs } form "thirdweb/extensions/erc721"
+ * import { getOwnedNFTs } form "thirdweb/extensions/erc721";
+ *
  * const { data, isLoading } = useReadContract(getOwnedNFTs, { contract, owner: address });
  * ```
  */

package/src/react/core/hooks/others/useWalletBalance.ts

@@ -23,8 +23,8 @@ export type UseWalletBalanceQueryOptions = Omit<
 >;
 
 /**
- * Fetch the balance of a wallet for a specific token.
- * @note Leave `tokenAddress` undefined to fetch the native token balance.
+ * Fetch the balance of a wallet in native currency or for a specific token.
+ * Leave `tokenAddress` undefined to fetch the native token balance.
  * @param options {@link GetWalletBalanceOptions} - The options for fetching the wallet balance.
  * @param options.chain - The chain to fetch the wallet balance from.
  * @param options.address - The address of the wallet to fetch the balance from.
@@ -33,10 +33,25 @@ export type UseWalletBalanceQueryOptions = Omit<
  * @returns {@link GetWalletBalanceResult} The result of the query.
  *
  * @example
+ *
+ * ### Fetching the native token balance
+ *
  * ```ts
  * import { useWalletBalance } from "thirdweb/react";
  *
+ * const { data, isLoading, isError } = useWalletBalance({ chain, address, client });
+ * console.log("balance", data?.displayValue, data?.symbol);
+ * ```
+ *
+ * ### Fetching a specific token balance
+ *
+ * ```ts
+ * import { useWalletBalance } from "thirdweb/react";
+ *
+ * const tokenAddress = "0x..."; // the ERC20 token address
+ *
  * const { data, isLoading, isError } = useWalletBalance({ chain, address, client, tokenAddress });
+ * console.log("balance", data?.displayValue, data?.symbol);
  * ```
  * @wallet
  */

package/src/react/core/hooks/wallets/useActiveAccount.ts

@@ -9,6 +9,7 @@ import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
  * import { useActiveAccount } from "thirdweb/react";
  *
  * const activeAccount = useActiveAccount();
+ * console.log("address", activeAccount?.address);
  * ```
  * @walletConnection
  */

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

@@ -122,6 +122,14 @@ export function useConnectedWalletDetails(
 
 /**
  * Returns the wallet info for the provided wallet id.
+ *
+ * @example
+ * ```tsx
+ * import { useWalletInfo } from "thirdweb/react";
+ *
+ * const { data: walletInfo } = useWalletInfo("io.metamask");
+ * console.log("Walelt name", walletInfo?.name);
+ * ```
  * @wallet
  */
 export function useWalletInfo(id: WalletId | undefined) {
@@ -141,7 +149,17 @@ export function useWalletInfo(id: WalletId | undefined) {
 }
 
 /**
- * Returns the wallet image for the provided wallet id.
+ * Returns the wallet icon for the provided wallet id.
+ *
+ * @example
+ * ```tsx
+ * import { useWalletImage } from "thirdweb/react";
+ *
+ * const { data: walletImage } = useWalletImage("io.metamask");
+ *
+ * return <img src={walletImage} alt="MetaMask logo" />;
+ * ```
+ *
  * @wallet
  */
 export function useWalletImage(id: WalletId | undefined) {

package/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -10,17 +10,87 @@ import { SetRootElementContext } from "../../../core/providers/RootElementContex
 import { TransactionModal } from "../../ui/TransactionButton/TransactionModal.js";
 
 /**
- * A hook to send a transaction.
- * @returns A mutation object to send a transaction.
+ * A hook to send a transaction with from the user's connected wallet.
+ *
+ * You can send a transaction with a [prepared contract call](https://portal.thirdweb.com/references/typescript/v5/prepareContractCall), a [prepared transaction](https://portal.thirdweb.com/references/typescript/v5/prepareTransaction), or using a write [Extension](https://portal.thirdweb.com/react/v5/extensions).
+ *
+ * @returns A UseMutationResult object to send a transaction.
  * @param config Configuration for the `useSendTransaction` hook.
  * Refer to [`SendTransactionConfig`](https://portal.thirdweb.com/references/typescript/v5/SendTransactionConfig) for more details.
  * @example
+ *
+ * ### Using a prepared contract call
+ *
  * ```tsx
  * import { useSendTransaction } from "thirdweb/react";
+ * import { getContract, prepareContractCall } from "thirdweb";
+ * import { sepolia } from "thirdweb/chains";
+ *
+ * const contract = getContract({
+ *   address: "0x...",
+ *   chain: sepolia,
+ *   client,
+ * });
+ *
+ * const { mutate: sendTx, data: transactionResult } = useSendTransaction();
+ *
+ * const onClick = () => {
+ *   const transaction = prepareContractCall({
+ *       contract,
+ *       method: "function transfer(address to, uint256 value)",
+ *       params: [to, value],
+ *     }),
+ *   });
+ *   sendTx(transaction);
+ * };
+ * ```
+ *
+ * ### Using a write extension
+ *
+ * ```tsx
+ * import { useSendTransaction } from "thirdweb/react";
+ * import { mintTo } from "thirdweb/extensions/erc721";
+ *
+ * const { mutate: sendTx, data: transactionResult } = useSendTransaction();
+ *
+ * const onClick = () => {
+ *   const transaction = mintTo({
+ *     contract,
+ *     to: "0x...",
+ *     nft: {
+ *       name: "NFT Name",
+ *       description: "NFT Description",
+ *       image: "https://example.com/image.png",
+ *     },
+ *   });
+ *   sendTx(transaction);
+ * };
+ * ```
+ *
+ * ### Sending a prepared transaction
+ *
+ * ```tsx
+ * import { useSendTransaction } from "thirdweb/react";
+ * import { getContract, prepareTransaction } from "thirdweb";
+ * import { sepolia } from "thirdweb/chains";
+ *
+ * const contract = getContract({
+ *   address: "0x...",
+ *   chain: sepolia,
+ *   client,
+ * });
+ *
  * const { mutate: sendTx, data: transactionResult } = useSendTransaction();
  *
- * // later
- * sendTx(tx);
+ * const onClick = () => {
+ *   const transaction = prepareTransaction({
+ *       contract,
+ *       to: "0x...",
+ *       value: toWei("0.1"),
+ *     }),
+ *   });
+ *   sendTx(transaction);
+ * };
  * ```
  *
  * @transaction

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

@@ -87,14 +87,29 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  * ### Customizing the default chain to connect to
  *
  * ```tsx
- * import { base } from "thirdweb/chains";
+ * import { sepolia } from "thirdweb/chains";
  *
  * <ConnectButton
  *   client={client}
- *   chain={base}
+ *   chain={sepolia}
  * />
  * ```
  *
+ * ### Enabling Account Abstraction
+ *
+ * By passing the `accountAbstraction` prop, ALL connected wallets will be converted to smart accounts.
+ * And by setting `sponsorGas` to `true`, all transactions done with those smart accounts will be sponsored.
+ *
+ * ```tsx
+ * <ConnectButton
+ * client={client}
+ * accountAbstraction={{
+ *   chain: sepolia,
+ *   sponsorGas: true,
+ * }}
+ * />;
+ * ```
+ *
  * ### Enabling sign in with ethereum (Auth)
  *
  * ```tsx

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -96,6 +96,21 @@ import { useSetupScreen } from "./screen.js";
  * />
  * ```
  *
+ * ### Enabling Account Abstraction
+ *
+ * By passing the `accountAbstraction` prop, ALL connected wallets will be converted to smart accounts.
+ * And by setting `sponsorGas` to `true`, all transactions done with those smart accounts will be sponsored.
+ *
+ * ```tsx
+ * <ConnectEmbed
+ * client={client}
+ * accountAbstraction={{
+ *   chain: sepolia,
+ *   sponsorGas: true,
+ * }}
+ * />;
+ * ```
+ *
  * ### Enabling sign in with ethereum (Auth)
  *
  * ```tsx

package/src/react/web/ui/PayEmbed-disconnected.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { render } from "../../../../test/src/react-render.js";
+import { render, waitFor } from "../../../../test/src/react-render.js";
 import { TEST_CLIENT } from "../../../../test/src/test-clients.js";
 import { PayEmbed } from "./PayEmbed.js";
 
@@ -8,8 +8,10 @@ describe.runIf(process.env.TW_SECRET_KEY)(
   () => {
     it("renders a connect wallet button when a wallet is not connected", async () => {
       const { findByText } = render(<PayEmbed client={TEST_CLIENT} />);
-      const connectWalletButton = await findByText("Connect Wallet");
-      expect(connectWalletButton).toBeInTheDocument();
+      waitFor(async () => {
+        const connectWalletButton = await findByText("Connect Wallet");
+        expect(connectWalletButton).toBeInTheDocument();
+      });
     });
   },
 );

package/src/react/web/ui/PayEmbed.test.tsx

@@ -1,6 +1,6 @@
 import { userEvent } from "@testing-library/user-event";
 import { describe, expect, it } from "vitest";
-import { render } from "../../../../test/src/react-render.js";
+import { render, waitFor } from "../../../../test/src/react-render.js";
 import { TEST_CLIENT } from "../../../../test/src/test-clients.js";
 import { PayEmbed } from "./PayEmbed.js";
 
@@ -11,24 +11,25 @@ describe.runIf(!!process.env.TW_SECRET_KEY)(
       const { findByRole } = render(<PayEmbed client={TEST_CLIENT} />, {
         setConnectedWallet: true,
       });
-      const connectWalletButton: HTMLElement = await findByRole("button", {
-        name: "Continue",
-      });
-      // continue button is disabled when no amount is entered
-      expect(connectWalletButton).toBeDisabled();
-
-      // user enters an amount
-      const tokenInput = await findByRole("textbox");
-      await userEvent.type(tokenInput, "1");
+      waitFor(async () => {
+        const connectWalletButton: HTMLElement = await findByRole("button", {
+          name: "Continue",
+        });
+        // continue button is disabled when no amount is entered
+        expect(connectWalletButton).toBeDisabled();
+        // user enters an amount
+        const tokenInput = await findByRole("textbox");
+        await userEvent.type(tokenInput, "1");
 
-      // continue button is enabled
-      expect(connectWalletButton).not.toBeDisabled();
+        // continue button is enabled
+        expect(connectWalletButton).not.toBeDisabled();
 
-      // user clears the amount
-      await userEvent.clear(tokenInput);
+        // user clears the amount
+        await userEvent.clear(tokenInput);
 
-      // continue button is disabled again
-      expect(connectWalletButton).toBeDisabled();
+        // continue button is disabled again
+        expect(connectWalletButton).toBeDisabled();
+      });
     });
   },
 );

package/src/react/web/ui/PayEmbed.tsx

@@ -126,6 +126,8 @@ export type PayEmbedProps = {
   connectOptions?: PayEmbedConnectOptions;
 
   style?: React.CSSProperties;
+
+  className?: string;
 };
 
 /**
@@ -184,10 +186,9 @@ export function PayEmbed(props: PayEmbedProps) {
       </div>
     );
   } else {
-    // show and hide screens with CSS to not lose state when switching between them
     content = (
       <>
-        <div style={{ display: screen === "buy" ? "inherit" : "none" }}>
+        {screen === "buy" && (
           <BuyScreen
             title={metadata?.name || "Buy"}
             isEmbed={true}
@@ -208,7 +209,7 @@ export function PayEmbed(props: PayEmbedProps) {
             connectOptions={props.connectOptions}
             onBack={undefined}
           />
-        </div>
+        )}
 
         {screen === "execute-tx" &&
           props.payOptions?.mode === "transaction" &&
@@ -230,7 +231,11 @@ export function PayEmbed(props: PayEmbedProps) {
 
   return (
     <CustomThemeProvider theme={theme}>
-      <EmbedContainer modalSize="compact">
+      <EmbedContainer
+        modalSize="compact"
+        style={props.style}
+        className={props.className}
+      >
         <DynamicHeight>{content}</DynamicHeight>
       </EmbedContainer>
     </CustomThemeProvider>