From 56dbc4385fe150b6797f9df6e058bc1c3d12b345 Mon Sep 17 00:00:00 2001 From: Maxime Julian <44675210+therealemjy@users.noreply.github.com> Date: Tue, 8 Oct 2024 17:27:04 +0200 Subject: [PATCH] refactor: decouple nested components (#3353) Co-authored-by: therealemjy --- .changeset/chatty-mails-happen.md | 5 ++ .../AccountHealth/index.stories.tsx | 0 .../{ProgressBar => }/AccountHealth/index.tsx | 0 .../components/ActiveVotingProgress/index.tsx | 2 +- .../{ApproveSteps => ApprovalSteps}/index.tsx | 4 +- .../{ApproveSteps => ApprovalSteps}/styles.ts | 0 .../ApproveDelegateSteps/index.spec.tsx | 0 .../ApproveDelegateSteps/index.tsx | 2 +- .../ApproveTokenSteps/index.spec.tsx | 0 .../ApproveTokenSteps/index.tsx | 2 +- .../LabeledProgressBar/index.stories.tsx | 0 .../LabeledProgressBar/index.tsx | 0 .../LabeledProgressBar/styles.tsx | 0 .../index.stories.tsx | 13 ---- .../PercentageRepresentation/index.tsx | 30 -------- .../PercentageRepresentation/styles.ts | 16 ----- .../index.stories.tsx | 39 ----------- .../SuccessfulTransactionModal/index.tsx | 70 ------------------- .../SuccessfulTransactionModal/styles.ts | 47 ------------- apps/evm/src/components/index.ts | 12 ++-- .../useSuccessfulTransactionModal.ts | 7 -- 21 files changed, 16 insertions(+), 233 deletions(-) create mode 100644 .changeset/chatty-mails-happen.md rename apps/evm/src/components/{ProgressBar => }/AccountHealth/index.stories.tsx (100%) rename apps/evm/src/components/{ProgressBar => }/AccountHealth/index.tsx (100%) rename apps/evm/src/components/{ApproveSteps => ApprovalSteps}/index.tsx (95%) rename apps/evm/src/components/{ApproveSteps => ApprovalSteps}/styles.ts (100%) rename apps/evm/src/components/{ApproveSteps => }/ApproveDelegateSteps/index.spec.tsx (100%) rename apps/evm/src/components/{ApproveSteps => }/ApproveDelegateSteps/index.tsx (95%) rename apps/evm/src/components/{ApproveSteps => }/ApproveTokenSteps/index.spec.tsx (100%) rename apps/evm/src/components/{ApproveSteps => }/ApproveTokenSteps/index.tsx (95%) rename apps/evm/src/components/{ProgressBar => }/LabeledProgressBar/index.stories.tsx (100%) rename apps/evm/src/components/{ProgressBar => }/LabeledProgressBar/index.tsx (100%) rename apps/evm/src/components/{ProgressBar => }/LabeledProgressBar/styles.tsx (100%) delete mode 100644 apps/evm/src/components/ProgressBar/PercentageRepresentation/index.stories.tsx delete mode 100644 apps/evm/src/components/ProgressBar/PercentageRepresentation/index.tsx delete mode 100644 apps/evm/src/components/ProgressBar/PercentageRepresentation/styles.ts delete mode 100644 apps/evm/src/components/SuccessfulTransactionModal/index.stories.tsx delete mode 100644 apps/evm/src/components/SuccessfulTransactionModal/index.tsx delete mode 100644 apps/evm/src/components/SuccessfulTransactionModal/styles.ts delete mode 100644 apps/evm/src/hooks/__mocks__/useSuccessfulTransactionModal.ts diff --git a/.changeset/chatty-mails-happen.md b/.changeset/chatty-mails-happen.md new file mode 100644 index 0000000000..cf3b109f98 --- /dev/null +++ b/.changeset/chatty-mails-happen.md @@ -0,0 +1,5 @@ +--- +"@venusprotocol/evm": patch +--- + +decouple nested components diff --git a/apps/evm/src/components/ProgressBar/AccountHealth/index.stories.tsx b/apps/evm/src/components/AccountHealth/index.stories.tsx similarity index 100% rename from apps/evm/src/components/ProgressBar/AccountHealth/index.stories.tsx rename to apps/evm/src/components/AccountHealth/index.stories.tsx diff --git a/apps/evm/src/components/ProgressBar/AccountHealth/index.tsx b/apps/evm/src/components/AccountHealth/index.tsx similarity index 100% rename from apps/evm/src/components/ProgressBar/AccountHealth/index.tsx rename to apps/evm/src/components/AccountHealth/index.tsx diff --git a/apps/evm/src/components/ActiveVotingProgress/index.tsx b/apps/evm/src/components/ActiveVotingProgress/index.tsx index 908d3fc938..229197d81c 100644 --- a/apps/evm/src/components/ActiveVotingProgress/index.tsx +++ b/apps/evm/src/components/ActiveVotingProgress/index.tsx @@ -7,7 +7,7 @@ import { theme } from 'theme'; import type { Token } from 'types'; import { convertMantissaToTokens } from 'utilities'; -import { LabeledProgressBar } from '../ProgressBar/LabeledProgressBar'; +import { LabeledProgressBar } from '../LabeledProgressBar'; import { useStyles } from './styles'; interface ActiveVotingProgressProps { diff --git a/apps/evm/src/components/ApproveSteps/index.tsx b/apps/evm/src/components/ApprovalSteps/index.tsx similarity index 95% rename from apps/evm/src/components/ApproveSteps/index.tsx rename to apps/evm/src/components/ApprovalSteps/index.tsx index c5c2692b82..c2714bda13 100644 --- a/apps/evm/src/components/ApproveSteps/index.tsx +++ b/apps/evm/src/components/ApprovalSteps/index.tsx @@ -14,7 +14,7 @@ export interface ApprovalStepsProps { secondStepButtonLabel: string; } -interface AprrovalStepsExtraProps { +interface ApprovalStepsExtraProps { approvalAction: () => Promise; showApprovalSteps: boolean; isApprovalActionLoading: boolean; @@ -25,7 +25,7 @@ interface AprrovalStepsExtraProps { secondStepLabel: string; } -export const ApprovalSteps: React.FC = ({ +export const ApprovalSteps: React.FC = ({ approvalAction, showApprovalSteps, isApprovalActionLoading, diff --git a/apps/evm/src/components/ApproveSteps/styles.ts b/apps/evm/src/components/ApprovalSteps/styles.ts similarity index 100% rename from apps/evm/src/components/ApproveSteps/styles.ts rename to apps/evm/src/components/ApprovalSteps/styles.ts diff --git a/apps/evm/src/components/ApproveSteps/ApproveDelegateSteps/index.spec.tsx b/apps/evm/src/components/ApproveDelegateSteps/index.spec.tsx similarity index 100% rename from apps/evm/src/components/ApproveSteps/ApproveDelegateSteps/index.spec.tsx rename to apps/evm/src/components/ApproveDelegateSteps/index.spec.tsx diff --git a/apps/evm/src/components/ApproveSteps/ApproveDelegateSteps/index.tsx b/apps/evm/src/components/ApproveDelegateSteps/index.tsx similarity index 95% rename from apps/evm/src/components/ApproveSteps/ApproveDelegateSteps/index.tsx rename to apps/evm/src/components/ApproveDelegateSteps/index.tsx index 81bcfd76d9..69923c153a 100644 --- a/apps/evm/src/components/ApproveSteps/ApproveDelegateSteps/index.tsx +++ b/apps/evm/src/components/ApproveDelegateSteps/index.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'libs/translations'; -import { ApprovalSteps, type ApprovalStepsProps } from '..'; +import { ApprovalSteps, type ApprovalStepsProps } from '../ApprovalSteps'; export type ApproveDelegateStepsProps = { approveDelegateeAction: () => Promise; diff --git a/apps/evm/src/components/ApproveSteps/ApproveTokenSteps/index.spec.tsx b/apps/evm/src/components/ApproveTokenSteps/index.spec.tsx similarity index 100% rename from apps/evm/src/components/ApproveSteps/ApproveTokenSteps/index.spec.tsx rename to apps/evm/src/components/ApproveTokenSteps/index.spec.tsx diff --git a/apps/evm/src/components/ApproveSteps/ApproveTokenSteps/index.tsx b/apps/evm/src/components/ApproveTokenSteps/index.tsx similarity index 95% rename from apps/evm/src/components/ApproveSteps/ApproveTokenSteps/index.tsx rename to apps/evm/src/components/ApproveTokenSteps/index.tsx index deec47931d..ad62d81c46 100644 --- a/apps/evm/src/components/ApproveSteps/ApproveTokenSteps/index.tsx +++ b/apps/evm/src/components/ApproveTokenSteps/index.tsx @@ -1,7 +1,7 @@ import { useTranslation } from 'libs/translations'; import type { Token } from 'types'; -import { ApprovalSteps, type ApprovalStepsProps } from '..'; +import { ApprovalSteps, type ApprovalStepsProps } from '../ApprovalSteps'; export type ApproveTokenStepsProps = { token: Token; diff --git a/apps/evm/src/components/ProgressBar/LabeledProgressBar/index.stories.tsx b/apps/evm/src/components/LabeledProgressBar/index.stories.tsx similarity index 100% rename from apps/evm/src/components/ProgressBar/LabeledProgressBar/index.stories.tsx rename to apps/evm/src/components/LabeledProgressBar/index.stories.tsx diff --git a/apps/evm/src/components/ProgressBar/LabeledProgressBar/index.tsx b/apps/evm/src/components/LabeledProgressBar/index.tsx similarity index 100% rename from apps/evm/src/components/ProgressBar/LabeledProgressBar/index.tsx rename to apps/evm/src/components/LabeledProgressBar/index.tsx diff --git a/apps/evm/src/components/ProgressBar/LabeledProgressBar/styles.tsx b/apps/evm/src/components/LabeledProgressBar/styles.tsx similarity index 100% rename from apps/evm/src/components/ProgressBar/LabeledProgressBar/styles.tsx rename to apps/evm/src/components/LabeledProgressBar/styles.tsx diff --git a/apps/evm/src/components/ProgressBar/PercentageRepresentation/index.stories.tsx b/apps/evm/src/components/ProgressBar/PercentageRepresentation/index.stories.tsx deleted file mode 100644 index 41069c28bf..0000000000 --- a/apps/evm/src/components/ProgressBar/PercentageRepresentation/index.stories.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { Meta } from '@storybook/react'; - -import { withCenterStory } from 'stories/decorators'; - -import { PercentageRepresentation } from '.'; - -export default { - title: 'Components/PercentageRepresentation', - component: PercentageRepresentation, - decorators: [withCenterStory({ width: 100 })], -} as Meta; - -export const PercentageRepresentationDefault = () => ; diff --git a/apps/evm/src/components/ProgressBar/PercentageRepresentation/index.tsx b/apps/evm/src/components/ProgressBar/PercentageRepresentation/index.tsx deleted file mode 100644 index adc89bc5ea..0000000000 --- a/apps/evm/src/components/ProgressBar/PercentageRepresentation/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -/** @jsxImportSource @emotion/react */ -import Typography from '@mui/material/Typography'; - -import { formatPercentageToReadableValue } from 'utilities'; - -import { ProgressBar, type ProgressBarProps } from '..'; -import { useStyles } from './styles'; - -export const PercentageRepresentation: React.FC> = ({ - value, - className, -}) => { - const styles = useStyles(); - return ( -
- - - {formatPercentageToReadableValue(value)} - -
- ); -}; diff --git a/apps/evm/src/components/ProgressBar/PercentageRepresentation/styles.ts b/apps/evm/src/components/ProgressBar/PercentageRepresentation/styles.ts deleted file mode 100644 index c843325375..0000000000 --- a/apps/evm/src/components/ProgressBar/PercentageRepresentation/styles.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { css } from '@emotion/react'; -import { useTheme } from '@mui/material'; - -export const useStyles = () => { - const theme = useTheme(); - - return { - root: css` - display: flex; - align-items: center; - `, - percentage: css` - margin-left: ${theme.spacing(2)}; - `, - }; -}; diff --git a/apps/evm/src/components/SuccessfulTransactionModal/index.stories.tsx b/apps/evm/src/components/SuccessfulTransactionModal/index.stories.tsx deleted file mode 100644 index 74cb28394c..0000000000 --- a/apps/evm/src/components/SuccessfulTransactionModal/index.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import type { Meta } from '@storybook/react'; -import BigNumber from 'bignumber.js'; -import noop from 'noop-ts'; - -import { xvs } from '__mocks__/models/tokens'; - -import { withCenterStory, withThemeProvider } from 'stories/decorators'; - -import { SuccessfulTransactionModal } from '.'; - -export default { - title: 'Components/SuccessfulTransactionModal', - component: SuccessfulTransactionModal, - decorators: [withThemeProvider, withCenterStory({ width: 600 })], -} as Meta; - -export const InModal = () => ( - -); - -export const WithChildrenNoMessageModal = () => ( - Custom Content} - /> -); diff --git a/apps/evm/src/components/SuccessfulTransactionModal/index.tsx b/apps/evm/src/components/SuccessfulTransactionModal/index.tsx deleted file mode 100644 index ef00035b20..0000000000 --- a/apps/evm/src/components/SuccessfulTransactionModal/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -/** @jsxImportSource @emotion/react */ -import Typography from '@mui/material/Typography'; -import type BigNumber from 'bignumber.js'; - -import { ChainExplorerLink } from 'containers/ChainExplorerLink'; -import { useChainId } from 'libs/wallet'; -import type { Token } from 'types'; -import { convertMantissaToTokens } from 'utilities'; - -import { Icon } from '../Icon'; -import { Modal, type ModalProps } from '../Modal'; -import { TokenIcon } from '../TokenIcon'; -import { useStyles } from './styles'; - -export interface SuccessfulTransactionModalProps extends Omit { - title: string; - content?: string | React.ReactElement; - transactionHash: string; - amount?: { - token: Token; - value: BigNumber; - }; - className?: string; -} - -export const SuccessfulTransactionModal: React.FC = ({ - className, - title, - content, - amount, - transactionHash, - isOpen, - handleClose, -}) => { - const { chainId } = useChainId(); - const styles = useStyles(); - - return ( - -
- - -

{title}

- -
- {!!content && ( - - {content} - - )} - {amount && ( -
- - - - {convertMantissaToTokens({ - value: amount.value, - token: amount.token, - returnInReadableFormat: true, - })} - -
- )} -
- - -
- - ); -}; diff --git a/apps/evm/src/components/SuccessfulTransactionModal/styles.ts b/apps/evm/src/components/SuccessfulTransactionModal/styles.ts deleted file mode 100644 index 71b72b930e..0000000000 --- a/apps/evm/src/components/SuccessfulTransactionModal/styles.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { css } from '@emotion/react'; -import { useTheme } from '@mui/material'; - -export const useStyles = () => { - const theme = useTheme(); - - return { - container: css` - display: flex; - flex-direction: column; - align-items: center; - padding: ${theme.spacing(3, 0, 6)}; - `, - headerIcon: css` - width: ${theme.spacing(16)}; - height: ${theme.spacing(16)}; - color: ${theme.palette.interactive.success}; - margin-bottom: ${theme.spacing(6)}; - `, - title: css` - margin-bottom: ${theme.spacing(4)}; - text-align: center; - `, - messageContainer: css` - margin: auto; - display: flex; - align-items: center; - margin-bottom: ${theme.spacing(10)}; - - ${theme.breakpoints.down('sm')} { - display: block; - } - `, - amountContainer: css` - display: flex; - align-items: center; - margin-left: ${theme.spacing(2)}; - - ${theme.breakpoints.down('sm')} { - margin-left: 0; - } - `, - amountTokenIcon: css` - margin-right: ${theme.spacing(1)}; - `, - }; -}; diff --git a/apps/evm/src/components/index.ts b/apps/evm/src/components/index.ts index d30b7f3a49..4e8df977d7 100644 --- a/apps/evm/src/components/index.ts +++ b/apps/evm/src/components/index.ts @@ -8,8 +8,9 @@ export * from './Chip'; export * from './Countdown'; export * from './Delimiter'; export * from './EllipseAddress'; -export * from './ApproveSteps/ApproveTokenSteps'; -export * from './ApproveSteps/ApproveDelegateSteps'; +export * from './ApproveTokenSteps'; +export * from './ApproveDelegateSteps'; +export * from './ApprovalSteps'; export * from './Form'; export * from './Icon'; export * from './LabeledInlineContent'; @@ -21,12 +22,11 @@ export * from './ProgressBar'; export * from './ProgressCircle'; export * from './ProposalCard'; export * from './Card'; -export * from './ProgressBar/AccountHealth'; -export * from './ProgressBar/PercentageRepresentation'; -export * from './ProgressBar/LabeledProgressBar'; +export * from './ProgressBar'; +export * from './AccountHealth'; +export * from './LabeledProgressBar'; export * from './Select'; export * from './Spinner'; -export * from './SuccessfulTransactionModal'; export * from './Table'; export * from './Tabs'; export * from './TextField'; diff --git a/apps/evm/src/hooks/__mocks__/useSuccessfulTransactionModal.ts b/apps/evm/src/hooks/__mocks__/useSuccessfulTransactionModal.ts deleted file mode 100644 index 5033857d45..0000000000 --- a/apps/evm/src/hooks/__mocks__/useSuccessfulTransactionModal.ts +++ /dev/null @@ -1,7 +0,0 @@ -const openSuccessfulTransactionModal = vi.fn(); -const closeSuccessfulTransactionModal = vi.fn(); - -export default () => ({ - openSuccessfulTransactionModal, - closeSuccessfulTransactionModal, -});