thirdweb 5.31.1 → 5.32.0-nightly-931cca3a7e8f3946bdb7e40880333790387d4cef-20240702071901

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -4,14 +4,16 @@ import type { Chain } from "../../../../../chains/types.js";
 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,
   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 { radius } from "../../../../core/design-system/index.js";
+import {
+  type SiweAuthOptions,
+  useSiweAuth,
+} from "../../../../core/hooks/auth/useSiweAuth.js";
+import type { ConnectEmbedProps } from "../../../../core/hooks/connection/ConnectEmbedProps.js";
 import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
 import { useIsAutoConnecting } from "../../../hooks/wallets/useIsAutoConnecting.js";
@@ -35,283 +37,6 @@ import type { ConnectLocale } from "../locale/types.js";
 import { ConnectModalContent } from "./ConnectModalContent.js";
 import { useSetupScreen } from "./screen.js";
 
-export type ConnectEmbedProps = {
-  /**
-   * A client is the entry point to the thirdweb SDK.
-   * It is required for all other actions.
-   * You can create a client using the `createThirdwebClient` function. Refer to the [Creating a Client](https://portal.thirdweb.com/typescript/v5/client) documentation for more information.
-   *
-   * You must provide a `clientId` or `secretKey` in order to initialize a client. Pass `clientId` if you want for client-side usage and `secretKey` for server-side usage.
-   *
-   * ```tsx
-   * import { createThirdwebClient } from "thirdweb";
-   *
-   * const client = createThirdwebClient({
-   *  clientId: "<your_client_id>",
-   * })
-   * ```
-   */
-  client: ThirdwebClient;
-
-  /**
-   * Metadata of the app that will be passed to connected wallet. Setting this is highly recommended.
-   *
-   * Some wallets display this information to the user when they connect to your app.
-   * @example
-   * ```ts
-   * {
-   *   name: "My App",
-   *   url: "https://my-app.com",
-   *   description: "some description about your app",
-   *   logoUrl: "https://path/to/my-app/logo.svg",
-   * };
-   * ```
-   */
-  appMetadata?: AppMetadata;
-
-  /**
-   * By default - ConnectEmbed UI uses the `en-US` locale for english language users.
-   *
-   * You can customize the language used in the ConnectEmbed UI by setting the `locale` prop.
-   *
-   * Refer to the [`LocaleId`](https://portal.thirdweb.com/references/typescript/v5/LocaleId) type for supported locales.
-   */
-  locale?: LocaleId;
-
-  /**
-   * Array of supported wallets. If not provided, default wallets will be used.
-   * @example
-   * ```tsx
-   * import { AutoConnect } from "thirdweb/react";
-   * import { createWallet, inAppWallet } from "thirdweb/wallets";
-   *
-   * const wallets = [
-   *   inAppWallet(),
-   *   createWallet("io.metamask"),
-   *   createWallet("com.coinbase.wallet"),
-   *   createWallet("me.rainbow"),
-   * ];
-   *
-   * function Example() {
-   *  return (
-   *    <ConnectEmbed
-   *      client={client}
-   *      wallets={wallets}
-   *    />
-   *  )
-   * }
-   * ```
-   *
-   * If no wallets are specified. The component will show All the EIP-6963 compliant installed wallet extensions, as well as below default wallets:
-   *
-   * ```tsx
-   * const defaultWallets = [
-   *  inAppWallet(),
-   *  createWallet("io.metamask"),
-   *  createWallet("com.coinbase.wallet"),
-   *  createWallet("me.rainbow"),
-   *  createWallet("io.zerion.wallet"),
-   * ]
-   * ```
-   *
-   * The `ConnectEmbed` also shows a "All wallets" button at the end of wallet list which allows user to connect to any of the 350+ wallets
-   */
-  wallets?: Wallet[];
-
-  /**
-   * When the user has connected their wallet to your site, this configuration determines whether or not you want to automatically connect to the last connected wallet when user visits your site again in the future.
-   *
-   * By default it is set to `{ timeout: 15000 }` meaning that autoConnect is enabled and if the autoConnection does not succeed within 15 seconds, it will be cancelled.
-   *
-   * If you want to disable autoConnect, set this prop to `false`.
-   *
-   * If you want to customize the timeout, you can assign an object with a `timeout` key to this prop.
-   * ```tsx
-   * <ConnectEmbed client={client} autoConnect={{ timeout: 10000 }} />
-   * ```
-   */
-  autoConnect?:
-    | {
-        timeout: number;
-      }
-    | boolean;
-
-  /**
-   * The [`Chain`](https://portal.thirdweb.com/references/typescript/v5/Chain) object of the blockchain you want the wallet to connect to
-   *
-   * If a `chain` is not specified, Wallet will be connected to whatever is the default set in the wallet.
-   *
-   * If a `chain` is specified, Wallet will be prompted to switch to given chain after connection if it is not already connected to it.
-   * This ensures that the wallet is connected to the correct blockchain before interacting with your app.
-   *
-   * You can create a `Chain` object using the [`defineChain`](https://portal.thirdweb.com/references/typescript/v5/defineChain) function.
-   * At minimum, you need to pass the `id` of the blockchain to `defineChain` function to create a `Chain` object.
-   * @example
-   * ```tsx
-   * import { polygon } from "thirdweb/chains";
-   *
-   * function Example() {
-   *  return <div> <ConnectEmbed chain={polygon} /> </div>
-   * }
-   * ```
-   */
-  chain?: Chain;
-
-  /**
-   * Array of chains that your app supports.
-   *
-   * This is only relevant if your app is a multi-chain app and works across multiple blockchains.
-   * If your app only works on a single blockchain, you should only specify the `chain` prop.
-   *
-   * Given list of chains will used in various ways:
-   * - They will be displayed in the network selector in the `ConnectEmbed`'s details modal post connection
-   * - They will be sent to wallet at the time of connection if the wallet supports requesting multiple chains ( example: WalletConnect ) so that users can switch between the chains post connection easily
-   *
-   * ```tsx
-   * <ConnectEmbed chains={[ethereum, polygon, optimism]} />
-   * ```
-   *
-   * You can create a `Chain` object using the [`defineChain`](https://portal.thirdweb.com/references/typescript/v5/defineChain) function.
-   * At minimum, you need to pass the `id` of the blockchain to `defineChain` function to create a `Chain` object.
-   *
-   * ```tsx
-   * import { defineChain } from "thirdweb/react";
-   *
-   * const polygon = defineChain({
-   *   id: 137,
-   * });
-   * ```
-   */
-  chains?: Chain[];
-
-  /**
-   * Class name to be added to the root element of ConnectEmbed
-   */
-  className?: string;
-
-  /**
-   * Set the theme for the `ConnectEmbed` component. By default it is set to `"dark"`
-   *
-   * theme can be set to either `"dark"`, `"light"` or a custom theme object.
-   * You can also import [`lightTheme`](https://portal.thirdweb.com/references/typescript/v5/lightTheme)
-   * or [`darkTheme`](https://portal.thirdweb.com/references/typescript/v5/darkTheme)
-   * functions from `thirdweb/react` to use the default themes as base and overrides parts of it.
-   * @example
-   * ```ts
-   * import { lightTheme } from "thirdweb/react";
-   *
-   * const customTheme = lightTheme({
-   *  colors: {
-   *    modalBg: 'red'
-   *  }
-   * })
-   *
-   * function Example() {
-   *  return <ConnectEmbed theme={customTheme} />
-   * }
-   * ```
-   */
-  theme?: "dark" | "light" | Theme;
-
-  /**
-   * CSS styles to be applied to the root element of ConnectEmbed
-   */
-  style?: React.CSSProperties;
-
-  /**
-   * If provided, Embed will show a Terms of Service message at the bottom with below link
-   */
-  termsOfServiceUrl?: string;
-
-  /**
-   * If provided, Embed will show a Privacy Policy message at the bottom with below link
-   */
-  privacyPolicyUrl?: string;
-
-  /**
-   * Callback to be called on successful connection of wallet - including auto-connect.
-   * The callback is called with the connected wallet
-   *
-   * ```tsx
-   * <ConnectEmbed
-   *  onConnect={(wallet) => {
-   *    console.log("connected to", wallet)
-   *  }}
-   * />
-   * ```
-   * ```
-   */
-  onConnect?: (wallet: Wallet) => void;
-
-  /**
-   * By default, A "Powered by Thirdweb" branding is shown at the bottom of the embed.
-   *
-   * If you want to hide it, set this to `false`
-   * @example
-   * ```tsx
-   * <ConnectEmbed showThirdwebBranding={false} />
-   * ```
-   */
-  showThirdwebBranding?: boolean;
-
-  /**
-   * Configure options for WalletConnect
-   *
-   * By default WalletConnect uses the thirdweb's default project id.
-   * Setting your own project id is recommended.
-   *
-   * You can create a project id by signing up on [walletconnect.com](https://walletconnect.com/)
-   */
-  walletConnect?: {
-    projectId?: string;
-  };
-
-  /**
-   * Enable Account abstraction for all wallets. This will connect to the users's smart account based on the connected personal wallet and the given options.
-   *
-   * This allows to sponsor gas fees for your user's transaction using the thirdweb account abstraction infrastructure.
-   *
-   * ```tsx
-   * <ConnectEmbed
-   *   accountAbstraction={{
-   *    factoryAddress: "0x123...",
-   *    chain: sepolia,
-   *    gasless: true;
-   *   }}
-   * />
-   */
-  accountAbstraction?: SmartWalletOptions;
-
-  /**
-   * Wallets to show as recommended in the `ConnectEmbed` UI
-   */
-  recommendedWallets?: Wallet[];
-
-  /**
-   * By default, `ConnectEmbed` shows a "All Wallets" button that shows a list of 350+ wallets.
-   *
-   * You can disable this button by setting `showAllWallets` prop to `false`
-   */
-  showAllWallets?: boolean;
-
-  /**
-   * ConnectEmbed supports two modal size variants: `compact` and `wide`.
-   *
-   * By default it is set to `compact`, you can set it to `wide` if you want to show a wider modal.
-   *
-   * Note that if the screen width can not fit the wide modal, the `compact` version will be shown regardless of this `modalSize` options provided
-   */
-  modalSize?: "compact" | "wide";
-
-  /**
-   * Enable SIWE (Sign in with Ethererum) by passing an object of type `SiweAuthOptions` to
-   * enforce the users to sign a message after connecting their wallet to authenticate themselves.
-   *
-   * Refer to the [`SiweAuthOptions`](https://portal.thirdweb.com/references/typescript/v5/SiweAuthOptions) for more details
-   */
-  auth?: SiweAuthOptions;
-};
-
 /**
  * A component that allows the user to connect their wallet.
  *
@@ -322,10 +47,6 @@ export type ConnectEmbedProps = {
  * ```tsx
  * <ConnectEmbed
  *    client={client}
- *    appMetadata={{
- *      name: "Example",
- *      url: "https://example.com",
- *    }}
  * />
  * ```
  * @param props -

package/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx

@@ -13,6 +13,7 @@ import {
   iconSize,
   spacing,
 } from "../../../../core/design-system/index.js";
+import { useWalletInfo } from "../../../../core/utils/wallet.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { getSmartWalletLocale } from "../../../wallets/smartWallet/locale/getSmartWalletLocale.js";
 import type { SmartWalletLocale } from "../../../wallets/smartWallet/locale/types.js";
@@ -21,7 +22,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 { useWalletInfo } from "../../hooks/useWalletInfo.js";
 import type { LocaleId } from "../../types.js";
 import type { ConnectLocale } from "../locale/types.js";
 import { AnyWalletConnectUI } from "./AnyWalletConnectUI.js";

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

@@ -10,12 +10,12 @@ import {
   radius,
   spacing,
 } from "../../../core/design-system/index.js";
+import { useWalletInfo } from "../../../core/utils/wallet.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 { StyledButton } from "../design-system/elements.js";
-import { useWalletInfo } from "../hooks/useWalletInfo.js";
 import { useScreenContext } from "./Modal/screen.js";
 import type { ConnectLocale } from "./locale/types.js";
 

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

@@ -16,6 +16,7 @@ import {
   radius,
   spacing,
 } from "../../../core/design-system/index.js";
+import { genericWalletIcon } from "../../../core/utils/socialIcons.js";
 import { sortWallets } from "../../utils/sortWallets.js";
 import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
 import { Img } from "../components/Img.js";
@@ -40,7 +41,6 @@ import { PoweredByThirdweb } from "./PoweredByTW.js";
 import { WalletButton, WalletEntryButton } from "./WalletEntryButton.js";
 import { WalletTypeRowButton } from "./WalletTypeRowButton.js";
 import { compactModalMaxHeight } from "./constants.js";
-import { genericWalletIcon } from "./icons/dataUris.js";
 import type { ConnectLocale } from "./locale/types.js";
 
 const InAppWalletSelectionUI = /* @__PURE__ */ lazy(

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -14,6 +14,7 @@ import {
   iconSize,
   spacing,
 } from "../../../../../core/design-system/index.js";
+import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
 import {
   useChainQuery,
   useChainsQuery,
@@ -21,6 +22,7 @@ import {
 import { useWalletBalance } from "../../../../../core/hooks/others/useWalletBalance.js";
 import { useBuyWithCryptoQuote } from "../../../../../core/hooks/pay/useBuyWithCryptoQuote.js";
 import { useBuyWithFiatQuote } from "../../../../../core/hooks/pay/useBuyWithFiatQuote.js";
+import type { SupportedTokens } from "../../../../../core/utils/defaultTokens.js";
 import { useActiveAccount } from "../../../../hooks/wallets/useActiveAccount.js";
 import { useActiveWalletChain } from "../../../../hooks/wallets/useActiveWalletChain.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
@@ -40,9 +42,7 @@ import { Container, Line, ModalHeader } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
 import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
-import type { PayUIOptions } from "../../ConnectButtonProps.js";
 import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js";
-import type { SupportedTokens } from "../../defaultTokens.js";
 import { CoinsIcon } from "../../icons/CoinsIcon.js";
 import type { ConnectLocale } from "../../locale/types.js";
 import { TokenSelector } from "../TokenSelector.js";

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx

@@ -18,13 +18,13 @@ import {
   spacing,
 } from "../../../../../../core/design-system/index.js";
 import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
+import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
 import { Spacer } from "../../../../components/Spacer.js";
 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 { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
-import type { TokenInfo } from "../../../defaultTokens.js";
 import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
 import { PayTokenIcon } from "../PayTokenIcon.js";
 import { StepIcon } from "../Stepper.js";

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useEnabledPaymentMethods.ts

@@ -1,6 +1,6 @@
 import type { Chain } from "../../../../../../../chains/types.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import type { PayUIOptions } from "../../../ConnectButtonProps.js";
+import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
 import type { SupportedChainAndTokens } from "../swap/useSwapSupportedChains.js";
 

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts

@@ -3,9 +3,9 @@ import { polygon } from "../../../../../../../chains/chain-definitions/polygon.j
 import type { Chain } from "../../../../../../../chains/types.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { toEther } from "../../../../../../../utils/units.js";
+import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useActiveWalletChain } from "../../../../../hooks/wallets/useActiveWalletChain.js";
 import { useDebouncedValue } from "../../../../hooks/useDebouncedValue.js";
-import type { PayUIOptions } from "../../../ConnectButtonProps.js";
 import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
 import { defaultSelectedCurrency } from "../fiat/currencies.js";
 import type { SupportedChainAndTokens } from "../swap/useSwapSupportedChains.js";

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx

@@ -10,13 +10,13 @@ import {
 } from "../../../../../../core/design-system/index.js";
 import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
 import { useWalletBalance } from "../../../../../../core/hooks/others/useWalletBalance.js";
+import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
 import { useActiveAccount } from "../../../../../hooks/wallets/useActiveAccount.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 { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
-import type { TokenInfo } from "../../../defaultTokens.js";
 import { GenericWalletIcon } from "../../../icons/GenericWalletIcon.js";
 import { formatTokenBalance } from "../../formatTokenBalance.js";
 import { type NativeToken, isNativeToken } from "../../nativeToken.js";

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFlow.tsx

@@ -4,7 +4,7 @@ import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
 import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
-import type { TokenInfo } from "../../../defaultTokens.js";
+import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
 import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
 import { SwapConfirmationScreen } from "./ConfirmationScreen.js";
 import { SwapStatusScreen } from "./SwapStatusScreen.js";

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

@@ -1,15 +1,19 @@
 import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons";
-import { useMemo, useState } from "react";
+import { 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 {
+  type SupportedTokens,
+  defaultTokens,
+} from "../../../../core/utils/defaultTokens.js";
 import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
 import { useActiveWalletChain } from "../../../hooks/wallets/useActiveWalletChain.js";
+import { useSendToken } from "../../../hooks/wallets/useSendToken.js";
 import { Skeleton } from "../../components/Skeleton.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Spinner } from "../../components/Spinner.js";
@@ -19,8 +23,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 { useSendToken } from "../../hooks/useSendToken.js";
-import { type SupportedTokens, defaultTokens } from "../defaultTokens.js";
 import type { ConnectLocale } from "../locale/types.js";
 import { TokenSelector } from "./TokenSelector.js";
 import { formatTokenBalance } from "./formatTokenBalance.js";
@@ -134,22 +136,7 @@ function SendFundsForm(props: {
   });
 
   const { receiverAddress, setReceiverAddress, amount, setAmount } = props;
-
-  // Ethereum or Rinkeby or Goerli
-  // TODO support ens
-  const isENSSupported = false;
-
-  const isValidReceiverAddress = useMemo(() => {
-    const isENS = receiverAddress.endsWith(".eth");
-
-    if (!isENSSupported && isENS) {
-      return false;
-    }
-
-    return isENS || isAddress(receiverAddress);
-  }, [receiverAddress]);
-
-  const showInvalidAddressError = receiverAddress && !isValidReceiverAddress;
+  const showInvalidAddressError = receiverAddress;
 
   const sendTokenMutation = useSendToken(props.client);
 
@@ -297,7 +284,7 @@ function SendFundsForm(props: {
           data-error={showInvalidAddressError}
           required
           id="receiver"
-          placeholder={isENSSupported ? "0x... / ENS name" : "0x..."}
+          placeholder={"0x... or ENS name"}
           variant="outline"
           value={receiverAddress}
           onChange={(e) => {

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

@@ -10,6 +10,7 @@ import {
   spacing,
 } from "../../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
+import type { ConnectButtonProps } from "../../../../core/hooks/connection/ConnectButtonProps.js";
 import { wait } from "../../../../core/utils/wait.js";
 import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
 import { useDisconnect } from "../../../hooks/wallets/useDisconnect.js";
@@ -21,7 +22,6 @@ import { Container, ModalHeader } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
 import { Text } from "../../components/text.js";
 import { StyledDiv } from "../../design-system/elements.js";
-import type { ConnectButtonProps } from "../ConnectButtonProps.js";
 import { TOS } from "../Modal/TOS.js";
 import type { ConnectLocale } from "../locale/types.js";
 import { WalletLogoSpinner } from "./WalletLogoSpinner.js";

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

@@ -14,6 +14,7 @@ import {
 } from "../../../../core/design-system/index.js";
 import { useChainQuery } from "../../../../core/hooks/others/useChainQuery.js";
 import { useTokenInfo } from "../../../../core/hooks/others/useTokenInfo.js";
+import type { TokenInfo } from "../../../../core/utils/defaultTokens.js";
 import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
 import { ChainIcon } from "../../components/ChainIcon.js";
 import { Skeleton } from "../../components/Skeleton.js";
@@ -25,7 +26,6 @@ import { Button } from "../../components/buttons.js";
 import { Input } from "../../components/formElements.js";
 import { Text } from "../../components/text.js";
 import { ChainButton, NetworkSelectorContent } from "../NetworkSelector.js";
-import type { TokenInfo } from "../defaultTokens.js";
 import type { ConnectLocale } from "../locale/types.js";
 import { formatTokenBalance } from "./formatTokenBalance.js";
 import {

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

@@ -2,6 +2,10 @@ 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 {
+  type SupportedTokens,
+  defaultTokens,
+} from "../../../../core/utils/defaultTokens.js";
 import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
 import { useActiveWalletChain } from "../../../hooks/wallets/useActiveWalletChain.js";
 import { Skeleton } from "../../components/Skeleton.js";
@@ -9,7 +13,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 { type SupportedTokens, defaultTokens } from "../defaultTokens.js";
 import { formatTokenBalance } from "./formatTokenBalance.js";
 import {
   type ERC20OrNativeToken,

package/src/react/web/ui/ConnectWallet/screens/nativeToken.ts

@@ -1,4 +1,4 @@
-import type { TokenInfo } from "../defaultTokens.js";
+import type { TokenInfo } from "../../../../core/utils/defaultTokens.js";
 
 export type NativeToken = { nativeToken: true };
 

package/src/react/web/ui/PayEmbed.tsx

@@ -9,12 +9,12 @@ 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 {
   ConnectButton_connectModalOptions,
   PayUIOptions,
-} from "./ConnectWallet/ConnectButtonProps.js";
-import type { SupportedTokens } from "./ConnectWallet/defaultTokens.js";
+} from "../../core/hooks/connection/ConnectButtonProps.js";
+import type { SupportedTokens } from "../../core/utils/defaultTokens.js";
+import { ConnectButton } from "./ConnectWallet/ConnectButton.js";
 import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
 import BuyScreen from "./ConnectWallet/screens/Buy/BuyScreen.js";
 import { BuyTxHistory } from "./ConnectWallet/screens/Buy/tx-history/BuyTxHistory.js";

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

@@ -5,7 +5,6 @@ import { StyledDiv } from "../design-system/elements.js";
 import { Img } from "./Img.js";
 
 // Note: Must not use useConnectUI here
-
 export const fallbackChainIcon =
   "data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='14' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 8.04238e-07C5.1435 8.04238e-07 3.36301 0.737501 2.05025 2.05025C0.7375 3.36301 0 5.1435 0 7C0 7.225 -1.52737e-07 7.445 0.0349998 7.665C0.16385 9.0151 0.68213 10.2988 1.52686 11.3598C2.37158 12.4209 3.50637 13.2137 4.79326 13.642C6.0801 14.0702 7.4637 14.1153 8.7758 13.7719C10.0879 13.4285 11.2719 12.7113 12.184 11.7075C13.0961 10.7038 13.6969 9.4567 13.9135 8.1178C14.1301 6.7789 13.9531 5.406 13.4039 4.16587C12.8548 2.92574 11.9573 1.87184 10.8204 1.13228C9.6835 0.392721 8.3563 -0.000649196 7 8.04238e-07ZM7 1C8.581 1.00137 10.0975 1.62668 11.22 2.74V3.24C9.2438 2.55991 7.0956 2.56872 5.125 3.265C4.96758 3.1116 4.76997 3.00586 4.555 2.96H4.43C4.37 2.75 4.315 2.54 4.27 2.325C4.225 2.11 4.2 1.92 4.175 1.715C5.043 1.24658 6.0137 1.00091 7 1ZM5.5 3.935C7.3158 3.32693 9.2838 3.34984 11.085 4C10.8414 5.2703 10.3094 6.4677 9.53 7.5C9.312 7.4077 9.0707 7.3855 8.8395 7.4366C8.6083 7.4877 8.3988 7.6094 8.24 7.785C8.065 7.685 7.89 7.585 7.74 7.47C6.7307 6.7966 5.8877 5.9023 5.275 4.855C5.374 4.73221 5.4461 4.58996 5.4866 4.43749C5.5271 4.28502 5.5351 4.12575 5.51 3.97L5.5 3.935ZM3.5 2.135C3.5 2.24 3.53 2.35 3.55 2.455C3.595 2.675 3.655 2.89 3.715 3.105C3.52353 3.21838 3.36943 3.38531 3.2717 3.58522C3.17397 3.78513 3.13688 4.00927 3.165 4.23C2.37575 4.7454 1.67078 5.3795 1.075 6.11C1.19455 5.3189 1.47112 4.55966 1.88843 3.87701C2.30575 3.19437 2.85539 2.60208 3.505 2.135H3.5ZM3.5 9.99C3.30481 10.0555 3.13037 10.1714 2.9943 10.3259C2.85822 10.4804 2.76533 10.6681 2.725 10.87H2.405C1.59754 9.9069 1.1146 8.7136 1.025 7.46L1.08 7.365C1.70611 6.3942 2.52463 5.562 3.485 4.92C3.62899 5.0704 3.81094 5.179 4.01162 5.2345C4.2123 5.2899 4.42423 5.2901 4.625 5.235C5.2938 6.3652 6.208 7.3306 7.3 8.06C7.505 8.195 7.715 8.32 7.925 8.44C7.9082 8.6312 7.9391 8.8237 8.015 9C7.1 9.7266 6.0445 10.256 4.915 10.555C4.78401 10.3103 4.57028 10.1201 4.31199 10.0184C4.05369 9.9167 3.76766 9.9102 3.505 10L3.5 9.99ZM7 12.99C5.9831 12.9903 4.98307 12.7304 4.095 12.235L4.235 12.205C4.43397 12.1397 4.61176 12.0222 4.74984 11.8648C4.88792 11.7074 4.98122 11.5158 5.02 11.31C6.2985 10.984 7.4921 10.3872 8.52 9.56C8.7642 9.7027 9.0525 9.75 9.3295 9.6927C9.6064 9.6355 9.8524 9.4778 10.02 9.25C10.7254 9.4334 11.4511 9.5275 12.18 9.53H12.445C11.9626 10.5673 11.1938 11.4451 10.2291 12.0599C9.2643 12.6747 8.144 13.0009 7 13V12.99ZM10.255 8.54C10.2545 8.3304 10.1975 8.1249 10.09 7.945C10.9221 6.8581 11.5012 5.5991 11.785 4.26C12.035 4.37667 12.2817 4.50667 12.525 4.65C13.0749 5.9495 13.1493 7.4012 12.735 8.75C11.9049 8.8142 11.0698 8.7484 10.26 8.555L10.255 8.54Z' fill='%23646D7A'/%3e%3c/svg%3e";
 

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

@@ -5,7 +5,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useChainQuery } from "../../../core/hooks/others/useChainQuery.js";
-import { genericTokenIcon } from "../ConnectWallet/icons/dataUris.js";
+import { genericTokenIcon } from "../../../core/utils/socialIcons.js";
 import {
   type NativeToken,
   isNativeToken,

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

@@ -7,20 +7,18 @@ import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdSt
 import { getStoredActiveWalletId } from "../../../../wallets/manager/index.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { radius } from "../../../core/design-system/index.js";
-import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { getLastAuthProvider } from "../../wallets/shared/storage.js";
 import {
+  appleIconUri,
   emailIcon,
+  facebookIconUri,
   genericWalletIcon,
+  googleIconUri,
   passkeyIcon,
   phoneIcon,
-} from "../ConnectWallet/icons/dataUris.js";
-import {
-  appleIconUri,
-  facebookIconUri,
-  googleIconUri,
-} from "../ConnectWallet/icons/socialLogins.js";
-import { useWalletImage } from "../hooks/useWalletInfo.js";
+} from "../../../core/utils/socialIcons.js";
+import { getLastAuthProvider } from "../../../core/utils/storage.js";
+import { useWalletImage } from "../../../core/utils/wallet.js";
+import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
 import { Img } from "./Img.js";
 
 // Note: Must not use useConnectUI here