diff --git a/src/apis/index.ts b/src/apis/index.ts index 568ed0ca..7a320f1c 100644 --- a/src/apis/index.ts +++ b/src/apis/index.ts @@ -95,12 +95,18 @@ export const fetchSalesHistoryData = async ( const query = `{ sales( after: ${after}, - orderBy: REGION_BEGIN_DESC + orderBy: SALE_CYCLE_DESC ) { nodes { saleCycle regionBegin regionEnd + height + saleEnd + timestamp + tsSaleEnd + startPrice + endPrice } pageInfo { hasNextPage diff --git a/src/components/Charts/SalePrice/index.tsx b/src/components/Charts/SalePrice/index.tsx index a568bd15..25c1d146 100644 --- a/src/components/Charts/SalePrice/index.tsx +++ b/src/components/Charts/SalePrice/index.tsx @@ -1,10 +1,13 @@ import { CircularProgress, Stack } from '@mui/material'; import { ApexOptions } from 'apexcharts'; -import moment from 'moment'; import dynamic from 'next/dynamic'; import * as React from 'react'; -import { formatNumber, planckBnToUnit } from '@/utils/functions'; +import { + formatNumber, + getTimeStringShort, + planckBnToUnit, +} from '@/utils/functions'; import { getCorePriceAt, isNewPricing } from '@/utils/sale'; import { useCoretimeApi } from '@/contexts/apis'; @@ -135,7 +138,7 @@ export const SalePriceChart = () => { shared: false, x: { formatter: (v: number) => - v === currentTimestamp ? 'Now' : moment(v).format('D MMM HH:mm'), + v === currentTimestamp ? 'Now' : getTimeStringShort(v), }, }, grid: { diff --git a/src/components/Elements/InfoItem/index.tsx b/src/components/Elements/InfoItem/index.tsx new file mode 100644 index 00000000..1cedd28e --- /dev/null +++ b/src/components/Elements/InfoItem/index.tsx @@ -0,0 +1,25 @@ +import { Stack, Typography, useTheme } from '@mui/material'; + +export type ItemDetail = { + label: string; + value: string | React.ReactNode; +}; +export const InfoItem = ({ label, value }: ItemDetail) => { + const theme = useTheme(); + return ( + + + {label} + + + {value} + + + ); +}; diff --git a/src/components/Elements/index.ts b/src/components/Elements/index.ts index 49e0899b..e5ca7541 100644 --- a/src/components/Elements/index.ts +++ b/src/components/Elements/index.ts @@ -4,6 +4,7 @@ export * from './Banner'; export * from './Buttons'; export * from './Cards'; export * from './CountDown'; +export * from './InfoItem'; export * from './Inputs'; export * from './Label'; export * from './Link'; diff --git a/src/components/Modals/Orders/OrderCreation/index.tsx b/src/components/Modals/Orders/OrderCreation/index.tsx index 8564d561..791b728d 100644 --- a/src/components/Modals/Orders/OrderCreation/index.tsx +++ b/src/components/Modals/Orders/OrderCreation/index.tsx @@ -204,7 +204,7 @@ export const OrderCreationModal = ({ Region duration: - + void; - saleCycle: number; + info: SalesHistoryItem; } export const SaleDetailsModal = ({ open, onClose, - saleCycle, + info, }: SaleDetailsModalProps) => { const theme = useTheme(); const { network } = useNetwork(); + const { + state: { decimals, symbol }, + } = useCoretimeApi(); + const { + saleCycle, + regionBegin, + regionEnd, + startPrice, + endPrice, + startTimestamp, + endTimestamp, + startBlock, + endBlock, + } = info; + const { loading, data, isError } = useSaleDetails(network, saleCycle); return ( @@ -48,7 +69,7 @@ export const SaleDetailsModal = ({ variant='subtitle1' sx={{ color: theme.palette.common.black }} > - Sale Details + Coretime Sale#{saleCycle} {loading || isError ? ( @@ -64,6 +85,56 @@ export const SaleDetailsModal = ({ ) : ( + + + + + + + + + {endTimestamp ? 'Sale Ended' : 'Sale Started'} + + + {endTimestamp + ? `${getTimeStringShort( + startTimestamp + )} ~ ${getTimeStringShort(endTimestamp)}` + : getTimeStringShort(startTimestamp)} + + + + + + + )} diff --git a/src/components/Panels/SaleInfoPanel/DetailCard/index.module.scss b/src/components/Panels/SaleInfoPanel/DetailCard/index.module.scss index 62b345e9..ef5736f0 100644 --- a/src/components/Panels/SaleInfoPanel/DetailCard/index.module.scss +++ b/src/components/Panels/SaleInfoPanel/DetailCard/index.module.scss @@ -29,9 +29,3 @@ align-items: center; justify-content: space-between; } - -.infoItem { - display: flex; - flex-direction: column; - gap: 0.5rem; -} diff --git a/src/components/Panels/SaleInfoPanel/DetailCard/index.tsx b/src/components/Panels/SaleInfoPanel/DetailCard/index.tsx index c50b1d0f..ac97a325 100644 --- a/src/components/Panels/SaleInfoPanel/DetailCard/index.tsx +++ b/src/components/Panels/SaleInfoPanel/DetailCard/index.tsx @@ -2,12 +2,9 @@ import { Box, Paper, Typography, useTheme } from '@mui/material'; import Image from 'next/image'; import React from 'react'; -import styles from './index.module.scss'; +import { InfoItem, ItemDetail } from '@/components/Elements'; -interface ItemDetail { - label: string; - value: string | React.ReactNode; -} +import styles from './index.module.scss'; interface DetailCardProps { icon: any; @@ -20,26 +17,6 @@ interface DetailCardProps { children?: React.ReactNode; } -const ItemContainer = ({ label, value }: ItemDetail) => { - const theme = useTheme(); - return ( - - - {label} - - - {value} - - - ); -}; - export const DetailCard = ({ icon, title, @@ -68,8 +45,8 @@ export const DetailCard = ({ > {items ? ( <> - - + + ) : ( children diff --git a/src/components/Panels/SaleInfoPanel/index.tsx b/src/components/Panels/SaleInfoPanel/index.tsx index 01ff212d..316d1b21 100644 --- a/src/components/Panels/SaleInfoPanel/index.tsx +++ b/src/components/Panels/SaleInfoPanel/index.tsx @@ -1,10 +1,9 @@ import { Box, Button, CircularProgress, useTheme } from '@mui/material'; import TimeAgo from 'javascript-time-ago'; import en from 'javascript-time-ago/locale/en.json'; -import moment from 'moment'; import { useState } from 'react'; -import { getBalanceString } from '@/utils/functions'; +import { getBalanceString, getTimeStringShort } from '@/utils/functions'; import { SalePhaseCard } from '@/components/Elements'; import { PriceModal } from '@/components/Modals'; @@ -61,11 +60,11 @@ export const SaleInfoPanel = () => { left: { label: saleStartTimestamp < Date.now() ? 'Started at' : 'Starts at:', - value: moment(saleStartTimestamp).format('D MMM HH:mm'), + value: getTimeStringShort(saleStartTimestamp), }, right: { label: saleEndTimestamp > Date.now() ? 'Ends at' : 'Ended at:', - value: moment(saleEndTimestamp).format('D MMMM HH:mm'), + value: getTimeStringShort(saleEndTimestamp), }, }} /> diff --git a/src/components/Regions/MarketRegion/index.tsx b/src/components/Regions/MarketRegion/index.tsx index 88a11685..e0765cf2 100644 --- a/src/components/Regions/MarketRegion/index.tsx +++ b/src/components/Regions/MarketRegion/index.tsx @@ -8,10 +8,9 @@ import { useTheme, } from '@mui/material'; import { humanizer } from 'humanize-duration'; -import moment from 'moment'; import React from 'react'; -import { getBalanceString } from '@/utils/functions'; +import { getBalanceString, getTimeStringShort } from '@/utils/functions'; import { useRelayApi } from '@/contexts/apis'; import { Listing } from '@/models'; @@ -94,7 +93,7 @@ export const MarketRegion = ({ listing }: MarketRegionProps) => { - {moment(beginTimestamp).format('D MMM HH:mm')} + {getTimeStringShort(beginTimestamp)} @@ -102,7 +101,7 @@ export const MarketRegion = ({ listing }: MarketRegionProps) => { - {moment(endTimestamp).format('D MMM HH:mm')} + {getTimeStringShort(endTimestamp)} diff --git a/src/components/Tables/PurchaseHistoryTable/index.tsx b/src/components/Tables/PurchaseHistoryTable/index.tsx index 39174db7..aedd6659 100644 --- a/src/components/Tables/PurchaseHistoryTable/index.tsx +++ b/src/components/Tables/PurchaseHistoryTable/index.tsx @@ -58,7 +58,7 @@ export const PurchaseHistoryTable = ({ data }: PurchaseHistoryTableProps) => { return ( - + @@ -76,7 +76,14 @@ export const PurchaseHistoryTable = ({ data }: PurchaseHistoryTableProps) => { : data ).map( ( - { address, core, extrinsicId: extrinsic_index, timestamp, price, type }, + { + address, + core, + extrinsicId: extrinsic_index, + timestamp, + price, + type, + }, index ) => ( diff --git a/src/components/Tables/SalesHistoryTable/index.tsx b/src/components/Tables/SalesHistoryTable/index.tsx index fa84c24e..728ae6d2 100644 --- a/src/components/Tables/SalesHistoryTable/index.tsx +++ b/src/components/Tables/SalesHistoryTable/index.tsx @@ -12,6 +12,8 @@ import { } from '@mui/material'; import { useState } from 'react'; +import { getTimeStringLong } from '@/utils/functions'; + import { SalesHistoryItem } from '@/models'; import { StyledTableCell, StyledTableRow } from '../common'; @@ -26,7 +28,7 @@ export const SalesHistoryTable = ({ data }: SalesHistoryTableProps) => { const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(10); const [saleDetailsModalOpen, openSaleDetailsModal] = useState(false); - const [saleCycle, setSaleCycle] = useState(null); + const [saleSelected, selectSale] = useState(null); const handleChangePage = ( _event: React.MouseEvent | null, @@ -51,26 +53,40 @@ export const SalesHistoryTable = ({ data }: SalesHistoryTableProps) => { Sale Id Region Begin Region End + Sale Start + Sale End {(rowsPerPage > 0 ? data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : data - ).map(({ saleCycle, regionBegin, regionEnd }, index) => ( + ).map((info, index) => ( - {regionBegin} - {regionEnd} + + {info.regionBegin} + + + {info.regionEnd} + + + {getTimeStringLong(info.startTimestamp)} + + + {info.endTimestamp + ? getTimeStringLong(info.endTimestamp) + : 'Not yet ended'} + ))} @@ -109,11 +125,11 @@ export const SalesHistoryTable = ({ data }: SalesHistoryTableProps) => {
- {saleCycle !== null ? ( + {saleSelected !== null ? ( openSaleDetailsModal(false)} - saleCycle={saleCycle} + info={saleSelected} /> ) : ( <> diff --git a/src/hooks/sale/index.ts b/src/hooks/sale/index.ts index 7c7c0e7d..95282f47 100644 --- a/src/hooks/sale/index.ts +++ b/src/hooks/sale/index.ts @@ -1,5 +1,4 @@ export * from './burnInfo'; export * from './purchaseHistory'; export * from './saleDetails'; -export * from './saleHistory'; export * from './salesHistory'; diff --git a/src/hooks/sale/saleHistory.ts b/src/hooks/sale/saleHistory.ts deleted file mode 100644 index a51a56a7..00000000 --- a/src/hooks/sale/saleHistory.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { API_CORETIME_INDEXER } from '@/consts'; -import { - NetworkType, - SaleHistoryItem, - SaleHistoryResponse, - SaleHistoryResponseItem, -} from '@/models'; - -import { fetchGraphql } from '../../utils/fetchGraphql'; - -export const useSaleHistory = (network: NetworkType) => { - const [loading, setLoading] = useState(false); - const [data, setData] = useState([]); - const [isError, setError] = useState(false); - - useEffect(() => { - const asyncFetchData = async () => { - setLoading(true); - setData([]); - setError(false); - - try { - const res = await fetchGraphql( - `${API_CORETIME_INDEXER[network]}`, - `{ - sales { - nodes { - regionBegin - regionEnd - } - totalCount - } - }` - ); - if (res.status !== 200) { - setError(true); - } else { - const { nodes } = res.data.sales as SaleHistoryResponse; - setData( - nodes.map((x: SaleHistoryResponseItem) => x as SaleHistoryItem) - ); - } - } catch { - setError(true); - } - setLoading(false); - }; - - asyncFetchData(); - }, [network]); - - return { loading, data, isError }; -}; diff --git a/src/hooks/sale/salesHistory.ts b/src/hooks/sale/salesHistory.ts index e6d8b3b7..cdafa5ea 100644 --- a/src/hooks/sale/salesHistory.ts +++ b/src/hooks/sale/salesHistory.ts @@ -36,11 +36,27 @@ export const useSalesHistory = (network: NetworkType) => { } else { setData( result.map( - ({ saleCycle, regionBegin, regionEnd }) => + ({ + saleCycle, + regionBegin, + regionEnd, + height, + saleEnd, + timestamp, + tsSaleEnd, + startPrice, + endPrice, + }) => ({ saleCycle, regionBegin, regionEnd, + startBlock: height, + endBlock: saleEnd, + startTimestamp: Date.parse(timestamp), + endTimestamp: Date.parse(tsSaleEnd), + startPrice, + endPrice, } as SalesHistoryItem) ) ); diff --git a/src/models/regions/sale.ts b/src/models/regions/sale.ts index ad1d3988..2a6ccf61 100644 --- a/src/models/regions/sale.ts +++ b/src/models/regions/sale.ts @@ -115,16 +115,10 @@ export type SalesHistoryItem = { saleCycle: number; regionBegin: number; regionEnd: number; + startBlock: number; + endBlock: number; + startTimestamp: number; + endTimestamp: number; + startPrice: string; + endPrice: string; }; - -export type SaleHistoryResponseItem = { - regionBegin: number; - regionEnd: number; -}; - -export type SaleHistoryResponse = { - totalCount: number; - nodes: SaleHistoryResponseItem[]; -}; - -export type SaleHistoryItem = SaleHistoryResponseItem; diff --git a/src/pages/marketplace.tsx b/src/pages/marketplace.tsx index a1e3b877..3f2e29ec 100644 --- a/src/pages/marketplace.tsx +++ b/src/pages/marketplace.tsx @@ -265,7 +265,7 @@ const Marketplace = () => { > {filteredListings.map((listing, index) => ( - + {activeAccount ? (