diff --git a/.changeset/famous-tomatoes-change.md b/.changeset/famous-tomatoes-change.md new file mode 100644 index 00000000000..e25ac1414b0 --- /dev/null +++ b/.changeset/famous-tomatoes-change.md @@ -0,0 +1,5 @@ +--- +"thirdweb": minor +--- + +TransactionButton react native implementation diff --git a/packages/thirdweb/src/exports/react-native.ts b/packages/thirdweb/src/exports/react-native.ts index 3a119e7fbab..0949f4c4457 100644 --- a/packages/thirdweb/src/exports/react-native.ts +++ b/packages/thirdweb/src/exports/react-native.ts @@ -88,6 +88,9 @@ export { } from "../react/core/hooks/connection/AutoConnect.js"; export { useAutoConnect } from "../react/core/hooks/connection/useAutoConnect.js"; +export { TransactionButton } from "../react/native/ui/TransactionButton/TrabsactionButton.js"; +export type { TransactionButtonProps } from "../react/core/hooks/transaction/button-core.js"; + // wallet info export { useWalletInfo, diff --git a/packages/thirdweb/src/exports/react.ts b/packages/thirdweb/src/exports/react.ts index f9e868ab411..64524e02ebb 100644 --- a/packages/thirdweb/src/exports/react.ts +++ b/packages/thirdweb/src/exports/react.ts @@ -1,8 +1,8 @@ -export { darkTheme, lightTheme } from "../react/web/ui/design-system/index.js"; +export { darkTheme, lightTheme } from "../react/core/design-system/index.js"; export type { Theme, ThemeOverrides, -} from "../react/web/ui/design-system/index.js"; +} from "../react/core/design-system/index.js"; export { ConnectButton } from "../react/web/ui/ConnectWallet/ConnectButton.js"; export { @@ -21,10 +21,8 @@ export type { NetworkSelectorProps } from "../react/web/ui/ConnectWallet/Network export type { WelcomeScreen } from "../react/web/ui/ConnectWallet/screens/types.js"; export type { LocaleId } from "../react/web/ui/types.js"; -export { - TransactionButton, - type TransactionButtonProps, -} from "../react/web/ui/TransactionButton/index.js"; +export { TransactionButton } from "../react/web/ui/TransactionButton/index.js"; +export type { TransactionButtonProps } from "../react/core/hooks/transaction/button-core.js"; export { ThirdwebProvider } from "../react/core/providers/thirdweb-provider.js"; diff --git a/packages/thirdweb/src/react/web/ui/design-system/CustomThemeProvider.tsx b/packages/thirdweb/src/react/core/design-system/CustomThemeProvider.tsx similarity index 79% rename from packages/thirdweb/src/react/web/ui/design-system/CustomThemeProvider.tsx rename to packages/thirdweb/src/react/core/design-system/CustomThemeProvider.tsx index 06424da41ed..a9160b974af 100644 --- a/packages/thirdweb/src/react/web/ui/design-system/CustomThemeProvider.tsx +++ b/packages/thirdweb/src/react/core/design-system/CustomThemeProvider.tsx @@ -12,6 +12,20 @@ export function CustomThemeProvider(props: { theme: "light" | "dark" | Theme; }) { const { theme, children } = props; + const themeObj = parseTheme(theme); + + return ( + + {children} + + ); +} + +export function parseTheme(theme: "light" | "dark" | Theme | undefined): Theme { + if (!theme) { + return darkThemeObj; + } + let themeObj: Theme; if (typeof theme === "string") { @@ -20,11 +34,7 @@ export function CustomThemeProvider(props: { themeObj = theme; } - return ( - - {children} - - ); + return themeObj; } /** diff --git a/packages/thirdweb/src/react/web/ui/design-system/index.ts b/packages/thirdweb/src/react/core/design-system/index.ts similarity index 97% rename from packages/thirdweb/src/react/web/ui/design-system/index.ts rename to packages/thirdweb/src/react/core/design-system/index.ts index e85b10e11c7..e9cc87f36eb 100644 --- a/packages/thirdweb/src/react/web/ui/design-system/index.ts +++ b/packages/thirdweb/src/react/core/design-system/index.ts @@ -14,10 +14,10 @@ type ThemeColors = { }; const darkColors = { - base1: "hsl(230deg 11.63% 8.43%)", - base2: "hsl(230deg 11.63% 12%)", - base3: "hsl(230deg 11.63% 15%)", - base4: "hsl(230deg 11.63% 17%)", + base1: "hsl(230 11.63% 8.43%)", + base2: "hsl(230 11.63% 12%)", + base3: "hsl(230 11.63% 15%)", + base4: "hsl(230 11.63% 17%)", primaryText: "#eeeef0", secondaryText: "#7c7a85", danger: "#e5484D", diff --git a/packages/thirdweb/src/react/core/hooks/transaction/button-core.ts b/packages/thirdweb/src/react/core/hooks/transaction/button-core.ts new file mode 100644 index 00000000000..659faaea7be --- /dev/null +++ b/packages/thirdweb/src/react/core/hooks/transaction/button-core.ts @@ -0,0 +1,158 @@ +import { useState } from "react"; +import type { TransactionReceipt } from "viem"; +import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js"; +import { + type WaitForReceiptOptions, + waitForReceipt, +} from "../../../../transaction/actions/wait-for-tx-receipt.js"; +import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js"; +import { stringify } from "../../../../utils/json.js"; +import { + type SendTransactionPayModalConfig, + useSendTransaction, +} from "../../../web/hooks/useSendTransaction.js"; +import type { Theme } from "../../design-system/index.js"; +import { useActiveAccount } from "../wallets/wallet-hooks.js"; + +/** + * Props for the [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton) component. + */ +export type TransactionButtonProps = { + /** + * The a function returning a prepared transaction of type [`PreparedTransaction`](https://portal.thirdweb.com/references/typescript/v5/PreparedTransaction) to be sent when the button is clicked + */ + transaction: () => // biome-ignore lint/suspicious/noExplicitAny: TODO: fix any + | PreparedTransaction + // biome-ignore lint/suspicious/noExplicitAny: TODO: fix any + | Promise>; + + /** + * Callback that will be called when the transaction is submitted onchain + * @param transactionResult - The object of type [`WaitForReceiptOptions`](https://portal.thirdweb.com/references/typescript/v5/WaitForReceiptOptions) + */ + onTransactionSent?: (transactionResult: WaitForReceiptOptions) => void; + /** + * + * Callback that will be called when the transaction is confirmed onchain. + * If this callback is set, the component will wait for the transaction to be confirmed. + * @param receipt - The transaction receipt object of type [`TransactionReceipt`](https://portal.thirdweb.com/references/typescript/v5/TransactionReceipt) + */ + onTransactionConfirmed?: (receipt: TransactionReceipt) => void; + /** + * The Error thrown when trying to send the transaction + * @param error - The `Error` object thrown + */ + onError?: (error: Error) => void; + /** + * Callback to be called when the button is clicked + */ + onClick?: () => void; + /** + * The className to apply to the button element for custom styling + */ + className?: string; + /** + * The style to apply to the button element for custom styling + */ + style?: React.CSSProperties; + /** + * Remove all default styling from the button + */ + unstyled?: boolean; + /** + * The `React.ReactNode` to be rendered inside the button + */ + children: React.ReactNode; + + /** + * Configuration for gasless transactions. + * Refer to [`GaslessOptions`](https://portal.thirdweb.com/references/typescript/v5/GaslessOptions) for more details. + */ + gasless?: GaslessOptions; + + /** + * The button's disabled state + */ + disabled?: boolean; + + /** + * Configuration for the "Pay Modal" that opens when the user doesn't have enough funds to send a transaction. + * Set `payModal: false` to disable the "Pay Modal" popup + * + * This configuration object includes the following properties to configure the "Pay Modal" UI: + * + * ### `locale` + * The language to use for the "Pay Modal" UI. Defaults to `"en_US"`. + * + * ### `supportedTokens` + * An object of type [`SupportedTokens`](https://portal.thirdweb.com/references/typescript/v5/SupportedTokens) to configure the tokens to show for a chain. + * + * ### `theme` + * The theme to use for the "Pay Modal" UI. Defaults to `"dark"`. + * + * It can be set to `"light"` or `"dark"` or an object of type [`Theme`](https://portal.thirdweb.com/references/typescript/v5/Theme) for a custom theme. + * + * Refer to [`lightTheme`](https://portal.thirdweb.com/references/typescript/v5/lightTheme) + * or [`darkTheme`](https://portal.thirdweb.com/references/typescript/v5/darkTheme) helper functions to use the default light or dark theme and customize it. + */ + payModal?: SendTransactionPayModalConfig; + + /** + * The theme to use for the button + */ + theme?: "dark" | "light" | Theme; +}; + +export function useTransactionButtonCore(props: TransactionButtonProps) { + const { + transaction, + onTransactionSent, + onTransactionConfirmed, + onError, + onClick, + gasless, + payModal, + } = props; + const account = useActiveAccount(); + const [isPending, setIsPending] = useState(false); + + const sendTransaction = useSendTransaction({ + gasless, + payModal, + }); + + const handleClick = async () => { + if (onClick) { + onClick(); + } + try { + setIsPending(true); + const resolvedTx = await transaction(); + const result = await sendTransaction.mutateAsync(resolvedTx); + + if (onTransactionSent) { + onTransactionSent(result); + } + + if (onTransactionConfirmed) { + const receipt = await waitForReceipt(result); + if (receipt.status === "reverted") { + throw new Error(`Execution reverted: ${stringify(receipt, null, 2)}`); + } + onTransactionConfirmed(receipt); + } + } catch (error) { + if (onError) { + onError(error as Error); + } + } finally { + setIsPending(false); + } + }; + + return { + account, + handleClick, + isPending, + }; +} diff --git a/packages/thirdweb/src/react/native/ui/TransactionButton/TrabsactionButton.tsx b/packages/thirdweb/src/react/native/ui/TransactionButton/TrabsactionButton.tsx new file mode 100644 index 00000000000..d4b04b07de1 --- /dev/null +++ b/packages/thirdweb/src/react/native/ui/TransactionButton/TrabsactionButton.tsx @@ -0,0 +1,70 @@ +import { type StyleProp, View, type ViewStyle } from "react-native"; +import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js"; +import { + type TransactionButtonProps, + useTransactionButtonCore, +} from "../../../core/hooks/transaction/button-core.js"; +import { ThemedButton } from "../components/button.js"; +import { ThemedSpinner } from "../components/spinner.js"; + +/** + * TransactionButton component is used to render a button that triggers a transaction. + * - It shows a "Switch Network" button if the connected wallet is on a different chain than the transaction. + * @param props - The props for this component. + * Refer to [TransactionButtonProps](https://portal.thirdweb.com/references/typescript/v5/TransactionButtonProps) for details. + * @example + * ```tsx + * {}} + * onTransactionConfirmed={handleSuccess} + * onError={handleError} + * > + * Confirm Transaction + * + * ``` + * @component + */ +export function TransactionButton(props: TransactionButtonProps) { + const { + children, + transaction, + onTransactionSent, + onTransactionConfirmed, + onError, + onClick, + gasless, + payModal, + disabled, + unstyled, + ...buttonProps + } = props; + const { account, handleClick, isPending } = useTransactionButtonCore(props); + const theme = parseTheme(buttonProps.theme); + + return ( + } + theme={theme} + > + {children} + {isPending && ( + + + + )} + + ); +} diff --git a/packages/thirdweb/src/react/native/ui/components/button.tsx b/packages/thirdweb/src/react/native/ui/components/button.tsx new file mode 100644 index 00000000000..f0b8c27cdd5 --- /dev/null +++ b/packages/thirdweb/src/react/native/ui/components/button.tsx @@ -0,0 +1,46 @@ +import { + StyleSheet, + TouchableOpacity, + type TouchableOpacityProps, +} from "react-native"; +import type { Theme } from "../../../core/design-system/index.js"; + +export type ThemedButtonProps = TouchableOpacityProps & { + theme: Theme; + variant?: "primary" | "secondary"; +}; + +export function ThemedButton(props: ThemedButtonProps) { + const variant = props.variant ?? "primary"; + const bg = props.theme.colors.primaryButtonBg; + const { style: styleOverride, ...restProps } = props; + return ( + + {props.children} + + ); +} + +const styles = StyleSheet.create({ + button: { + flex: 1, + flexDirection: "row", + gap: 8, + padding: 12, + borderRadius: 6, + justifyContent: "center", + alignItems: "center", + }, +}); diff --git a/packages/thirdweb/src/react/native/ui/components/spinner.tsx b/packages/thirdweb/src/react/native/ui/components/spinner.tsx new file mode 100644 index 00000000000..46c150d1cdf --- /dev/null +++ b/packages/thirdweb/src/react/native/ui/components/spinner.tsx @@ -0,0 +1,7 @@ +import { ActivityIndicator, type ActivityIndicatorProps } from "react-native"; + +export type ThemedSpinnerProps = ActivityIndicatorProps; + +export function ThemedSpinner(props: ThemedSpinnerProps) { + return ; +} diff --git a/packages/thirdweb/src/react/native/ui/components/text.tsx b/packages/thirdweb/src/react/native/ui/components/text.tsx new file mode 100644 index 00000000000..8df075e6039 --- /dev/null +++ b/packages/thirdweb/src/react/native/ui/components/text.tsx @@ -0,0 +1,54 @@ +import { StyleSheet, Text, type TextProps } from "react-native"; +import type { Theme } from "../../../core/design-system/index.js"; + +export type ThemedTextProps = TextProps & { + theme: Theme; + type?: "default" | "title" | "defaultSemiBold" | "subtitle" | "link"; +}; + +export function ThemedText({ + style, + theme, + type = "default", + ...rest +}: ThemedTextProps) { + return ( + + ); +} + +const styles = StyleSheet.create({ + default: { + fontSize: 16, + lineHeight: 24, + }, + defaultSemiBold: { + fontSize: 16, + lineHeight: 24, + fontWeight: "600", + }, + title: { + fontSize: 32, + fontWeight: "bold", + lineHeight: 32, + }, + subtitle: { + fontSize: 20, + fontWeight: "bold", + }, + link: { + lineHeight: 30, + fontSize: 16, + }, +}); diff --git a/packages/thirdweb/src/react/native/ui/components/view.tsx b/packages/thirdweb/src/react/native/ui/components/view.tsx new file mode 100644 index 00000000000..eefd36d2051 --- /dev/null +++ b/packages/thirdweb/src/react/native/ui/components/view.tsx @@ -0,0 +1,15 @@ +import { View, type ViewProps } from "react-native"; +import type { Theme } from "../../../core/design-system/index.js"; + +export type ThemedViewProps = ViewProps & { + theme: Theme; +}; + +export function ThemedView({ style, theme, ...otherProps }: ThemedViewProps) { + return ( + + ); +} diff --git a/packages/thirdweb/src/react/web/hooks/useSendTransaction.tsx b/packages/thirdweb/src/react/web/hooks/useSendTransaction.tsx index ce4709f29b5..d218f34c98b 100644 --- a/packages/thirdweb/src/react/web/hooks/useSendTransaction.tsx +++ b/packages/thirdweb/src/react/web/hooks/useSendTransaction.tsx @@ -4,6 +4,8 @@ import type { ThirdwebClient } from "../../../client/client.js"; import type { GaslessOptions } from "../../../transaction/actions/gasless/types.js"; import type { PreparedTransaction } from "../../../transaction/prepare-transaction.js"; import type { Wallet } from "../../../wallets/interfaces/wallet.js"; +import { CustomThemeProvider } from "../../core/design-system/CustomThemeProvider.js"; +import { type Theme, iconSize } from "../../core/design-system/index.js"; import { useSendTransactionCore } from "../../core/hooks/contract/useSendTransaction.js"; import { useActiveWallet } from "../../core/hooks/wallets/wallet-hooks.js"; import { SetRootElementContext } from "../../core/providers/RootElementContext.js"; @@ -19,8 +21,6 @@ import { Spinner } from "../ui/components/Spinner.js"; import { Container, ModalHeader } from "../ui/components/basic.js"; import { Button } from "../ui/components/buttons.js"; import { Text } from "../ui/components/text.js"; -import { CustomThemeProvider } from "../ui/design-system/CustomThemeProvider.js"; -import { type Theme, iconSize } from "../ui/design-system/index.js"; import type { LocaleId } from "../ui/types.js"; import { LoadingScreen } from "../wallets/shared/LoadingScreen.js"; diff --git a/packages/thirdweb/src/react/web/providers/wallet-ui-states-provider.tsx b/packages/thirdweb/src/react/web/providers/wallet-ui-states-provider.tsx index 9b59d339060..452d31f9a27 100644 --- a/packages/thirdweb/src/react/web/providers/wallet-ui-states-provider.tsx +++ b/packages/thirdweb/src/react/web/providers/wallet-ui-states-provider.tsx @@ -1,7 +1,7 @@ "use client"; import { createContext, useContext, useState } from "react"; -import { CustomThemeProvider } from "../ui/design-system/CustomThemeProvider.js"; -import type { Theme } from "../ui/design-system/index.js"; +import { CustomThemeProvider } from "../../core/design-system/CustomThemeProvider.js"; +import type { Theme } from "../../core/design-system/index.js"; const WalletModalOpen = /* @__PURE__ */ createContext(false); const SetWalletModalOpen = /* @__PURE__ */ createContext< diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx index 493115cb1af..9c9031b738c 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx @@ -2,6 +2,7 @@ import styled from "@emotion/styled"; import { useEffect, useMemo, useState } from "react"; +import { iconSize } from "../../../core/design-system/index.js"; import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js"; import { AutoConnect } from "../../../core/hooks/connection/AutoConnect.js"; import { @@ -20,7 +21,6 @@ import { Spinner } from "../components/Spinner.js"; import { Container } from "../components/basic.js"; import { Button } from "../components/buttons.js"; import { fadeInAnimation } from "../design-system/animations.js"; -import { iconSize } from "../design-system/index.js"; import type { ConnectButtonProps } from "./ConnectButtonProps.js"; import { ConnectedWalletDetails } from "./Details.js"; import ConnectModal from "./Modal/ConnectModal.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts index a1d687759c9..a99000b99ef 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts @@ -3,8 +3,8 @@ import type { ThirdwebClient } from "../../../../client/client.js"; import type { Wallet } from "../../../../wallets/interfaces/wallet.js"; import type { SmartWalletOptions } from "../../../../wallets/smart/types.js"; import type { AppMetadata } from "../../../../wallets/types.js"; +import type { Theme } from "../../../core/design-system/index.js"; import type { SiweAuthOptions } from "../../../core/hooks/auth/useSiweAuth.js"; -import type { Theme } from "../design-system/index.js"; import type { LocaleId } from "../types.js"; import type { NetworkSelectorProps } from "./NetworkSelector.js"; import type { SupportedTokens } from "./defaultTokens.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx index 885eebaf090..7daa3a91e72 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx @@ -20,6 +20,18 @@ import { resolveName } from "../../../../extensions/ens/resolve-name.js"; import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js"; import { isInAppWallet } from "../../../../wallets/in-app/core/wallet/index.js"; import { injectedProvider } from "../../../../wallets/injected/mipdStore.js"; +import { + CustomThemeProvider, + useCustomTheme, +} from "../../../core/design-system/CustomThemeProvider.js"; +import { + type Theme, + fontSize, + iconSize, + media, + radius, + spacing, +} from "../../../core/design-system/index.js"; import { useChainQuery, useChainsQuery, @@ -46,20 +58,8 @@ import { WalletImage } from "../components/WalletImage.js"; import { Container, Line } from "../components/basic.js"; import { Button, IconButton } from "../components/buttons.js"; import { Link, Text } from "../components/text.js"; -import { - CustomThemeProvider, - useCustomTheme, -} from "../design-system/CustomThemeProvider.js"; import { fadeInAnimation } from "../design-system/animations.js"; import { StyledButton } from "../design-system/elements.js"; -import { - type Theme, - fontSize, - iconSize, - media, - radius, - spacing, -} from "../design-system/index.js"; import type { LocaleId } from "../types.js"; import type { ConnectButtonProps, diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx index 4a7eb74a6e6..02da18b8a00 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx @@ -7,6 +7,8 @@ import { useMemo, useRef, useState } from "react"; import walletInfos from "../../../../../wallets/__generated__/wallet-infos.js"; import { createWallet } from "../../../../../wallets/create-wallet.js"; import type { Wallet } from "../../../../../wallets/interfaces/wallet.js"; +import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js"; +import { iconSize, spacing } from "../../../../core/design-system/index.js"; import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js"; import { sortWallets } from "../../../utils/sortWallets.js"; import { Spacer } from "../../components/Spacer.js"; @@ -14,8 +16,6 @@ import { Spinner } from "../../components/Spinner.js"; import { Container, ModalHeader } from "../../components/basic.js"; import { Input } from "../../components/formElements.js"; import { Text } from "../../components/text.js"; -import { useCustomTheme } from "../../design-system/CustomThemeProvider.js"; -import { iconSize, spacing } from "../../design-system/index.js"; import { useDebouncedValue } from "../../hooks/useDebouncedValue.js"; import { useShowMore } from "../../hooks/useShowMore.js"; import { WalletEntryButton } from "../WalletEntryButton.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx index 3ad06377b52..2fa7b456d9f 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx @@ -5,6 +5,8 @@ import type { ThirdwebClient } from "../../../../../client/client.js"; import type { Wallet } from "../../../../../wallets/interfaces/wallet.js"; import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js"; import type { AppMetadata } from "../../../../../wallets/types.js"; +import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js"; +import { type Theme, radius } from "../../../../core/design-system/index.js"; import type { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js"; import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js"; import { AutoConnect } from "../../../../core/hooks/connection/AutoConnect.js"; @@ -18,9 +20,7 @@ import { canFitWideModal } from "../../../utils/canFitWideModal.js"; import { getDefaultWallets } from "../../../wallets/defaultWallets.js"; import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js"; import { DynamicHeight } from "../../components/DynamicHeight.js"; -import { useCustomTheme } from "../../design-system/CustomThemeProvider.js"; import { StyledDiv } from "../../design-system/elements.js"; -import { type Theme, radius } from "../../design-system/index.js"; import type { LocaleId } from "../../types.js"; import { modalMaxWidthCompact, diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalInline.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalInline.tsx index 8d0acb5be8b..6123f4c1bb6 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalInline.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalInline.tsx @@ -1,19 +1,19 @@ "use client"; import { Cross2Icon } from "@radix-ui/react-icons"; +import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js"; +import { + type Theme, + iconSize, + radius, + shadow, +} from "../../../../core/design-system/index.js"; import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js"; import { WalletUIStatesProvider } from "../../../providers/wallet-ui-states-provider.js"; import { canFitWideModal } from "../../../utils/canFitWideModal.js"; import { DynamicHeight } from "../../components/DynamicHeight.js"; import { CrossContainer } from "../../components/Modal.js"; import { IconButton } from "../../components/buttons.js"; -import { useCustomTheme } from "../../design-system/CustomThemeProvider.js"; import { StyledDiv } from "../../design-system/elements.js"; -import { - type Theme, - iconSize, - radius, - shadow, -} from "../../design-system/index.js"; import { modalMaxWidthCompact, modalMaxWidthWide, diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalSkeleton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalSkeleton.tsx index 3c08153f968..9e84bec2a07 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalSkeleton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalSkeleton.tsx @@ -1,6 +1,6 @@ "use client"; +import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js"; import { Container, noScrollBar } from "../../components/basic.js"; -import { useCustomTheme } from "../../design-system/CustomThemeProvider.js"; import { StyledDiv } from "../../design-system/elements.js"; import { compactModalMaxHeight } from "../constants.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/DeepLinkConnectUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/DeepLinkConnectUI.tsx index 1745a593cd0..06250462655 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/DeepLinkConnectUI.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/DeepLinkConnectUI.tsx @@ -4,14 +4,14 @@ import { ExternalLinkIcon } from "@radix-ui/react-icons"; import type { InjectedSupportedWalletIds } from "../../../../../wallets/__generated__/wallet-ids.js"; import type { Wallet } from "../../../../../wallets/interfaces/wallet.js"; import type { WalletInfo } from "../../../../../wallets/wallet-info.js"; +import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js"; +import { iconSize, radius } from "../../../../core/design-system/index.js"; import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js"; import type { InjectedWalletLocale } from "../../../wallets/injected/locale/types.js"; import { WalletImage } from "../../components/WalletImage.js"; import { Container, ModalHeader } from "../../components/basic.js"; import { ButtonLink } from "../../components/buttons.js"; -import { useCustomTheme } from "../../design-system/CustomThemeProvider.js"; import { StyledDiv } from "../../design-system/elements.js"; -import { iconSize, radius } from "../../design-system/index.js"; /** * @internal diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx index 02a3642c742..e7a4a620b3b 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx @@ -5,6 +5,11 @@ import type { Wallet } from "../../../../../wallets/interfaces/wallet.js"; import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js"; import type { WalletInfo } from "../../../../../wallets/wallet-info.js"; import { connectionManager } from "../../../../core/connectionManager.js"; +import { + fontSize, + iconSize, + spacing, +} from "../../../../core/design-system/index.js"; import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js"; import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js"; import { getSmartWalletLocale } from "../../../wallets/smartWallet/locale/getSmartWalletLocale.js"; @@ -14,7 +19,6 @@ import { Spinner } from "../../components/Spinner.js"; import { Container, ModalHeader } from "../../components/basic.js"; import { Button } from "../../components/buttons.js"; import { Text } from "../../components/text.js"; -import { fontSize, iconSize, spacing } from "../../design-system/index.js"; import { useWalletInfo } from "../../hooks/useWalletInfo.js"; import { AnyWalletConnectUI } from "./AnyWalletConnectUI.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx index 275715132ef..0bd26aa361d 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx @@ -7,6 +7,14 @@ import type React from "react"; import type { Chain, ChainMetadata } from "../../../../chains/types.js"; import { convertApiChainToChain } from "../../../../chains/utils.js"; import type { ThirdwebClient } from "../../../../client/client.js"; +import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js"; +import { + fontSize, + iconSize, + media, + radius, + spacing, +} from "../../../core/design-system/index.js"; import { useChainQuery, useChainsQuery, @@ -24,15 +32,7 @@ import { Button } from "../components/buttons.js"; import { Input } from "../components/formElements.js"; import { ModalTitle } from "../components/modalElements.js"; import { Text } from "../components/text.js"; -import { useCustomTheme } from "../design-system/CustomThemeProvider.js"; import { StyledButton, StyledP, StyledUl } from "../design-system/elements.js"; -import { - fontSize, - iconSize, - media, - radius, - spacing, -} from "../design-system/index.js"; import { useDebouncedValue } from "../hooks/useDebouncedValue.js"; import { useShowMore } from "../hooks/useShowMore.js"; import type { ConnectLocale } from "./locale/types.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx index 8e50785b3d4..ec0e060b020 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx @@ -1,15 +1,20 @@ "use client"; import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js"; import type { WalletId } from "../../../../wallets/wallet-types.js"; +import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js"; +import { + fontSize, + iconSize, + radius, + spacing, +} from "../../../core/design-system/index.js"; // import { localWalletMetadata } from "../../../../wallets/local/index._ts"; import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js"; import { Skeleton } from "../components/Skeleton.js"; import { WalletImage } from "../components/WalletImage.js"; import { Container } from "../components/basic.js"; import { Text } from "../components/text.js"; -import { useCustomTheme } from "../design-system/CustomThemeProvider.js"; import { StyledButton } from "../design-system/elements.js"; -import { fontSize, iconSize, radius, spacing } from "../design-system/index.js"; import { useWalletInfo } from "../hooks/useWalletInfo.js"; import { useScreenContext } from "./Modal/screen.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx index 4dfb6473b70..4d6f02c8ec3 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx @@ -6,6 +6,13 @@ import { createWallet } from "../../../../wallets/create-wallet.js"; import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js"; import type { Wallet } from "../../../../wallets/interfaces/wallet.js"; import type { WalletId } from "../../../../wallets/wallet-types.js"; +import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js"; +import { + fontSize, + iconSize, + radius, + spacing, +} from "../../../core/design-system/index.js"; // import { localWalletMetadata } from "../../../../wallets/local/index._ts"; import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js"; import { sortWallets } from "../../utils/sortWallets.js"; @@ -24,9 +31,7 @@ import { Button, IconButton } from "../components/buttons.js"; import { ModalTitle } from "../components/modalElements.js"; import { Link } from "../components/text.js"; import { Text } from "../components/text.js"; -import { useCustomTheme } from "../design-system/CustomThemeProvider.js"; import { StyledDiv, StyledUl } from "../design-system/elements.js"; -import { fontSize, iconSize, radius, spacing } from "../design-system/index.js"; import { SmartConnectUI } from "./Modal/SmartWalletConnectUI.js"; import { TOS } from "./Modal/TOS.js"; import { PoweredByThirdweb } from "./PoweredByTW.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx index 0b878d36544..ee03f89572b 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx @@ -1,9 +1,13 @@ import type { ThirdwebClient } from "../../../../client/client.js"; +import { + iconSize, + radius, + spacing, +} from "../../../core/design-system/index.js"; import { Text } from "../../ui/components/text.js"; import { Img } from "../components/Img.js"; import { Container } from "../components/basic.js"; import { Button } from "../components/buttons.js"; -import { iconSize, radius, spacing } from "../design-system/index.js"; type WalletTypeRowProps = { client: ThirdwebClient; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx index 739601bd062..fd3a9ccd785 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx @@ -7,6 +7,11 @@ import { isSwapRequiredPostOnramp } from "../../../../../../pay/buyWithFiat/isSw import { formatNumber } from "../../../../../../utils/formatNumber.js"; import { toEther } from "../../../../../../utils/units.js"; import type { Account } from "../../../../../../wallets/interfaces/wallet.js"; +import { + type Theme, + fontSize, + spacing, +} from "../../../../../core/design-system/index.js"; import { useChainQuery, useChainsQuery, @@ -33,7 +38,6 @@ import { TokenIcon } from "../../../components/TokenIcon.js"; import { Container, Line, ModalHeader } from "../../../components/basic.js"; import { Button } from "../../../components/buttons.js"; import { Text } from "../../../components/text.js"; -import { type Theme, fontSize, spacing } from "../../../design-system/index.js"; import type { PayUIOptions } from "../../ConnectButtonProps.js"; import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js"; import type { SupportedTokens } from "../../defaultTokens.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/EstimatedTimeAndFees.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/EstimatedTimeAndFees.tsx index 4716b4627a3..694de180677 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/EstimatedTimeAndFees.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/EstimatedTimeAndFees.tsx @@ -1,9 +1,13 @@ import { ClockIcon } from "@radix-ui/react-icons"; +import { + fontSize, + iconSize, + radius, +} from "../../../../../core/design-system/index.js"; import { Skeleton } from "../../../components/Skeleton.js"; import { Container } from "../../../components/basic.js"; import { Button } from "../../../components/buttons.js"; import { Text } from "../../../components/text.js"; -import { fontSize, iconSize, radius } from "../../../design-system/index.js"; import type { IconFC } from "../../icons/types.js"; import { formatSeconds } from "./swap/formatSeconds.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx index 38b2096f725..fdb054580d0 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx @@ -2,16 +2,16 @@ import styled from "@emotion/styled"; import { ChevronDownIcon } from "@radix-ui/react-icons"; import type { ThirdwebClient } from "../../../../../../client/client.js"; import { formatNumber } from "../../../../../../utils/formatNumber.js"; -import { Skeleton } from "../../../components/Skeleton.js"; -import { Container } from "../../../components/basic.js"; -import { Button } from "../../../components/buttons.js"; -import { Text } from "../../../components/text.js"; import { fontSize, iconSize, radius, spacing, -} from "../../../design-system/index.js"; +} from "../../../../../core/design-system/index.js"; +import { Skeleton } from "../../../components/Skeleton.js"; +import { Container } from "../../../components/basic.js"; +import { Button } from "../../../components/buttons.js"; +import { Text } from "../../../components/text.js"; import type { CurrencyMeta } from "./fiat/currencies.js"; /** diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PaymentSelection.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PaymentSelection.tsx index 97651b191f6..e6744a499d1 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PaymentSelection.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PaymentSelection.tsx @@ -1,10 +1,10 @@ import styled from "@emotion/styled"; +import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js"; +import { fontSize, spacing } from "../../../../../core/design-system/index.js"; import { Spacer } from "../../../components/Spacer.js"; import { Container } from "../../../components/basic.js"; import { Button } from "../../../components/buttons.js"; import { Text } from "../../../components/text.js"; -import { useCustomTheme } from "../../../design-system/CustomThemeProvider.js"; -import { fontSize, spacing } from "../../../design-system/index.js"; /** * @internal diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/Stepper.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/Stepper.tsx index bba9a33efee..208a13f714e 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/Stepper.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/Stepper.tsx @@ -1,8 +1,8 @@ import { keyframes } from "@emotion/react"; import { CheckIcon } from "@radix-ui/react-icons"; +import { fontSize, iconSize } from "../../../../../core/design-system/index.js"; import { Container } from "../../../components/basic.js"; import { StyledDiv } from "../../../design-system/elements.js"; -import { fontSize, iconSize } from "../../../design-system/index.js"; export function StepIcon(props: { isDone: boolean; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/CurrencySelection.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/CurrencySelection.tsx index c334fa81767..b319a6d9025 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/CurrencySelection.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/CurrencySelection.tsx @@ -1,8 +1,8 @@ +import { iconSize } from "../../../../../../core/design-system/index.js"; import { Spacer } from "../../../../components/Spacer.js"; import { Container, Line, ModalHeader } from "../../../../components/basic.js"; import { Button } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; -import { iconSize } from "../../../../design-system/index.js"; import { type CurrencyMeta, currencies } from "./currencies.js"; export function CurrencySelection(props: { diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatStatusScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatStatusScreen.tsx index 0afad0c572f..79094a6d83e 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatStatusScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatStatusScreen.tsx @@ -8,6 +8,7 @@ import type { ValidBuyWithFiatStatus, } from "../../../../../../../pay/buyWithFiat/getStatus.js"; import { isMobile } from "../../../../../../../utils/web/isMobile.js"; +import { iconSize } from "../../../../../../core/design-system/index.js"; import { useBuyWithFiatStatus } from "../../../../../../core/hooks/pay/useBuyWithFiatStatus.js"; import { invalidateWalletBalance } from "../../../../../../core/providers/invalidateWalletBalance.js"; import { Spacer } from "../../../../components/Spacer.js"; @@ -16,7 +17,6 @@ import { StepBar } from "../../../../components/StepBar.js"; import { Container, ModalHeader } from "../../../../components/basic.js"; import { Button } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; -import { iconSize } from "../../../../design-system/index.js"; import { AccentFailIcon } from "../../../icons/AccentFailIcon.js"; import { getBuyWithFiatStatusMeta } from "../tx-history/statusMeta.js"; import { OnRampTxDetailsTable } from "./FiatTxDetailsTable.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx index 31b9f3d9fe9..73acc3750d2 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx @@ -10,6 +10,13 @@ import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.j import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js"; import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js"; import { formatNumber } from "../../../../../../../utils/formatNumber.js"; +import { + type Theme, + fontSize, + iconSize, + radius, + spacing, +} from "../../../../../../core/design-system/index.js"; import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js"; import { Spacer } from "../../../../components/Spacer.js"; import { Spinner } from "../../../../components/Spinner.js"; @@ -18,13 +25,6 @@ import { Container, Line, ModalHeader } from "../../../../components/basic.js"; import { Button, ButtonLink } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; import { TokenSymbol } from "../../../../components/token/TokenSymbol.js"; -import { - type Theme, - fontSize, - iconSize, - radius, - spacing, -} from "../../../../design-system/index.js"; import type { TokenInfo } from "../../../defaultTokens.js"; import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js"; import { StepIcon } from "../Stepper.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx index c20cf4df8af..059f9303adf 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx @@ -2,12 +2,15 @@ import { ExternalLinkIcon } from "@radix-ui/react-icons"; import { getCachedChain } from "../../../../../../../chains/utils.js"; import type { ThirdwebClient } from "../../../../../../../client/client.js"; import { formatNumber } from "../../../../../../../utils/formatNumber.js"; +import { + fontSize, + iconSize, +} from "../../../../../../core/design-system/index.js"; import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js"; import { Spacer } from "../../../../components/Spacer.js"; import { Container, Line } from "../../../../components/basic.js"; import { ButtonLink } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; -import { fontSize, iconSize } from "../../../../design-system/index.js"; import { USDIcon } from "../../../icons/currencies/USDIcon.js"; import { TokenInfoRow } from "../tx-history/TokenInfoRow.js"; import type { FiatStatusMeta } from "../tx-history/statusMeta.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx index 51448945ac5..16a71b03e94 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx @@ -4,13 +4,13 @@ import type { ThirdwebClient } from "../../../../../../../client/client.js"; import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js"; import { getPostOnRampQuote } from "../../../../../../../pay/buyWithFiat/getPostOnRampQuote.js"; import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js"; +import { iconSize } from "../../../../../../core/design-system/index.js"; import { useActiveAccount } from "../../../../../../core/hooks/wallets/wallet-hooks.js"; import { Spacer } from "../../../../components/Spacer.js"; import { Spinner } from "../../../../components/Spinner.js"; import { Container, ModalHeader } from "../../../../components/basic.js"; import { Button } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; -import { iconSize } from "../../../../design-system/index.js"; import { AccentFailIcon } from "../../../icons/AccentFailIcon.js"; import { SwapFlow } from "../swap/SwapFlow.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx index 1fbc4d5cddf..48ff826ddcc 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx @@ -2,6 +2,12 @@ import styled from "@emotion/styled"; import { ChevronDownIcon } from "@radix-ui/react-icons"; import type { Chain } from "../../../../../../../chains/types.js"; import type { ThirdwebClient } from "../../../../../../../client/client.js"; +import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js"; +import { + fontSize, + iconSize, + spacing, +} from "../../../../../../core/design-system/index.js"; import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js"; import { Skeleton } from "../../../../components/Skeleton.js"; import { Spacer } from "../../../../components/Spacer.js"; @@ -11,12 +17,6 @@ import { Button } from "../../../../components/buttons.js"; import { Input } from "../../../../components/formElements.js"; import { Text } from "../../../../components/text.js"; import { TokenSymbol } from "../../../../components/token/TokenSymbol.js"; -import { useCustomTheme } from "../../../../design-system/CustomThemeProvider.js"; -import { - fontSize, - iconSize, - spacing, -} from "../../../../design-system/index.js"; import type { ERC20OrNativeToken } from "../../nativeToken.js"; /** diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx index 2e15ae27a52..1435a556b24 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx @@ -5,6 +5,11 @@ import type { ThirdwebClient } from "../../../../../../../client/client.js"; import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js"; import { waitForReceipt } from "../../../../../../../transaction/actions/wait-for-tx-receipt.js"; import { formatNumber } from "../../../../../../../utils/formatNumber.js"; +import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js"; +import { + fontSize, + iconSize, +} from "../../../../../../core/design-system/index.js"; import { useSendTransactionCore } from "../../../../../../core/hooks/contract/useSendTransaction.js"; import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js"; import { @@ -20,9 +25,7 @@ import { TokenIcon } from "../../../../components/TokenIcon.js"; import { Container, Line, ModalHeader } from "../../../../components/basic.js"; import { Button } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; -import { useCustomTheme } from "../../../../design-system/CustomThemeProvider.js"; import { StyledDiv } from "../../../../design-system/elements.js"; -import { fontSize, iconSize } from "../../../../design-system/index.js"; import type { ERC20OrNativeToken } from "../../nativeToken.js"; import { Step } from "../Stepper.js"; import { SwapFees } from "./Fees.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx index d04a4b256a0..d34046b7195 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx @@ -2,6 +2,12 @@ import { ChevronDownIcon } from "@radix-ui/react-icons"; import type { Chain } from "../../../../../../../chains/types.js"; import type { ThirdwebClient } from "../../../../../../../client/client.js"; import { formatNumber } from "../../../../../../../utils/formatNumber.js"; +import { + fontSize, + iconSize, + radius, + spacing, +} from "../../../../../../core/design-system/index.js"; import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js"; import { useWalletBalance } from "../../../../../../core/hooks/others/useWalletBalance.js"; import { useActiveAccount } from "../../../../../../core/hooks/wallets/wallet-hooks.js"; @@ -11,12 +17,6 @@ import { Container } from "../../../../components/basic.js"; import { Button } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; import { TokenSymbol } from "../../../../components/token/TokenSymbol.js"; -import { - fontSize, - iconSize, - radius, - spacing, -} from "../../../../design-system/index.js"; import type { TokenInfo } from "../../../defaultTokens.js"; import { WalletIcon } from "../../../icons/WalletIcon.js"; import { formatTokenBalance } from "../../formatTokenBalance.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapStatusScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapStatusScreen.tsx index 49ba4939a09..04a1ef4a569 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapStatusScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapStatusScreen.tsx @@ -3,6 +3,7 @@ import { useQueryClient } from "@tanstack/react-query"; import { useEffect, useRef } from "react"; import type { ThirdwebClient } from "../../../../../../../client/client.js"; import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js"; +import { iconSize } from "../../../../../../core/design-system/index.js"; import { useBuyWithCryptoStatus } from "../../../../../../core/hooks/pay/useBuyWithCryptoStatus.js"; import { invalidateWalletBalance } from "../../../../../../core/providers/invalidateWalletBalance.js"; import { Spacer } from "../../../../components/Spacer.js"; @@ -10,7 +11,6 @@ import { Spinner } from "../../../../components/Spinner.js"; import { Container, ModalHeader } from "../../../../components/basic.js"; import { Button } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; -import { iconSize } from "../../../../design-system/index.js"; import { AccentFailIcon } from "../../../icons/AccentFailIcon.js"; import { SwapTxDetailsTable } from "../tx-history/SwapDetailsScreen.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelector.tsx index 35b4d3f9a4e..86a5a0f9715 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelector.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelector.tsx @@ -1,12 +1,12 @@ import { ChevronDownIcon } from "@radix-ui/react-icons"; import type { Chain } from "../../../../../../../chains/types.js"; import type { ThirdwebClient } from "../../../../../../../client/client.js"; +import { iconSize } from "../../../../../../core/design-system/index.js"; import { TokenIcon } from "../../../../components/TokenIcon.js"; import { Container } from "../../../../components/basic.js"; import { Button } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; import { TokenSymbol } from "../../../../components/token/TokenSymbol.js"; -import { iconSize } from "../../../../design-system/index.js"; import type { ERC20OrNativeToken } from "../../nativeToken.js"; /** diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx index c46724b7152..afd0f35d73e 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx @@ -6,6 +6,11 @@ import { } from "@radix-ui/react-icons"; import { useState } from "react"; import type { ThirdwebClient } from "../../../../../../../client/client.js"; +import { + fontSize, + iconSize, + spacing, +} from "../../../../../../core/design-system/index.js"; import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js"; import { useActiveAccount, @@ -16,11 +21,6 @@ import { Spinner } from "../../../../components/Spinner.js"; import { Container, Line, ModalHeader } from "../../../../components/basic.js"; import { Button, ButtonLink } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; -import { - fontSize, - iconSize, - spacing, -} from "../../../../design-system/index.js"; import { BuyTxHistoryButton, BuyTxHistoryButtonHeight, diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistoryButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistoryButton.tsx index 7160c71a70a..a1f653d9bb7 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistoryButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistoryButton.tsx @@ -2,14 +2,14 @@ import styled from "@emotion/styled"; import { getCachedChain } from "../../../../../../../chains/utils.js"; import type { ThirdwebClient } from "../../../../../../../client/client.js"; import { formatNumber } from "../../../../../../../utils/formatNumber.js"; +import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js"; +import { spacing } from "../../../../../../core/design-system/index.js"; import { ChainName } from "../../../../components/ChainName.js"; import { Spacer } from "../../../../components/Spacer.js"; import { TokenIcon } from "../../../../components/TokenIcon.js"; import { Container } from "../../../../components/basic.js"; import { Button } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; -import { useCustomTheme } from "../../../../design-system/CustomThemeProvider.js"; -import { spacing } from "../../../../design-system/index.js"; import { getBuyWithCryptoStatusMeta, getBuyWithFiatStatusMeta, diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/SwapDetailsScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/SwapDetailsScreen.tsx index 52b76860c55..d84b21a03c5 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/SwapDetailsScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/SwapDetailsScreen.tsx @@ -3,17 +3,17 @@ import { getCachedChain } from "../../../../../../../chains/utils.js"; import type { ThirdwebClient } from "../../../../../../../client/client.js"; import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js"; import type { ValidBuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js"; +import { + fontSize, + iconSize, + spacing, +} from "../../../../../../core/design-system/index.js"; import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js"; import { useBuyWithCryptoStatus } from "../../../../../../core/hooks/pay/useBuyWithCryptoStatus.js"; import { Spacer } from "../../../../components/Spacer.js"; import { Container, Line, ModalHeader } from "../../../../components/basic.js"; import { ButtonLink } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; -import { - fontSize, - iconSize, - spacing, -} from "../../../../design-system/index.js"; import { formatSeconds } from "../swap/formatSeconds.js"; import { TokenInfoRow } from "./TokenInfoRow.js"; import { type StatusMeta, getBuyWithCryptoStatusMeta } from "./statusMeta.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/statusMeta.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/statusMeta.ts index f92f59c3054..5ce3ed5524c 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/statusMeta.ts +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/statusMeta.ts @@ -1,6 +1,6 @@ import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js"; import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js"; -import type { Theme } from "../../../../design-system/index.js"; +import type { Theme } from "../../../../../../core/design-system/index.js"; export type StatusMeta = { status: string; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/PrivateKey.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/PrivateKey.tsx index 466287a1ee2..4bae4643bf0 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/PrivateKey.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/PrivateKey.tsx @@ -2,10 +2,10 @@ import { useState } from "react"; import type { ThirdwebClient } from "../../../../../client/client.js"; import { getThirdwebDomains } from "../../../../../utils/domains.js"; +import type { Theme } from "../../../../core/design-system/index.js"; import { Spacer } from "../../components/Spacer.js"; import { Spinner } from "../../components/Spinner.js"; import { Container, Line, ModalHeader } from "../../components/basic.js"; -import type { Theme } from "../../design-system/index.js"; /** * @internal diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx index 1a14962eb02..16999d3be2c 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx @@ -1,5 +1,11 @@ import type { ThirdwebClient } from "../../../../../client/client.js"; import type { WalletId } from "../../../../../wallets/wallet-types.js"; +import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js"; +import { + iconSize, + radius, + spacing, +} from "../../../../core/design-system/index.js"; import { useActiveAccount } from "../../../../core/hooks/wallets/wallet-hooks.js"; import { shortenString } from "../../../../core/utils/addresses.js"; import { CopyIcon } from "../../components/CopyIcon.js"; @@ -8,9 +14,7 @@ import { Spacer } from "../../components/Spacer.js"; import { WalletImage } from "../../components/WalletImage.js"; import { Container, ModalHeader } from "../../components/basic.js"; import { Text } from "../../components/text.js"; -import { useCustomTheme } from "../../design-system/CustomThemeProvider.js"; import { StyledButton } from "../../design-system/elements.js"; -import { iconSize, radius, spacing } from "../../design-system/index.js"; import { useClipboard } from "../../hooks/useCopyClipboard.js"; import type { ConnectLocale } from "../locale/types.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx index dae96c0f5f6..6d9c51ae63f 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx @@ -2,6 +2,11 @@ import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons"; import { useMemo, useState } from "react"; import type { ThirdwebClient } from "../../../../../client/client.js"; import { isAddress } from "../../../../../utils/address.js"; +import { + fontSize, + iconSize, + spacing, +} from "../../../../core/design-system/index.js"; import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js"; import { useActiveAccount, @@ -16,7 +21,6 @@ import { Button } from "../../components/buttons.js"; import { Input, Label } from "../../components/formElements.js"; import { Text } from "../../components/text.js"; import { StyledDiv } from "../../design-system/elements.js"; -import { fontSize, iconSize, spacing } from "../../design-system/index.js"; import { useSendToken } from "../../hooks/useSendToken.js"; import { type SupportedTokens, defaultTokens } from "../defaultTokens.js"; import type { ConnectLocale } from "../locale/types.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx index 567a853c175..681e2a14873 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx @@ -3,6 +3,12 @@ import { ReloadIcon } from "@radix-ui/react-icons"; import { useCallback, useEffect, useRef, useState } from "react"; import type { ThirdwebClient } from "../../../../../client/client.js"; import type { Wallet } from "../../../../../wallets/interfaces/wallet.js"; +import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js"; +import { + iconSize, + radius, + spacing, +} from "../../../../core/design-system/index.js"; import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js"; import { useActiveWallet, @@ -16,9 +22,7 @@ import { WalletImage } from "../../components/WalletImage.js"; import { Container, ModalHeader } from "../../components/basic.js"; import { Button } from "../../components/buttons.js"; import { Text } from "../../components/text.js"; -import { useCustomTheme } from "../../design-system/CustomThemeProvider.js"; import { StyledDiv } from "../../design-system/elements.js"; -import { iconSize, radius, spacing } from "../../design-system/index.js"; import type { ConnectButtonProps } from "../ConnectButtonProps.js"; import { TOS } from "../Modal/TOS.js"; import type { ConnectLocale } from "../locale/types.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/StartScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/StartScreen.tsx index 02ddf648253..5650d1274d8 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/StartScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/StartScreen.tsx @@ -1,13 +1,13 @@ import { keyframes } from "@emotion/react"; +import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js"; +import { spacing } from "../../../../core/design-system/index.js"; import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js"; import { Img } from "../../components/Img.js"; import { Spacer } from "../../components/Spacer.js"; import { Container } from "../../components/basic.js"; import { Link } from "../../components/text.js"; import { Text } from "../../components/text.js"; -import { useCustomTheme } from "../../design-system/CustomThemeProvider.js"; import { StyledDiv } from "../../design-system/elements.js"; -import { spacing } from "../../design-system/index.js"; import { TOS } from "../Modal/TOS.js"; import { PoweredByThirdweb } from "../PoweredByTW.js"; import { GlobeIcon } from "../icons/GlobalIcon.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx index e97a20795c3..5cff5017d3e 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx @@ -6,6 +6,12 @@ import type { Chain } from "../../../../../chains/types.js"; import type { ThirdwebClient } from "../../../../../client/client.js"; import type { Account } from "../../../../../wallets/interfaces/wallet.js"; import { getTokenBalance } from "../../../../../wallets/utils/getTokenBalance.js"; +import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js"; +import { + fontSize, + iconSize, + spacing, +} from "../../../../core/design-system/index.js"; import { useChainQuery } from "../../../../core/hooks/others/useChainQuery.js"; import { useTokenInfo } from "../../../../core/hooks/others/useTokenInfo.js"; import { useActiveAccount } from "../../../../core/hooks/wallets/wallet-hooks.js"; @@ -18,8 +24,6 @@ import { Container, Line, ModalHeader } from "../../components/basic.js"; import { Button } from "../../components/buttons.js"; import { Input } from "../../components/formElements.js"; import { Text } from "../../components/text.js"; -import { useCustomTheme } from "../../design-system/CustomThemeProvider.js"; -import { fontSize, iconSize, spacing } from "../../design-system/index.js"; import { ChainButton, NetworkSelectorContent } from "../NetworkSelector.js"; import type { TokenInfo } from "../defaultTokens.js"; import type { ConnectLocale } from "../locale/types.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewFunds.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewFunds.tsx index 0fcdeec06e2..885d710c91e 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewFunds.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewFunds.tsx @@ -1,5 +1,6 @@ import type { Chain } from "../../../../../chains/types.js"; import type { ThirdwebClient } from "../../../../../client/client.js"; +import { fontSize } from "../../../../core/design-system/index.js"; import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js"; import { useActiveAccount, @@ -10,7 +11,6 @@ import { Spacer } from "../../components/Spacer.js"; import { TokenIcon } from "../../components/TokenIcon.js"; import { Container, Line, ModalHeader } from "../../components/basic.js"; import { Text } from "../../components/text.js"; -import { fontSize } from "../../design-system/index.js"; import { type SupportedTokens, defaultTokens } from "../defaultTokens.js"; import { formatTokenBalance } from "./formatTokenBalance.js"; import { diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletLogoSpinner.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletLogoSpinner.tsx index aedb9bd2cda..7fe9cfb1d5d 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletLogoSpinner.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletLogoSpinner.tsx @@ -1,11 +1,11 @@ import { keyframes } from "@emotion/react"; import type { WalletId } from "../../../../../wallets/wallet-types.js"; +import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js"; +import { radius, spacing } from "../../../../core/design-system/index.js"; import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js"; import { WalletImage } from "../../components/WalletImage.js"; -import { useCustomTheme } from "../../design-system/CustomThemeProvider.js"; import { fadeInAnimation } from "../../design-system/animations.js"; import { StyledDiv } from "../../design-system/elements.js"; -import { radius, spacing } from "../../design-system/index.js"; /** * diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx index a3705bbda5d..c1f36a411ad 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx @@ -4,12 +4,12 @@ import type { ThirdwebClient } from "../../../../client/client.js"; import type { Wallet } from "../../../../wallets/interfaces/wallet.js"; import type { SmartWalletOptions } from "../../../../wallets/smart/types.js"; import type { AppMetadata } from "../../../../wallets/types.js"; +import type { Theme } from "../../../core/design-system/index.js"; import { SetRootElementContext } from "../../../core/providers/RootElementContext.js"; import { ConnectUIContext } from "../../../core/providers/wallet-connection.js"; import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js"; import { canFitWideModal } from "../../utils/canFitWideModal.js"; import { getDefaultWallets } from "../../wallets/defaultWallets.js"; -import type { Theme } from "../design-system/index.js"; import type { LocaleId } from "../types.js"; import ConnectModal from "./Modal/ConnectModal.js"; import { getConnectLocale } from "./locale/getConnectLocale.js"; diff --git a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx index 3619e3aaab3..08cc8099691 100644 --- a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx +++ b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx @@ -6,6 +6,8 @@ import type { ThirdwebClient } from "../../../client/client.js"; import type { Wallet } from "../../../wallets/interfaces/wallet.js"; import type { SmartWalletOptions } from "../../../wallets/smart/types.js"; import type { AppMetadata } from "../../../wallets/types.js"; +import { CustomThemeProvider } from "../../core/design-system/CustomThemeProvider.js"; +import { type Theme, radius } from "../../core/design-system/index.js"; import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js"; import { ConnectButton } from "./ConnectWallet/ConnectButton.js"; import type { @@ -19,8 +21,6 @@ import { BuyTxHistory } from "./ConnectWallet/screens/Buy/tx-history/BuyTxHistor import { DynamicHeight } from "./components/DynamicHeight.js"; import { Spinner } from "./components/Spinner.js"; import { Container } from "./components/basic.js"; -import { CustomThemeProvider } from "./design-system/CustomThemeProvider.js"; -import { type Theme, radius } from "./design-system/index.js"; import type { LocaleId } from "./types.js"; /** diff --git a/packages/thirdweb/src/react/web/ui/TransactionButton/index.tsx b/packages/thirdweb/src/react/web/ui/TransactionButton/index.tsx index 3a10bb618a6..089b17d508c 100644 --- a/packages/thirdweb/src/react/web/ui/TransactionButton/index.tsx +++ b/packages/thirdweb/src/react/web/ui/TransactionButton/index.tsx @@ -1,105 +1,12 @@ "use client"; -import { useState } from "react"; -import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js"; +import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js"; import { - type WaitForReceiptOptions, - waitForReceipt as doWaitForReceipt, -} from "../../../../transaction/actions/wait-for-tx-receipt.js"; -import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js"; -import type { TransactionReceipt } from "../../../../transaction/types.js"; -import { stringify } from "../../../../utils/json.js"; -import { useActiveAccount } from "../../../core/hooks/wallets/wallet-hooks.js"; -import { - type SendTransactionPayModalConfig, - useSendTransaction, -} from "../../hooks/useSendTransaction.js"; + type TransactionButtonProps, + useTransactionButtonCore, +} from "../../../core/hooks/transaction/button-core.js"; import { Spinner } from "../components/Spinner.js"; import { Button } from "../components/buttons.js"; -/** - * Props for the [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton) component. - */ -export type TransactionButtonProps = { - /** - * The a function returning a prepared transaction of type [`PreparedTransaction`](https://portal.thirdweb.com/references/typescript/v5/PreparedTransaction) to be sent when the button is clicked - */ - transaction: () => // biome-ignore lint/suspicious/noExplicitAny: TODO: fix any - | PreparedTransaction - // biome-ignore lint/suspicious/noExplicitAny: TODO: fix any - | Promise>; - - /** - * Callback that will be called when the transaction is submitted onchain - * @param transactionResult - The object of type [`WaitForReceiptOptions`](https://portal.thirdweb.com/references/typescript/v5/WaitForReceiptOptions) - */ - onTransactionSent?: (transactionResult: WaitForReceiptOptions) => void; - /** - * - * Callback that will be called when the transaction is confirmed onchain. - * If this callback is set, the component will wait for the transaction to be confirmed. - * @param receipt - The transaction receipt object of type [`TransactionReceipt`](https://portal.thirdweb.com/references/typescript/v5/TransactionReceipt) - */ - onTransactionConfirmed?: (receipt: TransactionReceipt) => void; - /** - * The Error thrown when trying to send the transaction - * @param error - The `Error` object thrown - */ - onError?: (error: Error) => void; - /** - * Callback to be called when the button is clicked - */ - onClick?: (e: React.MouseEvent) => void; - /** - * The className to apply to the button element for custom styling - */ - className?: string; - /** - * The style to apply to the button element for custom styling - */ - style?: React.CSSProperties; - /** - * Remove all default styling from the button - */ - unstyled?: boolean; - /** - * The `React.ReactNode` to be rendered inside the button - */ - children: React.ReactNode; - - /** - * Configuration for gasless transactions. - * Refer to [`GaslessOptions`](https://portal.thirdweb.com/references/typescript/v5/GaslessOptions) for more details. - */ - gasless?: GaslessOptions; - - /** - * The button's disabled state - */ - disabled?: boolean; - - /** - * Configuration for the "Pay Modal" that opens when the user doesn't have enough funds to send a transaction. - * Set `payModal: false` to disable the "Pay Modal" popup - * - * This configuration object includes the following properties to configure the "Pay Modal" UI: - * - * ### `locale` - * The language to use for the "Pay Modal" UI. Defaults to `"en_US"`. - * - * ### `supportedTokens` - * An object of type [`SupportedTokens`](https://portal.thirdweb.com/references/typescript/v5/SupportedTokens) to configure the tokens to show for a chain. - * - * ### `theme` - * The theme to use for the "Pay Modal" UI. Defaults to `"dark"`. - * - * It can be set to `"light"` or `"dark"` or an object of type [`Theme`](https://portal.thirdweb.com/references/typescript/v5/Theme) for a custom theme. - * - * Refer to [`lightTheme`](https://portal.thirdweb.com/references/typescript/v5/lightTheme) - * or [`darkTheme`](https://portal.thirdweb.com/references/typescript/v5/darkTheme) helper functions to use the default light or dark theme and customize it. - */ - payModal?: SendTransactionPayModalConfig; -}; - /** * TransactionButton component is used to render a button that triggers a transaction. * - It shows a "Switch Network" button if the connected wallet is on a different chain than the transaction. @@ -109,7 +16,7 @@ export type TransactionButtonProps = { * ```tsx * {}} - * onSuccess={handleSuccess} + * onTransactionConfirmed={handleSuccess} * onError={handleError} * > * Confirm Transaction @@ -119,7 +26,7 @@ export type TransactionButtonProps = { * ```tsx * {}} - * onSuccess={handleSuccess} + * onTransactionConfirmed={handleSuccess} * onError={handleError} * unstyled * className="bg-white text-black rounded-md p-4 flex items-center justify-center" @@ -143,13 +50,7 @@ export function TransactionButton(props: TransactionButtonProps) { unstyled, ...buttonProps } = props; - const account = useActiveAccount(); - const [isPending, setIsPending] = useState(false); - - const sendTransaction = useSendTransaction({ - gasless, - payModal, - }); + const { account, handleClick, isPending } = useTransactionButtonCore(props); return (