From 3065fe1f141d7013993dc83db7550bd946dfc2de Mon Sep 17 00:00:00 2001
From: Yan Chen <48968912+chenyan-dfinity@users.noreply.github.com>
Date: Mon, 9 Sep 2024 21:12:52 -0700
Subject: [PATCH] display frontend

---
 src/App.tsx                    |  4 ++++
 src/build.ts                   |  1 +
 src/components/CandidUI.tsx    | 10 +++++++---
 src/components/DeployModal.tsx |  1 +
 src/config/actor.ts            |  5 +++--
 src/node/uploadAsset.js        |  1 +
 6 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4a09569c..7fb9669a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -353,6 +353,10 @@ export function App() {
                     workplaceState.canisters[workplaceState.selectedCanister!]
                       ?.candid
                   }
+                  isFrontend={
+                    workplaceState.canisters[workplaceState.selectedCanister!]
+                      ?.isFrontend ?? false
+                  }
                   forceUpdate={forceUpdate}
                   onMessage={({ origin, source, message }) => {
                     if (!message.caller) return;
diff --git a/src/build.ts b/src/build.ts
index 3dc2fca1..1e56e027 100644
--- a/src/build.ts
+++ b/src/build.ts
@@ -10,6 +10,7 @@ export interface CanisterInfo {
   name?: string;
   candid?: string | null;
   stableSig?: string | null;
+  isFrontend?: boolean;
 }
 /*
 export function interpret(file: string, logger: ILoggingStore): void {
diff --git a/src/components/CandidUI.tsx b/src/components/CandidUI.tsx
index 7ba1c628..128b15eb 100644
--- a/src/components/CandidUI.tsx
+++ b/src/components/CandidUI.tsx
@@ -43,6 +43,7 @@ interface PropTypes {
   canisterId: string;
   candid?: string | null | undefined;
   setCandidWidth?: (width: string) => void;
+  isFrontend: boolean;
   forceUpdate?: any;
   onMessage?: (event: { origin: string; source: Window; message: any }) => void;
 }
@@ -52,6 +53,7 @@ export function CandidUI({
   candid,
   setCandidWidth,
   forceUpdate,
+  isFrontend,
   onMessage,
 }: PropTypes) {
   const [isExpanded, setIsExpanded] = useState(true);
@@ -61,8 +63,10 @@ export function CandidUI({
       ? `&did=${encodeURIComponent(btoa(candid))}`
       : "&external-config";
 
-  const url =
-    `${CANDID_UI_CANISTER_URL}/?id=${canisterId}&tag=${forceUpdate}` + didParam;
+  const url = isFrontend
+    ? `https://${canisterId}.raw.icp0.io`
+    : `${CANDID_UI_CANISTER_URL}/?id=${canisterId}&tag=${forceUpdate}` +
+      didParam;
 
   // Handle incoming messages from iframe
   const handleMessage = useCallback(
@@ -177,7 +181,7 @@ export function CandidUI({
             src={iconCollapse}
             alt="Collapse icon"
           />
-          {isExpanded ? "CANDID UI" : null}
+          {isExpanded ? (isFrontend ? "FRONTEND" : "CANDID UI") : null}
         </Button>
         {isExpanded ? (
           <Button onClick={handleOpenTab}>
diff --git a/src/components/DeployModal.tsx b/src/components/DeployModal.tsx
index 103ee365..2850acf1 100644
--- a/src/components/DeployModal.tsx
+++ b/src/components/DeployModal.tsx
@@ -352,6 +352,7 @@ export function DeployModal({
       await isDeploy(false);
       setCompileResult({ wasm: undefined });
       if (info) {
+        info.isFrontend = true;
         onDeploy(info);
       }
     } catch (err) {
diff --git a/src/config/actor.ts b/src/config/actor.ts
index 37d9edb1..f1c217e2 100644
--- a/src/config/actor.ts
+++ b/src/config/actor.ts
@@ -19,9 +19,10 @@ import { idlFactory as didjs_idl } from "./didjs.did";
 const LOCAL_PORT = 4943;
 
 const hostname = window.location.hostname;
-const local = hostname === "127.0.0.1" || hostname.endsWith("localhost");
+//const local = hostname === "127.0.0.1" || hostname.endsWith("localhost");
+const local = false;
 
-export const agent = new HttpAgent({
+export const agent = HttpAgent.createSync({
   // Prefer calling local replica directly instead of CRA proxy
   host: local ? `http://localhost:${LOCAL_PORT}` : "https://icp-api.io",
 });
diff --git a/src/node/uploadAsset.js b/src/node/uploadAsset.js
index 6f27ec85..0bd4db10 100644
--- a/src/node/uploadAsset.js
+++ b/src/node/uploadAsset.js
@@ -29,6 +29,7 @@ async function upload(canisterId, asset_dir) {
     const fileName = path.relative(asset_dir, file);
     const contents = fs.readFileSync(file);
     console.log(fileName);
+    // TODO: pass in headers when supported
     await batch.store(contents, { fileName });
   }
   await batch.commit();