update

Author: kien-ngo

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/statusMeta.test.ts

@@ -0,0 +1,174 @@
+import { describe, expect, it } from "vitest";
+import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
+import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
+import {
+  getBuyWithCryptoStatusMeta,
+  getBuyWithFiatStatusMeta,
+} from "./statusMeta.js";
+
+describe("getBuyWithCryptoStatusMeta", () => {
+  it('returns "Unknown" for NOT_FOUND status', () => {
+    const result = getBuyWithCryptoStatusMeta({
+      status: "NOT_FOUND",
+    } as BuyWithCryptoStatus);
+    expect(result).toEqual({
+      status: "Unknown",
+      color: "secondaryText",
+    });
+  });
+
+  it('returns "Bridging" for WAITING_BRIDGE subStatus', () => {
+    const result = getBuyWithCryptoStatusMeta({
+      status: "PENDING",
+      subStatus: "WAITING_BRIDGE",
+    } as BuyWithCryptoStatus);
+    expect(result).toEqual({
+      status: "Bridging",
+      color: "accentText",
+      loading: true,
+    });
+  });
+
+  it('returns "Incomplete" for PARTIAL_SUCCESS subStatus', () => {
+    const result = getBuyWithCryptoStatusMeta({
+      status: "COMPLETED",
+      subStatus: "PARTIAL_SUCCESS",
+    } as BuyWithCryptoStatus);
+    expect(result).toEqual({
+      status: "Incomplete",
+      color: "secondaryText",
+    });
+  });
+
+  it('returns "Pending" for PENDING status', () => {
+    const result = getBuyWithCryptoStatusMeta({
+      status: "PENDING",
+    } as BuyWithCryptoStatus);
+    expect(result).toEqual({
+      status: "Pending",
+      color: "accentText",
+      loading: true,
+    });
+  });
+
+  it('returns "Failed" for FAILED status', () => {
+    const result = getBuyWithCryptoStatusMeta({
+      status: "FAILED",
+    } as BuyWithCryptoStatus);
+    expect(result).toEqual({
+      status: "Failed",
+      color: "danger",
+    });
+  });
+
+  it('returns "Completed" for COMPLETED status', () => {
+    const result = getBuyWithCryptoStatusMeta({
+      status: "COMPLETED",
+    } as BuyWithCryptoStatus);
+    expect(result).toEqual({
+      status: "Completed",
+      color: "success",
+    });
+  });
+
+  it('returns "Unknown" for unhandled status', () => {
+    const result = getBuyWithCryptoStatusMeta({
+      // @ts-ignore Test purpose
+      status: "Unknown",
+    });
+    expect(result).toEqual({
+      status: "Unknown",
+      color: "secondaryText",
+    });
+  });
+});
+
+describe("getBuyWithFiatStatusMeta", () => {
+  it('returns "Incomplete" for CRYPTO_SWAP_FALLBACK status', () => {
+    const result = getBuyWithFiatStatusMeta({
+      status: "CRYPTO_SWAP_FALLBACK",
+    } as BuyWithFiatStatus);
+    expect(result).toEqual({
+      status: "Incomplete",
+      color: "danger",
+      step: 2,
+      progressStatus: "partialSuccess",
+    });
+  });
+
+  it('returns "Pending" for CRYPTO_SWAP_IN_PROGRESS status', () => {
+    const result = getBuyWithFiatStatusMeta({
+      status: "CRYPTO_SWAP_IN_PROGRESS",
+    } as BuyWithFiatStatus);
+    expect(result).toEqual({
+      status: "Pending",
+      color: "accentText",
+      loading: true,
+      step: 2,
+      progressStatus: "pending",
+    });
+  });
+
+  it('returns "Pending" for PENDING_ON_RAMP_TRANSFER status', () => {
+    const result = getBuyWithFiatStatusMeta({
+      status: "PENDING_ON_RAMP_TRANSFER",
+    } as BuyWithFiatStatus);
+    expect(result).toEqual({
+      status: "Pending",
+      color: "accentText",
+      loading: true,
+      step: 1,
+      progressStatus: "pending",
+    });
+  });
+
+  it('returns "Completed" for ON_RAMP_TRANSFER_COMPLETED status', () => {
+    const result = getBuyWithFiatStatusMeta({
+      status: "ON_RAMP_TRANSFER_COMPLETED",
+    } as BuyWithFiatStatus);
+    expect(result).toEqual({
+      status: "Completed",
+      color: "success",
+      loading: true,
+      step: 1,
+      progressStatus: "completed",
+    });
+  });
+
+  it('returns "Action Required" for CRYPTO_SWAP_REQUIRED status', () => {
+    const result = getBuyWithFiatStatusMeta({
+      status: "CRYPTO_SWAP_REQUIRED",
+    } as BuyWithFiatStatus);
+    expect(result).toEqual({
+      status: "Action Required",
+      color: "accentText",
+      step: 2,
+      progressStatus: "actionRequired",
+    });
+  });
+
+  it('returns "Failed" for PAYMENT_FAILED status', () => {
+    const result = getBuyWithFiatStatusMeta({
+      status: "PAYMENT_FAILED",
+    } as BuyWithFiatStatus);
+    expect(result).toEqual({
+      status: "Failed",
+      color: "danger",
+      step: 1,
+      progressStatus: "failed",
+    });
+  });
+
+  it('returns "Unknown" for unhandled status', () => {
+    const result = getBuyWithFiatStatusMeta({
+      // @ts-ignore
+      status: "UNKNOWN_STATUS",
+    });
+    expect(result).toEqual({
+      status: "Unknown",
+      color: "secondaryText",
+      step: 1,
+      progressStatus: "unknown",
+    });
+  });
+});

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/formatSeconds.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { formatSeconds } from "./formatSeconds.js";
+
+describe("formatSeconds", () => {
+  it("formats seconds to hours and minutes when over 3600 seconds", () => {
+    expect(formatSeconds(3601)).toBe("1 Hours 0 Minutes");
+    expect(formatSeconds(7200)).toBe("2 Hours 0 Minutes");
+    expect(formatSeconds(5400)).toBe("1 Hours 30 Minutes");
+    expect(formatSeconds(12345)).toBe("3 Hours 25 Minutes");
+  });
+
+  it("formats seconds to minutes when between 61 and 3600 seconds", () => {
+    expect(formatSeconds(61)).toBe("2 Minutes");
+    expect(formatSeconds(120)).toBe("2 Minutes");
+    expect(formatSeconds(3599)).toBe("60 Minutes");
+    expect(formatSeconds(1800)).toBe("30 Minutes");
+  });
+
+  it('formats seconds to "Xs" when 60 seconds or less', () => {
+    expect(formatSeconds(60)).toBe("60s");
+    expect(formatSeconds(59)).toBe("59s");
+    expect(formatSeconds(1)).toBe("1s");
+    expect(formatSeconds(0)).toBe("0s");
+  });
+
+  it("handles decimal inputs by rounding down for hours/minutes and up for minutes only", () => {
+    expect(formatSeconds(3661.5)).toBe("1 Hours 1 Minutes");
+    expect(formatSeconds(119.9)).toBe("2 Minutes");
+  });
+});

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/utils.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { getBuyTokenAmountFontSize } from "./utils.js";
+
+describe("getBuyTokenAmountFontSize", () => {
+  it("returns 26px for strings longer than 10 characters", () => {
+    expect(getBuyTokenAmountFontSize("12345678901")).toBe("26px");
+    expect(getBuyTokenAmountFontSize("1234567890123")).toBe("26px");
+  });
+
+  it("returns 34px for strings longer than 6 characters but not more than 10", () => {
+    expect(getBuyTokenAmountFontSize("1234567")).toBe("34px");
+    expect(getBuyTokenAmountFontSize("1234567890")).toBe("34px");
+  });
+
+  it("returns 50px for strings 6 characters or shorter", () => {
+    expect(getBuyTokenAmountFontSize("123456")).toBe("50px");
+    expect(getBuyTokenAmountFontSize("12345")).toBe("50px");
+    expect(getBuyTokenAmountFontSize("")).toBe("50px");
+  });
+});