feat: wallet card test

__mocks__/fixtures/wallet.ts

@@ -18,7 +18,7 @@ export const mockWallet: Wallet = {
     balance: 0,
     user_id: mockUser.id,
     token: "ICP",
-    address: "",
+    address: "0xd0 5AfA 87A5 99b8 AD8C ff71 b1eC 7129 e3Ed fe08 b9",
     payouts: [mockPayout],
     description: ""
 }

__tests__/components/cards/Wallet.test.tsx

@@ -0,0 +1,24 @@
+import CardsWallet from "@/components/cards/wallet";
+import "@testing-library/jest-dom";
+import { mockWallet } from "../../../__mocks__/fixtures/wallet";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+
+// use the actual component when it is done tested
+jest.mock("../../../src/components/sections/profile/modals/EditAddress/index.tsx", () => {
+  return <h1>hello</h1>;
+});
+
+jest.mock("@/hooks/useTypedDispatch.ts", () => ({
+  useDispatch: jest.fn(),
+}));
+
+describe("Wallet card component", () => {
+  it("renders the wallet component with all the children", () => {
+    renderWithRedux(<CardsWallet wallet={mockWallet} disabled={false} />);
+    expect(screen.getByTestId("cardWalletId")).toBeInTheDocument();
+    expect(screen.getByTestId("overviewId")).toBeInTheDocument();
+    expect(screen.getByTestId("cashoutAddressId")).toBeInTheDocument();
+    expect(screen.queryByText("profile.wallet.payout.text")).not.toBeNull();
+  });
+});

jest.config.js

@@ -28,6 +28,7 @@ const config = {
     "react-markdown": "<rootDir>/__mocks__/react-markdown.tsx",
     [`^(${esModules})-.*`]: "<rootDir>/__mocks__/plugin.ts",
     unified: "<rootDir>/__mocks__/unified.ts",
+    "^@/(.*)$": "<rootDir>/src/$1",
   },
 };
 

jest.polyfills.js

@@ -21,6 +21,7 @@ Object.defineProperties(globalThis, {
 
 const { Blob, File } = require("node:buffer");
 const { fetch, Headers, FormData, Request, Response } = require("undici");
+const { clearImmediate } = require("node:timers");
 
 Object.defineProperties(globalThis, {
   fetch: { value: fetch, writable: true },
@@ -30,4 +31,5 @@ Object.defineProperties(globalThis, {
   FormData: { value: FormData },
   Request: { value: Request },
   Response: { value: Response },
+  clearImmediate: { value: clearImmediate },
 });

src/components/cards/wallet/CashoutAddress.tsx

@@ -0,0 +1,96 @@
+import ArrowButton from "@/components/ui/button/Arrow";
+import { useTranslation } from "next-i18next";
+import { useDispatch } from "@/hooks/useTypedDispatch";
+import { setCurrentWallet } from "@/store/feature/user/wallets.slice";
+import { toggleBodyScrolling } from "@/store/feature/ui.slice";
+import { useSelector } from "@/hooks/useTypedSelector";
+import { openVerificationModal } from "@/store/feature/kyc.slice";
+import { Wallet } from "@/types/wallet";
+import { useCallback, useMemo } from "react";
+
+interface CashoutAddressProps {
+  wallet: Wallet;
+  setShowEditModal: (show: boolean) => void;
+  disabled: boolean;
+  setShowPayoutModal: (show: boolean) => void;
+  testId?:string
+}
+
+export default function CashoutAddress({ wallet, setShowEditModal, disabled, setShowPayoutModal, testId='cashoutAddressId' }: CashoutAddressProps) {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const user = useSelector((state) => state.user.data);
+  const isKycVerified = user?.kycStatus === "VERIFIED";
+  const address = useMemo(() => (wallet.address ? wallet.address.match(/.{1,4}/g) : null), [wallet.address]);
+  const cashable = useMemo(() => String(wallet.token).toUpperCase() !== "DAC", [wallet.token]);
+
+
+  const triggerEditAddress = useCallback(() => {
+    dispatch(setCurrentWallet(wallet));
+    setShowEditModal(true);
+    dispatch(toggleBodyScrolling(true));
+  }, [dispatch, setShowEditModal, wallet]);
+
+  const triggerCashout = useCallback(() => {
+    setShowPayoutModal(true);
+    dispatch(toggleBodyScrolling(true));
+  }, [setShowPayoutModal, dispatch]);
+
+  const triggerKYCVerification = useCallback(() => {
+    dispatch(
+      openVerificationModal({
+        description: t("kyc.payout.reason"),
+        completedActionText: t("kyc.payout.button.completed"),
+        completedAction: () => {
+          triggerCashout();
+        },
+      })
+    );
+  }, [dispatch, t, triggerCashout]);
+  const cashout = () => {
+    if (!isKycVerified) return triggerKYCVerification();
+    triggerCashout();
+  };
+  return (
+    <div className="px-7 pt-6 flex-1 pb-24 lg:pb-24" data-testId={testId}>
+      {cashable ? (
+        <div className="text-sm text-gray-700">
+          {address ? (
+            <p className="leading-5 text-sm flex gap-x-2 gap-y-1 flex-wrap font-mono font-normal">
+              {address.map((part, k) => (
+                <span key={`address-${k}`} className="mr-2">
+                  {part}
+                </span>
+              ))}
+            </p>
+          ) : (
+            <p>{wallet.description}</p>
+          )}
+          <div className="text-gray-700 text-sm mt-3">
+            <span className="cursor-pointer hover:underline" onClick={triggerEditAddress}>
+              {address ? t("profile.wallets.address-change") : t("profile.wallets.address-set")}
+            </span>
+          </div>
+        </div>
+      ) : (
+        <div className="prose">
+          <p
+            dangerouslySetInnerHTML={{
+              __html: t("profile.wallets.uncashable", {
+                token: `${wallet.title}`,
+                link: "https://discord.gg/5yDZvVnpQQ",
+              }),
+            }}
+          />
+        </div>
+      )}
+      {cashable && (
+        <div className="right-2 absolute bottom-2 mt-5">
+          <ArrowButton disabled={!wallet.balance || !wallet.address || disabled} variant="outline-primary" minWidthClass="min-w-40" onClick={cashout}>
+            {t("profile.wallets.cash-out")}
+          </ArrowButton>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/cards/wallet/Overview.tsx

@@ -0,0 +1,37 @@
+import Coin from "@/components/ui/Coin";
+import Tag from "@/components/ui/Tag";
+import Currency from "@/components/ui/Currency";
+import { Wallet } from "@/types/wallet";
+import { useTranslation } from "next-i18next";
+
+interface OverviewProps {
+  wallet: Wallet;
+  testId?: string
+}
+
+export default function Overview({ wallet, testId='overviewId' }: OverviewProps) {
+  const { t } = useTranslation();
+  return (
+    <div className="bg-secondary lg:w-60 md:w-60 sm:w-60 rounded-3.5xl" data-testid={testId}>
+      <div className="p-6">
+        <div className="border-b border-dotted border-gray-900">
+          <h1 className="text-2xl">{wallet.title}</h1>
+          <Tag value={wallet.token} />
+          <div className="text-right mb-4">
+            <Coin size="medium" token={wallet.token} />
+          </div>
+        </div>
+        <div className="flex">
+          <div className="w-1/2 pt-5 text-sm">
+            <h1>{t("profile.wallets.balance")}</h1>
+          </div>
+          <div className="w-1/2 pt-3.5 text-right text-2xl font-medium">
+            <h1>
+              <Currency value={wallet.balance} />
+            </h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/cards/wallet/WalletHint.tsx

@@ -0,0 +1,23 @@
+import { Wallet } from "@/types/wallet";
+import Currency from "@/components/ui/Currency";
+import Hint from "@/components/ui/Hint";
+import { useTranslation } from "next-i18next";
+
+interface HintProps {
+  wallet: Wallet;
+}
+export default function WalletHint({ wallet }: HintProps) {
+  const { t } = useTranslation();
+  return (
+    <>
+      {wallet.payouts.map((payout, i) => (
+        <Hint key={`wallet-payout-${i}`} className="mt-2">
+          <span className="font-medium">
+            <Currency value={payout.amount} token={payout.token} />
+          </span>{" "}
+          {t("profile.wallet.payout.text")}
+        </Hint>
+      ))}
+    </>
+  );
+}