expose env vars to vite

AztecProtocol · Aug 22, 2023 · fc9c1b5 · fc9c1b5
1 parent 0faec14
commit fc9c1b5
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 174 deletions.
diff --git a/yarn-project/aztec-cli/src/unbox.ts b/yarn-project/aztec-cli/src/unbox.ts
@@ -14,9 +14,9 @@ import * as path from 'path';
 const GITHUB_OWNER = 'AztecProtocol';
 const GITHUB_REPO = 'aztec-packages';
 const NOIR_CONTRACTS_PATH = 'yarn-project/noir-contracts/src/contracts';
-const STARTER_KIT_PATH = 'yarn-project/starter-kit';
+// const STARTER_KIT_PATH = 'yarn-project/starter-kit';
 // before this commit lands, we can't grab from github, so can test with another subpackage like this
-// const STARTER_KIT_PATH = 'yarn-project/aztec.js';
+const STARTER_KIT_PATH = 'yarn-project/aztec.js';
 
 /**
  * Converts a contract name in "upper camel case" to a folder name in snake case.
@@ -118,9 +118,8 @@ async function _downloadNoirFilesFromGithub(directoryPath: string, outputPath: s
  */
 export async function createEnvFile(outputPath: string, contractAbiFileName: string) {
   const envData = {
-    REACT_APP_CONTRACT_ABI_FILE_NAME: contractAbiFileName,
-    REACT_APP_SANDBOX_RPC_URL: '',
-    DATABASE_URL: 'mongodb://localhost:27017/mydb',
+    VITE_CONTRACT_ABI_FILE_NAME: contractAbiFileName,
+    VITE_SANDBOX_RPC_URL: '',
   };
   const content = Object.entries(envData)
     .map(([key, value]) => `${key}=${value}`)

diff --git a/yarn-project/starter-kit/.gitignore b/yarn-project/starter-kit/.gitignore
@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+.env
 
 node_modules
 dist

diff --git a/yarn-project/starter-kit/index.html b/yarn-project/starter-kit/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="src/assets/aztec_logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Noir Smart Contract Starter Frontend</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/yarn-project/starter-kit/src/app/page.tsx b/yarn-project/starter-kit/src/app/page.tsx
@@ -1,6 +1,7 @@
-import { ContractAbi } from '@aztec/foundation/abi';
 import '../App.css';
 
+import { useEffect, useState } from 'react';
+
 import aztecLogo from '../assets/aztec_logo.svg';
 import Banner from './banner';
 import DynamicContractForm from './contractForm';
@@ -12,10 +13,23 @@ import DynamicContractForm from './contractForm';
  * @param ContractAbiData - a contract ABI, generate frontend based on this
  * @returns 
  */
-export default function Home({ ContractAbiData}: {/**
- * ContractAbiData - a contract ABI, generate frontend based on this
- */
-ContractAbiData: ContractAbi}) {
+export default function Home() {
+    const [data, setData] = useState(null);
+
+  const contractAbiPath = `../artifacts/${import.meta.env.VITE_CONTRACT_ABI_FILE_NAME}`;
+
+  useEffect(() => {
+    import(contractAbiPath)
+      .then(json => {
+        setData(json.default);
+      })
+      .catch(err => {
+        console.error("Failed to load JSON:", err);
+      });
+  }, [contractAbiPath]);
+
+  if (!data) return <div>Loading contract ABI JSON...</div>;
+
   return (
 
     <main className="flex min-h-screen flex-col items-center justify-between px-16">
@@ -32,7 +46,7 @@ ContractAbiData: ContractAbi}) {
             <div>
 
 
-      <DynamicContractForm contractAbi={ContractAbiData}/>
+      <DynamicContractForm contractAbi={data}/>
 </div>
     </div>
 

diff --git a/yarn-project/starter-kit/src/artifacts/private_token_contract.json b/yarn-project/starter-kit/src/artifacts/private_token_contract.json
diff --git a/yarn-project/starter-kit/src/assets/react.svg b/yarn-project/starter-kit/src/assets/react.svg
diff --git a/yarn-project/starter-kit/src/main.tsx b/yarn-project/starter-kit/src/main.tsx
@@ -1,18 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import Home from './app/page';
-// TODO: allow the assert (something about babel)
-import PrivateTokenJson from './artifacts/private_token_contract.json'; // assert { type: 'json' };
-
-import { ContractAbi } from '@aztec/foundation/abi';
 import './index.css';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <Home ContractAbiData={PrivateTokenJson as ContractAbi}/>
+    <Home/>
   </React.StrictMode>
 );