thirdweb 5.105.48 → 5.106.0

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

@@ -358,6 +358,7 @@ export const ConnectWalletSocialOptions = (
                 })();
                 return (
                   <SocialButton
+                    className="tw-social-button"
                     aria-label={`Login with ${loginMethod}`}
                     data-variant={showOnlyIcons ? "icon" : "full"}
                     disabled={props.disabled}
@@ -394,6 +395,7 @@ export const ConnectWalletSocialOptions = (
       {isEmailEnabled &&
         (inputMode === "email" ? (
           <InputSelectionUI
+            className="tw-input-container tw-input-container__email"
             disabled={props.disabled}
             emptyErrorMessage={emptyErrorMessage}
             errorMessage={(input) => {
@@ -414,6 +416,7 @@ export const ConnectWalletSocialOptions = (
           />
         ) : (
           <WalletTypeRowButton
+            className="tw-select-button tw-select-button__email"
             client={props.client}
             disabled={props.disabled}
             icon={EmailIcon}
@@ -426,6 +429,7 @@ export const ConnectWalletSocialOptions = (
       {isPhoneEnabled &&
         (inputMode === "phone" ? (
           <InputSelectionUI
+            className="tw-input-container tw-input-container__phone"
             allowedSmsCountryCodes={
               wallet.getConfig()?.auth?.allowedSmsCountryCodes
             }
@@ -458,6 +462,7 @@ export const ConnectWalletSocialOptions = (
           />
         ) : (
           <WalletTypeRowButton
+            className="tw-select-button tw-select-button__phone"
             client={props.client}
             disabled={props.disabled}
             icon={PhoneIcon}
@@ -470,6 +475,7 @@ export const ConnectWalletSocialOptions = (
 
       {passKeyEnabled && (
         <WalletTypeRowButton
+          className="tw-select-button tw-select-button__passkey"
           client={props.client}
           disabled={props.disabled}
           icon={FingerPrintIcon}
@@ -483,6 +489,7 @@ export const ConnectWalletSocialOptions = (
       {/* SIWE login */}
       {siweEnabled && !props.isLinking && (
         <WalletTypeRowButton
+          className="tw-select-button tw-select-button__link-wallet"
           client={props.client}
           icon={OutlineWalletIcon}
           onClick={() => {
@@ -495,6 +502,7 @@ export const ConnectWalletSocialOptions = (
       {/* Guest login */}
       {guestEnabled && (
         <WalletTypeRowButton
+          className="tw-select-button tw-select-button__guest"
           client={props.client}
           disabled={props.disabled}
           icon={GuestIcon}
@@ -507,6 +515,7 @@ export const ConnectWalletSocialOptions = (
 
       {props.isLinking && (
         <WalletTypeRowButton
+          className="tw-select-button tw-select-button__link-wallet"
           client={props.client}
           icon={OutlineWalletIcon}
           onClick={() => {

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

@@ -31,7 +31,12 @@ export const ConnectingScreen: React.FC<{
   const { locale } = props;
 
   return (
-    <Container animate="fadein" flex="column" fullHeight>
+    <Container
+      animate="fadein"
+      flex="column"
+      fullHeight
+      className="tw-connecting-wallet-screen"
+    >
       <Container
         p="lg"
         style={{
@@ -65,19 +70,27 @@ export const ConnectingScreen: React.FC<{
             animationDuration: "200ms",
           }}
         >
-          <Text center color="primaryText" size="lg" weight={600}>
+          <Text
+            center
+            color="primaryText"
+            size="lg"
+            weight={600}
+            className="tw-screen-title"
+            data-status={props.errorConnecting ? "failed" : "in-progress"}
+          >
             {props.errorConnecting ? locale.failed : locale.inProgress}
           </Text>
 
           <Spacer y="md" />
 
           {!props.errorConnecting ? (
-            <Text balance center multiline>
+            <Text balance center multiline className="tw-screen-description">
               {locale.instruction}
             </Text>
           ) : (
             <Container animate="fadein" center="x" flex="row">
               <Button
+                className="tw-retry-button"
                 fullWidth
                 onClick={props.onRetry}
                 style={{
@@ -99,7 +112,11 @@ export const ConnectingScreen: React.FC<{
           <Spacer y="xl" />
           <Line />
           <Container center="x" flex="row" p="lg">
-            <Button onClick={props.onGetStarted} variant="link">
+            <Button
+              onClick={props.onGetStarted}
+              variant="link"
+              className="tw-get-started-button"
+            >
               {locale.getStartedLink}
             </Button>
           </Container>

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

@@ -91,7 +91,12 @@ export function GuestLogin(props: {
   }, [done, guestLogin]);
 
   return (
-    <Container animate="fadein" flex="column" fullHeight>
+    <Container
+      animate="fadein"
+      flex="column"
+      fullHeight
+      className="tw-guest-login-screen"
+    >
       <Container
         expand
         flex="column"

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

@@ -206,7 +206,12 @@ export function OTPLoginUI(props: {
 
   if (screen === "base") {
     return (
-      <Container animate="fadein" flex="column" fullHeight>
+      <Container
+        animate="fadein"
+        flex="column"
+        fullHeight
+        className="tw-otp-login-screen"
+      >
         <Container p="lg">
           <ModalHeader onBack={goBack} title={locale.signIn} />
         </Container>
@@ -219,7 +224,9 @@ export function OTPLoginUI(props: {
           >
             <Container center="x" flex="column" px="lg">
               {!isWideModal && <Spacer y="xl" />}
-              <Text>{locale.emailLoginScreen.enterCodeSendTo}</Text>
+              <Text className="tw-screen-title">
+                {locale.emailLoginScreen.enterCodeSendTo}
+              </Text>
               <Spacer y="sm" />
               <Text color="primaryText">
                 {"email" in userInfo ? userInfo.email : userInfo.phone}
@@ -243,7 +250,12 @@ export function OTPLoginUI(props: {
             {verifyStatus === "invalid" && (
               <FadeIn>
                 <Spacer y="md" />
-                <Text center color="danger" size="sm">
+                <Text
+                  center
+                  color="danger"
+                  size="sm"
+                  className="tw-invalid-code-text"
+                >
                   {locale.emailLoginScreen.invalidCode}
                 </Text>
               </FadeIn>
@@ -252,7 +264,12 @@ export function OTPLoginUI(props: {
             {verifyStatus === "linking_error" && (
               <FadeIn>
                 <Spacer y="md" />
-                <Text center color="danger" size="sm">
+                <Text
+                  center
+                  color="danger"
+                  size="sm"
+                  className="tw-screen-error"
+                >
                   {error || "Failed to verify code"}
                 </Text>
               </FadeIn>
@@ -261,7 +278,12 @@ export function OTPLoginUI(props: {
             {verifyStatus === "payment_required" && (
               <FadeIn>
                 <Spacer y="md" />
-                <Text center color="danger" size="sm">
+                <Text
+                  center
+                  color="danger"
+                  size="sm"
+                  className="tw-screen-error"
+                >
                   {locale.maxAccountsExceeded}
                 </Text>
               </FadeIn>
@@ -283,6 +305,7 @@ export function OTPLoginUI(props: {
                     }}
                     type="submit"
                     variant="accent"
+                    className="tw-verify-button"
                   >
                     {locale.emailLoginScreen.verify}
                   </Button>
@@ -296,7 +319,12 @@ export function OTPLoginUI(props: {
 
             <Container gap="xs" p={isWideModal ? undefined : "lg"}>
               {accountStatus === "error" && (
-                <Text center color="danger" size="sm">
+                <Text
+                  center
+                  color="danger"
+                  size="sm"
+                  className="tw-screen-error"
+                >
                   {locale.emailLoginScreen.failedToSendCode}
                 </Text>
               )}
@@ -322,6 +350,7 @@ export function OTPLoginUI(props: {
                     cursor: countdown > 0 ? "default" : "pointer",
                     opacity: countdown > 0 ? 0.5 : 1,
                   }}
+                  className="tw-resend-button"
                   type="button"
                 >
                   {countdown > 0

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

@@ -40,7 +40,12 @@ export const ScanScreen: React.FC<{
   const [linkCopied, setLinkCopied] = useState(false);
 
   return (
-    <Container animate="fadein" flex="column" fullHeight>
+    <Container
+      animate="fadein"
+      flex="column"
+      fullHeight
+      className="tw-qr-scan-screen"
+    >
       <Container p="lg">
         <ModalHeader onBack={props.onBack} title={props.walletName} />
       </Container>
@@ -68,6 +73,7 @@ export const ScanScreen: React.FC<{
             <Spacer y="xs" />
 
             <Button
+              className="tw-copy-link-button"
               disabled={props.qrCodeUri === undefined}
               onClick={() => {
                 navigator.clipboard
@@ -101,6 +107,7 @@ export const ScanScreen: React.FC<{
               balance
               center
               multiline
+              className="tw-screen-description"
               style={{
                 paddingInline: spacing.lg,
               }}
@@ -122,12 +129,23 @@ export const ScanScreen: React.FC<{
               <AccentFailIcon size={iconSize["3xl"]} />
             </Container>
             <Spacer y="lg" />
-            <Text center color="primaryText" size="lg">
+            <Text
+              center
+              color="primaryText"
+              size="lg"
+              className="tw-screen-title"
+              data-status="failed"
+            >
               Connection Failed
             </Text>
             <Spacer y="3xl" />
 
-            <Button fullWidth onClick={props.onRetry} variant="accent">
+            <Button
+              fullWidth
+              onClick={props.onRetry}
+              variant="accent"
+              className="tw-retry-button"
+            >
               Try again
             </Button>
           </Container>
@@ -144,6 +162,7 @@ export const ScanScreen: React.FC<{
         >
           <Button
             onClick={props.onGetStarted}
+            className="tw-get-started-button"
             style={{
               fontSize: fontSize.sm,
               textAlign: "center",

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

@@ -154,7 +154,12 @@ export function SocialLogin(props: {
   }, [done, socialLogin]);
 
   return (
-    <Container animate="fadein" flex="column" fullHeight>
+    <Container
+      animate="fadein"
+      flex="column"
+      fullHeight
+      className="tw-social-login-screen"
+    >
       <Container
         expand
         flex="column"

package/src/stories/Bridge/Swap/SelectChain.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta } from "@storybook/react-vite";
+import { useState } from "react";
+import type { BridgeChain } from "../../../bridge/types/Chain.js";
+import { SwapWidgetContainer } from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
+import {
+  SelectBridgeChain,
+  SelectBridgeChainUI,
+} from "../../../react/web/ui/Bridge/swap-widget/select-chain.js";
+import { storyClient } from "../../utils.js";
+
+const meta = {
+  parameters: {
+    layout: "centered",
+  },
+  title: "Bridge/Swap/screens/SelectChain",
+} satisfies Meta<typeof SelectBridgeChain>;
+export default meta;
+
+export function WithData() {
+  const [selectedChain, setSelectedChain] = useState<BridgeChain | undefined>(
+    undefined,
+  );
+  return (
+    <SwapWidgetContainer theme="dark" className="w-full">
+      <SelectBridgeChain
+        client={storyClient}
+        onSelectChain={setSelectedChain}
+        onBack={() => {}}
+        selectedChain={selectedChain}
+      />
+    </SwapWidgetContainer>
+  );
+}
+
+export function Loading() {
+  const [selectedChain, setSelectedChain] = useState<BridgeChain | undefined>(
+    undefined,
+  );
+  return (
+    <SwapWidgetContainer theme="dark" className="w-full">
+      <SelectBridgeChainUI
+        client={storyClient}
+        onSelectChain={setSelectedChain}
+        onBack={() => {}}
+        isPending={true}
+        chains={[]}
+        selectedChain={selectedChain}
+      />
+    </SwapWidgetContainer>
+  );
+}

package/src/stories/Bridge/Swap/SwapWidget.Prefill.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta } from "@storybook/react-vite";
+import { NATIVE_TOKEN_ADDRESS } from "../../../constants/addresses.js";
+import { SwapWidget } from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
+import { storyClient } from "../../utils.js";
+
+const meta = {
+  parameters: {
+    layout: "centered",
+  },
+  title: "Bridge/Swap/SwapWidget/Prefill",
+} satisfies Meta<typeof SwapWidget>;
+export default meta;
+
+export function Buy_NativeToken() {
+  return (
+    <SwapWidget
+      client={storyClient}
+      prefill={{
+        buyToken: {
+          chainId: 8453,
+        },
+      }}
+    />
+  );
+}
+
+export function Buy_Base_USDC() {
+  return (
+    <SwapWidget
+      client={storyClient}
+      prefill={{
+        buyToken: {
+          chainId: 8453,
+          tokenAddress: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+        },
+      }}
+    />
+  );
+}
+
+export function Buy_NativeToken_With_Amount() {
+  return (
+    <SwapWidget
+      client={storyClient}
+      prefill={{
+        buyToken: {
+          chainId: 8453,
+          amount: "0.1",
+          tokenAddress: NATIVE_TOKEN_ADDRESS,
+        },
+      }}
+    />
+  );
+}
+
+export function Sell_NativeToken() {
+  return (
+    <SwapWidget
+      client={storyClient}
+      prefill={{
+        sellToken: {
+          chainId: 8453,
+        },
+      }}
+    />
+  );
+}
+
+export function Sell_Base_USDC() {
+  return (
+    <SwapWidget
+      client={storyClient}
+      prefill={{
+        sellToken: {
+          chainId: 8453,
+          tokenAddress: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+        },
+      }}
+    />
+  );
+}
+
+export function Sell_NativeToken_With_Amount() {
+  return (
+    <SwapWidget
+      client={storyClient}
+      prefill={{
+        sellToken: {
+          chainId: 8453,
+          amount: "0.1",
+          tokenAddress: NATIVE_TOKEN_ADDRESS,
+        },
+      }}
+    />
+  );
+}
+
+export function Buy_And_Sell_NativeToken() {
+  return (
+    <SwapWidget
+      client={storyClient}
+      prefill={{
+        // base native token
+        buyToken: {
+          chainId: 8453,
+          tokenAddress: NATIVE_TOKEN_ADDRESS,
+        },
+        // base usdc
+        sellToken: {
+          chainId: 8453,
+          tokenAddress: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+        },
+      }}
+    />
+  );
+}

package/src/stories/Bridge/Swap/SwapWidget.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta } from "@storybook/react";
+import { lightTheme } from "../../../react/core/design-system/index.js";
+import { SwapWidget } from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
+import { ConnectButton } from "../../../react/web/ui/ConnectWallet/ConnectButton.js";
+import { storyClient } from "../../utils.js";
+
+const meta: Meta<typeof SwapWidget> = {
+  parameters: {
+    layout: "centered",
+  },
+  title: "Bridge/Swap/SwapWidget",
+  decorators: [
+    (Story) => {
+      return (
+        <div>
+          <Story />
+          <div
+            style={{
+              position: "absolute",
+              bottom: "20px",
+              right: "20px",
+            }}
+          >
+            <ConnectButton client={storyClient} />
+          </div>
+        </div>
+      );
+    },
+  ],
+};
+export default meta;
+
+export function BasicUsage() {
+  return <SwapWidget client={storyClient} />;
+}
+
+export function CurrencySet() {
+  return <SwapWidget client={storyClient} currency="JPY" />;
+}
+
+export function LightMode() {
+  return <SwapWidget client={storyClient} currency="JPY" theme="light" />;
+}
+
+export function NoThirdwebBranding() {
+  return (
+    <SwapWidget
+      client={storyClient}
+      currency="JPY"
+      showThirdwebBranding={false}
+    />
+  );
+}
+
+export function CustomTheme() {
+  return (
+    <SwapWidget
+      client={storyClient}
+      currency="JPY"
+      theme={lightTheme({
+        colors: {
+          modalBg: "#FFFFF0",
+          tertiaryBg: "#DBE4C9",
+          borderColor: "#8AA624",
+          secondaryText: "#3E3F29",
+          accentText: "#E43636",
+        },
+      })}
+    />
+  );
+}

package/src/stories/BuyWidget.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta } from "@storybook/react-vite";
+import { base } from "../chains/chain-definitions/base.js";
+import { defineChain } from "../chains/utils.js";
+import { BuyWidget } from "../react/web/ui/Bridge/BuyWidget.js";
+import { storyClient } from "./utils.js";
+
+const meta = {
+  parameters: {
+    layout: "centered",
+  },
+  title: "Connect/BuyWidget",
+} satisfies Meta<typeof BuyWidget>;
+export default meta;
+
+export function BasicUsage() {
+  return <BuyWidget client={storyClient} chain={base} amount="0.1" />;
+}
+
+export function UnsupportedChain() {
+  return (
+    <BuyWidget client={storyClient} chain={defineChain(84532)} amount="0.1" />
+  );
+}
+
+export function UnsupportedToken() {
+  return (
+    <BuyWidget
+      client={storyClient}
+      chain={base}
+      amount="0.1"
+      tokenAddress="0xc3e13Ecf3B6C2Aa0F2Eb5e898De02d704352Aa54" // this is actually NFT
+    />
+  );
+}
+
+export function OnlyCardSupported() {
+  return (
+    <BuyWidget
+      client={storyClient}
+      chain={base}
+      amount="0.1"
+      paymentMethods={["card"]}
+    />
+  );
+}
+
+export function OnlyCryptoSupported() {
+  return (
+    <BuyWidget
+      client={storyClient}
+      chain={base}
+      amount="0.1"
+      paymentMethods={["crypto"]}
+    />
+  );
+}