feat(apis/vara-eth): add support for uploading codes in EIP-7594 format

.github/workflows/CI.yml

@@ -86,6 +86,8 @@ jobs:
 
       - name: "Install: Foundry"
         uses: foundry-rs/foundry-toolchain@v1
+        with:
+          version: nightly-c07d504b4ae67754584f4e05ff0c547a43c50f7b
 
       - name: 'Install dependencies'
         run: yarn workspaces focus gear-js @gear-js/api
@@ -153,7 +155,7 @@ jobs:
         if: steps.changed-vara-eth.outputs.any_changed == 'true'
         uses: foundry-rs/foundry-toolchain@v1
         with:
-          version: v1.5.0-rc1
+          version: nightly-c07d504b4ae67754584f4e05ff0c547a43c50f7b
 
       - name: 'Install dependencies'
         if: steps.changed-vara-eth.outputs.any_changed == 'true'

apis/vara-eth/Cargo.toml

@@ -1,5 +1,5 @@
 [workspace.package]
-version = "0.0.1"
+version = "0.1.0"
 authors = ["Gear Technologies"]
 edition = "2024"
 license = "GPL-3.0"

apis/vara-eth/package.json

@@ -39,12 +39,12 @@
   },
   "peerDependencies": {
     "kzg-wasm": "1.0.0",
-    "viem": "^2.39.0"
+    "viem": "*"
   },
   "devDependencies": {
     "@types/ws": "8.18.1",
     "kzg-wasm": "1.0.0",
-    "viem": "2.47.4",
+    "viem": "https://pkg.pr.new/StackOverflowExcept1on/viem/viem@98e8516",
     "ws": "8.18.3"
   },
   "files": [

apis/vara-eth/src/eth/router.ts

@@ -225,8 +225,7 @@ export class RouterClient extends BaseContractClient implements IRouterContract
    * @returns A transaction manager with validation-specific helper functions, including
    *          the code ID and a function to wait for the code to be validated
    */
-  private async requestCodeValidation(code: Uint8Array): Promise<TxManagerWithHelpers<CodeValidationHelpers>> {
-    throw new Error('Not implemented');
+  public async requestCodeValidation(code: Uint8Array): Promise<TxManagerWithHelpers<CodeValidationHelpers>> {
     const codeId = generateCodeHash(code);
 
     const data = encodeFunctionData({
@@ -245,6 +244,7 @@ export class RouterClient extends BaseContractClient implements IRouterContract
 
     const tx = {
       type: 'eip4844' as const,
+      blobVersion: '7594' as const,
       data,
       to: this.address,
       gas: 5_000_000n,
@@ -259,6 +259,16 @@ export class RouterClient extends BaseContractClient implements IRouterContract
           const result = kzg.computeBlobKZGProof(bytesToHex(blob), bytesToHex(commitment)) as Hex;
           return hexToBytes(result);
         },
+        computeCellsAndKzgProofs: (blob: Uint8Array): [Uint8Array[], Uint8Array[]] => {
+          const [cells, proofs] = kzg.computeCellsAndProofs(bytesToHex(blob)) as [
+            `0x${string}`[],
+            `0x${string}`[],
+          ]
+          return [
+            cells.map((cell) => hexToBytes(cell)),
+            proofs.map((proof) => hexToBytes(proof)),
+          ]
+        }
       },
       chain: null,
     };

apis/vara-eth/test/router.test.ts

@@ -7,15 +7,16 @@ import path from 'path';
 import { CodeState, getMirrorClient, getRouterClient, RouterClient, type ITransactionSigner } from '../src';
 import { config } from './config';
 import { walletClientToSigner } from '../src/signer';
+import { waitNBlocks } from "./common";
 
-// const code = fs.readFileSync(path.join(config.targetDir, 'counter.opt.wasm'));
+const code = fs.readFileSync(path.join(config.targetDir, 'counter.opt.wasm'));
 let codeId: `0x${string}`;
 let publicClient: PublicClient<WebSocketTransport, Chain, undefined>;
 let walletClient: WalletClient<WebSocketTransport, Chain, Account>;
 let signer: ITransactionSigner;
 let router: RouterClient;
 
-// let codeValidatedPromise: Promise<boolean>;
+let codeValidatedPromise: Promise<boolean>;
 
 beforeAll(async () => {
   const transport = webSocket(config.wsRpc);
@@ -41,24 +42,24 @@ afterAll(async () => {
 
 describe('router', () => {
   describe('upload code', () => {
-    // test.skip('should request code validation', async () => {
-    //   const tx = await ethereumClient.router.requestCodeValidation(code);
-    //   codeId = tx.codeId;
-    //   const receipt = await tx.sendAndWaitForReceipt();
-    //   expect(receipt.blockHash).toBeDefined();
-    //   codeValidatedPromise = tx.waitForCodeGotValidated();
-    // }, 60_000);
-
-    // test.skip(
-    //   'should wait when code got validated',
-    //   async () => {
-    //     expect(await codeValidatedPromise).toBeTruthy();
-    //     await waitNBlocks(5);
-
-    //     console.log(codeId);
-    //   },
-    //   config.longRunningTestTimeout,
-    // );
+    test('should request code validation', async () => {
+      const tx = await router.requestCodeValidation(code);
+      codeId = tx.codeId;
+      const receipt = await tx.sendAndWaitForReceipt();
+      expect(receipt.blockHash).toBeDefined();
+      codeValidatedPromise = tx.waitForCodeGotValidated();
+    }, 60_000);
+
+    test.skip(
+      'should wait when code got validated',
+      async () => {
+        expect(await codeValidatedPromise).toBeTruthy();
+        await waitNBlocks(5);
+
+        console.log(codeId);
+      },
+      config.longRunningTestTimeout,
+    );
 
     test('should check that code state is Validated', async () => {
       expect(await router.codeState(codeId)).toBe(CodeState.Validated);

idea/gear/faucet/package.json

@@ -27,7 +27,7 @@
     "reflect-metadata": "0.2.2",
     "swagger-ui-express": "5.0.1",
     "typeorm": "0.3.28",
-    "viem": "^2.40.2",
+    "viem": "https://pkg.pr.new/StackOverflowExcept1on/viem/viem@98e8516",
     "winston": "3.19.0",
     "xxhashjs": "0.2.2",
     "yamljs": "0.3.0"

idea/vara-eth/frontend/package.json

@@ -26,7 +26,7 @@
     "react-syntax-highlighter": "15.6.6",
     "sails-js": "0.5.1",
     "sails-js-parser": "0.5.1",
-    "viem": "2.47.4",
+    "viem": "https://pkg.pr.new/StackOverflowExcept1on/viem/viem@98e8516",
     "wagmi": "2.19.4",
     "zod": "4.3.6"
   },

idea/vara-eth/frontend/src/components/navigation/navigation.tsx

@@ -2,12 +2,11 @@ import { clsx } from 'clsx';
 import { matchPath, NavLink, useLocation } from 'react-router-dom';
 import { Hex } from 'viem';
 
+import { UploadCodeButton } from '@/features/codes';
 import { CreateProgramButton } from '@/features/programs';
 import { Search } from '@/features/search';
 import { routes } from '@/shared/config';
 
-import { LinkButton } from '../ui';
-
 import styles from './navigation.module.scss';
 
 const LINKS = [
@@ -32,13 +31,8 @@ const Navigation = () => {
       <div className={styles.leftSide}>
         <div className={styles.navigation}>{renderLinks()}</div>
 
-        {matchPath(routes.codes, pathname) && (
-          <LinkButton href="https://wiki.vara.network/docs/vara-eth/deploy/upload-validation" size="xs">
-            Upload Code
-          </LinkButton>
-        )}
-
         {codeId && <CreateProgramButton codeId={codeId} />}
+        {matchPath(routes.codes, pathname) && <UploadCodeButton />}
       </div>
 
       {/* key to reset search on route change */}

idea/vara-eth/frontend/src/features/codes/index.ts

@@ -1 +1,2 @@
+export { UploadCodeButton } from './ui';
 export { useGetAllCodesQuery, CODE_STATUS } from './lib';

idea/vara-eth/frontend/src/features/codes/lib/index.ts

@@ -1 +1,2 @@
+export { useUploadCode } from './use-upload-code';
 export { useGetAllCodesQuery, CODE_STATUS } from './queries';

idea/vara-eth/frontend/src/features/codes/lib/use-upload-code.ts

@@ -0,0 +1,37 @@
+import { useMutation } from '@tanstack/react-query';
+import { generatePath, useNavigate } from 'react-router-dom';
+
+import { useApi } from '@/app/api';
+import { useAddMyActivity } from '@/app/store';
+import { TransactionTypes, unpackReceipt } from '@/app/store/my-activity';
+import { routes } from '@/shared/config';
+
+export const useUploadCode = () => {
+  const { data: api } = useApi();
+  const navigate = useNavigate();
+  const addMyActivity = useAddMyActivity();
+
+  const uploadCode = async (code: Uint8Array) => {
+    if (!api) return;
+
+    const tx = await api.eth.router.requestCodeValidation(code);
+    await tx.send();
+    const isValidated = await tx.waitForCodeGotValidated();
+    const codeId = tx.codeId;
+    const receipt = await tx.getReceipt();
+
+    await addMyActivity({
+      type: TransactionTypes.codeValidation,
+      codeId,
+      resultStatus: isValidated ? 'success' : 'error',
+      error: isValidated ? undefined : 'validation error',
+      ...unpackReceipt(receipt),
+    });
+
+    void navigate(generatePath(routes.code, { codeId }));
+  };
+
+  const mutation = useMutation({ mutationFn: uploadCode });
+
+  return mutation;
+};

idea/vara-eth/frontend/src/features/codes/ui/index.ts

@@ -0,0 +1 @@
+export { UploadCodeButton } from './upload-code-button';

idea/vara-eth/frontend/src/features/codes/ui/upload-code-button/index.ts

@@ -0,0 +1 @@
+export { UploadCodeButton } from './upload-code-button';

idea/vara-eth/frontend/src/features/codes/ui/upload-code-button/upload-code-button.module.scss

@@ -0,0 +1,3 @@
+.input {
+  display: none;
+}

idea/vara-eth/frontend/src/features/codes/ui/upload-code-button/upload-code-button.tsx

@@ -0,0 +1,68 @@
+import { useRef, useState } from 'react';
+import { useAccount } from 'wagmi';
+
+import { Button, Modal } from '@/components';
+import { useUploadCode } from '@/features/codes/lib';
+
+import styles from './upload-code-button.module.scss';
+
+export const UploadCodeButton = () => {
+  const uploadCode = useUploadCode();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const { address } = useAccount();
+
+  if (!address) return null;
+
+  const onSelectFile = () => {
+    inputRef.current?.click();
+  };
+
+  const handleFileUpload: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = function () {
+      const arrayBuffer = reader.result;
+      if (!arrayBuffer || typeof arrayBuffer === 'string') return;
+      const uint8Array = new Uint8Array(arrayBuffer);
+
+      uploadCode.mutate(uint8Array, {
+        onError: () => {
+          setIsOpen(false);
+        },
+      });
+    };
+    reader.readAsArrayBuffer(file);
+  };
+
+  return (
+    <>
+      <Button size="xs" onClick={() => setIsOpen(true)}>
+        Upload code
+      </Button>
+
+      {isOpen && (
+        <Modal
+          heading="Upload Code"
+          close={() => setIsOpen(false)}
+          action={
+            <Button size="xs" onClick={onSelectFile} isLoading={uploadCode.isPending}>
+              Select File
+            </Button>
+          }>
+          {/* TODO: add drop area */}
+          <input
+            ref={inputRef}
+            type="file"
+            id="fileInput"
+            onChange={handleFileUpload}
+            className={styles.input}
+            accept="application/wasm"
+          />
+        </Modal>
+      )}
+    </>
+  );
+};

idea/vara-eth/indexer/package.json

@@ -36,7 +36,7 @@
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.2",
     "typeorm": "0.3.28",
-    "viem": "2.47.4",
+    "viem": "https://pkg.pr.new/StackOverflowExcept1on/viem/viem@98e8516",
     "xxhash-addon": "^2.0.3"
   },
   "devDependencies": {

rust-toolchain.toml

@@ -1,4 +1,4 @@
 [toolchain]
-channel = "1.91"
+channel = "stable"
 targets = ["wasm32-unknown-unknown", "wasm32v1-none"]
 components = ["rustfmt", "clippy", "rust-src", "llvm-tools"]