v6.0.4-alpha

v6.0.4-alpha

.github/workflows/codeql.yml

@@ -42,4 +42,4 @@ jobs:
         category: "/language:${{matrix.language}}"
 
     - name: eslint-annotations
-      uses: DerLev/eslint-annotations@v1.0.1
+      uses: DerLev/eslint-annotations@v1.1.1

components/Badge/MarketBadge.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
@@ -20,45 +20,43 @@ type TransitionBadgeProps = {
 	isOpen: boolean;
 };
 
-export const TransitionBadge: FC<TransitionBadgeProps> = ({ isOpen }) => {
+export const TransitionBadge: FC<TransitionBadgeProps> = memo(({ isOpen }) => {
 	const { t } = useTranslation();
 
 	return (
 		<StyledBadge color={isOpen ? 'yellow' : 'red'}>
-			{t(`futures.market.state.${isOpen ? 'closes-soon' : 'opens-soon'}`)}
+			{t(`futures.market.state.${isOpen ? 'closes' : 'opens'}-soon`)}
 		</StyledBadge>
 	);
-};
+});
 
-export const MarketBadge: FC<MarketBadgeProps> = ({
-	currencyKey,
-	isFuturesMarketClosed,
-	futuresClosureReason,
-}) => {
-	const { t } = useTranslation();
-	const isOpen = marketIsOpen((currencyKey as CurrencyKey) ?? null);
+export const MarketBadge: FC<MarketBadgeProps> = memo(
+	({ currencyKey, isFuturesMarketClosed, futuresClosureReason }) => {
+		const { t } = useTranslation();
+		const isOpen = marketIsOpen((currencyKey as CurrencyKey) ?? null);
 
-	const nextOpen = marketNextOpen((currencyKey as CurrencyKey) ?? '');
-	const nextTransition = marketNextTransition((currencyKey as CurrencyKey) ?? '');
+		const nextOpen = marketNextOpen((currencyKey as CurrencyKey) ?? '');
+		const nextTransition = marketNextTransition((currencyKey as CurrencyKey) ?? '');
 
-	const timerSetting = isOpen === null ? null : isOpen ? nextTransition : nextOpen;
-	const isMarketTransitioning = useIsMarketTransitioning(timerSetting ?? null);
+		const timerSetting = isOpen === null ? null : isOpen ? nextTransition : nextOpen;
+		const isMarketTransitioning = useIsMarketTransitioning(timerSetting ?? null);
 
-	if (typeof isFuturesMarketClosed !== 'boolean') {
-		return null;
-	}
+		if (typeof isFuturesMarketClosed !== 'boolean') {
+			return null;
+		}
 
-	if (isFuturesMarketClosed) {
-		const reason = futuresClosureReason || 'unknown';
-		return <Badge color="red">{t(`futures.market.state.${reason}`)}</Badge>;
-	}
+		if (isFuturesMarketClosed) {
+			const reason = futuresClosureReason || 'unknown';
+			return <Badge color="red">{t(`futures.market.state.${reason}`)}</Badge>;
+		}
 
-	if (isMarketTransitioning && isOpen !== null) {
-		return <TransitionBadge isOpen={isOpen} />;
-	}
+		if (isMarketTransitioning && isOpen !== null) {
+			return <TransitionBadge isOpen={isOpen} />;
+		}
 
-	return null;
-};
+		return null;
+	}
+);
 
 export default MarketBadge;
 

components/BaseModal/BaseModal.tsx

@@ -1,10 +1,10 @@
 import { DialogOverlay, DialogContent } from '@reach/dialog';
-import { FC, ReactNode } from 'react';
+import { FC, memo, ReactNode } from 'react';
 import { Rnd, Props } from 'react-rnd';
 import styled from 'styled-components';
 
 import CrossIcon from 'assets/svg/app/cross.svg';
-import Card from 'components/Card';
+import Card, { CardHeader, CardBody } from 'components/Card';
 import { zIndex } from 'constants/ui';
 import { resetButtonCSS } from 'styles/common';
 import media from 'styles/media';
@@ -19,32 +19,32 @@ type BaseModalProps = {
 	rndProps?: Props;
 };
 
-export const BaseModal: FC<BaseModalProps> = ({
-	onDismiss,
-	title,
-	children,
-	isOpen,
-	showCross = true,
-	lowercase,
-	rndProps = { disableDragging: true, enableResizing: false },
-	...rest
-}) => (
-	<StyledDialogOverlay onDismiss={onDismiss} isOpen={isOpen} {...rest}>
-		<StyledDialogContent aria-label="modal">
-			{rndProps.disableDragging ? (
-				<StyledCard className="card">
-					<StyledCardHeader lowercase={lowercase} noBorder className="card-header">
-						{title}
-						{showCross && (
-							<DismissButton onClick={onDismiss}>
-								<CrossIcon />
-							</DismissButton>
-						)}
-					</StyledCardHeader>
-					<StyledCardBody className="card-body">{children}</StyledCardBody>
-				</StyledCard>
-			) : (
-				<Rnd {...rndProps}>
+type ModalContentWrapperProps = {
+	rndProps?: Props;
+};
+
+const ModalContentWrapper: FC<ModalContentWrapperProps> = memo(({ children, rndProps }) => {
+	if (rndProps?.disableDragging) {
+		return <>{children}</>;
+	} else {
+		return <Rnd {...rndProps}>{children}</Rnd>;
+	}
+});
+
+export const BaseModal: FC<BaseModalProps> = memo(
+	({
+		onDismiss,
+		title,
+		children,
+		isOpen,
+		showCross = true,
+		lowercase,
+		rndProps = { disableDragging: true, enableResizing: false },
+		...rest
+	}) => (
+		<StyledDialogOverlay onDismiss={onDismiss} isOpen={isOpen} {...rest}>
+			<StyledDialogContent aria-label="modal">
+				<ModalContentWrapper rndProps={rndProps}>
 					<StyledCard className="card">
 						<StyledCardHeader lowercase={lowercase} noBorder className="card-header">
 							{title}
@@ -56,10 +56,10 @@ export const BaseModal: FC<BaseModalProps> = ({
 						</StyledCardHeader>
 						<StyledCardBody className="card-body">{children}</StyledCardBody>
 					</StyledCard>
-				</Rnd>
-			)}
-		</StyledDialogContent>
-	</StyledDialogOverlay>
+				</ModalContentWrapper>
+			</StyledDialogContent>
+		</StyledDialogOverlay>
+	)
 );
 
 const StyledDialogOverlay = styled(DialogOverlay)`
@@ -100,14 +100,14 @@ const StyledCard = styled(Card)`
 	`}
 `;
 
-const StyledCardHeader = styled(Card.Header)`
+const StyledCardHeader = styled(CardHeader)`
 	height: 45px;
 	font-size: 16px;
 	font-family: ${(props) => props.theme.fonts.regular};
 	padding: 20px;
 `;
 
-const StyledCardBody = styled(Card.Body)`
+const StyledCardBody = styled(CardBody)`
 	overflow-y: scroll;
 	padding: 0 20px;
 	padding-bottom: 20px;

components/Button/TabButton.tsx

@@ -19,8 +19,8 @@ export type TabButtonProps = {
 };
 
 const TabButton: React.FC<TabButtonProps> = React.memo(
-	({ title, detail, badge, active, icon, vertical, titleIcon, nofill, ...props }) => (
-		<StyledButton {...props} {...{ active, vertical, nofill }} noOutline>
+	({ title, detail, badge, icon, titleIcon, ...props }) => (
+		<StyledButton noOutline {...props}>
 			{!!icon && <div>{icon}</div>}
 			<div>
 				<div className="title-container">

components/Card/Card.tsx

@@ -1,30 +1,18 @@
 import { FC, memo } from 'react';
 import styled from 'styled-components';
 
-import CardBody, { CardBodyProps } from './CardBody';
-import CardHeader, { CardHeaderProps } from './CardHeader';
-
 type CardProps = {
 	children: React.ReactNode;
 	isRounded?: boolean;
 	className?: string;
 };
 
-interface StaticComponents {
-	Header: FC<CardHeaderProps>;
-	Body: FC<CardBodyProps>;
-}
-
-// @ts-ignore
-const Card: FC<CardProps> & StaticComponents = memo(({ children, isRounded, ...rest }) => (
+const Card: FC<CardProps> = memo(({ children, isRounded, ...rest }) => (
 	<Container isRounded={isRounded} {...rest}>
 		{children}
 	</Container>
 ));
 
-Card.Header = CardHeader;
-Card.Body = CardBody;
-
 const Container = styled.div<{ isRounded?: boolean }>`
 	display: flex;
 	flex-direction: column;

components/Card/CardBody.tsx

@@ -1,7 +1,7 @@
 import { FC, memo } from 'react';
 import styled from 'styled-components';
 
-import { FlexDivCol } from 'styles/common';
+import { FlexDivCol } from 'components/layout/flex';
 
 export type CardBodyProps = {
 	children: React.ReactNode;

components/Card/CardHeader.tsx

@@ -1,7 +1,7 @@
 import React, { FC, memo } from 'react';
 import styled from 'styled-components';
 
-import { FlexDivCentered } from 'styles/common';
+import { FlexDivCentered } from 'components/layout/flex';
 
 export type CardHeaderProps = {
 	children: React.ReactNode;
@@ -21,7 +21,7 @@ const CardHeader: FC<CardHeaderProps> = memo(
 const Container = styled(FlexDivCentered)<{ lowercase: boolean; noBorder: boolean }>`
 	position: relative;
 	color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
-	border-bottom: ${(props) => (props.noBorder ? 'none' : `1px solid ${props.theme.colors.navy}`)};
+	border-bottom: ${(props) => (props.noBorder ? 'none' : props.theme.colors.selectedTheme.border)};
 	height: 32px;
 	padding: 0 18px;
 	justify-content: flex-start;

components/Card/index.ts

@@ -1 +1,3 @@
 export { default } from './Card';
+export { default as CardHeader } from './CardHeader';
+export { default as CardBody } from './CardBody';

components/ChangePercent/ChangePercent.tsx

@@ -1,5 +1,5 @@
 import { wei, WeiSource } from '@synthetixio/wei';
-import { FC } from 'react';
+import { FC, memo } from 'react';
 import styled from 'styled-components';
 
 import ChangeNegativeIcon from 'assets/svg/app/change-negative.svg';
@@ -14,31 +14,28 @@ type ChangePercentProps = {
 	showArrow?: boolean;
 };
 
-export const ChangePercent: FC<ChangePercentProps> = ({
-	value,
-	decimals = 2,
-	showArrow = true,
-	...rest
-}) => {
-	const isValid = !!value;
-	const isZero = value && wei(value).eq(0);
-	const isPositive = value && wei(value).gt(0);
+export const ChangePercent: FC<ChangePercentProps> = memo(
+	({ value, decimals = 2, showArrow = true, ...rest }) => {
+		const isValid = !!value;
+		const isZero = value && wei(value).eq(0);
+		const isPositive = value && wei(value).gt(0);
 
-	return (
-		<CurrencyChange isValid={isValid} isPositive={isPositive} {...rest}>
-			{!isValid ? (
-				<>{NO_VALUE}</>
-			) : !showArrow ? (
-				<></>
-			) : !isZero && isPositive ? (
-				<ChangePositiveIcon />
-			) : (
-				<ChangeNegativeIcon />
-			)}
-			{value && formatPercent(wei(value).abs(), { minDecimals: decimals })}
-		</CurrencyChange>
-	);
-};
+		return (
+			<CurrencyChange isValid={isValid} isPositive={isPositive} {...rest}>
+				{!isValid ? (
+					<>{NO_VALUE}</>
+				) : !showArrow ? (
+					<></>
+				) : !isZero && isPositive ? (
+					<ChangePositiveIcon />
+				) : (
+					<ChangeNegativeIcon />
+				)}
+				{value && formatPercent(wei(value).abs(), { minDecimals: decimals })}
+			</CurrencyChange>
+		);
+	}
+);
 
 const CurrencyChange = styled.span<{ isValid: boolean; isPositive: boolean }>`
 	display: inline-flex;