From c531cf8cda842420c5b1a9293993210192d0a0b9 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Fri, 4 Oct 2024 20:48:48 +0530 Subject: [PATCH] feat: add url value component for use in re-designed confirmation pages (#11567) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Add url value component for use in re-designed confirmation pages ## **Related issues** Fixes: https://github.com/MetaMask/metamask-mobile/issues/11496 ## **Manual testing steps** 1. Run storybook locally 2. Check confirmations -> info row story ## **Screenshots/Recordings** Screenshot 2024-10-02 at 3 08 32 PM ## **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. --- CHANGELOG.md | 3 -- .../ExpandableSection.stories.tsx | 4 +- .../ExpandableSection.test.tsx | 12 ++--- .../ExpandableSection/ExpandableSection.tsx | 12 ++--- .../components/UI/InfoRow/InfoRow.stories.tsx | 10 ++++ .../InfoValue/InfoURL/InfoURL.styles.ts | 39 +++++++++++++++ .../InfoValue/InfoURL/InfoURL.test.tsx | 16 ++++++ .../UI/InfoRow/InfoValue/InfoURL/InfoURL.tsx | 50 +++++++++++++++++++ .../__snapshots__/InfoURL.test.tsx.snap | 27 ++++++++++ .../UI/InfoRow/InfoValue/InfoURL/index.ts | 1 + .../UI/InfoRow/InfoValue/InfoURL/style.ts | 36 +++++++++++++ 11 files changed, 193 insertions(+), 17 deletions(-) create mode 100644 app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.styles.ts create mode 100644 app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.test.tsx create mode 100644 app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.tsx create mode 100644 app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/__snapshots__/InfoURL.test.tsx.snap create mode 100644 app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/index.ts create mode 100644 app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/style.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 97b9b7095f6..5a6dc43a177 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -361,10 +361,7 @@ - [#10383](https://github.com/MetaMask/metamask-mobile/pull/10383): fix: race condition issues when doing batch-rpc calls in the DeeplinkProtocolService (#10383) - [#10365](https://github.com/MetaMask/metamask-mobile/pull/10365): fix: attribution link (#10365) - [#10303](https://github.com/MetaMask/metamask-mobile/pull/10303): fix: page navigation during QR accounts selection (#10303) -<<<<<<< HEAD -======= ->>>>>>> main ## 7.28.1 - Aug 15, 2024 ### Fixed - [#10637](https://github.com/MetaMask/metamask-mobile/pull/10637): fix: swap button blocked by SwapsController polling issue (#10637) diff --git a/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx index b9e4954aaad..a84d6da658c 100644 --- a/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx +++ b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx @@ -10,12 +10,12 @@ storiesOf('Confirmations / ExpandableSection', module) .addDecorator((getStory) => getStory()) .add('Default', () => ( Open } - modalContent={ + expandedContent={ Value-Text diff --git a/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.test.tsx b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.test.tsx index 79e6d686b58..052dfed8470 100644 --- a/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.test.tsx +++ b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.test.tsx @@ -10,12 +10,12 @@ describe('ExpandableSection', () => { it('should match snapshot for simple ExpandableSection', async () => { const container = render( Open } - modalContent={ + expandedContent={ Value-Text @@ -29,12 +29,12 @@ describe('ExpandableSection', () => { it('should display default content', async () => { const { getByText } = render( Open } - modalContent={ + expandedContent={ Value-Text @@ -48,12 +48,12 @@ describe('ExpandableSection', () => { it('should open modal when right icon is pressed', async () => { const { getByTestId, getByText } = render( Open } - modalContent={ + expandedContent={ Value-Text diff --git a/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.tsx b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.tsx index a2b4ba85bfa..7589d81f921 100644 --- a/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.tsx +++ b/app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.tsx @@ -13,16 +13,16 @@ import BottomModal from '../BottomModal'; import styleSheet from './ExpandableSection.styles'; interface ExpandableSectionProps { - content: ReactNode; - modalContent: ReactNode; + collapsedContent: ReactNode; + expandedContent: ReactNode; modalTitle: string; openButtonTestId?: string; closeButtonTestId?: string; } const ExpandableSection = ({ - content, - modalContent, + collapsedContent, + expandedContent, modalTitle, openButtonTestId, closeButtonTestId, @@ -33,7 +33,7 @@ const ExpandableSection = ({ return ( - {content} + {collapsedContent} {modalTitle} - {modalContent} + {expandedContent} )} diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx b/app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx index d27ec616aca..d30cf21b8ea 100644 --- a/app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx +++ b/app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx @@ -4,6 +4,7 @@ import { StyleProp, Text, TextStyle, View } from 'react-native'; import InfoRow from './InfoRow'; import InfoSection from './InfoSection'; +import InfoURL from './InfoValue/InfoURL'; const style = { container: { padding: 8 }, @@ -26,5 +27,14 @@ storiesOf('Confirmations / InfoRow', module) Value-Text Value-Text Value-Text Value-Text + }>URL + + + + + + + + )); diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.styles.ts b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.styles.ts new file mode 100644 index 00000000000..d0f448254c7 --- /dev/null +++ b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.styles.ts @@ -0,0 +1,39 @@ +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: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + value: { + color: theme.colors.text.default, + ...fontStyles.normal, + fontSize: 14, + marginTop: 8, + }, + warningContainer: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + marginRight: 8, + marginTop: 8, + paddingVertical: 2, + paddingHorizontal: 4, + backgroundColor: theme.colors.error.muted, + borderRadius: 4, + }, + warningText: { + color: theme.colors.error.default, + marginLeft: 4, + }, + }); +}; + +export default styleSheet; diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.test.tsx b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.test.tsx new file mode 100644 index 00000000000..1522f6dcd23 --- /dev/null +++ b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.test.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from '@testing-library/react-native'; + +import InfoURL from './index'; + +describe('InfoURL', () => { + it('should display url as expected', async () => { + const container = render(); + expect(container).toMatchSnapshot(); + }); + + it('should show warning if protocol is HTTP', async () => { + const { getByText } = render(); + expect(getByText('HTTP')).toBeDefined(); + }); +}); diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.tsx b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.tsx new file mode 100644 index 00000000000..e817131c64d --- /dev/null +++ b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Text, View } from 'react-native'; + +import Icon, { + IconColor, + IconName, + IconSize, +} from '../../../../../../../../component-library/components/Icons/Icon'; +import Logger from '../../../../../../../../util/Logger'; +import { useStyles } from '../../../../../../../../component-library/hooks'; +import styleSheet from './InfoURL.styles'; + +interface InfoURLProps { + url: string; +} + +const InfoURL = ({ url }: InfoURLProps) => { + let urlObject; + + try { + urlObject = new URL(url); + } catch (e) { + // eslint-disable-next-line no-console + Logger.error(e as Error, `InfoURL: new URL(url) cannot parse ${url}`); + } + + const isHTTP = urlObject?.protocol === 'http:'; + + const urlWithoutProtocol = url?.replace(/https?:\/\//u, ''); + + const { styles } = useStyles(styleSheet, {}); + + return ( + + {isHTTP && ( + + + HTTP + + )} + {urlWithoutProtocol} + + ); +}; + +export default InfoURL; diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/__snapshots__/InfoURL.test.tsx.snap b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/__snapshots__/InfoURL.test.tsx.snap new file mode 100644 index 00000000000..b0b5a0d7e0d --- /dev/null +++ b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/__snapshots__/InfoURL.test.tsx.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InfoURL should display url as expected 1`] = ` + + + google.com + + +`; diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/index.ts b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/index.ts new file mode 100644 index 00000000000..610413209b5 --- /dev/null +++ b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/index.ts @@ -0,0 +1 @@ +export { default } from './InfoURL'; diff --git a/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/style.ts b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/style.ts new file mode 100644 index 00000000000..e2b13bdea61 --- /dev/null +++ b/app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/style.ts @@ -0,0 +1,36 @@ +import { StyleSheet } from 'react-native'; + +import { Colors } from '../../../../../../../../util/theme/models'; +import { fontStyles } from '../../../../../../../../styles/common'; + +const createStyles = (colors: Colors) => + StyleSheet.create({ + container: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + value: { + color: colors.text.default, + ...fontStyles.normal, + fontSize: 14, + marginTop: 8, + }, + warningContainer: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + marginRight: 8, + marginTop: 8, + paddingVertical: 2, + paddingHorizontal: 4, + backgroundColor: colors.error.muted, + borderRadius: 4, + }, + warningText: { + color: colors.error.default, + marginLeft: 4, + }, + }); + +export default createStyles;