Feat/holo hosting support

.gitignore

@@ -16,4 +16,7 @@ target/
 .running
 
 ## ui files
-dist.zip
+dist.zip
+
+## holo files
+holo-dev-server

README.md

@@ -56,6 +56,16 @@ npm start
 
 Each new agent that you create this way will get assigned its own port and get connected to the other agents.
 
+## Holo Hosting
+
+1. Get a copy of the Holo envoy server directly from a Holo team member, copy it to the root of the directory as `holo-dev-server`
+
+To test out a holo hosted agent:
+
+```bash
+npm start:agent:holo
+```
+
 ## Package
 
 To package the web happ:

package.json

@@ -15,6 +15,7 @@
     "start:launcher": "VITE_IS_LAUNCHER=true AGENTS=2 npm run network:launcher",
     "network:launcher": "hc s clean && npm run build:happ && UI_PORT=8888 concurrently \"npm run local-services\" \"npm start -w ui\" \"npm run launch:happ:launcher\" \"holochain-playground\"",
     "launch:happ:launcher": "echo \"pass\" | RUST_LOG=warn hc launch --piped -n $AGENTS workdir/mewsfeed.happ --ui-port $UI_PORT network -b http://127.0.0.1:54000 webrtc ws://127.0.0.1:55000",
+    "start:agent:holo": "npm run build:happ && concurrently \"echo pass | lair-keystore server\" \"./holo-dev-server ./workdir/mewsfeed.happ\" \"VITE_IS_HOLO_HOSTED=true VITE_CHAPERONE_SERVER_URL=http://127.0.0.1:24274 UI_PORT=5432 npm -w ui run start\"",
     "test": "npm run build:happ && npm t -w tests",
     "test:watch": "cargo watch --clear -- npm test",
     "package": "npm run build:happ && VITE_IS_LAUNCHER=true npm run package:ui && hc web-app pack workdir",
@@ -49,8 +50,5 @@
   },
   "engines": {
     "npm": ">=7.0.0"
-  },
-  "dependencies": {
-    "@holo-host/web-sdk": "github:mattyg/web-sdk#fix/update-hc-client"
   }
 }

ui/package.json

@@ -16,6 +16,7 @@
     "@fontsource/space-mono": "^5.0.3",
     "@fontsource/syne": "^5.0.3",
     "@headlessui/vue": "^1.7.14",
+    "@holo-host/web-sdk": "0.6.13-prerelease",
     "@holochain-open-dev/profiles": "^0.14.1",
     "@holochain/client": "^0.15.0",
     "@shoelace-style/shoelace": "^2.4.0",

ui/src/App.vue

@@ -73,18 +73,27 @@ const dnaProperties = computed(() =>
 );
 
 onMounted(() => {
-  asyncRetry(setup, {
-    factor: 1.3,
-  });
+  setup();
 });
 
 const setup = async () => {
   // Setup client
   if (IS_HOLO_HOSTED) {
     client.value = await setupHolo();
   } else {
-    client.value = await setupHolochain();
+    client.value = await asyncRetry(setupHolochain, {
+      factor: 1.3,
+    });
   }
+
+  await asyncRetry(setupApp, {
+    factor: 1.3,
+  });
+};
+
+const setupApp = async () => {
+  if (!client.value) throw Error("Holo / Holochain client not ready");
+
   appInfo.value = await client.value.appInfo();
 
   // Setup profiles

ui/src/components/HoloLogin.vue

@@ -1,39 +1,31 @@
 <template>
-  <template v-if="!client.agent.isAnonymous && client.agent.isAvailable">
-    <slot />
+  <template
+    v-if="agentState && !agentState.isAnonymous && agentState.isAvailable"
+  >
+    <slot></slot>
   </template>
 </template>
 
-<script setup lang="ts">
-import { ROUTES } from "@/router";
-import WebSdkApi from "@holo-host/web-sdk";
-import { ComputedRef, inject, onMounted, watch } from "vue";
-import { useRouter } from "vue-router";
+<script lang="ts" setup>
+import WebSdkApi, { AgentState } from "@holo-host/web-sdk";
+import { ComputedRef, inject, onMounted, ref, toRaw } from "vue";
 
 const client = (inject("client") as ComputedRef<WebSdkApi>).value;
-const router = useRouter();
+const agentState = ref<AgentState>();
 
 onMounted(() => {
-  if (client.agent.isAnonymous) {
+  agentState.value = client.agentState;
+  if (client.agentState.isAnonymous) {
     client.signUp({});
   }
-});
 
-watch(
-  () => client.agent.isAvailable,
-  (isLoggedIn) => {
-    if (isLoggedIn) {
-      router.replace({ name: ROUTES.feed, force: true });
-    }
-  }
-);
+  toRaw(client).on("agent-state", (newAgentState: AgentState) => {
+    console.log("agent-state signal", newAgentState);
+    agentState.value = newAgentState;
 
-watch(
-  () => client.agent.isAnonymous,
-  () => {
-    if (client?.agent.isAnonymous) {
+    if (agentState.value.isAnonymous) {
       client.signUp({});
     }
-  }
-);
+  });
+});
 </script>

ui/src/utils/client.ts

@@ -10,10 +10,6 @@ export const HOLOCHAIN_APP_ID = "mewsfeed";
 export const IS_LAUNCHER = import.meta.env.VITE_IS_LAUNCHER;
 export const IS_HOLO_HOSTED = import.meta.env.VITE_IS_HOLO_HOSTED;
 
-export const HOLO_CHAPERONE_URL = import.meta.env.VITE_CHAPERONE_SERVER_URL
-  ? import.meta.env.VITE_CHAPERONE_SERVER_URL
-  : "http://localhost:24274";
-
 export const setupHolochain = async () => {
   try {
     const client = await AppAgentWebsocket.connect(
@@ -37,11 +33,14 @@ export const setupHolochain = async () => {
 };
 
 export const setupHolo = async () => {
+  const HOLO_CHAPERONE_URL = import.meta.env.VITE_CHAPERONE_SERVER_URL
+    ? import.meta.env.VITE_CHAPERONE_SERVER_URL
+    : "http://localhost:24274";
+
   try {
     const client = await WebSdkApi.connect({
       chaperoneUrl: HOLO_CHAPERONE_URL,
       authFormCustomization: {
-        logoUrl: "assets/cat-eating-bird-circle.png",
         appName: "mewsfeed",
         requireRegistrationCode: false,
       },