feat: rename simulator to studio and handle hosted environment (#592)

* update copy

* update plausible domain

* simplify router

* add catch all route to handle redirects

* disabled validator add/edit/delete if not on localnetwork

* use hostname for condition, add unit test

* normalize use of capital S for Studio

* fix url in unit text to avoid security flag

* re-update studio url in env example

* setup hosted env variable for frontend and use it instead of URL detection

* remove whitespace failing pre-commit

---------

Co-authored-by: Den <den@Deniss-MacBook-Pro.local>

Author: denishacquin

.env.example

@@ -60,7 +60,9 @@ HEURISTAIAPIKEY     = '<add_your_heuristai_api_key_here>'
 # Front end container details
 VITE_JSON_RPC_SERVER_URL  = 'http://127.0.0.1:4000/api' # if VITE_PROXY_ENABLED = 'true' change to '/api'
 VITE_WS_SERVER_URL   = 'ws://127.0.0.1:4000' # if VITE_PROXY_ENABLED = 'true' change to '/'
-VITE_PLAUSIBLE_DOMAIN = 'simulator.genlayer.com'
+VITE_PLAUSIBLE_DOMAIN = 'studio.genlayer.com'
+VITE_IS_HOSTED=false
+
 FRONTEND_PORT   = '8080'
 FRONTEND_BUILD_TARGET = 'final' # change to 'dev' to run in dev mode
 

.github/workflows/openhands.yml

@@ -18,7 +18,7 @@ jobs:
     if: |
       ${{
         github.event.label.name == 'fix-me' ||
-        (github.event_name == 'issue_comment' && 
+        (github.event_name == 'issue_comment' &&
         startsWith(github.event.comment.body, vars.OPENHANDS_MACRO || '@openhands-agent') &&
         (github.event.comment.author_association == 'OWNER' || github.event.comment.author_association == 'COLLABORATOR' || github.event.comment.author_association == 'MEMBER'))
       }}

CONTRIBUTING.md

@@ -1,29 +1,29 @@
-# Contributing to GenLayer Simulator
+# Contributing to GenLayer Studio
 
-We're thrilled that you're interested in contributing to the GenLayer Simulator! This document will guide you through the contribution process.
+We're thrilled that you're interested in contributing to the GenLayer Studio! This document will guide you through the contribution process.
 
-## What is the GenLayer Simulator?
+## What is the GenLayer Studio?
 
-The GenLayer Simulator is an interactive sandbox designed for developers to explore the potential of GenLayer's Intelligent Contracts. It replicates the GenLayer network's execution environment and consensus algorithm, providing a controlled and local environment to test different ideas and behaviors.
+The GenLayer Studio is an interactive sandbox designed for developers to explore the potential of GenLayer's Intelligent Contracts. It replicates the GenLayer network's execution environment and consensus algorithm, providing a controlled and local environment to test different ideas and behaviors.
 
 ## How You Can Contribute?
 
-Contributions to the GenLayer Simulator are welcome in several forms:
+Contributions to the GenLayer Studio are welcome in several forms:
 
-### Testing the Simulator and Providing Feedback
+### Testing the Studio and Providing Feedback
 
-Help us make the simulator better by testing and giving feedback:
+Help us make the Studio better by testing and giving feedback:
 
-- Start installing the simulator using the GenLayer [CLI](https://github.com/yeagerai/genlayer-simulator?tab=readme-ov-file#quick-install).
-- Try out the Simulator features and tell us what you think through our [feedback form](https://docs.google.com/forms/d/1IVNsZwm936kSNCiXmlAP8bgJnbik7Bqaoc3I6UYhr-o/viewform) or on our [Discord Channel](https://discord.gg/8Jm4v89VAu).
+- Start installing the Studio using the GenLayer [CLI](https://github.com/yeagerai/genlayer-simulator?tab=readme-ov-file#quick-install).
+- Try out the Studio features and tell us what you think through our [feedback form](https://docs.google.com/forms/d/1IVNsZwm936kSNCiXmlAP8bgJnbik7Bqaoc3I6UYhr-o/viewform) or on our [Discord Channel](https://discord.gg/8Jm4v89VAu).
 - If you find any issues, please report them on our [GitHub issues page](https://github.com/yeagerai/genlayer-simulator/issues).
 
 ### Sharing New Ideas and Use Cases
 
 Have ideas for new features or use cases? We're eager to hear them! But first:
 
-- Ensure you have the [Simulator installed](https://github.com/yeagerai/genlayer-simulator?tab=readme-ov-file#quick-install) first to explore existing use cases.
-- After familiarizing yourself with the simulator, contribute your unique use case and share your ideas in our [Discord channel](https://discord.gg/8Jm4v89VAu).
+- Ensure you have the [Studio installed](https://github.com/yeagerai/genlayer-simulator?tab=readme-ov-file#quick-install) first to explore existing use cases.
+- After familiarizing yourself with the Studio, contribute your unique use case and share your ideas in our [Discord channel](https://discord.gg/8Jm4v89VAu).
 
 ### Bug fixing and Feature development
 
@@ -33,7 +33,7 @@ Have ideas for new features or use cases? We're eager to hear them! But first:
 
 - **1.2. Create a branch**: create the branch that you will work on by using the link provided in the issue details page (right panel at the bottom - section "Development")
 
-- **1.3. Setup the Simulator locally**: launch the simulator's frontend and backend by running the docker compose command (Please note that you must have docker, node, and npm installed)
+- **1.3. Setup the Studio locally**: launch the Studio's frontend and backend by running the docker compose command (Please note that you must have docker, node, and npm installed)
 
    ```sh
    $ cp .env.example .env
@@ -90,4 +90,4 @@ Connect with the GenLayer community to discuss, collaborate, and share insights:
 - **[Discord Channel](https://discord.gg/8Jm4v89VAu)**: Our primary hub for discussions, support, and announcements.
 - **[Telegram Group](https://t.me/genlayer)**: For more informal chats and quick updates.
 
-Your continuous feedback drives better product development. Please engage with us regularly to test, discuss, and improve the GenLayer Simulator.
+Your continuous feedback drives better product development. Please engage with us regularly to test, discuss, and improve the GenLayer Studio.

README.md

@@ -1,10 +1,10 @@
-# GenLayer Simulator
+# GenLayer Studio
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/license/mit/) [![Discord](https://dcbadge.vercel.app/api/server/8Jm4v89VAu?compact=true&style=flat)](https://discord.gg/VpfmXEMN66) [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/yeagerai.svg?style=social&label=Follow%20%40GenLayer)](https://x.com/GenLayer) [![GitHub star chart](https://img.shields.io/github/stars/yeagerai/genlayer-simulator?style=social)](https://star-history.com/#yeagerai/genlayer-simulator)
 
 ## 👀 About
 
-This Simulator is an interactive sandbox designed for developers to explore the potential of the [GenLayer Protocol](https://genlayer.com/). It replicates the GenLayer network's execution environment and consensus algorithm, but offers a controlled and local environment to test different ideas and behaviors.
+This Studio is an interactive sandbox designed for developers to explore the potential of the [GenLayer Protocol](https://genlayer.com/). It replicates the GenLayer network's execution environment and consensus algorithm, but offers a controlled and local environment to test different ideas and behaviors.
 
 ## Prerequisites
 Before installing the GenLayer CLI, ensure you have the following prerequisites installed:
@@ -24,18 +24,18 @@ To run genlayer again just run:
 ```
 $ genlayer up
 ```
-After executing those commands a new tab will open in your browser with the GenLayer Simulator. Additional installation instructions can be found [here](https://docs.genlayer.com/simulator/installation)
+After executing those commands a new tab will open in your browser with the GenLayer Studio. Additional installation instructions can be found [here](https://docs.genlayer.com/simulator/installation)
 
 ## 🚀 Key Features
 * 🖥️ **Test Locally:** Developers can test Intelligent Contracts in a local environment, replicating the GenLayer network without the need for deployment. This speeds up the development cycle and reduces the risk of errors in the live environment.
 
-* 🧪 **Versatile Scenario Testing:** The simulator allows developers to create and test contracts under various simulated network conditions. This includes stress testing under high transaction loads, simulating network delays, and testing different consensus outcomes.
+* 🧪 **Versatile Scenario Testing:** The Studio allows developers to create and test contracts under various simulated network conditions. This includes stress testing under high transaction loads, simulating network delays, and testing different consensus outcomes.
 
-* 🔄 **Changeable LLM Validators:** Developers can modify the large language models (LLMs) used by validators within the simulator. This allows for testing of security, efficiency, and accuracy by running different LLMs to validate transactions.
+* 🔄 **Changeable LLM Validators:** Developers can modify the large language models (LLMs) used by validators within the Studio. This allows for testing of security, efficiency, and accuracy by running different LLMs to validate transactions.
 
 
 ## 📖 The Docs
-Detailed information of how to use the simulator can be found at [GenLayer Docs](https://docs.genlayer.com/).
+Detailed information of how to use the Studio can be found at [GenLayer Docs](https://docs.genlayer.com/).
 
 
 ## Contributing

backend/database_handler/migration/README.md

@@ -2,7 +2,7 @@
 
 ### Window One
 
-1. Launch the simulator
+1. Launch the Studio
 
 ### Window Two
 

backend/node/create_nodes/providers_schema.json

@@ -14,7 +14,7 @@
       "type": "object"
     },
     "plugin": {
-      "$comment": "plugin to be loaded by the simulator to interact with the provider",
+      "$comment": "Plugin to be loaded by the Studio to interact with the provider",
       "enum": ["openai", "ollama", "anthropic"]
     },
     "plugin_config": {

decisions/README.md

@@ -1,6 +1,6 @@
 # Decisions documentation
 
-Greatly inspired by ADRs, this directory contains important decisions about the `simulator` code.
+Greatly inspired by ADRs, this directory contains important decisions about the `Studio` code.
 
 # Index
 

docker-compose.yml

@@ -4,6 +4,8 @@ services:
       context: ./
       dockerfile: ./docker/Dockerfile.frontend
       target: ${FRONTEND_BUILD_TARGET:-final}
+      args:
+        - VITE_*
     ports:
       - "${FRONTEND_PORT}:8080"
     volumes:
@@ -14,6 +16,8 @@ services:
         condition: service_healthy
     expose:
       - "${FRONTEND_PORT}"
+    environment:
+      - VITE_*
 
   jsonrpc:
     build:

docker/Dockerfile.frontend

@@ -5,7 +5,7 @@ COPY ./frontend/package*.json .
 RUN --mount=type=cache,target=/root/.npm npm ci
 COPY ./frontend .
 COPY ./examples src/assets/examples
-COPY ./.env .
+COPY ./.env ./.env
 COPY ../backend/node/create_nodes/providers_schema.json /app/src/assets/schemas/providers_schema.json
 
 

frontend/README.md

@@ -1,4 +1,4 @@
-# genlayer-simulator
+# genlayer-studio
 
 This template should help get you started developing with Vue 3 in Vite.
 

frontend/src/assets/main.css

@@ -16,7 +16,7 @@
 
 @layer components {
   .input-style {
-    @apply flex w-full rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-accent hover:focus:ring-accent sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-white;
+    @apply flex w-full rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-accent hover:focus:ring-accent disabled:opacity-50 sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-white;
   }
 }
 

frontend/src/assets/schemas/providers_schema.json

@@ -14,7 +14,7 @@
       "type": "object"
     },
     "plugin": {
-      "$comment": "plugin to be loaded by the simulator to interact with the provider",
+      "$comment": "Plugin to be loaded by the Studio to interact with the provider",
       "enum": ["openai", "ollama", "anthropic"]
     },
     "plugin_config": {

frontend/src/components/Simulator/HomeTab.vue

@@ -56,7 +56,7 @@ const hasAnySampleContract = computed(() => {
           class="rounded-md bg-slate-50 p-4 @[1024px]:p-8 dark:bg-slate-600 dark:bg-opacity-10"
         >
           <h1 class="mb-4 text-lg font-semibold">
-            Welcome to the GenLayer Simulator
+            Welcome to the GenLayer Studio
           </h1>
 
           <div class="text-sm">
@@ -66,7 +66,7 @@ const hasAnySampleContract = computed(() => {
               natural language.
             </p>
             <p class="my-2">
-              This Simulator is an interactive sandbox for developers to explore
+              This Studio is an interactive sandbox for developers to explore
               GenLayer’s Intelligent Contracts. It mirrors the GenLayer
               network’s environment and consensus, allowing you to test ideas
               locally.
@@ -107,7 +107,7 @@ const hasAnySampleContract = computed(() => {
 
           <div class="text-sm">
             <Alert info class="mt-4">
-              The simulator currently does not support token transfers,
+              The Studio currently does not support token transfers,
               contract-to-contract interactions, or gas consumption. These
               features will be added in future updates.
             </Alert>

frontend/src/components/Simulator/ValidatorItem.vue

@@ -10,8 +10,10 @@ import ValidatorModal from '@/components/Simulator/ValidatorModal.vue';
 import { ref } from 'vue';
 import { useNodeStore } from '@/stores';
 import { notify } from '@kyvg/vue3-notification';
+import { useConfig } from '@/hooks';
 
 const nodeStore = useNodeStore();
+const { canUpdateValidators } = useConfig();
 
 const isUpdateModalMopen = ref(false);
 const showConfirmDelete = ref(false);
@@ -75,7 +77,10 @@ async function handleDeleteValidator() {
       </span>
     </div>
 
-    <div class="hidden flex-row gap-1 group-hover:flex">
+    <div
+      v-if="canUpdateValidators"
+      class="hidden flex-row gap-1 group-hover:flex"
+    >
       <button
         @click.stop="isUpdateModalMopen = true"
         v-tooltip="'Update Validator'"

frontend/src/components/Simulator/ValidatorModal.vue

@@ -12,7 +12,7 @@ import NumberInput from '@/components/global/inputs/NumberInput.vue';
 import TextAreaInput from '@/components/global/inputs/TextAreaInput.vue';
 import FieldError from '@/components/global/fields/FieldError.vue';
 import FieldLabel from '@/components/global/fields/FieldLabel.vue';
-import { useEventTracking } from '@/hooks';
+import { useEventTracking, useConfig } from '@/hooks';
 import CopyTextButton from '../global/CopyTextButton.vue';
 import { uniqBy } from 'lodash-es';
 import Alert from '../global/Alert.vue';
@@ -22,6 +22,7 @@ const { trackEvent } = useEventTracking();
 const emit = defineEmits(['close']);
 const error = ref('');
 const isLoading = ref(false);
+const { canUpdateValidators } = useConfig();
 
 const props = defineProps<{
   validator?: ValidatorModel;
@@ -294,6 +295,7 @@ const isStakeValid = computed(() => {
         v-model="newValidatorData.stake"
         required
         testId="input-stake"
+        :disabled="!canUpdateValidators"
       />
 
       <FieldError v-if="!isStakeValid"
@@ -310,14 +312,17 @@ const isStakeValid = computed(() => {
         :cols="60"
         v-model="newValidatorData.config"
         :invalid="!isConfigValid"
+        :disabled="!canUpdateValidators"
       />
       <FieldError v-if="!isConfigValid">Please enter valid JSON.</FieldError>
     </div>
 
     <Alert error v-if="error" type="error">{{ error }}</Alert>
 
+    <Btn v-if="!canUpdateValidators" @click="emit('close')">Close</Btn>
+
     <Btn
-      v-if="isCreateMode"
+      v-else-if="isCreateMode"
       @click="handleCreateValidator"
       :disabled="!validatorModelValid"
       testId="btn-create-validator"
@@ -327,7 +332,7 @@ const isStakeValid = computed(() => {
     </Btn>
 
     <Btn
-      v-if="!isCreateMode && validator"
+      v-else-if="!isCreateMode && validator"
       @click="handleUpdateValidator(validator)"
       :disabled="!validatorModelValid"
       testId="btn-update-validator"

frontend/src/components/Simulator/settings/SimulatorSection.vue

@@ -58,7 +58,7 @@ const handleResetStorage = async () => {
       :dangerous="true"
       :confirming="isResetting"
     >
-      <template #title>Reset Simulator Storage</template>
+      <template #title>Reset Studio Storage</template>
       <template #description
         >Are you sure? All the examples will be restored, and the following
         intelligent contracts will be removed.</template

frontend/src/components/Tutorial/TutorialContainer.vue

@@ -4,19 +4,21 @@ import { DEFAULT_OPTIONS, KEYS } from './constants';
 import TutorialStep from './TutorialStep.vue';
 import { useContractsStore, useTutorialStore, useUIStore } from '@/stores';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useConfig } from '@/hooks';
 
 const contractsStore = useContractsStore();
 const tutorialStore = useTutorialStore();
 const uiStore = useUIStore();
 const router = useRouter();
+const { canUpdateValidators } = useConfig();
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 const steps = ref([
   {
     target: '#tutorial-welcome',
     header: {
-      title: 'Welcome to the GenLayer Simulator!',
+      title: 'Welcome to the GenLayer Studio!',
     },
     content: 'This tutorial will guide you through the basics.',
 
@@ -101,8 +103,9 @@ const steps = ref([
       title: 'Validators',
     },
     target: '#tutorial-validators',
-    content:
-      'Configure the number of validators and set up their parameters here.',
+    content: canUpdateValidators
+      ? 'Configure the number of validators and set up their parameters here.'
+      : 'Here you can see the validators that are currently running on the network.',
     placement: 'right',
   },
   {
@@ -111,7 +114,7 @@ const steps = ref([
     },
     target: '#tutorial-end',
     content:
-      "You've completed the GenLayer Simulator tutorial. Feel free to revisit any step or start experimenting with your own contracts. Happy coding!",
+      "You've completed the GenLayer Studio tutorial. Feel free to revisit any step or start experimenting with your own contracts. Happy coding!",
   },
 ]);
 

frontend/src/hooks/index.ts

@@ -8,4 +8,5 @@ export * from './useInputMap';
 export * from './useContractQueries';
 export * from './useFileName';
 export * from './useSetupStores';
+export * from './useConfig';
 export * from './useTransactionListener';

frontend/src/hooks/useConfig.ts

@@ -0,0 +1,8 @@
+export const useConfig = () => {
+  const isHostedEnvironment = import.meta.env.VITE_IS_HOSTED === 'true';
+  const canUpdateValidators = !isHostedEnvironment;
+
+  return {
+    canUpdateValidators,
+  };
+};

frontend/src/main.ts

@@ -35,7 +35,7 @@ app.use(VueSpinnersPlugin);
 
 const plausible = createPlausible({
   init: {
-    domain: import.meta.env.VITE_PLAUSIBLE_DOMAIN || 'simulator.genlayer.com',
+    domain: import.meta.env.VITE_PLAUSIBLE_DOMAIN || 'studio.genlayer.com',
     trackLocalhost: true,
   },
   settings: {

frontend/src/router/index.ts

@@ -8,12 +8,11 @@ import SettingsView from '@/views/Simulator/SettingsView.vue';
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    { path: '/', redirect: { name: 'contracts' } },
     {
-      path: '/simulator',
+      path: '/',
+      redirect: { name: 'contracts' },
       component: SimulatorView,
       children: [
-        { path: '', redirect: { name: 'contracts' } },
         {
           path: 'contracts',
           name: 'contracts',
@@ -40,6 +39,10 @@ const router = createRouter({
         },
       ],
     },
+    {
+      path: '/:pathMatch(.*)*',
+      redirect: '/',
+    },
   ],
 });