thirdweb 5.35.1-nightly-0a5af48f70a76fc060909b853e20c927328c31c3-20240717194138 → 5.36.0

package/src/react/web/ui/ConnectWallet/locale/vi.ts

@@ -21,7 +21,9 @@ const connectLocaleVi: ConnectLocale = {
   currentNetwork: "Mạng lưới hiện tại",
   switchAccount: "Chuyển tài khoản",
   requestTestnetFunds: "Nhận Testnet Funds",
-  transactions: "Giao dịch",
+  transactions: "Transactions",
+  payTransactions: "Fiat Transactions",
+  walletTransactions: "Wallet Transactions",
   viewAllTransactions: "Tất cả giao dịch",
   backupWallet: "Sao lưu ví",
   guestWalletWarning:

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

@@ -18,7 +18,7 @@ import { Container, ModalHeader } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { AccentFailIcon } from "../../../icons/AccentFailIcon.js";
-import { getBuyWithFiatStatusMeta } from "../tx-history/statusMeta.js";
+import { getBuyWithFiatStatusMeta } from "../pay-transactions/statusMeta.js";
 import { OnRampTxDetailsTable } from "./FiatTxDetailsTable.js";
 
 type UIStatus = "loading" | "failed" | "completed" | "partialSuccess";

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

@@ -34,7 +34,7 @@ import { StepIcon } from "../Stepper.js";
 import {
   type FiatStatusMeta,
   getBuyWithFiatStatusMeta,
-} from "../tx-history/statusMeta.js";
+} from "../pay-transactions/statusMeta.js";
 import { getCurrencyMeta } from "./currencies.js";
 
 export type BuyWithFiatPartialQuote = {

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

@@ -11,8 +11,8 @@ import { Spacer } from "../../../../components/Spacer.js";
 import { Container, Line } from "../../../../components/basic.js";
 import { ButtonLink } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
-import { TokenInfoRow } from "../tx-history/TokenInfoRow.js";
-import type { FiatStatusMeta } from "../tx-history/statusMeta.js";
+import { TokenInfoRow } from "../pay-transactions/TokenInfoRow.js";
+import type { FiatStatusMeta } from "../pay-transactions/statusMeta.js";
 import { getCurrencyMeta } from "./currencies.js";
 
 /**

package/src/react/web/ui/ConnectWallet/screens/Buy/{tx-history → pay-transactions}/BuyTxHistory.tsx

@@ -35,7 +35,7 @@ import {
 /**
  * @internal
  */
-export function BuyTxHistory(props: {
+export function PayTxHistoryScreen(props: {
   onBack?: () => void;
   client: ThirdwebClient;
   onDone: () => void;
@@ -46,6 +46,7 @@ export function BuyTxHistory(props: {
   const activeChain = useActiveWalletChain();
   const activeWallet = useActiveWallet();
   const activeAccount = useActiveAccount();
+  const chainExplorers = useChainExplorers(activeChain);
 
   const payer: PayerInfo | undefined =
     activeChain && activeAccount && activeWallet
@@ -70,16 +71,39 @@ export function BuyTxHistory(props: {
     );
   }
 
-  return <BuyTxHistoryList {...props} onSelectTx={setSelectedTx} />;
+  return (
+    <Container animate="fadein">
+      <Container p="lg">
+        <ModalHeader title="Transactions" onBack={props.onBack} />
+      </Container>
+      <PayTxHistoryList {...props} onSelectTx={setSelectedTx} />
+      <Line />
+      <Container p="lg">
+        <ButtonLink
+          fullWidth
+          variant="outline"
+          href={`${chainExplorers.explorers[0]?.url}/address/${activeAccount?.address}`}
+          target="_blank"
+          as="a"
+          gap="xs"
+          style={{
+            textDecoration: "none",
+            color: "inherit",
+          }}
+        >
+          View on Explorer{" "}
+          <ExternalLinkIcon width={iconSize.sm} height={iconSize.sm} />
+        </ButtonLink>
+      </Container>
+    </Container>
+  );
 }
 
 /**
  * @internal
  */
-export function BuyTxHistoryList(props: {
-  onBack?: () => void;
+export function PayTxHistoryList(props: {
   client: ThirdwebClient;
-  onDone: () => void;
   onSelectTx: (tx: TxStatusInfo) => void;
 }) {
   const {
@@ -91,55 +115,47 @@ export function BuyTxHistoryList(props: {
     pagination,
   } = useBuyTransactionsToShow(props.client);
 
-  const activeChain = useActiveWalletChain();
-  const chainExplorers = useChainExplorers(activeChain);
-  const activeAccount = useActiveAccount();
-
   const noTransactions = txInfosToShow.length === 0;
 
   return (
-    <Container animate="fadein">
-      <Container p="lg">
-        <ModalHeader title="Transactions" onBack={props.onBack} />
-      </Container>
+    <Container
+      scrollY
+      flex="column"
+      fullHeight
+      style={{
+        minHeight: "250px",
+        maxHeight: "370px",
+      }}
+    >
+      <Container flex="column" gap="xs" px="lg" expand>
+        {noTransactions && !isLoading && (
+          <Container
+            flex="column"
+            gap="md"
+            center="both"
+            color="secondaryText"
+            style={{
+              minHeight: "250px",
+            }}
+          >
+            <CrossCircledIcon width={iconSize.xl} height={iconSize.xl} />
+            <Text>No Transactions</Text>
+          </Container>
+        )}
 
-      <Container
-        scrollY
-        flex="column"
-        fullHeight
-        style={{
-          minHeight: "250px",
-          maxHeight: "370px",
-        }}
-      >
-        <Container flex="column" gap="xs" px="lg" expand>
-          {noTransactions && !isLoading && (
-            <Container
-              flex="column"
-              gap="md"
-              center="both"
-              color="secondaryText"
-              style={{
-                minHeight: "250px",
-              }}
-            >
-              <CrossCircledIcon width={iconSize.xl} height={iconSize.xl} />
-              <Text>No Transactions </Text>
-            </Container>
-          )}
-
-          {noTransactions && isLoading && (
-            <Container
-              flex="row"
-              center="both"
-              style={{
-                minHeight: "250px",
-              }}
-            >
-              <Spinner size="xl" color="accentText" />
-            </Container>
-          )}
+        {noTransactions && isLoading && (
+          <Container
+            flex="row"
+            center="both"
+            style={{
+              minHeight: "250px",
+            }}
+          >
+            <Spinner size="xl" color="accentText" />
+          </Container>
+        )}
 
+        <Container animate="fadein" flex="column" gap="xs">
           {txInfosToShow.map((txInfo) => {
             return (
               <BuyTxHistoryButton
@@ -156,85 +172,66 @@ export function BuyTxHistoryList(props: {
               />
             );
           })}
-
-          {isLoading && txInfosToShow.length > 0 && (
-            <>
-              <Skeleton width="100%" height={BuyTxHistoryButtonHeight} />
-              <Skeleton width="100%" height={BuyTxHistoryButtonHeight} />
-              <Skeleton width="100%" height={BuyTxHistoryButtonHeight} />
-            </>
-          )}
         </Container>
 
-        <Container p="lg">
-          {pagination && !hidePagination && (
-            <div
+        {isLoading && txInfosToShow.length > 0 && (
+          <>
+            <Skeleton width="100%" height={BuyTxHistoryButtonHeight} />
+            <Skeleton width="100%" height={BuyTxHistoryButtonHeight} />
+            <Skeleton width="100%" height={BuyTxHistoryButtonHeight} />
+          </>
+        )}
+      </Container>
+
+      <Container p="lg">
+        {pagination && !hidePagination && (
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gap: spacing.sm,
+            }}
+          >
+            <Button
+              variant="outline"
+              gap="xs"
+              disabled={pageIndex === 0}
+              data-disabled={pageIndex === 0}
               style={{
-                display: "grid",
-                gridTemplateColumns: "1fr 1fr",
-                gap: spacing.sm,
+                fontSize: fontSize.sm,
+                paddingBlock: spacing.sm,
+              }}
+              onClick={() => {
+                setPageIndex((prev) => prev - 1);
               }}
             >
-              <Button
-                variant="outline"
-                gap="xs"
-                disabled={pageIndex === 0}
-                data-disabled={pageIndex === 0}
-                style={{
-                  fontSize: fontSize.sm,
-                  paddingBlock: spacing.sm,
-                }}
-                onClick={() => {
-                  setPageIndex((prev) => prev - 1);
-                }}
-              >
-                <ArrowRightIcon
-                  width={iconSize.sm}
-                  height={iconSize.sm}
-                  style={{
-                    transform: "rotate(180deg)",
-                  }}
-                />
-                Prev
-              </Button>
-              <Button
-                variant="outline"
-                gap="xs"
-                disabled={!pagination.hasNextPage}
-                data-disabled={!pagination.hasNextPage}
+              <ArrowRightIcon
+                width={iconSize.sm}
+                height={iconSize.sm}
                 style={{
-                  fontSize: fontSize.sm,
-                  paddingBlock: spacing.sm,
+                  transform: "rotate(180deg)",
                 }}
-                onClick={() => {
-                  setPageIndex((prev) => prev + 1);
-                }}
-              >
-                Next
-                <ArrowRightIcon width={iconSize.sm} height={iconSize.sm} />
-              </Button>
-            </div>
-          )}
-        </Container>
-      </Container>
-
-      <Line />
-      <Container p="lg">
-        <ButtonLink
-          fullWidth
-          variant="outline"
-          href={`${chainExplorers.explorers[0]?.url}/address/${activeAccount?.address}`}
-          target="_blank"
-          as="a"
-          gap="xs"
-          style={{
-            textDecoration: "none",
-            color: "inherit",
-          }}
-        >
-          View on Explorer{" "}
-          <ExternalLinkIcon width={iconSize.sm} height={iconSize.sm} />
-        </ButtonLink>
+              />
+              Prev
+            </Button>
+            <Button
+              variant="outline"
+              gap="xs"
+              disabled={!pagination.hasNextPage}
+              data-disabled={!pagination.hasNextPage}
+              style={{
+                fontSize: fontSize.sm,
+                paddingBlock: spacing.sm,
+              }}
+              onClick={() => {
+                setPageIndex((prev) => prev + 1);
+              }}
+            >
+              Next
+              <ArrowRightIcon width={iconSize.sm} height={iconSize.sm} />
+            </Button>
+          </div>
+        )}
       </Container>
     </Container>
   );

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

@@ -12,7 +12,7 @@ import { Container, ModalHeader } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { AccentFailIcon } from "../../../icons/AccentFailIcon.js";
-import { SwapTxDetailsTable } from "../tx-history/SwapDetailsScreen.js";
+import { SwapTxDetailsTable } from "../pay-transactions/SwapDetailsScreen.js";
 
 type UIStatus = "pending" | "success" | "failed" | "partialSuccess";
 

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

@@ -0,0 +1,214 @@
+"use client";
+import styled from "@emotion/styled";
+import { CheckIcon, CrossCircledIcon } from "@radix-ui/react-icons";
+import { useSyncExternalStore } from "react";
+import { getCachedChain } from "../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { getTransactionStore } from "../../../../../transaction/transaction-store.js";
+import { shortenHex } from "../../../../../utils/address.js";
+import type { Hex } from "../../../../../utils/encoding/hex.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { iconSize, spacing } from "../../../../core/design-system/index.js";
+import { useWaitForReceipt } from "../../../../core/hooks/contract/useWaitForReceipt.js";
+import {
+  useChainExplorers,
+  useChainIconUrl,
+} from "../../../../core/hooks/others/useChainQuery.js";
+import { useActiveWalletChain } from "../../../hooks/wallets/useActiveWalletChain.js";
+import { ChainIcon } from "../../components/ChainIcon.js";
+import { ChainName } from "../../components/ChainName.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Spinner } from "../../components/Spinner.js";
+import { Container } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { Text } from "../../components/text.js";
+import type { ConnectLocale } from "../locale/types.js";
+
+export function WalletTransactionHistory(props: {
+  onBack?: () => void;
+  locale: ConnectLocale;
+  client: ThirdwebClient;
+  address: string;
+}) {
+  const activeChain = useActiveWalletChain();
+  const chainExplorers = useChainExplorers(activeChain);
+  const transactionStore = getTransactionStore(props.address);
+  const reverseChronologicalTransactions = useSyncExternalStore(
+    transactionStore.subscribe,
+    transactionStore.getValue,
+  );
+  const transactions = [...reverseChronologicalTransactions].reverse();
+
+  return (
+    <Container
+      scrollY
+      flex="column"
+      fullHeight
+      style={{
+        minHeight: "250px",
+        maxHeight: "370px",
+      }}
+    >
+      <Container
+        flex="column"
+        gap="xs"
+        style={{ paddingBottom: "24px" }}
+        expand
+      >
+        {transactions.length === 0 && (
+          <Container
+            flex="column"
+            gap="md"
+            center="both"
+            color="secondaryText"
+            style={{
+              minHeight: "250px",
+            }}
+          >
+            <CrossCircledIcon width={iconSize.xl} height={iconSize.xl} />
+            <Text>No Transactions</Text>
+          </Container>
+        )}
+
+        <Container animate="fadein" flex="column" gap="xs">
+          {transactions.map((tx) => {
+            return (
+              <TransactionButton
+                key={tx.transactionHash}
+                explorerUrl={chainExplorers.explorers[0]?.url}
+                client={props.client}
+                hash={tx.transactionHash}
+                chainId={tx.chainId}
+              />
+            );
+          })}
+        </Container>
+      </Container>
+    </Container>
+  );
+}
+
+export function TransactionButton(props: {
+  hash: string;
+  client: ThirdwebClient;
+  chainId: number;
+  explorerUrl?: string;
+}) {
+  const {
+    data: receipt,
+    isLoading,
+    error,
+  } = useWaitForReceipt({
+    transactionHash: props.hash as Hex,
+    chain: getCachedChain(props.chainId),
+    client: props.client,
+  });
+  const chainIconQuery = useChainIconUrl(getCachedChain(props.chainId));
+
+  const content = (
+    <TxButton
+      variant="secondary"
+      fullWidth
+      style={{
+        paddingBlock: spacing.sm,
+      }}
+    >
+      <Container
+        flex="row"
+        center="y"
+        gap="md"
+        style={{
+          flex: 1,
+        }}
+      >
+        <ChainIcon
+          chainIconUrl={chainIconQuery.url}
+          size={iconSize.lg}
+          client={props.client}
+        />
+        <div
+          style={{
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+          }}
+        >
+          {/* Row 1 */}
+          <Container
+            flex="row"
+            gap="xs"
+            center="y"
+            style={{
+              justifyContent: "space-between",
+            }}
+          >
+            <Text size="sm" color="primaryText">
+              {receipt?.to
+                ? `Interacted with ${shortenHex(receipt.to, 4)}`
+                : `Hash: ${shortenHex(props.hash, 4)}`}
+            </Text>
+          </Container>
+
+          <Spacer y="xxs" />
+
+          {/* Row 2 */}
+          <Container
+            flex="row"
+            center="y"
+            gap="xxs"
+            style={{
+              justifyContent: "space-between",
+            }}
+          >
+            <ChainName
+              chain={getCachedChain(props.chainId)}
+              size="xs"
+              client={props.client}
+            />
+          </Container>
+        </div>
+      </Container>
+
+      {/* Status */}
+      <Container flex="row" gap="xxs" center="y">
+        {isLoading && <Spinner size="sm" color="primaryText" />}
+        {!isLoading && receipt && receipt.status === "success" && (
+          <Text size="md" color={"success"}>
+            <CheckIcon width={iconSize.md} height={iconSize.md} />
+          </Text>
+        )}
+        {(error || (!isLoading && receipt && receipt.status !== "success")) && (
+          <Text size="md" color={"danger"}>
+            <CrossCircledIcon width={iconSize.md} height={iconSize.md} />
+          </Text>
+        )}
+      </Container>
+    </TxButton>
+  );
+
+  if (props.explorerUrl) {
+    return (
+      <a
+        href={`${props.explorerUrl}/tx/${props.hash}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return content;
+}
+
+const TxButton = /* @__PURE__ */ styled(Button)(() => {
+  const theme = useCustomTheme();
+  return {
+    background: theme.colors.tertiaryBg,
+    "&:hover": {
+      background: theme.colors.secondaryButtonBg,
+    },
+    height: "62px",
+  };
+});

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

@@ -66,7 +66,7 @@ export type WalletDetailsModalScreen =
   | "receive"
   | "buy"
   | "network-switcher"
-  | "pending-tx"
+  | "transactions"
   | "view-funds"
   | "view-tokens"
   | "view-nfts"

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

@@ -18,7 +18,7 @@ import type { SupportedTokens } from "../../core/utils/defaultTokens.js";
 import { EmbedContainer } from "./ConnectWallet/Modal/ConnectEmbed.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";
+import { PayTxHistoryScreen } from "./ConnectWallet/screens/Buy/pay-transactions/BuyTxHistory.js";
 import { DynamicHeight } from "./components/DynamicHeight.js";
 import { Spinner } from "./components/Spinner.js";
 import type { LocaleId } from "./types.js";
@@ -212,7 +212,7 @@ export function PayEmbed(props: PayEmbedProps) {
         </div>
         {/* this does not need to persist so we can just show-hide it with JS */}
         {screen === "tx-history" && (
-          <BuyTxHistory
+          <PayTxHistoryScreen
             client={props.client}
             onBack={() => {
               setScreen("buy");

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

@@ -0,0 +1,56 @@
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import { Text } from "../components/text.js";
+import { Container, Line } from "./basic.js";
+
+export default function Tabs({
+  selected,
+  onSelect,
+  options,
+  children,
+}: {
+  selected: string;
+  onSelect: (selected: string) => void;
+  options: string[];
+  children: React.ReactNode;
+}) {
+  const theme = useCustomTheme();
+  return (
+    <Container>
+      <Container flex="row" center="y" style={{ width: "100%" }}>
+        {options.map((option) => (
+          <button
+            type="button"
+            key={option}
+            onClick={() => onSelect(option)}
+            style={{
+              flex: 1,
+              height: "50px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              position: "relative",
+            }}
+          >
+            <Text
+              color={option === selected ? "primaryText" : "secondaryText"}
+              style={{ textAlign: "center" }}
+            >
+              {option}
+            </Text>
+            <Line
+              style={{
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                width: "100%",
+                backgroundColor:
+                  option === selected ? "white" : theme.colors.separatorLine,
+              }}
+            />
+          </button>
+        ))}
+      </Container>
+      <Container py="sm">{children}</Container>
+    </Container>
+  );
+}

package/src/storage/unpin.ts

@@ -22,8 +22,8 @@ export type UnpinOptions = {
  *   client: thirdwebClient,
  *   cid: "QmTzQ1N1z1Q1N1z1Q1N1z1Q1N1z1Q1N1z1Q1N1z1Q1N1z1",
  * });
- *
  * ```
+ * @storage
  */
 
 export async function unpin(options: UnpinOptions) {