refactor: refactor services and clients

frontend/src/App.vue

@@ -5,9 +5,10 @@ import Notification from '@/components/Notification.vue';
 import TutorialContainer from '@/components/Tutorial/TutorialContainer.vue';
 import { useUIStore } from '@/stores/ui';
 import { onBeforeMount } from 'vue';
-import { setupStores } from './utils';
+import { useSetupStores } from '@/hooks';
 
 const uiStore = useUIStore();
+const { setupStores } = useSetupStores();
 
 onBeforeMount(() => {
   uiStore.initialize();

frontend/src/components/Simulator/CodeEditor.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import { ref, shallowRef, watch, computed } from 'vue';
-import { pythonSyntaxDefinition } from '@/utils';
 import { useContractsStore, useUIStore } from '@/stores';
 import { type ContractFile } from '@/types';
+import { usePythonSyntax } from '@/hooks';
 
 const uiStore = useUIStore();
 const contractStore = useContractsStore();
 const props = defineProps<{
   contract: ContractFile;
 }>();
+const pythonSyntax = usePythonSyntax();
 
 const editorElement = ref<HTMLDivElement | null>(null);
 const containerElement = ref<HTMLElement | null | undefined>(null);
@@ -22,10 +23,7 @@ watch(
     if (!editorRef.value && newValue) {
       containerElement.value = editorElement.value?.parentNode?.parentElement;
       monaco.languages.register({ id: 'python' });
-      monaco.languages.setMonarchTokensProvider(
-        'python',
-        pythonSyntaxDefinition,
-      );
+      monaco.languages.setMonarchTokensProvider('python', pythonSyntax);
       editorRef.value = monaco.editor.create(editorElement.value!, {
         value: props.contract.content || '',
         language: 'python',

frontend/src/components/Simulator/ConstructorParameters.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { useContractQueries } from '@/hooks/useContractQueries';
+import { useContractQueries, useInputMap } from '@/hooks';
 import { ref, computed, watch, onMounted } from 'vue';
 import PageSection from '@/components/Simulator/PageSection.vue';
 import { ArrowUpTrayIcon } from '@heroicons/vue/16/solid';
-import { InputTypesMap } from '@/utils';
 import EmptyListPlaceholder from '@/components/Simulator/EmptyListPlaceholder.vue';
 import GhostBtn from '../global/GhostBtn.vue';
 import { notify } from '@kyvg/vue3-notification';
@@ -13,6 +12,7 @@ import { type ContractMethod } from '@/types';
 
 const { contractSchemaQuery, deployContract, isDeploying } =
   useContractQueries();
+const inputMap = useInputMap();
 
 const { data, isPending, isRefetching, isError } = contractSchemaQuery;
 const inputParams = ref<{ [k: string]: any }>({});
@@ -105,7 +105,11 @@ const toggleMode = () => {
 
 const mapInputs = (inputs: { [k: string]: string }) =>
   Object.keys(inputs || {})
-    .map((key) => ({ name: key, type: InputTypesMap[key], value: inputs[key] }))
+    .map((key) => ({
+      name: key,
+      type: inputs[key],
+      value: inputs[key],
+    }))
     .reduce((prev, curr) => {
       if (typeof curr.value === 'boolean') {
         prev = { ...prev, [curr.name]: curr.value ? 'True' : 'False' };
@@ -175,7 +179,7 @@ const hasConstructorInputs = computed(
         <template v-if="mode === 'form'">
           <div v-for="input in constructorInputs" :key="input">
             <component
-              :is="InputTypesMap[input.type]"
+              :is="inputMap.getComponent(input.type)"
               v-model="inputParams[input.name]"
               :name="input.name"
               :placeholder="input.name"

frontend/src/components/Simulator/ContractInfo.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { useContractQueries } from '@/hooks/useContractQueries';
 import PageSection from '@/components/Simulator/PageSection.vue';
 import { CheckCircleIcon } from '@heroicons/vue/24/outline';
 import EmptyListPlaceholder from '@/components/Simulator/EmptyListPlaceholder.vue';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { shortenAddress } from '@/utils';
 import { useNodeStore } from '@/stores';
+import { useShortAddress, useContractQueries } from '@/hooks';
 
 const nodeStore = useNodeStore();
+const { shortenAddress } = useShortAddress();
 
 defineProps<{
   showNewDeploymentButton: boolean;

frontend/src/components/Simulator/ContractMethodItem.vue

@@ -2,15 +2,16 @@
 import type { ContractMethod } from '@/types';
 import { onMounted, ref } from 'vue';
 import { Collapse } from 'vue-collapsed';
-import { InputTypesMap } from '@/utils';
-import { useContractQueries } from '@/hooks/useContractQueries';
+import { useInputMap } from '@/hooks';
 import { notify } from '@kyvg/vue3-notification';
 import { ChevronDownIcon } from '@heroicons/vue/16/solid';
-import { useEventTracking } from '@/hooks';
+import { useEventTracking, useContractQueries } from '@/hooks';
 
 const { callWriteMethod, callReadMethod, contract } = useContractQueries();
 const { trackEvent } = useEventTracking();
 
+const inputMap = useInputMap();
+
 const props = defineProps<{
   method: ContractMethod;
   methodType: 'read' | 'write';
@@ -116,7 +117,7 @@ onMounted(() => {
         <component
           v-for="input in method.inputs"
           :key="input.name"
-          :is="InputTypesMap[input.type]"
+          :is="inputMap.getComponent(input.type)"
           v-model="inputs[input.name]"
           :name="String(input.name)"
           :label="String(input.name)"

frontend/src/components/Simulator/ContractReadMethods.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useContractQueries } from '@/hooks/useContractQueries';
+import { useContractQueries } from '@/hooks';
 import { computed } from 'vue';
 import PageSection from '@/components/Simulator/PageSection.vue';
 import { type ContractMethod } from '@/types';

frontend/src/components/Simulator/ContractWriteMethods.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useContractQueries } from '@/hooks/useContractQueries';
+import { useContractQueries } from '@/hooks';
 import { computed } from 'vue';
 import PageSection from '@/components/Simulator/PageSection.vue';
 import { type ContractMethod } from '@/types';

frontend/src/components/Simulator/ContractsPanel.vue

@@ -6,7 +6,7 @@ import { useContractsStore } from '@/stores';
 import { computed } from 'vue';
 import HomeTab from './HomeTab.vue';
 import { useRouter, useRoute } from 'vue-router';
-import { useContractQueries } from '@/hooks/useContractQueries';
+import { useContractQueries } from '@/hooks';
 
 const store = useContractsStore();
 const router = useRouter();

frontend/src/components/Tutorial/TutorialContainer.vue

@@ -10,8 +10,6 @@ const tutorialStore = useTutorialStore();
 const uiStore = useUIStore();
 const router = useRouter();
 
-tutorialStore.resetTutorialState();
-
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 const steps = ref([

frontend/src/hooks/index.ts

@@ -1,2 +1,12 @@
 export * from './useUniqueId';
 export * from './useEventTracking';
+export * from './useRpcClient';
+export * from './useWallet';
+export * from './useShortAddress';
+export * from './useDb';
+export * from './useWebSocketClient';
+export * from './useInputMap';
+export * from './useContractQueries';
+export * from './usePythonSyntax';
+export * from './useFileName';
+export * from './useSetupStores';

frontend/src/hooks/useContractQueries.ts

@@ -1,28 +1,26 @@
-import { watch, ref, inject, computed } from 'vue';
-import { toHex, toRlp } from 'viem';
-import type { IJsonRpcService } from '@/services';
+import { watch, ref, computed } from 'vue';
 import { useQuery, useQueryClient } from '@tanstack/vue-query';
 import type { Address, TransactionItem } from '@/types';
 import {
   useContractsStore,
   useTransactionsStore,
   useAccountsStore,
 } from '@/stores';
-import { signTransaction } from '@/utils';
 import { useDebounceFn } from '@vueuse/core';
 import { notify } from '@kyvg/vue3-notification';
 import { useMockContractData } from './useMockContractData';
-import { useEventTracking } from '@/hooks';
+import { useEventTracking, useRpcClient, useWallet } from '@/hooks';
 
 const schema = ref<any>();
 
 export function useContractQueries() {
-  const $jsonRpc = inject<IJsonRpcService>('$jsonRpc'); // This could be done without inject/provide
+  const rpcClient = useRpcClient();
   const accountsStore = useAccountsStore();
   const transactionsStore = useTransactionsStore();
   const contractsStore = useContractsStore();
   const queryClient = useQueryClient();
   const { trackEvent } = useEventTracking();
+  const wallet = useWallet();
   const contract = computed(() => contractsStore.currentContract);
 
   const { mockContractId, mockContractSchema } = useMockContractData();
@@ -64,7 +62,7 @@ export function useContractQueries() {
       return mockContractSchema;
     }
 
-    const result = await $jsonRpc?.getContractSchema({
+    const result = await rpcClient.getContractSchema({
       code: contract.value?.content ?? '',
     });
 
@@ -91,16 +89,12 @@ export function useContractQueries() {
         throw new Error('Error Deploying the contract');
       }
       const constructorParamsAsString = JSON.stringify(constructorParams);
-      const data = toRlp([
-        toHex(contract.value?.content ?? ''),
-        toHex(constructorParamsAsString),
-      ]);
-
-      const signed = await signTransaction(
+      const data = [contract.value?.content ?? '', constructorParamsAsString];
+      const signed = await wallet.signTransaction(
         accountsStore.currentPrivateKey,
         data,
       );
-      const result = await $jsonRpc?.sendTransaction(signed);
+      const result = await rpcClient.sendTransaction(signed);
 
       if (result?.status === 'success') {
         const tx: TransactionItem = {
@@ -166,7 +160,7 @@ export function useContractQueries() {
       return mockContractSchema;
     }
 
-    const result = await $jsonRpc?.getDeployedContractSchema({
+    const result = await rpcClient.getDeployedContractSchema({
       address: deployedContract.value?.address ?? '',
     });
 
@@ -180,7 +174,7 @@ export function useContractQueries() {
 
   async function callReadMethod(method: string, methodArguments: string[]) {
     try {
-      const result = await $jsonRpc?.getContractState({
+      const result = await rpcClient.getContractState({
         contractAddress: address.value || '',
         method,
         methodArguments,
@@ -210,15 +204,15 @@ export function useContractQueries() {
         throw new Error('Error Deploying the contract');
       }
       const methodParamsAsString = JSON.stringify(params);
-      const data = toRlp([toHex(method), toHex(methodParamsAsString)]);
-
+      const data = [method, methodParamsAsString];
       const to = (address.value as Address) || null;
-      const signed = await signTransaction(
+
+      const signed = await wallet.signTransaction(
         accountsStore.currentPrivateKey,
         data,
         to,
       );
-      const result = await $jsonRpc?.sendTransaction(signed);
+      const result = await rpcClient.sendTransaction(signed);
 
       if (result?.status === 'success') {
         transactionsStore.addTransaction({

frontend/src/utils/db.ts → frontend/src/hooks/useDb.ts

@@ -1,27 +1,23 @@
 import type { ContractFile, DeployedContract, TransactionItem } from '@/types';
 import Dexie, { type Table } from 'dexie';
 
-export class GenLayerSimulatorDB extends Dexie {
+class GenLayerSimulatorDB extends Dexie {
   contractFiles!: Table<ContractFile>;
   deployedContracts!: Table<DeployedContract>;
   transactions!: Table<TransactionItem>;
 
   constructor() {
     super('genLayerSimulatorDB');
-    this.version(2).stores({
-      contractFiles: 'id, name, content, example, updatedAt',
-      deployedContracts: '[contractId+address]',
-      defaultContractStates: '[contractId+address]',
-    });
 
     this.version(2).stores({
-      contractFiles: 'id', // Primary key and indexed props
+      contractFiles: 'id',
       deployedContracts: '[contractId+address]',
-      defaultContractStates: null,
       transactions:
         '++id, type, status, contractAddress, localContractId, txId',
     });
   }
 }
 
-export const db = new GenLayerSimulatorDB();
+export const useDb = () => {
+  return new GenLayerSimulatorDB();
+};

frontend/src/hooks/useFileName.ts

@@ -0,0 +1,13 @@
+export const useFileName = () => {
+  function cleanupFileName(name: string) {
+    const tokens = name.split('.');
+    if (tokens.length > 0) {
+      return `${tokens[0]}.gpy`;
+    }
+    return `${name}.gpy`;
+  }
+
+  return {
+    cleanupFileName,
+  };
+};

frontend/src/utils/inputs.ts → frontend/src/hooks/useInputMap.ts

@@ -9,3 +9,17 @@ export const InputTypesMap: { [k: string]: any } = {
   float: FloatField,
   bool: BooleanField,
 };
+
+export const useInputMap = () => {
+  const getComponent = (type: string) => {
+    const component = InputTypesMap[type];
+
+    if (!component) {
+      throw new Error(`Component not found for input type: ${type}`);
+    }
+
+    return component;
+  };
+
+  return { getComponent };
+};

frontend/src/utils/editor.ts → frontend/src/hooks/usePythonSyntax.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-useless-escape */
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
-export const pythonSyntaxDefinition: monaco.languages.IMonarchLanguage = {
+const pythonSyntaxDefinition: monaco.languages.IMonarchLanguage = {
   defaultToken: '',
   tokenPostfix: '.python',
 
@@ -213,3 +213,7 @@ export const pythonSyntaxDefinition: monaco.languages.IMonarchLanguage = {
     ],
   },
 };
+
+export const usePythonSyntax = () => {
+  return pythonSyntaxDefinition;
+};

frontend/src/hooks/useRpcClient.ts

@@ -0,0 +1,6 @@
+import { RpcClient } from '@/clients/rpc';
+import { JsonRpcService } from '@/services/JsonRpcService';
+
+export function useRpcClient() {
+  return new JsonRpcService(new RpcClient());
+}