{blocksPeriodFilters.map(({ name, value }) => (
diff --git a/src/pages/TicketsType/TicketsType.helpers.ts b/src/pages/TicketsType/TicketsType.helpers.ts
index 8cfb75a4..4986619c 100644
--- a/src/pages/TicketsType/TicketsType.helpers.ts
+++ b/src/pages/TicketsType/TicketsType.helpers.ts
@@ -67,3 +67,22 @@ export const TICKET_STATUS_OPTIONS = [
value: 'inactivated',
},
];
+
+export const TICKET_SORT_OPTIONS = [
+ {
+ name: 'pages.ticketsType.timestamp',
+ value: 'transactionTime',
+ },
+ {
+ name: 'pages.ticketsType.blockNumberRegistered',
+ value: 'blockHeightRegistered',
+ },
+ {
+ name: 'pages.ticketsType.blockNumber',
+ value: 'height',
+ },
+ {
+ name: 'pages.ticketsType.totalCost',
+ value: 'totalCost',
+ },
+];
diff --git a/src/pages/TicketsType/TicketsType.styles.ts b/src/pages/TicketsType/TicketsType.styles.ts
index 9242c5b6..9e55a5ea 100644
--- a/src/pages/TicketsType/TicketsType.styles.ts
+++ b/src/pages/TicketsType/TicketsType.styles.ts
@@ -17,6 +17,12 @@ export const TicketsContainer = styled.div`
}
}
+ .dropdown-sort {
+ .MuiInputBase-root {
+ width: 130px;
+ }
+ }
+
.nowrap {
white-space: nowrap;
}
@@ -26,7 +32,8 @@ export const TicketsContainer = styled.div`
border: 1px solid ${props => props.theme.filter.border};
}
- .dropdown-status {
+ .dropdown-status,
+ .dropdown-sort {
margin-left: 10px;
}
@@ -60,6 +67,7 @@ export const TicketsContainer = styled.div`
.dropdown-ticket-type,
.dropdown-status,
+ .dropdown-sort,
.list-filter {
margin-top: 10px;
}
diff --git a/src/pages/TicketsType/TicketsType.tsx b/src/pages/TicketsType/TicketsType.tsx
index 41613c55..f3a08b86 100644
--- a/src/pages/TicketsType/TicketsType.tsx
+++ b/src/pages/TicketsType/TicketsType.tsx
@@ -10,7 +10,7 @@ import { blocksPeriodFilters } from '@utils/constants/filter';
import * as TransactionStyles from '@pages/Details/TransactionDetails/TransactionDetails.styles';
import TicketsList from './TicketList';
-import { TICKET_STATUS_OPTIONS } from './TicketsType.helpers';
+import { TICKET_STATUS_OPTIONS, TICKET_SORT_OPTIONS } from './TicketsType.helpers';
import * as Styles from './TicketsType.styles';
interface ParamTypes {
@@ -22,6 +22,7 @@ const LIMIT = 6;
const TicketsType: React.FC = () => {
const { type } = useParams
();
const [selectedType, setTicketType] = useState(type);
+ const [selectedSort, setTicketSort] = useState(TICKET_SORT_OPTIONS[0].value);
const [selectedStatus, setSelectedStatus] = useState(TICKET_STATUS_OPTIONS[0].value);
const [selectedTime, setSelectedTime] = useState(blocksPeriodFilters[4].value);
const [currentPage, setCurrentPage] = useState(0);
@@ -39,6 +40,7 @@ const TicketsType: React.FC = () => {
selectedStatus,
customDateRange,
currentPage * LIMIT,
+ selectedSort,
);
const handleTicketTypeChange = (val: string) => {
@@ -46,6 +48,11 @@ const TicketsType: React.FC = () => {
setCurrentPage(0);
};
+ const handleTicketSortChange = (val: string) => {
+ setTicketSort(val);
+ setCurrentPage(0);
+ };
+
useEffect(() => {
(async () => {
setTicketType(type);
@@ -92,7 +99,9 @@ const TicketsType: React.FC = () => {
import('@pages/Details/CascadeDetails/CascadeDetails'));
const NftDetails = loadable(() => import('@pages/Details/NftDetails/NftDetails'));
const FeeSchedule = loadable(() => import('@pages/HistoricalStatistics/FeeSchedule'));
+const PSLBurnt = loadable(() => import('@pages/HistoricalStatistics/PSLBurnt'));
const explorerRoutes = {
id: 'routes.explorer',
@@ -407,6 +408,15 @@ const feeScheduleStatisticsRoutes = {
children: null,
};
+const pslBurntStatisticsRoutes = {
+ id: 'pslBurnt',
+ path: ROUTES.STATISTICS_PSL_BURNT,
+ component: PSLBurnt,
+ icon: null,
+ seoTitle: 'routes.pslBurnt',
+ children: null,
+};
+
const senseDetailsRoutes = {
id: 'routes.senseDetails',
path: ROUTES.SENSE_DETAILS,
@@ -520,6 +530,7 @@ export const pageRoutes = [
cascadeDetailsRoutes,
nftDetailsRoutes,
feeScheduleStatisticsRoutes,
+ pslBurntStatisticsRoutes,
];
export const sidebarRoutes = [
diff --git a/src/utils/constants/routes.ts b/src/utils/constants/routes.ts
index a468e1df..9d7bfc10 100644
--- a/src/utils/constants/routes.ts
+++ b/src/utils/constants/routes.ts
@@ -36,6 +36,7 @@ export const STATISTICS_TOTAL_SUPPLY = `${STATISTICS_OVERTIME}/total-supply`;
export const STATISTICS_PERCENT_OF_PSL_STAKED = `${STATISTICS_OVERTIME}/percent-of-psl-staked`;
export const STATISTICS_ACCOUNTS = `${STATISTICS_OVERTIME}/accounts`;
export const STATISTICS_FEE_SCHEDULE = `${STATISTICS_OVERTIME}/fee-schedule`;
+export const STATISTICS_PSL_BURNT = `${STATISTICS_OVERTIME}/psl-burnt`;
export const CASCADE_AND_SENSE_STATISTICS = '/cascade-and-sense-statistics';
export const SENSE_DETAILS = '/sense';
export const PASTEL_ID_DETAILS = '/pastelid';
diff --git a/src/utils/constants/statistics.ts b/src/utils/constants/statistics.ts
index 9fc4f08b..6a663a7a 100644
--- a/src/utils/constants/statistics.ts
+++ b/src/utils/constants/statistics.ts
@@ -157,6 +157,12 @@ export const statistics = [
url: routes.STATISTICS_FEE_SCHEDULE,
image: generatePreviewUrl(routes.STATISTICS_FEE_SCHEDULE),
},
+ {
+ id: 'pslBurnt',
+ title: 'constants.statistics.pslBurnt',
+ url: routes.STATISTICS_PSL_BURNT,
+ image: generatePreviewUrl(routes.STATISTICS_PSL_BURNT),
+ },
];
export const themes = [
@@ -203,6 +209,7 @@ export const csvHeaders: TCsvHeaderType = {
circulatingSupply: commonCsvFields,
totalSupply: commonCsvFields,
percentOfPSLStaked: commonCsvFields,
+ pslBurnt: commonCsvFields,
networktotals: [
{ label: 'constants.statistics.receiveSent', key: 'value' },
{ label: 'constants.statistics.createdTimeCSV', key: 'time' },
diff --git a/src/utils/helpers/chartOptions.ts b/src/utils/helpers/chartOptions.ts
index 80cd8c1d..57b6d4d3 100644
--- a/src/utils/helpers/chartOptions.ts
+++ b/src/utils/helpers/chartOptions.ts
@@ -1961,6 +1961,107 @@ export function getThemeInitOption(args: TThemeInitOption): EChartsOption {
},
animation: false,
},
+ pslBurnt: {
+ backgroundColor: theme?.backgroundColor,
+ textStyle: {
+ color: theme?.color,
+ },
+ color: ['#cd6661'],
+ grid: {
+ top: 8,
+ right: 40,
+ bottom: 70,
+ left: 60,
+ show: false,
+ },
+ dataZoom: [
+ {
+ type: 'inside',
+ start: 0,
+ end: 100,
+ },
+ {
+ start: 0,
+ end: 100,
+ },
+ ],
+ tooltip: {
+ trigger: 'axis',
+ formatter(params: TChartParams[]) {
+ return `
+
+ `;
+ },
+ },
+ xAxis: {
+ type: 'category',
+ data: dataX,
+ boundaryGap: false,
+ axisLabel: {
+ formatter(value: string, index: number) {
+ let isShowMinutesFor24h = false;
+ if (period === '24h' && dataX && (index === 0 || dataX.length - 1 === index)) {
+ isShowMinutesFor24h = true;
+ }
+ if (period && periods[9].indexOf(period) !== -1) {
+ const date = format(new Date(value), 'MM/dd/yyyy');
+ if (firstDay !== date) {
+ firstDay = date;
+ return generateXAxisLabel(new Date(value), period, isShowMinutesFor24h);
+ }
+ return null;
+ }
+ return value ? generateXAxisLabel(new Date(value), period, isShowMinutesFor24h) : null;
+ },
+ showMaxLabel: true,
+ interval: generateXAxisInterval('1d', period, dataX, width),
+ },
+ },
+ yAxis: {
+ type: 'value',
+ min: minY,
+ max: maxY,
+ interval: (maxY - minY) / 5,
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ formatter(value: string) {
+ return getYAxisLabel(Number(value), minY, maxY);
+ },
+ },
+ axisLine: {
+ show: true,
+ },
+ },
+ series: {
+ type: 'line',
+ name: translateDropdown('chartOptions.pslBurnt', { currency: getCurrencyName() }),
+ data: dataY,
+ showSymbol: false,
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#cd6661',
+ },
+ {
+ offset: 1,
+ color: theme?.backgroundColor ?? '#F4F4F4',
+ },
+ ]),
+ },
+ },
+ animation: false,
+ },
};
return chartOptions[chartName];
@@ -2116,6 +2217,12 @@ export function getThemeUpdateOption(args: TThemeInitOption): EChartsOption {
color: theme?.color,
},
},
+ pslBurnt: {
+ backgroundColor: theme?.backgroundColor,
+ textStyle: {
+ color: theme?.color,
+ },
+ },
circulatingSupply: {
backgroundColor: theme?.backgroundColor,
textStyle: {
@@ -4176,14 +4283,13 @@ export function getSummaryThemeUpdateOption(args: TThemeInitOption): EChartsOpti
splitLine: {
show: false,
},
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
axisLabel: {
- show: false,
+ formatter(value: string) {
+ return getYAxisLabel(Number(value), minY, maxY);
+ },
+ },
+ axisLine: {
+ show: true,
},
},
series: {
diff --git a/src/utils/helpers/statisticsLib.ts b/src/utils/helpers/statisticsLib.ts
index 253eac8c..b0560392 100644
--- a/src/utils/helpers/statisticsLib.ts
+++ b/src/utils/helpers/statisticsLib.ts
@@ -155,7 +155,7 @@ export function transformMarketVolumePriceInfo(
dataY1.push(+y1.toFixed(8));
dataY2.push(Number(y2.toFixed(2)));
}
- if (period === '24h' && checkValidateData(prices[prices.length - 1][0])) {
+ if (period === '24h' && prices?.length && checkValidateData(prices[prices.length - 1][0])) {
dataX.push(format(Date.now(), 'MM/dd/yyyy hh:mm aa') || '');
dataY1.push(Number(dataY1[dataY1.length - 1]));
dataY2.push(Number(dataY2[dataY2.length - 1]));
@@ -180,7 +180,7 @@ export function transformMarketCapPriceInfo(
dataY1.push(+y1.toFixed(8));
dataY2.push(Math.round(y2));
}
- if (period === '24h' && checkValidateData(prices[prices.length - 1][0])) {
+ if (period === '24h' && prices?.length && checkValidateData(prices[prices.length - 1][0])) {
dataX.push(format(Date.now(), 'MM/dd/yyyy hh:mm aa') || '');
dataY1.push(Number(dataY1[dataY1.length - 1]));
dataY2.push(Number(dataY2[dataY2.length - 1]));