feat: sim replace frontend rpc calls with genlayerjs

backend/protocol_rpc/endpoints.py

@@ -361,7 +361,7 @@ def get_transaction_count(
 
 def get_transaction_by_hash(
     transactions_processor: TransactionsProcessor, transaction_hash: str
-) -> dict:
+) -> dict | None:
     return transactions_processor.get_transaction_by_hash(transaction_hash)
 
 

frontend/package.json

@@ -35,6 +35,7 @@
     "defu": "^6.1.4",
     "dexie": "^4.0.4",
     "floating-vue": "^5.2.2",
+    "genlayer-js": "^0.3.3",
     "hash-sum": "^2.0.0",
     "jump.js": "^1.0.2",
     "lodash-es": "^4.17.21",

frontend/src/components/Simulator/AccountItem.vue

@@ -5,7 +5,7 @@
 import { ref } from 'vue';
 import CopyTextButton from '../global/CopyTextButton.vue';
 import { TrashIcon, CheckCircleIcon } from '@heroicons/vue/16/solid';
-
+import type { Account } from 'genlayer-js/types';
 const store = useAccountsStore();
 
 const setCurentAddress = () => {
@@ -35,6 +35,7 @@
 
 const props = defineProps<{
   active?: Boolean;
+  account: Account;
   privateKey: `0x${string}`;
   canDelete?: Boolean;
 }>();
@@ -61,16 +62,13 @@
         class="flex grow flex-row truncate font-mono text-xs font-semibold"
         :class="[!active && 'opacity-50']"
       >
-        {{ store.accountFromPrivateKey(privateKey).address }}
+        {{ account.address }}
       </span>
 
       <div
         class="flex flex-row items-center gap-1 opacity-0 group-hover:opacity-100"
       >
-        <CopyTextButton
-          :text="store.accountFromPrivateKey(privateKey).address"
-          v-tooltip="'Copy Address'"
-        />
+        <CopyTextButton :text="account.address" v-tooltip="'Copy Address'" />
 
         <Transition mode="out-in" v-if="canDelete">
           <button

frontend/src/components/Simulator/AccountSelect.vue

@@ -6,7 +6,7 @@
 import { PlusIcon } from '@heroicons/vue/16/solid';
 import { notify } from '@kyvg/vue3-notification';
 import { useEventTracking } from '@/hooks';
-
+import { createAccount } from 'genlayer-js';
 const store = useAccountsStore();
 const { trackEvent } = useEventTracking();
 
@@ -42,6 +42,7 @@
           v-for="privateKey in store.privateKeys"
           :key="privateKey"
           :privateKey="privateKey"
+          :account="createAccount(privateKey)"
           :active="privateKey === store.currentPrivateKey"
           :canDelete="true"
           v-close-popper

frontend/src/components/Simulator/ContractInfo.vue

@@ -2,13 +2,12 @@
 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 { useNodeStore } from '@/stores';
-import { useWallet, useContractQueries } from '@/hooks';
+import { useContractQueries, useShortAddress } from '@/hooks';
 import { UploadIcon } from 'lucide-vue-next';
 
 const nodeStore = useNodeStore();
-const { shortenAddress } = useWallet();
+const { shorten } = useShortAddress();
 
 defineProps<{
   showNewDeploymentButton: boolean;
@@ -37,7 +36,7 @@
       Deployed at
 
       <div class="font-semibold">
-        {{ shortenAddress(address) }}
+        {{ shorten(address) }}
       </div>
 
       <CopyTextButton :text="address" />

frontend/src/hooks/index.ts

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

frontend/src/hooks/useContractQueries.ts

@@ -1,6 +1,6 @@
 import { watch, ref, computed } from 'vue';
 import { useQuery, useQueryClient } from '@tanstack/vue-query';
-import type { Address, TransactionItem } from '@/types';
+import type { TransactionItem } from '@/types';
 import {
   useContractsStore,
   useTransactionsStore,
@@ -9,19 +9,19 @@
 import { useDebounceFn } from '@vueuse/core';
 import { notify } from '@kyvg/vue3-notification';
 import { useMockContractData } from './useMockContractData';
-import { useEventTracking, useRpcClient, useWallet } from '@/hooks';
+import { useEventTracking, useGenlayer } from '@/hooks';
 import * as calldata from '@/calldata';
+import type { Address } from 'genlayer-js/types';
 
 const schema = ref<any>();
 
 export function useContractQueries() {
-  const rpcClient = useRpcClient();
+  const genlayer = useGenlayer();
   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();
@@ -63,8 +63,9 @@
       return mockContractSchema;
     }
 
-    const result = await rpcClient.getContractSchema({
-      code: contract.value?.content ?? '',
+    const result = await genlayer.client?.request({
+      method: 'gen_getContractSchemaForCode',
+      params: [contract.value?.content ?? ''],
     });
 
     schema.value = result;
@@ -84,20 +85,13 @@
       if (!contract.value || !accountsStore.currentPrivateKey) {
         throw new Error('Error Deploying the contract');
       }
-      const data = [
-        contract.value?.content ?? '',
-        calldata.encode({ args }),
-        leaderOnly,
-      ];
-
-      const nonce = await accountsStore.getCurrentNonce();
-
-      const signed = await wallet.signTransaction({
-        privateKey: accountsStore.currentPrivateKey,
-        data,
-        nonce,
+
+      const result = await genlayer.client?.deployContract({
+        code: contract.value?.content ?? '',
+        args,
+        leader_only: leaderOnly,
       });
-      const result = await rpcClient.sendTransaction(signed);
+
       const tx: TransactionItem = {
         contractAddress: '',
         localContractId: contract.value?.id ?? '',
@@ -151,25 +145,20 @@
       return mockContractSchema;
     }
 
-    const result = await rpcClient.getDeployedContractSchema({
-      address: deployedContract.value?.address ?? '',
+    const result = await genlayer.client?.request({
+      method: 'gen_getContractSchema',
+      params: [deployedContract.value?.address ?? ''],
     });
 
     return result;
   }
 
-  async function callReadMethod(
-    method: string,
-    args: calldata.CalldataEncodable[],
-  ) {
+  async function callReadMethod(method: string, args: any[]) {
     try {
-      const data = [calldata.encode({ method, args })];
-      const encodedData = wallet.encodeTransactionData(data);
-
-      const result = await rpcClient.getContractState({
-        to: address.value || '',
-        from: accountsStore.currentUserAddress,
-        data: encodedData,
+      const result = await genlayer.client?.readContract({
+        address: address.value as Address,
+        functionName: method,
+        args,
       });
 
       return result;
@@ -190,21 +179,17 @@
   }) {
     try {
       if (!accountsStore.currentPrivateKey) {
-        throw new Error('Error Deploying the contract');
+        throw new Error('Error writing to contract');
       }
-      const data = [calldata.encode({ method, args }), leaderOnly];
-      const to = (address.value as Address) || null;
 
-      const nonce = await accountsStore.getCurrentNonce();
-
-      const signed = await wallet.signTransaction({
-        privateKey: accountsStore.currentPrivateKey,
-        data,
-        nonce,
-        to,
+      const result = await genlayer.client?.writeContract({
+        address: address.value as Address,
+        functionName: method,
+        args,
+        value: BigInt(0),
+        leader_only: leaderOnly,
       });
 
-      const result = await rpcClient.sendTransaction(signed);
       transactionsStore.addTransaction({
         contractAddress: address.value || '',
         localContractId: contract.value?.id || '',
@@ -219,6 +204,7 @@
       });
       return true;
     } catch (error) {
+      console.error(error);
       throw new Error('Error writing to contract');
     }
   }

frontend/src/hooks/useGenlayer.ts

@@ -0,0 +1,34 @@
+import { simulator } from 'genlayer-js/chains';
+import { createClient, createAccount } from 'genlayer-js';
+import type { GenLayerClient } from 'genlayer-js/types';
+import { watch } from 'vue';
+import { useAccountsStore } from '@/stores';
+
+let client: GenLayerClient<typeof simulator> | null = null;
+
+export function useGenlayer() {
+  const accountsStore = useAccountsStore();
+
+  if (!client) {
+    initClient();
+  }
+
+  watch(
+    () => accountsStore.currentUserAddress,
+    () => {
+      initClient();
+    },
+  );
+
+  function initClient() {
+    client = createClient({
+      chain: simulator,
+      account: createAccount(accountsStore.currentPrivateKey || undefined),
+    });
+  }
+
+  return {
+    client,
+    initClient,
+  };
+}

frontend/src/hooks/useSetupStores.ts

@@ -5,7 +5,7 @@
   useNodeStore,
   useTutorialStore,
 } from '@/stores';
-import { useDb, useTransactionListener } from '@/hooks';
+import { useDb, useGenlayer, useTransactionListener } from '@/hooks';
 import { v4 as uuidv4 } from 'uuid';
 import type { Address } from '@/types';
 
@@ -17,6 +17,7 @@
     const nodeStore = useNodeStore();
     const tutorialStore = useTutorialStore();
     const db = useDb();
+    const genlayer = useGenlayer();
     const transactionListener = useTransactionListener();
     const contractFiles = await db.contractFiles.toArray();
     const exampleFiles = contractFiles.filter((c) => c.example);
@@ -68,6 +69,8 @@
           ) as Address[])
         : [];
     }
+
+    genlayer.initClient();
   };
 
   return {

frontend/src/hooks/useShortAddress.ts

@@ -0,0 +1,18 @@
+export const useShortAddress = () => {
+  function shorten(address?: string) {
+    if (!address) {
+      return '';
+    }
+
+    const maxChars = 4;
+    const displayedChars = Math.min(Math.floor(address.length / 3), maxChars);
+
+    return (
+      address.slice(0, displayedChars) + '...' + address.slice(-displayedChars)
+    );
+  }
+
+  return {
+    shorten,
+  };
+};