thirdweb 5.40.0 → 5.41.0

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

@@ -12,8 +12,8 @@ import {
   iconSize,
   spacing,
 } from "../../../../core/design-system/index.js";
+import { useConnectionManager } from "../../../../core/providers/connection-manager.js";
 import { useWalletInfo } from "../../../../core/utils/wallet.js";
-import { connectionManager } from "../../../index.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";
@@ -135,6 +135,7 @@ function SmartWalletConnecting(props: {
     useState<"connecting" | "connect-error" | "idle">("idle");
   const [personalWalletChainSwitchStatus, setPersonalWalletChainSwitchStatus] =
     useState<"switching" | "switch-error" | "idle">("idle");
+  const connectionManager = useConnectionManager();
 
   const handleConnect = useCallback(async () => {
     if (!personalWallet) {
@@ -157,7 +158,13 @@ function SmartWalletConnecting(props: {
       console.error(e);
       setSmartWalletConnectionStatus("connect-error");
     }
-  }, [done, personalWallet, props.client, props.accountAbstraction]);
+  }, [
+    done,
+    personalWallet,
+    props.client,
+    props.accountAbstraction,
+    connectionManager,
+  ]);
 
   const connectStarted = useRef(false);
   useEffect(() => {

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

@@ -1,7 +1,7 @@
 "use client";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
-import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
+import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
 import { reservedScreens } from "../constants.js";
 import type { WelcomeScreen } from "../screens/types.js";
 

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

@@ -32,9 +32,9 @@ import {
   useChainName,
   useChainsQuery,
 } from "../../../core/hooks/others/useChainQuery.js";
+import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
+import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
-import { useSwitchActiveWalletChain } from "../../hooks/wallets/useSwitchActiveWalletChain.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { Modal } from "../components/Modal.js";
 import { Skeleton } from "../components/Skeleton.js";

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

@@ -5,14 +5,16 @@ import { useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useChainExplorers } from "../../../core/hooks/others/useChainQuery.js";
-import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
 import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
 import { Spacer } from "../components/Spacer.js";
 import Tabs from "../components/Tabs.js";
 import { Container, Line, ModalHeader } from "../components/basic.js";
 import { ButtonLink } from "../components/buttons.js";
+import { CoinsIcon } from "./icons/CoinsIcon.js";
+import { FundsIcon } from "./icons/FundsIcon.js";
 import type { ConnectLocale } from "./locale/types.js";
 import { PayTxHistoryList } from "./screens/Buy/pay-transactions/BuyTxHistory.js";
 import { TxDetailsScreen } from "./screens/Buy/pay-transactions/TxDetailsScreen.js";
@@ -82,7 +84,24 @@ export function TransactionsScreen(props: {
       >
         <Spacer y="md" />
         <Tabs
-          options={["Transactions", "Purchases"]}
+          options={[
+            {
+              label: (
+                <span className="flex gap-2">
+                  <CoinsIcon size={iconSize.sm} /> Transactions
+                </span>
+              ),
+              value: "Transactions",
+            },
+            {
+              label: (
+                <span className="flex gap-2">
+                  <FundsIcon size={iconSize.sm} /> Purchases
+                </span>
+              ),
+              value: "Purchases",
+            },
+          ]}
           selected={activeTab}
           onSelect={setActiveTab}
         >

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

@@ -19,8 +19,8 @@ import type {
 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 { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
 import type { SupportedTokens } from "../../../../../core/utils/defaultTokens.js";
-import { useActiveAccount } from "../../../../hooks/wallets/useActiveAccount.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
 import { ChainName } from "../../../components/ChainName.js";

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

@@ -12,9 +12,9 @@ import { useCustomTheme } from "../../../../../core/design-system/CustomThemePro
 import { iconSize, spacing } from "../../../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useChainQuery } from "../../../../../core/hooks/others/useChainQuery.js";
+import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
 import type { TokenInfo } from "../../../../../core/utils/defaultTokens.js";
 import { useEnsName } from "../../../../../core/utils/wallet.js";
-import { useActiveWallet } from "../../../../hooks/wallets/useActiveWallet.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
 import { ChainIcon } from "../../../components/ChainIcon.js";

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

@@ -3,7 +3,7 @@ import { useMemo, useState, useSyncExternalStore } from "react";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
 import { isAddress } from "../../../../../../utils/address.js";
 import { iconSize } from "../../../../../core/design-system/index.js";
-import { connectionManager } from "../../../../index.js";
+import { useConnectionManager } from "../../../../../core/providers/connection-manager.js";
 import { Spacer } from "../../../components/Spacer.js";
 import { TextDivider } from "../../../components/TextDivider.js";
 import { ToolTip } from "../../../components/Tooltip.js";
@@ -22,6 +22,7 @@ export function ReceiverWalletDrawerScreen(props: {
   const [address, setAddress] = useState<string>("");
   const isValidAddress = useMemo(() => isAddress(address), [address]);
   const showError = !!address && !isValidAddress;
+  const connectionManager = useConnectionManager();
   const connectedWallets = useSyncExternalStore(
     connectionManager.connectedWallets.subscribe,
     connectionManager.connectedWallets.getValue,

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

@@ -8,8 +8,8 @@ import { useCustomTheme } from "../../../../../core/design-system/CustomThemePro
 import { iconSize, spacing } from "../../../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useChainQuery } from "../../../../../core/hooks/others/useChainQuery.js";
+import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
 import { hasSponsoredTransactionsEnabled } from "../../../../../core/utils/wallet.js";
-import { useActiveWallet } from "../../../../hooks/wallets/useActiveWallet.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
 import { ChainIcon } from "../../../components/ChainIcon.js";

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

@@ -8,8 +8,8 @@ import {
   radius,
   spacing,
 } from "../../../../../core/design-system/index.js";
+import { useConnectedWallets } from "../../../../../core/hooks/wallets/useConnectedWallets.js";
 import { useEnsAvatar, useEnsName } from "../../../../../core/utils/wallet.js";
-import { useConnectedWallets } from "../../../../hooks/wallets/useConnectedWallets.js";
 import { Img } from "../../../components/Img.js";
 import { WalletImage } from "../../../components/WalletImage.js";
 import { Container } from "../../../components/basic.js";

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

@@ -5,7 +5,7 @@ import type {
   FundWalletOptions,
   PayUIOptions,
 } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
-import { useActiveWalletChain } from "../../../../../hooks/wallets/useActiveWalletChain.js";
+import { useActiveWalletChain } from "../../../../../../core/hooks/wallets/useActiveWalletChain.js";
 import { useDebouncedValue } from "../../../../hooks/useDebouncedValue.js";
 import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
 import { defaultSelectedCurrency } from "../fiat/currencies.js";

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/BuyTxHistory.tsx

@@ -12,9 +12,9 @@ import {
   spacing,
 } from "../../../../../../core/design-system/index.js";
 import { useChainExplorers } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { useActiveAccount } from "../../../../../hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../../../../hooks/wallets/useActiveWallet.js";
-import { useActiveWalletChain } from "../../../../../hooks/wallets/useActiveWalletChain.js";
+import { useActiveAccount } from "../../../../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../../../../core/hooks/wallets/useActiveWallet.js";
+import { useActiveWalletChain } from "../../../../../../core/hooks/wallets/useActiveWalletChain.js";
 import { LoadingScreen } from "../../../../../wallets/shared/LoadingScreen.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Spinner } from "../../../../components/Spinner.js";
@@ -128,6 +128,7 @@ export function PayTxHistoryList(props: {
         width: "100%",
         minHeight: "250px",
         maxHeight: "370px",
+        paddingBottom: spacing.lg,
       }}
     >
       <Container flex="column" gap="xs" expand>
@@ -158,24 +159,26 @@ export function PayTxHistoryList(props: {
           </Container>
         )}
 
-        <Container animate="fadein" flex="column" gap="xs">
-          {txInfosToShow.map((txInfo) => {
-            return (
-              <BuyTxHistoryButton
-                key={
-                  txInfo.type === "swap"
-                    ? txInfo.status.source?.transactionHash
-                    : txInfo.status.intentId
-                }
-                txInfo={txInfo}
-                client={props.client}
-                onClick={() => {
-                  props.onSelectTx(txInfo);
-                }}
-              />
-            );
-          })}
-        </Container>
+        {txInfosToShow.length > 0 && (
+          <Container animate="fadein" flex="column" gap="xs">
+            {txInfosToShow.map((txInfo) => {
+              return (
+                <BuyTxHistoryButton
+                  key={
+                    txInfo.type === "swap"
+                      ? txInfo.status.source?.transactionHash
+                      : txInfo.status.intentId
+                  }
+                  txInfo={txInfo}
+                  client={props.client}
+                  onClick={() => {
+                    props.onSelectTx(txInfo);
+                  }}
+                />
+              );
+            })}
+          </Container>
+        )}
 
         {isLoading && txInfosToShow.length > 0 && (
           <>
@@ -186,8 +189,8 @@ export function PayTxHistoryList(props: {
         )}
       </Container>
 
-      <Container py="lg">
-        {pagination && !hidePagination && (
+      {pagination && !hidePagination && (
+        <Container py="md">
           <div
             style={{
               display: "grid",
@@ -234,8 +237,8 @@ export function PayTxHistoryList(props: {
               <ArrowRightIcon width={iconSize.sm} height={iconSize.sm} />
             </Button>
           </div>
-        )}
-      </Container>
+        </Container>
+      )}
     </Container>
   );
 }

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/useBuyTransactionsToShow.ts

@@ -10,7 +10,7 @@ import {
   getBuyWithFiatStatus,
 } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import { useBuyHistory } from "../../../../../../core/hooks/pay/useBuyHistory.js";
-import { useActiveAccount } from "../../../../../hooks/wallets/useActiveAccount.js";
+import { useActiveAccount } from "../../../../../../core/hooks/wallets/useActiveAccount.js";
 import { pendingTransactions } from "../swap/pendingSwapTx.js";
 
 export type TxStatusInfo =

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

@@ -7,7 +7,7 @@ import {
   radius,
   spacing,
 } from "../../../../../../core/design-system/index.js";
-import { useConnectedWallets } from "../../../../../hooks/wallets/useConnectedWallets.js";
+import { useConnectedWallets } from "../../../../../../core/hooks/wallets/useConnectedWallets.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Container } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { useActiveAccount } from "../../../../hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../../../hooks/wallets/useActiveWallet.js";
-import { useActiveWalletChain } from "../../../../hooks/wallets/useActiveWalletChain.js";
+import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
+import { useActiveWalletChain } from "../../../../../core/hooks/wallets/useActiveWalletChain.js";
 import type { PayerInfo } from "./types.js";
 
 export function usePayerSetup() {

package/src/react/web/ui/ConnectWallet/screens/Details/WalletManagerScreen.tsx

@@ -14,10 +14,10 @@ import {
   spacing,
 } from "../../../../../core/design-system/index.js";
 import { useWalletBalance } from "../../../../../core/hooks/others/useWalletBalance.js";
-import { useActiveWallet } from "../../../../hooks/wallets/useActiveWallet.js";
-import { useConnectedWallets } from "../../../../hooks/wallets/useConnectedWallets.js";
-import { useDisconnect } from "../../../../hooks/wallets/useDisconnect.js";
-import { useSetActiveWallet } from "../../../../hooks/wallets/useSetActiveWallet.js";
+import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
+import { useConnectedWallets } from "../../../../../core/hooks/wallets/useConnectedWallets.js";
+import { useDisconnect } from "../../../../../core/hooks/wallets/useDisconnect.js";
+import { useSetActiveWallet } from "../../../../../core/hooks/wallets/useSetActiveWallet.js";
 import { Skeleton } from "../../../components/Skeleton.js";
 import { Spacer } from "../../../components/Spacer.js";
 import { ToolTip } from "../../../components/Tooltip.js";

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

@@ -5,7 +5,7 @@ import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem
 import { isInAppWallet } from "../../../../../wallets/in-app/core/wallet/index.js";
 import { injectedProvider } from "../../../../../wallets/injected/mipdStore.js";
 import { fontSize, iconSize } from "../../../../core/design-system/index.js";
-import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
+import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
 import { Text } from "../../components/text.js";

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

@@ -6,8 +6,8 @@ import {
   radius,
   spacing,
 } from "../../../../core/design-system/index.js";
+import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
 import { shortenString } from "../../../../core/utils/addresses.js";
-import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
 import { CopyIcon } from "../../components/CopyIcon.js";
 import { QRCode } from "../../components/QRCode.js";
 import { Spacer } from "../../components/Spacer.js";

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

@@ -7,13 +7,13 @@ import {
   spacing,
 } from "../../../../core/design-system/index.js";
 import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js";
+import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWalletChain } from "../../../../core/hooks/wallets/useActiveWalletChain.js";
+import { useSendToken } from "../../../../core/hooks/wallets/useSendToken.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";

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

@@ -11,9 +11,9 @@ import {
 } from "../../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../../core/hooks/connection/ConnectButtonProps.js";
+import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
+import { useDisconnect } from "../../../../core/hooks/wallets/useDisconnect.js";
 import { wait } from "../../../../core/utils/wait.js";
-import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
-import { useDisconnect } from "../../../hooks/wallets/useDisconnect.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Spinner } from "../../components/Spinner.js";

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

@@ -17,8 +17,8 @@ import {
   useChainName,
 } from "../../../../core/hooks/others/useChainQuery.js";
 import { useTokenInfo } from "../../../../core/hooks/others/useTokenInfo.js";
+import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.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";
 import { Spacer } from "../../components/Spacer.js";

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

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { type Theme, iconSize } from "../../../../core/design-system/index.js";
+import type {
+  SupportedNFTs,
+  SupportedTokens,
+} from "../../../../core/utils/defaultTokens.js";
+import { Spacer } from "../../components/Spacer.js";
+import Tabs from "../../components/Tabs.js";
+import { Container, Line, ModalHeader } from "../../components/basic.js";
+import { CoinsIcon } from "../icons/CoinsIcon.js";
+import { ImageIcon } from "../icons/ImageIcon.js";
+import type { ConnectLocale } from "../locale/types.js";
+import { ViewNFTsContent } from "./ViewNFTs.js";
+import { ViewTokensContent } from "./ViewTokens.js";
+import type { WalletDetailsModalScreen } from "./types.js";
+
+/**
+ * @internal
+ */
+export function ViewAssets(props: {
+  supportedTokens?: SupportedTokens;
+  supportedNFTs?: SupportedNFTs;
+  theme: Theme | "light" | "dark";
+  onBack: () => void;
+  setScreen: (screen: WalletDetailsModalScreen) => void;
+  client: ThirdwebClient;
+  connectLocale: ConnectLocale;
+}) {
+  const [activeTab, setActiveTab] = useState("Tokens");
+  const { connectLocale } = props;
+
+  return (
+    <Container
+      animate="fadein"
+      style={{
+        minHeight: "300px",
+      }}
+    >
+      <Container p="lg">
+        <ModalHeader
+          title={connectLocale.viewFunds.title}
+          onBack={props.onBack}
+        />
+      </Container>
+      <Line />
+      <Container
+        px="lg"
+        scrollY
+        style={{
+          minHeight: "330px",
+        }}
+      >
+        <Spacer y="md" />
+        <Tabs
+          options={[
+            {
+              label: (
+                <span className="flex gap-2">
+                  <CoinsIcon size={iconSize.sm} /> Tokens
+                </span>
+              ),
+              value: "Tokens",
+            },
+            {
+              label: (
+                <span className="flex gap-2">
+                  <ImageIcon size={iconSize.sm} /> NFTs
+                </span>
+              ),
+              value: "NFTs",
+            },
+          ]}
+          selected={activeTab}
+          onSelect={setActiveTab}
+        >
+          <Container
+            scrollY
+            style={{
+              maxHeight: "300px",
+            }}
+          >
+            {activeTab === "Tokens" && (
+              <ViewTokensContent
+                client={props.client}
+                connectLocale={connectLocale}
+                supportedTokens={props.supportedTokens}
+              />
+            )}
+            {activeTab === "NFTs" && (
+              <ViewNFTsContent
+                supportedNFTs={props.supportedNFTs}
+                client={props.client}
+                theme={props.theme}
+                connectLocale={connectLocale}
+              />
+            )}
+          </Container>
+        </Tabs>
+        <Spacer y="lg" />
+      </Container>
+    </Container>
+  );
+}