diff --git a/ui/pages/confirmations/components/confirm/pluggable-section/pluggable-section.tsx b/ui/pages/confirmations/components/confirm/pluggable-section/pluggable-section.tsx index c167cdb83c0f..a8f1ecc34f6b 100644 --- a/ui/pages/confirmations/components/confirm/pluggable-section/pluggable-section.tsx +++ b/ui/pages/confirmations/components/confirm/pluggable-section/pluggable-section.tsx @@ -3,9 +3,10 @@ import { ReactComponentLike } from 'prop-types'; import { useSelector } from 'react-redux'; import { currentConfirmationSelector } from '../../../selectors'; +import { SnapsSection } from '../snaps/snaps-section'; // Components to be plugged into confirmation page can be added to the array below -const pluggedInSections: ReactComponentLike[] = []; +const pluggedInSections: ReactComponentLike[] = [SnapsSection]; const PluggableSection = () => { const currentConfirmation = useSelector(currentConfirmationSelector); diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-insight/index.ts b/ui/pages/confirmations/components/confirm/snaps/snaps-insight/index.ts new file mode 100644 index 000000000000..45392fc419de --- /dev/null +++ b/ui/pages/confirmations/components/confirm/snaps/snaps-insight/index.ts @@ -0,0 +1 @@ +export * from './snaps-insight'; diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-insight/snaps-insight.tsx b/ui/pages/confirmations/components/confirm/snaps/snaps-insight/snaps-insight.tsx new file mode 100644 index 000000000000..236e1f5e75ba --- /dev/null +++ b/ui/pages/confirmations/components/confirm/snaps/snaps-insight/snaps-insight.tsx @@ -0,0 +1,49 @@ +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 { + TextColor, + TextVariant, +} from '../../../../../../helpers/constants/design-system'; +import { useI18nContext } from '../../../../../../hooks/useI18nContext'; +import { getSnapMetadata } from '../../../../../../selectors'; + +export type SnapInsightProps = { + snapId: string; + interfaceId: string; + loading: boolean; +}; + +export const SnapInsight: React.FunctionComponent = ({ + snapId, + interfaceId, + loading, +}) => { + const t = useI18nContext(); + const { name: snapName } = useSelector((state) => + getSnapMetadata(state, snapId), + ); + + const headerComponent = ( + + {t('insightsFromSnap', [snapName])} + + ); + + return ( + + + + ); +}; diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/index.ts b/ui/pages/confirmations/components/confirm/snaps/snaps-section/index.ts new file mode 100644 index 000000000000..1e898dac9479 --- /dev/null +++ b/ui/pages/confirmations/components/confirm/snaps/snaps-section/index.ts @@ -0,0 +1 @@ +export * from './snaps-section'; diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/snaps-section.tsx b/ui/pages/confirmations/components/confirm/snaps/snaps-section/snaps-section.tsx new file mode 100644 index 000000000000..eca8d020e5a2 --- /dev/null +++ b/ui/pages/confirmations/components/confirm/snaps/snaps-section/snaps-section.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import { currentConfirmationSelector } from '../../../../selectors'; +import { useInsightSnaps } from '../../../../../../hooks/snaps/useInsightSnaps'; +import { Box } from '../../../../../../components/component-library'; +import { SnapInsight } from '../snaps-insight'; +import { Display, FlexDirection } from '../../../../../../helpers/constants/design-system'; + +export const SnapsSection = () => { + const currentConfirmation = useSelector(currentConfirmationSelector); + const { data } = useInsightSnaps(currentConfirmation?.id); + + return ( + + {data.map(({ snapId, interfaceId, loading }) => ( + + ))} + + ); +};