From 180b921ae1121fd0c6e75af083835c1e273ae4a6 Mon Sep 17 00:00:00 2001
From: rongquan1 <rongquan.low@gmail.com>
Date: Wed, 4 Mar 2026 17:25:57 +0800
Subject: [PATCH 1/2] fix: add timeout template for OpenCerts

---
 src/DefaultTemplate.stories.ts          | 15 ++++++++++++++-
 src/DefaultTemplate.tsx                 | 23 +++++++++++++++++++++++
 src/components/frame/FrameConnector.tsx | 14 ++++++++++----
 3 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/DefaultTemplate.stories.ts b/src/DefaultTemplate.stories.ts
index ce84cfc..946cafe 100644
--- a/src/DefaultTemplate.stories.ts
+++ b/src/DefaultTemplate.stories.ts
@@ -1,4 +1,5 @@
-import { DefaultTemplate } from "./DefaultTemplate";
+import React from "react";
+import { DefaultTemplate, ConnectionFailureTemplate } from "./DefaultTemplate";
 
 export default {
   title: "DefaultTemplate",
@@ -25,3 +26,15 @@ export const NonEditableValue = {
     },
   },
 };
+
+export const ConnectionFailure = {
+  name: "Connection Failure (OpenCerts only)",
+  render: ConnectionFailureTemplate,
+  decorators: [
+    (Story: any) =>
+      React.createElement("div", { style: { padding: "4rem 0", textAlign: "center" } }, React.createElement(Story)),
+  ],
+  args: {
+    source: "http://localhost:3000",
+  },
+};
diff --git a/src/DefaultTemplate.tsx b/src/DefaultTemplate.tsx
index 34b2b3b..6f178ad 100644
--- a/src/DefaultTemplate.tsx
+++ b/src/DefaultTemplate.tsx
@@ -11,6 +11,29 @@ const container = {
 const textColor = `#333`;
 const paddingBox = `.75rem 1.25rem`;
 
+export interface ConnectionFailureProps {
+  source?: string;
+}
+
+export const ConnectionFailureTemplate: React.FunctionComponent<ConnectionFailureProps> = (props) => {
+  return (
+    <div style={{ ...container, fontFamily: "Arial", wordBreak: "break-all" }}>
+      <div style={{ backgroundColor: "#FDFDEA", borderLeft: "2px solid #8E4B10", padding: "16px 16px 16px 18px" }}>
+        <p style={{ margin: "0px", lineHeight: "21px", fontSize: "16px", color: "#8E4B10", fontWeight: "700" }}>
+          This document might be having loading issues
+        </p>
+        <p style={{ margin: "0px", lineHeight: "21px", fontSize: "14px", color: "#374151", marginTop: "6px" }}>
+          Try refreshing the page or check your internet connection. If the issue continues, please contact the issuer
+          with the information below:
+          <br />
+          <br />
+          <span style={{ fontFamily: "Courier" }}>Template URL: &quot;{props.source}&quot;</span>
+        </p>
+      </div>
+    </div>
+  );
+};
+
 export const DefaultTemplate: React.FunctionComponent<TemplateProps<any>> = (props) => {
   return (
     <div id="default-template">
diff --git a/src/components/frame/FrameConnector.tsx b/src/components/frame/FrameConnector.tsx
index 1f93a28..c0e43ff 100644
--- a/src/components/frame/FrameConnector.tsx
+++ b/src/components/frame/FrameConnector.tsx
@@ -1,6 +1,7 @@
 import React, { CSSProperties, FunctionComponent, useEffect, useMemo, useRef, useState } from "react";
 import { useChildFrame } from "./useFrame";
 import { HostActions, HostActionsHandler, LegacyHostActions } from "./host.actions";
+import { ConnectionFailureTemplate } from "../../DefaultTemplate";
 import {
   FrameActions,
   LegacyFrameActions,
@@ -85,6 +86,7 @@ export const FrameConnector: FunctionComponent<FrameConnectorProps> = ({
     };
   }, [dispatchProxy]);
 
+  const isOpenCerts = typeof window !== "undefined" && window.location.hostname.endsWith("opencerts.io");
   const DEFAULT_RENDERER_URL = `https://generic-templates.tradetrust.io`;
   const originalIframe = useRef<HTMLIFrameElement>(null);
   const fallbackIframe = useRef<HTMLIFrameElement>(null);
@@ -170,10 +172,14 @@ export const FrameConnector: FunctionComponent<FrameConnectorProps> = ({
     <>
       {!useFallbackSource ? (
         timeout ? (
-          <>
-            <h3>Connection timeout on renderer</h3>
-            <p>Please contact the administrator of {source}.</p>
-          </>
+          isOpenCerts ? (
+            <ConnectionFailureTemplate source={source} />
+          ) : (
+            <>
+              <h3>Connection timeout on renderer</h3>
+              <p>Please contact the administrator of {source}.</p>
+            </>
+          )
         ) : (
           <iframe
             title="Decentralised Rendered Certificate"

From a104a68b3adc367c5fb24a5f8b76e0f885d984a2 Mon Sep 17 00:00:00 2001
From: rongquan1 <rongquan.low@gmail.com>
Date: Wed, 4 Mar 2026 17:30:57 +0800
Subject: [PATCH 2/2] fix: improve hostname detection

---
 src/components/frame/FrameConnector.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/frame/FrameConnector.tsx b/src/components/frame/FrameConnector.tsx
index c0e43ff..e10e36d 100644
--- a/src/components/frame/FrameConnector.tsx
+++ b/src/components/frame/FrameConnector.tsx
@@ -86,7 +86,8 @@ export const FrameConnector: FunctionComponent<FrameConnectorProps> = ({
     };
   }, [dispatchProxy]);
 
-  const isOpenCerts = typeof window !== "undefined" && window.location.hostname.endsWith("opencerts.io");
+  const hostname = typeof window !== "undefined" ? window.location.hostname : "";
+  const isOpenCerts = hostname === "opencerts.io" || hostname.endsWith(".opencerts.io");
   const DEFAULT_RENDERER_URL = `https://generic-templates.tradetrust.io`;
   const originalIframe = useRef<HTMLIFrameElement>(null);
   const fallbackIframe = useRef<HTMLIFrameElement>(null);