thirdweb 5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321 → 5.41.0

package/src/extensions/erc20/write/getApprovalForTransaction.ts

@@ -7,10 +7,54 @@ import { allowance } from "../__generated__/IERC20/read/allowance.js";
 import { approve } from "../__generated__/IERC20/write/approve.js";
 
 export type GetApprovalForTransactionParams = {
+  /**
+   * The transaction that involves the ERC20 token
+   */
   transaction: PreparedTransaction;
+  /**
+   * The caller's account
+   */
   account: Account;
 };
 
+/**
+ * When dealing with transactions that involve ERC20 tokens (Airdropping ERC20, buy NFTs with ERC20, etc.)
+ * you often have to do a pre-check to see if the targeted contract has the sufficient allowance to "take" the ERC20 tokens from the caller's wallet.
+ *
+ * This extension is a handy method that checks for the allowance and requests to approve for more if current allowance is insufficient
+ *
+ * @param options GetApprovalForTransactionParams
+ * @returns a PreparedTransaction
+ *
+ * @example
+ * ```ts
+ * import { getApprovalForTransaction } from "thirdweb/extensions/erc20";
+ * import { sendAndConfirmTransaction } from "thirdweb";
+ *
+ * async function buyNFT() {
+ *   const buyTransaction = ... // could be a marketplacev3's buyFromListing
+ *
+ *   // Check if you need to approve spending for the involved ERC20 contract
+ *   const approveTx = await getApprovalForTransaction({
+ *     transaction: buyTransaction,
+ *     account, // the connected account
+ *   });
+ *   if (approveTx) {
+ *     await sendAndConfirmTransaction({
+ *       transaction: approveTx,
+ *       account,
+ *     })
+ *   }
+ *   // Once approved, you can finally perform the buy transaction
+ *   await sendAndConfirmTransaction({
+ *     transaction: buyTransaction,
+ *     account,
+ *   });
+ * }
+ * ```
+ *
+ * @transactions
+ */
 export async function getApprovalForTransaction(
   options: GetApprovalForTransactionParams,
 ): Promise<PreparedTransaction | null> {

package/src/react/core/utils/socialIcons.ts

@@ -19,6 +19,8 @@ export const twitchIconUri =
   "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgdmlld0JveD0iMCAwIDExMS43ODY2NyAxMjcuMzg2NjciCiAgIGhlaWdodD0iMTI3LjM4NjY3IgogICB3aWR0aD0iMTExLjc4NjY3IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmczMzU1IgogICBzb2RpcG9kaTpkb2NuYW1lPSJUd2l0Y2hfbG9nby5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjEuMS4xICgzYmY1YWUwZDI1LCAyMDIxLTA5LTIwKSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcwogICBpZD0iZGVmczI5Ij4KICAgIAogICAgCiAgPC9kZWZzPjxzb2RpcG9kaTpuYW1lZHZpZXcKICAgaWQ9Im5hbWVkdmlldzI3IgogICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgIGlua3NjYXBlOnBhZ2VjaGVja2VyYm9hcmQ9IjAiCiAgIHNob3dncmlkPSJmYWxzZSIKICAgaW5rc2NhcGU6em9vbT0iNC4xOTkyMjg0IgogICBpbmtzY2FwZTpjeD0iLTUwLjYwNDUzNSIKICAgaW5rc2NhcGU6Y3k9IjE0MC4zODI5MyIKICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyNTYwIgogICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzg3IgogICBpbmtzY2FwZTp3aW5kb3cteD0iMTkxMiIKICAgaW5rc2NhcGU6d2luZG93LXk9Ii04IgogICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmczMzU1IiAvPgogIDxnCiAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMDEuMzkzMzMsNjcuNTg5MzMyKSIKICAgaWQ9ImczMzY1Ij4KICAgICAgPHBhdGgKICAgaWQ9InBhdGgzMzY3IgogICBzdHlsZT0iZmlsbDojNjQ0MWE1O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIgogICBkPSJtIDAsMCAtMTMuNjUyLC0xMy42NTEgaCAtMjEuNDQ1IGwgLTExLjY5OSwtMTEuNjk3IHYgMTEuNjk3IEggLTY0LjM0NCBWIDQyLjg5MyBIIDAgWiBtIC03Mi4xNDYsNTAuNjkyIC0zLjg5OSwtMTUuNTk5IHYgLTcwLjE5IGggMTcuNTUgdiAtOS43NTEgaCA5Ljc0NiBsIDkuNzUyLDkuNzUxIGggMTUuNTk2IEwgNy43OTUsLTMuOTA1IHYgNTQuNTk3IHoiIC8+CiAgICA8L2c+PHBhdGgKICAgaWQ9InBhdGgzMzY5IgogICBzdHlsZT0iZmlsbDojNjQ0MWE1O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxLjMzMzMzIgogICBkPSJtIDQ0LjE5NzMzMSw2Mi4zOTQyNjYgaCAxMC4zOTg2NyBWIDMxLjE5MjkzMyBoIC0xMC4zOTg2NyB6IG0gMjguNTk0NjcsMCBoIDEwLjM5ODY2IFYgMzEuMTkyOTMzIGggLTEwLjM5ODY2IHoiIC8+Cjwvc3ZnPgo=";
 export const discordIconUri =
   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBpZD0iZGlzY29yZCI+PHBhdGggZmlsbD0iIzY2NjVkMiIgZD0iTTg1LjIyLDI0Ljk1OGMtMTEuNDU5LTguNTc1LTIyLjQzOC04LjMzNC0yMi40MzgtOC4zMzRsLTEuMTIyLDEuMjgyCgkJCQljMTMuNjIzLDQuMDg3LDE5Ljk1NCwxMC4wOTcsMTkuOTU0LDEwLjA5N2MtMTkuNDkxLTEwLjczMS00NC4zMTctMTAuNjU0LTY0LjU5LDBjMCwwLDYuNTcxLTYuMzMxLDIwLjk5Ni0xMC40MThsLTAuODAxLTAuOTYyCgkJCQljMCwwLTEwLjg5OS0wLjI0LTIyLjQzOCw4LjMzNGMwLDAtMTEuNTQsMjAuNzU1LTExLjU0LDQ2LjMxOWMwLDAsNi43MzIsMTEuNTQsMjQuNDQyLDEyLjEwMWMwLDAsMi45NjUtMy41MjYsNS4zNjktNi41NzEKCQkJCWMtMTAuMTc3LTMuMDQ1LTE0LjAyNC05LjM3Ni0xNC4wMjQtOS4zNzZjNi4zOTQsNC4wMDEsMTIuODU5LDYuNTA1LDIwLjkxNiw4LjA5NGMxMy4xMDgsMi42OTgsMjkuNDEzLTAuMDc2LDQxLjU5MS04LjA5NAoJCQkJYzAsMC00LjAwNyw2LjQ5MS0xNC41MDUsOS40NTZjMi40MDQsMi45NjUsNS4yODksNi40MTEsNS4yODksNi40MTFjMTcuNzEtMC41NjEsMjQuNDQxLTEyLjEwMSwyNC40NDEtMTIuMDIKCQkJCUM5Ni43NTksNDUuNzEzLDg1LjIyLDI0Ljk1OCw4NS4yMiwyNC45NTh6IE0zNS4wNTUsNjMuODI0Yy00LjQ4OCwwLTguMTc0LTMuOTI3LTguMTc0LTguODE1CgkJCQljMC4zMjgtMTEuNzA3LDE2LjEwMi0xMS42NzEsMTYuMzQ4LDBDNDMuMjI5LDU5Ljg5NywzOS42MjIsNjMuODI0LDM1LjA1NSw2My44MjR6IE02NC4zMDQsNjMuODI0CgkJCQljLTQuNDg4LDAtOC4xNzQtMy45MjctOC4xNzQtOC44MTVjMC4zNi0xMS42ODQsMTUuOTM3LTExLjY4OSwxNi4zNDgsMEM3Mi40NzgsNTkuODk3LDY4Ljg3Miw2My44MjQsNjQuMzA0LDYzLjgyNHoiPjwvcGF0aD48L3N2Zz4=";
+export const farcasterIconUri =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiByeD0iMjAwIiBmaWxsPSIjODU1RENEIi8+CjxwYXRoIGQ9Ik0yNTcuNzc4IDE1NS41NTZINzQyLjIyMlY4NDQuNDQ0SDY3MS4xMTFWNTI4Ljg4OUg2NzAuNDE0QzY2Mi41NTQgNDQxLjY3NyA1ODkuMjU4IDM3My4zMzMgNTAwIDM3My4zMzNDNDEwLjc0MiAzNzMuMzMzIDMzNy40NDYgNDQxLjY3NyAzMjkuNTg2IDUyOC44ODlIMzI4Ljg4OVY4NDQuNDQ0SDI1Ny43NzhWMTU1LjU1NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMjguODg5IDI1My4zMzNMMTU3Ljc3OCAzNTEuMTExSDE4Mi4yMjJWNzQ2LjY2N0MxNjkuOTQ5IDc0Ni42NjcgMTYwIDc1Ni42MTYgMTYwIDc2OC44ODlWNzk1LjU1NkgxNTUuNTU2QzE0My4yODMgNzk1LjU1NiAxMzMuMzMzIDgwNS41MDUgMTMzLjMzMyA4MTcuNzc4Vjg0NC40NDRIMzgyLjIyMlY4MTcuNzc4QzM4Mi4yMjIgODA1LjUwNSAzNzIuMjczIDc5NS41NTYgMzYwIDc5NS41NTZIMzU1LjU1NlY3NjguODg5QzM1NS41NTYgNzU2LjYxNiAzNDUuNjA2IDc0Ni42NjcgMzMzLjMzMyA3NDYuNjY3SDMwNi42NjdWMjUzLjMzM0gxMjguODg5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY3NS41NTYgNzQ2LjY2N0M2NjMuMjgzIDc0Ni42NjcgNjUzLjMzMyA3NTYuNjE2IDY1My4zMzMgNzY4Ljg4OVY3OTUuNTU2SDY0OC44ODlDNjM2LjYxNiA3OTUuNTU2IDYyNi42NjcgODA1LjUwNSA2MjYuNjY3IDgxNy43NzhWODQ0LjQ0NEg4NzUuNTU2VjgxNy43NzhDODc1LjU1NiA4MDUuNTA1IDg2NS42MDYgNzk1LjU1NiA4NTMuMzMzIDc5NS41NTZIODQ4Ljg4OVY3NjguODg5Qzg0OC44ODkgNzU2LjYxNiA4MzguOTQgNzQ2LjY2NyA4MjYuNjY3IDc0Ni42NjdWMzUxLjExMUg4NTEuMTExTDg4MCAyNTMuMzMzSDcwMi4yMjJWNzQ2LjY2N0g2NzUuNTU2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
 export const microsoftIconUri =
   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiPjxwYXRoIGZpbGw9IiNmZjU3MjIiIGQ9Ik02IDZIMjJWMjJINnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTQgMTQpIi8+PHBhdGggZmlsbD0iIzRjYWY1MCIgZD0iTTI2IDZINDJWMjJIMjZ6IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwIDM0IDE0KSIvPjxwYXRoIGZpbGw9IiNmZmMxMDciIGQ9Ik0yNiAyNkg0MlY0MkgyNnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMzQgMzQpIi8+PHBhdGggZmlsbD0iIzAzYTlmNCIgZD0iTTYgMjZIMjJWNDJINnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTQgMzQpIi8+PC9zdmc+";
 
@@ -48,4 +50,5 @@ export const socialIcons = {
   apple: appleIconUri,
   facebook: facebookIconUri,
   discord: discordIconUri,
+  farcaster: farcasterIconUri,
 };

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

@@ -10,6 +10,7 @@ import {
   DISCORD_ICON,
   EMAIL_ICON,
   FACEBOOK_ICON,
+  FARCASTER_ICON,
   GOOGLE_ICON,
   PHONE_ICON,
   WALLET_ICON,
@@ -76,6 +77,8 @@ export function getAuthProviderImage(lastAuthProvider: string | null): string {
       return FACEBOOK_ICON;
     case "discord":
       return DISCORD_ICON;
+    case "farcaster":
+      return FARCASTER_ICON;
     default:
       return WALLET_ICON;
   }

package/src/react/native/ui/connect/InAppWalletUI.tsx

@@ -13,6 +13,10 @@ import type {
 } from "../../../../wallets/in-app/core/wallet/types.js";
 import { preAuthenticate } from "../../../../wallets/in-app/native/auth/index.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import {
+  type SocialAuthOption,
+  socialAuthOptions,
+} from "../../../../wallets/types.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
 import { radius, spacing } from "../../design-system/index.js";
@@ -26,6 +30,7 @@ import {
   DISCORD_ICON,
   EMAIL_ICON,
   FACEBOOK_ICON,
+  FARCASTER_ICON,
   GOOGLE_ICON,
   PHONE_ICON,
 } from "../icons/svgs.js";
@@ -44,6 +49,7 @@ const socialIcons = {
   facebook: FACEBOOK_ICON,
   apple: APPLE_ICON,
   discord: DISCORD_ICON,
+  farcaster: FARCASTER_ICON,
 };
 
 type InAppWalletFormUIProps = {
@@ -62,9 +68,8 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
   const { wallet, theme } = props;
   const config = wallet.getConfig();
   const authOptions = config?.auth?.options || defaultAuthOptions;
-  const socialLogins = authOptions.filter(
-    (x) =>
-      x === "google" || x === "apple" || x === "facebook" || x === "discord",
+  const socialLogins = authOptions.filter((x) =>
+    socialAuthOptions.includes(x as SocialAuthOption),
   ) as InAppWalletSocialAuth[];
 
   const [inputMode, setInputMode] = useState<"email" | "phone">("email");

package/src/react/native/ui/icons/svgs.ts

@@ -37,6 +37,13 @@ export const DISCORD_ICON = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink
 </g>
 </svg>`;
 
+export const FARCASTER_ICON = `<svg width={width} height={height} viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1000" height="1000" rx="200" fill="#855DCD"/>
+<path d="M257.778 155.556H742.222V844.444H671.111V528.889H670.414C662.554 441.677 589.258 373.333 500 373.333C410.742 373.333 337.446 441.677 329.586 528.889H328.889V844.444H257.778V155.556Z" fill="white"/>
+<path d="M128.889 253.333L157.778 351.111H182.222V746.667C169.949 746.667 160 756.616 160 768.889V795.556H155.556C143.283 795.556 133.333 805.505 133.333 817.778V844.444H382.222V817.778C382.222 805.505 372.273 795.556 360 795.556H355.556V768.889C355.556 756.616 345.606 746.667 333.333 746.667H306.667V253.333H128.889Z" fill="white"/>
+<path d="M675.556 746.667C663.283 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.444H875.556V817.778C875.556 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.556Z" fill="white"/>
+</svg>`;
+
 export const EMAIL_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3335 2.6665H2.66683C1.93045 2.6665 1.3335 3.26346 1.3335 3.99984V11.9998C1.3335 12.7362 1.93045 13.3332 2.66683 13.3332H13.3335C14.0699 13.3332 14.6668 12.7362 14.6668 11.9998V3.99984C14.6668 3.26346 14.0699 2.6665 13.3335 2.6665Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M14.6668 4.6665L8.68683 8.4665C8.48101 8.59545 8.24304 8.66384 8.00016 8.66384C7.75728 8.66384 7.51931 8.59545 7.3135 8.4665L1.3335 4.6665" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>

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

@@ -88,7 +88,7 @@ import { ManageWalletScreen } from "./screens/ManageWalletScreen.js";
 import { PrivateKey } from "./screens/PrivateKey.js";
 import { ReceiveFunds } from "./screens/ReceiveFunds.js";
 import { SendFunds } from "./screens/SendFunds.js";
-import { ViewFunds } from "./screens/ViewFunds.js";
+import { ViewAssets } from "./screens/ViewAssets.js";
 import { ViewNFTs } from "./screens/ViewNFTs.js";
 import { ViewTokens } from "./screens/ViewTokens.js";
 import { WalletConnectReceiverScreen } from "./screens/WalletConnectReceiverScreen.js";
@@ -538,7 +538,7 @@ function DetailsModal(props: {
           {/* View Funds */}
           <MenuButton
             onClick={() => {
-              setScreen("view-funds");
+              setScreen("view-assets");
             }}
             style={{
               fontSize: fontSize.sm,
@@ -694,15 +694,16 @@ function DetailsModal(props: {
         client={client}
       />
     );
-  } else if (screen === "view-funds") {
+  } else if (screen === "view-assets") {
     if (props.supportedNFTs) {
       content = (
-        <ViewFunds
+        <ViewAssets
           supportedTokens={props.supportedTokens}
           supportedNFTs={props.supportedNFTs}
           onBack={() => {
             setScreen("main");
           }}
+          theme={props.theme}
           setScreen={setScreen}
           client={client}
           connectLocale={locale}

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

@@ -13,6 +13,8 @@ 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/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