Skip to content

Commit

Permalink
addressed PR feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@pedronfigueiredo
pedronfigueiredo committed May 1, 2024
1 parent 89ba5c3 commit 0ba1c4b
Show file tree
Hide file tree
Showing 8 changed files with 266 additions and 57 deletions.
182 changes: 179 additions & 3 deletions ...onents/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,96 @@ exports[`<ContractInteractionInfo /> does not render if required data is not pre

exports[`<ContractInteractionInfo /> renders component for contract interaction request 1`] = `
<div>
<div
class="mm-box mm-box--margin-bottom-4 mm-box--background-color-background-default mm-box--rounded-md"
>
<div
class="mm-box simulation-details-layout mm-box--padding-3 mm-box--display-flex mm-box--gap-3 mm-box--flex-direction-column mm-box--rounded-md mm-box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="simulation-details-layout"
>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center"
>
<div
class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--align-items-center"
>
<p
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-default"
>
Estimated changes
</p>
<div
class="info-tooltip"
data-testid="info-tooltip"
>
<div>
<div
aria-describedby="tippy-tooltip-1"
class="info-tooltip__tooltip-container"
data-original-title="null"
data-tooltipped=""
style="display: inline;"
tabindex="0"
>
<svg
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
fill="var(--color-icon-muted)"
/>
</svg>
</div>
</div>
</div>
</div>
<div
role="progressbar"
>
<svg
class="preloader__icon"
fill="none"
height="20"
viewBox="0 0 16 16"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M8 13.7143C4.84409 13.7143 2.28571 11.1559 2.28571 8C2.28571 4.84409 4.84409 2.28571 8 2.28571C11.1559 2.28571 13.7143 4.84409 13.7143 8C13.7143 11.1559 11.1559 13.7143 8 13.7143ZM8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
fill="var(--color-primary-muted)"
fill-rule="evenodd"
/>
<mask
height="16"
id="mask0"
mask-type="alpha"
maskUnits="userSpaceOnUse"
width="16"
x="0"
y="0"
>
<path
clip-rule="evenodd"
d="M8 13.7143C4.84409 13.7143 2.28571 11.1559 2.28571 8C2.28571 4.84409 4.84409 2.28571 8 2.28571C11.1559 2.28571 13.7143 4.84409 13.7143 8C13.7143 11.1559 11.1559 13.7143 8 13.7143ZM8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
fill="var(--color-primary-default)"
fill-rule="evenodd"
/>
</mask>
<g
mask="url(#mask0)"
>
<path
d="M6.85718 17.9999V11.4285V8.28564H-4.85711V17.9999H6.85718Z"
fill="var(--color-primary-default)"
/>
</g>
</svg>
</div>
</div>
</div>
</div>
<div
class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
>
Expand All @@ -21,9 +111,9 @@ exports[`<ContractInteractionInfo /> renders component for contract interaction
</p>
<div>
<div
aria-describedby="tippy-tooltip-1"
aria-describedby="tippy-tooltip-2"
class=""
data-original-title="This is the site asking for your signature."
data-original-title="This is the site asking for your confirmation."
data-tooltipped=""
style="display: flex;"
tabindex="0"
Expand All @@ -41,8 +131,94 @@ exports[`<ContractInteractionInfo /> renders component for contract interaction
<p
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
>
0x2e0d7e8c45221fca00d74a3609a0f7097035d09b
metamask.github.io
</p>
</div>
</div>
<div
class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
style="overflow-wrap: anywhere; min-height: 24px;"
>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
>
<p
class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
>
Interacting with
</p>
<div>
<div
aria-describedby="tippy-tooltip-3"
class=""
data-original-title="This is the contract you're interacting with. Protect yourself from scammers by verifying the details."
data-tooltipped=""
style="display: flex;"
tabindex="0"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
style="mask-image: url('./images/icons/question.svg');"
/>
</div>
</div>
</div>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
>
<div
class="mm-avatar-account__jazzicon"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(200, 20, 98);"
>
<svg
height="16"
width="16"
x="0"
y="0"
>
<rect
fill="#018E82"
height="16"
transform="translate(0.09338133124744565 -0.04490608666778058) rotate(456.7 8 8)"
width="16"
x="0"
y="0"
/>
<rect
fill="#FB187B"
height="16"
transform="translate(-6.3240369287990985 -1.0053822898747908) rotate(305.5 8 8)"
width="16"
x="0"
y="0"
/>
<rect
fill="#237CE1"
height="16"
transform="translate(4.0809955633515935 -14.427164334848008) rotate(395.8 8 8)"
width="16"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
<p
class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
data-testid="confirm-info-row-display-name"
>
0x88AA6...A5125
</p>
</div>
</div>
</div>
</div>
Expand Down
10 changes: 8 additions & 2 deletions ...nfirmations/components/confirm/info/contract-interaction/contract-interaction.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Meta } from '@storybook/react';
import React from 'react';
import { Provider } from 'react-redux';
import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../test/data/confirmations/contract-interaction';
Expand All @@ -6,7 +7,10 @@ import configureStore from '../../../../../../store/store';
import ContractInteractionInfo from './contract-interaction';

const store = configureStore({
metamask: { ...mockState.metamask },
...mockState,
metamask: {
...mockState.metamask,
},
confirm: {
currentConfirmation: genUnapprovedContractInteractionConfirmation(),
},
Expand All @@ -16,7 +20,9 @@ const Story = {
title: 'Components/App/Confirm/info/ContractInteractionInfo',
component: ContractInteractionInfo,
decorators: [
(story: () => any) => <Provider store={store}>{story()}</Provider>,
(story: () => Meta<typeof ContractInteractionInfo>) => (
<Provider store={store}>{story()}</Provider>
),
],
};

Expand Down
7 changes: 5 additions & 2 deletions .../confirmations/components/confirm/info/contract-interaction/contract-interaction.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
import React from 'react';
import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';
import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../test/data/confirmations/contract-interaction';
import mockState from '../../../../../../../test/data/mock-state.json';
import { renderWithProvider } from '../../../../../../../test/lib/render-helpers';
import ContractInteractionInfo from './contract-interaction';

describe('<ContractInteractionInfo />', () => {
const middleware = [thunk];

it('renders component for contract interaction request', () => {
const state = {
...mockState,
confirm: {
currentConfirmation: genUnapprovedContractInteractionConfirmation(),
},
};
const mockStore = configureMockStore([])(state);
const mockStore = configureMockStore(middleware)(state);
const { container } = renderWithProvider(
<ContractInteractionInfo />,
mockStore,
Expand All @@ -33,7 +36,7 @@ describe('<ContractInteractionInfo />', () => {
},
},
};
const mockStore = configureMockStore([])(state);
const mockStore = configureMockStore(middleware)(state);
const { container } = renderWithProvider(
<ContractInteractionInfo />,
mockStore,
Expand Down
7 changes: 2 additions & 5 deletions ...confirmations/components/confirm/hooks.ts → ...hooks/known-method-data-in-transaction.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,20 @@ import { useDispatch, useSelector } from 'react-redux';
import {
getKnownMethodData,
use4ByteResolutionSelector,
} from '../../../../selectors';
import { getContractMethodData } from '../../../../store/actions';
} from '../../../../../../selectors';
import { getContractMethodData } from '../../../../../../store/actions';

export const useKnownMethodDataInTransaction = (
currentConfirmation: TransactionMeta,
) => {
const dispatch = useDispatch();

const use4ByteResolution = useSelector(use4ByteResolutionSelector);
if (use4ByteResolution && currentConfirmation?.txParams?.data) {
dispatch(getContractMethodData(currentConfirmation.txParams.data));
}

const knownMethodData =
useSelector((state) =>
getKnownMethodData(state, currentConfirmation?.txParams?.data),
) || {};

return { knownMethodData };
};
5 changes: 4 additions & 1 deletion ui/pages/confirmations/components/confirm/info/shared/transaction-details.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Meta } from '@storybook/react';
import React from 'react';
import { Provider } from 'react-redux';
import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../test/data/confirmations/contract-interaction';
Expand All @@ -16,7 +17,9 @@ const Story = {
title: 'Components/App/Confirm/info/TransactionDetails',
component: TransactionDetails,
decorators: [
(story: () => any) => <Provider store={store}>{story()}</Provider>,
(story: () => Meta<typeof TransactionDetails>) => (
<Provider store={store}>{story()}</Provider>
),
],
};

Expand Down

0 comments on commit 0ba1c4b

Please sign in to comment.