thirdweb 5.36.1-nightly-af4acc4319fdfb323778694bd8843bd695e52d6b-20240719161043 → 5.37.0

package/src/react/web/ui/ConnectWallet/screens/WalletTransactionHistory.tsx

@@ -46,43 +46,39 @@ export function WalletTransactionHistory(props: {
       fullHeight
       style={{
         minHeight: "250px",
-        maxHeight: "370px",
+        maxHeight: "350px",
+        paddingBottom: spacing.lg,
       }}
     >
-      <Container
-        flex="column"
-        gap="xs"
-        style={{ paddingBottom: "24px" }}
-        expand
-      >
-        {transactions.length === 0 && (
+      <Container flex="column" gap="xs" expand>
+        {transactions.length === 0 ? (
           <Container
             flex="column"
             gap="md"
             center="both"
             color="secondaryText"
             style={{
-              minHeight: "250px",
+              flex: "1",
             }}
           >
             <CrossCircledIcon width={iconSize.xl} height={iconSize.xl} />
             <Text>No Transactions</Text>
           </Container>
+        ) : (
+          <Container animate="fadein" flex="column" gap="xs">
+            {transactions.map((tx) => {
+              return (
+                <TransactionButton
+                  key={tx.transactionHash}
+                  explorerUrl={chainExplorers.explorers[0]?.url}
+                  client={props.client}
+                  hash={tx.transactionHash}
+                  chainId={tx.chainId}
+                />
+              );
+            })}
+          </Container>
         )}
-
-        <Container animate="fadein" flex="column" gap="xs">
-          {transactions.map((tx) => {
-            return (
-              <TransactionButton
-                key={tx.transactionHash}
-                explorerUrl={chainExplorers.explorers[0]?.url}
-                client={props.client}
-                hash={tx.transactionHash}
-                chainId={tx.chainId}
-              />
-            );
-          })}
-        </Container>
       </Container>
     </Container>
   );

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

@@ -138,10 +138,7 @@ export const CrossContainer = /* @__PURE__ */ StyledDiv({
   position: "absolute",
   top: spacing.lg,
   right: spacing.lg,
-  transform: "translateX(15%)",
-  [media.mobile]: {
-    right: spacing.md,
-  },
+  transform: "translateX(6px)",
 });
 
 const modalAnimationDesktop = keyframes`

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

@@ -1,6 +1,9 @@
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import { radius, spacing } from "../../../core/design-system/index.js";
 import { Text } from "../components/text.js";
-import { Container, Line } from "./basic.js";
+import { Spacer } from "./Spacer.js";
+import { Container } from "./basic.js";
+import { Button } from "./buttons.js";
 
 export default function Tabs({
   selected,
@@ -15,42 +18,44 @@ export default function Tabs({
 }) {
   const theme = useCustomTheme();
   return (
-    <Container>
-      <Container flex="row" center="y" style={{ width: "100%" }}>
+    <div>
+      <Container
+        flex="row"
+        center="y"
+        style={{ width: "100%", borderRadius: radius.lg }}
+        p="xxs"
+        bg="secondaryButtonBg"
+      >
         {options.map((option) => (
-          <button
+          <Button
+            variant="accent"
             type="button"
             key={option}
             onClick={() => onSelect(option)}
             style={{
               flex: 1,
-              height: "50px",
+              paddingBlock: spacing.sm,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
               position: "relative",
+              borderRadius: radius.md,
+              backgroundColor:
+                option === selected ? theme.colors.modalBg : "transparent",
             }}
           >
             <Text
               color={option === selected ? "primaryText" : "secondaryText"}
               style={{ textAlign: "center" }}
+              size="sm"
             >
               {option}
             </Text>
-            <Line
-              style={{
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                width: "100%",
-                backgroundColor:
-                  option === selected ? "white" : theme.colors.separatorLine,
-              }}
-            />
-          </button>
+          </Button>
         ))}
       </Container>
-      <Container py="sm">{children}</Container>
-    </Container>
+      <Spacer y="sm" />
+      {children}
+    </div>
   );
 }

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

@@ -9,6 +9,7 @@ import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { radius } from "../../../core/design-system/index.js";
 import {
   appleIconUri,
+  discordIconUri,
   emailIcon,
   facebookIconUri,
   genericWalletIcon,
@@ -73,6 +74,9 @@ export function WalletImage(props: {
           case "passkey":
             image = passkeyIcon;
             break;
+          case "discord":
+            image = discordIconUri;
+            break;
         }
       } else {
         const mipdImage = getInstalledWalletProviders().find(

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

@@ -141,7 +141,7 @@ export const IconButton = /* @__PURE__ */ StyledButton((_) => {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: radius.md,
+    borderRadius: radius.sm,
     WebkitTapHighlightColor: "transparent",
     color: theme.colors.secondaryIconColor,
     padding: "2px",

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

@@ -8,9 +8,10 @@ import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { getEcosystemWalletAuthOptions } from "../../../../wallets/ecosystem/get-ecosystem-wallet-auth-options.js";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
-import type {
-  AuthOption,
-  SocialAuthOption,
+import {
+  type AuthOption,
+  type SocialAuthOption,
+  socialAuthOptions,
 } from "../../../../wallets/types.js";
 import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
@@ -88,6 +89,7 @@ export const ConnectWalletSocialOptions = (
     google: locale.signInWithGoogle,
     facebook: locale.signInWithFacebook,
     apple: locale.signInWithApple,
+    discord: locale.signInWithDiscord,
   };
 
   const { data: ecosystemAuthOptions, isLoading } = useQuery({
@@ -148,16 +150,27 @@ export const ConnectWalletSocialOptions = (
     type = "tel";
   }
 
-  const socialLogins = authOptions.filter(
-    (x) => x === "google" || x === "apple" || x === "facebook",
+  const socialLogins = authOptions.filter((o) =>
+    socialAuthOptions.includes(o as SocialAuthOption),
   );
 
   const hasSocialLogins = socialLogins.length > 0;
+  const ecosystemInfo = isEcosystemWallet(wallet)
+    ? {
+        id: wallet.id,
+        partnerId: wallet.getConfig()?.partnerId,
+      }
+    : undefined;
 
   // Need to trigger login on button click to avoid popup from being blocked
   const handleSocialLogin = async (strategy: SocialAuthOption) => {
     try {
-      const socialLoginWindow = openOauthSignInWindow(strategy, themeObj);
+      const socialLoginWindow = openOauthSignInWindow({
+        authOption: strategy,
+        themeObj,
+        client: props.client,
+        ecosystem: ecosystemInfo,
+      });
       if (!socialLoginWindow) {
         throw new Error("Failed to open login window");
       }
@@ -236,16 +249,17 @@ export const ConnectWalletSocialOptions = (
                 variant={"outline"}
                 fullWidth={!showOnlyIcons}
                 onClick={() => {
-                  handleSocialLogin(loginMethod);
+                  handleSocialLogin(loginMethod as SocialAuthOption);
                 }}
               >
                 <Img
-                  src={socialIcons[loginMethod]}
+                  src={socialIcons[loginMethod as SocialAuthOption]}
                   width={imgIconSize}
                   height={imgIconSize}
                   client={props.client}
                 />
-                {!showOnlyIcons && loginMethodsLabel[loginMethod]}
+                {!showOnlyIcons &&
+                  loginMethodsLabel[loginMethod as SocialAuthOption]}
               </SocialButton>
             );
           })}

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

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { InAppWalletSocialAuth } from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
@@ -42,7 +43,17 @@ export function SocialLogin(props: {
 
   const handleSocialLogin = async () => {
     try {
-      const socialWindow = openOauthSignInWindow(props.socialAuth, themeObj);
+      const socialWindow = openOauthSignInWindow({
+        authOption: props.socialAuth,
+        themeObj,
+        client: props.client,
+        ecosystem: isEcosystemWallet(wallet)
+          ? {
+              id: wallet.id,
+              partnerId: wallet.getConfig()?.partnerId,
+            }
+          : undefined,
+      });
 
       if (!socialWindow) {
         throw new Error(`Failed to open ${props.socialAuth} login window`);

package/src/react/web/wallets/shared/locale/en.ts

@@ -4,6 +4,7 @@ export default {
   signInWithGoogle: "Google",
   signInWithFacebook: "Facebook",
   signInWithApple: "Apple",
+  signInWithDiscord: "Discord",
   emailPlaceholder: "Email address",
   submitEmail: "Continue",
   signIn: "Sign in",

package/src/react/web/wallets/shared/locale/es.ts

@@ -4,6 +4,7 @@ export default {
   signInWithGoogle: "Iniciar sesión con Google",
   signInWithFacebook: "Iniciar sesión con Facebook",
   signInWithApple: "Iniciar sesión con Apple",
+  signInWithDiscord: "Iniciar sesión con Discord",
   emailPlaceholder: "Ingresa tu dirección de correo electrónico",
   submitEmail: "Continuar",
   signIn: "Iniciar sesión",

package/src/react/web/wallets/shared/locale/ja.ts

@@ -4,6 +4,7 @@ export default {
   signInWithGoogle: "Googleでサインイン",
   signInWithFacebook: "Facebookでサインイン",
   signInWithApple: "Appleでサインイン",
+  signInWithDiscord: "Discordでサインイン",
   emailPlaceholder: "メールアドレスを入力してください",
   submitEmail: "続ける",
   emailRequired: "メールアドレスが必要です",

package/src/react/web/wallets/shared/locale/tl.ts

@@ -4,6 +4,7 @@ export default {
   signInWithGoogle: "Mag-sign in gamit ang Google",
   signInWithFacebook: "Mag-sign in gamit ang Facebook",
   signInWithApple: "Mag-sign in gamit ang Apple",
+  signInWithDiscord: "Mag-sign in gamit ang Discord",
   emailPlaceholder: "Ilagay ang iyong email address",
   submitEmail: "Magpatuloy",
   signIn: "Mag-sign in",

package/src/react/web/wallets/shared/locale/types.ts

@@ -37,6 +37,7 @@ export type InAppWalletLocale = {
   or: string;
   invalidEmail: string;
   signIn: string;
+  signInWithDiscord: string;
   signInWithApple: string;
   signInWithFacebook: string;
   signInWithGoogle: string;

package/src/react/web/wallets/shared/locale/vi.ts

@@ -4,6 +4,7 @@ export default {
   signInWithGoogle: "Google",
   signInWithFacebook: "Facebook",
   signInWithApple: "Apple",
+  signInWithDiscord: "Discord",
   emailPlaceholder: "Địa chỉ email",
   submitEmail: "Tiếp tục",
   signIn: "Đăng nhập",

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

@@ -1,4 +1,7 @@
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { getDiscordLoginPath } from "../../../../wallets/in-app/core/authentication/getLoginPath.js";
 import type { InAppWalletSocialAuth } from "../../../../wallets/in-app/core/wallet/types.js";
+import type { Ecosystem } from "../../../../wallets/in-app/web/types.js";
 import type { Theme } from "../../../core/design-system/index.js";
 
 function getBodyTitle(authOption: InAppWalletSocialAuth) {
@@ -21,21 +24,41 @@ function getWidthAndHeight(authOption: InAppWalletSocialAuth) {
   }
 }
 
+function getOauthLoginPath(
+  authOption: InAppWalletSocialAuth,
+  client: ThirdwebClient,
+  ecosystem?: Ecosystem,
+) {
+  switch (authOption) {
+    case "discord":
+      return getDiscordLoginPath(client, ecosystem);
+    default:
+      return "";
+  }
+}
+
 /**
  *
  * @internal
  */
-export function openOauthSignInWindow(
-  authOption: InAppWalletSocialAuth,
-  themeObj: Theme,
-) {
+export function openOauthSignInWindow({
+  authOption,
+  themeObj,
+  client,
+  ecosystem,
+}: {
+  authOption: InAppWalletSocialAuth;
+  themeObj: Theme;
+  client: ThirdwebClient;
+  ecosystem?: Ecosystem;
+}) {
   // open the popup in the center of the screen
   const { height, width } = getWidthAndHeight(authOption);
   const top = (window.innerHeight - height) / 2;
   const left = (window.innerWidth - width) / 2;
 
   const win = window.open(
-    "",
+    getOauthLoginPath(authOption, client, ecosystem),
     undefined,
     `width=${width}, height=${height}, top=${top}, left=${left}`,
   );

package/src/transaction/actions/encode.test.ts

@@ -1,14 +1,26 @@
 import { describe, expect, it } from "vitest";
-import { TEST_WALLET_A } from "~test/addresses.js";
+import { TEST_WALLET_A, TEST_WALLET_B } from "~test/addresses.js";
+import { FORKED_ETHEREUM_CHAIN } from "~test/chains.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
 import { USDT_CONTRACT, USDT_CONTRACT_WITH_ABI } from "~test/test-contracts.js";
-import { encode } from "./encode.js";
-
+import { concatHex } from "../../utils/encoding/helpers/concat-hex.js";
+import { toHex } from "../../utils/encoding/hex.js";
+import { toWei } from "../../utils/units.js";
 import { prepareContractCall } from "../prepare-contract-call.js";
+import { prepareTransaction } from "../prepare-transaction.js";
 import { resolveMethod } from "../resolve-method.js";
+import { encode, getDataFromTx, getExtraCallDataFromTx } from "./encode.js";
 
 const USDC_TRANSFER_ENCODE_RESULT =
   "0xa9059cbb00000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000064";
 
+const extraCallDataMsg = "Hello, World";
+const extraCallData = toHex(extraCallDataMsg);
+const expectedFinalData = concatHex([
+  USDC_TRANSFER_ENCODE_RESULT,
+  extraCallData,
+]);
+
 describe("transaction: encode", () => {
   it("should encode correctly (human-readable)", async () => {
     const tx = prepareContractCall({
@@ -58,4 +70,141 @@ describe("transaction: encode", () => {
     const encoded = await encode(tx);
     expect(encoded).toEqual(USDC_TRANSFER_ENCODE_RESULT);
   });
+
+  // Repeat the same test cases above but now with extraCallData
+
+  it("extraCallData | should encode correctly (human-readable)", async () => {
+    const tx = prepareContractCall({
+      contract: USDT_CONTRACT,
+      method: "function transfer(address, uint256) returns (bool)",
+      params: [TEST_WALLET_A, 100n],
+      extraCallData,
+    });
+    const encoded = await encode(tx);
+    expect(encoded).toEqual(expectedFinalData);
+  });
+
+  it("extraCallData | should encode correctly (transaction abi)", async () => {
+    const tx = prepareContractCall({
+      contract: USDT_CONTRACT,
+      method: {
+        inputs: [
+          { internalType: "address", name: "to", type: "address" },
+          { internalType: "uint256", name: "value", type: "uint256" },
+        ],
+        name: "transfer",
+        outputs: [{ internalType: "bool", name: "", type: "bool" }],
+        stateMutability: "nonpayable",
+        type: "function",
+      },
+      params: [TEST_WALLET_A, 100n],
+      extraCallData,
+    });
+    const encoded = await encode(tx);
+    expect(encoded).toEqual(expectedFinalData);
+  });
+
+  it("extraCallData | should encode correctly (contract abi)", async () => {
+    const tx = prepareContractCall({
+      contract: USDT_CONTRACT_WITH_ABI,
+      method: "transfer",
+      params: [TEST_WALLET_A, 100n],
+      extraCallData,
+    });
+    const encoded = await encode(tx);
+    expect(encoded).toEqual(expectedFinalData);
+  });
+  it("extraCallData | should encode correctly (auto-abi)", async () => {
+    const tx = prepareContractCall({
+      contract: USDT_CONTRACT,
+      method: resolveMethod("transfer"),
+      params: [TEST_WALLET_A, 100n],
+      extraCallData,
+    });
+    const encoded = await encode(tx);
+    expect(encoded).toEqual(expectedFinalData);
+  });
+
+  it("extraCallData - should work with prepareTransaction", async () => {
+    const tx = prepareTransaction({
+      chain: FORKED_ETHEREUM_CHAIN,
+      client: TEST_CLIENT,
+      to: TEST_WALLET_B,
+      value: toWei("0.1"),
+    });
+    const encoded = await encode(tx);
+
+    const txWithExtraData = prepareTransaction({
+      chain: FORKED_ETHEREUM_CHAIN,
+      client: TEST_CLIENT,
+      to: TEST_WALLET_B,
+      value: toWei("0.1"),
+      extraCallData,
+    });
+
+    const encoded2 = await encode(txWithExtraData);
+    expect(encoded2).toBe(concatHex([encoded, extraCallData]));
+  });
+
+  it("internal func: getDataFromTx | should return `0x` if no data is attached", async () => {
+    const tx = prepareTransaction({
+      chain: FORKED_ETHEREUM_CHAIN,
+      client: TEST_CLIENT,
+      to: TEST_WALLET_B,
+      value: toWei("0.1"),
+    });
+    const _hex = await getDataFromTx(tx);
+    expect(_hex).toBe("0x");
+  });
+
+  it("internal func: getDataFromTx | should return correctly encoded data", async () => {
+    const tx = prepareTransaction({
+      chain: FORKED_ETHEREUM_CHAIN,
+      client: TEST_CLIENT,
+      to: TEST_WALLET_B,
+      value: toWei("0.1"),
+      data: extraCallData,
+    });
+    const _hex = await getDataFromTx(tx);
+    expect(_hex).toBe(extraCallData);
+  });
+
+  it("internal func: getExtraCallDataFromTx | should return `undefined` if no data is attached", async () => {
+    const tx = prepareTransaction({
+      chain: FORKED_ETHEREUM_CHAIN,
+      client: TEST_CLIENT,
+      to: TEST_WALLET_B,
+      value: toWei("0.1"),
+    });
+    const result = await getExtraCallDataFromTx(tx);
+    expect(result).toBe(undefined);
+  });
+
+  it("internal func: getExtraCallDataFromTx | should return correct extraCallData", async () => {
+    const tx = prepareTransaction({
+      chain: FORKED_ETHEREUM_CHAIN,
+      client: TEST_CLIENT,
+      to: TEST_WALLET_B,
+      value: toWei("0.1"),
+      data: toHex("getExtraCallDataFromTx-should-not-return-this"),
+      extraCallData,
+    });
+    const result = await getExtraCallDataFromTx(tx);
+    expect(result).toBe(extraCallData);
+  });
+
+  it("internal func: getExtraCallDataFromTx | should throw error if extraCallData is not hex-encoded", async () => {
+    const tx = prepareTransaction({
+      chain: FORKED_ETHEREUM_CHAIN,
+      client: TEST_CLIENT,
+      to: TEST_WALLET_B,
+      value: toWei("0.1"),
+      data: toHex("getExtraCallDataFromTx-should-not-return-this"),
+      // @ts-ignore Intentionally for the test purpose
+      extraCallData: "I'm a cat",
+    });
+    await expect(() => getExtraCallDataFromTx(tx)).rejects.toThrowError(
+      "Invalid extra calldata - must be a hex string",
+    );
+  });
 });

package/src/transaction/actions/encode.ts

@@ -26,18 +26,67 @@ export async function encode<abi extends Abi, abiFn extends AbiFunction>(
     return encodeWeakMap.get(transaction)!;
   }
   const promise = (async () => {
-    if (transaction.data === undefined) {
-      return "0x";
-    }
-    if (typeof transaction.data === "function") {
-      const data = await transaction.data();
-      if (!data) {
-        return "0x";
-      }
-      return data;
+    const [data, extraData, { concatHex }] = await Promise.all([
+      getDataFromTx(transaction),
+      getExtraCallDataFromTx(transaction),
+      import("../../utils/encoding/helpers/concat-hex.js"),
+    ]);
+    if (extraData) {
+      return concatHex([data, extraData]);
     }
-    return transaction.data;
+    return data;
   })();
   encodeWeakMap.set(transaction, promise);
   return promise;
 }
+
+/**
+ * Get the transaction.data (from a PreparedTransaction)
+ * If the transaction does not have `data`, we default to "0x"
+ * @internal
+ */
+export async function getDataFromTx<abi extends Abi, abiFn extends AbiFunction>(
+  transaction: PreparedTransaction<abi, abiFn>,
+): Promise<Hex> {
+  if (transaction.data === undefined) {
+    return "0x";
+  }
+  if (typeof transaction.data === "function") {
+    const data = await transaction.data();
+    if (!data) {
+      return "0x";
+    }
+    return data;
+  }
+  return transaction.data;
+}
+
+/**
+ * Get the extraCallData from a PreparedTransaction
+ * @internal
+ * If extraCallData is "0x", we will return `undefined`
+ * to simplify the code, since concatenating "0x" doesn't do anything
+ */
+export async function getExtraCallDataFromTx<
+  abi extends Abi,
+  abiFn extends AbiFunction,
+>(transaction: PreparedTransaction<abi, abiFn>): Promise<Hex | undefined> {
+  if (!transaction.extraCallData) {
+    return undefined;
+  }
+  if (typeof transaction.extraCallData === "function") {
+    const extraData = await transaction.extraCallData();
+    if (!extraData) return undefined;
+    if (!extraData.startsWith("0x")) {
+      throw Error("Invalid extra calldata - must be a hex string");
+    }
+    if (extraData === "0x") {
+      return undefined;
+    }
+    return extraData;
+  }
+  if (!transaction.extraCallData.startsWith("0x")) {
+    throw Error("Invalid extra calldata - must be a hex string");
+  }
+  return transaction.extraCallData;
+}

package/src/transaction/actions/estimate-gas.ts

@@ -69,7 +69,7 @@ export async function estimateGas(
   const promise = (async () => {
     const predefinedGas = await resolvePromisedValue(options.transaction.gas);
     // if we have a predefined gas value in the TX -> always use that
-    if (predefinedGas) {
+    if (predefinedGas !== undefined) {
       return predefinedGas;
     }
 

package/src/transaction/actions/to-serializable-transaction.test.ts

@@ -254,6 +254,22 @@ describe("toSerializableTransaction", () => {
         }),
       ).not.toThrow();
     });
+
+    test("should respect a 0 gas value", async () => {
+      const serializableTransaction = await toSerializableTransaction({
+        transaction: {
+          ...transaction,
+          gas: async () => Promise.resolve(0n),
+        },
+      });
+
+      expect(() =>
+        serializeTransaction({
+          transaction: serializableTransaction,
+        }),
+      ).not.toThrow();
+      expect(serializableTransaction.gas).toBe(0n);
+    });
   });
 
   describe("extraGas override", () => {