From ab9a87b0b47eb01007bee668094232a4970f889c Mon Sep 17 00:00:00 2001 From: bachstatter Date: Fri, 2 Sep 2022 11:28:31 +1000 Subject: [PATCH 1/5] Use merge when merging the themes --- content/theme.ts | 38 ++++++++++++++++++++++++++++++-------- 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/content/theme.ts b/content/theme.ts index 8ecbc79f..663a726d 100644 --- a/content/theme.ts +++ b/content/theme.ts @@ -1,5 +1,6 @@ import { ChakraTheme, ComponentMultiStyleConfig, ComponentStyleConfig } from '@chakra-ui/react'; import { theme as chakraTheme } from '@synthetixio/v3-theme'; +import merge from 'lodash/merge'; const Progress: ComponentMultiStyleConfig = { parts: ['filledTrack', 'track'], @@ -48,6 +49,32 @@ const Button: ComponentStyleConfig = { bgGradient: chakraTheme.gradients['green-cyan']['700'], }, }, + error: { + bg: 'error', + }, + warning: { + bg: 'warning', + }, + + success: { + bg: 'success', + }, + disabled: { + bg: 'gray.900', + color: 'gray.600', + opacity: 0.5, + _disabled: { + opacity: 0.5, + }, + _hover: { + bg: 'gray.900', + opacity: 0.5, + _disabled: { + bg: 'gray.900', + opacity: 0.5, + }, + }, + }, }, }; @@ -110,8 +137,7 @@ const Menu: ComponentMultiStyleConfig = { }, }; -export const stakingTheme: Partial = { - ...chakraTheme, +export const stakingTheme: Partial = merge(chakraTheme, { colors: { ...chakraTheme.colors, error: chakraTheme.colors.red['400'], @@ -119,12 +145,8 @@ export const stakingTheme: Partial = { warning: chakraTheme.colors.orange['500'], }, components: { - ...chakraTheme.components, Progress, - Button: { - ...chakraTheme.components.Button, - ...Button, - }, + Button, Menu, Text, }, @@ -165,4 +187,4 @@ export const stakingTheme: Partial = { }, }, }, -}; +}); From d6b76a4c2691ace691cd6bf20948fb23246d2da1 Mon Sep 17 00:00:00 2001 From: bachstatter Date: Fri, 2 Sep 2022 11:29:07 +1000 Subject: [PATCH 2/5] Add Icons --- .../icons/CollectIcon/CollectIcon.tsx | 47 +++++++++++++++++++ .../icons/MaintainIcon/MaintainIcon.tsx | 36 ++++++++++++++ v2-components/icons/StakeIcon/StakeIcon.tsx | 44 +++++++++++++++++ 3 files changed, 127 insertions(+) create mode 100644 v2-components/icons/CollectIcon/CollectIcon.tsx create mode 100644 v2-components/icons/MaintainIcon/MaintainIcon.tsx create mode 100644 v2-components/icons/StakeIcon/StakeIcon.tsx diff --git a/v2-components/icons/CollectIcon/CollectIcon.tsx b/v2-components/icons/CollectIcon/CollectIcon.tsx new file mode 100644 index 00000000..33813a6f --- /dev/null +++ b/v2-components/icons/CollectIcon/CollectIcon.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { IconProps, Icon } from '@chakra-ui/react'; + +interface CollectIconProps extends IconProps { + width?: number; + height?: number; + color?: string; +} +export const CollectIcon = ({ + width = 32, + height = 32, + color = '#2ED9FF', + ...props +}: CollectIconProps) => ( + + + + + + +); diff --git a/v2-components/icons/MaintainIcon/MaintainIcon.tsx b/v2-components/icons/MaintainIcon/MaintainIcon.tsx new file mode 100644 index 00000000..e5e12ffa --- /dev/null +++ b/v2-components/icons/MaintainIcon/MaintainIcon.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { IconProps, Icon } from '@chakra-ui/react'; + +interface MaintainIconProps extends IconProps { + width?: number; + height?: number; + color?: string; +} +export const MaintainIcon = ({ + width = 28, + height = 36, + color = '#FF9A54', + + ...props +}: MaintainIconProps) => ( + + + + +); diff --git a/v2-components/icons/StakeIcon/StakeIcon.tsx b/v2-components/icons/StakeIcon/StakeIcon.tsx new file mode 100644 index 00000000..79d00c31 --- /dev/null +++ b/v2-components/icons/StakeIcon/StakeIcon.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { IconProps, Icon } from '@chakra-ui/react'; + +interface StakeIconProps extends IconProps { + width?: number; + height?: number; + fromColor?: string; + toColor?: string; +} +export const StakeIcon = ({ + width = 32, + height = 32, + fromColor = '#34EDB3', + toColor = '#00D1FF', + ...props +}: StakeIconProps) => ( + + + + + + + + + +); From 4ea45d0981e29f0547cd231849e82fca791eb144 Mon Sep 17 00:00:00 2001 From: bachstatter Date: Fri, 2 Sep 2022 11:30:59 +1000 Subject: [PATCH 3/5] Add the cards --- .../MainActionCard.stories.tsx | 21 ++ .../main-action-card/MainActionCard.tsx | 235 ++++++++++++++++++ v2-components/main-action-card/index.ts | 1 + 3 files changed, 257 insertions(+) create mode 100644 v2-components/main-action-card/MainActionCard.stories.tsx create mode 100644 v2-components/main-action-card/MainActionCard.tsx create mode 100644 v2-components/main-action-card/index.ts diff --git a/v2-components/main-action-card/MainActionCard.stories.tsx b/v2-components/main-action-card/MainActionCard.stories.tsx new file mode 100644 index 00000000..0a64d4cb --- /dev/null +++ b/v2-components/main-action-card/MainActionCard.stories.tsx @@ -0,0 +1,21 @@ +import { MainActionCard } from './MainActionCard'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +export default { + title: 'MainActionCard', + component: MainActionCard, +} as ComponentMeta; + +const Template: ComponentStory = (props) => ; + +export const Primary = Template.bind({}); + +Primary.args = { + targetCratioPercentage: 400, + liquidationCratioPercentage: 150, + currentCRatioPercentage: 440, + epoch: '07:14:55', + isFlagged: false, + isStaking: true, + hasClaimed: false, +}; diff --git a/v2-components/main-action-card/MainActionCard.tsx b/v2-components/main-action-card/MainActionCard.tsx new file mode 100644 index 00000000..b0f0206c --- /dev/null +++ b/v2-components/main-action-card/MainActionCard.tsx @@ -0,0 +1,235 @@ +import { Badge, Box, Button, Flex, Heading, Stack, Text } from '@chakra-ui/react'; +import React, { PropsWithChildren, ReactNode } from 'react'; +import { getVariant } from '../c-ratio-health-card/getVariant'; +import { InfoIcon } from '../icons'; +import { CollectIcon } from '../icons/CollectIcon/CollectIcon'; +import { MaintainIcon } from '../icons/MaintainIcon/MaintainIcon'; +import { StakeIcon } from '../icons/StakeIcon/StakeIcon'; + +const CardHeader = ({ + step, + headingText, + bodyText, + icon, +}: PropsWithChildren<{ step: number; headingText: string; bodyText: string; icon: ReactNode }>) => { + return ( + + + + {step} + + {icon} + + {headingText} + + {bodyText} + + + ); +}; + +const Container = ({ children }: PropsWithChildren<{}>) => { + return ( + + {children} + + ); +}; + +const StakeActionCard: React.FC = ({ isStaking }) => { + return ( + + } + /> + {isStaking ? ( + + ) : ( + + )} + + ); +}; +const MaintainActionCard: React.FC = ({ + liquidationCratioPercentage, + targetCratioPercentage, + currentCRatioPercentage, + isStaking, + isFlagged, +}) => { + const variant = getVariant({ + liquidationCratioPercentage, + targetCratioPercentage, + currentCRatioPercentage, + }); + + return ( + + } + /> + + + + {variant !== 'success' + ? 'Adjust to collect weekly rewards' + : 'Your ratio is looking healthy!'} + + + {!isStaking || variant === 'success' ? ( + + ) : ( + + )} + + ); +}; +const CollectActionCard: React.FC = ({ + liquidationCratioPercentage, + targetCratioPercentage, + currentCRatioPercentage, + isStaking, + epoch, + hasClaimed, +}) => { + const variant = getVariant({ + liquidationCratioPercentage, + targetCratioPercentage, + currentCRatioPercentage, + }); + const canClaim = !hasClaimed && variant === 'success'; + return ( + + } + /> + {isStaking && ( + + + + + EPOCH + + + + + {epoch} + + + {canClaim && ( + + + SNX Price + + + + {'$6.00'} + + + )} + + )} + {isStaking ? ( + + ) : ( + + )} + + ); +}; + +type Props = { + liquidationCratioPercentage: number; + targetCratioPercentage: number; + currentCRatioPercentage: number; + isStaking: boolean; + isFlagged: boolean; + epoch: string; + hasClaimed: boolean; +}; +export const MainActionCard: React.FC = (props) => { + return ( + + + + + + ); +}; diff --git a/v2-components/main-action-card/index.ts b/v2-components/main-action-card/index.ts new file mode 100644 index 00000000..f4d284e5 --- /dev/null +++ b/v2-components/main-action-card/index.ts @@ -0,0 +1 @@ +export * from './MainActionCard'; From a0d4776d3ca97942466c03235c77f6fe467a88c1 Mon Sep 17 00:00:00 2001 From: bachstatter Date: Fri, 2 Sep 2022 11:52:23 +1000 Subject: [PATCH 4/5] Maintain badge should not display is user isn't staking --- .../main-action-card/MainActionCard.tsx | 42 ++++++++++--------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/v2-components/main-action-card/MainActionCard.tsx b/v2-components/main-action-card/MainActionCard.tsx index b0f0206c..4fb30046 100644 --- a/v2-components/main-action-card/MainActionCard.tsx +++ b/v2-components/main-action-card/MainActionCard.tsx @@ -99,26 +99,28 @@ const MaintainActionCard: React.FC = ({ bodyText="Maintain your Collateralization Health." icon={} /> - - - - {variant !== 'success' - ? 'Adjust to collect weekly rewards' - : 'Your ratio is looking healthy!'} - - + {isStaking && ( + + + + {variant !== 'success' + ? 'Adjust to collect weekly rewards' + : 'Your ratio is looking healthy!'} + + + )} {!isStaking || variant === 'success' ? (