mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 11:22:43 +02:00
[FLASK] Use custom UI for transaction insights (#16912)
* Allow custom UI for transaction insights * Fix margin * Small fixes to CSS and selectors * Rename property * Fix E2E locally * Bump test-snaps * Bump test-snaps
This commit is contained in:
parent
85f260c22d
commit
7e7a0f1f72
@ -1,3 +1,3 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/test-snaps/4.3.0/',
|
TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/test-snaps/4.4.1/',
|
||||||
};
|
};
|
||||||
|
@ -115,9 +115,9 @@ describe('Test Snap TxInsights', function () {
|
|||||||
// check that txinsightstest tab contains the right info
|
// check that txinsightstest tab contains the right info
|
||||||
await driver.delay(1000);
|
await driver.delay(1000);
|
||||||
const txInsightsResult = await driver.findElement(
|
const txInsightsResult = await driver.findElement(
|
||||||
'[data-testid="Test-0"]',
|
'.snap-ui-renderer__content',
|
||||||
);
|
);
|
||||||
assert.equal(await txInsightsResult.getText(), 'Test\nSuccessful');
|
assert.equal(await txInsightsResult.getText(), 'Test: Successful');
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
.snap-insight {
|
.snap-insight {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
||||||
&__container__data__json {
|
&__container {
|
||||||
word-wrap: break-word;
|
padding: 16px;
|
||||||
overflow-x: auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -13,9 +13,9 @@ import {
|
|||||||
} from '../../../../helpers/constants/design-system';
|
} from '../../../../helpers/constants/design-system';
|
||||||
import { useI18nContext } from '../../../../hooks/useI18nContext';
|
import { useI18nContext } from '../../../../hooks/useI18nContext';
|
||||||
import { useTransactionInsightSnap } from '../../../../hooks/flask/useTransactionInsightSnap';
|
import { useTransactionInsightSnap } from '../../../../hooks/flask/useTransactionInsightSnap';
|
||||||
import SnapContentFooter from '../../flask/snap-content-footer/snap-content-footer';
|
|
||||||
import Box from '../../../ui/box/box';
|
import Box from '../../../ui/box/box';
|
||||||
import ActionableMessage from '../../../ui/actionable-message/actionable-message';
|
import ActionableMessage from '../../../ui/actionable-message/actionable-message';
|
||||||
|
import { SnapUIRenderer } from '../../flask/snap-ui-renderer';
|
||||||
|
|
||||||
export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
|
export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
|
||||||
const t = useI18nContext();
|
const t = useI18nContext();
|
||||||
@ -30,7 +30,7 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
|
|||||||
snapId: selectedSnap.id,
|
snapId: selectedSnap.id,
|
||||||
});
|
});
|
||||||
|
|
||||||
const data = response?.insights;
|
const data = response?.content;
|
||||||
|
|
||||||
const hasNoData =
|
const hasNoData =
|
||||||
!error && (loading || !data || (data && Object.keys(data).length === 0));
|
!error && (loading || !data || (data && Object.keys(data).length === 0));
|
||||||
@ -52,48 +52,7 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
|
|||||||
className="snap-insight__container"
|
className="snap-insight__container"
|
||||||
>
|
>
|
||||||
{data && Object.keys(data).length > 0 ? (
|
{data && Object.keys(data).length > 0 ? (
|
||||||
<>
|
<SnapUIRenderer snapId={selectedSnap.id} data={data} />
|
||||||
<Box
|
|
||||||
flexDirection={FLEX_DIRECTION.COLUMN}
|
|
||||||
paddingTop={0}
|
|
||||||
paddingRight={6}
|
|
||||||
paddingBottom={3}
|
|
||||||
paddingLeft={6}
|
|
||||||
className="snap-insight__container__data"
|
|
||||||
>
|
|
||||||
{Object.keys(data).map((key, i) => (
|
|
||||||
<div key={i} data-testid={`${key}-${i}`}>
|
|
||||||
<Typography
|
|
||||||
fontWeight="bold"
|
|
||||||
marginTop={3}
|
|
||||||
variant={TYPOGRAPHY.H6}
|
|
||||||
>
|
|
||||||
{key}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
{typeof data[key] === 'string' ? (
|
|
||||||
<Typography variant={TYPOGRAPHY.H6}>
|
|
||||||
{data[key]}
|
|
||||||
</Typography>
|
|
||||||
) : (
|
|
||||||
<Box
|
|
||||||
className="snap-insight__container__data__json"
|
|
||||||
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
|
|
||||||
padding={3}
|
|
||||||
>
|
|
||||||
<Typography variant={TYPOGRAPHY.H7}>
|
|
||||||
<pre>{JSON.stringify(data[key], null, 2)}</pre>
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</Box>
|
|
||||||
<SnapContentFooter
|
|
||||||
snapName={selectedSnap.manifest.proposedName}
|
|
||||||
snapId={selectedSnap.id}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
) : (
|
||||||
<Typography color={COLORS.TEXT_ALTERNATIVE} variant={TYPOGRAPHY.H6}>
|
<Typography color={COLORS.TEXT_ALTERNATIVE} variant={TYPOGRAPHY.H6}>
|
||||||
{t('snapsNoInsight')}
|
{t('snapsNoInsight')}
|
||||||
|
@ -4,12 +4,17 @@ import ReactMarkdown from 'react-markdown';
|
|||||||
import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
|
import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
|
||||||
import Typography from '../../../ui/typography/typography';
|
import Typography from '../../../ui/typography/typography';
|
||||||
|
|
||||||
const Paragraph = (props) => <Typography {...props} variant={TYPOGRAPHY.H6} />;
|
const Paragraph = (props) => (
|
||||||
|
<Typography
|
||||||
|
{...props}
|
||||||
|
variant={TYPOGRAPHY.H6}
|
||||||
|
className="snap-ui-markdown__text"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
export const SnapUIMarkdown = ({ children }) => {
|
export const SnapUIMarkdown = ({ children }) => {
|
||||||
return (
|
return (
|
||||||
<ReactMarkdown
|
<ReactMarkdown
|
||||||
className="snap-ui-markdown__text"
|
|
||||||
allowedElements={['p', 'strong', 'em']}
|
allowedElements={['p', 'strong', 'em']}
|
||||||
components={{ p: Paragraph }}
|
components={{ p: Paragraph }}
|
||||||
>
|
>
|
||||||
|
@ -14,4 +14,20 @@
|
|||||||
&__panel {
|
&__panel {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__content > *:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content > &__panel > *:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content > *:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content > &__panel > *:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -13,6 +13,7 @@ import {
|
|||||||
import { SnapDelineator } from '../snap-delineator';
|
import { SnapDelineator } from '../snap-delineator';
|
||||||
import { useI18nContext } from '../../../../hooks/useI18nContext';
|
import { useI18nContext } from '../../../../hooks/useI18nContext';
|
||||||
import ActionableMessage from '../../../ui/actionable-message/actionable-message';
|
import ActionableMessage from '../../../ui/actionable-message/actionable-message';
|
||||||
|
import Box from '../../../ui/box';
|
||||||
import { getSnap } from '../../../../selectors';
|
import { getSnap } from '../../../../selectors';
|
||||||
|
|
||||||
export const UI_MAPPING = {
|
export const UI_MAPPING = {
|
||||||
@ -91,7 +92,9 @@ export const SnapUIRenderer = ({ snapId, data }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<SnapDelineator snapName={snapName}>
|
<SnapDelineator snapName={snapName}>
|
||||||
|
<Box className="snap-ui-renderer__content">
|
||||||
<MetaMaskTemplateRenderer sections={sections} />
|
<MetaMaskTemplateRenderer sections={sections} />
|
||||||
|
</Box>
|
||||||
</SnapDelineator>
|
</SnapDelineator>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -14,5 +14,6 @@
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -874,7 +874,7 @@ export function getSnaps(state) {
|
|||||||
return state.metamask.snaps;
|
return state.metamask.snaps;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getSnap = createSelector(
|
export const getSnap = createDeepEqualSelector(
|
||||||
getSnaps,
|
getSnaps,
|
||||||
(_, snapId) => snapId,
|
(_, snapId) => snapId,
|
||||||
(snaps, snapId) => {
|
(snaps, snapId) => {
|
||||||
@ -882,16 +882,15 @@ export const getSnap = createSelector(
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
export function getInsightSnaps(state) {
|
export const getInsightSnaps = createDeepEqualSelector(
|
||||||
const snaps = Object.values(state.metamask.snaps);
|
getSnaps,
|
||||||
const subjects = getPermissionSubjects(state);
|
getPermissionSubjects,
|
||||||
|
(snaps, subjects) => {
|
||||||
const insightSnaps = snaps.filter(
|
return Object.values(snaps).filter(
|
||||||
({ id }) => subjects[id]?.permissions['endowment:transaction-insight'],
|
({ id }) => subjects[id]?.permissions['endowment:transaction-insight'],
|
||||||
);
|
);
|
||||||
|
},
|
||||||
return insightSnaps;
|
);
|
||||||
}
|
|
||||||
|
|
||||||
export const getSnapsRouteObjects = createSelector(getSnaps, (snaps) => {
|
export const getSnapsRouteObjects = createSelector(getSnaps, (snaps) => {
|
||||||
return Object.values(snaps).map((snap) => {
|
return Object.values(snaps).map((snap) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user