Add empty state

MetaMask · Aug 22, 2024 · a4e2a84 · a4e2a84
1 parent cfead75
commit a4e2a84
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 3 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/ui/components/ui/delineator/delineator.tsx b/ui/components/ui/delineator/delineator.tsx
@@ -49,6 +49,7 @@ const Header = ({
   isCollapsible,
   isExpanded,
   isLoading,
+  isDisabled,
   onHeaderClick,
   type,
 }: {
@@ -57,6 +58,7 @@ const Header = ({
   isCollapsible: boolean;
   isExpanded: boolean;
   isLoading: boolean;
+  isDisabled: boolean;
   onHeaderClick: () => void;
   type?: DelineatorType;
 }) => {
@@ -67,6 +69,7 @@ const Header = ({
         delineator__header: true,
         'delineator__header--expanded': isExpanded,
         'delineator__header--loading': isLoading,
+        'delineator__header--disabled': isDisabled,
       })}
       display={Display.Flex}
       alignItems={AlignItems.center}
@@ -138,6 +141,7 @@ export const Delineator: React.FC<DelineatorProps> = ({
   isCollapsible = true,
   isExpanded: isExpandedProp,
   isLoading = false,
+  isDisabled = false,
   onExpandChange,
   type,
   wrapperBoxProps,
@@ -147,13 +151,13 @@ export const Delineator: React.FC<DelineatorProps> = ({
   const shouldShowContent = !isCollapsible || (isCollapsible && isExpanded);
 
   const handleHeaderClick = useCallback(() => {
-    if (isLoading || !isCollapsible) {
+    if (isDisabled || isLoading || !isCollapsible) {
       return;
     }
     const newExpandedState = !isExpanded;
     onExpandChange?.(newExpandedState);
     setIsExpanded(newExpandedState);
-  }, [isLoading, isCollapsible, isExpanded, onExpandChange]);
+  }, [isLoading, isCollapsible, isExpanded, isDisabled, onExpandChange]);
 
   return (
     <Container wrapperBoxProps={wrapperBoxProps}>
@@ -163,6 +167,7 @@ export const Delineator: React.FC<DelineatorProps> = ({
         isCollapsible={isCollapsible}
         isExpanded={isExpanded}
         isLoading={isLoading}
+        isDisabled={isDisabled}
         onHeaderClick={handleHeaderClick}
         type={type}
       />

diff --git a/ui/components/ui/delineator/delineator.types.ts b/ui/components/ui/delineator/delineator.types.ts
@@ -7,6 +7,7 @@ export type DelineatorProps = {
   isCollapsible?: boolean;
   isExpanded?: boolean;
   isLoading?: boolean;
+  isDisabled?: boolean;
   onExpandChange?: (isExpanded: boolean) => void;
   type?: DelineatorType;
   wrapperBoxProps?: React.ComponentProps<typeof Box>;

diff --git a/ui/components/ui/delineator/index.scss b/ui/components/ui/delineator/index.scss
@@ -5,5 +5,10 @@
     &--loading {
       cursor: default;
     }
+
+    &--disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
   }
 }
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx b/ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx
@@ -10,6 +10,7 @@ import {
 } from '../../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { getSnapMetadata } from '../../../../../../selectors';
+import Tooltip from '../../../../../../components/ui/tooltip';
 
 export type SnapInsightProps = {
   snapId: string;
@@ -42,6 +43,16 @@ export const SnapInsight: React.FunctionComponent<SnapInsightProps> = ({
     </Text>
   );
 
+  const hasNoInsight = !loading && !interfaceId;
+
+  if (hasNoInsight) {
+    return (
+      <Tooltip position="top" title={t('snapsNoInsight')}>
+        <Delineator headerComponent={headerComponent} isDisabled={true} />
+      </Tooltip>
+    );
+  }
+
   return (
     <Delineator
       headerComponent={headerComponent}