[FLASK] Add snaps insight UI

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -23,6 +23,9 @@ export default class ConfirmPageContainerContent extends Component {
     dataComponent: PropTypes.node,
     dataHexComponent: PropTypes.node,
     detailsComponent: PropTypes.node,
+    ///: BEGIN:ONLY_INCLUDE_IN(flask)
+    insightComponent: PropTypes.node,
+    ///: END:ONLY_INCLUDE_IN
     errorKey: PropTypes.string,
     errorMessage: PropTypes.string,
     hideSubtitle: PropTypes.bool,
@@ -59,15 +62,37 @@ export default class ConfirmPageContainerContent extends Component {
   renderContent() {
     const { detailsComponent, dataComponent } = this.props;
 
+    ///: BEGIN:ONLY_INCLUDE_IN(flask)
+    const { insightComponent } = this.props;
+
+    if (insightComponent && (detailsComponent || dataComponent)) {
+      return this.renderTabs();
+    }
+    ///: END:ONLY_INCLUDE_IN
+
     if (detailsComponent && dataComponent) {
       return this.renderTabs();
     }
-    return detailsComponent || dataComponent;
+
+    return (
+      detailsComponent ||
+      ///: BEGIN:ONLY_INCLUDE_IN(flask)
+      insightComponent ||
+      ///: END:ONLY_INCLUDE_IN
+      dataComponent
+    );
   }
 
   renderTabs() {
     const { t } = this.context;
-    const { detailsComponent, dataComponent, dataHexComponent } = this.props;
+    const {
+      detailsComponent,
+      dataComponent,
+      dataHexComponent,
+      ///: BEGIN:ONLY_INCLUDE_IN(flask)
+      insightComponent,
+      ///: END:ONLY_INCLUDE_IN
+    } = this.props;
 
     return (
       <Tabs>
@@ -88,6 +113,12 @@ export default class ConfirmPageContainerContent extends Component {
             {dataHexComponent}
           </Tab>
         )}
+
+        {
+          ///: BEGIN:ONLY_INCLUDE_IN(flask)
+          insightComponent
+          ///: END:ONLY_INCLUDE_IN
+        }
       </Tabs>
     );
   }

ui/components/app/confirm-page-container/confirm-page-container-content/index.scss

@@ -82,13 +82,20 @@
 
     color: var(--color-text-alternative);
     text-transform: uppercase;
-    margin: 0 8px;
 
     & button {
       font-size: unset;
       color: var(--color-text-alternative);
       text-transform: uppercase;
     }
+
+    & .dropdown__select {
+      color: var(--color-text-alternative);
+    }
+
+    & .dropdown__icon-caret-down {
+      top: 40%;
+    }
   }
 
   .page-container__footer {

ui/components/app/confirm-page-container/confirm-page-container.component.js

@@ -64,6 +64,9 @@ export default class ConfirmPageContainer extends Component {
     dataComponent: PropTypes.node,
     dataHexComponent: PropTypes.node,
     detailsComponent: PropTypes.node,
+    ///: BEGIN:ONLY_INCLUDE_IN(flask)
+    insightComponent: PropTypes.node,
+    ///: END:ONLY_INCLUDE_IN
     tokenAddress: PropTypes.string,
     nonce: PropTypes.string,
     warning: PropTypes.string,
@@ -153,6 +156,9 @@ export default class ConfirmPageContainer extends Component {
       showBuyModal,
       isBuyableChain,
       networkIdentifier,
+      ///: BEGIN:ONLY_INCLUDE_IN(flask)
+      insightComponent,
+      ///: END:ONLY_INCLUDE_IN
     } = this.props;
 
     const showAddToAddressDialog =
@@ -240,6 +246,9 @@ export default class ConfirmPageContainer extends Component {
               detailsComponent={detailsComponent}
               dataComponent={dataComponent}
               dataHexComponent={dataHexComponent}
+              ///: BEGIN:ONLY_INCLUDE_IN(flask)
+              insightComponent={insightComponent}
+              ///: END:ONLY_INCLUDE_IN
               errorMessage={errorMessage}
               errorKey={errorKey}
               tokenAddress={tokenAddress}

ui/components/app/confirm-page-container/flask/index.scss

@@ -0,0 +1,32 @@
+.snap-insight {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  word-wrap: break-word;
+
+
+  &--no-data {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: 170px;
+  }
+
+  &__container {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+
+
+    &__data {
+      display: flex;
+      flex-direction: column;
+      padding: 0 4px 12px 24px;
+
+      .typography {
+        font-size: 14px;
+      }
+    }
+  }
+}

ui/components/app/confirm-page-container/flask/snap-insight.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import classnames from 'classnames';
+
+import Preloader from '../../../ui/icon/preloader/preloader-icon.component';
+import Typography from '../../../ui/typography/typography';
+import { COLORS } from '../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { useTransactionInsightSnap } from '../../../../hooks/flask/useTransactionInsightSnap';
+import SnapContentFooter from '../../flask/snap-content-footer/snap-content-footer';
+
+export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
+  const t = useI18nContext();
+  const response = useTransactionInsightSnap({
+    transaction,
+    chainId,
+    snapId: selectedSnap.id,
+  });
+
+  const data = response?.insights;
+
+  return (
+    <div
+      className={classnames('snap-insight', {
+        'snap-insight--no-data': !data || !Object.keys(data).length,
+      })}
+    >
+      {data ? (
+        <div className="snap-insight__container">
+          {Object.keys(data).length ? (
+            <>
+              <div className="snap-insight__container__data">
+                {Object.keys(data).map((key, i) => (
+                  <div key={i}>
+                    <Typography fontWeight="bold" marginTop={3}>
+                      {key}
+                    </Typography>
+                    <Typography>{data[key]}</Typography>
+                  </div>
+                ))}
+              </div>
+              <SnapContentFooter
+                snapName={selectedSnap.manifest.proposedName}
+                snapId={selectedSnap.id}
+              />
+            </>
+          ) : (
+            <Typography color={COLORS.TEXT_ALTERNATIVE}>
+              {t('snapsNoInsight')}
+            </Typography>
+          )}
+        </div>
+      ) : (
+        <>
+          <Preloader size={40} />
+          <Typography marginTop={3} color={COLORS.TEXT_ALTERNATIVE}>
+            {t('snapsInsightLoading')}
+          </Typography>
+        </>
+      )}
+    </div>
+  );
+};
+
+SnapInsight.propTypes = {
+  transaction: PropTypes.object,
+  chainId: PropTypes.string,
+  selectedSnap: PropTypes.object,
+};

ui/components/app/confirm-page-container/index.js

@@ -7,3 +7,6 @@ export {
   default as ConfirmPageContainerContent,
   ConfirmPageContainerSummary,
 } from './confirm-page-container-content';
+///: BEGIN:ONLY_INCLUDE_IN(flask)
+export { SnapInsight } from './flask/snap-insight';
+///: END:ONLY_INCLUDE_IN

ui/components/app/confirm-page-container/index.scss

@@ -2,6 +2,9 @@
 @import 'confirm-page-container-header/index';
 @import 'confirm-detail-row/index';
 @import 'confirm-page-container-navigation/index';
+///: BEGIN:ONLY_INCLUDE_IN(flask)
+@import 'flask/index';
+///: END:ONLY_INCLUDE_IN
 
 .confirm-page-container {
   &__dialog {

ui/components/app/flask/snap-content-footer/index.scss

@@ -1,7 +1,12 @@
 .snap-content-footer {
   display: flex;
   justify-content: center;
-  padding: 24px 0 16px;
+  align-items: center;
+  padding: 16px 0;
+
+  .typography {
+    font-size: 12px;
+  }
 
   i {
     color: var(--color-icon-muted);

ui/components/app/flask/snap-content-footer/snap-content-footer.js

@@ -1,19 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
+import { useHistory } from 'react-router-dom';
+
 import Typography from '../../../ui/typography/typography';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { SNAPS_VIEW_ROUTE } from 'ui/helpers/constants/routes';
-import { COLORS, TYPOGRAPHY } from 'ui/helpers/constants/design-system';
+import { SNAPS_VIEW_ROUTE } from '../../../../helpers/constants/routes';
+import {
+  COLORS,
+  TYPOGRAPHY,
+} from '../../../../helpers/constants/design-system';
+import Button from '../../../ui/button';
 
 export default function SnapContentFooter({ snapName, snapId }) {
   const t = useI18nContext();
-  const route = `${SNAPS_VIEW_ROUTE}/${encodeURIComponent(snapId)}`;
+  const history = useHistory();
+
+  const handleNameClick = (e) => {
+    e.stopPropagation();
+    history.push(`${SNAPS_VIEW_ROUTE}/${encodeURIComponent(snapId)}`);
+  };
   // TODO: add truncation to the snap name, need to pick a character length at which to cut off
   return (
     <div className="snap-content-footer">
-      <i className="fas fa-exclamation-circle" />
+      <i className="fas fa-exclamation-circle fa-sm" />
       <Typography color={COLORS.TEXT_MUTED} as={TYPOGRAPHY.H6}>
-        {t('snapContent', <a href={route}>{snapName}</a>)}
+        {t('snapContent', [
+          <Button type="inline" onClick={handleNameClick} key="button">
+            {snapName}
+          </Button>,
+        ])}
       </Typography>
     </div>
   );

ui/components/ui/tabs/dropdown-tab/dropdown-tab.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Dropdown from '../../dropdown';
+
+export const DropdownTab = (props) => {
+  const {
+    activeClassName,
+    className,
+    'data-testid': dataTestId,
+    isActive,
+    onClick,
+    onChange,
+    tabIndex,
+    options,
+    selectedOption,
+  } = props;
+
+  return (
+    <li
+      className={classnames('tab', className, {
+        'tab--active': isActive,
+        [activeClassName]: activeClassName && isActive,
+      })}
+      data-testid={dataTestId}
+      onClick={(event) => {
+        event.preventDefault();
+        onClick(tabIndex);
+      }}
+    >
+      <Dropdown
+        options={options}
+        selectedOption={selectedOption}
+        onChange={onChange}
+      />
+    </li>
+  );
+};
+
+DropdownTab.propTypes = {
+  activeClassName: PropTypes.string,
+  className: PropTypes.string,
+  'data-testid': PropTypes.string,
+  isActive: PropTypes.bool, // required, but added using React.cloneElement
+  options: PropTypes.arrayOf(
+    PropTypes.exact({
+      name: PropTypes.string,
+      value: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  selectedOption: PropTypes.string,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  tabIndex: PropTypes.number, // required, but added using React.cloneElement
+};
+
+DropdownTab.defaultProps = {
+  activeClassName: undefined,
+  className: undefined,
+  onChange: undefined,
+  onClick: undefined,
+  selectedOption: undefined,
+};

ui/components/ui/tabs/dropdown-tab/index.js

@@ -0,0 +1,3 @@
+import { DropdownTab } from './dropdown-tab';
+
+export default DropdownTab;

ui/components/ui/tabs/dropdown-tab/index.scss

@@ -0,0 +1,25 @@
+.tab {
+  .dropdown__select {
+    border: none;
+    font-size: unset;
+    width: 100%;
+    background-color: unset;
+    padding-left: 8px;
+    padding-right: 20px;
+    line-height: unset;
+    text-transform: uppercase;
+
+    option {
+      background-color: var(--color-background-default);
+      text-transform: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .dropdown__icon-caret-down {
+    right: 0;
+  }
+}