feat(react): adds tab icons to connect ui transactions page (#3844)

![Screenshot 2024-07-27 at 2.07.20 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/G5kV6fAq4H1wu10SVop6/006213aa-0e02-4b06-a3ec-335bcbb91069.png)
![Screenshot 2024-07-27 at 2.07.25 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/G5kV6fAq4H1wu10SVop6/acc841ae-cd8d-4e02-942c-4872aa2b4c2c.png)

### TL;DR
Improved the TransactionsScreen UI in the thirdweb package by adding new icons for better visualization and adjusted some layout styles for uniformity.

### What changed?
- Added CoinsIcon and FundsIcon for better tab representation in TransactionsScreen.tsx.
- Updated Tabs component to support labels with React nodes.
- Implemented padding and minHeight adjustments in BuyTxHistory and WalletTransactionHistory components.
- Conditionally rendered transaction history buttons only when transactions are available.

### How to test?
1. Navigate to the TransactionsScreen in the thirdweb package.
2. Verify that the tabs now display icons alongside text labels.
3. Check the layout adjustments in the transaction history components for proper spacing and padding.

### Why make this change?
To enhance the user experience by improving the visual representation of tabs and ensuring consistency in the layout of transaction history components.

---

Author: gregfromstl

packages/thirdweb/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}
         >

packages/thirdweb/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>
   );
 }

packages/thirdweb/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

packages/thirdweb/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>
         ))}