thirdweb 5.43.3-nightly-ad619a779c05928125490fb113a04eaa12500e25-20240805000406 → 5.44.0

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

@@ -33,6 +33,7 @@ import {
   FARCASTER_ICON,
   GOOGLE_ICON,
   PHONE_ICON,
+  TELEGRAM_ICON,
 } from "../icons/svgs.js";
 import type { ModalState } from "./ConnectModal.js";
 
@@ -50,6 +51,7 @@ const socialIcons = {
   apple: APPLE_ICON,
   discord: DISCORD_ICON,
   farcaster: FARCASTER_ICON,
+  telegram: TELEGRAM_ICON,
 };
 
 type InAppWalletFormUIProps = {

package/src/react/native/ui/icons/svgs.ts

@@ -44,6 +44,19 @@ export const FARCASTER_ICON = `<svg width={width} height={height} viewBox="0 0 1
 <path d="M675.556 746.667C663.283 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.444H875.556V817.778C875.556 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.556Z" fill="white"/>
 </svg>`;
 
+export const TELEGRAM_ICON = `<svg width={width} height={height} viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="99.2583404%" id="linearGradient-1">
+            <stop stop-color="#2AABEE" offset="0%"></stop>
+            <stop stop-color="#229ED9" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Oval" fill="url(#linearGradient-1)" cx="500" cy="500" r="500"></circle>
+        <path d="M226.328419,494.722069 C372.088573,431.216685 469.284839,389.350049 517.917216,369.122161 C656.772535,311.36743 685.625481,301.334815 704.431427,301.003532 C708.567621,300.93067 717.815839,301.955743 723.806446,306.816707 C728.864797,310.92121 730.256552,316.46581 730.922551,320.357329 C731.588551,324.248848 732.417879,333.113828 731.758626,340.040666 C724.234007,419.102486 691.675104,610.964674 675.110982,699.515267 C668.10208,736.984342 654.301336,749.547532 640.940618,750.777006 C611.904684,753.448938 589.856115,731.588035 561.733393,713.153237 C517.726886,684.306416 492.866009,666.349181 450.150074,638.200013 C400.78442,605.66878 432.786119,587.789048 460.919462,558.568563 C468.282091,550.921423 596.21508,434.556479 598.691227,424.000355 C599.00091,422.680135 599.288312,417.758981 596.36474,415.160431 C593.441168,412.561881 589.126229,413.450484 586.012448,414.157198 C581.598758,415.158943 511.297793,461.625274 375.109553,553.556189 C355.154858,567.258623 337.080515,573.934908 320.886524,573.585046 C303.033948,573.199351 268.692754,563.490928 243.163606,555.192408 C211.851067,545.013936 186.964484,539.632504 189.131547,522.346309 C190.260287,513.342589 202.659244,504.134509 226.328419,494.722069 Z" id="Path-3" fill="#FFFFFF"></path>
+    </g>
+</svg>`;
+
 export const EMAIL_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3335 2.6665H2.66683C1.93045 2.6665 1.3335 3.26346 1.3335 3.99984V11.9998C1.3335 12.7362 1.93045 13.3332 2.66683 13.3332H13.3335C14.0699 13.3332 14.6668 12.7362 14.6668 11.9998V3.99984C14.6668 3.26346 14.0699 2.6665 13.3335 2.6665Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M14.6668 4.6665L8.68683 8.4665C8.48101 8.59545 8.24304 8.66384 8.00016 8.66384C7.75728 8.66384 7.51931 8.59545 7.3135 8.4665L1.3335 4.6665" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>

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

@@ -28,14 +28,77 @@ import { Button } from "../components/buttons.js";
  * ```tsx
  * <TransactionButton
  *   transaction={() => {}}
- *   onTransactionConfirmed={handleSuccess}
- *   onError={handleError}
  *   unstyled
  *   className="bg-white text-black rounded-md p-4 flex items-center justify-center"
  * >
  *   Confirm Transaction
  * </TransactionButton>
  * ```
+ *
+ * Handle errors
+ * ```tsx
+ * <TransactionButton
+ *   transaction={() => ...}
+ *   onError={(err) => {
+ *     alert(err.message);
+ *     // Add your own logic here
+ *   }}
+ * >
+ *   Confirm Transaction
+ * </TransactionButton>
+ * ```
+ *
+ * Alert when a transaction is sent
+ * ```tsx
+ * <TransactionButton
+ *   transaction={() => ...}
+ *   onTransactionSent={(tx) => {
+ *     alert("transaction sent!");
+ *     // Add your own logic here. For example, a toast
+ *   }}
+ * >
+ *   Confirm Transaction
+ * </TransactionButton>
+ * ```
+ *
+ * Alert when a transaction is completed
+ * ```tsx
+ * <TransactionButton
+ *   transaction={() => ...}
+ *   onTransactionConfirmed={(tx) => {
+ *     alert("transaction sent!");
+ *     console.log(tx);
+ *     // Add your own logic here. For example, a toast
+ *   }}
+ * >
+ *   Confirm Transaction
+ * </TransactionButton>
+ * ```
+ *
+ * The onClick prop, if provided, will be called before the transaction is sent.
+ * ```tsx
+ * <TransactionButton
+ *   onClick={() => alert("Transaction is about to be sent")}
+ *   transaction={...}
+ * >
+ *   ...
+ * </TransactionButton>
+ * ```
+ *
+ * Attach custom Pay metadata
+ * ```tsx
+ * <TransactionButton
+ *   payModal={{
+ *     // This image & title will show up in the Pay modal
+ *     metadata: {
+ *       name: "Van Gogh Starry Night",
+ *       image: "https://unsplash.com/starry-night.png"
+ *     }
+ *   }}
+ * >
+ *   ...
+ * </TransactionButton>
+ * ```
  * @component
  */
 export function TransactionButton(props: TransactionButtonProps) {

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

@@ -18,6 +18,7 @@ import {
   googleIconUri,
   passkeyIcon,
   phoneIcon,
+  telegramIconUri,
 } from "../../../core/utils/socialIcons.js";
 import { getLastAuthProvider } from "../../../core/utils/storage.js";
 import { useWalletImage } from "../../../core/utils/wallet.js";
@@ -81,6 +82,9 @@ export function WalletImage(props: {
           case "farcaster":
             image = farcasterIconUri;
             break;
+          case "telegram":
+            image = telegramIconUri;
+            break;
         }
       } else {
         const mipdImage = getInstalledWalletProviders().find(

package/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.tsx

@@ -76,6 +76,8 @@ export type BuyDirectListingButtonProps = Omit<
  * </BuyDirectListingButton>
  * ```
  *
+ * For error handling & callbacks on transaction-sent and transaction-confirmed,
+ * please refer to the TransactionButton docs.
  * @component
  */
 export function BuyDirectListingButton(props: BuyDirectListingButtonProps) {

package/src/react/web/ui/prebuilt/thirdweb/ClaimButton/index.tsx

@@ -22,12 +22,13 @@ import type {
 } from "./types.js";
 
 /**
- * This button is used to claim tokens (NFT or ERC20) from a given thirdweb Drop contract
+ * This button is used to claim tokens (NFT or ERC20) from a given thirdweb Drop contract.
  *
  * there are 3 type of Drop contract: NFT Drop (DropERC721), Edition Drop (DropERC1155) and Token Drop (DropERC20)
  *
  * Learn more: https://thirdweb.com/explore/drops
  *
+ *
  * Note: This button only works with thirdweb Drop contracts.
  * For custom contract, please use [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton)
  * @param props
@@ -36,11 +37,11 @@ import type {
  * @component
  * @example
  *
+ * Example for claiming NFT from an NFT Drop contract
  * ```tsx
  * import { ClaimButton } from "thirdweb/react";
  * import { ethereum } from "thirdweb/chains";
  *
- * // For NFT Drop (ERC721)
  * <ClaimButton
  *   contractAddress="0x..." // contract address of the NFT Drop
  *   chain={ethereum}
@@ -52,9 +53,10 @@ import type {
  * >
  *   Claim now
  * </ClaimButton>
+ * ```
  *
- *
- * // For Edition Drop (ERC1155)
+ * For Edition Drop (ERC1155)
+ * ```tsx
  * <ClaimButton
  *   contractAddress="0x..." // contract address of the Edition Drop
  *   chain={ethereum}
@@ -67,9 +69,10 @@ import type {
  * >
  *   Claim now
  * </ClaimButton>
+ * ```
  *
- *
- * // For Token Drop (ERC20)
+ * For Token Drop (ERC20)
+ * ```tsx
  * <ClaimButton
  *   contractAddress="0x..." // contract address of the Token Drop
  *   chain={ethereum}
@@ -82,8 +85,10 @@ import type {
  * >
  *   Claim now
  * </ClaimButton>
+ * ```
  *
- * // Attach custom Pay metadata
+ * Attach custom Pay metadata
+ * ```tsx
  * <ClaimButton
  *   payModal={{
  *     metadata: {
@@ -94,6 +99,13 @@ import type {
  * >...</ClaimButton>
  *
  * ```
+ *
+ * Since this button uses the `TransactionButton`, it can take in any props that can be passed
+ * to the [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton)
+ *
+ *
+ * For error handling & callbacks on transaction-sent and transaction-confirmed,
+ * please refer to the TransactionButton docs.
  */
 export function ClaimButton(props: ClaimButtonProps) {
   const { children, contractAddress, client, chain, claimParams, payModal } =

package/src/react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.tsx

@@ -50,6 +50,9 @@ export type CreateDirectListingButtonProps = Omit<
  *   Sell NFT
  * </CreateDirectListingButton>
  * ```
+ *
+ * For error handling & callbacks on transaction-sent and transaction-confirmed,
+ * please refer to the TransactionButton docs.
  * @component
  */
 export function CreateDirectListingButton(

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -92,6 +92,7 @@ export const ConnectWalletSocialOptions = (
     apple: locale.signInWithApple,
     discord: locale.signInWithDiscord,
     farcaster: "Farcaster",
+    telegram: "Telegram",
   };
 
   const { data: ecosystemAuthOptions, isLoading } = useQuery({

package/src/react/web/wallets/shared/oauthSignIn.ts

@@ -34,6 +34,7 @@ function getOauthLoginPath(
     case "facebook":
     case "google":
     case "farcaster":
+    case "telegram":
     case "discord":
       return getSocialAuthLoginPath({ authOption, client, ecosystem });
     default:

package/src/utils/json.ts

@@ -1,5 +1,11 @@
 /**
  * Stringify a JSON object and convert all bigint values to string
+ *
+ * If you are getting this error: "Exception: Do not know how to serialize a BigInt",
+ * you probably can use this function to parse the data.
+ * Because bigint is not an accepted value of the JSON format.
+ *
+ * @returns An object with all bigint values converted to string
  * @example
  * ```ts
  * import { stringify } from "thirdweb/utils";

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.43.3-nightly-ad619a779c05928125490fb113a04eaa12500e25-20240805000406";
+export const version = "5.44.0";

package/src/wallets/in-app/core/authentication/type.ts

@@ -63,6 +63,7 @@ export enum AuthProvider {
   PASSKEY = "Passkey",
   DISCORD = "Discord",
   FARCASTER = "Farcaster",
+  TELEGRAM = "Telegram",
 }
 
 export type OauthOption = {

package/src/wallets/in-app/native/native-connector.ts

@@ -110,6 +110,7 @@ export class InAppNativeConnector implements InAppConnector {
       case "facebook":
       case "discord":
       case "farcaster":
+      case "telegram":
       case "apple": {
         const ExpoLinking = require("expo-linking");
         const redirectUrl =

package/src/wallets/in-app/web/lib/web-connector.ts

@@ -223,6 +223,7 @@ export class InAppWebConnector implements InAppConnector {
       case "facebook":
       case "google":
       case "farcaster":
+      case "telegram":
       case "discord": {
         const authToken = await loginWithOauth({
           authOption: strategy,

package/src/wallets/types.ts

@@ -25,6 +25,7 @@ export const socialAuthOptions = [
   "facebook",
   "discord",
   "farcaster",
+  "telegram",
 ] as const;
 export type SocialAuthOption = (typeof socialAuthOptions)[number];