feat(app): enable env vars

Author: 1Mateus

packages/app/.env.example

@@ -0,0 +1,2 @@
+VITE_POD_URL="localhost:3000"
+VITE_CONTRACT_ID="0xd72ac19567088e35a446e0dacdfadc5f266ea68d2481401d9e6b374310fac3de"

packages/app/README.md

@@ -29,19 +29,33 @@ Here's a brief overview of the structure:
 ## Installation
 -----------------
 
+### Environments
+-----------------
+```bash
+## This is the URL of the API-Gramine, the gramine api
+VITE_POD_URL="localhost:3000"
+## Pod validator address 
+VITE_CONTRACT_ID="0xd72ac19567088e35a446e0dacdfadc5f266ea68d2481401d9e6b374310fac3de"
+```
+
 #### Steps
 1) Clone the repository:
 ```bash
 $ gh repo clone hack-a-chain-software/bazk
 $ cd bazk
 ```
 
-2) Install frontend dependencies via YARN:
+2) Configure enviroments
+```bash
+$ cp ./app/.env.example ./app/.env
+```
+
+3) Install frontend dependencies via YARN:
 ```bash
 $ yarn install
 ```
 
-3) Run dev server
+4) Run dev server
 ```bash
 $ yarn app dev
 ```

packages/app/src/machines/CeremoniesMachine.ts

@@ -6,11 +6,13 @@ const BAZK_CONTRACT_ID = '0xd72ac19567088e35a446e0dacdfadc5f266ea68d2481401d9e6b
 
 export const contractConnection = fromPromise(
   async ({ input }: any) => {
+    const address = import.meta.env.VITE_CONTRACT_ID || BAZK_CONTRACT_ID
+
     const { connection, phatRegistry } = input
 
-    const contractKey = await phatRegistry.getContractKeyOrFail(BAZK_CONTRACT_ID)
+    const contractKey = await phatRegistry.getContractKeyOrFail(address)
 
-    const contract = new PinkContractPromise(connection, phatRegistry, abi, BAZK_CONTRACT_ID, contractKey)
+    const contract = new PinkContractPromise(connection, phatRegistry, abi, address, contractKey)
 
     return {
       contract,

packages/app/src/machines/actors/contract.ts

@@ -102,7 +102,7 @@ export const CreatePage = () => {
         console.log("Creating ceremony with params: ", data)
 
         try {
-          const response = await fetch(apiUrl, {
+          const response = await fetch(import.meta.env.VITE_POD_URL || apiUrl, {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',

packages/app/src/pages/ceremony/Create.tsx

@@ -73,7 +73,7 @@ export const CreateContributionPage = () => {
           };
 
           try {
-            const response = await fetch(apiUrl, {
+            const response = await fetch(import.meta.env.VITE_POD_URL || apiUrl, {
               method: 'POST',
               headers: {
                 'Content-Type': 'application/json',