thirdweb 5.47.0-nightly-f0d6e343eea28cd49863ba4794b89d6b070c52b2-20240818000714 → 5.47.1-nightly-574ff0295dcbb39f2ddd753c9e8a264498aae99e-20240819000344

package/src/extensions/lens/read/resolveAddress.ts

@@ -0,0 +1,121 @@
+import type { Chain } from "../../../chains/types.js";
+import type { ThirdwebClient } from "../../../client/client.js";
+import { ZERO_ADDRESS } from "../../../constants/addresses.js";
+import { getAddress, isAddress } from "../../../utils/address.js";
+import { withCache } from "../../../utils/promise/withCache.js";
+
+/**
+ * @extension LENS
+ */
+export type ResolveLensAddressParams = {
+  /**
+   * Either a full lens handle, or a lens localName
+   * Examples:
+   * 1. Full handle: "lens/vitalik"
+   * 2. Just local name: "vitalik"
+   */
+  name: string;
+  /**
+   * a [`ThirdwebClient`](https://portal.thirdweb.com/references/typescript/v5/ThirdwebClient)
+   */
+  client: ThirdwebClient;
+  /**
+   * Override parameters for Lens contract, defaults to LensHandle contract on Polygon
+   */
+  overrides?: {
+    /**
+     * The contract address of the [`LensHandle contract`](https://www.lens.xyz/docs/resources/smart-contracts)
+     */
+    lensHandleContractAddress?: string;
+    /**
+     * The chain which `lensHandleContractAddress` is deployed on
+     */
+    chain?: Chain;
+  };
+};
+
+/**
+ * Take in a Lens handle or local-name and return the wallet address behind that handle/local-name.
+ * For example, "lens/vitalik" is a handle, with "lens" being the namespace and "vitalik" being the local name
+ * @extension LENS
+ * @example
+ * ```ts
+ * import { resolveAddress } from "thirdweb/extensions/lens";
+ *
+ * const walletAddress = await resolveAddress({
+ *   name: "vitalik",
+ *   client,
+ * });
+ * ```
+ */
+export async function resolveAddress(
+  options: ResolveLensAddressParams,
+): Promise<string> {
+  const { name, overrides, client } = options;
+  if (isAddress(name)) {
+    return getAddress(name);
+  }
+  return withCache(
+    async (): Promise<string> => {
+      const [
+        { getContract },
+        { getTokenId },
+        { ownerOf },
+        { polygon },
+        { LENS_HANDLE_ADDRESS },
+      ] = await Promise.all([
+        import("../../../contract/contract.js"),
+        import("../__generated__/LensHandle/read/getTokenId.js"),
+        import("../../erc721/__generated__/IERC721A/read/ownerOf.js"),
+        import("../../../chains/chain-definitions/polygon.js"),
+        import("../consts.js"),
+      ]);
+      const contract = getContract({
+        address: overrides?.lensHandleContractAddress || LENS_HANDLE_ADDRESS,
+        chain: overrides?.chain || polygon,
+        client,
+      });
+      /**
+       * For better UX, we accept both handle and local name
+       * The difference: handle = <namespace>/<local-name>
+       * For example, "lens/vitalik" is a handle, with "lens" being the namespace and "vitalik" being the local name
+       * Currently there's only 1 namespace called "lens" but we should make sure the code can scale when there are more
+       *
+       * Since lens does not allow "/" in the name,
+       * if the string contains "/", it is either invalid, or it definitely contains the namespace
+       * In that case we remove the possible namespace because the `getTokenId` method only accepts localName
+       */
+      const isPossibleHandle = name.includes("/");
+      const localName = isPossibleHandle ? name.split("/")[1] : name;
+      if (!localName) {
+        throw new Error(`missing local name from ${name}`);
+      }
+      const tokenId = await getTokenId({ contract, localName });
+      if (!tokenId) {
+        throw new Error(
+          `Could not retrieve tokenId from localName: ${localName}`,
+        );
+      }
+
+      /**
+       * Another thing to note is that even if you enter an invalid localName,
+       * `getTokenId` still returns you a tokenId - so never rely on the result alone.
+       * Check if the tokenId truly exists using `exists` or in this case, `ownerOf`
+       */
+      const address = await ownerOf({ contract, tokenId }).catch(
+        () => ZERO_ADDRESS,
+      );
+      if (address === ZERO_ADDRESS) {
+        throw new Error(
+          `Could not fetch the wallet address for lens handle: ${name}`,
+        );
+      }
+      return address;
+    },
+    {
+      cacheKey: `lens:addr:${name}`,
+      // 1min cache
+      cacheTime: 60 * 1000,
+    },
+  );
+}

package/src/extensions/vote/read/getAll.ts

@@ -42,7 +42,7 @@ export type ProposalItem = {
    */
   stateLabel: string | undefined;
   /**
-   * The current vote info. See type ProposalVoteInfo for more context
+   * The current vote info. See type [`ProposalVoteInfo`](https://portal.thirdweb.com/references/typescript/v5/ProposalItem) for more context
    */
   votes: ProposalVoteInfo;
   /**

package/src/extensions/vote/read/getProposalVoteCounts.ts

@@ -12,6 +12,7 @@ export type ProposalVoteInfo = { [K in keyof typeof VoteType]: bigint };
  * Get the info about Against, For and Abstain votes of a proposal
  * @param options
  * @returns the object containing the info about Against, For and Abstain votes of a proposal
+ * Note: the count is displayed in "wei"
  * @extension VOTE
  * @example
  * ```ts
@@ -21,9 +22,9 @@ export type ProposalVoteInfo = { [K in keyof typeof VoteType]: bigint };
  *
  * // Example result
  * {
- *   against: 12n, // 12 users voted against the proposal
- *   for: 104n, // 104 users support the proposal
- *   abstain: 3n, // 3 users voted abstain on this proposal
+ *   for: 12000000000000000000n, // 12 tokens (with a decimals of 18) were used to vote "for"
+ *   against: 7000000000000000000n, // 7 tokens (with a decimals of 18) were used to vote "against"
+ *   abstain: 0n, // no user has voted abstain on this proposal
  * }
  * ```
  */

package/src/react/core/hooks/transaction/useSendAndConfirmTransaction.ts

@@ -1,9 +1,21 @@
 import { type UseMutationResult, useMutation } from "@tanstack/react-query";
+import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
 import { sendAndConfirmTransaction } from "../../../../transaction/actions/send-and-confirm-transaction.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { TransactionReceipt } from "../../../../transaction/types.js";
 import { useActiveAccount } from "../wallets/useActiveAccount.js";
 
+/**
+ * Configuration for the `useSendTransaction` hook.
+ */
+export type SendAndConfirmTransactionConfig = {
+  /**
+   * Configuration for gasless transactions.
+   * Refer to [`GaslessOptions`](https://portal.thirdweb.com/references/typescript/v5/GaslessOptions) for more details.
+   */
+  gasless?: GaslessOptions;
+};
+
 /**
  * A hook to send a transaction.
  * @returns A mutation object to send a transaction.
@@ -15,14 +27,26 @@ import { useActiveAccount } from "../wallets/useActiveAccount.js";
  * // later
  * sendAndConfirmTx(tx);
  * ```
+ *
+ *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```tsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ * const mutation = useSendAndConfirmTransaction({
+ *   gasless: {
+ *     provider: "engine",
+ *     relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *     relayerForwarderAddress: "0x...",
+ *   }
+ * });
+ * ```
  * @transaction
  */
-export function useSendAndConfirmTransaction(): UseMutationResult<
-  TransactionReceipt,
-  Error,
-  PreparedTransaction
-> {
+export function useSendAndConfirmTransaction(
+  config: SendAndConfirmTransactionConfig = {},
+): UseMutationResult<TransactionReceipt, Error, PreparedTransaction> {
   const account = useActiveAccount();
+  const { gasless } = config;
   return useMutation({
     mutationFn: async (transaction) => {
       if (!account) {
@@ -31,6 +55,7 @@ export function useSendAndConfirmTransaction(): UseMutationResult<
       return await sendAndConfirmTransaction({
         transaction,
         account,
+        gasless,
       });
     },
   });

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

@@ -19,6 +19,17 @@ import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/useSwitc
  * sendTx(tx);
  * ```
  *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```tsx
+ * import { useSendTransaction } from "thirdweb/react";
+ * const mutation = useSendTransaction({
+ *   gasless: {
+ *     provider: "engine",
+ *     relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *     relayerForwarderAddress: "0x...",
+ *   }
+ * });
+ * ```
  * @transaction
  */
 export function useSendTransaction(config: SendTransactionConfig = {}) {

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

@@ -214,6 +214,7 @@ export const ConnectedWalletDetails: React.FC<{
           border: `1px solid ${theme.colors.borderColor}`,
           textOverflow: "ellipsis",
           width: "115px",
+          height: "50px",
           whiteSpace: "nowrap",
           borderRadius: `0 ${radius.md} ${radius.md} 0`,
         }}

package/src/react/web/ui/TransactionButton/index.tsx

@@ -15,6 +15,8 @@ import { Button } from "../components/buttons.js";
  * @param props - The props for this component.
  * Refer to [TransactionButtonProps](https://portal.thirdweb.com/references/typescript/v5/TransactionButtonProps) for details.
  * @example
+ *
+ * ### Basic usage
  * ```tsx
  * <TransactionButton
  *   transaction={() => {}}
@@ -24,7 +26,8 @@ import { Button } from "../components/buttons.js";
  *   Confirm Transaction
  * </TransactionButton>
  * ```
- * Customize the styling by passing the `unstyled` prop and your inline styles and/or classes:
+ *
+ * ### Customize the styling by passing the `unstyled` prop and your inline styles and/or classes:
  * ```tsx
  * <TransactionButton
  *   transaction={() => {}}
@@ -35,7 +38,7 @@ import { Button } from "../components/buttons.js";
  * </TransactionButton>
  * ```
  *
- * Handle errors
+ * ### Handle errors
  * ```tsx
  * <TransactionButton
  *   transaction={() => ...}
@@ -48,7 +51,7 @@ import { Button } from "../components/buttons.js";
  * </TransactionButton>
  * ```
  *
- * Alert when a transaction is sent
+ * ### Alert when a transaction is sent
  * ```tsx
  * <TransactionButton
  *   transaction={() => ...}
@@ -61,7 +64,7 @@ import { Button } from "../components/buttons.js";
  * </TransactionButton>
  * ```
  *
- * Alert when a transaction is completed
+ * ### Alert when a transaction is completed
  * ```tsx
  * <TransactionButton
  *   transaction={() => ...}
@@ -75,7 +78,7 @@ import { Button } from "../components/buttons.js";
  * </TransactionButton>
  * ```
  *
- * The onClick prop, if provided, will be called before the transaction is sent.
+ * ### The onClick prop, if provided, will be called before the transaction is sent.
  * ```tsx
  * <TransactionButton
  *   onClick={() => alert("Transaction is about to be sent")}
@@ -85,7 +88,7 @@ import { Button } from "../components/buttons.js";
  * </TransactionButton>
  * ```
  *
- * Attach custom Pay metadata
+ * ### Attach custom Pay metadata
  * ```tsx
  * <TransactionButton
  *   payModal={{
@@ -99,6 +102,19 @@ import { Button } from "../components/buttons.js";
  *   ...
  * </TransactionButton>
  * ```
+ *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```tsx
+ * <TransactionButton
+ *   gasless={{
+ *     provider: "engine",
+ *     relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *     relayerForwarderAddress: "0x...",
+ *   }}
+ * >
+ *   ...
+ * </TransactionButton>
+ * ```
  * @component
  */
 export function TransactionButton(props: TransactionButtonProps) {

package/src/transaction/actions/send-and-confirm-transaction.ts

@@ -12,6 +12,8 @@ import { waitForReceipt } from "./wait-for-tx-receipt.js";
  * @throws An error if the wallet is not connected.
  * @transaction
  * @example
+ *
+ * ### Basic usage
  * ```ts
  * import { sendAndConfirmTransaction } from "thirdweb";
  *
@@ -20,6 +22,19 @@ import { waitForReceipt } from "./wait-for-tx-receipt.js";
  *  transaction
  * });
  * ```
+ *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```ts
+ * const transactionReceipt = await sendAndConfirmTransaction({
+ *  account,
+ *  transaction,
+ *  gasless: {
+ *    provider: "engine",
+ *    relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *    relayerForwarderAddress: "0x...",
+ *  }
+ * });
+ * ```
  */
 export async function sendAndConfirmTransaction(
   options: SendTransactionOptions,

package/src/transaction/actions/send-transaction.ts

@@ -99,6 +99,19 @@ export type SendTransactionOptions = {
  *  transaction,
  * });
  * ```
+ *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```ts
+ * const { transactionHash } = await sendTransaction({
+ *  account,
+ *  transaction,
+ *  gasless: {
+ *    provider: "engine",
+ *    relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *    relayerForwarderAddress: "0x...",
+ *  }
+ * });
+ * ```
  */
 export async function sendTransaction(
   options: SendTransactionOptions,

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.47.0-nightly-f0d6e343eea28cd49863ba4794b89d6b070c52b2-20240818000714";
+export const version = "5.47.1-nightly-574ff0295dcbb39f2ddd753c9e8a264498aae99e-20240819000344";