diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 05b33b7800ff..963fba4de6ff 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -5084,7 +5084,7 @@ "message": "Snaps connected" }, "snapsNoInsight": { - "message": "The snap didn't return any insight" + "message": "No insight to show" }, "snapsPrivacyWarningFirstMessage": { "message": "You acknowledge that any Snap that you install is a Third Party Service, unless otherwise identified, as defined in the Consensys $1. Your use of Third Party Services is governed by separate terms and conditions set forth by the Third Party Service provider. Consensys does not recommend the use of any Snap by any particular person for any particular reason. You access, rely upon or use the Third Party Service at your own risk. Consensys disclaims all responsibility and liability for any losses on account of your use of Third Party Services.", diff --git a/ui/components/ui/delineator/delineator.tsx b/ui/components/ui/delineator/delineator.tsx index fb2d184a80dd..43de60ff34c1 100644 --- 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 = ({ isCollapsible = true, isExpanded: isExpandedProp, isLoading = false, + isDisabled = false, onExpandChange, type, wrapperBoxProps, @@ -147,13 +151,13 @@ export const Delineator: React.FC = ({ 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 ( @@ -163,6 +167,7 @@ export const Delineator: React.FC = ({ 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 index 97bbab0470a1..dc83f55a289a 100644 --- 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; diff --git a/ui/components/ui/delineator/index.scss b/ui/components/ui/delineator/index.scss index 4d222a35b951..46bcfe11050d 100644 --- 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 index aaf2feaab6f7..b428ee8d158d 100644 --- 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 = ({ ); + const hasNoInsight = !loading && !interfaceId; + + if (hasNoInsight) { + return ( + + + + ); + } + return (