From 7f41cefb010210a5835d037e442fbbae78295778 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Fri, 4 Oct 2024 18:07:47 +0530 Subject: [PATCH 1/3] feat: expandable section for use in confirmation pages (#11528) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Adding an expandable section to be used in confirmation pages. ## **Related issues** Fixes: https://github.com/MetaMask/metamask-mobile/issues/11432 ## **Manual testing steps** 1. Run storybook locally 2. Check confirmations -> expandable section story ## **Screenshots/Recordings** https://github.com/user-attachments/assets/5b0c4b76-1f6a-4036-bbfe-52b945e1279a ## **Pre-merge author checklist** - [X] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [X] I've completed the PR template to the best of my ability - [X] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [X] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- .storybook/storybook.requires.js | 3 +- .../UI/InfoRow/InfoSection/InfoSection.tsx | 18 ----- .../UI/InfoRow/InfoSection/style.ts | 16 ----- .../Confirm/{style.ts => Confirm.styles.ts} | 13 ++-- .../Views/confirmations/Confirm/Confirm.tsx | 10 ++- .../UI/BottomModal/BottomModal.test.tsx | 2 +- .../UI/BottomModal/BottomModal.tsx | 6 +- .../__snapshots__/BottomModal.test.tsx.snap | 0 .../components}/UI/BottomModal/index.tsx | 0 .../ExpandableSection.stories.tsx | 25 +++++++ .../ExpandableSection.styles.ts | 51 ++++++++++++++ .../ExpandableSection.test.tsx | 70 +++++++++++++++++++ .../ExpandableSection/ExpandableSection.tsx | 67 ++++++++++++++++++ .../ExpandableSection.test.tsx.snap | 59 ++++++++++++++++ .../components/UI/ExpandableSection/index.ts | 1 + .../UI/InfoRow/InfoRow.stories.tsx | 2 +- .../components/UI/InfoRow/InfoRow.styles.ts} | 19 ++--- .../components}/UI/InfoRow/InfoRow.test.tsx | 0 .../components}/UI/InfoRow/InfoRow.tsx | 13 ++-- .../InfoRow/InfoSection/InfoSection.styles.ts | 19 +++++ .../InfoRow/InfoSection/InfoSection.test.tsx | 0 .../UI/InfoRow/InfoSection/InfoSection.tsx | 17 +++++ .../__snapshots__/InfoSection.test.tsx.snap | 0 .../UI/InfoRow/InfoSection/index.ts | 0 .../__snapshots__/InfoRow.test.tsx.snap | 0 .../components}/UI/InfoRow/index.ts | 0 26 files changed, 344 insertions(+), 67 deletions(-) delete mode 100644 app/components/UI/InfoRow/InfoSection/InfoSection.tsx delete mode 100644 app/components/UI/InfoRow/InfoSection/style.ts rename app/components/Views/confirmations/Confirm/{style.ts => Confirm.styles.ts} (54%) rename app/components/{ => Views/confirmations/components}/UI/BottomModal/BottomModal.test.tsx (83%) rename app/components/{ => Views/confirmations/components}/UI/BottomModal/BottomModal.tsx (86%) rename app/components/{ => Views/confirmations/components}/UI/BottomModal/__snapshots__/BottomModal.test.tsx.snap (100%) rename app/components/{ => Views/confirmations/components}/UI/BottomModal/index.tsx (100%) create mode 100644 app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx create mode 100644 app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.styles.ts create mode 100644 app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.test.tsx create mode 100644 app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.tsx create mode 100644 app/components/Views/confirmations/components/UI/ExpandableSection/__snapshots__/ExpandableSection.test.tsx.snap create mode 100644 app/components/Views/confirmations/components/UI/ExpandableSection/index.ts rename app/components/{ => Views/confirmations/components}/UI/InfoRow/InfoRow.stories.tsx (95%) rename app/components/{UI/InfoRow/style.ts => Views/confirmations/components/UI/InfoRow/InfoRow.styles.ts} (55%) rename app/components/{ => Views/confirmations/components}/UI/InfoRow/InfoRow.test.tsx (100%) rename app/components/{ => Views/confirmations/components}/UI/InfoRow/InfoRow.tsx (63%) create mode 100644 app/components/Views/confirmations/components/UI/InfoRow/InfoSection/InfoSection.styles.ts rename app/components/{ => Views/confirmations/components}/UI/InfoRow/InfoSection/InfoSection.test.tsx (100%) create mode 100644 app/components/Views/confirmations/components/UI/InfoRow/InfoSection/InfoSection.tsx rename app/components/{ => Views/confirmations/components}/UI/InfoRow/InfoSection/__snapshots__/InfoSection.test.tsx.snap (100%) rename app/components/{ => Views/confirmations/components}/UI/InfoRow/InfoSection/index.ts (100%) rename app/components/{ => Views/confirmations/components}/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap (100%) rename app/components/{ => Views/confirmations/components}/UI/InfoRow/index.ts (100%) diff --git a/.storybook/storybook.requires.js b/.storybook/storybook.requires.js index 31f1669fd92..aa8d7ba0ecf 100644 --- a/.storybook/storybook.requires.js +++ b/.storybook/storybook.requires.js @@ -123,7 +123,8 @@ const getStories = () => { "./app/component-library/base-components/TagBase/TagBase.stories.tsx": require("../app/component-library/base-components/TagBase/TagBase.stories.tsx"), "./app/component-library/components-temp/TagColored/TagColored.stories.tsx": require("../app/component-library/components-temp/TagColored/TagColored.stories.tsx"), "./app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx": require("../app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx"), - "./app/components/UI/InfoRow/InfoRow.stories.tsx": require("../app/components/UI/InfoRow/InfoRow.stories.tsx"), + "./app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx": require("../app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx"), + "./app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx": require("../app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx"), }; }; diff --git a/app/components/UI/InfoRow/InfoSection/InfoSection.tsx b/app/components/UI/InfoRow/InfoSection/InfoSection.tsx deleted file mode 100644 index 07c9e04c672..00000000000 --- a/app/components/UI/InfoRow/InfoSection/InfoSection.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { View } from 'react-native'; - -import { useTheme } from '../../../../util/theme'; -import createStyles from './style'; - -interface InfoSectionProps { - children: React.ReactNode | string; -} - -const InfoSection = ({ children }: InfoSectionProps) => { - const { colors } = useTheme(); - const styles = createStyles(colors); - - return {children}; -}; - -export default InfoSection; diff --git a/app/components/UI/InfoRow/InfoSection/style.ts b/app/components/UI/InfoRow/InfoSection/style.ts deleted file mode 100644 index 6c65859d747..00000000000 --- a/app/components/UI/InfoRow/InfoSection/style.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { StyleSheet } from 'react-native'; - -import { Colors } from '../../../../util/theme/models'; - -const createStyles = (colors: Colors) => - StyleSheet.create({ - container: { - backgroundColor: colors.background.default, - borderColor: colors.border.muted, - borderRadius: 8, - borderWidth: 1, - padding: 8, - }, - }); - -export default createStyles; diff --git a/app/components/Views/confirmations/Confirm/style.ts b/app/components/Views/confirmations/Confirm/Confirm.styles.ts similarity index 54% rename from app/components/Views/confirmations/Confirm/style.ts rename to app/components/Views/confirmations/Confirm/Confirm.styles.ts index b1ac082a128..17c0720ffab 100644 --- a/app/components/Views/confirmations/Confirm/style.ts +++ b/app/components/Views/confirmations/Confirm/Confirm.styles.ts @@ -1,12 +1,14 @@ import { StyleSheet } from 'react-native'; import Device from '../../../../util/device'; -import { Colors } from '../../../../util/theme/models'; +import { Theme } from '../../../../util/theme/models'; -const createStyles = (colors: Colors) => - StyleSheet.create({ +const styleSheet = (params: { theme: Theme }) => { + const { theme } = params; + + return StyleSheet.create({ container: { - backgroundColor: colors.background.alternative, + backgroundColor: theme.colors.background.alternative, paddingTop: 24, minHeight: '90%', borderTopLeftRadius: 20, @@ -15,5 +17,6 @@ const createStyles = (colors: Colors) => alignItems: 'center', }, }); +}; -export default createStyles; +export default styleSheet; diff --git a/app/components/Views/confirmations/Confirm/Confirm.tsx b/app/components/Views/confirmations/Confirm/Confirm.tsx index bf2c015f929..f4ac49e5f98 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.tsx @@ -1,23 +1,21 @@ import React from 'react'; import { View } from 'react-native'; -import BottomModal from '../../../../components/UI/BottomModal'; -import { useTheme } from '../../../../util/theme'; +import { useStyles } from '../../../../component-library/hooks'; +import BottomModal from '../components/UI/BottomModal'; import Footer from '../components/Confirm/Footer'; import Title from '../components/Confirm/Title'; import useConfirmationRedesignEnabled from '../hooks/useConfirmationRedesignEnabled'; -import createStyles from './style'; +import styleSheet from './Confirm.styles'; const Confirm = () => { - const { colors } = useTheme(); const { isRedesignedEnabled } = useConfirmationRedesignEnabled(); + const { styles } = useStyles(styleSheet, {}); if (!isRedesignedEnabled) { return null; } - const styles = createStyles(colors); - return ( diff --git a/app/components/UI/BottomModal/BottomModal.test.tsx b/app/components/Views/confirmations/components/UI/BottomModal/BottomModal.test.tsx similarity index 83% rename from app/components/UI/BottomModal/BottomModal.test.tsx rename to app/components/Views/confirmations/components/UI/BottomModal/BottomModal.test.tsx index e5204501b33..376338c38f1 100644 --- a/app/components/UI/BottomModal/BottomModal.test.tsx +++ b/app/components/Views/confirmations/components/UI/BottomModal/BottomModal.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Text, View } from 'react-native'; -import renderWithProvider from '../../../util/test/renderWithProvider'; +import renderWithProvider from '../../../../../../util/test/renderWithProvider'; import BottomModal from '.'; describe('BottomModal', () => { diff --git a/app/components/UI/BottomModal/BottomModal.tsx b/app/components/Views/confirmations/components/UI/BottomModal/BottomModal.tsx similarity index 86% rename from app/components/UI/BottomModal/BottomModal.tsx rename to app/components/Views/confirmations/components/UI/BottomModal/BottomModal.tsx index 7dbeb15ede4..f6fc6b9708b 100644 --- a/app/components/UI/BottomModal/BottomModal.tsx +++ b/app/components/Views/confirmations/components/UI/BottomModal/BottomModal.tsx @@ -1,11 +1,11 @@ -import React, { ReactChild } from 'react'; +import React, { ReactNode } from 'react'; import Modal from 'react-native-modal'; import { StyleSheet } from 'react-native'; -import { useTheme } from '../../../util/theme'; +import { useTheme } from '../../../../../../util/theme'; interface BottomModalProps { - children: ReactChild; + children: ReactNode; onClose?: () => void; } diff --git a/app/components/UI/BottomModal/__snapshots__/BottomModal.test.tsx.snap b/app/components/Views/confirmations/components/UI/BottomModal/__snapshots__/BottomModal.test.tsx.snap similarity index 100% rename from app/components/UI/BottomModal/__snapshots__/BottomModal.test.tsx.snap rename to app/components/Views/confirmations/components/UI/BottomModal/__snapshots__/BottomModal.test.tsx.snap diff --git a/app/components/UI/BottomModal/index.tsx b/app/components/Views/confirmations/components/UI/BottomModal/index.tsx similarity index 100% rename from app/components/UI/BottomModal/index.tsx rename to app/components/Views/confirmations/components/UI/BottomModal/index.tsx diff --git a/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx new file mode 100644 index 00000000000..b9e4954aaad --- /dev/null +++ b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react-native'; +import { Text, View } from 'react-native'; + +import InfoSection from '../InfoRow/InfoSection'; +import InfoRow from '../InfoRow'; +import ExpandableSection from './ExpandableSection'; + +storiesOf('Confirmations / ExpandableSection', module) + .addDecorator((getStory) => getStory()) + .add('Default', () => ( + + Open + + } + modalContent={ + + Value-Text + + } + modalTitle={'Title'} + /> + )); diff --git a/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.styles.ts b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.styles.ts new file mode 100644 index 00000000000..6c0d636820b --- /dev/null +++ b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.styles.ts @@ -0,0 +1,51 @@ +import { StyleSheet } from 'react-native'; + +import { Theme } from '../../../../../../util/theme/models'; +import { fontStyles } from '../../../../../../styles/common'; + +const styleSheet = (params: { theme: Theme }) => { + const { theme } = params; + + return StyleSheet.create({ + container: { + backgroundColor: theme.colors.background.default, + borderColor: theme.colors.border.muted, + borderRadius: 8, + borderWidth: 1, + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + padding: 16, + }, + // eslint-disable-next-line react-native/no-color-literals + modalContainer: { + backgroundColor: '#414141', + minHeight: '100%', + }, + modalContent: { + backgroundColor: theme.colors.background.alternative, + paddingTop: 24, + paddingBottom: 34, + paddingHorizontal: 16, + borderTopLeftRadius: 8, + borderTopRightRadius: 8, + }, + modalHeader: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + paddingBottom: 16, + }, + modalTitle: { + color: theme.colors.text.default, + ...fontStyles.bold, + fontSize: 14, + fontWeight: '700', + width: '90%', + textAlign: 'center', + }, + }); +}; + +export default styleSheet; diff --git a/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.test.tsx b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.test.tsx new file mode 100644 index 00000000000..79e6d686b58 --- /dev/null +++ b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.test.tsx @@ -0,0 +1,70 @@ +import React from 'react'; +import { Text, View } from 'react-native'; +import { fireEvent, render } from '@testing-library/react-native'; + +import InfoSection from '../InfoRow/InfoSection'; +import InfoRow from '../InfoRow'; +import ExpandableSection from './ExpandableSection'; + +describe('ExpandableSection', () => { + it('should match snapshot for simple ExpandableSection', async () => { + const container = render( + + Open + + } + modalContent={ + + Value-Text + + } + modalTitle={'Title'} + />, + ); + expect(container).toMatchSnapshot(); + }); + + it('should display default content', async () => { + const { getByText } = render( + + Open + + } + modalContent={ + + Value-Text + + } + modalTitle={'Title'} + />, + ); + expect(getByText('Open')).toBeDefined(); + }); + + it('should open modal when right icon is pressed', async () => { + const { getByTestId, getByText } = render( + + Open + + } + modalContent={ + + Value-Text + + } + modalTitle={'Title'} + />, + ); + expect(getByText('Open')).toBeDefined(); + fireEvent.press(getByTestId('openButtonTestId')); + expect(getByText('Value-Text')).toBeDefined(); + fireEvent.press(getByTestId('closeButtonTestId')); + expect(getByText('Open')).toBeDefined(); + }); +}); diff --git a/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.tsx b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.tsx new file mode 100644 index 00000000000..a2b4ba85bfa --- /dev/null +++ b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.tsx @@ -0,0 +1,67 @@ +import React, { ReactNode, useState } from 'react'; +import { Text, View } from 'react-native'; + +import ButtonIcon, { + ButtonIconSizes, +} from '../../../../../../component-library/components/Buttons/ButtonIcon'; +import { + IconColor, + IconName, +} from '../../../../../../component-library/components/Icons/Icon'; +import { useStyles } from '../../../../../../component-library/hooks'; +import BottomModal from '../BottomModal'; +import styleSheet from './ExpandableSection.styles'; + +interface ExpandableSectionProps { + content: ReactNode; + modalContent: ReactNode; + modalTitle: string; + openButtonTestId?: string; + closeButtonTestId?: string; +} + +const ExpandableSection = ({ + content, + modalContent, + modalTitle, + openButtonTestId, + closeButtonTestId, +}: ExpandableSectionProps) => { + const { styles } = useStyles(styleSheet, {}); + const [expanded, setExpanded] = useState(false); + + return ( + + + {content} + setExpanded(true)} + iconName={IconName.ArrowRight} + testID={openButtonTestId ?? 'openButtonTestId'} + /> + + {expanded && ( + + + + + setExpanded(false)} + iconName={IconName.ArrowLeft} + testID={closeButtonTestId ?? 'closeButtonTestId'} + /> + {modalTitle} + + {modalContent} + + + )} + + ); +}; + +export default ExpandableSection; diff --git a/app/components/Views/confirmations/components/UI/ExpandableSection/__snapshots__/ExpandableSection.test.tsx.snap b/app/components/Views/confirmations/components/UI/ExpandableSection/__snapshots__/ExpandableSection.test.tsx.snap new file mode 100644 index 00000000000..2ea8c40eae7 --- /dev/null +++ b/app/components/Views/confirmations/components/UI/ExpandableSection/__snapshots__/ExpandableSection.test.tsx.snap @@ -0,0 +1,59 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ExpandableSection should match snapshot for simple ExpandableSection 1`] = ` + + + + + Open + + + + + + + +`; diff --git a/app/components/Views/confirmations/components/UI/ExpandableSection/index.ts b/app/components/Views/confirmations/components/UI/ExpandableSection/index.ts new file mode 100644 index 00000000000..a4289641235 --- /dev/null +++ b/app/components/Views/confirmations/components/UI/ExpandableSection/index.ts @@ -0,0 +1 @@ +export { default } from './ExpandableSection'; diff --git a/app/components/UI/InfoRow/InfoRow.stories.tsx b/app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx similarity index 95% rename from app/components/UI/InfoRow/InfoRow.stories.tsx rename to app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx index ebc368e8fd8..d27ec616aca 100644 --- a/app/components/UI/InfoRow/InfoRow.stories.tsx +++ b/app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx @@ -10,7 +10,7 @@ const style = { title: { marginTop: 20, fontSize: 20, fontWeight: '700' }, }; -storiesOf('App Components / InfoRow', module) +storiesOf('Confirmations / InfoRow', module) .addDecorator((getStory) => getStory()) .add('Default', () => ( diff --git a/app/components/UI/InfoRow/style.ts b/app/components/Views/confirmations/components/UI/InfoRow/InfoRow.styles.ts similarity index 55% rename from app/components/UI/InfoRow/style.ts rename to app/components/Views/confirmations/components/UI/InfoRow/InfoRow.styles.ts index e7990c6c7ae..d82b6a30e56 100644 --- a/app/components/UI/InfoRow/style.ts +++ b/app/components/Views/confirmations/components/UI/InfoRow/InfoRow.styles.ts @@ -1,10 +1,12 @@ import { StyleSheet } from 'react-native'; -import { Colors } from '../../../util/theme/models'; -import { fontStyles } from '../../../styles/common'; +import { Theme } from '../../../../../../util/theme/models'; +import { fontStyles } from '../../../../../../styles/common'; -const createStyles = (colors: Colors) => - StyleSheet.create({ +const styleSheet = (params: { theme: Theme }) => { + const { theme } = params; + + return StyleSheet.create({ container: { display: 'flex', flexDirection: 'row', @@ -14,18 +16,19 @@ const createStyles = (colors: Colors) => paddingHorizontal: 8, }, label: { - color: colors.text.default, + color: theme.colors.text.default, ...fontStyles.bold, fontSize: 14, fontWeight: '500', marginTop: 8, }, value: { - color: colors.text.default, + color: theme.colors.text.default, ...fontStyles.normal, fontSize: 14, marginTop: 8, - } + }, }); +}; -export default createStyles; +export default styleSheet; diff --git a/app/components/UI/InfoRow/InfoRow.test.tsx b/app/components/Views/confirmations/components/UI/InfoRow/InfoRow.test.tsx similarity index 100% rename from app/components/UI/InfoRow/InfoRow.test.tsx rename to app/components/Views/confirmations/components/UI/InfoRow/InfoRow.test.tsx diff --git a/app/components/UI/InfoRow/InfoRow.tsx b/app/components/Views/confirmations/components/UI/InfoRow/InfoRow.tsx similarity index 63% rename from app/components/UI/InfoRow/InfoRow.tsx rename to app/components/Views/confirmations/components/UI/InfoRow/InfoRow.tsx index ddeff5c845b..f5c7f8b69d3 100644 --- a/app/components/UI/InfoRow/InfoRow.tsx +++ b/app/components/Views/confirmations/components/UI/InfoRow/InfoRow.tsx @@ -1,19 +1,16 @@ -import React from 'react'; +import React, { ReactNode } from 'react'; import { Text, View } from 'react-native'; -import { useTheme } from '../../../util/theme'; -import createStyles from './style'; +import { useStyles } from '../../../../../../component-library/hooks'; +import styleSheet from './InfoRow.styles'; interface InfoRowProps { label: string; - children: React.ReactNode | string; - tooltip?: string; + children: ReactNode | string; } const InfoRow = ({ label, children }: InfoRowProps) => { - const { colors } = useTheme(); - - const styles = createStyles(colors); + const { styles } = useStyles(styleSheet, {}); return ( diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoSection/InfoSection.styles.ts b/app/components/Views/confirmations/components/UI/InfoRow/InfoSection/InfoSection.styles.ts new file mode 100644 index 00000000000..46a075bcf36 --- /dev/null +++ b/app/components/Views/confirmations/components/UI/InfoRow/InfoSection/InfoSection.styles.ts @@ -0,0 +1,19 @@ +import { StyleSheet } from 'react-native'; + +import { Theme } from '../../../../../../../util/theme/models'; + +const styleSheet = (params: { theme: Theme }) => { + const { theme } = params; + + return StyleSheet.create({ + container: { + backgroundColor: theme.colors.background.default, + borderColor: theme.colors.border.muted, + borderRadius: 8, + borderWidth: 1, + padding: 8, + }, + }); +}; + +export default styleSheet; diff --git a/app/components/UI/InfoRow/InfoSection/InfoSection.test.tsx b/app/components/Views/confirmations/components/UI/InfoRow/InfoSection/InfoSection.test.tsx similarity index 100% rename from app/components/UI/InfoRow/InfoSection/InfoSection.test.tsx rename to app/components/Views/confirmations/components/UI/InfoRow/InfoSection/InfoSection.test.tsx diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoSection/InfoSection.tsx b/app/components/Views/confirmations/components/UI/InfoRow/InfoSection/InfoSection.tsx new file mode 100644 index 00000000000..2e8648ad62a --- /dev/null +++ b/app/components/Views/confirmations/components/UI/InfoRow/InfoSection/InfoSection.tsx @@ -0,0 +1,17 @@ +import React, { ReactNode } from 'react'; +import { View } from 'react-native'; + +import { useStyles } from '../../../../../../../component-library/hooks'; +import styleSheet from './InfoSection.styles'; + +interface InfoSectionProps { + children: ReactNode; +} + +const InfoSection = ({ children }: InfoSectionProps) => { + const { styles } = useStyles(styleSheet, {}); + + return {children}; +}; + +export default InfoSection; diff --git a/app/components/UI/InfoRow/InfoSection/__snapshots__/InfoSection.test.tsx.snap b/app/components/Views/confirmations/components/UI/InfoRow/InfoSection/__snapshots__/InfoSection.test.tsx.snap similarity index 100% rename from app/components/UI/InfoRow/InfoSection/__snapshots__/InfoSection.test.tsx.snap rename to app/components/Views/confirmations/components/UI/InfoRow/InfoSection/__snapshots__/InfoSection.test.tsx.snap diff --git a/app/components/UI/InfoRow/InfoSection/index.ts b/app/components/Views/confirmations/components/UI/InfoRow/InfoSection/index.ts similarity index 100% rename from app/components/UI/InfoRow/InfoSection/index.ts rename to app/components/Views/confirmations/components/UI/InfoRow/InfoSection/index.ts diff --git a/app/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap b/app/components/Views/confirmations/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap similarity index 100% rename from app/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap rename to app/components/Views/confirmations/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap diff --git a/app/components/UI/InfoRow/index.ts b/app/components/Views/confirmations/components/UI/InfoRow/index.ts similarity index 100% rename from app/components/UI/InfoRow/index.ts rename to app/components/Views/confirmations/components/UI/InfoRow/index.ts From a7027ad2e96ed4ea244d3da00aa0aa2114583553 Mon Sep 17 00:00:00 2001 From: OGPoyraz Date: Fri, 4 Oct 2024 15:20:08 +0200 Subject: [PATCH 2/3] fix: Fix unwanted `IncompleteAssetDisplayed` events (#11620) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This PR aims to stop `IncompleteAssetDisplayed` events appearing in the mix panel even the token is known by the API. For more information please see the mixpanel link https://mixpanel.com/project/1979229/view/132079/app/events#H35NJuByTVqi ## **Related issues** Fixes: https://github.com/MetaMask/MetaMask-planning/issues/3362 ## **Manual testing steps** No QA needed ## **Screenshots/Recordings** ### **Before** ### **After** ## **Pre-merge author checklist** - [X] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [X] I've completed the PR template to the best of my ability - [X] I’ve included tests if applicable - [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [X] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [X] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [X] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- app/components/UI/SimulationDetails/useBalanceChanges.ts | 5 ++--- .../confirmations/components/TransactionReview/index.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/components/UI/SimulationDetails/useBalanceChanges.ts b/app/components/UI/SimulationDetails/useBalanceChanges.ts index 9dfbbb91943..faa7aeb14bf 100644 --- a/app/components/UI/SimulationDetails/useBalanceChanges.ts +++ b/app/components/UI/SimulationDetails/useBalanceChanges.ts @@ -98,13 +98,12 @@ const fetchTokenExchangeRates = async ( chainId: Hex, ) => { try { - const x = await fetchTokenContractExchangeRates({ + return await fetchTokenContractExchangeRates({ tokenPricesService: new CodefiTokenPricesServiceV2(), nativeCurrency, tokenAddresses, chainId, }); - return x; } catch (err) { return {}; } @@ -201,7 +200,7 @@ export default function useBalanceChanges( [JSON.stringify(erc20TokenAddresses), chainId, fiatCurrency], ); - if (erc20Decimals.pending || erc20FiatRates.pending || !simulationData) { + if (erc20Decimals.pending || erc20FiatRates.pending || !simulationData ) { return { pending: true, value: [] }; } diff --git a/app/components/Views/confirmations/components/TransactionReview/index.js b/app/components/Views/confirmations/components/TransactionReview/index.js index e44979c1b20..369e3764d3a 100644 --- a/app/components/Views/confirmations/components/TransactionReview/index.js +++ b/app/components/Views/confirmations/components/TransactionReview/index.js @@ -593,7 +593,7 @@ class TransactionReview extends PureComponent { primaryCurrency={primaryCurrency} chainId={chainId} /> - {useTransactionSimulations && ( + {useTransactionSimulations && transactionSimulationData && ( Date: Fri, 4 Oct 2024 07:43:56 -0600 Subject: [PATCH 3/3] chore: Update UX CodeOwners responsibilities (#11614) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This new list was provided after consulting with the team, ensuring it reflects our current structure. ## **Related issues** Fixes: ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings** ### **Before** ### **After** ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- .github/CODEOWNERS | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 727f5b7c4d0..ade0e02ea85 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -94,10 +94,25 @@ app/components/Views/NftDetails @MetaMask/metamask-assets app/reducers/collectibles @MetaMask/metamask-assets # UX Team -app/components @MetaMask/wallet-ux -app/reducers/experimentalSettings @MetaMask/wallet-ux -app/reducers/modals @MetaMask/wallet-ux -app/reducers/navigation @MetaMask/wallet-ux -app/reducers/onboarding @MetaMask/wallet-ux -app/reducers/privacy @MetaMask/wallet-ux -app/reducers/settings @MetaMask/wallet-ux +app/components/Views/AccountActions @MetaMask/wallet-ux +app/components/Views/AccountSelector @MetaMask/wallet-ux +app/components/Views/AddressQRCode @MetaMask/wallet-ux +app/components/Views/EditAccountName @MetaMask/wallet-ux +app/components/Views/LockScreen @MetaMask/wallet-ux +app/components/Views/Login @MetaMask/wallet-ux +app/components/Views/NetworkConnect @MetaMask/wallet-ux +app/components/Views/NetworkSelector @MetaMask/wallet-ux +app/components/Views/Onboarding @MetaMask/wallet-ux +app/components/Views/OnboardingCarousel @MetaMask/wallet-ux +app/components/Views/OnboardingSuccess @MetaMask/wallet-ux +app/components/Views/QRAccountDisplay @MetaMask/wallet-ux +app/components/Views/QRScanner @MetaMask/wallet-ux +app/components/Views/Settings @MetaMask/wallet-ux +app/components/Views/TermsAndConditions @MetaMask/wallet-ux + +app/reducers/experimentalSettings @MetaMask/wallet-ux +app/reducers/modals @MetaMask/wallet-ux +app/reducers/navigation @MetaMask/wallet-ux +app/reducers/onboarding @MetaMask/wallet-ux +app/reducers/privacy @MetaMask/wallet-ux +app/reducers/settings @MetaMask/wallet-ux