Add requireScroll prop to Footer component

packages/examples/packages/browserify-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "mLWzf5XFmDFHwK9UjU+XBds5oRdj/uXwycZlVhpsyDc=",
+    "shasum": "PmR9KofTr3atijWI30MuoAmvXXIxlNln2UBTmJQedNM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/browserify/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Yf282fJUrz51Ex+hWO9f+VobgiZHhX4MJD2mkEWYAdw=",
+    "shasum": "sXjsRC+qihk/Wu8LNQ1dJFWTlmIMBVp7JACQVxysf0I=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-sdk/src/jsx/components/Footer.test.tsx

@@ -27,7 +27,7 @@ describe('Footer', () => {
 
   it('renders a footer element with multiple buttons', () => {
     const result = (
-      <Footer>
+      <Footer requireScroll>
         <Button name="cancel">Cancel</Button>
         <Button name="confirm">Confirm</Button>
       </Footer>
@@ -37,6 +37,7 @@ describe('Footer', () => {
       type: 'Footer',
       key: null,
       props: {
+        requireScroll: true,
         children: [
           {
             type: 'Button',

packages/snaps-sdk/src/jsx/components/Footer.ts

@@ -5,9 +5,11 @@ import { createSnapComponent } from '../component';
  * The props of the {@link Footer} component.
  *
  * @property children - The single or multiple buttons in the footer.
+ * @property requireScroll - Controls whether footer buttons require all content to be viewed before becoming active.
  */
 export type FooterProps = {
   children: ButtonElement | [ButtonElement, ButtonElement];
+  requireScroll?: boolean | undefined;
 };
 
 const TYPE = 'Footer';
@@ -16,13 +18,19 @@ const TYPE = 'Footer';
  * A footer component, which is used to create a footer with buttons.
  *
  * @param props - The props of the component.
+ * @param props.requireScroll - Controls whether footer buttons require all content to be viewed before becoming active.
+ * The prop also activates an arrow that allows you to scroll to bottom.
  * @param props.children - The single or multiple buttons in the footer.
  * @returns A footer element.
  * @example
  * <Footer>
  *   <Button name="cancel">Cancel</Button>
  *   <Button name="confirm">Confirm</Button>
  * </Footer>
+ * @example
+ * <Footer requireScroll>
+ *   <Button name="accept">Accept</Button>
+ * </Footer>
  */
 export const Footer = createSnapComponent<FooterProps, typeof TYPE>(TYPE);
 

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -661,6 +661,9 @@ describe('FooterStruct', () => {
       {/* eslint-disable-next-line no-constant-binary-expression */}
       <Button name="cancel">Cancel {true && 'foo'}</Button>
     </Footer>,
+    <Footer requireScroll>
+      <Button name="accept">Accept</Button>
+    </Footer>,
   ])('validates a footer element', (value) => {
     expect(is(value, FooterStruct)).toBe(true);
   });

packages/snaps-sdk/src/jsx/validation.ts

@@ -674,6 +674,7 @@ export const FooterChildStruct = selectiveUnion((value) => {
  */
 export const FooterStruct: Describe<FooterElement> = element('Footer', {
   children: FooterChildStruct,
+  requireScroll: optional(boolean()),
 });
 
 /**