docker image

.github/workflows/docker-image.yml

@@ -0,0 +1,48 @@
+name: Demo Push
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - v*
+  pull_request:
+
+env:
+  IMAGE_NAME: ethrex_l2_hub
+
+jobs:
+  # This pushes the image to GitHub Packages.
+  push:
+    runs-on: ubuntu-latest
+
+    permissions:
+      packages: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Build image
+        working-directory: ./app
+        # TODO: add step to compile the contracts using rex
+        run: docker build . --file Dockerfile --tag $IMAGE_NAME --label "runnumber=${GITHUB_RUN_ID}"
+
+      - name: Log in to registry
+        run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.actor }} --password-stdin
+
+      - name: Push image
+        run: |
+          IMAGE_ID=ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME
+
+          # This changes all uppercase characters to lowercase.
+          IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]')
+          # This strips the git ref prefix from the version.
+          VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
+          # This strips the "v" prefix from the tag name.
+          [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
+          # This uses the Docker `latest` tag convention.
+          [ "$VERSION" == "main" ] && VERSION=latest
+          echo IMAGE_ID=$IMAGE_ID
+          echo VERSION=$VERSION
+          docker tag $IMAGE_NAME $IMAGE_ID:$VERSION
+          docker push $IMAGE_ID:$VERSION

README.md

@@ -125,6 +125,37 @@ The app should now be running at `http://localhost:5173`
 make run-front
 ```
 
+## Running with Docker
+
+Pull the image from the registry with
+
+```bash
+docker pull ghcr.io/lambdaclass/ethrex_l2_hub:merge
+```
+
+Run the image with
+
+```bash
+docker run --name ethrex_l2_hub -p 5173:5173 --env-file /path/to/.env ghcr.io/lambdaclass/ethrex_l2_hub:merge
+```
+
+The `.env` file must contain the following environment variables (make sure to replace them with the actual values)
+
+```.env
+VITE_L1_NAME="Ethrex L1 Local"
+VITE_L1_RPC_URL=http://host.docker.internal:8545
+VITE_L1_CHAIN_ID=9
+VITE_L1_BRIDGE_ADDRESS=0xebc31Eff9D9f5F63F65A68734816b7De1256845B
+VITE_L2_NAME="Ethrex L2 Local"
+VITE_L2_RPC_URL=http://host.docker.internal:1729
+VITE_L2_CHAIN_ID=65536999
+VITE_L2_BRIDGE_ADDRESS=0x000000000000000000000000000000000000ffff
+VITE_WALLETCONNECT_PROJECT_ID=
+VITE_DELEGATION_CONTRACT_ADDRESS=0x00e29d532f1c62a923ee51ee439bfc1500b1ce4d
+VITE_TEST_TOKEN_CONTRACT_ADDRESS=0x4b8a3d616d9146d9ec66a33b76d63612eabede02
+
+```
+
 ## Features
 
 ### L1 ↔ L2 Bridge

app/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+build
+npm-debug.log

app/Dockerfile

@@ -0,0 +1,23 @@
+FROM node:22-alpine3.21 AS build
+
+# Set the working directory inside the container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json into the container
+COPY package*.json ./
+
+# node-gyp requires python3
+RUN apk add --no-cache python3 make g++
+
+# Install dependencies using npm
+RUN npm install
+
+# Copy the project files into the working directory
+COPY . .
+
+EXPOSE 5173
+
+# Build and start the app
+# TODO: change this so that the app can replace the environment variables at runtime
+# without the need to build the app every time
+ENTRYPOINT ["npm", "run", "dev"]

app/package.json

@@ -4,10 +4,11 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "build:preview": "npm run build && npm run preview"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.14",

app/src/components/Deposit/Deposit.tsx

@@ -5,7 +5,7 @@ import { useDeposit, useWatchDepositInitiated } from "../hooks/deposit";
 
 export const Deposit: React.FC = () => {
   const [amount, setAmount] = useState<string>("");
-  const { address } = useAccount();
+  useAccount();
   const { data, isPending, isSuccess: isTxSuccess, deposit } = useDeposit({ amount: parseEther(amount) })
   const { isLoading, isSuccess: isTxReciptSuccess } = useWaitForTransactionReceipt({ hash: data })
   const { switchChain } = useSwitchChain()

app/src/config/passkey_config.tsx

@@ -17,7 +17,7 @@ client.request = async ({ method, params }) => {
     method = "ethrex_sendTransaction";
   }
 
-  return base_request({ method, params });
+  return base_request({ method: method as any, params: params as any });
 };
 
 export type Client = typeof client;

app/src/utils/passkeyAccounts.ts

@@ -15,7 +15,7 @@ import {
   waitForTransactionReceipt,
   writeContract,
 } from "viem/actions";
-import Delegation from "../../../solc_out/Delegation.json";
+import Delegation from "../../abi/Delegation.json";
 
 export const signUp = async ({
   client,

app/src/utils/token.ts

@@ -1,11 +1,10 @@
-import { privateKeyToAccount } from "viem/accounts";
 import {
   readContract,
   waitForTransactionReceipt,
   writeContract,
 } from "viem/actions";
-import Delegation from "../../../solc_out/Delegation.json";
-import TestToken from "../../../solc_out/TestToken.json";
+import Delegation from "../../abi/Delegation.json";
+import TestToken from "../../abi/TestToken.json";
 import {
   type TransactionReceipt,
   type Address,

app/vite.config.ts

@@ -8,4 +8,12 @@ export default defineConfig({
     react(),
     tailwindcss()
   ],
+  preview: {
+    host: true,
+    port: 3000,
+  },
+  server: {
+    host: true,
+    port: 5173
+  }
 })