diff --git a/src/components/layouts/main/sider/sidebarNavigation.tsx b/src/components/layouts/main/sider/sidebarNavigation.tsx index 3930882..fa18628 100644 --- a/src/components/layouts/main/sider/sidebarNavigation.tsx +++ b/src/components/layouts/main/sider/sidebarNavigation.tsx @@ -20,8 +20,8 @@ export const useSidebarNavigation = (): SidebarNavigationItem[] => { return useMemo(() => { const items: SidebarNavigationItem[] = [ { - title: 'common.nft-dashboard', - key: 'nft-dashboard', + title: 'common.relay-dashboard', + key: 'relay-dashboard', url: '/', icon: , }, diff --git a/src/components/nft-dashboard/activityStory/ActivityStory.tsx b/src/components/nft-dashboard/activityStory/ActivityStory.tsx deleted file mode 100644 index 43f45fd..0000000 --- a/src/components/nft-dashboard/activityStory/ActivityStory.tsx +++ /dev/null @@ -1,516 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import ActivityStoryItem from './ActivityStoryItem/ActivityStoryItem'; -import { getUserActivities, WalletTransaction } from '@app/api/activity.api'; -import * as S from './ActivityStory.styles'; -import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; -import { Modal } from 'antd'; -import { ViewTransactions } from '@app/components/nft-dashboard/common/ViewAll/ViewTransactions'; -import styled from 'styled-components'; -import { Line } from 'react-chartjs-2'; -import { BaseSkeleton } from '@app/components/common/BaseSkeleton/BaseSkeleton'; -import { ChartOptions } from 'chart.js'; -import { - Chart as ChartJS, - CategoryScale, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Legend, - Filler, -} from 'chart.js'; -import { TransactionCard } from './ActivityStoryItem/ActivityStoryItem.styles'; - -ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler); - -const TitleContainer = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; -`; - -export const ActivityStory: React.FC = () => { - const [story, setStory] = useState([]); - const [isModalVisible, setIsModalVisible] = useState(false); - const [isLoading, setIsLoading] = useState(true); - - const { t } = useTranslation(); - - useEffect(() => { - getUserActivities().then((res) => { - setStory(res); - setIsLoading(false); - }); - }, []); - - const activityContent = - story.length > 0 ? ( - story.map((item) => ( - - - - )) - ) : ( - {t('No transaction data')} - ); - - const showModal = () => { - setIsModalVisible(true); - }; - - const handleCancel = () => { - setIsModalVisible(false); - }; - - const TransactionSkeletons = () => { - return ( - <> - - - - - - - - - - - - ); - }; - const prepareChartData = () => { - const sortedStory = [...story].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()); - const labels = sortedStory.map((item) => new Date(item.date).toLocaleDateString()); - const amounts = sortedStory.map((item) => { - const amount = parseFloat(item.value); - return isNaN(amount) ? 0 : amount; - }); - - return { - labels, - datasets: [ - { - label: 'Transaction Amount', - data: amounts, - fill: true, - backgroundColor: (context: any) => { - const ctx = context.chart.ctx; - const gradient = ctx.createLinearGradient(0, 0, 0, 400); - gradient.addColorStop(0, 'rgba(75, 192, 192, 0.6)'); - gradient.addColorStop(1, 'rgba(75, 192, 192, 0.1)'); - return gradient; - }, - borderColor: 'rgba(75, 192, 192, 1)', - pointBackgroundColor: 'rgba(75, 192, 192, 1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(75, 192, 192, 1)', - tension: 0.4, - }, - ], - }; - }; - - const chartOptions: ChartOptions<'line'> = { - responsive: true, - maintainAspectRatio: false, - scales: { - y: { - beginAtZero: true, - title: { - display: true, - text: 'Amount', - font: { - size: 14, - weight: 'bold', - }, - color: 'rgba(255, 255, 255, 0.8)', // Lighter color for y-axis title - }, - ticks: { - font: { - size: 12, - }, - color: 'rgba(255, 255, 255, 0.6)', // Lighter color for y-axis ticks - }, - grid: { - color: 'rgba(255, 255, 255, 0.1)', // Lighter color for y-axis grid lines - }, - }, - x: { - title: { - display: true, - text: 'Date', - font: { - size: 14, - weight: 'bold', - }, - color: 'rgba(255, 255, 255, 0.8)', // Lighter color for x-axis title - }, - ticks: { - font: { - size: 12, - }, - color: 'rgba(255, 255, 255, 0.6)', // Lighter color for x-axis ticks - }, - grid: { - color: 'rgba(255, 255, 255, 0.1)', // Lighter color for x-axis grid lines - }, - }, - }, - plugins: { - legend: { - position: 'top' as const, - labels: { - font: { - size: 14, - }, - color: 'rgba(255, 255, 255, 0.8)', // Lighter color for legend labels - }, - }, - tooltip: { - // ... (keep the existing tooltip configuration) - }, - }, - animation: { - duration: 1000, - easing: 'easeInOutQuart', - }, - hover: { - mode: 'nearest' as const, - intersect: true, - }, - }; - - return ( - - - {t('nft.yourTransactions')} - - {t('nft.viewTransactions')} - - - - -
- -
- {isLoading ? : {activityContent}} - - {isLoading ? : {activityContent}} - - ); -}; - -// import React, { useEffect, useState } from 'react'; -// import { useTranslation } from 'react-i18next'; -// import ActivityStoryItem from './ActivityStoryItem/ActivityStoryItem'; -// import { getUserActivities, WalletTransaction } from '@app/api/activity.api'; -// import * as S from './ActivityStory.styles'; -// import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; -// import { Modal } from 'antd'; -// import { ViewTransactions } from '@app/components/nft-dashboard/common/ViewAll/ViewTransactions'; -// import styled from 'styled-components'; -// import { Line } from 'react-chartjs-2'; -// import { -// Chart as ChartJS, -// CategoryScale, -// LinearScale, -// PointElement, -// LineElement, -// Title, -// Tooltip, -// Legend, -// Filler, -// } from 'chart.js'; - -// ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler); - -// const TitleContainer = styled.div` -// display: flex; -// align-items: center; -// justify-content: space-between; -// width: 100%; -// `; - -// export const ActivityStory: React.FC = () => { -// const [story, setStory] = useState([]); -// const [isModalVisible, setIsModalVisible] = useState(false); - -// const { t } = useTranslation(); - -// useEffect(() => { -// getUserActivities().then((res) => setStory(res)); -// }, []); - -// const activityContent = -// story.length > 0 ? ( -// story.map((item) => ( -// -// -// -// )) -// ) : ( -// {t('No transaction data')} -// ); - -// const showModal = () => { -// setIsModalVisible(true); -// }; - -// const handleCancel = () => { -// setIsModalVisible(false); -// }; - -// const prepareChartData = () => { -// const labels = story.map(item => new Date(item.date).toLocaleDateString()); -// const amounts = story.map(item => { -// const amount = parseFloat(item.value); -// return isNaN(amount) ? 0 : amount; -// }); - -// return { -// labels, -// datasets: [ -// { -// label: 'Transaction Amount', -// data: amounts, -// fill: true, -// backgroundColor: 'rgba(75, 192, 192, 0.2)', -// borderColor: 'rgba(75, 192, 192, 1)', -// pointBackgroundColor: 'rgba(75, 192, 192, 1)', -// pointBorderColor: '#fff', -// pointHoverBackgroundColor: '#fff', -// pointHoverBorderColor: 'rgba(75, 192, 192, 1)', -// }, -// ], -// }; -// }; - -// const chartOptions = { -// responsive: true, -// maintainAspectRatio: false, -// scales: { -// y: { -// beginAtZero: true, -// title: { -// display: true, -// text: 'Amount', -// }, -// }, -// x: { -// title: { -// display: true, -// text: 'Date', -// }, -// }, -// }, -// plugins: { -// legend: { -// position: 'top' as const, -// }, -// tooltip: { -// callbacks: { -// label: (context: any) => { -// const value = context.raw; -// if (typeof value === 'number') { -// return value.toFixed(2); -// } else if (typeof value === 'string') { -// return value; -// } else { -// return 'N/A'; -// } -// }, -// }, -// }, -// }, -// }; - -// return ( -// -// -// {t('nft.yourTransactions')} -// -// {t('nft.viewTransactions')} -// -// - -// -//
-// -//
-// {activityContent} -// -// {activityContent} -// -// ); -// }; - -// import React, { useEffect, useMemo, useState } from 'react'; -// import { useTranslation } from 'react-i18next'; -// import ActivityStoryItem from './ActivityStoryItem/ActivityStoryItem'; -// import { WalletTransaction, getUserActivities } from '@app/api/activity.api'; -// import * as S from './ActivityStory.styles'; -// import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; -// import { Modal } from 'antd'; -// import { ViewTransactions } from '@app/components/nft-dashboard/common/ViewAll/ViewTransactions'; -// import styled from 'styled-components'; - -// const TitleContainer = styled.div` -// display: flex; -// align-items: center; -// justify-content: space-between; -// width: 100%; -// `; - -// export const ActivityStory: React.FC = () => { -// const [story, setStory] = useState([]); -// const [isModalVisible, setIsModalVisible] = useState(false); - -// const { t } = useTranslation(); - -// useEffect(() => { -// getUserActivities().then((res) => setStory(res)); -// }, []); - -// const activityStory = useMemo( -// () => -// story.map((item) => ( -// -// -// -// )), -// [story], -// ); - -// const showModal = () => { -// setIsModalVisible(true); -// }; - -// const handleCancel = () => { -// setIsModalVisible(false); -// }; - -// return ( -// -// -// {t('nft.yourTransactions')} -// -// {t('nft.viewTransactions')} -// -// - -// -// {activityStory} -// -// {activityStory} -// -// ); -// }; - -// import React, { useEffect, useMemo, useState } from 'react'; -// import { useTranslation } from 'react-i18next'; -// import ActivityStoryItem from './ActivityStoryItem/ActivityStoryItem'; -// import { WalletTransaction, getUserActivities } from '@app/api/activity.api'; -// import * as S from './ActivityStory.styles'; -// import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; -// import { Modal } from 'antd'; -// import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; -// import styled, { css } from 'styled-components'; - -// // Define TopUpButton with the desired styling -// export const TopUpButton = styled(BaseButton)` -// ${(props) => -// props.type === 'ghost' && -// css` -// color: var(--text-secondary-color); -// `}; -// `; - -// const TitleContainer = styled.div` -// display: flex; -// align-items: center; -// justify-content: space-between; -// width: 100%; -// `; - -// export const ActivityStory: React.FC = () => { -// const [story, setStory] = useState([]); -// const [isModalVisible, setIsModalVisible] = useState(false); - -// const { t } = useTranslation(); - -// useEffect(() => { -// getUserActivities().then((res) => setStory(res)); -// }, []); - -// const activityStory = useMemo( -// () => -// story.map((item) => ( -// -// -// -// )), -// [story], -// ); - -// const showModal = () => { -// setIsModalVisible(true); -// }; - -// const handleCancel = () => { -// setIsModalVisible(false); -// }; - -// return ( -// -// -// {t('nft.yourTransactions')} -// -// View Transactions -// -// - -// -// {activityStory} -// -// {activityStory} -// -// ); -// }; - -// import React, { useEffect, useMemo, useState } from 'react'; -// import { useTranslation } from 'react-i18next'; -// import ActivityStoryItem from './ActivityStoryItem/ActivityStoryItem'; -// import { WalletTransaction, getUserActivities } from '@app/api/activity.api'; -// import * as S from './ActivityStory.styles'; -// import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; - -// export const ActivityStory: React.FC = () => { -// const [story, setStory] = useState([]); - -// const { t } = useTranslation(); - -// useEffect(() => { -// getUserActivities().then((res) => setStory(res)); -// }, []); - -// const activityStory = useMemo( -// () => -// story.map((item) => ( -// -// -// -// )), -// [story], -// ); - -// return ( -// -// {t('nft.yourTransactions')} -// {activityStory} -// -// ); -// }; diff --git a/src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.tsx b/src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.tsx deleted file mode 100644 index 2c09cd1..0000000 --- a/src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, {useEffect, useState} from 'react'; -import { useTranslation } from 'react-i18next'; -import { WalletTransaction } from '@app/api/activity.api'; -import { Dates } from '@app/constants/Dates'; -import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils'; -import { CurrencyTypeEnum } from '@app/interfaces/interfaces'; -import * as S from './ActivityStoryItem.styles'; -import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; -import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; -function makeHexId(length: number): string { - const characters = 'abcdef0123456789'; - let result = ''; - for (let i = 0; i < length; i++) { - result += characters.charAt(Math.floor(Math.random() * characters.length)); - } - return result; -} - -export const ActivityStoryItem: React.FC = ({ witness_tx_id, date, output, value }) => { - const { t } = useTranslation(); - const [transactionId, setTransactionId] = useState(null); - - // Effect to initialize the transaction ID when the component mounts - useEffect(() => { - if (!witness_tx_id) { - setTransactionId(makeHexId(64)); - } - }, [witness_tx_id]); - - const numericValue = parseFloat(value); - - - - return ( - - - - {t('Witness Transaction ID')}: - {witness_tx_id ? witness_tx_id : transactionId} - - - {t('Output')}: - {output} - - - {t('Date')}: - {Dates.getDate(date).format('L LTS')} - - - {t('Value')}: - {getCurrencyPrice(formatNumberWithCommas(numericValue), CurrencyTypeEnum.USD)} - - - - ); -}; - -export default ActivityStoryItem; diff --git a/src/components/nft-dashboard/totalEarning/TotalEarning.tsx b/src/components/nft-dashboard/totalEarning/TotalEarning.tsx deleted file mode 100644 index 233c417..0000000 --- a/src/components/nft-dashboard/totalEarning/TotalEarning.tsx +++ /dev/null @@ -1,458 +0,0 @@ -import React, { useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; -import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'; -import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard'; -import { TotalEarningChart } from '@app/components/nft-dashboard/totalEarning/TotalEarningChart/TotalEarningChart'; -import { useAppSelector } from '@app/hooks/reduxHooks'; -import { Dates } from '@app/constants/Dates'; -import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils'; -import { CurrencyTypeEnum } from '@app/interfaces/interfaces'; -import * as S from './TotalEarning.styles'; -import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; -import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; -import { useBitcoinRates } from '@app/hooks/useBitcoinRates'; - -export const TotalEarning: React.FC = () => { - const { t } = useTranslation(); - const { rates: bitcoinRates, isLoading, error } = useBitcoinRates(); - - const { totalEarningData, days } = useMemo(() => { - const earningData = { - data: bitcoinRates.map((item) => item.usd_value), - }; - const daysData = bitcoinRates.map((item) => Dates.getDate(item.date).format('L LTS')); - - return { - totalEarningData: earningData, - days: daysData, - }; - }, [bitcoinRates]); - - const latestRate = bitcoinRates.length > 0 ? bitcoinRates[bitcoinRates.length - 1]?.usd_value : undefined; - const previousRate = bitcoinRates.length > 1 ? bitcoinRates[bitcoinRates.length - 2]?.usd_value : undefined; - const isIncreased = latestRate && previousRate ? latestRate > previousRate : false; - const rateDifference = latestRate && previousRate ? ((latestRate - previousRate) / previousRate) * 100 : 0; - - console.log(`latestRate: ${latestRate} previousRate: ${previousRate}`); - console.log(`Rate difference: ${rateDifference}`); - - if (isLoading) { - return
{t('common.loading')}
; - } - - if (error) { - return ( -
- {t('common.error')}: {error} -
- ); - } - - const formattedLatestRate = latestRate !== undefined ? parseFloat(latestRate.toFixed(0)) : 0; - return ( - - - - - - {t('nft.bitcoinPrice')} - - - - {isIncreased ? : } {rateDifference.toFixed(2)}% - - - - - - - {getCurrencyPrice(`${formatNumberWithCommas(formattedLatestRate)}`, CurrencyTypeEnum.USD)} - - - - - - - - - - - - ); -}; - -// import React, { useEffect, useMemo, useState } from 'react'; -// import { useTranslation } from 'react-i18next'; -// import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'; -// import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard'; -// import { TotalEarningChart } from '@app/components/nft-dashboard/totalEarning/TotalEarningChart/TotalEarningChart'; -// import { useAppSelector } from '@app/hooks/reduxHooks'; -// import { getTotalEarning, TotalEarning as ITotalEarning } from '@app/api/earnings.api'; -// import { Dates } from '@app/constants/Dates'; -// import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils'; -// import { CurrencyTypeEnum } from '@app/interfaces/interfaces'; -// import * as S from './TotalEarning.styles'; -// import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; -// import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; -// import { useBitcoinRates } from '@app/hooks/useBitcoinRates'; - -// export const TotalEarning: React.FC = () => { -// const { t } = useTranslation(); -// const [totalEarning, setTotalEarning] = useState(null); -// const { rates: bitcoinRates, isLoading, error } = useBitcoinRates(); - -// const userId = useAppSelector((state) => state.user.user?.id); - -// useEffect(() => { -// if (userId) { -// getTotalEarning(userId, CurrencyTypeEnum.USD).then((res) => setTotalEarning(res)); -// } -// }, [userId]); - -// const { totalEarningData, days } = useMemo(() => { -// const earningData = { -// data: bitcoinRates.map((item) => item.usd_value), -// }; -// const daysData = bitcoinRates.map((item) => Dates.getDate(item.date).format('L LTS')); - -// return { -// totalEarningData: earningData, -// days: daysData, -// }; -// }, [bitcoinRates]); - -// const latestRate = bitcoinRates[bitcoinRates.length - 1]?.usd_value; -// const previousRate = bitcoinRates[bitcoinRates.length - 2]?.usd_value; -// const isIncreased = latestRate > previousRate; -// const rateDifference = latestRate && previousRate ? ((latestRate - previousRate) / previousRate) * 100 : 0; - -// if (isLoading) { -// return
{t('common.loading')}
; -// } - -// if (error) { -// return
{t('common.error')}: {error}
; -// } - -// return ( -// -// -// {t('nft.bitcoinPrice')} -// -// -// -// -// -// -// -// {t('nft.bitcoinPrice')} -// -// -// -// {isIncreased ? : }{' '} -// {totalEarning && `${rateDifference.toFixed(2)}%`} -// -// -// -// -// -// -// -// {getCurrencyPrice(formatNumberWithCommas(latestRate ?? 0), CurrencyTypeEnum.USD)} -// -// -// -// -// -// -// -// -// -// -// ); -// }; - -// import React, { useEffect, useMemo, useState } from 'react'; -// import { useTranslation } from 'react-i18next'; -// import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'; -// import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard'; -// import { TotalEarningChart } from '@app/components/nft-dashboard/totalEarning/TotalEarningChart/TotalEarningChart'; -// import { useAppSelector } from '@app/hooks/reduxHooks'; -// import { -// getTotalEarning, -// getBitcoinRatesForLast30Days, -// TotalEarning as ITotalEarning, -// Earning, -// } from '@app/api/earnings.api'; -// import { Dates } from '@app/constants/Dates'; -// import { formatNumberWithCommas, getCurrencyPrice, getDifference } from '@app/utils/utils'; -// import { CurrencyTypeEnum } from '@app/interfaces/interfaces'; -// import * as S from './TotalEarning.styles'; -// import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; -// import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; - -// export const TotalEarning: React.FC = () => { -// const [totalEarning, setTotalEarning] = useState(null); -// const [bitcoinRates, setBitcoinRates] = useState([]); - -// const userId = useAppSelector((state) => state.user.user?.id); - -// const { t } = useTranslation(); - -// useEffect(() => { -// if (userId) { -// getTotalEarning(userId, CurrencyTypeEnum.USD).then((res) => setTotalEarning(res)); -// getBitcoinRatesForLast30Days().then((res) => { -// console.log('Bitcoin rates:', res); -// setBitcoinRates(res); -// }); -// } -// }, [userId]); - -// const { totalEarningData, days } = useMemo(() => { -// const earningData = { -// data: bitcoinRates.map((item) => item.usd_value), -// }; -// const daysData = bitcoinRates.map((item) => Dates.getDate(item.date).format('L LTS')); // Include time - -// console.log('Chart data:', earningData); -// console.log('Days:', daysData); - -// return { -// totalEarningData: earningData, -// days: daysData, -// }; -// }, [bitcoinRates]); - -// // Determine if the current Bitcoin rate has increased compared to the previous rate -// const latestRate = bitcoinRates[bitcoinRates.length - 1]?.usd_value; -// const previousRate = bitcoinRates[bitcoinRates.length - 2]?.usd_value; -// const isIncreased = latestRate > previousRate; -// const rateDifference = latestRate && previousRate ? ((latestRate - previousRate) / previousRate) * 100 : 0; - -// console.log(`latestRate: ${latestRate} previousRate: ${previousRate}`); -// console.log(`Rate difference: ${rateDifference}`); - -// return ( -// -// -// -// -// -// {t('nft.bitcoinPrice')} -// - -// -// -// {isIncreased ? : }{' '} -// {totalEarning && `${rateDifference.toFixed(2)}%`} -// -// -// -// - -// -// {getCurrencyPrice(formatNumberWithCommas(latestRate ?? 0), CurrencyTypeEnum.USD)} -// - -// -// -// -// -// -// -// -// -// -// ); -// }; - -// import React, { useEffect, useMemo, useState } from 'react'; -// import { useTranslation } from 'react-i18next'; -// import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'; -// import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard'; -// import { TotalEarningChart } from '@app/components/nft-dashboard/totalEarning/TotalEarningChart/TotalEarningChart'; -// import { useAppSelector } from '@app/hooks/reduxHooks'; -// import { -// getTotalEarning, -// getBitcoinRatesForLast30Days, -// TotalEarning as ITotalEarning, -// Earning, -// } from '@app/api/earnings.api'; -// import { Dates } from '@app/constants/Dates'; -// import { formatNumberWithCommas, getCurrencyPrice, getDifference } from '@app/utils/utils'; -// import { CurrencyTypeEnum } from '@app/interfaces/interfaces'; -// import * as S from './TotalEarning.styles'; -// import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; -// import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; - -// export const TotalEarning: React.FC = () => { -// const [totalEarning, setTotalEarning] = useState(null); -// const [bitcoinRates, setBitcoinRates] = useState([]); - -// const userId = useAppSelector((state) => state.user.user?.id); - -// const { t } = useTranslation(); - -// useEffect(() => { -// if (userId) { -// getTotalEarning(userId, CurrencyTypeEnum.USD).then((res) => setTotalEarning(res)); -// getBitcoinRatesForLast30Days().then((res) => { -// console.log('Bitcoin rates:', res); -// setBitcoinRates(res); -// }); -// } -// }, [userId]); - -// const { totalEarningData, days } = useMemo(() => { -// const earningData = { -// data: bitcoinRates.map((item) => item.usd_value), -// }; -// const daysData = bitcoinRates.map((item) => Dates.getDate(item.date).format('L LTS')); // Include time - -// console.log('Chart data:', earningData); -// console.log('Days:', daysData); - -// return { -// totalEarningData: earningData, -// days: daysData, -// }; -// }, [bitcoinRates]); - -// // Determine if the current Bitcoin rate has increased compared to the previous rate -// const latestRate = bitcoinRates[bitcoinRates.length - 1]?.usd_value; -// const previousRate = bitcoinRates[bitcoinRates.length - 2]?.usd_value; -// const isIncreased = latestRate > previousRate; -// const rateDifference = latestRate && previousRate ? ((latestRate - previousRate) / previousRate) * 100 : 0; - -// console.log(`latestRate: ${latestRate} previousRate: ${previousRate}`); -// console.log(`Rate difference: ${rateDifference}`); - -// return ( -// -// -// -// -// -// {t('nft.bitcoinPrice')} -// - -// -// -// {isIncreased ? : }{' '} -// {totalEarning && `${rateDifference.toFixed(2)}%`} -// -// -// -// - -// -// -// -// {getCurrencyPrice(formatNumberWithCommas(latestRate ?? 0), CurrencyTypeEnum.USD)} -// - -// -// -// -// -// -// -// -// ); -// }; - -// import React, { useEffect, useMemo, useState } from 'react'; -// import { useTranslation } from 'react-i18next'; -// import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'; -// import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard'; -// import { TotalEarningChart } from '@app/components/nft-dashboard/totalEarning/TotalEarningChart/TotalEarningChart'; -// import { useAppSelector } from '@app/hooks/reduxHooks'; -// import { -// getTotalEarning, -// getBitcoinRatesForLast30Days, -// TotalEarning as ITotalEarning, -// Earning, -// } from '@app/api/earnings.api'; -// import { Dates } from '@app/constants/Dates'; -// import { formatNumberWithCommas, getCurrencyPrice, getDifference } from '@app/utils/utils'; -// import { CurrencyTypeEnum } from '@app/interfaces/interfaces'; -// import * as S from './TotalEarning.styles'; -// import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; -// import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; - -// export const TotalEarning: React.FC = () => { -// const [totalEarning, setTotalEarning] = useState(null); -// const [bitcoinRates, setBitcoinRates] = useState([]); - -// const userId = useAppSelector((state) => state.user.user?.id); - -// const { t } = useTranslation(); - -// useEffect(() => { -// if (userId) { -// getTotalEarning(userId, CurrencyTypeEnum.USD).then((res) => setTotalEarning(res)); -// getBitcoinRatesForLast30Days().then((res) => { -// console.log('Bitcoin rates:', res); -// setBitcoinRates(res); -// }); -// } -// }, [userId]); - -// const { totalEarningData, days } = useMemo(() => { -// const earningData = { -// data: bitcoinRates.map((item) => item.usd_value), -// }; -// const daysData = bitcoinRates.map((item) => Dates.getDate(item.date).format('L LTS')); // Include time - -// console.log('Chart data:', earningData); -// console.log('Days:', daysData); - -// return { -// totalEarningData: earningData, -// days: daysData, -// }; -// }, [bitcoinRates]); - -// // Determine if the current Bitcoin rate has increased compared to the previous rate -// const latestRate = bitcoinRates[bitcoinRates.length - 1]?.usd_value; -// const previousRate = bitcoinRates[bitcoinRates.length - 2]?.usd_value; -// const isIncreased = latestRate > previousRate; -// const rateDifference = latestRate && previousRate ? ((latestRate - previousRate) / previousRate) * 100 : 0; - -// console.log(`latestRate: ${latestRate} previousRate: ${previousRate}`); -// console.log(`Rate difference: ${rateDifference}`); - -// return ( -// -// -// -// -// -// {t('nft.bitcoinPrice')} -// - -// -// -// {isIncreased ? : }{' '} -// {totalEarning && `${rateDifference.toFixed(2)}%`} -// -// -// -// - -// -// -// -// {getCurrencyPrice(formatNumberWithCommas(latestRate ?? 0), CurrencyTypeEnum.USD)} -// - -// -// -// -// -// -// -// -// ); -// }; diff --git a/src/components/nft-dashboard/totalEarning/TotalEarningChart/TotalEarningChart.tsx b/src/components/nft-dashboard/totalEarning/TotalEarningChart/TotalEarningChart.tsx deleted file mode 100644 index fe18887..0000000 --- a/src/components/nft-dashboard/totalEarning/TotalEarningChart/TotalEarningChart.tsx +++ /dev/null @@ -1,282 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import { BaseChart, getDefaultTooltipStyles } from '@app/components/common/charts/BaseChart'; -import { useAppSelector } from '@app/hooks/reduxHooks'; -import { themeObject } from '@app/styles/themes/themeVariables'; -import { ChartData, CurrencyTypeEnum } from '@app/interfaces/interfaces'; -import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils'; -// import { formatDate } from '@app/utils/dateFormatter'; - -interface LineData { - data: ChartData; -} - -interface TotalEarningChartProps { - xAxisData: number[] | string[]; - earningData: LineData; -} - -export const TotalEarningChart: React.FC = ({ xAxisData, earningData }) => { - const theme = useAppSelector((state) => state.theme.theme); - const { t } = useTranslation(); - - console.log('xAxisData:', xAxisData); - console.log('earningData:', earningData); - - const minYValue = Math.min(...earningData.data); - const maxYValue = Math.max(...earningData.data); - - const roundDown = (value: number, interval: number) => Math.floor(value / interval) * interval; - const roundUp = (value: number, interval: number) => Math.ceil(value / interval) * interval; - - const interval = 1000; - const minY = roundDown(minYValue * 0.99, interval); - const maxY = roundUp(maxYValue * 1.01, interval); - - const yAxisTickInterval = (maxY - minY) / 5; - - const seriesList = [ - { - name: t('nft.earnings'), - type: 'line', - data: earningData.data.map((value, index) => [xAxisData[index], value]), - showSymbol: true, - symbolSize: 4, - smooth: false, - lineStyle: { - width: 2, - color: themeObject[theme].chartColor3, - }, - emphasis: { - focus: 'series', - }, - encode: { - x: 'date', - y: 'usd_value', - label: ['date', 'usd_value'], - itemName: 'date', - tooltip: ['usd_value'], - }, - }, - ]; - - const option = { - tooltip: { - ...getDefaultTooltipStyles(themeObject[theme]), - trigger: 'axis', - confine: true, - formatter: (data: any) => { - const currentSeries = data[0]; - const roundedValue = Math.round(currentSeries.value[1]); // Round to nearest dollar - return `${currentSeries.name} - ${getCurrencyPrice( - formatNumberWithCommas(roundedValue), - CurrencyTypeEnum.USD, - )}`; - }, - }, - grid: { - top: 20, - left: 60, - right: 20, - bottom: 30, - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: xAxisData, - axisLine: { - lineStyle: { - color: themeObject[theme].chartAxisLabel, - }, - }, - axisLabel: { - show: false, - }, - axisTick: { - show: false, - }, - }, - yAxis: { - type: 'value', - min: minY, - max: maxY, - interval: yAxisTickInterval, // Ensure even spacing - axisLine: { - lineStyle: { - color: themeObject[theme].chartAxisLabel, - }, - }, - splitLine: { - lineStyle: { - color: '#444', - }, - }, - axisLabel: { - formatter: (value: number) => `$${formatNumberWithCommas(value)}`, - color: themeObject[theme].chartAxisLabel, - fontSize: 13, - fontFamily: 'Arial', - }, - }, - series: seriesList, - }; - - return ; -}; - -// import React from 'react'; -// import { useTranslation } from 'react-i18next'; -// import { BaseChart, getDefaultTooltipStyles } from '@app/components/common/charts/BaseChart'; -// import { useAppSelector } from '@app/hooks/reduxHooks'; -// import { themeObject } from '@app/styles/themes/themeVariables'; -// import { ChartData, CurrencyTypeEnum } from '@app/interfaces/interfaces'; -// import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils'; -// import { formatDate } from '@app/utils/dateFormatter'; // Import the date formatter - -// interface LineData { -// data: ChartData; -// } - -// interface TotalEarningChartProps { -// xAxisData: number[] | string[]; -// earningData: LineData; -// } - -// export const TotalEarningChart: React.FC = ({ xAxisData, earningData }) => { -// const theme = useAppSelector((state) => state.theme.theme); -// const { t } = useTranslation(); - -// const seriesList = [ -// { -// name: t('nft.earnings'), -// type: 'line', -// data: earningData.data.map((value, index) => [xAxisData[index], value]), -// showSymbol: false, -// smooth: false, // Reduce or disable smoothing -// lineStyle: { -// width: 2, -// }, -// }, -// ]; - -// const option = { -// tooltip: { -// ...getDefaultTooltipStyles(themeObject[theme]), -// trigger: 'axis', -// formatter: (data: any) => { -// const currentSeries = data[0]; -// return `${currentSeries.name} - ${getCurrencyPrice( -// formatNumberWithCommas(currentSeries.value[1]), -// CurrencyTypeEnum.USD, -// )}`; -// }, -// }, -// grid: { -// top: 10, -// left: 10, -// right: 10, -// bottom: 10, -// }, -// xAxis: { -// type: 'category', -// boundaryGap: false, -// data: xAxisData, -// axisLabel: { -// formatter: (value: string, index: number) => { -// return formatDate(parseInt(value)); // Format the date using the utility function -// } -// } -// }, -// yAxis: { -// type: 'value', -// axisLine: { -// show: true, -// }, -// axisTick: { -// show: true, -// }, -// }, -// series: seriesList, -// }; - -// return ; -// }; - -// import React from 'react'; -// import { useTranslation } from 'react-i18next'; -// import { BaseChart, getDefaultTooltipStyles } from '@app/components/common/charts/BaseChart'; -// import { useAppSelector } from '@app/hooks/reduxHooks'; -// import { themeObject } from '@app/styles/themes/themeVariables'; -// import { ChartData, CurrencyTypeEnum } from '@app/interfaces/interfaces'; -// import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils'; - -// interface LineData { -// data: ChartData; -// } - -// interface TotalEarningChartProps { -// xAxisData: number[] | string[]; -// earningData: LineData; -// } - -// export const TotalEarningChart: React.FC = ({ xAxisData, earningData }) => { -// const theme = useAppSelector((state) => state.theme.theme); -// const { t } = useTranslation(); - -// const seriesList = [ -// { -// name: t('nft.earnings'), -// type: 'line', -// data: earningData.data.map((value, index) => [xAxisData[index], value]), -// showSymbol: false, -// smooth:false, -// lineStyle: { -// width: 2, -// color: themeObject[theme].chartColor3, -// }, -// emphasis: { -// focus: 'series', -// }, -// encode: { -// x: 'date', -// y: 'usd_value', -// label: ['date', 'usd_value'], -// itemName: 'date', -// tooltip: ['usd_value'], -// }, -// }, -// ]; - -// const option = { -// tooltip: { -// ...getDefaultTooltipStyles(themeObject[theme]), -// trigger: 'axis', -// formatter: (data: any) => { -// const currentSeries = data[0]; -// return `${currentSeries.name} - ${getCurrencyPrice( -// formatNumberWithCommas(currentSeries.value[1]), -// CurrencyTypeEnum.USD, -// )}`; -// }, -// }, -// grid: { -// top: 0, -// left: 0, -// right: 0, -// bottom: 0, -// }, -// xAxis: { -// type: 'category', -// boundaryGap: true, -// data: xAxisData, -// show: false, // Hide x-axis -// }, -// yAxis: { -// type: 'value', -// show: false, // Hide y-axis -// }, -// series: seriesList, -// }; - -// return ; -// }; diff --git a/src/components/nft-dashboard/Balance/Balance.styles.ts b/src/components/relay-dashboard/Balance/Balance.styles.ts similarity index 100% rename from src/components/nft-dashboard/Balance/Balance.styles.ts rename to src/components/relay-dashboard/Balance/Balance.styles.ts diff --git a/src/components/nft-dashboard/Balance/Balance.tsx b/src/components/relay-dashboard/Balance/Balance.tsx similarity index 97% rename from src/components/nft-dashboard/Balance/Balance.tsx rename to src/components/relay-dashboard/Balance/Balance.tsx index 4adbbe6..685a9fb 100644 --- a/src/components/nft-dashboard/Balance/Balance.tsx +++ b/src/components/relay-dashboard/Balance/Balance.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard'; +import { NFTCard } from '@app/components/relay-dashboard/common/NFTCard/NFTCard'; import { TopUpBalanceButton } from './components/TopUpBalanceButton/TopUpBalanceButton'; import { useAppSelector } from '@app/hooks/reduxHooks'; import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils'; @@ -83,7 +83,7 @@ export const Balance: React.FC = () => { // import React, { useEffect, useState } from 'react'; // import { useTranslation } from 'react-i18next'; -// import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard'; +// import { NFTCard } from '@app/components/relay-dashboard/common/NFTCard/NFTCard'; // import { TopUpBalanceButton } from './components/TopUpBalanceButton/TopUpBalanceButton'; // import { useAppSelector } from '@app/hooks/reduxHooks'; // import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils'; diff --git a/src/components/nft-dashboard/Balance/components/AddressList/AddressList.tsx b/src/components/relay-dashboard/Balance/components/AddressList/AddressList.tsx similarity index 100% rename from src/components/nft-dashboard/Balance/components/AddressList/AddressList.tsx rename to src/components/relay-dashboard/Balance/components/AddressList/AddressList.tsx diff --git a/src/components/nft-dashboard/Balance/components/SendButton/SendButton.tsx b/src/components/relay-dashboard/Balance/components/SendButton/SendButton.tsx similarity index 100% rename from src/components/nft-dashboard/Balance/components/SendButton/SendButton.tsx rename to src/components/relay-dashboard/Balance/components/SendButton/SendButton.tsx diff --git a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.styles.ts b/src/components/relay-dashboard/Balance/components/SendForm/SendForm.styles.ts similarity index 100% rename from src/components/nft-dashboard/Balance/components/SendForm/SendForm.styles.ts rename to src/components/relay-dashboard/Balance/components/SendForm/SendForm.styles.ts diff --git a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx b/src/components/relay-dashboard/Balance/components/SendForm/SendForm.tsx similarity index 100% rename from src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx rename to src/components/relay-dashboard/Balance/components/SendForm/SendForm.tsx diff --git a/src/components/nft-dashboard/Balance/components/SendForm/components/ResultScreen.styles.ts b/src/components/relay-dashboard/Balance/components/SendForm/components/ResultScreen.styles.ts similarity index 100% rename from src/components/nft-dashboard/Balance/components/SendForm/components/ResultScreen.styles.ts rename to src/components/relay-dashboard/Balance/components/SendForm/components/ResultScreen.styles.ts diff --git a/src/components/nft-dashboard/Balance/components/SendForm/components/ResultScreen.tsx b/src/components/relay-dashboard/Balance/components/SendForm/components/ResultScreen.tsx similarity index 100% rename from src/components/nft-dashboard/Balance/components/SendForm/components/ResultScreen.tsx rename to src/components/relay-dashboard/Balance/components/SendForm/components/ResultScreen.tsx diff --git a/src/components/nft-dashboard/Balance/components/SendModal/SendModal.styles.ts b/src/components/relay-dashboard/Balance/components/SendModal/SendModal.styles.ts similarity index 100% rename from src/components/nft-dashboard/Balance/components/SendModal/SendModal.styles.ts rename to src/components/relay-dashboard/Balance/components/SendModal/SendModal.styles.ts diff --git a/src/components/nft-dashboard/Balance/components/SendModal/SendModal.tsx b/src/components/relay-dashboard/Balance/components/SendModal/SendModal.tsx similarity index 100% rename from src/components/nft-dashboard/Balance/components/SendModal/SendModal.tsx rename to src/components/relay-dashboard/Balance/components/SendModal/SendModal.tsx diff --git a/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts b/src/components/relay-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts similarity index 100% rename from src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts rename to src/components/relay-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts diff --git a/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.tsx b/src/components/relay-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.tsx similarity index 100% rename from src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.tsx rename to src/components/relay-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.tsx diff --git a/src/components/nft-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.styles.ts b/src/components/relay-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.styles.ts similarity index 100% rename from src/components/nft-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.styles.ts rename to src/components/relay-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.styles.ts diff --git a/src/components/nft-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.tsx b/src/components/relay-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.tsx similarity index 98% rename from src/components/nft-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.tsx rename to src/components/relay-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.tsx index a17279f..390d42d 100644 --- a/src/components/nft-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.tsx +++ b/src/components/relay-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.tsx @@ -10,7 +10,7 @@ import { TopUpPaymentCard } from '../TopUpPaymentCard/TopUpPaymentCard'; import { getCurrencyPrice, getPaymentCardTypeIcon } from '@app/utils/utils'; import { CurrencyTypeEnum } from '@app/interfaces/interfaces'; import { TopUpDataProps } from '../../interfaces/interfaces'; -import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard'; +import { NFTCard } from '@app/components/relay-dashboard/common/NFTCard/NFTCard'; import * as S from './TopUpBalanceForm.styles'; const usdAmounts: (string | number)[] = [5, 10, 15, 20, 25, 50]; diff --git a/src/components/nft-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx b/src/components/relay-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx similarity index 100% rename from src/components/nft-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx rename to src/components/relay-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx diff --git a/src/components/nft-dashboard/Balance/components/TopUpPaymentCard/TopUpPaymentCard.styles.ts b/src/components/relay-dashboard/Balance/components/TopUpPaymentCard/TopUpPaymentCard.styles.ts similarity index 100% rename from src/components/nft-dashboard/Balance/components/TopUpPaymentCard/TopUpPaymentCard.styles.ts rename to src/components/relay-dashboard/Balance/components/TopUpPaymentCard/TopUpPaymentCard.styles.ts diff --git a/src/components/nft-dashboard/Balance/components/TopUpPaymentCard/TopUpPaymentCard.tsx b/src/components/relay-dashboard/Balance/components/TopUpPaymentCard/TopUpPaymentCard.tsx similarity index 100% rename from src/components/nft-dashboard/Balance/components/TopUpPaymentCard/TopUpPaymentCard.tsx rename to src/components/relay-dashboard/Balance/components/TopUpPaymentCard/TopUpPaymentCard.tsx diff --git a/src/components/nft-dashboard/Balance/interfaces/interfaces.ts b/src/components/relay-dashboard/Balance/interfaces/interfaces.ts similarity index 100% rename from src/components/nft-dashboard/Balance/interfaces/interfaces.ts rename to src/components/relay-dashboard/Balance/interfaces/interfaces.ts diff --git a/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts b/src/components/relay-dashboard/common/NFTCard/NFTCard.styles.ts similarity index 100% rename from src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts rename to src/components/relay-dashboard/common/NFTCard/NFTCard.styles.ts diff --git a/src/components/nft-dashboard/common/NFTCard/NFTCard.tsx b/src/components/relay-dashboard/common/NFTCard/NFTCard.tsx similarity index 100% rename from src/components/nft-dashboard/common/NFTCard/NFTCard.tsx rename to src/components/relay-dashboard/common/NFTCard/NFTCard.tsx diff --git a/src/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader.styles.ts b/src/components/relay-dashboard/common/NFTCardHeader/NFTCardHeader.styles.ts similarity index 100% rename from src/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader.styles.ts rename to src/components/relay-dashboard/common/NFTCardHeader/NFTCardHeader.styles.ts diff --git a/src/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader.tsx b/src/components/relay-dashboard/common/NFTCardHeader/NFTCardHeader.tsx similarity index 100% rename from src/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader.tsx rename to src/components/relay-dashboard/common/NFTCardHeader/NFTCardHeader.tsx diff --git a/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts b/src/components/relay-dashboard/common/ViewAll/ViewAll.styles.ts similarity index 100% rename from src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts rename to src/components/relay-dashboard/common/ViewAll/ViewAll.styles.ts diff --git a/src/components/nft-dashboard/common/ViewAll/ViewAll.tsx b/src/components/relay-dashboard/common/ViewAll/ViewAll.tsx similarity index 100% rename from src/components/nft-dashboard/common/ViewAll/ViewAll.tsx rename to src/components/relay-dashboard/common/ViewAll/ViewAll.tsx diff --git a/src/components/nft-dashboard/common/ViewAll/ViewTransactions.tsx b/src/components/relay-dashboard/common/ViewAll/ViewTransactions.tsx similarity index 100% rename from src/components/nft-dashboard/common/ViewAll/ViewTransactions.tsx rename to src/components/relay-dashboard/common/ViewAll/ViewTransactions.tsx diff --git a/src/components/nft-dashboard/recentActivity/RecentActivity.styles.ts b/src/components/relay-dashboard/recentActivity/RecentActivity.styles.ts similarity index 100% rename from src/components/nft-dashboard/recentActivity/RecentActivity.styles.ts rename to src/components/relay-dashboard/recentActivity/RecentActivity.styles.ts diff --git a/src/components/nft-dashboard/recentActivity/RecentActivity.tsx b/src/components/relay-dashboard/recentActivity/RecentActivity.tsx similarity index 82% rename from src/components/nft-dashboard/recentActivity/RecentActivity.tsx rename to src/components/relay-dashboard/recentActivity/RecentActivity.tsx index ffda36d..7b472c3 100644 --- a/src/components/nft-dashboard/recentActivity/RecentActivity.tsx +++ b/src/components/relay-dashboard/recentActivity/RecentActivity.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; -import { RecentActivityHeader } from '@app/components/nft-dashboard/recentActivity/RecentActivityHeader/RecentActivityHeader'; -import { RecentActivityFeed } from '@app/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityFeed'; -import { RecentActivityFilter } from '@app/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter'; +import { RecentActivityHeader } from '@app/components/relay-dashboard/recentActivity/RecentActivityHeader/RecentActivityHeader'; +import { RecentActivityFeed } from '@app/components/relay-dashboard/recentActivity/recentActivityFeed/RecentActivityFeed'; +import { RecentActivityFilter } from '@app/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter'; import { useResponsive } from '@app/hooks/useResponsive'; import { Activity, getActivities } from '@app/api/activity.api'; import * as S from './RecentActivity.styles'; diff --git a/src/components/nft-dashboard/recentActivity/RecentActivityHeader/RecentActivityHeader.tsx b/src/components/relay-dashboard/recentActivity/RecentActivityHeader/RecentActivityHeader.tsx similarity index 78% rename from src/components/nft-dashboard/recentActivity/RecentActivityHeader/RecentActivityHeader.tsx rename to src/components/relay-dashboard/recentActivity/RecentActivityHeader/RecentActivityHeader.tsx index e66b268..73baafe 100644 --- a/src/components/nft-dashboard/recentActivity/RecentActivityHeader/RecentActivityHeader.tsx +++ b/src/components/relay-dashboard/recentActivity/RecentActivityHeader/RecentActivityHeader.tsx @@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; import { FilterIcon } from '@app/components/common/icons/FilterIcon'; import { BaseModal } from '@app/components/common/BaseModal/BaseModal'; -import { NFTCardHeader } from '@app/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader'; -import { RecentActivityFilter } from '@app/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter'; -import { RecentActivityFilterState } from '@app/components/nft-dashboard/recentActivity/RecentActivity'; +import { NFTCardHeader } from '@app/components/relay-dashboard/common/NFTCardHeader/NFTCardHeader'; +import { RecentActivityFilter } from '@app/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter'; +import { RecentActivityFilterState } from '@app/components/relay-dashboard/recentActivity/RecentActivity'; import { useResponsive } from '@app/hooks/useResponsive'; interface RecentActivityHeaderProps { diff --git a/src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityFeed.styles.ts b/src/components/relay-dashboard/recentActivity/recentActivityFeed/RecentActivityFeed.styles.ts similarity index 100% rename from src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityFeed.styles.ts rename to src/components/relay-dashboard/recentActivity/recentActivityFeed/RecentActivityFeed.styles.ts diff --git a/src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityFeed.tsx b/src/components/relay-dashboard/recentActivity/recentActivityFeed/RecentActivityFeed.tsx similarity index 88% rename from src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityFeed.tsx rename to src/components/relay-dashboard/recentActivity/recentActivityFeed/RecentActivityFeed.tsx index 0ecfda5..1338c68 100644 --- a/src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityFeed.tsx +++ b/src/components/relay-dashboard/recentActivity/recentActivityFeed/RecentActivityFeed.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useMemo, useRef } from 'react'; import { BaseFeed } from '@app/components/common/BaseFeed/BaseFeed'; import { NotFound } from '@app/components/common/NotFound/NotFound'; -import { RecentActivityItem } from '@app/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem'; +import { RecentActivityItem } from '@app/components/relay-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem'; import { Activity } from '@app/api/activity.api'; import * as S from './RecentActivityFeed.styles'; diff --git a/src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.styles.ts b/src/components/relay-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.styles.ts similarity index 95% rename from src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.styles.ts rename to src/components/relay-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.styles.ts index 36e4563..cc76a0c 100644 --- a/src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.styles.ts +++ b/src/components/relay-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.styles.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard'; +import { NFTCard } from '@app/components/relay-dashboard/common/NFTCard/NFTCard'; import { FONT_SIZE, media, FONT_FAMILY } from '@app/styles/themes/constants'; import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography'; diff --git a/src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.tsx b/src/components/relay-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.tsx similarity index 100% rename from src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.tsx rename to src/components/relay-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.tsx diff --git a/src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.styles.ts b/src/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.styles.ts similarity index 100% rename from src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.styles.ts rename to src/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.styles.ts diff --git a/src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.tsx b/src/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.tsx similarity index 58% rename from src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.tsx rename to src/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.tsx index 9396093..03d2f3e 100644 --- a/src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.tsx +++ b/src/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard'; -import { RecentActivityStatusFilter } from '@app/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityStatusFilter/RecentActivityStatusFilter'; -import { RecentActivityFilterState } from '@app/components/nft-dashboard/recentActivity/RecentActivity'; +import { NFTCard } from '@app/components/relay-dashboard/common/NFTCard/NFTCard'; +import { RecentActivityStatusFilter } from '@app/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityStatusFilter/RecentActivityStatusFilter'; +import { RecentActivityFilterState } from '@app/components/relay-dashboard/recentActivity/RecentActivity'; interface RecentActivityFilterProps { filters: RecentActivityFilterState; diff --git a/src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityStatusFilter/RecentActivityStatusFilter.styles.ts b/src/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityStatusFilter/RecentActivityStatusFilter.styles.ts similarity index 100% rename from src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityStatusFilter/RecentActivityStatusFilter.styles.ts rename to src/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityStatusFilter/RecentActivityStatusFilter.styles.ts diff --git a/src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityStatusFilter/RecentActivityStatusFilter.tsx b/src/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityStatusFilter/RecentActivityStatusFilter.tsx similarity index 92% rename from src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityStatusFilter/RecentActivityStatusFilter.tsx rename to src/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityStatusFilter/RecentActivityStatusFilter.tsx index 0eadde7..63bbf77 100644 --- a/src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityStatusFilter/RecentActivityStatusFilter.tsx +++ b/src/components/relay-dashboard/recentActivity/recentActivityFilters/RecentActivityStatusFilter/RecentActivityStatusFilter.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { activityStatuses } from '@app/constants/config/activityStatuses'; -import { RecentActivityFilterState } from '@app/components/nft-dashboard/recentActivity/RecentActivity'; +import { RecentActivityFilterState } from '@app/components/relay-dashboard/recentActivity/RecentActivity'; import { Title } from '../RecentActivityFilter.styles'; import * as S from './RecentActivityStatusFilter.styles'; import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; diff --git a/src/components/nft-dashboard/recently-added/RecentlyAddedNft.styles.ts b/src/components/relay-dashboard/recently-added/RecentlyAddedNft.styles.ts similarity index 100% rename from src/components/nft-dashboard/recently-added/RecentlyAddedNft.styles.ts rename to src/components/relay-dashboard/recently-added/RecentlyAddedNft.styles.ts diff --git a/src/components/nft-dashboard/recently-added/RecentlyAddedNft.tsx b/src/components/relay-dashboard/recently-added/RecentlyAddedNft.tsx similarity index 90% rename from src/components/nft-dashboard/recently-added/RecentlyAddedNft.tsx rename to src/components/relay-dashboard/recently-added/RecentlyAddedNft.tsx index d5233b2..7024311 100644 --- a/src/components/nft-dashboard/recently-added/RecentlyAddedNft.tsx +++ b/src/components/relay-dashboard/recently-added/RecentlyAddedNft.tsx @@ -2,9 +2,9 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { LeftOutlined, RightOutlined } from '@ant-design/icons'; import { BaseCarousel } from '@app/components/common/BaseCarousel/Carousel'; -import { NFTCardHeader } from '@app/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader'; -import { ViewAll } from '@app/components/nft-dashboard/common/ViewAll/ViewAll'; -import { NftCard } from '@app/components/nft-dashboard/recently-added/nft-card/NftCard'; +import { NFTCardHeader } from '@app/components/relay-dashboard/common/NFTCardHeader/NFTCardHeader'; +import { ViewAll } from '@app/components/relay-dashboard/common/ViewAll/ViewAll'; +import { NftCard } from '@app/components/relay-dashboard/recently-added/nft-card/NftCard'; import { getRecentlyAddedNfts, NftItem } from '@app/api/nftDashboard.api'; import { useResponsive } from '@app/hooks/useResponsive'; import * as S from './RecentlyAddedNft.styles'; diff --git a/src/components/nft-dashboard/recently-added/nft-card/NftCard.styles.ts b/src/components/relay-dashboard/recently-added/nft-card/NftCard.styles.ts similarity index 97% rename from src/components/nft-dashboard/recently-added/nft-card/NftCard.styles.ts rename to src/components/relay-dashboard/recently-added/nft-card/NftCard.styles.ts index d0ba9bf..a60f426 100644 --- a/src/components/nft-dashboard/recently-added/nft-card/NftCard.styles.ts +++ b/src/components/relay-dashboard/recently-added/nft-card/NftCard.styles.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard'; +import { NFTCard } from '@app/components/relay-dashboard/common/NFTCard/NFTCard'; import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY, media, BREAKPOINTS, BORDER_RADIUS } from '@app/styles/themes/constants'; import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography'; diff --git a/src/components/nft-dashboard/recently-added/nft-card/NftCard.tsx b/src/components/relay-dashboard/recently-added/nft-card/NftCard.tsx similarity index 100% rename from src/components/nft-dashboard/recently-added/nft-card/NftCard.tsx rename to src/components/relay-dashboard/recently-added/nft-card/NftCard.tsx diff --git a/src/components/nft-dashboard/totalEarning/TotalEarning.styles.ts b/src/components/relay-dashboard/totalEarning/TotalEarning.styles.ts similarity index 100% rename from src/components/nft-dashboard/totalEarning/TotalEarning.styles.ts rename to src/components/relay-dashboard/totalEarning/TotalEarning.styles.ts diff --git a/src/components/relay-dashboard/totalEarning/TotalEarning.tsx b/src/components/relay-dashboard/totalEarning/TotalEarning.tsx new file mode 100644 index 0000000..04ad13b --- /dev/null +++ b/src/components/relay-dashboard/totalEarning/TotalEarning.tsx @@ -0,0 +1,82 @@ +import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'; +import { NFTCard } from '@app/components/relay-dashboard/common/NFTCard/NFTCard'; +import { TotalEarningChart } from '@app/components/relay-dashboard/totalEarning/TotalEarningChart/TotalEarningChart'; +import { useAppSelector } from '@app/hooks/reduxHooks'; +import { Dates } from '@app/constants/Dates'; +import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils'; +import { CurrencyTypeEnum } from '@app/interfaces/interfaces'; +import * as S from './TotalEarning.styles'; +import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; +import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; +import { useBitcoinRates } from '@app/hooks/useBitcoinRates'; + +export const TotalEarning: React.FC = () => { + const { t } = useTranslation(); + const { rates: bitcoinRates, isLoading, error } = useBitcoinRates(); + + const { totalEarningData, days } = useMemo(() => { + const earningData = { + data: bitcoinRates.map((item) => item.usd_value), + }; + const daysData = bitcoinRates.map((item) => Dates.getDate(item.date).format('L LTS')); + + return { + totalEarningData: earningData, + days: daysData, + }; + }, [bitcoinRates]); + + const latestRate = bitcoinRates.length > 0 ? bitcoinRates[bitcoinRates.length - 1]?.usd_value : undefined; + const previousRate = bitcoinRates.length > 1 ? bitcoinRates[bitcoinRates.length - 2]?.usd_value : undefined; + const isIncreased = latestRate && previousRate ? latestRate > previousRate : false; + const rateDifference = latestRate && previousRate ? ((latestRate - previousRate) / previousRate) * 100 : 0; + + console.log(`latestRate: ${latestRate} previousRate: ${previousRate}`); + console.log(`Rate difference: ${rateDifference}`); + + if (isLoading) { + return
{t('common.loading')}
; + } + + if (error) { + return ( +
+ {t('common.error')}: {error} +
+ ); + } + + const formattedLatestRate = latestRate !== undefined ? parseFloat(latestRate.toFixed(0)) : 0; + return ( + + + + + + {t('nft.bitcoinPrice')} + + + + {isIncreased ? : } {rateDifference.toFixed(2)}% + + + + + + + {getCurrencyPrice(`${formatNumberWithCommas(formattedLatestRate)}`, CurrencyTypeEnum.USD)} + + + + + + + + + + + + ); +}; diff --git a/src/components/relay-dashboard/totalEarning/TotalEarningChart/TotalEarningChart.tsx b/src/components/relay-dashboard/totalEarning/TotalEarningChart/TotalEarningChart.tsx new file mode 100644 index 0000000..bd9a94b --- /dev/null +++ b/src/components/relay-dashboard/totalEarning/TotalEarningChart/TotalEarningChart.tsx @@ -0,0 +1,125 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { BaseChart, getDefaultTooltipStyles } from '@app/components/common/charts/BaseChart'; +import { useAppSelector } from '@app/hooks/reduxHooks'; +import { themeObject } from '@app/styles/themes/themeVariables'; +import { ChartData, CurrencyTypeEnum } from '@app/interfaces/interfaces'; +import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils'; +// import { formatDate } from '@app/utils/dateFormatter'; + +interface LineData { + data: ChartData; +} + +interface TotalEarningChartProps { + xAxisData: number[] | string[]; + earningData: LineData; +} + +export const TotalEarningChart: React.FC = ({ xAxisData, earningData }) => { + const theme = useAppSelector((state) => state.theme.theme); + const { t } = useTranslation(); + + console.log('xAxisData:', xAxisData); + console.log('earningData:', earningData); + + const minYValue = Math.min(...earningData.data); + const maxYValue = Math.max(...earningData.data); + + const roundDown = (value: number, interval: number) => Math.floor(value / interval) * interval; + const roundUp = (value: number, interval: number) => Math.ceil(value / interval) * interval; + + const interval = 1000; + const minY = roundDown(minYValue * 0.99, interval); + const maxY = roundUp(maxYValue * 1.01, interval); + + const yAxisTickInterval = (maxY - minY) / 5; + + const seriesList = [ + { + name: t('nft.earnings'), + type: 'line', + data: earningData.data.map((value, index) => [xAxisData[index], value]), + showSymbol: true, + symbolSize: 4, + smooth: false, + lineStyle: { + width: 2, + color: themeObject[theme].chartColor3, + }, + emphasis: { + focus: 'series', + }, + encode: { + x: 'date', + y: 'usd_value', + label: ['date', 'usd_value'], + itemName: 'date', + tooltip: ['usd_value'], + }, + }, + ]; + + const option = { + tooltip: { + ...getDefaultTooltipStyles(themeObject[theme]), + trigger: 'axis', + confine: true, + formatter: (data: any) => { + const currentSeries = data[0]; + const roundedValue = Math.round(currentSeries.value[1]); // Round to nearest dollar + return `${currentSeries.name} - ${getCurrencyPrice( + formatNumberWithCommas(roundedValue), + CurrencyTypeEnum.USD, + )}`; + }, + }, + grid: { + top: 20, + left: 60, + right: 20, + bottom: 30, + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: xAxisData, + axisLine: { + lineStyle: { + color: themeObject[theme].chartAxisLabel, + }, + }, + axisLabel: { + show: false, + }, + axisTick: { + show: false, + }, + }, + yAxis: { + type: 'value', + min: minY, + max: maxY, + interval: yAxisTickInterval, // Ensure even spacing + axisLine: { + lineStyle: { + color: themeObject[theme].chartAxisLabel, + }, + }, + splitLine: { + lineStyle: { + color: '#444', + }, + }, + axisLabel: { + formatter: (value: number) => `$${formatNumberWithCommas(value)}`, + color: themeObject[theme].chartAxisLabel, + fontSize: 13, + fontFamily: 'Arial', + }, + }, + series: seriesList, + }; + + return ; +}; diff --git a/src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.styles.ts b/src/components/relay-dashboard/transactions/TransactionItem/TransactionItem.styles.ts similarity index 100% rename from src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.styles.ts rename to src/components/relay-dashboard/transactions/TransactionItem/TransactionItem.styles.ts diff --git a/src/components/relay-dashboard/transactions/TransactionItem/TransactionItem.tsx b/src/components/relay-dashboard/transactions/TransactionItem/TransactionItem.tsx new file mode 100644 index 0000000..e558273 --- /dev/null +++ b/src/components/relay-dashboard/transactions/TransactionItem/TransactionItem.tsx @@ -0,0 +1,82 @@ +import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { WalletTransaction } from '@app/api/activity.api'; +import { Dates } from '@app/constants/Dates'; +import * as S from './TransactionItem.styles'; +import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; +import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; +import { useBitcoinRates } from '@app/hooks/useBitcoinRates'; + +function makeHexId(length: number): string { + const characters = 'abcdef0123456789'; + let result = ''; + for (let i = 0; i < length; i++) { + result += characters.charAt(Math.floor(Math.random() * characters.length)); + } + return result; +} + +function convertBtcToUsd(btcValue: string, btcPriceInUsd: number): string { + const btcAmount = parseFloat(btcValue); + if (btcAmount < 1) { + const satoshis = Math.round(btcAmount * 100000000); + const usdValue = (satoshis / 100000000) * btcPriceInUsd; + return usdValue.toFixed(2); + } else { + const wholeBtc = Math.floor(btcAmount); + const satoshis = Math.round((btcAmount - wholeBtc) * 100000000); + const usdValue = (wholeBtc * btcPriceInUsd) + (satoshis / 100000000 * btcPriceInUsd); + return usdValue.toFixed(2); + } +} + +export const TransactionItem: React.FC = ({ witness_tx_id, date, output, value }) => { + const { t } = useTranslation(); + const [transactionId, setTransactionId] = useState(null); + const [usdValue, setUsdValue] = useState(''); + const { rates, isLoading, error } = useBitcoinRates(); + + useEffect(() => { + if (!witness_tx_id) { + setTransactionId(makeHexId(64)); + } + }, [witness_tx_id]); + + useEffect(() => { + if (!isLoading && !error && rates.length > 0) { + const btcPrice = rates[rates.length - 1].usd_value; // Get the most recent BTC price + const usdValueCalculated = convertBtcToUsd(value, btcPrice); + setUsdValue(usdValueCalculated); + } + }, [value, rates, isLoading, error]); + + // Skip rendering if the value is zero + if (parseFloat(value) === 0) { + return null; + } + + return ( + + + + {t('Transaction ID')}: + {witness_tx_id ? witness_tx_id : transactionId} + + + {t('Address')}: + {output} + + + {t('Date')}: + {Dates.getDate(date).format('L LTS')} + + + {t('Value')}: + {usdValue && ${usdValue}} + + + + ); +}; + +export default TransactionItem; diff --git a/src/components/nft-dashboard/activityStory/ActivityStory.styles.ts b/src/components/relay-dashboard/transactions/Transactions.styles.ts similarity index 100% rename from src/components/nft-dashboard/activityStory/ActivityStory.styles.ts rename to src/components/relay-dashboard/transactions/Transactions.styles.ts diff --git a/src/components/relay-dashboard/transactions/Transactions.tsx b/src/components/relay-dashboard/transactions/Transactions.tsx new file mode 100644 index 0000000..9123c18 --- /dev/null +++ b/src/components/relay-dashboard/transactions/Transactions.tsx @@ -0,0 +1,221 @@ +import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import TransactionItem from './TransactionItem/TransactionItem'; +import { getUserActivities, WalletTransaction } from '@app/api/activity.api'; +import * as S from './Transactions.styles'; +import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; +import { Modal } from 'antd'; +import { ViewTransactions } from '@app/components/relay-dashboard/common/ViewAll/ViewTransactions'; +import styled from 'styled-components'; +import { Line } from 'react-chartjs-2'; +import { BaseSkeleton } from '@app/components/common/BaseSkeleton/BaseSkeleton'; +import { ChartOptions } from 'chart.js'; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + Filler, +} from 'chart.js'; +import { TransactionCard } from './TransactionItem/TransactionItem.styles'; + +ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler); + +const TitleContainer = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +`; + +export const ActivityStory: React.FC = () => { + const [story, setStory] = useState([]); + const [isModalVisible, setIsModalVisible] = useState(false); + const [isLoading, setIsLoading] = useState(true); + + const { t } = useTranslation(); + + useEffect(() => { + getUserActivities().then((res) => { + setStory(res); + setIsLoading(false); + }); + }, []); + + const activityContent = + story.length > 0 ? ( + story.map((item) => ( + + + + )) + ) : ( + {t('No transaction data')} + ); + + const showModal = () => { + setIsModalVisible(true); + }; + + const handleCancel = () => { + setIsModalVisible(false); + }; + + const TransactionSkeletons = () => { + return ( + <> + + + + + + + + + + + + ); + }; + const prepareChartData = () => { + const sortedStory = [...story] + .filter((item) => { + const amount = parseFloat(item.value); + console.log(`Parsed amount: ${amount} for transaction ID: ${item.id}`); + return amount > 0; // Filter only positive values + }) + .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()); + + const labels = sortedStory.map((item) => new Date(item.date).toLocaleDateString()); + const amounts = sortedStory.map((item) => { + const amount = parseFloat(item.value); + return isNaN(amount) ? 0 : amount; + }); + + // Additional log to verify amounts array + console.log('Chart Data Amounts:', amounts); + + return { + labels, + datasets: [ + { + label: 'Transaction Amount', + data: amounts, // Ensure this is correctly linked + fill: true, + backgroundColor: (context: any) => { + const ctx = context.chart.ctx; + const gradient = ctx.createLinearGradient(0, 0, 0, 400); + gradient.addColorStop(0, 'rgba(75, 192, 192, 0.6)'); + gradient.addColorStop(1, 'rgba(75, 192, 192, 0.1)'); + return gradient; + }, + borderColor: 'rgba(75, 192, 192, 1)', + pointBackgroundColor: 'rgba(75, 192, 192, 1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(75, 192, 192, 1)', + tension: 0.4, + }, + ], + }; + }; + + const chartOptions: ChartOptions<'line'> = { + responsive: true, + maintainAspectRatio: false, + scales: { + y: { + beginAtZero: true, + title: { + display: true, + text: 'Amount', + font: { + size: 14, + weight: 'bold', + }, + color: 'rgba(255, 255, 255, 0.8)', // Lighter color for y-axis title + }, + ticks: { + font: { + size: 12, + }, + color: 'rgba(255, 255, 255, 0.6)', // Lighter color for y-axis ticks + }, + grid: { + color: 'rgba(255, 255, 255, 0.1)', // Lighter color for y-axis grid lines + }, + }, + x: { + title: { + display: true, + text: 'Date', + font: { + size: 14, + weight: 'bold', + }, + color: 'rgba(255, 255, 255, 0.8)', // Lighter color for x-axis title + }, + ticks: { + font: { + size: 12, + }, + color: 'rgba(255, 255, 255, 0.6)', // Lighter color for x-axis ticks + }, + grid: { + color: 'rgba(255, 255, 255, 0.1)', // Lighter color for x-axis grid lines + }, + }, + }, + plugins: { + legend: { + position: 'top' as const, + labels: { + font: { + size: 14, + }, + color: 'rgba(255, 255, 255, 0.8)', // Lighter color for legend labels + }, + }, + tooltip: { + callbacks: { + label: function (tooltipItem) { + // Customize tooltip display + return `Amount: ${tooltipItem.raw}`; // Assuming that `tooltipItem.raw` holds the amount value + }, + }, + }, + }, + animation: { + duration: 1000, + easing: 'easeInOutQuart', + }, + hover: { + mode: 'nearest' as const, + intersect: true, + }, + }; + + + return ( + + + {t('nft.yourTransactions')} + + {t('nft.viewTransactions')} + + + + +
+ +
+ {isLoading ? : {activityContent}} + + {isLoading ? : {activityContent}} + + ); +}; diff --git a/src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts b/src/components/relay-dashboard/trending-collections/TrendingCollections.styles.ts similarity index 100% rename from src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts rename to src/components/relay-dashboard/trending-collections/TrendingCollections.styles.ts diff --git a/src/components/nft-dashboard/trending-collections/TrendingCollections.tsx b/src/components/relay-dashboard/trending-collections/TrendingCollections.tsx similarity index 89% rename from src/components/nft-dashboard/trending-collections/TrendingCollections.tsx rename to src/components/relay-dashboard/trending-collections/TrendingCollections.tsx index d894162..5dab20e 100644 --- a/src/components/nft-dashboard/trending-collections/TrendingCollections.tsx +++ b/src/components/relay-dashboard/trending-collections/TrendingCollections.tsx @@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next'; import Slider from 'react-slick'; import { LeftOutlined, RightOutlined } from '@ant-design/icons'; import { BaseCarousel } from '@app/components/common/BaseCarousel/Carousel'; -import { ViewAll } from '@app/components/nft-dashboard/common/ViewAll/ViewAll'; -import { NFTCardHeader } from '@app/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader'; -import { TrendingCollection } from '@app/components/nft-dashboard/trending-collections/collection/TrendingCollection'; +import { ViewAll } from '@app/components/relay-dashboard/common/ViewAll/ViewAll'; +import { NFTCardHeader } from '@app/components/relay-dashboard/common/NFTCardHeader/NFTCardHeader'; +import { TrendingCollection } from '@app/components/relay-dashboard/trending-collections/collection/TrendingCollection'; import { useResponsive } from '@app/hooks/useResponsive'; import { getTrendingActivities, TrendingActivity } from '@app/api/activity.api'; import * as S from './TrendingCollections.styles'; diff --git a/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts b/src/components/relay-dashboard/trending-collections/collection/TrendingCollection.styles.ts similarity index 97% rename from src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts rename to src/components/relay-dashboard/trending-collections/collection/TrendingCollection.styles.ts index c6a567d..4781bad 100644 --- a/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts +++ b/src/components/relay-dashboard/trending-collections/collection/TrendingCollection.styles.ts @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; -import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard'; +import { NFTCard } from '@app/components/relay-dashboard/common/NFTCard/NFTCard'; import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY, media, BORDER_RADIUS } from '@app/styles/themes/constants'; import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography'; interface CardInternalProps { diff --git a/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.tsx b/src/components/relay-dashboard/trending-collections/collection/TrendingCollection.tsx similarity index 100% rename from src/components/nft-dashboard/trending-collections/collection/TrendingCollection.tsx rename to src/components/relay-dashboard/trending-collections/collection/TrendingCollection.tsx diff --git a/src/components/nft-dashboard/trending-creators/TrendingCreators.styles.ts b/src/components/relay-dashboard/trending-creators/TrendingCreators.styles.ts similarity index 100% rename from src/components/nft-dashboard/trending-creators/TrendingCreators.styles.ts rename to src/components/relay-dashboard/trending-creators/TrendingCreators.styles.ts diff --git a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx b/src/components/relay-dashboard/trending-creators/TrendingCreators.tsx similarity index 93% rename from src/components/nft-dashboard/trending-creators/TrendingCreators.tsx rename to src/components/relay-dashboard/trending-creators/TrendingCreators.tsx index 66ecc5a..c2f28d0 100644 --- a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx +++ b/src/components/relay-dashboard/trending-creators/TrendingCreators.tsx @@ -14,9 +14,9 @@ import profile12 from '@app/assets/images/profile12.webp'; import profile13 from '@app/assets/images/profile13.webp'; import { LeftOutlined, RightOutlined } from '@ant-design/icons'; import { useTranslation } from 'react-i18next'; -import { NFTCardHeader } from '@app/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader'; -import { ViewAll } from '@app/components/nft-dashboard/common/ViewAll/ViewAll'; -import { TrendingCreatorsStory } from '@app/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory'; +import { NFTCardHeader } from '@app/components/relay-dashboard/common/NFTCardHeader/NFTCardHeader'; +import { ViewAll } from '@app/components/relay-dashboard/common/ViewAll/ViewAll'; +import { TrendingCreatorsStory } from '@app/components/relay-dashboard/trending-creators/story/TrendingCreatorsStory'; import { getTrendingCreators, TrendingCreator } from '@app/api/trendingCreators'; import * as S from './TrendingCreators.styles'; import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; diff --git a/src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts b/src/components/relay-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts similarity index 100% rename from src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts rename to src/components/relay-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts diff --git a/src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.tsx b/src/components/relay-dashboard/trending-creators/story/TrendingCreatorsStory.tsx similarity index 100% rename from src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.tsx rename to src/components/relay-dashboard/trending-creators/story/TrendingCreatorsStory.tsx diff --git a/src/constants/config/currencies.ts b/src/constants/config/currencies.ts index 40fa8be..f907b74 100644 --- a/src/constants/config/currencies.ts +++ b/src/constants/config/currencies.ts @@ -13,4 +13,8 @@ export const currencies = { text: 'ETH', icon: 'Ξ', }, + [CurrencyTypeEnum.SATS]: { + text: 'SATS', + icon: 'SAT ', + }, }; diff --git a/src/interfaces/interfaces.ts b/src/interfaces/interfaces.ts index cf51567..965c622 100644 --- a/src/interfaces/interfaces.ts +++ b/src/interfaces/interfaces.ts @@ -32,6 +32,7 @@ export enum CurrencyTypeEnum { USD = 'USD', ETH = 'ETH', BTC = 'BTC', + SATS = 'SATS' } export interface PaymentCard { diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json index d2ddbd7..dc28404 100644 --- a/src/locales/de/translation.json +++ b/src/locales/de/translation.json @@ -141,7 +141,7 @@ "copied": "In die Zwischenablage kopiert", "copy": "Kopieren", "country": "Land", - "nft-dashboard": "NFT Dashboard", + "relay-dashboard": "NFT Dashboard", "medical-dashboard": "Medizinisches Dashboard", "dataDisplay": "Datenanzeige", "dataTables": "Datentabellen", diff --git a/src/pages/BalancePage.tsx b/src/pages/BalancePage.tsx index 85386fa..6ffeb01 100644 --- a/src/pages/BalancePage.tsx +++ b/src/pages/BalancePage.tsx @@ -1,8 +1,8 @@ import React, { useEffect } from 'react'; import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; -import { Balance } from '@app/components/nft-dashboard/Balance/Balance'; -import { TotalEarning } from '@app/components/nft-dashboard/totalEarning/TotalEarning'; -import { ActivityStory } from '@app/components/nft-dashboard/activityStory/ActivityStory'; +import { Balance } from '@app/components/relay-dashboard/Balance/Balance'; +import { TotalEarning } from '@app/components/relay-dashboard/totalEarning/TotalEarning'; +import { ActivityStory } from '@app/components/relay-dashboard/transactions/Transactions'; import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; import { useResponsive } from '@app/hooks/useResponsive'; diff --git a/src/pages/DashboardPages/NftDashboardPage.tsx b/src/pages/DashboardPages/NftDashboardPage.tsx index f377e7e..d244a6d 100644 --- a/src/pages/DashboardPages/NftDashboardPage.tsx +++ b/src/pages/DashboardPages/NftDashboardPage.tsx @@ -2,14 +2,14 @@ import React from 'react'; import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; import { References } from '@app/components/common/References/References'; import { useResponsive } from '@app/hooks/useResponsive'; -import { TrendingCreators } from '@app/components/nft-dashboard/trending-creators/TrendingCreators'; +import { TrendingCreators } from '@app/components/relay-dashboard/trending-creators/TrendingCreators'; import { VisitorsPieChart } from '@app/components/charts/VisitorsPieChart'; import { LineRaceChart } from '@app/components/charts/LineRaceChart/LineRaceChart'; import { BarAnimationDelayChart } from '@app/components/charts/BarAnimationDelayChart/BarAnimationDelayChart'; import { ActivityCard } from '@app/components/medical-dashboard/activityCard/ActivityCard'; -import { Balance } from '@app/components/nft-dashboard/Balance/Balance'; -import { TotalEarning } from '@app/components/nft-dashboard/totalEarning/TotalEarning'; -import { ActivityStory } from '@app/components/nft-dashboard/activityStory/ActivityStory'; +import { Balance } from '@app/components/relay-dashboard/Balance/Balance'; +import { TotalEarning } from '@app/components/relay-dashboard/totalEarning/TotalEarning'; +import { ActivityStory } from '@app/components/relay-dashboard/transactions/Transactions'; import { useNavigate } from 'react-router-dom'; import * as S from './DashboardPage.styles'; import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; @@ -104,17 +104,17 @@ export default MedicalDashboardPage; // import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; // import { References } from '@app/components/common/References/References'; // import { useResponsive } from '@app/hooks/useResponsive'; -// import { TrendingCreators } from '@app/components/nft-dashboard/trending-creators/TrendingCreators'; -// import { RecentlyAddedNft } from '@app/components/nft-dashboard/recently-added/RecentlyAddedNft'; -// import { TrendingCollections } from '@app/components/nft-dashboard/trending-collections/TrendingCollections'; +// import { TrendingCreators } from '@app/components/relay-dashboard/trending-creators/TrendingCreators'; +// import { RecentlyAddedNft } from '@app/components/relay-dashboard/recently-added/RecentlyAddedNft'; +// import { TrendingCollections } from '@app/components/relay-dashboard/trending-collections/TrendingCollections'; // import { VisitorsPieChart } from '@app/components/charts/VisitorsPieChart'; // import { LineRaceChart } from '@app/components/charts/LineRaceChart/LineRaceChart'; // import { BarAnimationDelayChart } from '@app/components/charts/BarAnimationDelayChart/BarAnimationDelayChart'; // import { ActivityCard } from '@app/components/medical-dashboard/activityCard/ActivityCard'; -// import { Balance } from '@app/components/nft-dashboard/Balance/Balance'; -// import { TotalEarning } from '@app/components/nft-dashboard/totalEarning/TotalEarning'; -// import { ActivityStory } from '@app/components/nft-dashboard/activityStory/ActivityStory'; -// import { RecentActivity } from '@app/components/nft-dashboard/recentActivity/RecentActivity'; +// import { Balance } from '@app/components/relay-dashboard/Balance/Balance'; +// import { TotalEarning } from '@app/components/relay-dashboard/totalEarning/TotalEarning'; +// import { ActivityStory } from '@app/components/relay-dashboard/activityStory/ActivityStory'; +// import { RecentActivity } from '@app/components/relay-dashboard/recentActivity/RecentActivity'; // import * as S from './DashboardPage.styles'; // import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; // import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; diff --git a/src/pages/DataTablesPage.tsx b/src/pages/DataTablesPage.tsx index 38c6907..692bfb8 100644 --- a/src/pages/DataTablesPage.tsx +++ b/src/pages/DataTablesPage.tsx @@ -3,12 +3,11 @@ import { useTranslation } from 'react-i18next'; import { Tables } from '@app/components/tables/Tables/Tables'; import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; -import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; import { useResponsive } from '@app/hooks/useResponsive'; import * as S from '@app/pages/uiComponentsPages/UIComponentsPage.styles'; -import { Balance } from '@app/components/nft-dashboard/Balance/Balance'; -import { TotalEarning } from '@app/components/nft-dashboard/totalEarning/TotalEarning'; -import { ActivityStory } from '@app/components/nft-dashboard/activityStory/ActivityStory'; +import { Balance } from '@app/components/relay-dashboard/Balance/Balance'; +import { TotalEarning } from '@app/components/relay-dashboard/totalEarning/TotalEarning'; +import { ActivityStory } from '@app/components/relay-dashboard/transactions/Transactions'; const DataTablesPage: React.FC = () => { const { t } = useTranslation(); const { isDesktop } = useResponsive(); diff --git a/src/pages/RelaySettingsPage.tsx b/src/pages/RelaySettingsPage.tsx index 1638b94..7373f00 100644 --- a/src/pages/RelaySettingsPage.tsx +++ b/src/pages/RelaySettingsPage.tsx @@ -10,9 +10,9 @@ import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; -import { Balance } from '@app/components/nft-dashboard/Balance/Balance'; -import { TotalEarning } from '@app/components/nft-dashboard/totalEarning/TotalEarning'; -import { ActivityStory } from '@app/components/nft-dashboard/activityStory/ActivityStory'; +import { Balance } from '@app/components/relay-dashboard/Balance/Balance'; +import { TotalEarning } from '@app/components/relay-dashboard/totalEarning/TotalEarning'; +import { ActivityStory } from '@app/components/relay-dashboard/transactions/Transactions'; import { useResponsive } from '@app/hooks/useResponsive'; import useRelaySettings from '@app/hooks/useRelaySettings'; import * as S from '@app/pages/uiComponentsPages/UIComponentsPage.styles'; diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 701abff..d4abc4f 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -14,6 +14,15 @@ export const camelize = (string: string): string => { .join(''); }; +export const getSatsCurrency = (price: number | string, currency: CurrencyTypeEnum, isIcon = true): string => { + const formattedPrice = typeof price === 'number' ? formatSatsWithCommas(price) : price; + const currencySymbol = currencies[currency][isIcon ? 'icon' : 'text']; + + // Handle potential negative sign placement + return isIcon ? `${currencySymbol}${formattedPrice}` : `${formattedPrice} ${currency}`; +}; + + export const getCurrencyPrice = (price: number | string, currency: CurrencyTypeEnum, isIcon = true): string => { const currencySymbol = currencies[currency][isIcon ? 'icon' : 'text']; @@ -152,6 +161,13 @@ export const hexToHSL = (hex: string): { h: number; s: number; l: number } => { } }; +export const formatSatsWithCommas = (value: number): string => { + const parts = value.toFixed(8).split('.'); // Ensure 8 decimal places + parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); + return parts.join('.'); +}; + + export const formatNumberWithCommas = (value: number): string => { return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); };