LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(trading): 2803 console announcement banner (#2830)

Browse Source 
Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
Co-authored-by: Dariusz Majcherczyk <dariusz.majcherczyk@gmail.com>
This commit is contained in:
Sam Keen 2023-02-03 10:34:32 +00:00 committed by GitHub
parent b22f9156b5
commit 5ab5aa01a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 64 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/trading-e2e/src/integration/market-info.cy.ts
View File

@ -4,6 +4,7 @@ const marketInfoBtn = 'Info';
const row = 'key-value-table-row'; const row = 'key-value-table-row';
const marketTitle = 'accordion-title'; const marketTitle = 'accordion-title';
const externalLink = 'external-link'; const externalLink = 'external-link';
const accordionContent = 'accordion-content';
describe('market info is displayed', { tags: '@smoke' }, () => { describe('market info is displayed', { tags: '@smoke' }, () => {
before(() => { before(() => {
@ -179,7 +180,8 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
'termination.BTC.value' 'termination.BTC.value'
); );
cy.getByTestId(externalLink) cy.getByTestId(accordionContent)
.find(`[data-testid="${externalLink}"]`)
.should('have.attr', 'href') .should('have.attr', 'href')
.and('contain', '/oracles'); .and('contain', '/oracles');
}); });
@ -187,12 +189,14 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
it('proposal displayed', () => { it('proposal displayed', () => {
cy.getByTestId(marketTitle).contains('Proposal').click(); cy.getByTestId(marketTitle).contains('Proposal').click();
cy.getByTestId(externalLink) cy.getByTestId(accordionContent)
.find(`[data-testid="${externalLink}"]`)
.first() .first()
.should('have.text', 'View governance proposal') .should('have.text', 'View governance proposal')
.and('have.attr', 'href') .and('have.attr', 'href')
.and('contain', '/proposals/market-0'); .and('contain', '/proposals/market-0');
cy.getByTestId(externalLink) cy.getByTestId(accordionContent)
.find(`[data-testid="${externalLink}"]`)
.eq(1) .eq(1)
.should('have.text', 'Propose a change to market') .should('have.text', 'Propose a change to market')
.and('have.attr', 'href') .and('have.attr', 'href')

3
apps/trading-e2e/src/integration/markets.cy.ts
View File

@ -104,7 +104,8 @@ describe('markets table', { tags: '@smoke' }, () => {
'have.length', 'have.length',
10 10
); );
cy.getByTestId('external-link') cy.getByTestId('tab-proposed-markets')
.find('[data-testid="external-link"]')
.should('have.length', 11) .should('have.length', 11)
.last() .last()
.should('have.text', 'Propose a new market') .should('have.text', 'Propose a new market')

39
apps/trading/components/banner/banner.tsx Normal file
View File

@ -0,0 +1,39 @@
import {
AnnouncementBanner,
ExternalLink,
Icon,
} from '@vegaprotocol/ui-toolkit';
import { useGlobalStore } from '../../stores';
export const Banner = () => {
const { update, shouldDisplayAnnouncementBanner } = useGlobalStore(
(store) => ({
update: store.update,
shouldDisplayAnnouncementBanner: store.shouldDisplayAnnouncementBanner,
})
);
// Return an empty div so that the grid layout in _app.page.ts
// renders correctly
if (!shouldDisplayAnnouncementBanner) {
return <div />;
}
return (
<AnnouncementBanner>
<div className="grid grid-cols-[auto_1fr] gap-4 font-alpha calt uppercase text-center text-lg text-white">
<button
onClick={() => update({ shouldDisplayAnnouncementBanner: false })}
>
<Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />
</button>
<div>
<span className="pr-4">The Mainnet sims are live!</span>
<ExternalLink href="https://fairground.wtf/">
Come help stress test the network
</ExternalLink>
</div>
</div>
</AnnouncementBanner>
);
};

1
apps/trading/components/banner/index.tsx Normal file
View File

@ -0,0 +1 @@
export * from './banner';

12
apps/trading/pages/_app.page.tsx
View File

@ -33,6 +33,8 @@ import ToastsManager from './toasts-manager';
import { HashRouter, useLocation, useSearchParams } from 'react-router-dom'; import { HashRouter, useLocation, useSearchParams } from 'react-router-dom';
import { Connectors } from '../lib/vega-connectors'; import { Connectors } from '../lib/vega-connectors';
import { ViewingBanner } from '../components/viewing-banner'; import { ViewingBanner } from '../components/viewing-banner';
import { Banner } from '../components/banner';
import classNames from 'classnames';
const DEFAULT_TITLE = t('Welcome to Vega trading!'); const DEFAULT_TITLE = t('Welcome to Vega trading!');
@ -70,6 +72,11 @@ function AppBody({ Component }: AppProps) {
const location = useLocation(); const location = useLocation();
const { VEGA_ENV } = useEnvironment(); const { VEGA_ENV } = useEnvironment();
const gridClasses = classNames(
'h-full relative z-0 grid',
'grid-rows-[repeat(3,min-content),1fr,min-content]'
);
return ( return (
<div className="h-full dark:bg-black dark:text-white"> <div className="h-full dark:bg-black dark:text-white">
<Head> <Head>
@ -80,20 +87,21 @@ function AppBody({ Component }: AppProps) {
<VegaWalletProvider> <VegaWalletProvider>
<AppLoader> <AppLoader>
<Web3Provider> <Web3Provider>
<div className="h-full relative z-0 grid grid-rows-[min-content,min-content,1fr,min-content]"> <div className={gridClasses}>
<Navbar <Navbar
navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'}
/> />
<Banner />
<ViewingBanner /> <ViewingBanner />
<main data-testid={location.pathname}> <main data-testid={location.pathname}>
<Component /> <Component />
</main> </main>
<Footer /> <Footer />
</div>
<DialogsContainer /> <DialogsContainer />
<ToastsManager /> <ToastsManager />
<TransactionsHandler /> <TransactionsHandler />
<MaybeConnectEagerly /> <MaybeConnectEagerly />
</div>
</Web3Provider> </Web3Provider>
</AppLoader> </AppLoader>
</VegaWalletProvider> </VegaWalletProvider>

2
apps/trading/stores/global.ts
View File

@ -7,6 +7,7 @@ interface GlobalStore {
marketId: string | null; marketId: string | null;
update: (store: Partial<Omit<GlobalStore, 'update'>>) => void; update: (store: Partial<Omit<GlobalStore, 'update'>>) => void;
shouldDisplayWelcomeDialog: boolean; shouldDisplayWelcomeDialog: boolean;
shouldDisplayAnnouncementBanner: boolean;
} }
interface PageTitleStore { interface PageTitleStore {
@ -18,6 +19,7 @@ export const useGlobalStore = create<GlobalStore>((set) => ({
networkSwitcherDialog: false, networkSwitcherDialog: false,
marketId: LocalStorage.getItem('marketId') || null, marketId: LocalStorage.getItem('marketId') || null,
shouldDisplayWelcomeDialog: false, shouldDisplayWelcomeDialog: false,
shouldDisplayAnnouncementBanner: true,
update: (newState) => { update: (newState) => {
set( set(
produce((state: GlobalStore) => { produce((state: GlobalStore) => {