Skip to content

Commit

Permalink
Tweak designs and add test
Browse files Browse the repository at this point in the history
  • Loading branch information
@FrederikBolding
FrederikBolding committed Aug 22, 2024
1 parent 56607d6 commit cfead75
Show file tree
Hide file tree
Showing 8 changed files with 273 additions and 21 deletions.
22 changes: 16 additions & 6 deletions ui/components/ui/delineator/delineator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const ExpandableIcon = ({ isExpanded }: { isExpanded: boolean }) => {
<Icon
name={isExpanded ? IconName.ArrowUp : IconName.ArrowDown}
size={IconSize.Sm}
color={IconColor.iconMuted}
color={IconColor.primaryDefault}
/>
);
};
Expand All @@ -53,7 +53,7 @@ const Header = ({
type,
}: {
headerComponent: DelineatorProps['headerComponent'];
iconName: IconName;
iconName?: IconName;
isCollapsible: boolean;
isExpanded: boolean;
isLoading: boolean;
Expand All @@ -73,12 +73,12 @@ const Header = ({
justifyContent={JustifyContent.spaceBetween}
paddingTop={2}
paddingRight={4}
paddingBottom={2}
paddingBottom={isExpanded ? 0 : 2}
paddingLeft={4}
onClick={onHeaderClick}
>
<Box display={Display.Flex} alignItems={AlignItems.center}>
<AvatarIcon iconName={iconName} {...iconProps} />
{iconName && <AvatarIcon iconName={iconName} {...iconProps} />}
{overrideTextComponentColorByType({
component: headerComponent,
type,
Expand All @@ -89,14 +89,21 @@ const Header = ({
</Box>
);
};
const Content = ({ children }: { children: React.ReactNode }) => {
const Content = ({
children,
contentBoxProps,
}: {
children: React.ReactNode;
contentBoxProps: DelineatorProps['wrapperBoxProps'];
}) => {
return (
<Box
paddingTop={2}
paddingRight={4}
paddingBottom={4}
paddingLeft={4}
flexDirection={FlexDirection.Column}
{...contentBoxProps}
>
{children}
</Box>
Expand Down Expand Up @@ -134,6 +141,7 @@ export const Delineator: React.FC<DelineatorProps> = ({
onExpandChange,
type,
wrapperBoxProps,
contentBoxProps,
}) => {
const [isExpanded, setIsExpanded] = useState(isExpandedProp || false);
const shouldShowContent = !isCollapsible || (isCollapsible && isExpanded);
Expand All @@ -158,7 +166,9 @@ export const Delineator: React.FC<DelineatorProps> = ({
onHeaderClick={handleHeaderClick}
type={type}
/>
{shouldShowContent && !isLoading && <Content>{children}</Content>}
{shouldShowContent && !isLoading && (
<Content contentBoxProps={contentBoxProps}>{children}</Content>
)}
</Container>
);
};
3 changes: 2 additions & 1 deletion ui/components/ui/delineator/delineator.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import { Box, IconName, Text } from '../../component-library';
export type DelineatorProps = {
children?: React.ReactNode;
headerComponent: React.ReactElement<typeof Text>;
iconName: IconName;
iconName?: IconName;
isCollapsible?: boolean;
isExpanded?: boolean;
isLoading?: boolean;
onExpandChange?: (isExpanded: boolean) => void;
type?: DelineatorType;
wrapperBoxProps?: React.ComponentProps<typeof Box>;
contentBoxProps?: React.ComponentProps<typeof Box>;
};

export enum DelineatorType {
Expand Down
2 changes: 1 addition & 1 deletion ui/components/ui/delineator/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const getTextColorByType = (type?: DelineatorType) => {
case DelineatorType.Error:
return TextColor.errorDefault;
default:
return TextColor.textAlternative;
return TextColor.textDefault;
}
};

Expand Down
1 change: 0 additions & 1 deletion ui/pages/confirmations/components/confirm/snaps/snaps-insight/index.ts
View file

This file was deleted.

115 changes: 115 additions & 0 deletions ...rmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SnapsSection renders section for typed sign request 1`] = `
<div>
<div
class="mm-box mm-box--margin-bottom-4 mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
>
<div
class="mm-box delineator__wrapper mm-box--display-flex mm-box--flex-direction-column mm-box--background-color-background-default mm-box--rounded-lg"
>
<div
class="mm-box delineator__header delineator__header--expanded mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-0 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
>
<div
class="mm-box mm-box--display-flex mm-box--align-items-center"
>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
<span>
Insights from
<span
class="mm-box mm-text mm-text--inherit mm-text--font-weight-medium mm-box--color-inherit"
>
BIP-32 Test Snap
</span>
</span>
</p>
</div>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/arrow-up.svg');"
/>
</div>
<div
class="mm-box mm-box--padding-top-0 mm-box--padding-right-0 mm-box--padding-bottom-0 mm-box--padding-left-0 mm-box--flex-direction-column"
>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column box--height-full"
>
<p
class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--overflow-wrap-anywhere mm-box--color-inherit"
>
Hello world again!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
`;

exports[`SnapsSection renders section personal sign request 1`] = `
<div>
<div
class="mm-box mm-box--margin-bottom-4 mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
>
<div
class="mm-box delineator__wrapper mm-box--display-flex mm-box--flex-direction-column mm-box--background-color-background-default mm-box--rounded-lg"
>
<div
class="mm-box delineator__header delineator__header--expanded mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-0 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
>
<div
class="mm-box mm-box--display-flex mm-box--align-items-center"
>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
<span>
Insights from
<span
class="mm-box mm-text mm-text--inherit mm-text--font-weight-medium mm-box--color-inherit"
>
BIP-32 Test Snap
</span>
</span>
</p>
</div>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/arrow-up.svg');"
/>
</div>
<div
class="mm-box mm-box--padding-top-0 mm-box--padding-right-0 mm-box--padding-bottom-0 mm-box--padding-left-0 mm-box--flex-direction-column"
>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column box--height-full"
>
<p
class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--overflow-wrap-anywhere mm-box--color-inherit"
>
Hello world!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
`;
35 changes: 27 additions & 8 deletions ...irm/snaps/snaps-insight/snaps-insight.tsx → ...firm/snaps/snaps-section/snap-insight.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import React from 'react';
import { useSelector } from 'react-redux';
import { SnapUIRenderer } from '../../../../../../components/app/snaps/snap-ui-renderer';
import { Delineator } from '../../../../../../components/ui/delineator';
import { IconName, Text } from '../../../../../../components/component-library';
import { Text } from '../../../../../../components/component-library';
import {
TextColor,
TextVariant,
FontWeight,
} from '../../../../../../helpers/constants/design-system';
import { useI18nContext } from '../../../../../../hooks/useI18nContext';
import { getSnapMetadata } from '../../../../../../selectors';
Expand All @@ -23,21 +24,39 @@ export const SnapInsight: React.FunctionComponent<SnapInsightProps> = ({
}) => {
const t = useI18nContext();
const { name: snapName } = useSelector((state) =>
/* @ts-expect-error wrong type on selector. */
getSnapMetadata(state, snapId),
);

const headerComponent = (
<Text
color={TextColor.textAlternative}
marginLeft={1}
variant={TextVariant.bodySm}
>
{t('insightsFromSnap', [snapName])}
<Text>
{t('insightsFromSnap', [
<Text
fontWeight={FontWeight.Medium}
variant={TextVariant.inherit}
color={TextColor.inherit}
>
{snapName}
</Text>,
])}
</Text>
);

return (
<Delineator iconName={IconName.Snaps} headerComponent={headerComponent}>
<Delineator
headerComponent={headerComponent}
isLoading={loading}
contentBoxProps={
loading
? undefined
: {
paddingLeft: 0,
paddingRight: 0,
paddingTop: 0,
paddingBottom: 0,
}
}
>
<SnapUIRenderer
snapId={snapId}
interfaceId={interfaceId}
Expand Down
91 changes: 91 additions & 0 deletions ui/pages/confirmations/components/confirm/snaps/snaps-section/snaps-section.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import React from 'react';
import configureMockStore from 'redux-mock-store';
import { Text } from '@metamask/snaps-sdk/jsx';

import mockState from '../../../../../../../test/data/mock-state.json';
import { unapprovedPersonalSignMsg } from '../../../../../../../test/data/confirmations/personal_sign';
import { unapprovedTypedSignMsgV3 } from '../../../../../../../test/data/confirmations/typed_sign';
import { renderWithProvider } from '../../../../../../../test/lib/render-helpers';
import { fireEvent } from '@testing-library/react';
import { SnapsSection } from './snaps-section';

const additionalMockState = {
insights: {
[unapprovedPersonalSignMsg.id]: {
'npm:@metamask/test-snap-bip32': {
snapId: 'npm:@metamask/test-snap-bip32',
loading: false,
interfaceId: 'interface-id',
},
},
[unapprovedTypedSignMsgV3.id]: {
'npm:@metamask/test-snap-bip32': {
snapId: 'npm:@metamask/test-snap-bip32',
loading: false,
interfaceId: 'interface-id2',
},
},
},
interfaces: {
'interface-id': {
snapId: 'npm:@metamask/test-snap-bip32',
content: Text({ children: 'Hello world!' }),
state: {},
context: null,
},
'interface-id2': {
snapId: 'npm:@metamask/test-snap-bip32',
content: Text({ children: 'Hello world again!' }),
state: {},
context: null,
},
},
};

describe('SnapsSection', () => {
it('renders section personal sign request', () => {
const state = {
...mockState,
confirm: {
currentConfirmation: unapprovedPersonalSignMsg,
},
metamask: {
...mockState.metamask,
...additionalMockState,
},
};
const mockStore = configureMockStore([])(state);
const { container, getByText } = renderWithProvider(
<SnapsSection />,
mockStore,
);

fireEvent.click(getByText('Insights from'));

expect(container).toMatchSnapshot();
expect(getByText('Hello world!')).toBeDefined();
});

it('renders section for typed sign request', () => {
const state = {
...mockState,
confirm: {
currentConfirmation: unapprovedTypedSignMsgV3,
},
metamask: {
...mockState.metamask,
...additionalMockState,
},
};
const mockStore = configureMockStore([])(state);
const { container, getByText } = renderWithProvider(
<SnapsSection />,
mockStore,
);

fireEvent.click(getByText('Insights from'));

expect(container).toMatchSnapshot();
expect(getByText('Hello world again!')).toBeDefined();
});
});
Loading

0 comments on commit cfead75

Please sign in to comment.