Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add search bar to the dashboard's market list #2322

Merged
merged 2 commits into from
May 9, 2023
Merged

Add search bar to the dashboard's market list #2322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc66bbc
Added search bar on dashboard
LeifuChen May 8, 2023
ac3729a
Added search bar into the dashboard market and search market by descr…
LeifuChen May 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions pages/dashboard/markets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import Head from 'next/head';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';

import Search from 'components/Table/Search';
import DashboardLayout from 'sections/dashboard/DashboardLayout';
import Markets from 'sections/dashboard/Markets';
import FuturesMarketsTable from 'sections/dashboard/FuturesMarketsTable';
import { fetchMarkets } from 'state/futures/actions';
import { useAppSelector, usePollAction } from 'state/hooks';
import { selectNetwork } from 'state/wallet/selectors';
Expand All @@ -12,18 +15,28 @@ type MarketsProps = React.FC & { getLayout: (page: HTMLElement) => JSX.Element }
const MarketsPage: MarketsProps = () => {
const { t } = useTranslation();
const network = useAppSelector(selectNetwork);
const [search, setSearch] = useState('');
usePollAction('fetchMarkets', fetchMarkets, { dependencies: [network] });

return (
<>
<Head>
<title>{t('dashboard-markets.page-title')}</title>
</Head>
<Markets />
<SearchBarContainer>
<Search autoFocus value={search} onChange={setSearch} disabled={false} />
</SearchBarContainer>
<FuturesMarketsTable search={search} />
</>
);
};

const SearchBarContainer = styled.div`
display: flex;
height: 100%;
width: 100%;
`;

MarketsPage.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>;

export default MarketsPage;
22 changes: 17 additions & 5 deletions sections/dashboard/FuturesMarketsTable/FuturesMarketsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { wei } from '@synthetixio/wei';
import { useRouter } from 'next/router';
import { FC, useMemo } from 'react';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { CellProps } from 'react-table';
import styled from 'styled-components';
Expand All @@ -24,9 +24,13 @@ import {
import { useAppSelector } from 'state/hooks';
import { selectPreviousDayPrices, selectOffchainPricesInfo } from 'state/prices/selectors';
import { formatDollars } from 'utils/formatters/number';
import { getSynthDescription, MarketKeyByAsset } from 'utils/futures';
import { AssetDisplayByAsset, getSynthDescription, MarketKeyByAsset } from 'utils/futures';

const FuturesMarketsTable: FC = () => {
type FuturesMarketsTableProps = {
search?: string;
};

const FuturesMarketsTable: React.FC<FuturesMarketsTableProps> = ({ search }) => {
const { t } = useTranslation();
const router = useRouter();

Expand All @@ -38,7 +42,15 @@ const FuturesMarketsTable: FC = () => {
const markPrices = useAppSelector(selectMarkPrices);

let data = useMemo(() => {
return futuresMarkets.map((market) => {
const lowerSearch = search?.toLowerCase();
const markets = lowerSearch
? futuresMarkets.filter(
(m) =>
m.asset.toLowerCase().includes(lowerSearch) ||
AssetDisplayByAsset[m.asset]?.toLocaleLowerCase().includes(lowerSearch)
)
: futuresMarkets;
return markets.map((market) => {
const description = getSynthDescription(market.asset, t);
const volume = futuresVolumes[market.marketKey]?.volume;
const assetPriceInfo = pricesInfo[market.asset];
Expand All @@ -65,7 +77,7 @@ const FuturesMarketsTable: FC = () => {
marketClosureReason: market.marketClosureReason,
};
});
}, [futuresMarkets, pastRates, futuresVolumes, markPrices, pricesInfo, t]);
}, [search, futuresMarkets, t, futuresVolumes, pricesInfo, pastRates, markPrices]);

return (
<>
Expand Down
14 changes: 13 additions & 1 deletion sections/dashboard/Overview/Overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import TabButton from 'components/Button/TabButton';
import { DesktopOnlyView, MobileOrTabletView } from 'components/Media';
import FuturesIcon from 'components/Nav/FuturesIcon';
import { TabPanel } from 'components/Tab';
import Search from 'components/Table/Search';
import * as Text from 'components/Text';
import { ETH_ADDRESS, ETH_COINGECKO_ADDRESS } from 'constants/currency';
import Connector from 'containers/Connector';
Expand Down Expand Up @@ -68,6 +69,7 @@ const Overview: FC = () => {
const oneInchEnabled = network.id === 10;

const [exchangeTokens, setExchangeTokens] = useState<any>([]);
const [search, setSearch] = useState('');

useFetchAction(fetchTokenList, { dependencies: [network] });

Expand Down Expand Up @@ -201,7 +203,10 @@ const Overview: FC = () => {
<SynthBalancesTable exchangeTokens={exchangeTokens} />
</TabPanel>
<SubHeading>{t('dashboard.overview.markets-tabs.futures')}</SubHeading>
<FuturesMarketsTable />
<SearchBarContainer>
<Search autoFocus value={search} onChange={setSearch} disabled={false} />
</SearchBarContainer>
<FuturesMarketsTable search={search} />
</DesktopOnlyView>
<MobileOrTabletView>
<MobileDashboard exchangeTokens={exchangeTokens} />
Expand All @@ -210,6 +215,12 @@ const Overview: FC = () => {
);
};

const SearchBarContainer = styled.div`
display: flex;
height: 100%;
width: 100%;
`;

const TabButtonsContainer = styled.div`
display: flex;
margin-top: 16px;
Expand All @@ -226,6 +237,7 @@ const SubHeading = styled(Text.Heading).attrs({ variant: 'h4' })`
font-family: ${(props) => props.theme.fonts.bold};
font-size: 16px;
margin-top: 20px;
margin-bottom: 16px;
font-variant: all-small-caps;
color: ${(props) => props.theme.colors.selectedTheme.yellow};
`;
Expand Down
18 changes: 14 additions & 4 deletions sections/futures/Trade/MarketsDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,15 @@ import { selectPreviousDayPrices } from 'state/prices/selectors';
import { FetchStatus } from 'state/types';
import media from 'styles/media';
import { floorNumber, formatDollars, zeroBN } from 'utils/formatters/number';
import { getMarketName, getSynthDescription, MarketKeyByAsset } from 'utils/futures';
import {
AssetDisplayByAsset,
getMarketName,
getSynthDescription,
MarketKeyByAsset,
} from 'utils/futures';

import MarketsDropdownSelector, { MARKET_SELECTOR_HEIGHT_MOBILE } from './MarketsDropdownSelector';
import { TRADE_PANEL_WIDTH_LG, TRADE_PANEL_WIDTH_MD } from '../styles';
import MarketsDropdownSelector, { MARKET_SELECTOR_HEIGHT_MOBILE } from './MarketsDropdownSelector';

type MarketsDropdownProps = {
mobile?: boolean;
Expand Down Expand Up @@ -98,8 +103,13 @@ const MarketsDropdown: React.FC<MarketsDropdownProps> = ({ mobile }) => {
const selectedPastPrice = getPastPrice(marketAsset);

const options = useMemo(() => {
const markets = search
? futuresMarkets.filter((m) => m.asset.toLowerCase().includes(search.toLowerCase()))
const lowerSearch = search?.toLowerCase();
const markets = lowerSearch
? futuresMarkets.filter(
(m) =>
m.asset.toLowerCase().includes(lowerSearch) ||
AssetDisplayByAsset[m.asset]?.toLocaleLowerCase().includes(lowerSearch)
)
: futuresMarkets;

const sortedMarkets = markets
Expand Down