Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@pedronfigueiredo
pedronfigueiredo committed Jul 5, 2024
1 parent f9ce46e commit 90685dd
Show file tree
Hide file tree
Showing 10 changed files with 35 additions and 400 deletions.
2 changes: 1 addition & 1 deletion ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const ContractInteractionInfo = () => {
/>
</ConfirmInfoSection>
<TransactionDetails />
<GasFeesSection showAdvancedDetails={showAdvancedDetails} />
<GasFeesSection />
{showAdvancedDetails && <AdvancedDetails />}
</>
);
Expand Down
10 changes: 2 additions & 8 deletions ui/pages/confirmations/components/confirm/info/info.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,7 @@ describe('Info', () => {
},
};
const mockStore = configureMockStore([])(state);
const { container } = renderWithProvider(
<Info showAdvancedDetails />,
mockStore,
);
const { container } = renderWithProvider(<Info />, mockStore);
expect(container).toMatchSnapshot();
});

Expand All @@ -31,10 +28,7 @@ describe('Info', () => {
},
};
const mockStore = configureMockStore([])(state);
const { container } = renderWithProvider(
<Info showAdvancedDetails />,
mockStore,
);
const { container } = renderWithProvider(<Info />, mockStore);
expect(container).toMatchSnapshot();
});
});
144 changes: 1 addition & 143 deletions ...ponents/confirm/info/shared/gas-fees-details/__snapshots__/gas-fees-details.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<GasFeesDetails /> renders component for gas fees section with advanced details toggled off 1`] = `
exports[`<GasFeesDetails /> renders component for gas fees section 1`] = `
<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"
Expand Down Expand Up @@ -98,145 +98,3 @@ exports[`<GasFeesDetails /> renders component for gas fees section with advanced
</div>
</div>
`;

exports[`<GasFeesDetails /> renders component for gas fees section with advanced details toggled on 1`] = `
<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"
>
Estimated fee
</p>
<div>
<div
aria-describedby="tippy-tooltip-2"
class=""
data-original-title="Amount paid to process the transaction on network."
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--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
>
<p
class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
data-testid="first-gas-field"
>
0.004 ETH
</p>
<p
class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
>
$2.20
</p>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="edit-gas-fee-icon"
style="text-decoration: none;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/edit.svg');"
/>
<span
class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
/>
</button>
</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"
>
Speed
</p>
</div>
<div
class="mm-box mm-box--display-flex mm-box--align-items-center"
>
<div
class="mm-box mm-box--display-flex mm-box--flex-wrap-wrap"
>
<p
class="mm-box mm-text mm-text--body-sm mm-box--padding-inline-end-1 mm-box--color-text-muted"
>
🦊 Market
</p>
<p
class="mm-box mm-text mm-text--body-sm mm-box--color-success-default"
>
<span
data-testid="gas-timing-time"
>
~
0 sec
</span>
</p>
</div>
</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"
>
Max fee
</p>
<div>
<div
aria-describedby="tippy-tooltip-3"
class=""
data-original-title="A maximum fee provided to pay for the transaction."
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--margin-left-8 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
>
<p
class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
>
0.0076 ETH
</p>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
>
$4.23
</p>
</div>
</div>
</div>
`;
19 changes: 5 additions & 14 deletions ...onfirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../../test/data/confirmations/contract-interaction';
import mockState from '../../../../../../../../test/data/mock-state.json';
import configureStore from '../../../../../../../store/store';
import { AdvancedDetailsProvider } from '../../contexts/advanced-details-context';
import { GasFeesDetails } from './gas-fees-details';

function getStore() {
Expand Down Expand Up @@ -33,24 +34,14 @@ const Story = {
</Provider>
),
],
argTypes: {
showAdvancedDetails: {
control: 'select',
options: [false, true],
},
},
args: {
showAdvancedDetails: false,
},
};

export default Story;

export const DefaultStory = (args) => (
<GasFeesDetails
setShowCustomizeGasPopover={() => {}}
showAdvancedDetails={args.showAdvancedDetails}
/>
export const DefaultStory = () => (
<AdvancedDetailsProvider>
<GasFeesDetails setShowCustomizeGasPopover={() => {}} />
</AdvancedDetailsProvider>
);

DefaultStory.storyName = 'Default';
42 changes: 7 additions & 35 deletions ...s/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { genUnapprovedContractInteractionConfirmation } from '../../../../../../
import mockState from '../../../../../../../../test/data/mock-state.json';
import { renderWithProvider } from '../../../../../../../../test/lib/render-helpers';
import { getGasFeeTimeEstimate } from '../../../../../../../store/actions';
import { AdvancedDetailsProvider } from '../../contexts/advanced-details-context';
import { GasFeesDetails } from './gas-fees-details';

jest.mock('../../../../../../../store/actions', () => ({
Expand All @@ -16,7 +17,7 @@ jest.mock('../../../../../../../store/actions', () => ({
describe('<GasFeesDetails />', () => {
const middleware = [thunk];

it('renders component for gas fees section with advanced details toggled off', async () => {
it('renders component for gas fees section', async () => {
(getGasFeeTimeEstimate as jest.Mock).mockImplementation(() =>
Promise.resolve({ upperTimeBound: '1000' }),
);
Expand All @@ -31,40 +32,11 @@ describe('<GasFeesDetails />', () => {
let container;
await act(async () => {
const renderResult = renderWithProvider(
<GasFeesDetails
setShowCustomizeGasPopover={() => console.log('open popover')}
showAdvancedDetails={false}
/>,
mockStore,
);
container = renderResult.container;

// Wait for any asynchronous operations to complete
await new Promise(setImmediate);
});

expect(container).toMatchSnapshot();
});

it('renders component for gas fees section with advanced details toggled on', async () => {
(getGasFeeTimeEstimate as jest.Mock).mockImplementation(() =>
Promise.resolve({ upperTimeBound: '1000' }),
);

const state = {
...mockState,
confirm: {
currentConfirmation: genUnapprovedContractInteractionConfirmation(),
},
};
const mockStore = configureMockStore(middleware)(state);
let container;
await act(async () => {
const renderResult = renderWithProvider(
<GasFeesDetails
setShowCustomizeGasPopover={() => console.log('open popover')}
showAdvancedDetails={true}
/>,
<AdvancedDetailsProvider>
<GasFeesDetails
setShowCustomizeGasPopover={() => console.log('open popover')}
/>
</AdvancedDetailsProvider>,
mockStore,
);
container = renderResult.container;
Expand Down
5 changes: 3 additions & 2 deletions ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
import { currentConfirmationSelector } from '../../../../../../../selectors';
import GasTiming from '../../../../gas-timing/gas-timing.component';
import { useAdvancedDetailsHandler } from '../../contexts/advanced-details-context';
import { useEIP1559TxFees } from '../../hooks/useEIP1559TxFees';
import { useFeeCalculations } from '../../hooks/useFeeCalculations';
import { useSupportsEIP1559 } from '../../hooks/useSupportsEIP1559';
Expand All @@ -21,10 +22,8 @@ import { GasFeesRow } from '../gas-fees-row/gas-fees-row';

export const GasFeesDetails = ({
setShowCustomizeGasPopover,
showAdvancedDetails,
}: {
setShowCustomizeGasPopover: Dispatch<SetStateAction<boolean>>;
showAdvancedDetails: boolean;
}) => {
const t = useI18nContext();

Expand All @@ -49,6 +48,8 @@ export const GasFeesDetails = ({
maxFeeNative,
} = useFeeCalculations(transactionMeta);

const { showAdvancedDetails } = useAdvancedDetailsHandler();

if (!transactionMeta?.txParams) {
return null;
}
Expand Down
Loading

0 comments on commit 90685dd

Please sign in to comment.