From a66d6097ce34bb0294d846dbfcef2e0b418ead44 Mon Sep 17 00:00:00 2001 From: Matthew Grainger Date: Thu, 3 Oct 2024 12:06:55 -0400 Subject: [PATCH] feat: added ContractTag component and updated stake confirmation interacting with section to match latest designs --- .../__snapshots__/KeyValueRow.test.tsx.snap | 156 ++---------------- .../StakeConfirmationMockData.ts | 5 +- .../StakeConfirmationView.tsx | 4 +- .../AccountHeaderCard.test.tsx | 8 +- .../AccountHeaderCard/AccountHeaderCard.tsx | 45 +---- .../AccountHeaderCard.types.ts | 5 +- .../AccountHeaderCard.test.tsx.snap | 153 ++--------------- .../ContractTag/ContractTag.test.tsx | 16 ++ .../StakingReview/ContractTag/ContractTag.tsx | 23 +++ .../ContractTag/ContractTag.types.ts | 3 + .../__snapshots__/ContractTag.test.tsx.snap | 69 ++++++++ 11 files changed, 150 insertions(+), 337 deletions(-) create mode 100644 app/components/UI/Stake/components/StakingReview/ContractTag/ContractTag.test.tsx create mode 100644 app/components/UI/Stake/components/StakingReview/ContractTag/ContractTag.tsx create mode 100644 app/components/UI/Stake/components/StakingReview/ContractTag/ContractTag.types.ts create mode 100644 app/components/UI/Stake/components/StakingReview/ContractTag/__snapshots__/ContractTag.test.tsx.snap diff --git a/app/component-library/components-temp/KeyValueRow/__snapshots__/KeyValueRow.test.tsx.snap b/app/component-library/components-temp/KeyValueRow/__snapshots__/KeyValueRow.test.tsx.snap index c83d3a4fd5fa..1e25d341c3b8 100644 --- a/app/component-library/components-temp/KeyValueRow/__snapshots__/KeyValueRow.test.tsx.snap +++ b/app/component-library/components-temp/KeyValueRow/__snapshots__/KeyValueRow.test.tsx.snap @@ -52,24 +52,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon "flexDirection": "row", } } - > - - Key Text - - + /> - - Value Text - - + /> @@ -184,24 +150,8 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon } } > - - Key Text - - - Value Text - - - Key Text - - - Value Text - - - Sample Key Text - - + /> - - Sample Value Text - - + /> diff --git a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationMockData.ts b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationMockData.ts index c07d5e237b18..75403d448a15 100644 --- a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationMockData.ts +++ b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationMockData.ts @@ -14,7 +14,4 @@ export const MOCK_REWARD_DATA = { }, }; -export const MOCK_STAKING_CONTRACT = { - address: '0x1', - name: 'MM Pooled Staking', -}; +export const MOCK_STAKING_CONTRACT_NAME = 'MM Pooled Staking'; diff --git a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx index 47e4aa9b7658..35e15bc2d9cd 100644 --- a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx +++ b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx @@ -11,7 +11,7 @@ import RewardsCard from '../../components/StakingReview/RewardsCard/RewardsCard' import ConfirmationFooter from '../../components/StakingReview/ConfirmationFooter/ConfirmationFooter'; import { MOCK_REWARD_DATA, - MOCK_STAKING_CONTRACT, + MOCK_STAKING_CONTRACT_NAME, MOCK_STAKING_REVIEW_DATA, } from './StakeConfirmationMockData'; import { StakeConfirmationViewProps } from './StakeConfirmationView.types'; @@ -34,7 +34,7 @@ const StakeConfirmationView = ({ route }: StakeConfirmationViewProps) => { tokenSymbol="wETH" /> - + { describe('AccountHeaderCard', () => { it('render matches snapshot', () => { const props: AccountHeaderCardProps = { - recipient: { - address: '0x1', - name: 'MM Pooled Staking', - }, + contractName: MOCK_STAKING_CONTRACT_NAME, }; const { getByText, toJSON } = renderWithProvider( @@ -66,7 +64,7 @@ describe('AccountHeaderCard', () => { expect(getByText(strings('stake.staking_from'))).toBeDefined(); expect(getByText(strings('stake.interacting_with'))).toBeDefined(); expect(getByText(strings('asset_details.network'))).toBeDefined(); - expect(getByText(props.recipient.name as string)).toBeDefined(); + expect(getByText(props.contractName)).toBeDefined(); expect(toJSON()).toMatchSnapshot(); }); diff --git a/app/components/UI/Stake/components/StakingReview/AccountHeaderCard/AccountHeaderCard.tsx b/app/components/UI/Stake/components/StakingReview/AccountHeaderCard/AccountHeaderCard.tsx index 05285e8bf26d..a9cd22a934a3 100644 --- a/app/components/UI/Stake/components/StakingReview/AccountHeaderCard/AccountHeaderCard.tsx +++ b/app/components/UI/Stake/components/StakingReview/AccountHeaderCard/AccountHeaderCard.tsx @@ -2,36 +2,27 @@ import React from 'react'; import { View } from 'react-native'; import { useSelector } from 'react-redux'; import { strings } from '../../../../../../../locales/i18n'; -import TagBase, { - TagShape, - TagSeverity, -} from '../../../../../../component-library/base-components/TagBase'; import KeyValueRow from '../../../../../../component-library/components-temp/KeyValueRow'; import Avatar, { AvatarVariant, AvatarSize, - AvatarAccountType, } from '../../../../../../component-library/components/Avatars/Avatar'; import Text from '../../../../../../component-library/components/Texts/Text'; -import { RootState } from '../../../../../../reducers'; import { selectSelectedInternalAccount } from '../../../../../../selectors/accountsController'; import { useStyles } from '../../../../../hooks/useStyles'; import Card from '../../../../../../component-library/components/Cards/Card'; import styleSheet from './AccountHeaderCard.styles'; import images from '../../../../../../images/image-icons'; -import { AccountHeaderCardProps } from './AccountHeaderCard.types'; import AccountTag from '../AccountTag/AccountTag'; import { selectNetworkName } from '../../../../../../selectors/networkInfos'; +import { AccountHeaderCardProps } from './AccountHeaderCard.types'; +import ContractTag from '../ContractTag/ContractTag'; -const AccountHeaderCard = ({ recipient }: AccountHeaderCardProps) => { +const AccountHeaderCard = ({ contractName }: AccountHeaderCardProps) => { const { styles } = useStyles(styleSheet, {}); const account = useSelector(selectSelectedInternalAccount); - const useBlockieIcon = useSelector( - (state: RootState) => state.settings.useBlockieIcon, - ); - const networkName = useSelector(selectNetworkName); return ( @@ -42,24 +33,10 @@ const AccountHeaderCard = ({ recipient }: AccountHeaderCardProps) => { field={{ label: { text: strings('stake.staking_from') } }} value={{ label: ( - - } - shape={TagShape.Pill} - severity={TagSeverity.Info} - > - {account.metadata.name} - + ), }} /> @@ -69,13 +46,7 @@ const AccountHeaderCard = ({ recipient }: AccountHeaderCardProps) => { label: { text: strings('stake.interacting_with') }, }} value={{ - label: ( - - ), + label: , }} /> diff --git a/app/components/UI/Stake/components/StakingReview/AccountHeaderCard/AccountHeaderCard.types.ts b/app/components/UI/Stake/components/StakingReview/AccountHeaderCard/AccountHeaderCard.types.ts index 85366700c846..3775cc7f14a0 100644 --- a/app/components/UI/Stake/components/StakingReview/AccountHeaderCard/AccountHeaderCard.types.ts +++ b/app/components/UI/Stake/components/StakingReview/AccountHeaderCard/AccountHeaderCard.types.ts @@ -1,6 +1,3 @@ export interface AccountHeaderCardProps { - recipient: { - address: string; - name?: string; - }; + contractName: string; } diff --git a/app/components/UI/Stake/components/StakingReview/AccountHeaderCard/__snapshots__/AccountHeaderCard.test.tsx.snap b/app/components/UI/Stake/components/StakingReview/AccountHeaderCard/__snapshots__/AccountHeaderCard.test.tsx.snap index c44c3a2a1a5b..a2d59dbf7ed9 100644 --- a/app/components/UI/Stake/components/StakingReview/AccountHeaderCard/__snapshots__/AccountHeaderCard.test.tsx.snap +++ b/app/components/UI/Stake/components/StakingReview/AccountHeaderCard/__snapshots__/AccountHeaderCard.test.tsx.snap @@ -391,11 +391,11 @@ exports[`AccountHeaderCard render matches snapshot 1`] = ` style={ { "alignSelf": "flex-start", - "backgroundColor": "#0376c91a", - "borderColor": "#0376c9", + "backgroundColor": "#f2f4f6", + "borderColor": "#bbc0c5", "borderRadius": 999, "borderWidth": 0, - "color": "#0376c9", + "color": "#6a737d", "padding": 16, "paddingHorizontal": 8, "paddingVertical": 2, @@ -411,146 +411,18 @@ exports[`AccountHeaderCard render matches snapshot 1`] = ` } } > - - - - - - - - - - - + width={20} + /> MM Pooled Staking diff --git a/app/components/UI/Stake/components/StakingReview/ContractTag/ContractTag.test.tsx b/app/components/UI/Stake/components/StakingReview/ContractTag/ContractTag.test.tsx new file mode 100644 index 000000000000..0138b88a3029 --- /dev/null +++ b/app/components/UI/Stake/components/StakingReview/ContractTag/ContractTag.test.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import renderWithProvider from '../../../../../../util/test/renderWithProvider'; +import ContractTag from './ContractTag'; +import { MOCK_STAKING_CONTRACT_NAME } from '../../../Views/StakeConfirmationView/StakeConfirmationMockData'; + +describe('ContractTag', () => { + it('render matches snapshot', () => { + const { getByText, toJSON } = renderWithProvider( + , + ); + + expect(getByText(MOCK_STAKING_CONTRACT_NAME)).toBeDefined(); + + expect(toJSON()).toMatchSnapshot(); + }); +}); diff --git a/app/components/UI/Stake/components/StakingReview/ContractTag/ContractTag.tsx b/app/components/UI/Stake/components/StakingReview/ContractTag/ContractTag.tsx new file mode 100644 index 000000000000..0de45b7c9975 --- /dev/null +++ b/app/components/UI/Stake/components/StakingReview/ContractTag/ContractTag.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import TagBase, { + TagSeverity, + TagShape, +} from '../../../../../../component-library/base-components/TagBase'; +import Icon, { + IconName, + IconSize, +} from '../../../../../../component-library/components/Icons/Icon'; +import Text from '../../../../../../component-library/components/Texts/Text'; +import { ContractTagProps } from './ContractTag.types'; + +const ContractTag = ({ name }: ContractTagProps) => ( + } + shape={TagShape.Pill} + severity={TagSeverity.Neutral} + > + {name} + +); + +export default ContractTag; diff --git a/app/components/UI/Stake/components/StakingReview/ContractTag/ContractTag.types.ts b/app/components/UI/Stake/components/StakingReview/ContractTag/ContractTag.types.ts new file mode 100644 index 000000000000..c19e9fd01baf --- /dev/null +++ b/app/components/UI/Stake/components/StakingReview/ContractTag/ContractTag.types.ts @@ -0,0 +1,3 @@ +export interface ContractTagProps { + name: string; +} diff --git a/app/components/UI/Stake/components/StakingReview/ContractTag/__snapshots__/ContractTag.test.tsx.snap b/app/components/UI/Stake/components/StakingReview/ContractTag/__snapshots__/ContractTag.test.tsx.snap new file mode 100644 index 000000000000..bd7e17af2f8e --- /dev/null +++ b/app/components/UI/Stake/components/StakingReview/ContractTag/__snapshots__/ContractTag.test.tsx.snap @@ -0,0 +1,69 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ContractTag render matches snapshot 1`] = ` + + + + + + MM Pooled Staking + + + +`;