FrameConnector returns "This is the OpenAttestation default renderer"

[tmarcus68]

I have created a renderer and hosted it, the renderer is working on opencerts.io.

Now I am trying to use to show the rendered any certificate on my own FE.

The code I use is as follows.

DecentralisedRenderer.js

import React, { useRef, useCallback, useState } from "react";

import { FrameConnector, renderDocument } from "@govtechsg/decentralized-renderer-react-components";

const DecentralisedRenderer = (props) => {
  const toFrame = useRef();
  const SCROLLBAR_WIDTH = 20;
  const [height, setHeight] = useState(0);

  const onConnected = useCallback(
    (frame) => {
      toFrame.current = frame;
      if (toFrame.current) {
        toFrame.current(renderDocument({ document: JSON.parse(props.certificate) }));
      }
    },
    [props.certificate]
  );

  const dispatch = (action) => {
    console.log(action);
    if (action.type === "UPDATE_HEIGHT") {
      setHeight(action.payload + SCROLLBAR_WIDTH);
    }
  };

  return (
    <FrameConnector
      style={{ height: '${height}px`, width: "95%" }}
      source={props.source}
      onConnected={onConnected}
      dispatch={dispatch}
    />
  );
};

export default DecentralisedRenderer;

The component is then called via <DecentralisedRenderer certificate={document} source={renderer} /> with the document being the raw string of the .opencert file selected and source being the renderer URL.

The iframe shows "This is the OpenAttestation default renderer" instead of my custom renderer.

The console.log for "UPDATE_TEMPLATES" is as follows.
{type: 'UPDATE_TEMPLATES', payload: Array(1), meta: undefined} meta: undefined payload: Array(1) 0: {id: 'default-template', label: 'Default', type: 'custom-template'} length: 1 [[Prototype]]: Array(0) type: "UPDATE_TEMPLATES" [[Prototype]]: Object

How can I set my custom template and renderer any certificate on my site? FE is running on react js.

[HJunyuan]

Hi @tmarcus68,

It seems like you have missed out on the dispatch handler for updateTemplate (UPDATE_TEMPLATE).

Please refer to the following example application:

decentralized-renderer-react-components/example/application/container.tsx

Lines 75 to 78 in 29b23c6

	if (isActionOf(updateTemplates, action)) {
	setTemplates(action.payload);
	setSelectedTemplate(action.payload[0].id);
	}