vega-frontend-monorepo/apps/trading/pages/index.page.tsx

70 lines
2.0 KiB
TypeScript
Raw Normal View History

import { marketsWithDataProvider } from '@vegaprotocol/market-list';
import {
addDecimalsFormatNumber,
titlefy,
useDataProvider,
} from '@vegaprotocol/react-helpers';
Feat/305 add console v2 first view screen (#424) * [#305] add initial landing dialog on markets page and fix some typos * [#305] market-list utils and generate schema * [#305] initial styling of the landing dialog and add arrows * [#305] routing to markets and add hover and market list tests * [#305] fix z-index on dialog overlay * [#305] default market shoulde be oldest market that is currently trading in continuous mode * [#305] refactor market-list library * [#305] add arrow unit tests * Update libs/market-list/src/lib/components/landing/landing-dialog.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * test: fix failing tests from homepage change * [#305] sort by id after sorting by date * test: increase timeout for failing tests in CI * [#305] destructuring all over the place and some code tweaks, arrows and percentage changes * [#305] update sparkline to show colour * [#305] fix order of market list * [#305] stretchedLink class plus a-tag href for navigation - accessibility updates * [#305] use href only and remove log * [#305] use bignumber.js for price calculations * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] toLocaleString fix * [#305] toLocaleString fix * [#305] add price-change-cell and use formatNumber * [#305] add extra test for select market list * Update apps/trading/specs/index.spec.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * [#305] use memo, sort by date and id lodash Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> Co-authored-by: Joe <joe@vega.xyz>
2022-05-23 12:21:54 +00:00
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
market page: break down components to smaller chunks for better performance (#1726) * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance - fix failing tests * chore: break down components to smaller chunks for better performance - adjust token app cases * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - add nwe store for pageTitle * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm imprv * chore: break down components to smaller chunks for better performance - change prop names * chore: break down components to smaller chunks for better performance - fix some test * chore: break down components to smaller chunks for better performance - change cypress url * chore: break down components to smaller chunks for better perf - set back redundant changes * chore: resolve conflicts Co-authored-by: maciek <maciek@vegaprotocol.io>
2022-10-14 15:42:53 +00:00
import { useGlobalStore, usePageTitleStore } from '../stores';
2022-02-23 17:57:44 +00:00
export function Index() {
const { replace } = useRouter();
Feat/305 add console v2 first view screen (#424) * [#305] add initial landing dialog on markets page and fix some typos * [#305] market-list utils and generate schema * [#305] initial styling of the landing dialog and add arrows * [#305] routing to markets and add hover and market list tests * [#305] fix z-index on dialog overlay * [#305] default market shoulde be oldest market that is currently trading in continuous mode * [#305] refactor market-list library * [#305] add arrow unit tests * Update libs/market-list/src/lib/components/landing/landing-dialog.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * test: fix failing tests from homepage change * [#305] sort by id after sorting by date * test: increase timeout for failing tests in CI * [#305] destructuring all over the place and some code tweaks, arrows and percentage changes * [#305] update sparkline to show colour * [#305] fix order of market list * [#305] stretchedLink class plus a-tag href for navigation - accessibility updates * [#305] use href only and remove log * [#305] use bignumber.js for price calculations * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] toLocaleString fix * [#305] toLocaleString fix * [#305] add price-change-cell and use formatNumber * [#305] add extra test for select market list * Update apps/trading/specs/index.spec.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * [#305] use memo, sort by date and id lodash Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> Co-authored-by: Joe <joe@vega.xyz>
2022-05-23 12:21:54 +00:00
// The default market selected in the platform behind the overlay
// should be the oldest market that is currently trading in us mode(i.e. not in auction).
const { data, error, loading } = useDataProvider({
dataProvider: marketsWithDataProvider,
});
2022-09-05 14:25:33 +00:00
const { riskNoticeDialog, update } = useGlobalStore((store) => ({
riskNoticeDialog: store.riskNoticeDialog,
update: store.update,
}));
market page: break down components to smaller chunks for better performance (#1726) * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance - fix failing tests * chore: break down components to smaller chunks for better performance - adjust token app cases * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - add nwe store for pageTitle * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm imprv * chore: break down components to smaller chunks for better performance - change prop names * chore: break down components to smaller chunks for better performance - fix some test * chore: break down components to smaller chunks for better performance - change cypress url * chore: break down components to smaller chunks for better perf - set back redundant changes * chore: resolve conflicts Co-authored-by: maciek <maciek@vegaprotocol.io>
2022-10-14 15:42:53 +00:00
const { pageTitle, updateTitle } = usePageTitleStore((store) => ({
pageTitle: store.pageTitle,
updateTitle: store.updateTitle,
}));
useEffect(() => {
2022-09-05 14:25:33 +00:00
update({ landingDialog: true });
if (data) {
const marketId = data[0]?.id;
const marketName = data[0]?.tradableInstrument.instrument.name;
const marketPrice = data[0]?.data?.markPrice
? addDecimalsFormatNumber(
data[0]?.data?.markPrice,
data[0]?.decimalPlaces
)
: null;
market page: break down components to smaller chunks for better performance (#1726) * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance - fix failing tests * chore: break down components to smaller chunks for better performance - adjust token app cases * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - add nwe store for pageTitle * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm imprv * chore: break down components to smaller chunks for better performance - change prop names * chore: break down components to smaller chunks for better performance - fix some test * chore: break down components to smaller chunks for better performance - change cypress url * chore: break down components to smaller chunks for better perf - set back redundant changes * chore: resolve conflicts Co-authored-by: maciek <maciek@vegaprotocol.io>
2022-10-14 15:42:53 +00:00
const newPageTitle = titlefy([marketName, marketPrice]);
if (marketId) {
replace(`/markets/${marketId}`);
market page: break down components to smaller chunks for better performance (#1726) * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance - fix failing tests * chore: break down components to smaller chunks for better performance - adjust token app cases * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - add nwe store for pageTitle * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm imprv * chore: break down components to smaller chunks for better performance - change prop names * chore: break down components to smaller chunks for better performance - fix some test * chore: break down components to smaller chunks for better performance - change cypress url * chore: break down components to smaller chunks for better perf - set back redundant changes * chore: resolve conflicts Co-authored-by: maciek <maciek@vegaprotocol.io>
2022-10-14 15:42:53 +00:00
update({ marketId });
if (pageTitle !== newPageTitle) {
updateTitle(newPageTitle);
}
}
// Fallback to the markets list page
else {
replace('/markets');
}
}
market page: break down components to smaller chunks for better performance (#1726) * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance - fix failing tests * chore: break down components to smaller chunks for better performance - adjust token app cases * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - add nwe store for pageTitle * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm imprv * chore: break down components to smaller chunks for better performance - change prop names * chore: break down components to smaller chunks for better performance - fix some test * chore: break down components to smaller chunks for better performance - change cypress url * chore: break down components to smaller chunks for better perf - set back redundant changes * chore: resolve conflicts Co-authored-by: maciek <maciek@vegaprotocol.io>
2022-10-14 15:42:53 +00:00
}, [data, replace, riskNoticeDialog, update, pageTitle, updateTitle]);
return (
<AsyncRenderer data={data} loading={loading} error={error}>
{/* Render a loading and error state but we will redirect if markets are found */}
{null}
</AsyncRenderer>
);
}
2022-02-23 17:57:44 +00:00
Index.getInitialProps = () => ({
page: 'home',
});
2022-02-23 17:57:44 +00:00
export default Index;