feat: update tutorial

chore: include missing files
feat: add zoomable images

.env

@@ -0,0 +1 @@
+ARGON_MAINCHAIN_URL=wss://rpc.testnet.argonprotocol.org

.gitignore

@@ -4,6 +4,7 @@ out
 .DS_Store
 *.log*
 packages
-ui
-main
+./ui
+./main
 .idea
+scripts/*.js

main/preload/chromealive.js

@@ -0,0 +1,35 @@
+"use strict";
+const { ipcRenderer } = require("electron");
+document.addEventListener("chromealive:event", (e) => {
+  const message = e.detail;
+  console.debug(message.eventType, message.data);
+});
+const caMessagesById = /* @__PURE__ */ new Map();
+document.addEventListener("chromealive:api", (e) => {
+  const message = e.detail;
+  caMessagesById.set(`${message.clientId}_${message.messageId}`, message);
+  ipcRenderer.send("chromealive:api", message.command, message.args);
+});
+document.addEventListener("chromealive:api:response", (e) => {
+  var _a;
+  const message = e.detail;
+  const key = `${message.clientId}_${message.responseId}`;
+  const original = caMessagesById.get(key);
+  caMessagesById.delete(key);
+  console.debug(original == null ? void 0 : original.command, { args: (_a = original == null ? void 0 : original.args) == null ? void 0 : _a[0], result: message.data });
+});
+document.addEventListener("App:changeHeight", (e) => {
+  const message = e.detail;
+  console.debug("App:changeHeight", message.height);
+  ipcRenderer.send("App:changeHeight", message.height);
+});
+document.addEventListener("App:showChildWindow", (e) => {
+  const message = e.detail;
+  console.debug("App:showChildWindow", message.frameName);
+  ipcRenderer.send("App:showChildWindow", message.frameName);
+});
+document.addEventListener("App:hideChildWindow", (e) => {
+  const message = e.detail;
+  console.debug("App:hideChildWindow", message.frameName);
+  ipcRenderer.send("App:hideChildWindow", message.frameName);
+});

main/preload/desktop.js

@@ -0,0 +1,60 @@
+"use strict";
+const { contextBridge, ipcRenderer, webUtils } = require("electron");
+contextBridge.exposeInMainWorld("appBridge", {
+  async send(api, args = {}) {
+    try {
+      const result = await ipcRenderer.invoke("desktop:api", { api, args });
+      console.log(api, {
+        args,
+        result
+      });
+      return result;
+    } catch (error) {
+      console.error("ERROR in api", { api, args, error });
+      throw error;
+    }
+  },
+  getPrivateApiHost() {
+    return ipcRenderer.sendSync("getPrivateApiHost");
+  },
+  getFilePath(file) {
+    return webUtils.getPathForFile(file);
+  }
+});
+document.addEventListener("desktop:api", (e) => {
+  console.log("desktop:api", e);
+  const message = e.detail;
+  ipcRenderer.send("desktop:api", message.api, message.args);
+});
+document.addEventListener("chromealive:event", (e) => {
+  const message = e.detail;
+  console.log(message.eventType, message.data);
+});
+const messagesById = /* @__PURE__ */ new Map();
+document.addEventListener("chromealive:api", (e) => {
+  const message = e.detail;
+  messagesById.set(`${message.clientId}_${message.messageId}`, message);
+});
+document.addEventListener("chromealive:api:response", (e) => {
+  var _a;
+  const message = e.detail;
+  const key = `${message.clientId}_${message.responseId}`;
+  const original = messagesById.get(key);
+  messagesById.delete(key);
+  console.log(original == null ? void 0 : original.command, { args: (_a = original == null ? void 0 : original.args) == null ? void 0 : _a[0], result: message.data });
+});
+document.addEventListener("App:changeHeight", (e) => {
+  const message = e.detail;
+  console.debug("App:changeHeight", message.height);
+  ipcRenderer.send("App:changeHeight", message.height);
+});
+document.addEventListener("App:showChildWindow", (e) => {
+  const message = e.detail;
+  console.debug("App:showChildWindow", message.frameName);
+  ipcRenderer.send("App:showChildWindow", message.frameName);
+});
+document.addEventListener("App:hideChildWindow", (e) => {
+  const message = e.detail;
+  console.debug("App:hideChildWindow", message.frameName);
+  ipcRenderer.send("App:hideChildWindow", message.frameName);
+});

main/preload/menubar.js

@@ -0,0 +1,7 @@
+"use strict";
+const { ipcRenderer } = require("electron");
+document.addEventListener("desktop:api", (e) => {
+  console.log("desktop:api", e);
+  const message = e.detail;
+  ipcRenderer.send("desktop:api", message.api, message.args);
+});

package.json

@@ -29,7 +29,7 @@
     "unpack:asar": "npx @electron/asar extract dist/mac/Ulixee.app/Contents/Resources/app.asar dist/mac/app_unpacked"
   },
   "dependencies": {
-    "@argonprotocol/localchain": "^0.0.8",
+    "@argonprotocol/localchain": "0.0.13",
     "@electron-toolkit/preload": "^3.0.0",
     "@ulixee/cloud": "2.0.0-alpha.29",
     "@ulixee/commons": "2.0.0-alpha.29",

src/ui/src/pages/desktop/components/ZoomableImage.vue

@@ -0,0 +1,61 @@
+<template>
+  <img
+    :src="imageUrl"
+    v-bind="$attrs"
+    @click="toggleZoom"
+    :class="{ 'fullscreen-image': isZoomed }"
+  />
+</template>
+
+<script lang="ts">
+import * as Vue from 'vue';
+
+export default Vue.defineComponent({
+  name: 'ZoomableImage',
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const images = import.meta.glob('@/assets/images/*.png');
+
+    const imageUrl = Vue.ref('');
+    Object.entries(images)
+      .find(([path]) => path.includes(props.name))?.[1]()
+      .then(image => {
+        imageUrl.value = (image as any).default;
+      });
+
+    return {
+      imageUrl,
+      isZoomed: Vue.ref(false),
+    };
+  },
+  methods: {
+    toggleZoom() {
+      this.isZoomed = !this.isZoomed;
+    },
+  },
+});
+</script>
+<style scoped>
+img {
+  height: auto;
+  cursor: pointer;
+  transition: transform 0.3s ease-in-out; /* Smooth transition */
+}
+
+.fullscreen-image {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw; /* Full viewport width */
+  height: 100vh; /* Full viewport height */
+  object-fit: contain;
+  z-index: 9999;
+  cursor: zoom-out;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+</style>

src/ui/src/pages/desktop/index.vue

@@ -1,14 +1,26 @@
 <template>
-  <div class="y-0 l-0 r-0 drag-bar absolute h-8 w-full">
-&nbsp;
-  </div>
+  <div class="y-0 l-0 r-0 drag-bar absolute h-8 w-full">&nbsp;</div>
   <Sidebar />
 
   <div class="flex flex-col pl-64">
     <main class="flex-1">
       <div class="py-6">
         <div class="mx-auto max-w-7xl px-8">
           <div class="transition-opacity duration-150 ease-linear">
+            <button
+              @click="goBack()"
+              :disabled="!hasBack"
+              class="text-gray-500 shadow-sm p-2 rounded-full hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-800"
+            >
+              <ArrowLeftIcon class="h-5" aria-hidden="true" />
+            </button>
+            <button
+              @click="goForward()"
+              v-if='hasForward'
+              class="ml-2 text-gray-500 shadow-sm  p-2 rounded-full hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-800"
+            >
+              <ArrowRightIcon class="h-5" aria-hidden="true" />
+            </button>
             <RouterView />
           </div>
         </div>
@@ -18,22 +30,46 @@
 </template>
 
 <script lang="ts">
+import { ref } from 'vue';
 import * as Vue from 'vue';
-import { RouterView } from 'vue-router';
+import { RouterView, useRouter } from 'vue-router';
 import Sidebar from './views/Sidebar.vue';
-import Datastores from "./views/Datastores.vue";
+import Datastores from './views/Datastores.vue';
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/vue/24/outline';
 
 export default Vue.defineComponent({
   name: 'App',
   components: {
     Sidebar,
     Datastores,
     RouterView,
+    ArrowLeftIcon,
+    ArrowRightIcon,
   },
   setup() {
     document.title = 'Ulixee Desktop';
+    const router = useRouter();
+
+    // Reactive variables to track back and forward navigation
+    const hasBack = ref(!!history.state?.back);
+    const hasForward = ref(!!history.state?.forward);
+    router.afterEach(() => {
+      hasBack.value = !!history.state?.back;
+      hasForward.value = !!history.state?.forward;
+    });
+    return {
+      hasForward,
+      hasBack,
+    };
+  },
+  methods: {
+    goBack() {
+      this.$router.back();
+    },
+    goForward() {
+      this.$router.forward();
+    },
   },
-  methods: {},
 });
 </script>
 

src/ui/src/pages/desktop/stores/GettingStartedStore.ts

@@ -33,16 +33,16 @@ export const useGettingStartedStore = defineStore('gettingStartedStore', () => {
       description: 'Datastores support payment out of the box.',
       href: 'payment',
     },
+    {
+      name: 'Query your Datastore with Payment',
+      description: 'Add Localchain funding and query.',
+      href: 'queryPayment',
+    },
     {
       name: 'Deploy your Datastore',
       description: 'You can deploy in one step to our public cloud, or to your own server.',
       href: 'deploy',
     },
-    {
-      name: 'Create a Shareable Credit',
-      description: 'Create a credit - you can send it to a friend or test yourself.',
-      href: 'credit',
-    },
     {
       name: 'Clone a Datastore',
       description: 'Datastores can be cloned and extended without exposing the code.',
@@ -146,6 +146,21 @@ export const useGettingStartedStore = defineStore('gettingStartedStore', () => {
         }
       });
     },
+    queryPayment(done) {
+      const datastoreStore = useDatastoreStore();
+      const { datastoresById } = storeToRefs(datastoreStore);
+      const stopWatch = watch(datastoresById.value, value => {
+        for (const entry of Object.values(value)) {
+          if (
+            entry.summary.scriptEntrypoint.includes('ulixee.org.') &&
+            entry.summary.stats.averageTotalPricePerQuery > 0
+          ) {
+            stopWatch();
+            done();
+          }
+        }
+      });
+    },
     deploy(done) {
       const datastoreStore = useDatastoreStore();
       const { datastoresById } = storeToRefs(datastoreStore);

src/ui/src/pages/desktop/stores/WalletStore.ts

@@ -12,6 +12,8 @@ export const useWalletStore = defineStore('walletStore', () => {
     credits: [],
     brokerAccounts: [],
     formattedBalance: '0',
+    localchainForQuery: 'primary',
+    localchainForCloudNode: '',
   } as IWallet);
 
   window.desktopApi.on('Wallet.updated', data => {
@@ -29,22 +31,28 @@ export const useWalletStore = defineStore('walletStore', () => {
     return account;
   }
 
-  async function addBrokerAccount(host: string, userIdentity: string, name?: string) {
+  async function addBrokerAccount(
+    host: string,
+    pemPath: string,
+    name?: string,
+    pemPassword?: string,
+  ) {
     const account = await window.desktopApi.send('User.addBrokerAccount', {
       name,
       host,
-      userIdentity,
+      pemPassword,
+      pemPath,
     });
     wallet.value.brokerAccounts.push(account);
     return account;
   }
 
-  async function transferFromMainchain(milligons: bigint, address?: string) {
+  async function transferFromMainchain(milligons: bigint, address: string) {
     await window.desktopApi.send('Argon.transferFromMainchain', { milligons, address });
     await load();
   }
 
-  async function transferToMainchain(milligons: bigint, address?: string) {
+  async function transferToMainchain(milligons: bigint, address: string) {
     await window.desktopApi.send('Argon.transferToMainchain', { milligons, address });
     await load();
   }

src/ui/src/pages/desktop/views/CloudAddModal.vue

@@ -87,7 +87,7 @@
         <p class="mb-2 font-light">
           You'll need to install Node.js 18+ on the remote machine. Then run these commands:
           <!-- prettier-ignore -->
-          <Prism language="shell">
+          <Prism language="bash">
             npm i --save @ulixee/cloud
             # if debian linux
             sudo $(npx install-browser-deps)
@@ -198,6 +198,7 @@ export default Vue.defineComponent({
         this.hasValidAddress = false;
         this.inputIpAddress = '';
         this.inputCloudName = '';
+        this.modal.close();
       } catch (error: any) {
         this.errorMessage = error.message;
       }

src/ui/src/pages/desktop/views/Replays.vue

@@ -60,6 +60,7 @@
       </transition>
     </div>
   </Listbox>
+  <div class='align-middle text-center mt-1 mb-2 italic text-gray-700 text-sm'>If you can't see your Cloud, you might need to upload your admin identity to use it</div>
   <div
     class="overflow-hidden rounded-lg border-b border-gray-300 bg-white shadow-lg ring-1 ring-black ring-opacity-5"
   >