refactor: cashouts component

Author: mhenriette

src/components/cards/wallet/_partials/AddressDisplay.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from "next-i18next";
+import { ReactElement, useMemo } from "react";
+
+
+
+interface AddressDisplayProps {
+  walletAddress: string;
+  description: string;
+  triggerEditAddress: () => void;
+}
+/**
+ * Address display component
+ *
+ * @returns {ReactElement}
+ */
+export default function AddressDisplay({ walletAddress, description, triggerEditAddress }: AddressDisplayProps): ReactElement {
+  const { t } = useTranslation();
+  const address = useMemo(() => (walletAddress ? walletAddress.match(/.{1,4}/g) : null), [walletAddress]);
+  return (
+    <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, index) => (
+            <span key={`address-${index}`} className="mr-2">
+              {part}
+            </span>
+          ))}
+        </p>
+      ) : (
+        <p>{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>
+  );
+}

src/components/cards/wallet/CashoutAddress.tsx renamed to src/components/cards/wallet/_partials/Cashout.tsx

@@ -7,8 +7,9 @@ import { useSelector } from "@/hooks/useTypedSelector";
 import { openVerificationModal } from "@/store/feature/kyc.slice";
 import { Wallet } from "@/types/wallet";
 import { ReactElement, useCallback, useMemo } from "react";
+import AddressDisplay from "./AddressDisplay";
 
-interface CashoutAddressProps {
+interface CashoutProps {
   wallet: Wallet;
   setShowEditModal: (show: boolean) => void;
   disabled: boolean;
@@ -21,12 +22,11 @@ interface CashoutAddressProps {
  *
  * @returns {ReactElement}
  */
-export default function CashoutAddress({ wallet, setShowEditModal, disabled, setShowPayoutModal, testId = "cashoutAddressId" }: CashoutAddressProps): ReactElement {
+export default function Cashout({ wallet, setShowEditModal, disabled, setShowPayoutModal, testId = "cashoutAddressId" }: CashoutProps): ReactElement {
   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 isKycVerified = useMemo(() => user?.kycStatus === "VERIFIED", [user?.kycStatus]);
   const cashable = useMemo(() => String(wallet.token).toUpperCase() !== "DAC", [wallet.token]);
 
   const triggerEditAddress = useCallback(() => {
@@ -58,24 +58,7 @@ export default function CashoutAddress({ wallet, setShowEditModal, disabled, set
   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, index) => (
-                <span key={`address-${index}`} 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>
+        <AddressDisplay walletAddress={wallet.address} description={wallet.description} triggerEditAddress={triggerEditAddress} />
       ) : (
         <div className="prose">
           <p

src/components/cards/wallet/WalletHint.tsx renamed to src/components/cards/wallet/_partials/Hints.tsx

@@ -4,7 +4,7 @@ import Hint from "@/components/ui/Hint";
 import { useTranslation } from "next-i18next";
 import { ReactElement } from "react";
 
-interface WalletHintProps {
+interface HintsProps {
   wallet: Wallet;
 }
 
@@ -14,7 +14,7 @@ interface WalletHintProps {
  * @returns {ReactElement}
  */
 
-export default function WalletHint({ wallet }: WalletHintProps): ReactElement {
+export default function Hints({ wallet }: HintsProps): ReactElement {
   const { t } = useTranslation();
   return (
     <>

src/components/cards/wallet/Overview.tsx renamed to src/components/cards/wallet/_partials/Overview.tsx

@@ -4,9 +4,9 @@ import Payout from "@/components/sections/profile/modals/Payout";
 import { Wallet } from "@/types/wallet";
 import { toggleBodyScrolling } from "@/store/feature/ui.slice";
 import { useDispatch } from "@/hooks/useTypedDispatch";
-import CashoutAddress from "./CashoutAddress";
-import Overview from "./Overview";
-import WalletHint from "./WalletHint";
+import Cashout from "./_partials/Cashout";
+import Overview from "./_partials/Overview";
+import Hints from "./_partials/Hints";
 
 /**
  * Cards wallet props interface
@@ -40,9 +40,9 @@ export default function CardsWallet({ wallet, disabled = false, testId = "cardWa
         {showEditModal && <EditAddress show={showEditModal} onClose={onClose} wallet={wallet} />}
         <Payout wallet={wallet} show={showPayoutModal} onClose={onClose} />
         <Overview wallet={wallet} />
-        <CashoutAddress wallet={wallet} setShowEditModal={setShowEditModal} disabled={disabled} setShowPayoutModal={setShowPayoutModal} />
+        <Cashout wallet={wallet} setShowEditModal={setShowEditModal} disabled={disabled} setShowPayoutModal={setShowPayoutModal} />
       </div>
-      <WalletHint wallet={wallet} />
+      <Hints wallet={wallet} />
     </div>
   );
 }