Skip to content

Commit

Permalink
v6.0.4-alpha
Browse files Browse the repository at this point in the history
v6.0.4-alpha
  • Loading branch information
platschi authored Jan 25, 2023
2 parents da6ee2c + b522615 commit ea56d2b
Show file tree
Hide file tree
Showing 264 changed files with 2,539 additions and 3,573 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/codeql.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Binary file added assets/png/currencies/WBTC.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 25 additions & 27 deletions components/Badge/MarketBadge.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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;

Expand Down
68 changes: 34 additions & 34 deletions components/BaseModal/BaseModal.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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}
Expand All @@ -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)`
Expand Down Expand Up @@ -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;
Expand Down
68 changes: 0 additions & 68 deletions components/Button/NavButton.tsx

This file was deleted.

4 changes: 2 additions & 2 deletions components/Button/TabButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
14 changes: 1 addition & 13 deletions components/Card/Card.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion components/Card/CardBody.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
4 changes: 2 additions & 2 deletions components/Card/CardHeader.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions components/Card/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
export { default } from './Card';
export { default as CardHeader } from './CardHeader';
export { default as CardBody } from './CardBody';
47 changes: 22 additions & 25 deletions components/ChangePercent/ChangePercent.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand Down
Loading

0 comments on commit ea56d2b

Please sign in to comment.