From 9451730a29cae757d9004242c16d0b1cd315ace6 Mon Sep 17 00:00:00 2001 From: Kevin Riedl Date: Tue, 30 Jul 2024 21:19:54 +0200 Subject: [PATCH] checkpoint --- backend/docker-compose.yml | 4 +-- backend/package.json | 2 +- .gitmodules => contracts/.gitmodules | 0 contracts/package.json | 3 +- docker-compose.yml | 32 +++++++++++++++++++ frontend/.dockerignore | 3 ++ frontend/.env-template | 2 ++ frontend/Dockerfile | 32 +++++++++++++++++++ frontend/README.md | 31 ++++++++++++++++-- frontend/docker-compose.yml | 11 +++++++ frontend/package.json | 3 +- frontend/pnpm-lock.yaml | 9 ++++++ ...ounter.abi.json => your-contract.abi.json} | 0 frontend/src/components/FormComponent.tsx | 6 ++-- frontend/src/config/snap.ts | 6 ++-- 15 files changed, 130 insertions(+), 14 deletions(-) rename .gitmodules => contracts/.gitmodules (100%) create mode 100644 docker-compose.yml create mode 100644 frontend/.dockerignore create mode 100644 frontend/.env-template create mode 100644 frontend/Dockerfile create mode 100644 frontend/docker-compose.yml rename frontend/src/abi/{testCounter.abi.json => your-contract.abi.json} (100%) diff --git a/backend/docker-compose.yml b/backend/docker-compose.yml index 7983680..a28e06c 100644 --- a/backend/docker-compose.yml +++ b/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 diff --git a/backend/package.json b/backend/package.json index 8ad305c..eccfbf8 100644 --- a/backend/package.json +++ b/backend/package.json @@ -1,5 +1,5 @@ { - "name": "aa-hc-backend", + "name": "aa-hc-example-backend", "version": "1.0.0", "main": "index.js", "scripts": { diff --git a/.gitmodules b/contracts/.gitmodules similarity index 100% rename from .gitmodules rename to contracts/.gitmodules diff --git a/contracts/package.json b/contracts/package.json index de599ea..d0fae02 100644 --- a/contracts/package.json +++ b/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", diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..b8b4cfe --- /dev/null +++ b/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 + diff --git a/frontend/.dockerignore b/frontend/.dockerignore new file mode 100644 index 0000000..b431156 --- /dev/null +++ b/frontend/.dockerignore @@ -0,0 +1,3 @@ +node_modules +dist +.vite diff --git a/frontend/.env-template b/frontend/.env-template new file mode 100644 index 0000000..8950967 --- /dev/null +++ b/frontend/.env-template @@ -0,0 +1,2 @@ +# Smart contract you want to invoke +SMART_CONTRACT= \ No newline at end of file diff --git a/frontend/Dockerfile b/frontend/Dockerfile new file mode 100644 index 0000000..c3824f3 --- /dev/null +++ b/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;"] \ No newline at end of file diff --git a/frontend/README.md b/frontend/README.md index 0bd822a..11f1604 100644 --- a/frontend/README.md +++ b/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 diff --git a/frontend/docker-compose.yml b/frontend/docker-compose.yml new file mode 100644 index 0000000..582f687 --- /dev/null +++ b/frontend/docker-compose.yml @@ -0,0 +1,11 @@ +version: '3.8' + +services: + frontend: + build: + context: . + dockerfile: Dockerfile + ports: + - "8080:80" + restart: unless-stopped + diff --git a/frontend/package.json b/frontend/package.json index 15d1e65..15e6b84 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index fa1a65a..bc1578b 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 + dotenv: + specifier: ^16.4.5 + version: 16.4.5 ethers: specifier: ^6.13.1 version: 6.13.2 @@ -960,6 +963,10 @@ packages: resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} engines: {node: '>=6.0.0'} + dotenv@16.4.5: + resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==} + engines: {node: '>=12'} + eastasianwidth@0.2.0: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} @@ -2800,6 +2807,8 @@ snapshots: dependencies: esutils: 2.0.3 + dotenv@16.4.5: {} + eastasianwidth@0.2.0: {} electron-to-chromium@1.5.3: {} diff --git a/frontend/src/abi/testCounter.abi.json b/frontend/src/abi/your-contract.abi.json similarity index 100% rename from frontend/src/abi/testCounter.abi.json rename to frontend/src/abi/your-contract.abi.json diff --git a/frontend/src/components/FormComponent.tsx b/frontend/src/components/FormComponent.tsx index abf73cf..3ab0e6e 100644 --- a/frontend/src/components/FormComponent.tsx +++ b/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(0) const [inputB, setinputB] = useState(0) - const [testContract, setTestContract] = useState(ADD_SUB_CONTRACT) + const [testContract, setTestContract] = useState(YOUR_CONTRACT) const [response, setResponse] = useState(null) const [error, setError] = useState(null) @@ -84,7 +84,7 @@ const FormComponent = () => {
- 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" /> + 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" />
diff --git a/frontend/src/config/snap.ts b/frontend/src/config/snap.ts index f86a85d..d512434 100644 --- a/frontend/src/config/snap.ts +++ b/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;