From bc2eef2eeab9768d78b33f50deb395cab876af2d Mon Sep 17 00:00:00 2001 From: wsdt Date: Sat, 10 Aug 2024 12:21:01 +0200 Subject: [PATCH] fix: envs for boba sepolia docker compose --- contracts/script/deploy-stack.ts | 2 +- docker-compose.sepolia.yml | 6 +- frontend/{.env-sepolia => .env-boba-sepolia} | 0 frontend/Dockerfile | 9 +- frontend/package.json | 5 +- frontend/pnpm-lock.yaml | 124 ++++++++++++------ frontend/src/components/TokenPriceFetcher.tsx | 8 +- 7 files changed, 104 insertions(+), 50 deletions(-) rename frontend/{.env-sepolia => .env-boba-sepolia} (100%) diff --git a/contracts/script/deploy-stack.ts b/contracts/script/deploy-stack.ts index 66cb576..93308da 100644 --- a/contracts/script/deploy-stack.ts +++ b/contracts/script/deploy-stack.ts @@ -113,7 +113,7 @@ async function main() { // save relevant envs to frontend console.log('Saving relevant env variables to frontend. The Boba sepolia config will be used if some variables are missing.') - const frontendEnvPath = '../../frontend/.env-sepolia' + const frontendEnvPath = '../../frontend/.env-boba-sepolia' updateEnvVariable("VITE_SMART_CONTRACT", tokenPriceAddress, frontendEnvPath); updateEnvVariable("VITE_SNAP_ORIGIN", 'npm:@bobanetwork/snap-account-abstraction-keyring-hc', frontendEnvPath); updateEnvVariable("VITE_SNAP_VERSION", DEFAULT_SNAP_VERSION, frontendEnvPath); diff --git a/docker-compose.sepolia.yml b/docker-compose.sepolia.yml index 7229601..3368634 100644 --- a/docker-compose.sepolia.yml +++ b/docker-compose.sepolia.yml @@ -6,11 +6,13 @@ services: build: context: ./frontend dockerfile: Dockerfile + args: + - NETWORK=boba-sepolia # boba-sepolia | local image: bobanetwork/aa-hc-example-frontend env_file: - - ./frontend/.env-sepolia + - frontend/.env-boba-sepolia ports: - - "8081:80" + - "8000:80" restart: unless-stopped networks: diff --git a/frontend/.env-sepolia b/frontend/.env-boba-sepolia similarity index 100% rename from frontend/.env-sepolia rename to frontend/.env-boba-sepolia diff --git a/frontend/Dockerfile b/frontend/Dockerfile index c3824f3..95c5c55 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -1,6 +1,8 @@ # Stage 1: Build the application FROM node:20-alpine AS build +ARG NETWORK + # Set working directory WORKDIR /app @@ -13,6 +15,10 @@ RUN npm i # Copy the rest of the application code COPY . . +# Copy the correct .env file based on the NETWORK argument +COPY .env-${NETWORK} .env +# VITE needs env-vars at build time + # Build the application RUN npm run build @@ -22,9 +28,6 @@ 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 diff --git a/frontend/package.json b/frontend/package.json index 15e6b84..3b37c9c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,7 +4,8 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "dev:sepolia": "cross-env-shell dotenv -e .env-boba-sepolia \"vite dev\"", + "dev:local": "cross-env-shell dotenv -e .env-local \"vite dev\"", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" @@ -36,6 +37,8 @@ "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", "@vitejs/plugin-react": "^4.2.1", + "cross-env": "^7.0.3", + "dotenv-cli": "^7.4.2", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index ca9b457..ac9910a 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -10,10 +10,10 @@ importers: dependencies: '@metamask/keyring-api': specifier: ^8.0.0 - version: 8.1.0(@metamask/providers@17.1.2)(webextension-polyfill@0.12.0) + version: 8.1.0(@metamask/providers@17.1.2(webextension-polyfill@0.12.0))(webextension-polyfill@0.12.0) '@radix-ui/react-label': specifier: ^2.1.0 - version: 2.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + version: 2.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.1.0(@types/react@18.3.3)(react@18.3.1) @@ -61,7 +61,7 @@ importers: version: 1.0.2 web3: specifier: ^4.10.0 - version: 4.11.1(typescript@5.5.4) + version: 4.11.1(typescript@5.5.4)(zod@3.23.8) devDependencies: '@types/node': specifier: ^20.14.2 @@ -74,13 +74,19 @@ importers: version: 18.3.0 '@typescript-eslint/eslint-plugin': specifier: ^7.2.0 - version: 7.18.0(@typescript-eslint/parser@7.18.0)(eslint@8.57.0)(typescript@5.5.4) + version: 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4) '@typescript-eslint/parser': specifier: ^7.2.0 version: 7.18.0(eslint@8.57.0)(typescript@5.5.4) '@vitejs/plugin-react': specifier: ^4.2.1 - version: 4.3.1(vite@5.3.5) + version: 4.3.1(vite@5.3.5(@types/node@20.14.14)) + cross-env: + specifier: ^7.0.3 + version: 7.0.3 + dotenv-cli: + specifier: ^7.4.2 + version: 7.4.2 eslint: specifier: ^8.57.0 version: 8.57.0 @@ -911,6 +917,11 @@ packages: engines: {node: '>=0.8'} hasBin: true + cross-env@7.0.3: + resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==} + engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'} + hasBin: true + cross-fetch@4.0.0: resolution: {integrity: sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==} @@ -963,6 +974,14 @@ packages: resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} engines: {node: '>=6.0.0'} + dotenv-cli@7.4.2: + resolution: {integrity: sha512-SbUj8l61zIbzyhIbg0FwPJq6+wjbzdn9oEtozQpZ6kW2ihCcapKVZj49oCT3oPM+mgQm+itgvUQcG5szxVrZTA==} + hasBin: true + + dotenv-expand@10.0.0: + resolution: {integrity: sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==} + engines: {node: '>=12'} + dotenv@16.4.5: resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==} engines: {node: '>=12'} @@ -1379,6 +1398,9 @@ packages: resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==} engines: {node: '>=16 || 14 >=14.17'} + minimist@1.2.8: + resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} + minipass@7.1.2: resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==} engines: {node: '>=16 || 14 >=14.17'} @@ -2253,7 +2275,7 @@ snapshots: transitivePeerDependencies: - supports-color - '@metamask/keyring-api@8.1.0(@metamask/providers@17.1.2)(webextension-polyfill@0.12.0)': + '@metamask/keyring-api@8.1.0(@metamask/providers@17.1.2(webextension-polyfill@0.12.0))(webextension-polyfill@0.12.0)': dependencies: '@metamask/providers': 17.1.2(webextension-polyfill@0.12.0) '@metamask/snaps-sdk': 6.2.1(webextension-polyfill@0.12.0) @@ -2360,30 +2382,34 @@ snapshots: '@radix-ui/react-compose-refs@1.1.0(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@types/react': 18.3.3 react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.3 - '@radix-ui/react-label@2.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)': + '@radix-ui/react-label@2.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) - '@types/react': 18.3.3 - '@types/react-dom': 18.3.0 + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 - '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)': + '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1) - '@types/react': 18.3.3 - '@types/react-dom': 18.3.0 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 '@radix-ui/react-slot@1.1.0(@types/react@18.3.3)(react@18.3.1)': dependencies: '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1) - '@types/react': 18.3.3 react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.3 '@rollup/rollup-android-arm-eabi@4.20.0': optional: true @@ -2498,7 +2524,7 @@ snapshots: dependencies: '@types/node': 20.14.14 - '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0)(eslint@8.57.0)(typescript@5.5.4)': + '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4)': dependencies: '@eslint-community/regexpp': 4.11.0 '@typescript-eslint/parser': 7.18.0(eslint@8.57.0)(typescript@5.5.4) @@ -2511,6 +2537,7 @@ snapshots: ignore: 5.3.1 natural-compare: 1.4.0 ts-api-utils: 1.3.0(typescript@5.5.4) + optionalDependencies: typescript: 5.5.4 transitivePeerDependencies: - supports-color @@ -2523,6 +2550,7 @@ snapshots: '@typescript-eslint/visitor-keys': 7.18.0 debug: 4.3.6 eslint: 8.57.0 + optionalDependencies: typescript: 5.5.4 transitivePeerDependencies: - supports-color @@ -2539,6 +2567,7 @@ snapshots: debug: 4.3.6 eslint: 8.57.0 ts-api-utils: 1.3.0(typescript@5.5.4) + optionalDependencies: typescript: 5.5.4 transitivePeerDependencies: - supports-color @@ -2555,6 +2584,7 @@ snapshots: minimatch: 9.0.5 semver: 7.6.3 ts-api-utils: 1.3.0(typescript@5.5.4) + optionalDependencies: typescript: 5.5.4 transitivePeerDependencies: - supports-color @@ -2577,7 +2607,7 @@ snapshots: '@ungap/structured-clone@1.2.0': {} - '@vitejs/plugin-react@4.3.1(vite@5.3.5)': + '@vitejs/plugin-react@4.3.1(vite@5.3.5(@types/node@20.14.14))': dependencies: '@babel/core': 7.25.2 '@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.25.2) @@ -2588,9 +2618,11 @@ snapshots: transitivePeerDependencies: - supports-color - abitype@0.7.1(typescript@5.5.4): + abitype@0.7.1(typescript@5.5.4)(zod@3.23.8): dependencies: typescript: 5.5.4 + optionalDependencies: + zod: 3.23.8 acorn-jsx@5.3.2(acorn@8.12.1): dependencies: @@ -2753,6 +2785,10 @@ snapshots: crc-32@1.2.2: {} + cross-env@7.0.3: + dependencies: + cross-spawn: 7.0.3 + cross-fetch@4.0.0: dependencies: node-fetch: 2.7.0 @@ -2797,6 +2833,15 @@ snapshots: dependencies: esutils: 2.0.3 + dotenv-cli@7.4.2: + dependencies: + cross-spawn: 7.0.3 + dotenv: 16.4.5 + dotenv-expand: 10.0.0 + minimist: 1.2.8 + + dotenv-expand@10.0.0: {} + dotenv@16.4.5: {} eastasianwidth@0.2.0: {} @@ -3233,6 +3278,8 @@ snapshots: dependencies: brace-expansion: 2.0.1 + minimist@1.2.8: {} + minipass@7.1.2: {} ms@2.1.2: {} @@ -3330,8 +3377,9 @@ snapshots: postcss-load-config@4.0.2(postcss@8.4.41): dependencies: lilconfig: 3.1.2 - postcss: 8.4.41 yaml: 2.5.0 + optionalDependencies: + postcss: 8.4.41 postcss-nested@6.2.0(postcss@8.4.41): dependencies: @@ -3599,11 +3647,11 @@ snapshots: vite@5.3.5(@types/node@20.14.14): dependencies: - '@types/node': 20.14.14 esbuild: 0.21.5 postcss: 8.4.41 rollup: 4.20.0 optionalDependencies: + '@types/node': 20.14.14 fsevents: 2.3.3 web3-core@4.5.0: @@ -3627,9 +3675,9 @@ snapshots: dependencies: web3-types: 1.7.0 - web3-eth-abi@4.2.3(typescript@5.5.4): + web3-eth-abi@4.2.3(typescript@5.5.4)(zod@3.23.8): dependencies: - abitype: 0.7.1(typescript@5.5.4) + abitype: 0.7.1(typescript@5.5.4)(zod@3.23.8) web3-errors: 1.2.1 web3-types: 1.7.0 web3-utils: 4.3.1 @@ -3648,13 +3696,13 @@ snapshots: web3-utils: 4.3.1 web3-validator: 2.0.6 - web3-eth-contract@4.6.0(typescript@5.5.4): + web3-eth-contract@4.6.0(typescript@5.5.4)(zod@3.23.8): dependencies: '@ethereumjs/rlp': 5.0.2 web3-core: 4.5.0 web3-errors: 1.2.1 - web3-eth: 4.8.2(typescript@5.5.4) - web3-eth-abi: 4.2.3(typescript@5.5.4) + web3-eth: 4.8.2(typescript@5.5.4)(zod@3.23.8) + web3-eth-abi: 4.2.3(typescript@5.5.4)(zod@3.23.8) web3-types: 1.7.0 web3-utils: 4.3.1 web3-validator: 2.0.6 @@ -3665,13 +3713,13 @@ snapshots: - utf-8-validate - zod - web3-eth-ens@4.4.0(typescript@5.5.4): + web3-eth-ens@4.4.0(typescript@5.5.4)(zod@3.23.8): dependencies: '@adraffy/ens-normalize': 1.10.1 web3-core: 4.5.0 web3-errors: 1.2.1 - web3-eth: 4.8.2(typescript@5.5.4) - web3-eth-contract: 4.6.0(typescript@5.5.4) + web3-eth: 4.8.2(typescript@5.5.4)(zod@3.23.8) + web3-eth-contract: 4.6.0(typescript@5.5.4)(zod@3.23.8) web3-net: 4.1.0 web3-types: 1.7.0 web3-utils: 4.3.1 @@ -3690,10 +3738,10 @@ snapshots: web3-utils: 4.3.1 web3-validator: 2.0.6 - web3-eth-personal@4.0.8(typescript@5.5.4): + web3-eth-personal@4.0.8(typescript@5.5.4)(zod@3.23.8): dependencies: web3-core: 4.5.0 - web3-eth: 4.8.2(typescript@5.5.4) + web3-eth: 4.8.2(typescript@5.5.4)(zod@3.23.8) web3-rpc-methods: 1.3.0 web3-types: 1.7.0 web3-utils: 4.3.1 @@ -3705,12 +3753,12 @@ snapshots: - utf-8-validate - zod - web3-eth@4.8.2(typescript@5.5.4): + web3-eth@4.8.2(typescript@5.5.4)(zod@3.23.8): dependencies: setimmediate: 1.0.5 web3-core: 4.5.0 web3-errors: 1.2.1 - web3-eth-abi: 4.2.3(typescript@5.5.4) + web3-eth-abi: 4.2.3(typescript@5.5.4)(zod@3.23.8) web3-eth-accounts: 4.1.3 web3-net: 4.1.0 web3-providers-ws: 4.0.8 @@ -3805,17 +3853,17 @@ snapshots: web3-types: 1.7.0 zod: 3.23.8 - web3@4.11.1(typescript@5.5.4): + web3@4.11.1(typescript@5.5.4)(zod@3.23.8): dependencies: web3-core: 4.5.0 web3-errors: 1.2.1 - web3-eth: 4.8.2(typescript@5.5.4) - web3-eth-abi: 4.2.3(typescript@5.5.4) + web3-eth: 4.8.2(typescript@5.5.4)(zod@3.23.8) + web3-eth-abi: 4.2.3(typescript@5.5.4)(zod@3.23.8) web3-eth-accounts: 4.1.3 - web3-eth-contract: 4.6.0(typescript@5.5.4) - web3-eth-ens: 4.4.0(typescript@5.5.4) + web3-eth-contract: 4.6.0(typescript@5.5.4)(zod@3.23.8) + web3-eth-ens: 4.4.0(typescript@5.5.4)(zod@3.23.8) web3-eth-iban: 4.0.7 - web3-eth-personal: 4.0.8(typescript@5.5.4) + web3-eth-personal: 4.0.8(typescript@5.5.4)(zod@3.23.8) web3-net: 4.1.0 web3-providers-http: 4.1.0 web3-providers-ws: 4.0.8 diff --git a/frontend/src/components/TokenPriceFetcher.tsx b/frontend/src/components/TokenPriceFetcher.tsx index e7376bc..01505b1 100644 --- a/frontend/src/components/TokenPriceFetcher.tsx +++ b/frontend/src/components/TokenPriceFetcher.tsx @@ -15,8 +15,7 @@ import {connectSnap, getSnap} from "@/lib/snap.ts"; const FormComponent = () => { const [state] = useContext(MetaMaskContext); const [contractAddress, setContractAddress] = useState(YOUR_CONTRACT); - const [tokenSymbol, setTokenSymbol] = useState(""); - const [inputSymbol, setInputSymbol] = useState("ETH"); + const [tokenSymbol, setTokenSymbol] = useState("ETH"); const [tokenPrice, setTokenPrice] = useState(""); const {abi: contractAbi} = useContractAbi("TokenPrice"); const [txResponse, setTxResponse] = useState(null); @@ -35,7 +34,6 @@ const FormComponent = () => { setTokenPrice(""); setTxResponse(""); setError(""); - setTokenSymbol(inputSymbol); // Prepare the function selector and encoded parameters for the smart contract interaction. // This specifies which function to call on the contract and with what arguments @@ -128,8 +126,8 @@ const FormComponent = () => {
setInputSymbol(e.target.value)} + value={tokenSymbol} + onChange={(e) => setTokenSymbol(e.target.value)} name="input token symbol" 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="ETH"