Skip to content

Commit 7eeafec

Browse files
mhenriettemhenriette
committed
refactor: split wallet component into different components
1 parent 5947862 commit 7eeafec

File tree

7 files changed

+224
-155
lines changed

7 files changed

+224
-155
lines changed

‎check_branch_name.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ local_branch_name="$(git rev-parse --abbrev-ref HEAD)"
66
# - ^(dev|main)$)
77
# 2. checking for branch Name starting with fix,ft,ht,chore or doc follwed by a "/" then the "branch name"
88
# - ^((fix|ft|ht|chore|doc)\/[a-zA-Z0-9\-]+)$
9-
valid_branch_regex='^(dev|main)$|^((fix|ft|ht|chore|doc|test)\/[a-zA-Z0-9\-]+)$'
9+
valid_branch_regex='^(dev|main)$|^((fix|ft|ht|chore|doc|test|refactor)\/[a-zA-Z0-9\-]+)$'
1010

1111
green='\033[0;32m'
1212
red='\033[0;31m'

‎src/components/cards/Wallet.tsx‎

Lines changed: 0 additions & 153 deletions
This file was deleted.

‎src/components/cards/wallet/CashoutAddress.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import ArrowButton from "@/components/ui/button/Arrow";
2+
import { useTranslation } from "next-i18next";
3+
import { useDispatch } from "@/hooks/useTypedDispatch";
4+
import { setCurrentWallet } from "@/store/feature/user/wallets.slice";
5+
import { toggleBodyScrolling } from "@/store/feature/ui.slice";
6+
import { useSelector } from "@/hooks/useTypedSelector";
7+
import { openVerificationModal } from "@/store/feature/kyc.slice";
8+
import { Wallet } from "@/types/wallet";
9+
import { ReactElement, useCallback, useMemo } from "react";
10+
11+
interface CashoutAddressProps {
12+
wallet: Wallet;
13+
setShowEditModal: (show: boolean) => void;
14+
disabled: boolean;
15+
setShowPayoutModal: (show: boolean) => void;
16+
testId?: string;
17+
}
18+
19+
/**
20+
* Cashout address component
21+
*
22+
* @returns {ReactElement}
23+
*/
24+
export default function CashoutAddress({ wallet, setShowEditModal, disabled, setShowPayoutModal, testId = "cashoutAddressId" }: CashoutAddressProps): ReactElement {
25+
const { t } = useTranslation();
26+
const dispatch = useDispatch();
27+
const user = useSelector((state) => state.user.data);
28+
const isKycVerified = user?.kycStatus === "VERIFIED";
29+
const address = useMemo(() => (wallet.address ? wallet.address.match(/.{1,4}/g) : null), [wallet.address]);
30+
const cashable = useMemo(() => String(wallet.token).toUpperCase() !== "DAC", [wallet.token]);
31+
32+
const triggerEditAddress = useCallback(() => {
33+
dispatch(setCurrentWallet(wallet));
34+
setShowEditModal(true);
35+
dispatch(toggleBodyScrolling(true));
36+
}, [dispatch, setShowEditModal, wallet]);
37+
38+
const triggerCashout = useCallback(() => {
39+
setShowPayoutModal(true);
40+
dispatch(toggleBodyScrolling(true));
41+
}, [setShowPayoutModal, dispatch]);
42+
43+
const triggerKYCVerification = useCallback(() => {
44+
dispatch(
45+
openVerificationModal({
46+
description: t("kyc.payout.reason"),
47+
completedActionText: t("kyc.payout.button.completed"),
48+
completedAction: () => {
49+
triggerCashout();
50+
},
51+
})
52+
);
53+
}, [dispatch, t, triggerCashout]);
54+
const cashout = () => {
55+
if (!isKycVerified) return triggerKYCVerification();
56+
triggerCashout();
57+
};
58+
return (
59+
<div className="px-7 pt-6 flex-1 pb-24 lg:pb-24" data-testid={testId}>
60+
{cashable ? (
61+
<div className="text-sm text-gray-700">
62+
{address ? (
63+
<p className="leading-5 text-sm flex gap-x-2 gap-y-1 flex-wrap font-mono font-normal">
64+
{address.map((part, index) => (
65+
<span key={`address-${index}`} className="mr-2">
66+
{part}
67+
</span>
68+
))}
69+
</p>
70+
) : (
71+
<p>{wallet.description}</p>
72+
)}
73+
<div className="text-gray-700 text-sm mt-3">
74+
<span className="cursor-pointer hover:underline" onClick={triggerEditAddress}>
75+
{address ? t("profile.wallets.address-change") : t("profile.wallets.address-set")}
76+
</span>
77+
</div>
78+
</div>
79+
) : (
80+
<div className="prose">
81+
<p
82+
dangerouslySetInnerHTML={{
83+
__html: t("profile.wallets.uncashable", {
84+
token: `${wallet.title}`,
85+
link: "https://discord.gg/5yDZvVnpQQ",
86+
}),
87+
}}
88+
/>
89+
</div>
90+
)}
91+
{cashable && (
92+
<div className="right-2 absolute bottom-2 mt-5">
93+
<ArrowButton disabled={!wallet.balance || !wallet.address || disabled} variant="outline-primary" minWidthClass="min-w-40" onClick={cashout}>
94+
{t("profile.wallets.cash-out")}
95+
</ArrowButton>
96+
</div>
97+
)}
98+
</div>
99+
);
100+
}

‎src/components/cards/wallet/Overview.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import Coin from "@/components/ui/Coin";
2+
import Tag from "@/components/ui/Tag";
3+
import Currency from "@/components/ui/Currency";
4+
import { Wallet } from "@/types/wallet";
5+
import { useTranslation } from "next-i18next";
6+
import { ReactElement } from "react";
7+
8+
interface OverviewProps {
9+
wallet: Wallet;
10+
testId?: string;
11+
}
12+
13+
/**
14+
* Wallet overview component
15+
*
16+
* @returns {ReactElement}
17+
*/
18+
export default function Overview({ wallet, testId = "overviewId" }: OverviewProps): ReactElement {
19+
const { t } = useTranslation();
20+
return (
21+
<div className="bg-secondary lg:w-60 md:w-60 sm:w-60 rounded-3.5xl" data-testid={testId}>
22+
<div className="p-6">
23+
<div className="border-b border-dotted border-gray-900">
24+
<h1 className="text-2xl">{wallet.title}</h1>
25+
<Tag value={wallet.token} />
26+
<div className="text-right mb-4">
27+
<Coin size="medium" token={wallet.token} />
28+
</div>
29+
</div>
30+
<div className="flex">
31+
<div className="w-1/2 pt-5 text-sm">
32+
<h1>{t("profile.wallets.balance")}</h1>
33+
</div>
34+
<div className="w-1/2 pt-3.5 text-right text-2xl font-medium">
35+
<h1>
36+
<Currency value={wallet.balance} />
37+
</h1>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
);
43+
}

‎src/components/cards/wallet/WalletHint.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Wallet } from "@/types/wallet";
2+
import Currency from "@/components/ui/Currency";
3+
import Hint from "@/components/ui/Hint";
4+
import { useTranslation } from "next-i18next";
5+
import { ReactElement } from "react";
6+
7+
interface WalletHintProps {
8+
wallet: Wallet;
9+
}
10+
11+
/**
12+
* Wallet hint component
13+
*
14+
* @returns {ReactElement}
15+
*/
16+
17+
export default function WalletHint({ wallet }: WalletHintProps): ReactElement {
18+
const { t } = useTranslation();
19+
return (
20+
<>
21+
{wallet.payouts.map((payout, i) => (
22+
<Hint key={`wallet-payout-${i}`} className="mt-2">
23+
<span className="font-medium">
24+
<Currency value={payout.amount} token={payout.token} />
25+
</span>{" "}
26+
{t("profile.wallet.payout.text")}
27+
</Hint>
28+
))}
29+
</>
30+
);
31+
}

‎src/components/cards/wallet/index.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { ReactElement, useCallback, useState } from "react";
2+
import EditAddress from "@/components/sections/profile/modals/EditAddress";
3+
import Payout from "@/components/sections/profile/modals/Payout";
4+
import { Wallet } from "@/types/wallet";
5+
import { toggleBodyScrolling } from "@/store/feature/ui.slice";
6+
import { useDispatch } from "@/hooks/useTypedDispatch";
7+
import CashoutAddress from "./CashoutAddress";
8+
import Overview from "./Overview";
9+
import WalletHint from "./WalletHint";
10+
11+
/**
12+
* Cards wallet props interface
13+
*/
14+
interface CardsWalletProps {
15+
wallet: Wallet;
16+
disabled?: boolean;
17+
testId?: string;
18+
}
19+
20+
/**
21+
* Cards wallet component
22+
*
23+
* @returns {ReactElement}
24+
*/
25+
26+
export default function CardsWallet({ wallet, disabled = false, testId = "cardWalletId" }: CardsWalletProps): ReactElement {
27+
const [showEditModal, setShowEditModal] = useState(false);
28+
const [showPayoutModal, setShowPayoutModal] = useState(false);
29+
const dispatch = useDispatch();
30+
31+
const onClose = useCallback(() => {
32+
setShowEditModal(false);
33+
setShowPayoutModal(false);
34+
dispatch(toggleBodyScrolling(false));
35+
}, [dispatch]);
36+
37+
return (
38+
<div className="relative mb-7" data-testid={testId}>
39+
<div className="relative lg:flex md:flex sm:flex rounded-3.5xl">
40+
{showEditModal && <EditAddress show={showEditModal} onClose={onClose} wallet={wallet} />}
41+
<Payout wallet={wallet} show={showPayoutModal} onClose={onClose} />
42+
<Overview wallet={wallet} />
43+
<CashoutAddress wallet={wallet} setShowEditModal={setShowEditModal} disabled={disabled} setShowPayoutModal={setShowPayoutModal} />
44+
</div>
45+
<WalletHint wallet={wallet} />
46+
</div>
47+
);
48+
}

‎src/pages/profile/wallets.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { fetchAllWallets } from "@/store/services/wallets.service";
66
import { GetStaticProps } from "next";
77

88
import EditProfile from "@/components/sections/profile/modals/EditProfile";
9-
import Wallet from "@/components/cards/Wallet";
9+
import Wallet from "@/components/cards/wallet";
1010
import Hint from "@/components/ui/Hint";
1111
import ProfileLayout from "@/layouts/ProfileLayout";
1212
import i18Translate from "@/utilities/I18Translate";

0 commit comments

Comments
 (0)