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
+
+
+
+`;