From 2c94e708eb8f6136d0f0c6f7f2107e06bd01efc5 Mon Sep 17 00:00:00 2001
From: Maarten Zuidhoorn <maarten@zuidhoorn.com>
Date: Wed, 3 Jul 2024 14:46:04 +0200
Subject: [PATCH] Add footer component

---
 .../src/jsx/components/Footer.stories.tsx     |  48 ++++++++
 .../snaps-storybook/src/components/Header.tsx |   9 +-
 .../src/components/Renderer.tsx               |  94 ++++++++++++---
 .../src/components/custom/Extension.tsx       |  43 ++++---
 .../src/components/custom/utils.ts            | 114 ++++++++++++++++++
 .../src/components/snaps/box/Box.tsx          |   4 +-
 .../components/snaps/button/Button.styles.tsx |  26 ++++
 .../src/components/snaps/footer/Footer.tsx    |  31 +++++
 .../snaps/footer/components/Button.tsx        |  30 +++++
 .../snaps/footer/components/Buttons.tsx       |  31 +++++
 .../snaps/footer/components/CancelButton.tsx  |  20 +++
 .../snaps/footer/components/index.ts          |   3 +
 .../src/components/snaps/footer/index.ts      |   1 +
 .../src/components/snaps/heading/Heading.tsx  |   4 +-
 .../src/components/snaps/index.ts             |   2 +
 .../src/components/snaps/row/Row.tsx          |   4 +-
 .../src/components/snaps/text/Text.tsx        |   4 +-
 packages/snaps-storybook/src/render.tsx       |   7 +-
 packages/snaps-storybook/src/theme/index.ts   |  13 +-
 packages/snaps-storybook/src/theme/shadows.ts |   3 +
 packages/snaps-storybook/src/theme/utils.ts   |  35 ++++++
 21 files changed, 472 insertions(+), 54 deletions(-)
 create mode 100644 packages/snaps-sdk/src/jsx/components/Footer.stories.tsx
 create mode 100644 packages/snaps-storybook/src/components/custom/utils.ts
 create mode 100644 packages/snaps-storybook/src/components/snaps/footer/Footer.tsx
 create mode 100644 packages/snaps-storybook/src/components/snaps/footer/components/Button.tsx
 create mode 100644 packages/snaps-storybook/src/components/snaps/footer/components/Buttons.tsx
 create mode 100644 packages/snaps-storybook/src/components/snaps/footer/components/CancelButton.tsx
 create mode 100644 packages/snaps-storybook/src/components/snaps/footer/components/index.ts
 create mode 100644 packages/snaps-storybook/src/components/snaps/footer/index.ts
 create mode 100644 packages/snaps-storybook/src/theme/shadows.ts

diff --git a/packages/snaps-sdk/src/jsx/components/Footer.stories.tsx b/packages/snaps-sdk/src/jsx/components/Footer.stories.tsx
new file mode 100644
index 0000000000..85388ecd4a
--- /dev/null
+++ b/packages/snaps-sdk/src/jsx/components/Footer.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, Story } from '@metamask/snaps-storybook';
+
+import type { FooterProps } from './Footer';
+import { Footer } from './Footer';
+import { Button } from './form';
+
+const meta: Meta<typeof Footer> = {
+  title: 'Footer',
+  component: Footer,
+  argTypes: {
+    children: {
+      description:
+        'The button(s) to render in the footer. If only one button is provided, a cancel button is added automatically.',
+      table: {
+        type: {
+          summary: 'Button | [Button, Button]',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+/**
+ * The footer component one custom button. A cancel button is added
+ * automatically if only one button is provided.
+ *
+ * When the user clicks the first button, the `onUserInput` handler is called
+ * with the name of the button (if provided).
+ */
+export const Default: Story<FooterProps> = {
+  render: (props) => <Footer {...props} />,
+  args: {
+    children: <Button>Submit</Button>,
+  },
+};
+
+/**
+ * The footer component with two custom buttons. If two buttons are provided,
+ * no cancel button is added.
+ */
+export const TwoButtons: Story<FooterProps> = {
+  render: (props) => <Footer {...props} />,
+  args: {
+    children: [<Button>First</Button>, <Button>Second</Button>],
+  },
+};
diff --git a/packages/snaps-storybook/src/components/Header.tsx b/packages/snaps-storybook/src/components/Header.tsx
index 2684a63750..598ee101a9 100644
--- a/packages/snaps-storybook/src/components/Header.tsx
+++ b/packages/snaps-storybook/src/components/Header.tsx
@@ -7,7 +7,14 @@ import type { FunctionComponent } from 'react';
  * @returns The header element.
  */
 export const Header: FunctionComponent = () => (
-  <Flex as="header" padding="4" gap="4" background="background.default">
+  <Flex
+    as="header"
+    padding="4"
+    gap="4"
+    background="background.default"
+    boxShadow="md"
+    clipPath="inset(0px 0px -16px 0px)"
+  >
     <SkeletonCircle width="40px" height="40px" />
     <Box alignSelf="center">
       <Heading as="h1" fontSize="sm" fontWeight="500" lineHeight="short">
diff --git a/packages/snaps-storybook/src/components/Renderer.tsx b/packages/snaps-storybook/src/components/Renderer.tsx
index 36a2fea696..4adb027b94 100644
--- a/packages/snaps-storybook/src/components/Renderer.tsx
+++ b/packages/snaps-storybook/src/components/Renderer.tsx
@@ -5,6 +5,11 @@ import type { FunctionComponent } from 'react';
 import { CUSTOM_COMPONENTS } from './custom';
 import { SNAPS_COMPONENTS } from './snaps';
 
+/**
+ * Custom component overrides.
+ */
+export type Overrides = Record<string, FunctionComponent<RenderProps<any>>>;
+
 /**
  * The props that are passed to a rendered component.
  *
@@ -12,12 +17,6 @@ import { SNAPS_COMPONENTS } from './snaps';
  * merged with the render props.
  */
 export type RenderProps<Type> = Type & {
-  /**
-   * The unique ID to use as key for the renderer. This is used to ensure that
-   * the rendered components have unique keys.
-   */
-  id: string;
-
   /**
    * The Renderer component to use to render nested elements.
    */
@@ -39,8 +38,36 @@ export type RendererProps = {
    * The JSX element to render.
    */
   element: Nestable<string | GenericSnapElement | boolean | null>;
+
+  /**
+   * Custom component overrides.
+   */
+  overrides?: Overrides;
 };
 
+/**
+ * Get the components to use for rendering JSX elements.
+ *
+ * @param overrides - Custom component overrides.
+ * @returns The components to use for rendering JSX elements.
+ */
+function getComponents(
+  overrides: Overrides,
+): Record<string, FunctionComponent<RenderProps<any>>> {
+  const snapsComponents = Object.fromEntries(
+    Object.entries(SNAPS_COMPONENTS).map(([key, value]) => [
+      key,
+      value.Component,
+    ]),
+  );
+
+  return {
+    ...CUSTOM_COMPONENTS,
+    ...snapsComponents,
+    ...overrides,
+  };
+}
+
 /**
  * The renderer component that renders Snaps JSX elements. It supports rendering
  * strings, JSX elements, booleans, null, and arrays thereof.
@@ -49,9 +76,16 @@ export type RendererProps = {
  * @param props.id - The unique ID to use as key for the renderer. This is used
  * to ensure that the rendered components have unique keys.
  * @param props.element - The JSX element to render.
+ * @param props.overrides - Custom component overrides.
  * @returns The rendered component.
  */
-export const Renderer: FunctionComponent<RendererProps> = ({ element, id }) => {
+export const Renderer: FunctionComponent<RendererProps> = ({
+  element,
+  id,
+  overrides = {},
+}) => {
+  const components = getComponents(overrides);
+
   if (typeof element === 'string') {
     return <>{element}</>;
   }
@@ -68,23 +102,45 @@ export const Renderer: FunctionComponent<RendererProps> = ({ element, id }) => {
             id={`${id}-${index}`}
             key={`${id}-${index}`}
             element={child}
+            overrides={overrides}
           />
         ))}
       </>
     );
   }
 
-  if (CUSTOM_COMPONENTS[element.type as keyof typeof CUSTOM_COMPONENTS]) {
-    const Component =
-      CUSTOM_COMPONENTS[element.type as keyof typeof CUSTOM_COMPONENTS];
-
-    // @ts-expect-error - TODO: Fix types.
-    return <Component id={id} Renderer={Renderer} {...element.props} />;
-  }
-
-  // eslint-disable-next-line import/namespace
-  const item = SNAPS_COMPONENTS[element.type];
-  assert(item, `No component found for type: "${element.type}".`);
+  const Component = components[element.type];
+  assert(Component, `No component found for type: "${element.type}".`);
 
-  return <item.Component id={id} Renderer={Renderer} {...element.props} />;
+  return (
+    <Component
+      id={id}
+      Renderer={createRenderer(id, overrides)}
+      {...element.props}
+    />
+  );
 };
+
+/**
+ * Create a renderer component that renders JSX elements with the given base ID
+ * and overrides.
+ *
+ * @param baseId - The base ID to use for the renderer.
+ * @param baseOverrides - The base custom component overrides.
+ * @returns The renderer component.
+ */
+function createRenderer(baseId: string, baseOverrides: Overrides) {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  return function ChildRenderer({ id, element, overrides }: RendererProps) {
+    return (
+      <Renderer
+        element={element}
+        id={`${baseId}-${id}`}
+        overrides={{
+          ...baseOverrides,
+          ...overrides,
+        }}
+      />
+    );
+  };
+}
diff --git a/packages/snaps-storybook/src/components/custom/Extension.tsx b/packages/snaps-storybook/src/components/custom/Extension.tsx
index 001e04019a..79580db037 100644
--- a/packages/snaps-storybook/src/components/custom/Extension.tsx
+++ b/packages/snaps-storybook/src/components/custom/Extension.tsx
@@ -1,10 +1,11 @@
-import { Box } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import type { JSXElement } from '@metamask/snaps-sdk/jsx';
 import type { FunctionComponent } from 'react';
 
 import { Delineator } from '../Delineator';
 import { Header } from '../Header';
 import type { RenderProps } from '../Renderer';
+import { getFooter } from './utils';
 
 /**
  * The props for the {@link Extension} component.
@@ -21,26 +22,36 @@ export type ExtensionProps = {
  * header and the content of the Snap in the delineator.
  *
  * @param props - The component props.
- * @param props.id - The unique ID to use as key for the renderer.
  * @param props.children - The JSX element to render in the extension.
  * @param props.Renderer - The Renderer component to use to render nested
  * elements.
  * @returns The rendered component.
  */
 export const Extension: FunctionComponent<RenderProps<ExtensionProps>> = ({
-  id,
   children,
   Renderer,
-}) => (
-  <Box
-    width="360px"
-    height="600px"
-    background="background.alternative"
-    boxShadow="sm"
-  >
-    <Header />
-    <Delineator>
-      <Renderer id={`${id}-extension`} element={children} />
-    </Delineator>
-  </Box>
-);
+}) => {
+  const footer = getFooter(children);
+
+  return (
+    <Flex
+      direction="column"
+      width="360px"
+      height="600px"
+      background="background.alternative"
+      boxShadow="md"
+    >
+      <Header />
+      <Delineator>
+        <Renderer
+          id="extension"
+          element={children}
+          overrides={{
+            Footer: () => null,
+          }}
+        />
+      </Delineator>
+      {footer && <Renderer id="footer" element={footer} />}
+    </Flex>
+  );
+};
diff --git a/packages/snaps-storybook/src/components/custom/utils.ts b/packages/snaps-storybook/src/components/custom/utils.ts
new file mode 100644
index 0000000000..0ceb9e486a
--- /dev/null
+++ b/packages/snaps-storybook/src/components/custom/utils.ts
@@ -0,0 +1,114 @@
+// TODO: Move to `snaps-sdk`?
+
+import type { JSXElement, Nestable } from '@metamask/snaps-sdk/jsx';
+import { hasProperty, isPlainObject } from '@metamask/utils';
+
+/**
+ * Check if a JSX element has children.
+ *
+ * @param element - A JSX element.
+ * @returns `true` if the element has children, `false` otherwise.
+ */
+export function hasChildren<Element extends JSXElement>(
+  element: Element,
+): element is Element & {
+  props: { children: Nestable<JSXElement | string> };
+} {
+  return hasProperty(element.props, 'children');
+}
+
+/**
+ * Filter a JSX child to remove `null`, `undefined`, plain booleans, and empty
+ * strings.
+ *
+ * @param child - The JSX child to filter.
+ * @returns `true` if the child is not `null`, `undefined`, a plain boolean, or
+ * an empty string, `false` otherwise.
+ */
+function filterJsxChild(child: JSXElement | string | boolean | null): boolean {
+  return Boolean(child) && child !== true;
+}
+
+/**
+ * Get the children of a JSX element as an array. If the element has only one
+ * child, the child is returned as an array.
+ *
+ * @param element - A JSX element.
+ * @returns The children of the element.
+ */
+export function getJsxChildren(element: JSXElement): (JSXElement | string)[] {
+  if (hasChildren(element)) {
+    if (Array.isArray(element.props.children)) {
+      // @ts-expect-error - Each member of the union type has signatures, but
+      // none of those signatures are compatible with each other.
+      return element.props.children.filter(filterJsxChild).flat(Infinity);
+    }
+
+    if (element.props.children) {
+      return [element.props.children];
+    }
+  }
+
+  return [];
+}
+
+/**
+ * Walk a JSX tree and call a callback on each node.
+ *
+ * @param node - The JSX node to walk.
+ * @param callback - The callback to call on each node.
+ * @param depth - The current depth in the JSX tree for a walk.
+ * @returns The result of the callback, if any.
+ */
+export function walkJsx<Value>(
+  node: JSXElement | JSXElement[],
+  callback: (node: JSXElement, depth: number) => Value | undefined,
+  depth = 0,
+): Value | undefined {
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const childResult = walkJsx(child as JSXElement, callback, depth);
+      if (childResult !== undefined) {
+        return childResult;
+      }
+    }
+
+    return undefined;
+  }
+
+  const result = callback(node, depth);
+  if (result !== undefined) {
+    return result;
+  }
+
+  if (hasChildren(node)) {
+    const children = getJsxChildren(node);
+    for (const child of children) {
+      if (isPlainObject(child)) {
+        const childResult = walkJsx(child, callback, depth + 1);
+        if (childResult !== undefined) {
+          return childResult;
+        }
+      }
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Get the footer element from the JSX element tree.
+ *
+ * @param element - The JSX element to search for the footer.
+ * @returns The footer element.
+ */
+export function getFooter(element: JSXElement) {
+  // eslint-disable-next-line consistent-return
+  const footer = walkJsx(element, (node) => {
+    if (node.type === 'Footer') {
+      return node;
+    }
+  });
+
+  return footer;
+}
diff --git a/packages/snaps-storybook/src/components/snaps/box/Box.tsx b/packages/snaps-storybook/src/components/snaps/box/Box.tsx
index 4c469a5ff8..f1a32fea08 100644
--- a/packages/snaps-storybook/src/components/snaps/box/Box.tsx
+++ b/packages/snaps-storybook/src/components/snaps/box/Box.tsx
@@ -43,7 +43,6 @@ function getFlexProps({
  * The box component. See {@link BoxProps} for the props.
  *
  * @param props - The box props.
- * @param props.id - The unique ID to use as key for the renderer.
  * @param props.direction - The box direction.
  * @param props.alignment - The box alignment.
  * @param props.children - The box content.
@@ -52,7 +51,6 @@ function getFlexProps({
  * @returns The rendered box.
  */
 export const Box: FunctionComponent<RenderProps<BoxProps>> = ({
-  id,
   direction,
   alignment,
   children,
@@ -60,7 +58,7 @@ export const Box: FunctionComponent<RenderProps<BoxProps>> = ({
 }) => {
   return (
     <Flex gap="1" {...getFlexProps({ alignment, direction })}>
-      <Renderer id={`${id}-box`} element={children} />
+      <Renderer id="box" element={children} />
     </Flex>
   );
 };
diff --git a/packages/snaps-storybook/src/components/snaps/button/Button.styles.tsx b/packages/snaps-storybook/src/components/snaps/button/Button.styles.tsx
index fcc3b8b100..d2efdf587f 100644
--- a/packages/snaps-storybook/src/components/snaps/button/Button.styles.tsx
+++ b/packages/snaps-storybook/src/components/snaps/button/Button.styles.tsx
@@ -26,6 +26,18 @@ export const styles = defineStyleConfig({
         color: 'text.muted',
       },
     }),
+
+    solid: defineStyle({
+      color: 'background.default',
+      backgroundColor: 'text.default',
+      _disabled: {
+        backgroundColor: 'text.muted',
+      },
+
+      _hover: {
+        backgroundColor: 'text.alternative',
+      },
+    }),
   },
 
   sizes: {
@@ -38,6 +50,20 @@ export const styles = defineStyleConfig({
       paddingInlineStart: 0,
       paddingInlineEnd: 0,
     }),
+
+    large: defineStyle({
+      lineHeight: 'short',
+      fontSize: 'sm',
+      fontWeight: '500',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingX: '4',
+      height: '48px',
+      borderRadius: 'full',
+      border: '1px solid',
+      borderColor: 'currentColor',
+    }),
   },
 
   defaultProps: {
diff --git a/packages/snaps-storybook/src/components/snaps/footer/Footer.tsx b/packages/snaps-storybook/src/components/snaps/footer/Footer.tsx
new file mode 100644
index 0000000000..061737c232
--- /dev/null
+++ b/packages/snaps-storybook/src/components/snaps/footer/Footer.tsx
@@ -0,0 +1,31 @@
+import { Box } from '@chakra-ui/react';
+import type { FooterProps } from '@metamask/snaps-sdk/jsx';
+import type { FunctionComponent } from 'react';
+
+import type { RenderProps } from '../../Renderer';
+import { Buttons } from './components';
+
+/**
+ * The footer component. See {@link FooterProps} for the props.
+ *
+ * @param props - The component props.
+ * @param props.children - The footer buttons.
+ * @param props.Renderer - The Renderer component to use to render nested
+ * elements.
+ * @returns The rendered footer.
+ */
+export const Footer: FunctionComponent<RenderProps<FooterProps>> = (props) => {
+  return (
+    <Box
+      padding="4"
+      gap="2"
+      display="flex"
+      background="background.default"
+      marginTop="auto"
+      boxShadow="md"
+      clipPath="inset(-16px 0px 0px 0px)"
+    >
+      <Buttons {...props} />
+    </Box>
+  );
+};
diff --git a/packages/snaps-storybook/src/components/snaps/footer/components/Button.tsx b/packages/snaps-storybook/src/components/snaps/footer/components/Button.tsx
new file mode 100644
index 0000000000..f2817d9176
--- /dev/null
+++ b/packages/snaps-storybook/src/components/snaps/footer/components/Button.tsx
@@ -0,0 +1,30 @@
+import { Button as ChakraButton } from '@chakra-ui/react';
+import type { ButtonProps } from '@metamask/snaps-sdk/jsx';
+import type { FunctionComponent } from 'react';
+
+import type { RenderProps } from '../../../Renderer';
+
+/**
+ * A footer button.
+ *
+ * @param props - The button props.
+ * @param props.children - The button label.
+ * @param props.Renderer - The Renderer component to use to render nested elements.
+ * @returns The button element.
+ */
+export const Button: FunctionComponent<RenderProps<ButtonProps>> = ({
+  children,
+  Renderer,
+}) => {
+  return (
+    <ChakraButton
+      flexBasis={0}
+      flexGrow={1}
+      maxWidth="auto"
+      variant="solid"
+      size="large"
+    >
+      <Renderer id="button" element={children} />
+    </ChakraButton>
+  );
+};
diff --git a/packages/snaps-storybook/src/components/snaps/footer/components/Buttons.tsx b/packages/snaps-storybook/src/components/snaps/footer/components/Buttons.tsx
new file mode 100644
index 0000000000..848cff48c2
--- /dev/null
+++ b/packages/snaps-storybook/src/components/snaps/footer/components/Buttons.tsx
@@ -0,0 +1,31 @@
+import type { FooterProps } from '@metamask/snaps-sdk/jsx';
+import type { FunctionComponent } from 'react';
+
+import type { RenderProps } from '../../../Renderer';
+import { Button } from './Button';
+import { CancelButton } from './CancelButton';
+
+/**
+ * The footer buttons.
+ *
+ * @param props - The component props.
+ * @param props.children - The footer buttons.
+ * @param props.Renderer - The Renderer component to use to render nested
+ * elements.
+ * @returns The footer buttons element.
+ */
+export const Buttons: FunctionComponent<RenderProps<FooterProps>> = ({
+  children,
+  Renderer,
+}) => {
+  if (Array.isArray(children)) {
+    return <Renderer id="footer" element={children} overrides={{ Button }} />;
+  }
+
+  return (
+    <>
+      <CancelButton />
+      <Renderer id="footer" element={children} overrides={{ Button }} />
+    </>
+  );
+};
diff --git a/packages/snaps-storybook/src/components/snaps/footer/components/CancelButton.tsx b/packages/snaps-storybook/src/components/snaps/footer/components/CancelButton.tsx
new file mode 100644
index 0000000000..84c8592efd
--- /dev/null
+++ b/packages/snaps-storybook/src/components/snaps/footer/components/CancelButton.tsx
@@ -0,0 +1,20 @@
+import type { ButtonProps } from '@chakra-ui/react';
+import { Button } from '@chakra-ui/react';
+import type { FunctionComponent } from 'react';
+
+export type CancelButtonProps = ButtonProps;
+
+/**
+ * A cancel button.
+ *
+ * @param props - The button props.
+ * @param props.children - The button label.
+ * @returns The cancel button element.
+ */
+export const CancelButton: FunctionComponent<CancelButtonProps> = (props) => {
+  return (
+    <Button flexBasis={0} flexGrow={1} maxWidth="auto" size="large" {...props}>
+      Cancel
+    </Button>
+  );
+};
diff --git a/packages/snaps-storybook/src/components/snaps/footer/components/index.ts b/packages/snaps-storybook/src/components/snaps/footer/components/index.ts
new file mode 100644
index 0000000000..45edde9237
--- /dev/null
+++ b/packages/snaps-storybook/src/components/snaps/footer/components/index.ts
@@ -0,0 +1,3 @@
+export * from './Button';
+export * from './Buttons';
+export * from './CancelButton';
diff --git a/packages/snaps-storybook/src/components/snaps/footer/index.ts b/packages/snaps-storybook/src/components/snaps/footer/index.ts
new file mode 100644
index 0000000000..397a4d29e9
--- /dev/null
+++ b/packages/snaps-storybook/src/components/snaps/footer/index.ts
@@ -0,0 +1 @@
+export { Footer as Component } from './Footer';
diff --git a/packages/snaps-storybook/src/components/snaps/heading/Heading.tsx b/packages/snaps-storybook/src/components/snaps/heading/Heading.tsx
index ff4aea1397..c3a7a729b3 100644
--- a/packages/snaps-storybook/src/components/snaps/heading/Heading.tsx
+++ b/packages/snaps-storybook/src/components/snaps/heading/Heading.tsx
@@ -8,20 +8,18 @@ import type { RenderProps } from '../../Renderer';
  * The heading component. See {@link HeadingProps} for the props.
  *
  * @param props - The heading props.
- * @param props.id - The unique ID to use as key for the renderer.
  * @param props.children - The heading content.
  * @param props.Renderer - The Renderer component to use to render nested
  * elements.
  * @returns The rendered heading.
  */
 export const Heading: FunctionComponent<RenderProps<HeadingProps>> = ({
-  id,
   children,
   Renderer,
 }) => {
   return (
     <ChakraHeading>
-      <Renderer id={`${id}-heading`} element={children} />
+      <Renderer id="heading" element={children} />
     </ChakraHeading>
   );
 };
diff --git a/packages/snaps-storybook/src/components/snaps/index.ts b/packages/snaps-storybook/src/components/snaps/index.ts
index d2bf984855..edddee87ec 100644
--- a/packages/snaps-storybook/src/components/snaps/index.ts
+++ b/packages/snaps-storybook/src/components/snaps/index.ts
@@ -8,6 +8,7 @@ import * as Box from './box';
 import * as Button from './button';
 import * as Copyable from './copyable';
 import * as Divider from './divider';
+import * as Footer from './footer';
 import * as Heading from './heading';
 import * as Row from './row';
 import * as Text from './text';
@@ -20,6 +21,7 @@ export const SNAPS_COMPONENTS: Record<string, Component> = {
   Button,
   Copyable,
   Divider,
+  Footer,
   Heading,
   Row,
   Text,
diff --git a/packages/snaps-storybook/src/components/snaps/row/Row.tsx b/packages/snaps-storybook/src/components/snaps/row/Row.tsx
index bd351c8e9f..301a0134e6 100644
--- a/packages/snaps-storybook/src/components/snaps/row/Row.tsx
+++ b/packages/snaps-storybook/src/components/snaps/row/Row.tsx
@@ -57,7 +57,6 @@ const Tooltip: FunctionComponent<TooltipProps> = ({ tooltip, variant }) => {
  * The row component. See {@link RowProps} for the props.
  *
  * @param props - The props of the component.
- * @param props.id - The unique ID to use as key for the renderer.
  * @param props.label - The label of the row.
  * @param props.variant - The variant of the row.
  * @param props.tooltip - The tooltip content.
@@ -67,7 +66,6 @@ const Tooltip: FunctionComponent<TooltipProps> = ({ tooltip, variant }) => {
  * @returns A row element.
  */
 export const Row: FunctionComponent<RenderProps<RowProps>> = ({
-  id,
   label,
   variant = 'default',
   tooltip,
@@ -82,7 +80,7 @@ export const Row: FunctionComponent<RenderProps<RowProps>> = ({
         <Text fontWeight="500">{label}</Text>
         <Tooltip tooltip={tooltip} variant={variant} />
       </Flex>
-      <Renderer id={`${id}-row`} element={children} />
+      <Renderer id="row" element={children} />
     </Box>
   );
 };
diff --git a/packages/snaps-storybook/src/components/snaps/text/Text.tsx b/packages/snaps-storybook/src/components/snaps/text/Text.tsx
index cb80bf229e..7b33cf0df7 100644
--- a/packages/snaps-storybook/src/components/snaps/text/Text.tsx
+++ b/packages/snaps-storybook/src/components/snaps/text/Text.tsx
@@ -8,20 +8,18 @@ import type { RenderProps } from '../../Renderer';
  * The text component. See {@link TextProps} for the props.
  *
  * @param props - The text props.
- * @param props.id - The unique ID to use as key for the renderer.
  * @param props.children - The text content.
  * @param props.Renderer - The Renderer component to use to render nested
  * elements.
  * @returns The rendered text.
  */
 export const Text: FunctionComponent<RenderProps<TextProps>> = ({
-  id,
   children,
   Renderer,
 }) => {
   return (
     <ChakraText>
-      <Renderer id={`${id}-text`} element={children} />
+      <Renderer id="text" element={children} />
     </ChakraText>
   );
 };
diff --git a/packages/snaps-storybook/src/render.tsx b/packages/snaps-storybook/src/render.tsx
index 3c4e3ff956..b4fbab553a 100644
--- a/packages/snaps-storybook/src/render.tsx
+++ b/packages/snaps-storybook/src/render.tsx
@@ -4,6 +4,7 @@ import type { ArgsStoryFn, RenderToCanvas } from '@storybook/types';
 import { StrictMode } from 'react';
 
 import { ErrorBoundary, Renderer } from './components';
+import { CUSTOM_COMPONENTS } from './components/custom';
 import type { SnapsRenderer } from './types';
 
 /**
@@ -47,7 +48,11 @@ export const renderToCanvas: RenderToCanvas<SnapsRenderer> = async (
   const element = (
     <StrictMode>
       <ErrorBoundary showMain={showMain} showException={showException}>
-        <Renderer id="root" element={storyElement} />
+        <Renderer
+          id="root"
+          element={storyElement}
+          overrides={CUSTOM_COMPONENTS}
+        />
       </ErrorBoundary>
     </StrictMode>
   );
diff --git a/packages/snaps-storybook/src/theme/index.ts b/packages/snaps-storybook/src/theme/index.ts
index 30af6376e0..089425913c 100644
--- a/packages/snaps-storybook/src/theme/index.ts
+++ b/packages/snaps-storybook/src/theme/index.ts
@@ -4,22 +4,25 @@ import { SNAPS_COMPONENTS } from '../components';
 import { borders } from './borders';
 import { config } from './config';
 import { lineHeights } from './line-heights';
+import { shadows } from './shadows';
 import { styles } from './styles';
 import { getComponents, getDesignTokens } from './utils';
 
 export const theme = extendTheme({
   config,
   components: getComponents(SNAPS_COMPONENTS),
+
+  fonts: {
+    heading: `"Euclid Circular B", sans-serif`,
+    body: `"Euclid Circular B", sans-serif`,
+  },
+
   lineHeights,
 
   semanticTokens: {
     borders,
     colors: getDesignTokens('colors'),
-  },
-
-  fonts: {
-    heading: `"Euclid Circular B", sans-serif`,
-    body: `"Euclid Circular B", sans-serif`,
+    shadows,
   },
 
   styles,
diff --git a/packages/snaps-storybook/src/theme/shadows.ts b/packages/snaps-storybook/src/theme/shadows.ts
new file mode 100644
index 0000000000..2f447fb23d
--- /dev/null
+++ b/packages/snaps-storybook/src/theme/shadows.ts
@@ -0,0 +1,3 @@
+import { getShadows } from './utils';
+
+export const shadows = getShadows();
diff --git a/packages/snaps-storybook/src/theme/utils.ts b/packages/snaps-storybook/src/theme/utils.ts
index dc52fa2e01..8130808e83 100644
--- a/packages/snaps-storybook/src/theme/utils.ts
+++ b/packages/snaps-storybook/src/theme/utils.ts
@@ -38,6 +38,41 @@ export function getDesignTokens(themeValue: keyof Theme): DesignTokens {
   );
 }
 
+/**
+ * The shadow shape type from `@metamask/design-tokens`. It's not exported from
+ * the package, so we need to define it here.
+ */
+type ShadowShape = Theme['shadows']['size']['xs'];
+
+/**
+ * Get a shadow string from a {@link ShadowShape} object.
+ *
+ * @param shape - The shadow shape to get the string for.
+ * @returns The shadow string.
+ */
+function getShadow(shape: ShadowShape) {
+  return `${shape.shadowOffset.width}px ${shape.shadowOffset.height}px ${shape.shadowRadius}px 0px ${shape.shadowColor}`;
+}
+
+/**
+ * Get the shadows from the design tokens.
+ *
+ * @returns The shadows extracted from the design tokens.
+ */
+export function getShadows() {
+  return Object.fromEntries(
+    Object.entries(lightTheme.shadows.size).map(([key, value]) => [
+      key,
+      {
+        default: getShadow(value),
+        _dark: getShadow(
+          darkTheme.shadows.size[key as keyof Theme['shadows']['size']],
+        ),
+      },
+    ]),
+  );
+}
+
 export type Styles = ReturnType<typeof defineStyleConfig>;
 
 /**