feat(nft-dashboard): add top up modal

altence · Feb 6, 2023 · b337d0f · b337d0f
1 parent fa6e28d
commit b337d0f
Show file tree

Hide file tree

Showing 38 changed files with 2,109 additions and 1,697 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "axios": "^0.24.0",
     "axios-mock-adapter": "^1.20.0",
     "country-list": "^2.2.0",
+    "credit-card-type": "^9.1.0",
     "dayjs": "^1.11.0",
     "echarts": "^5.1.2",
     "echarts-for-react": "^3.0.1",

diff --git a/src/api/earnings.api.ts b/src/api/earnings.api.ts
@@ -1,10 +1,10 @@
-import { CurrencyType } from '@app/interfaces/interfaces';
+import { CurrencyTypeEnum } from '@app/interfaces/interfaces';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 export interface Balance {
-  usd_balance: number;
-  eth_balance: number;
-  btc_balance: number;
+  USD: number;
+  ETH: number;
+  BTC: number;
 }
 
 export interface Earning {
@@ -15,29 +15,29 @@ export interface Earning {
 export interface TotalEarning {
   total: number;
   prevTotal: number;
-  currency: CurrencyType;
+  currency: CurrencyTypeEnum;
   timeline: Earning[];
 }
 
 export const getBalance = (id: number): Promise<Balance> => {
   return new Promise((res) => {
     setTimeout(() => {
       res({
-        usd_balance: 3040.51,
-        eth_balance: 1040.51,
-        btc_balance: 5373.51,
+        USD: 3040.51,
+        ETH: 1040.51,
+        BTC: 5373.51,
       });
     }, 0);
   });
 };
 
-export const getTotalEarning = (id: number, currency: CurrencyType): Promise<TotalEarning> => {
+export const getTotalEarning = (id: number, currency: CurrencyTypeEnum): Promise<TotalEarning> => {
   return new Promise((res) => {
     setTimeout(() => {
       res({
         total: 1520,
         prevTotal: 1320,
-        currency: 'USD',
+        currency: CurrencyTypeEnum.USD,
         timeline: [
           {
             date: Date.now() - 1000 * 60 * 60 * 24 * 7,

diff --git a/src/api/paymentCards.api.ts b/src/api/paymentCards.api.ts
@@ -0,0 +1,49 @@
+import { cardThemes } from '@app/constants/cardThemes';
+import { PaymentCard } from '@app/interfaces/interfaces';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getPaymentCards = (id: number): Promise<PaymentCard[]> =>
+  new Promise((res) =>
+    setTimeout(
+      () =>
+        res([
+          {
+            name: 'Dean James',
+            cvc: '144',
+            expiry: '11/24',
+            number: '4255 2003 0168 9006',
+            focused: '',
+            background: cardThemes[0].background,
+            isEdit: false,
+          },
+          {
+            name: 'Walker Alan',
+            cvc: '179',
+            expiry: '05/23',
+            number: '5245 0017 2000 0164',
+            focused: '',
+            background: cardThemes[3].background,
+            isEdit: false,
+          },
+          {
+            name: 'Jackson Michael',
+            cvc: '345',
+            expiry: '12/22',
+            number: '4255 1000 2046 8006',
+            focused: '',
+            background: cardThemes[5].background,
+            isEdit: false,
+          },
+          {
+            name: 'Christopher Johnson',
+            cvc: '222',
+            expiry: '09/24',
+            number: '5205 0024 2535 5235',
+            focused: '',
+            background: cardThemes[4].background,
+            isEdit: false,
+          },
+        ]),
+      1500,
+    ),
+  );
diff --git a/src/api/paymentHistory.api.ts b/src/api/paymentHistory.api.ts
@@ -1,12 +1,12 @@
-import { CurrencyType } from '@app/interfaces/interfaces';
+import { CurrencyTypeEnum } from '@app/interfaces/interfaces';
 
 export interface Payment {
   id: number;
   recipient: string;
   date: number;
   status: number;
   amount: number;
-  currency: CurrencyType;
+  currency: CurrencyTypeEnum;
   imgUrl: string;
 }
 
@@ -20,7 +20,7 @@ export const getPaymentHistory = (): Promise<Payment[]> => {
           date: 1626037200000,
           status: 1,
           amount: 500,
-          currency: 'USD',
+          currency: CurrencyTypeEnum.USD,
           imgUrl: 'https://res.cloudinary.com/lapkinthegod/image/upload/v1632988451/Ellipse_72_hwxejr.png',
         },
         {
@@ -29,7 +29,7 @@ export const getPaymentHistory = (): Promise<Payment[]> => {
           date: 1630443600000,
           status: 2,
           amount: 40,
-          currency: 'USD',
+          currency: CurrencyTypeEnum.USD,
           imgUrl: 'https://res.cloudinary.com/lapkinthegod/image/upload/v1632988456/Ellipse_73_zanfs3.png',
         },
         {
@@ -38,7 +38,7 @@ export const getPaymentHistory = (): Promise<Payment[]> => {
           date: 1628370000000,
           status: 3,
           amount: 1200,
-          currency: 'USD',
+          currency: CurrencyTypeEnum.USD,
           imgUrl: 'https://res.cloudinary.com/lapkinthegod/image/upload/v1632988460/Ellipse_73_1_hhfpzj.png',
         },
         {
@@ -47,7 +47,7 @@ export const getPaymentHistory = (): Promise<Payment[]> => {
           date: 1622667600000,
           status: 4,
           amount: 190,
-          currency: 'USD',
+          currency: CurrencyTypeEnum.USD,
           imgUrl: 'https://res.cloudinary.com/lapkinthegod/image/upload/v1632988451/Ellipse_72_hwxejr.png',
         },
       ]);

diff --git a/src/assets/images/card-issuers/maestro.png b/src/assets/images/card-issuers/maestro.png
diff --git a/src/assets/images/card-issuers/mastercard.png b/src/assets/images/card-issuers/mastercard.png
diff --git a/src/assets/images/card-issuers/visa.png b/src/assets/images/card-issuers/visa.png
diff --git a/src/components/nft-dashboard/Balance/Balance.styles.ts b/src/components/nft-dashboard/Balance/Balance.styles.ts
@@ -1,7 +1,6 @@
-import { Button } from '@app/components/common/buttons/Button/Button';
-import { FONT_FAMILY, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
 import { Typography } from 'antd';
-import styled, { css } from 'styled-components';
+import { FONT_FAMILY, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
+import styled from 'styled-components';
 
 export const TitleText = styled(Typography.Title)`
   &.ant-typography {
@@ -28,11 +27,3 @@ export const SubtitleBalanceText = styled(Typography.Text)`
 
   color: var(--text-nft-light-color);
 `;
-
-export const TopUpButton = styled(Button)`
-  ${(props) =>
-    props.type === 'ghost' &&
-    css`
-      color: var(--text-secondary-color);
-    `};
-`;
diff --git a/src/components/nft-dashboard/Balance/Balance.tsx b/src/components/nft-dashboard/Balance/Balance.tsx
@@ -2,27 +2,55 @@ import React, { useEffect, useState } from 'react';
 import { Col, Row } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard';
+import { TopUpBalanceModal } from './components/TopUpBalanceModal/TopUpBalanceModal';
+import { TopUpBalanceButton } from './components/TopUpBalanceButton/TopUpBalanceButton';
 import { useAppSelector } from '@app/hooks/reduxHooks';
 import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils';
-import { getBalance } from '@app/api/earnings.api';
+import { Balance as IBalance, getBalance } from '@app/api/earnings.api';
+import { CurrencyTypeEnum, PaymentCard } from '@app/interfaces/interfaces';
+import { getPaymentCards } from '@app/api/paymentCards.api';
+import { TopUpData } from './interfaces/interfaces';
 import * as S from './Balance.styles';
 
 export const Balance: React.FC = () => {
-  const [balance, setBalance] = useState({
-    usd_balance: 0,
-    eth_balance: 0,
-    btc_balance: 0,
+  const [balance, setBalance] = useState<IBalance>({
+    USD: 0,
+    ETH: 0,
+    BTC: 0,
   });
 
+  const [cards, setCards] = useState<PaymentCard[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [isModalVisible, setModalVisible] = useState(false);
+
   const userId = useAppSelector((state) => state.user.user?.id);
-  const { theme } = useAppSelector((state) => state.theme);
 
   useEffect(() => {
     userId && getBalance(userId).then((res) => setBalance(res));
   }, [userId]);
 
+  useEffect(() => {
+    if (userId) {
+      setLoading(true);
+      getPaymentCards(userId)
+        .then((res) => setCards(res))
+        .finally(() => setLoading(false));
+    }
+  }, [userId]);
+
   const { t } = useTranslation();
 
+  const handleModal = () => setModalVisible((visible) => !visible);
+
+  const onFinish = (values: TopUpData) => {
+    setLoading(true);
+    setTimeout(() => {
+      setBalance((balance) => ({ ...balance, [values.currency]: balance[values.currency] + values.amount }));
+      setLoading(false);
+      setModalVisible(false);
+    }, 1000);
+  };
+
   return (
     <Row>
       <Col span={24}>
@@ -36,21 +64,21 @@ export const Balance: React.FC = () => {
               <Row gutter={[14, 14]}>
                 <Col span={24}>
                   <S.TitleBalanceText level={3}>
-                    {getCurrencyPrice(formatNumberWithCommas(balance.usd_balance), 'USD')}
+                    {getCurrencyPrice(formatNumberWithCommas(balance.USD), CurrencyTypeEnum['USD'])}
                   </S.TitleBalanceText>
                 </Col>
 
                 <Col span={24}>
                   <Row gutter={[55, 10]} wrap={false}>
                     <Col>
                       <S.SubtitleBalanceText>
-                        {getCurrencyPrice(formatNumberWithCommas(balance.eth_balance), 'ETH')}
+                        {getCurrencyPrice(formatNumberWithCommas(balance.ETH), CurrencyTypeEnum['ETH'])}
                       </S.SubtitleBalanceText>
                     </Col>
 
                     <Col>
                       <S.SubtitleBalanceText>
-                        {getCurrencyPrice(formatNumberWithCommas(balance.btc_balance), 'BTC')}
+                        {getCurrencyPrice(formatNumberWithCommas(balance.BTC), CurrencyTypeEnum['BTC'])}
                       </S.SubtitleBalanceText>
                     </Col>
                   </Row>
@@ -59,9 +87,15 @@ export const Balance: React.FC = () => {
             </Col>
 
             <Col span={24}>
-              <S.TopUpButton type={theme === 'dark' ? 'ghost' : 'primary'} block>
-                {t('nft.topUpBalance')}
-              </S.TopUpButton>
+              <TopUpBalanceButton onClick={handleModal} />
+
+              <TopUpBalanceModal
+                cards={cards}
+                loading={loading}
+                isVisible={isModalVisible}
+                onVisibleChange={handleModal}
+                onFinish={onFinish}
+              />
             </Col>
           </Row>
         </NFTCard>

diff --git a/...mponents/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts b/...mponents/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts
@@ -0,0 +1,10 @@
+import { Button } from '@app/components/common/buttons/Button/Button';
+import styled, { css } from 'styled-components';
+
+export const TopUpButton = styled(Button)`
+  ${(props) =>
+    props.type === 'ghost' &&
+    css`
+      color: var(--text-secondary-color);
+    `};
+`;
diff --git a/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.tsx b/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAppSelector } from '@app/hooks/reduxHooks';
+import * as S from './TopUpBalanceButton.styles';
+
+export const TopUpBalanceButton: React.FC<{ onClick: () => void }> = ({ onClick }) => {
+  const { t } = useTranslation();
+  const { theme } = useAppSelector((state) => state.theme);
+
+  console.log(theme);
+
+  return (
+    <S.TopUpButton type={theme === 'dark' ? 'ghost' : 'primary'} block onClick={onClick}>
+      {t('nft.topUpBalance')}
+    </S.TopUpButton>
+  );
+};
diff --git a/src/components/nft-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.styles.ts b/src/components/nft-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.styles.ts
@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+import { RadioGroup } from '@app/components/common/Radio/Radio';
+import { Typography } from 'antd';
+import { FONT_SIZE } from '@app/styles/themes/constants';
+
+export const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+`;
+
+export const BlockWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+export const Label = styled(Typography.Text)`
+  color: var(--text-nft-light-color);
+  font-size: ${FONT_SIZE.xs};
+`;
+
+export const ButtonsWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  button {
+    width: calc(100% / 3 - 0.2rem);
+    margin: 0.2rem 0;
+  }
+`;
+
+export const PaymentRadio = styled(RadioGroup)`
+  display: block;
+
+  .ant-radio-wrapper {
+    display: flex;
+    margin-right: 0;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    gap: 2rem;
+
+    &::after {
+      display: none;
+    }
+
+    .ant-radio + span {
+      padding: 0;
+    }
+  }
+`;