Kwenta · platschi · May 29, 2023 · May 29, 2023 · May 29, 2023 · May 29, 2023
diff --git a/.github/workflows/sentry.yml b/.github/workflows/sentry.yml
@@ -15,6 +15,14 @@ jobs:
       with:
         fetch-depth: 0
 
+    - name: Setup Node.js environment
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16.x
+
+    - name: Build code
+      run: npm i --legacy-peer-deps && npm run build
+
     - name: Create Sentry release
       uses: getsentry/action-release@v1
       env:
@@ -23,4 +31,4 @@ jobs:
         SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
       with:
         environment: production
-        sourcemaps: '/'
+        sourcemaps: '/.next'
diff --git a/constants/announcement.ts b/constants/announcement.ts
@@ -1,3 +1,5 @@
+import { MILLISECONDS_PER_DAY } from 'sdk/constants/period';
+
 // Shows or hides the home page banner entirely when set to true/false
 export const BANNER_ENABLED = true;
 // Sets the link destination for the banner component, or renders the banner as
@@ -7,3 +9,9 @@ export const BANNER_LINK_URL =
 // Sets the text displayed on the home page banner
 export const BANNER_TEXT =
 	'Optimism Bedrock upgrade planned for 16:00 UTC on June 6, 2023. Kwenta will be unavailable during the upgrade, and positions will be close-only for 48h prior to the upgrade. See the blog for details.';
+// Sets the height of the banner component on desktop
+export const BANNER_HEIGHT_DESKTOP = 50;
+// Sets the height of the banner component on mobile
+export const BANNER_HEIGHT_MOBILE = 70;
+// Sets the waiting time of the banner component before it is reactive
+export const BANNER_WAITING_TIME = 2 * MILLISECONDS_PER_DAY;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "kwenta",
-	"version": "7.1.8",
+	"version": "7.1.9",
 	"scripts": {
 		"dev": "next",
 		"build": "next build",

diff --git a/pages/dashboard/markets.tsx b/pages/dashboard/markets.tsx
@@ -21,10 +21,10 @@ const MarketsPage: MarketsProps = () => {
 
 	return (
 		<>
-			<Spacer height={15} />
 			<Head>
 				<title>{t('dashboard-markets.page-title')}</title>
 			</Head>
+			<Spacer height={15} />
 			<SearchBarContainer>
 				<Search autoFocus value={search} onChange={setSearch} disabled={false} />
 			</SearchBarContainer>

diff --git a/sections/futures/Trade/MarketsDropdown.tsx b/sections/futures/Trade/MarketsDropdown.tsx
@@ -15,11 +15,13 @@ import Table, { TableHeader, TableNoResults } from 'components/Table';
 import Search from 'components/Table/Search';
 import { Body } from 'components/Text';
 import NumericValue from 'components/Text/NumericValue';
+import { BANNER_HEIGHT_DESKTOP, BANNER_HEIGHT_MOBILE } from 'constants/announcement';
 import ROUTES from 'constants/routes';
 import useClickOutside from 'hooks/useClickOutside';
 import useLocalStorage from 'hooks/useLocalStorage';
 import { FuturesMarketAsset } from 'sdk/types/futures';
 import { getDisplayAsset } from 'sdk/utils/futures';
+import { selectShowBanner } from 'state/app/selectors';
 import {
 	selectMarketAsset,
 	selectMarkets,
@@ -59,6 +61,7 @@ const MarketsDropdown: React.FC<MarketsDropdownProps> = ({ mobile }) => {
 	const [open, setOpen] = useState(false);
 	const [search, setSearch] = useState('');
 	const [favMarkets, setFavMarkets] = useLocalStorage<string[]>('favorite-markets', []);
+	const showBanner = useAppSelector(selectShowBanner);
 
 	const { ref } = useClickOutside(() => setOpen(false));
 
@@ -160,6 +163,12 @@ const MarketsDropdown: React.FC<MarketsDropdownProps> = ({ mobile }) => {
 
 	const isFetching = !futuresMarkets.length && marketsQueryStatus.status === FetchStatus.Loading;
 
+	const tableHeight: number = useMemo(() => {
+		const BANNER_HEIGHT = mobile ? BANNER_HEIGHT_MOBILE : BANNER_HEIGHT_DESKTOP;
+		const OFFSET = mobile ? 159 : 205;
+		return Math.max(window.innerHeight - OFFSET - Number(showBanner) * BANNER_HEIGHT, 300);
+	}, [mobile, showBanner]);
+
 	return (
 		<SelectContainer mobile={mobile} ref={ref} accountType={accountType}>
 			<MarketsDropdownSelector
@@ -183,13 +192,7 @@ const MarketsDropdown: React.FC<MarketsDropdownProps> = ({ mobile }) => {
 				}}
 			/>
 			{open && (
-				<MarketsList
-					mobile={mobile}
-					height={Math.max(
-						window.innerHeight - (mobile ? 159 : accountType === 'cross_margin' ? 210 : 270),
-						300
-					)}
-				>
+				<MarketsList mobile={mobile} height={tableHeight}>
 					<SearchBarContainer>
 						<Search autoFocus onChange={setSearch} value={search} border={false} />
 					</SearchBarContainer>

diff --git a/sections/futures/Trade/MarketsDropdownSelector.tsx b/sections/futures/Trade/MarketsDropdownSelector.tsx
@@ -87,15 +87,13 @@ export const ContentContainer = styled(FlexDivCentered)<{ mobile?: boolean }>`
 		flex: 1;
 		margin-left: 12px;
 	}
-	width: ${(props) => (props.mobile ? '100%' : TRADE_PANEL_WIDTH_MD + 'px')};
+
 	border-right: ${(props) => props.theme.colors.selectedTheme.border};
 	border-bottom: ${(props) => props.theme.colors.selectedTheme.border};
 	${media.greaterThan('xxl')`
 		width: ${TRADE_PANEL_WIDTH_LG + 0.5}px;
 	`}
 
-	width: ${TRADE_PANEL_WIDTH_LG}px;
-
 	${media.lessThan('xxl')`
 		width: ${TRADE_PANEL_WIDTH_MD + 0.5}px;
 	`}

diff --git a/sections/leaderboard/AllTime.tsx b/sections/leaderboard/AllTime.tsx
@@ -12,6 +12,7 @@ import Connector from 'containers/Connector';
 import useENSAvatar from 'hooks/useENSAvatar';
 import { AccountStat } from 'queries/futures/types';
 import { StyledTrader } from 'sections/leaderboard/trader';
+import media from 'styles/media';
 import { getMedal } from 'utils/competition';
 import { staticMainnetProvider } from 'utils/network';
 
@@ -250,6 +251,9 @@ const StyledTable = styled(Table)<{ compact: boolean | undefined }>`
 		padding-top: 8px;
 		padding-bottom: 8px;
 	}
+	${media.lessThan('md')`
+		margin-bottom: 150px;
+	`}
 `;
 
 const TableTitle = styled.div`

diff --git a/sections/shared/Layout/HomeLayout/Banner.tsx b/sections/shared/Layout/HomeLayout/Banner.tsx
@@ -1,68 +1,92 @@
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 
 import { DesktopOnlyView, MobileOrTabletView } from 'components/Media';
-import { BANNER_ENABLED, BANNER_LINK_URL, BANNER_TEXT } from 'constants/announcement';
-import { MILLISECONDS_PER_DAY } from 'sdk/constants/period';
+import { Body } from 'components/Text';
+import {
+	BANNER_ENABLED,
+	BANNER_HEIGHT_DESKTOP,
+	BANNER_HEIGHT_MOBILE,
+	BANNER_LINK_URL,
+	BANNER_TEXT,
+	BANNER_WAITING_TIME,
+} from 'constants/announcement';
 import CloseIconWithHover from 'sections/shared/components/CloseIconWithHover';
+import { setShowBanner } from 'state/app/reducer';
+import { selectShowBanner } from 'state/app/selectors';
+import { useAppDispatch, useAppSelector } from 'state/hooks';
 import media from 'styles/media';
 import localStore from 'utils/localStore';
 
+type BannerViewProps = {
+	mode: 'mobile' | 'desktop';
+	onDismiss: (e: any) => void;
+	onDetails: () => void;
+};
+
+const BannerView: React.FC<BannerViewProps> = ({ mode, onDismiss, onDetails }) => {
+	const isMobile = mode === 'mobile';
+	const closeIconStyle = isMobile ? { flex: '0.08', marginTop: '5px' } : { marginTop: '3px' };
+	const closeIconProps = isMobile ? { width: 12, height: 12 } : {};
+	const linkSize = isMobile ? 'small' : 'medium';
+
+	return (
+		<FuturesBannerContainer onClick={onDetails}>
+			<FuturesBannerLinkWrapper>
+				<FuturesLink size={linkSize}>
+					<strong>Important: </strong>
+					{BANNER_TEXT}
+				</FuturesLink>
+				<CloseIconWithHover onClick={onDismiss} style={closeIconStyle} {...closeIconProps} />
+			</FuturesBannerLinkWrapper>
+		</FuturesBannerContainer>
+	);
+};
+
 const Banner = memo(() => {
-	const currentTime = new Date().getTime();
+	const dispatch = useAppDispatch();
+	const showBanner = useAppSelector(selectShowBanner);
 	const storedTime: number = localStore.get('bannerIsClicked') || 0;
-	const [isClicked, setIsClicked] = useState(currentTime - storedTime < 3 * MILLISECONDS_PER_DAY);
 
-	useEffect(() => {
-		if (isClicked) {
-			localStore.set('bannerIsClicked', currentTime);
-		}
-	}, [isClicked, currentTime]);
+	useEffect(
+		() => {
+			const currentTime = new Date().getTime();
+			dispatch(setShowBanner(currentTime - storedTime >= BANNER_WAITING_TIME));
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[storedTime]
+	);
 
-	const handleDismiss = useCallback((e) => {
-		setIsClicked(true);
-		e.stopPropagation();
-	}, []);
+	const handleDismiss = useCallback(
+		(e) => {
+			dispatch(setShowBanner(false));
+			localStore.set('bannerIsClicked', new Date().getTime());
+			e.stopPropagation();
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[]
+	);
 
 	const openDetails = useCallback(
 		() => window.open(BANNER_LINK_URL, '_blank', 'noopener noreferrer'),
 		[]
 	);
 
-	if (!BANNER_ENABLED || isClicked) return null;
+	if (!BANNER_ENABLED || !showBanner) return null;
 
 	return (
 		<>
 			<DesktopOnlyView>
-				<FuturesBannerContainer onClick={openDetails}>
-					<FuturesBannerLinkWrapper>
-						<FuturesLink>
-							<strong>Important: </strong>
-							{BANNER_TEXT}
-						</FuturesLink>
-						<CloseIconWithHover onClick={handleDismiss} style={{ marginTop: '3px' }} />
-					</FuturesBannerLinkWrapper>
-				</FuturesBannerContainer>
+				<BannerView mode="desktop" onDismiss={handleDismiss} onDetails={openDetails} />
 			</DesktopOnlyView>
 			<MobileOrTabletView>
-				<FuturesBannerContainer onClick={openDetails}>
-					<FuturesLink>
-						<strong>Important: </strong>
-						{BANNER_TEXT}
-					</FuturesLink>
-					<CloseIconWithHover
-						width={12}
-						height={12}
-						onClick={handleDismiss}
-						style={{ flex: '0.08', marginTop: '5px' }}
-					/>
-				</FuturesBannerContainer>
+				<BannerView mode="mobile" onDismiss={handleDismiss} onDetails={openDetails} />
 			</MobileOrTabletView>
 		</>
 	);
 });
 
-const FuturesLink = styled.div`
+const FuturesLink = styled(Body)`
 	margin-right: 5px;
 	padding: 4px 9px;
 	border-radius: 20px;
@@ -74,7 +98,7 @@ const FuturesLink = styled.div`
 `;
 
 const FuturesBannerContainer = styled.div<{ $compact?: boolean }>`
-	height: 50px;
+	height: ${BANNER_HEIGHT_DESKTOP}px;
 	width: 100%;
 	display: flex;
 	align-items: center;
@@ -92,7 +116,7 @@ const FuturesBannerContainer = styled.div<{ $compact?: boolean }>`
 		padding: 12px 10px;
 		border-radius: 0px;
 		gap: 5px;
-		height: 70px;
+		height: ${BANNER_HEIGHT_MOBILE}px;
 	`}
 `;
 
@@ -105,6 +129,7 @@ const FuturesBannerLinkWrapper = styled.div`
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	padding: 0 10px;
 `;
 
 export default Banner;
diff --git a/state/app/reducer.ts b/state/app/reducer.ts
@@ -25,6 +25,7 @@ export const APP_INITIAL_STATE: AppState = {
 		lastUpdatedAt: undefined,
 	},
 	acknowledgedOrdersWarning: false,
+	showBanner: true,
 };
 
 const appSlice = createSlice({
@@ -76,6 +77,9 @@ const appSlice = createSlice({
 		setAcknowledgedOrdersWarning: (state, action: PayloadAction<boolean>) => {
 			state.acknowledgedOrdersWarning = action.payload;
 		},
+		setShowBanner: (state, action: PayloadAction<boolean>) => {
+			state.showBanner = action.payload;
+		},
 	},
 	extraReducers: (builder) => {
 		builder.addCase(checkSynthetixStatus.fulfilled, (state, action) => {
@@ -96,6 +100,7 @@ export const {
 	updateTransactionStatus,
 	updateTransactionHash,
 	setAcknowledgedOrdersWarning,
+	setShowBanner,
 } = appSlice.actions;
 
 export default appSlice.reducer;
diff --git a/state/app/selectors.ts b/state/app/selectors.ts
@@ -12,3 +12,5 @@ export const selectGasPrice = (state: RootState) => unserializeGasPrice(state.ap
 export const selectTransaction = (state: RootState) => state.app.transaction;
 
 export const selectAckedOrdersWarning = (state: RootState) => state.app.acknowledgedOrdersWarning;
+
+export const selectShowBanner = (state: RootState) => state.app.showBanner;
diff --git a/state/app/types.ts b/state/app/types.ts
@@ -49,4 +49,5 @@ export type AppState = {
 	synthetixOnMaintenance: boolean;
 	kwentaStatus: KwentaStatus;
 	acknowledgedOrdersWarning: boolean;
+	showBanner: boolean;
 };
diff --git a/state/migrations.ts b/state/migrations.ts
@@ -86,6 +86,12 @@ export const migrations = {
 			futures: FUTURES_INITIAL_STATE,
 		};
 	},
+	31: (state: any) => {
+		return {
+			...state,
+			app: APP_INITIAL_STATE,
+		};
+	},
 };
 
 export default migrations;
diff --git a/state/store.ts b/state/store.ts
@@ -34,7 +34,7 @@ const LOG_REDUX = false;
 const persistConfig = {
 	key: 'root1',
 	storage,
-	version: 30,
+	version: 31,
 	blacklist: ['app', 'wallet'],
 	migrate: createMigrate(migrations, { debug: true }),
 };