checkpoint

backend/docker-compose.yml

@@ -6,11 +6,11 @@ services:
       context: ./offchain
       dockerfile: ../Dockerfile
     ports:
-      - "${OC_LISTEN_PORT:-3000}:${OC_LISTEN_PORT:-3000}"
+      - "${OC_LISTEN_PORT:-1234}:${OC_LISTEN_PORT:-1234}"
     env_file: .env
     restart: unless-stopped
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:${OC_LISTEN_PORT:-3000}/hc"]
+      test: ["CMD", "curl", "-f", "http://localhost:${OC_LISTEN_PORT:-1234}/hc"]
       interval: 30s
       timeout: 10s
       retries: 3

backend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "aa-hc-backend",
+  "name": "aa-hc-example-backend",
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {

contracts/package.json

@@ -1,9 +1,8 @@
 {
-  "name": "aa-hc",
+  "name": "aa-hc-example-contracts",
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "start": "ts-node src/backend/server.ts",
     "test": "jest"
   },
   "license": "MIT",

docker-compose.yml

@@ -0,0 +1,32 @@
+version: '3.8'
+
+services:
+  # Nginx served static DApp
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - "8080:80"
+    restart: unless-stopped
+
+  # Backend that is being called by your smart contract through Hybrid Compute
+  offchain-service:
+    build:
+      context: ./offchain
+      dockerfile: ../Dockerfile
+    ports:
+      - "${OC_LISTEN_PORT:-1234}:${OC_LISTEN_PORT:-1234}"
+    env_file: ./backend/.env
+    restart: unless-stopped
+    healthcheck:
+      test: [ "CMD", "curl", "-f", "http://localhost:${OC_LISTEN_PORT:-1234}/hc" ]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
+
+networks:
+  default:
+    name: aa-hc-network
+

frontend/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.vite

frontend/.env-template

@@ -0,0 +1,2 @@
+# Smart contract you want to invoke
+SMART_CONTRACT=

frontend/Dockerfile

@@ -0,0 +1,32 @@
+# Stage 1: Build the application
+FROM node:20-alpine AS build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm i
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Stage 2: Serve the application
+FROM nginx:alpine
+
+# Copy the built assets from the build stage
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Copy a custom nginx configuration if needed
+# COPY nginx.conf /etc/nginx/nginx.conf
+
+# Expose port 80
+EXPOSE 80
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

frontend/README.md

@@ -1,9 +1,36 @@
 # Frontend | HC-AA (Meta Mask Flask)
 
-## Demo site
-Is live here (free, so might have some delay on cold starts):
+## Get started
+### Docker
+1. Copy `.env-template` and rename it to `.env` (adapt your environment vars accordingly).
+2. Run `docker-compose up`
+
+Of course you can use the Dockerfile / Docker-Compose to deploy to the cloud of your choice as well.
+
+### Without Docker
+1. Run `pnpm i`
+2. then `pnpm dev`
+
+### Deploy to production
+Of course you can use whichever cloud provider you like. But for demo purposes we have used *render.com* as they provide allow you to deploy a web app for free.
+
+Our demo frontend will spin down with inactivity since we are using the free version. In that case the page might take longer to load.
+
+The demo frontend should be live here (free, so might have some delay on cold starts):
 https://aa-hc-example-fe.onrender.com
 
+If you want to setup your own server on Render, just follow these steps:
+1. Create account on [render.com](https://render.com)
+2. Click on **New** and choose **Static site**
+3. Connect your Git repository with Render
+4. If you are using this example repo you need to change the **Root directory** to `frontend/` since the frontend is located there.
+5. Set the build command to `pnpm build` and the build folder to `dist/`.
+6. Select the instance type you prefer, we chose "Free" for now.
+7. Then import your environment variables either one by one or via **Add from .env** import.
+
+
+Your DApp should be ready!
+
 ## Stack 
 - Vite 
 - React Ts

frontend/docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3.8'
+
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8080:80"
+    restart: unless-stopped
+

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "counter-web-app",
+  "name": "aa-hc-example-frontend",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -17,6 +17,7 @@
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dotenv": "^16.4.5",
     "ethers": "^6.13.1",
     "lucide-react": "^0.395.0",
     "postcss": "^8.4.38",

frontend/src/components/FormComponent.tsx

@@ -6,13 +6,13 @@ import { concat, FunctionFragment } from "ethers"
 import { AbiCoder } from "ethers"
 import { hexlify } from "ethers"
 import { CopyIcon } from "./CopyIcon"
-import { ADD_SUB_CONTRACT } from "@/config/snap"
+import { YOUR_CONTRACT } from "@/config/snap"
 
 const FormComponent = () => {
   const [state] = useContext(MetaMaskContext)
   const [inputA, setinputA] = useState<any>(0)
   const [inputB, setinputB] = useState<any>(0)
-  const [testContract, setTestContract] = useState(ADD_SUB_CONTRACT)
+  const [testContract, setTestContract] = useState(YOUR_CONTRACT)
   const [response, setResponse] = useState<any>(null)
   const [error, setError] = useState<any>(null)
 
@@ -84,7 +84,7 @@ const FormComponent = () => {
         <div className="flex flex-col justify-start items-start w-10/12">
           <label className="block text-sm font-medium leading-6 text-teal-900">Test Contract Address</label>
           <div className="relative mt-2 rounded-md shadow-sm w-full">
-            <input type="text" defaultValue={ADD_SUB_CONTRACT} value={testContract} onChange={(e) => setTestContract(e.target.value)} name="input A" id="input A" className="block w-full bg-teal-200 rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="0x" />
+            <input type="text" defaultValue={YOUR_CONTRACT} value={testContract} onChange={(e) => setTestContract(e.target.value)} name="input A" id="input A" className="block w-full bg-teal-200 rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="0x" />
           </div>
         </div>
       </div>

frontend/src/config/snap.ts

@@ -1,3 +1,5 @@
+require('dotenv').config()
+
 /**
  * The snap origin to use.
  * Will default to the local hosted snap if no value is provided in environment.
@@ -12,6 +14,4 @@ export const defaultSnapOrigin = 'npm:@bobanetwork/snap-account-abstraction-keyr
 export const snapPackageVersion = "1.1.3";
 
 /* Contract address that you want to invoke. */
-// export const ADD_SUB_CONTRACT = '0x7A9c74bEa653bBa510aAAe280981C117bc92273D';
-
-export const ADD_SUB_CONTRACT = '0x63BceAfAF62fB12394ecbEf10dBF1c5c36ba8b38';
+export const YOUR_CONTRACT = process.env.SMART_CONTRACT;