display frontend

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;

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 {

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}>

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) {

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",
 });

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();