create hook for interface

packages/snaps-simulator/src/features/handlers/components/UserInterface.tsx

@@ -24,7 +24,7 @@ export const UserInterface: FunctionComponent = () => {
     return null;
   }
 
-  console.log(ui.id);
+  console.log(ui);
   const { snapName, snapId, type, id } = ui;
 
   switch (type) {

packages/snaps-simulator/src/features/renderer/Renderer.tsx

@@ -1,9 +1,6 @@
-import type { ComponentOrElement, SnapId } from '@metamask/snaps-sdk';
-import { getJsxInterface } from '@metamask/snaps-utils';
 import type { FunctionComponent } from 'react';
-import { useSelector } from 'src/hooks';
+import { useSnapInterface } from 'src/hooks';
 
-import { getSnapInterfaceController } from '../simulation';
 import {
   Bold,
   Copyable,
@@ -50,38 +47,29 @@ type RendererProps = {
  * A UI renderer for Snaps UI.
  *
  * @param props - The component props.
- * @param props.node - The component to render.
+ * @param props.interfaceId - The interface ID.
+ * @param props.snapId - The Snap ID.
  * @param props.id - The component ID, to be used as a prefix for component
  * keys.
- * @param props.interfaceId
- * @param props.snapId
  * @returns The renderer component.
  */
 export const Renderer: FunctionComponent<RendererProps> = ({
   interfaceId,
   snapId,
   id = 'root',
 }) => {
-  const snapInterfaceController = useSelector(getSnapInterfaceController);
-  console.log('interface id in Renderer', interfaceId);
+  const snapInterface = useSnapInterface(snapId, interfaceId);
 
-  if (!interfaceId) {
+  if (!snapInterface) {
     return null;
   }
 
-  const element = snapInterfaceController?.getInterface(
-    snapId as SnapId,
-    interfaceId,
-  )?.content;
-
-  if (!element) {
-    return null;
-  }
-  const ReactComponent = components[element.type];
+  const { content } = snapInterface;
+  const ReactComponent = components[content.type];
 
   if (!ReactComponent) {
-    throw new Error(`Unknown component type: ${element.type}.`);
+    throw new Error(`Unknown component type: ${content.type}.`);
   }
 
-  return <ReactComponent id={id} node={element} />;
+  return <ReactComponent id={id} node={content} />;
 };

packages/snaps-simulator/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useDispatch';
 export * from './useHandler';
 export * from './useSelector';
+export * from './useSnapInterface';

packages/snaps-simulator/src/hooks/useSnapInterface.ts

@@ -0,0 +1,24 @@
+import type { StoredInterface } from '@metamask/snaps-controllers';
+import type { SnapId } from '@metamask/snaps-sdk';
+import { useEffect, useState } from 'react';
+import { getSnapInterfaceController } from 'src/features';
+
+import { useSelector } from './useSelector';
+
+export const useSnapInterface = (snapId: string, interfaceId: string) => {
+  const snapInterfaceController = useSelector(getSnapInterfaceController);
+
+  const [snapInterface, setInterface] = useState<StoredInterface | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    const storedInterface = snapInterfaceController?.getInterface(
+      snapId as SnapId,
+      interfaceId,
+    );
+    setInterface(storedInterface);
+  }, [snapInterfaceController, snapId, interfaceId]);
+
+  return snapInterface;
+};