feat: Add logic for new requireScroll prop for Snap Footer component

ui/components/app/snaps/snap-ui-renderer/components/avatar-icon.ts

@@ -0,0 +1,10 @@
+import { JSXElement } from '@metamask/snaps-sdk/jsx';
+import { UIComponentFactory } from './types';
+
+export const avatarIcon: UIComponentFactory<JSXElement> = ({ element }) => ({
+  element: 'AvatarIcon',
+  props: {
+    // Define props once we expose this component to snap developers
+    ...element.props,
+  },
+});

ui/components/app/snaps/snap-ui-renderer/components/footer.ts

@@ -35,6 +35,7 @@ const getDefaultButtons = (
   footer: FooterElement,
   t: (value: string) => string,
   onCancel?: () => void,
+  disabled?: boolean,
 ) => {
   const children = getJsxChildren(footer);
 
@@ -47,6 +48,7 @@ const getDefaultButtons = (
         onCancel,
         variant: ButtonVariant.Secondary,
         isSnapAction: false,
+        disabled,
       },
       children: t('cancel'),
     };
@@ -59,9 +61,12 @@ export const footer: UIComponentFactory<FooterElement> = ({
   element,
   t,
   onCancel,
+  requireScroll = false,
+  isScrolledToBottom = false,
   ...params
 }) => {
-  const defaultButtons = getDefaultButtons(element, t, onCancel);
+  const disabled = requireScroll && !isScrolledToBottom;
+  const defaultButtons = getDefaultButtons(element, t, onCancel, disabled);
 
   const providedChildren = getJsxChildren(element);
   const footerChildren: UIComponent[] = (
@@ -81,6 +86,7 @@ export const footer: UIComponentFactory<FooterElement> = ({
             ? ButtonVariant.Secondary
             : ButtonVariant.Primary,
         isSnapAction: true,
+        disabled,
       },
       children: buttonMapped.children,
     };

ui/components/app/snaps/snap-ui-renderer/components/index.ts

@@ -28,6 +28,7 @@ import { icon } from './icon';
 import { section } from './section';
 import { avatar } from './avatar';
 import { banner } from './banner';
+import { avatarIcon } from './avatar-icon';
 import { skeleton } from './skeleton';
 
 export const COMPONENT_MAPPING = {
@@ -61,5 +62,6 @@ export const COMPONENT_MAPPING = {
   Selector: selector,
   Section: section,
   Banner: banner,
+  AvatarIcon: avatarIcon,
   Skeleton: skeleton,
 };

ui/components/app/snaps/snap-ui-renderer/components/types.ts

@@ -14,6 +14,8 @@ export type UIComponentParams<T extends JSXElement> = {
   };
   t: (key: string) => string;
   contentBackgroundColor: string | undefined;
+  isScrolledToBottom?: boolean | undefined;
+  requireScroll?: boolean | undefined;
 };
 
 export type UIComponent = {

ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { Container } from '@metamask/snaps-sdk/jsx';
@@ -7,7 +7,7 @@ import { isEqual } from 'lodash';
 import MetaMaskTemplateRenderer from '../../metamask-template-renderer/metamask-template-renderer';
 import { SnapDelineator } from '../snap-delineator';
 import { getSnapMetadata, getMemoizedInterface } from '../../../../selectors';
-import { Box } from '../../../component-library';
+import { Box, IconName } from '../../../component-library';
 import { DelineatorType } from '../../../../helpers/constants/snaps';
 
 import { SnapInterfaceContextProvider } from '../../../../contexts/snaps';
@@ -17,11 +17,80 @@ import {
   BackgroundColor,
   BlockSize,
   Display,
+  IconColor,
   JustifyContent,
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { useScrollRequired } from '../../../../hooks/useScrollRequired';
+import { useScrollHandling } from '../../../../hooks/useScrollHandling';
 import { mapToExtensionCompatibleColor, mapToTemplate } from './utils';
 
+/**
+ * This hook is used to process the content of the Snap UI Renderer.
+ * It adds the scroll arrow and the footer to the content if required.
+ *
+ * @param {object} rawContent - The raw content of the Snap UI Renderer.
+ * @param {object} scrollState - The state of the scroll handling.
+ * @param {object} scrollArrow - The scroll arrow component.
+ * @param {boolean} requireScroll - Whether the content requires scrolling.
+ * @returns The processed content.
+ */
+const useProcessedContent = (
+  rawContent,
+  scrollState,
+  scrollArrow,
+  requireScroll,
+) => {
+  return useMemo(() => {
+    const baseContent =
+      rawContent?.type === 'Container' || !rawContent
+        ? rawContent
+        : Container({ children: rawContent });
+
+    if (requireScroll) {
+      const children = [...baseContent.props.children];
+      const footer = {
+        ...children[children.length - 1],
+        props: {
+          ...children[children.length - 1].props,
+          isScrolledToBottom: scrollState.buttonsEnabled,
+          requireScroll: true,
+        },
+      };
+
+      children[children.length - 1] = footer;
+
+      if (scrollState.showArrow) {
+        children.splice(-1, 0, scrollArrow);
+      }
+
+      return {
+        ...baseContent,
+        props: {
+          ...baseContent.props,
+          children,
+        },
+      };
+    }
+
+    return baseContent;
+  }, [rawContent, scrollState, scrollArrow, requireScroll]);
+};
+
+const LoadingSpinner = memo(function LoadingSpinner() {
+  return (
+    <Box
+      display={Display.Flex}
+      justifyContent={JustifyContent.center}
+      alignItems={AlignItems.center}
+      height={BlockSize.Full}
+      width={BlockSize.Full}
+    >
+      <PulseLoader />
+    </Box>
+  );
+});
+
 // Component that maps Snaps UI JSON format to MetaMask Template Renderer format
 const SnapUIRendererComponent = ({
   snapId,
@@ -44,21 +113,76 @@ const SnapUIRendererComponent = ({
 }) => {
   const t = useI18nContext();
 
-  const { name: snapName } = useSelector((state) =>
-    getSnapMetadata(state, snapId),
-  );
-
   const interfaceState = useSelector(
     (state) => getMemoizedInterface(state, interfaceId),
     // We only want to update the state if the content has changed.
     // We do this to avoid useless re-renders.
     (oldState, newState) => isEqual(oldState.content, newState.content),
   );
-  const rawContent = interfaceState?.content;
-  const content =
-    rawContent?.type === 'Container' || !rawContent
-      ? rawContent
-      : Container({ children: rawContent });
+
+  const requireScroll =
+    interfaceState?.content?.props?.children?.[1]?.props?.requireScroll;
+
+  const { isScrollable, scrollToBottom, onScroll, ref } = useScrollRequired(
+    [],
+    // Only enable hook if the content requires scrolling
+    { enabled: requireScroll },
+  );
+
+  const { name: snapName } = useSelector((state) =>
+    getSnapMetadata(state, snapId),
+  );
+
+  const { scrollState, handleScroll, handleScrollToBottom } = useScrollHandling(
+    requireScroll,
+    isScrollable,
+  );
+
+  const wrappedOnScroll = useCallback(
+    (e) => {
+      handleScroll(e, onScroll);
+    },
+    [handleScroll, onScroll],
+  );
+
+  const handleScrollToBottomClick = useCallback(() => {
+    handleScrollToBottom(scrollToBottom);
+  }, [handleScrollToBottom, scrollToBottom]);
+
+  const scrollArrow = useMemo(() => {
+    if (!requireScroll || !scrollState.showArrow) {
+      return null;
+    }
+
+    return {
+      type: 'AvatarIcon',
+      key: 'snap-ui-renderer__scroll-arrow',
+      props: {
+        iconName: IconName.Arrow2Down,
+        backgroundColor: BackgroundColor.infoDefault,
+        color: IconColor.primaryInverse,
+        className: 'snap-ui-renderer__scroll-button',
+        onClick: handleScrollToBottomClick,
+        style: {
+          cursor: 'pointer',
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          zIndex: 'auto',
+          bottom: '84px',
+        },
+      },
+    };
+  }, [handleScrollToBottomClick, requireScroll, scrollState.showArrow]);
+
+  const processedContent = useProcessedContent(
+    interfaceState?.content,
+    scrollState,
+    scrollArrow,
+    requireScroll,
+  );
 
   const promptLegacyProps = useMemo(
     () =>
@@ -72,44 +196,47 @@ const SnapUIRendererComponent = ({
 
   const backgroundColor =
     contentBackgroundColor ??
-    mapToExtensionCompatibleColor(content?.props?.backgroundColor) ??
+    mapToExtensionCompatibleColor(processedContent?.props?.backgroundColor) ??
     BackgroundColor.backgroundAlternative;
 
+  // The renderer should only have a footer if there is a default cancel action
+  // or if the footer component has been used.
+  const hasFooter =
+    onCancel || processedContent?.props?.children?.[1] !== undefined;
+
   const sections = useMemo(
     () =>
-      content &&
+      processedContent &&
       mapToTemplate({
         map: {},
-        element: content,
+        element: processedContent,
         onCancel,
         useFooter,
         promptLegacyProps,
         t,
         contentBackgroundColor: backgroundColor,
+        // We have to pass the props at the top level to ensure the children components get the correct props.
+        requireScroll,
+        isScrolledToBottom: scrollState.buttonsEnabled,
       }),
-    [content, onCancel, useFooter, promptLegacyProps, t, backgroundColor],
+    [
+      processedContent,
+      onCancel,
+      useFooter,
+      promptLegacyProps,
+      t,
+      backgroundColor,
+      scrollState.buttonsEnabled,
+      requireScroll,
+    ],
   );
 
-  if (isLoading || !content) {
-    return (
-      <Box
-        display={Display.Flex}
-        justifyContent={JustifyContent.center}
-        alignItems={AlignItems.center}
-        height={BlockSize.Full}
-        width={BlockSize.Full}
-      >
-        <PulseLoader />
-      </Box>
-    );
+  if (isLoading || !processedContent) {
+    return <LoadingSpinner />;
   }
 
   const { state: initialState, context } = interfaceState;
 
-  // The renderer should only have a footer if there is a default cancel action
-  // or if the footer component has been used.
-  const hasFooter = onCancel || content?.props?.children?.[1] !== undefined;
-
   return useDelineator ? (
     <SnapDelineator
       snapName={snapName}
@@ -140,6 +267,8 @@ const SnapUIRendererComponent = ({
     >
       <Box
         className="snap-ui-renderer__content"
+        ref={ref}
+        onScroll={wrappedOnScroll}
         height={BlockSize.Full}
         backgroundColor={backgroundColor}
         style={{

ui/components/app/snaps/snap-ui-renderer/utils.ts

@@ -14,7 +14,7 @@ import { UIComponent } from './components/types';
 
 export type MapToTemplateParams = {
   map: Record<string, number>;
-  element: JSXElement;
+  element: JSXElement & { ref?: React.Ref<unknown> };
   form?: string;
   useFooter?: boolean;
   onCancel?: () => void;