Skip to content

Commit

Permalink
feat: added ContractTag component and updated stake confirmation inte…
Browse files Browse the repository at this point in the history 
…racting with section to match latest designs
  • Loading branch information
@Matt561
Matt561 committed Oct 3, 2024
1 parent 749a4a6 commit a66d609
Show file tree
Hide file tree
Showing 11 changed files with 150 additions and 337 deletions.
156 changes: 12 additions & 144 deletions app/component-library/components-temp/KeyValueRow/__snapshots__/KeyValueRow.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon
"flexDirection": "row",
}
}
>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
}
testID="label"
>
Key Text
</Text>
</View>
/>
</View>
</View>
<View
Expand Down Expand Up @@ -108,24 +91,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon
"flexDirection": "row",
}
}
>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
}
testID="label"
>
Value Text
</Text>
</View>
/>
</View>
</View>
</View>
Expand Down Expand Up @@ -184,24 +150,8 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon
}
}
>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
}
testID="label"
>
Key Text
</Text>
<TouchableOpacity
accessibilityLabel="Sample Tooltip 2} tooltip"
accessibilityLabel="Sample Tooltip 2 tooltip"
accessibilityRole="button"
accessible={true}
activeOpacity={1}
Expand All @@ -223,7 +173,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon
<SvgMock
color="#9fa6ae"
height={20}
name="Info"
name="Question"
style={
{
"height": 20,
Expand Down Expand Up @@ -273,24 +223,8 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon
}
}
>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
}
testID="label"
>
Value Text
</Text>
<TouchableOpacity
accessibilityLabel="Sample Tooltip 2} tooltip"
accessibilityLabel="Sample Tooltip 2 tooltip"
accessibilityRole="button"
accessible={true}
activeOpacity={1}
Expand All @@ -312,7 +246,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon
<SvgMock
color="#9fa6ae"
height={20}
name="Info"
name="Question"
style={
{
"height": 20,
Expand Down Expand Up @@ -369,24 +303,8 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with tool
}
}
>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
}
testID="label"
>
Key Text
</Text>
<TouchableOpacity
accessibilityLabel="Sample Tooltip 1} tooltip"
accessibilityLabel="Sample Tooltip 1 tooltip"
accessibilityRole="button"
accessible={true}
activeOpacity={1}
Expand All @@ -408,7 +326,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with tool
<SvgMock
color="#9fa6ae"
height={20}
name="Info"
name="Question"
style={
{
"height": 20,
Expand Down Expand Up @@ -446,24 +364,8 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with tool
}
}
>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
}
testID="label"
>
Value Text
</Text>
<TouchableOpacity
accessibilityLabel="Sample Tooltip 2} tooltip"
accessibilityLabel="Sample Tooltip 2 tooltip"
accessibilityRole="button"
accessible={true}
activeOpacity={1}
Expand All @@ -485,7 +387,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with tool
<SvgMock
color="#9fa6ae"
height={20}
name="Info"
name="Question"
style={
{
"height": 20,
Expand Down Expand Up @@ -541,24 +443,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render when there is
"flexDirection": "row",
}
}
>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
}
testID="label"
>
Sample Key Text
</Text>
</View>
/>
</View>
</View>
<View
Expand All @@ -585,24 +470,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render when there is
"flexDirection": "row",
}
}
>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
}
testID="label"
>
Sample Value Text
</Text>
</View>
/>
</View>
</View>
</View>
Expand Down
5 changes: 1 addition & 4 deletions app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationMockData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
4 changes: 2 additions & 2 deletions app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -34,7 +34,7 @@ const StakeConfirmationView = ({ route }: StakeConfirmationViewProps) => {
tokenSymbol="wETH"
/>
<View style={styles.cardsContainer}>
<AccountHeaderCard recipient={MOCK_STAKING_CONTRACT} />
<AccountHeaderCard contractName={MOCK_STAKING_CONTRACT_NAME} />
<EstimatedGasCard
gasCostEth={MOCK_STAKING_REVIEW_DATA.GAS_COST.ETH}
gasCostFiat={MOCK_STAKING_REVIEW_DATA.GAS_COST.FIAT}
Expand Down
8 changes: 3 additions & 5 deletions ...components/UI/Stake/components/StakingReview/AccountHeaderCard/AccountHeaderCard.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import configureMockStore from 'redux-mock-store';
import { backgroundState } from '../../../../../../util/test/initial-root-state';
import { Provider } from 'react-redux';
import { AccountHeaderCardProps } from './AccountHeaderCard.types';
import { MOCK_STAKING_CONTRACT_NAME } from '../../../Views/StakeConfirmationView/StakeConfirmationMockData';

const MOCK_ADDRESS_1 = '0x0';
const MOCK_ADDRESS_2 = '0x1';
Expand Down Expand Up @@ -51,10 +52,7 @@ jest.mock('@react-navigation/native', () => {
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(
Expand All @@ -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();
});
Expand Down
45 changes: 8 additions & 37 deletions app/components/UI/Stake/components/StakingReview/AccountHeaderCard/AccountHeaderCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -42,24 +33,10 @@ const AccountHeaderCard = ({ recipient }: AccountHeaderCardProps) => {
field={{ label: { text: strings('stake.staking_from') } }}
value={{
label: (
<TagBase
startAccessory={
<Avatar
variant={AvatarVariant.Account}
size={AvatarSize.Xs}
accountAddress={account?.address}
type={
useBlockieIcon
? AvatarAccountType.Blockies
: AvatarAccountType.JazzIcon
}
/>
}
shape={TagShape.Pill}
severity={TagSeverity.Info}
>
{account.metadata.name}
</TagBase>
<AccountTag
address={account?.address}
name={account.metadata.name}
/>
),
}}
/>
Expand All @@ -69,13 +46,7 @@ const AccountHeaderCard = ({ recipient }: AccountHeaderCardProps) => {
label: { text: strings('stake.interacting_with') },
}}
value={{
label: (
<AccountTag
address={recipient.address}
name={recipient.name}
useBlockieIcon={useBlockieIcon}
/>
),
label: <ContractTag name={contractName} />,
}}
/>
</Card>
Expand Down
5 changes: 1 addition & 4 deletions ...components/UI/Stake/components/StakingReview/AccountHeaderCard/AccountHeaderCard.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
export interface AccountHeaderCardProps {
recipient: {
address: string;
name?: string;
};
contractName: string;
}
Loading

0 comments on commit a66d609

Please sign in to comment.