thirdweb 5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321 → 5.42.0-nightly-e27ebef85bb61342c3de53f85e134cf4a29f787c-20240730000342

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

@@ -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/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>
+  );
+}

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

@@ -71,6 +71,39 @@ export function ViewNFTs(props: {
   onBack: () => void;
   client: ThirdwebClient;
   connectLocale: ConnectLocale;
+}) {
+  return (
+    <Container
+      style={{
+        minHeight: "300px",
+      }}
+    >
+      <Container p="lg">
+        <ModalHeader
+          title={props.connectLocale.viewFunds.viewNFTs}
+          onBack={props.onBack}
+        />
+      </Container>
+      <Line />
+      <Container
+        px="sm"
+        scrollY
+        style={{
+          maxHeight: "500px",
+        }}
+      >
+        <Spacer y="md" />
+        <ViewNFTsContent {...props} />
+      </Container>
+    </Container>
+  );
+}
+
+export function ViewNFTsContent(props: {
+  supportedNFTs?: SupportedNFTs;
+  client: ThirdwebClient;
+  theme: Theme | "light" | "dark";
+  connectLocale: ConnectLocale;
 }) {
   const activeAccount = useActiveAccount();
   const activeChain = useActiveWalletChain();
@@ -79,8 +112,6 @@ export function ViewNFTs(props: {
     return null;
   }
 
-  const { connectLocale } = props;
-
   const nftList = useMemo(() => {
     const nfts = [];
     if (!props.supportedNFTs) return [];
@@ -106,60 +137,40 @@ export function ViewNFTs(props: {
   });
 
   return (
-    <Container
-      style={{
-        minHeight: "300px",
-      }}
-    >
-      <Container p="lg">
-        <ModalHeader
-          title={connectLocale.viewFunds.viewNFTs}
-          onBack={props.onBack}
-        />
-      </Container>
-      <Line />
+    <>
       <Container
-        px="sm"
-        scrollY
         style={{
-          maxHeight: "500px",
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "12px",
         }}
       >
-        <Spacer y="md" />
-        <Container
-          style={{
-            display: "grid",
-            gridTemplateColumns: "1fr 1fr",
-            gap: "12px",
-          }}
-        >
-          {results.map((result, index) => {
-            if (result.error) {
-              console.error(result.error);
-              return null;
-            }
-            return result.isLoading || !result.data ? (
-              <Skeleton
-                key={`${nftList[index]?.chain?.id}:${nftList[index]?.address}`}
-                height="160px"
-                width="160px"
+        {results.map((result, index) => {
+          if (result.error) {
+            console.error(result.error);
+            return null;
+          }
+          return result.isLoading || !result.data ? (
+            <Skeleton
+              key={`${nftList[index]?.chain?.id}:${nftList[index]?.address}`}
+              height="150px"
+              width="150px"
+            />
+          ) : (
+            result.data.map((nft) => (
+              <NftCard
+                key={`${nft.chain.id}:${nft.address}:${nft.id}`}
+                {...nft}
+                client={props.client}
+                chain={nft.chain}
+                theme={props.theme}
               />
-            ) : (
-              result.data.map((nft) => (
-                <NftCard
-                  key={`${nft.chain.id}:${nft.address}:${nft.id}`}
-                  {...nft}
-                  client={props.client}
-                  chain={nft.chain}
-                  theme={props.theme}
-                />
-              ))
-            );
-          })}
-        </Container>
-        <Spacer y="lg" />
+            ))
+          );
+        })}
       </Container>
-    </Container>
+      <Spacer y="lg" />
+    </>
   );
 }
 
@@ -188,8 +199,8 @@ function NftCard(
           display: "flex",
           flexShrink: 0,
           alignItems: "center",
-          width: "160px",
-          height: "160px",
+          width: "150px",
+          height: "150px",
           borderRadius: "8px",
           overflow: "hidden",
           background:

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

@@ -30,17 +30,6 @@ export function ViewTokens(props: {
   client: ThirdwebClient;
   connectLocale: ConnectLocale;
 }) {
-  const activeChain = useActiveWalletChain();
-  const supportedTokens = props.supportedTokens || defaultTokens;
-
-  if (!activeChain) {
-    return null;
-  }
-
-  const tokenList =
-    (activeChain?.id ? supportedTokens[activeChain.id] : undefined) || [];
-  const { connectLocale } = props;
-
   return (
     <Container
       style={{
@@ -49,7 +38,7 @@ export function ViewTokens(props: {
     >
       <Container p="lg">
         <ModalHeader
-          title={connectLocale.viewFunds.title}
+          title={props.connectLocale.viewFunds.title}
           onBack={props.onBack}
         />
       </Container>
@@ -62,29 +51,49 @@ export function ViewTokens(props: {
         }}
       >
         <Spacer y="md" />
-
-        <TokenInfo
-          token={NATIVE_TOKEN}
-          chain={activeChain}
-          client={props.client}
-        />
-
-        {tokenList.map((token) => {
-          return (
-            <TokenInfo
-              token={token}
-              key={token.address}
-              chain={activeChain}
-              client={props.client}
-            />
-          );
-        })}
+        <ViewTokensContent {...props} />
         <Spacer y="lg" />
       </Container>
     </Container>
   );
 }
 
+export function ViewTokensContent(props: {
+  supportedTokens?: SupportedTokens;
+  client: ThirdwebClient;
+  connectLocale: ConnectLocale;
+}) {
+  const activeChain = useActiveWalletChain();
+  if (!activeChain) {
+    return null;
+  }
+  const supportedTokens = props.supportedTokens || defaultTokens;
+
+  const tokenList =
+    (activeChain?.id ? supportedTokens[activeChain.id] : undefined) || [];
+
+  return (
+    <>
+      <TokenInfo
+        token={NATIVE_TOKEN}
+        chain={activeChain}
+        client={props.client}
+      />
+
+      {tokenList.map((token) => {
+        return (
+          <TokenInfo
+            token={token}
+            key={token.address}
+            chain={activeChain}
+            client={props.client}
+          />
+        );
+      })}
+    </>
+  );
+}
+
 function TokenInfo(props: {
   token: ERC20OrNativeToken;
   chain: Chain;

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

@@ -46,7 +46,7 @@ export function WalletTransactionHistory(props: {
       fullHeight
       style={{
         minHeight: "250px",
-        maxHeight: "350px",
+        maxHeight: "370px",
         paddingBottom: spacing.lg,
       }}
     >
@@ -59,13 +59,19 @@ export function WalletTransactionHistory(props: {
             color="secondaryText"
             style={{
               flex: "1",
+              minHeight: "250px",
             }}
           >
             <CrossCircledIcon width={iconSize.xl} height={iconSize.xl} />
             <Text>No Transactions</Text>
           </Container>
         ) : (
-          <Container animate="fadein" flex="column" gap="xs">
+          <Container
+            animate="fadein"
+            flex="column"
+            gap="xs"
+            style={{ minHeight: "250px" }}
+          >
             {transactions.map((tx) => {
               return (
                 <TransactionButton

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

@@ -67,7 +67,7 @@ export type WalletDetailsModalScreen =
   | "buy"
   | "network-switcher"
   | "transactions"
-  | "view-funds"
+  | "view-assets"
   | "view-tokens"
   | "view-nfts"
   | "private-key"

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

@@ -29,7 +29,7 @@ import type { LocaleId } from "./types.js";
 export type PayEmbedProps = {
   /**
    * Override the default tokens shown in PayEmbed uI
-   *
+   * @component
    * By default, PayEmbed shows a few popular tokens for Pay supported chains
    * @example
    *

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

@@ -1,3 +1,4 @@
+import type React from "react";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { radius, spacing } from "../../../core/design-system/index.js";
 import { Text } from "../components/text.js";
@@ -13,7 +14,7 @@ export default function Tabs({
 }: {
   selected: string;
   onSelect: (selected: string) => void;
-  options: string[];
+  options: { label: React.ReactNode; value: string }[];
   children: React.ReactNode;
 }) {
   const theme = useCustomTheme();
@@ -30,8 +31,8 @@ export default function Tabs({
           <Button
             variant="accent"
             type="button"
-            key={option}
-            onClick={() => onSelect(option)}
+            key={option.value}
+            onClick={() => onSelect(option.value)}
             style={{
               flex: 1,
               paddingBlock: spacing.sm,
@@ -41,15 +42,19 @@ export default function Tabs({
               position: "relative",
               borderRadius: radius.md,
               backgroundColor:
-                option === selected ? theme.colors.modalBg : "transparent",
+                option.value === selected
+                  ? theme.colors.modalBg
+                  : "transparent",
             }}
           >
             <Text
-              color={option === selected ? "primaryText" : "secondaryText"}
+              color={
+                option.value === selected ? "primaryText" : "secondaryText"
+              }
               style={{ textAlign: "center" }}
               size="sm"
             >
-              {option}
+              {option.label}
             </Text>
           </Button>
         ))}

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

@@ -13,6 +13,7 @@ import {
   discordIconUri,
   emailIcon,
   facebookIconUri,
+  farcasterIconUri,
   genericWalletIcon,
   googleIconUri,
   passkeyIcon,
@@ -77,6 +78,9 @@ export function WalletImage(props: {
           case "discord":
             image = discordIconUri;
             break;
+          case "farcaster":
+            image = farcasterIconUri;
+            break;
         }
       } else {
         const mipdImage = getInstalledWalletProviders().find(

package/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/BuyDirectListingButton.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { sepolia } from "../../../../../../chains/chain-definitions/sepolia.js";
+import { BuyDirectListingButton } from "./index.js";
+
+const client = TEST_CLIENT;
+
+// marketplace v3 on sepolia
+const marketplaceAddress = "0xe0eFD6fb388405b67b3E9FaFc02649c70E749f03";
+
+describe.runIf(process.env.TW_SECRET_KEY)("BuyDirectListingButton", () => {
+  it("should render", () => {
+    render(
+      <BuyDirectListingButton
+        client={client}
+        chain={sepolia}
+        contractAddress={marketplaceAddress}
+        listingId={1n}
+      >
+        Buy NFT
+      </BuyDirectListingButton>,
+    );
+    expect(screen.queryByText("Buy NFT")).toBeInTheDocument();
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+});