c576037b58
* chore: make liquidity page client side only * chore: switch to hash based router * chore: add index files for each page * chore: tidy up _app * chore: convert to use useRoutes * fix: active state with react-router NavLink * feat: add routes enum * chore: restrict link and router imports from next * chore: update testing navigation to use hash routes * fix: typoe in eslint rule message * chore: remove unnecessary getInitialProps function definition * chore: wrap tests with memory router * chore: delete unused index.page file * chore: update suspense fallback state * chore: add comment for link component span usage, update link to use toolkit styles * chore: fix lint issues * chore: delete client deposit page * chore: revert title in _app so title gets set correctly without rerender * revert: removal of deposit page so deposit e2e tests still pass * chore: move client router to index page so valid status codes are still sent * fix: wrong route path for markets page, cypress tests
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import { marketsWithDataProvider } from '@vegaprotocol/market-list';
|
|
import {
|
|
addDecimalsFormatNumber,
|
|
titlefy,
|
|
useDataProvider,
|
|
} from '@vegaprotocol/react-helpers';
|
|
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
|
|
import { useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useGlobalStore, usePageTitleStore } from '../../stores';
|
|
|
|
export const Home = () => {
|
|
const navigate = useNavigate();
|
|
// 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,
|
|
});
|
|
const { riskNoticeDialog, update } = useGlobalStore((store) => ({
|
|
riskNoticeDialog: store.riskNoticeDialog,
|
|
update: store.update,
|
|
}));
|
|
|
|
const { pageTitle, updateTitle } = usePageTitleStore((store) => ({
|
|
pageTitle: store.pageTitle,
|
|
updateTitle: store.updateTitle,
|
|
}));
|
|
|
|
useEffect(() => {
|
|
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;
|
|
const newPageTitle = titlefy([marketName, marketPrice]);
|
|
|
|
if (marketId) {
|
|
navigate(`/markets/${marketId}`, { replace: true });
|
|
update({ marketId });
|
|
if (pageTitle !== newPageTitle) {
|
|
updateTitle(newPageTitle);
|
|
}
|
|
}
|
|
// Fallback to the markets list page
|
|
else {
|
|
navigate('/markets');
|
|
}
|
|
}
|
|
}, [data, navigate, 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>
|
|
);
|
|
};
|