Merge pull request #11 from prototyp3-dev/refactor/cartesiClientEnvVar

Refactor/cartesi client env var

frontend/.env

@@ -1 +1,2 @@
 NEXT_PUBLIC_DAPP_ADDR="0x70ac08179605AF2D9e75782b8DEcDD3c22aA4D0C"
+NEXT_PUBLIC_CARTESI_NODE_URL="http://127.0.0.1:8080"

frontend/app/components/CartridgeInfo.tsx

@@ -106,7 +106,7 @@ function CartridgeInfo() {
             in_card: selectedCartridge.inCard ? ethers.utils.hexlify(selectedCartridge.inCard) : "0x",
             log: ethers.utils.hexlify(selectedCartridge.gameplayLog)
         }
-        const replayRes = await replay(signer, envClient.DAPP_ADDR, inputData, {decode:true});
+        const replayRes = await replay(signer, envClient.DAPP_ADDR, inputData, {decode:true, cartesiNodeUrl: envClient.CARTESI_NODE_URL});
     }
 
     async function uploadLog() {

frontend/app/components/CartridgeScoreboard.tsx

@@ -2,11 +2,12 @@ import { cache } from 'react';
 import { getOutputs } from '../backend-libs/app/lib';
 import { ReplayScore } from '../backend-libs/app/ifaces';
 import MilitaryTechIcon from '@mui/icons-material/MilitaryTech';
+import { envClient } from '../utils/clientEnv';
 
 
 
 const getGeneralScoreboard = cache(async (cartridge_id:string) => {
-    const scores:Array<ReplayScore> = await getOutputs({tags: ["score", cartridge_id]});
+    const scores:Array<ReplayScore> = await getOutputs({tags: ["score", cartridge_id]}, {cartesiNodeUrl: envClient.CARTESI_NODE_URL});
     return scores;
 })
 

frontend/app/components/CartridgeSelectButton.tsx

@@ -5,6 +5,7 @@ import { selectedCartridgeContext } from '../cartridges/selectedCartridgeProvide
 import { CartridgeInfo as Cartridge } from "../backend-libs/app/ifaces"
 import { cartridgeInfo } from '../backend-libs/app/lib';
 import { fontPressStart2P } from '../utils/font';
+import { envClient } from '../utils/clientEnv';
 
 function CartridgeSelectButton({cartridge, index}:{cartridge:Cartridge, index:number}) {
     const {selectedCartridge, changeCartridge} = useContext(selectedCartridgeContext);
@@ -18,7 +19,7 @@ function CartridgeSelectButton({cartridge, index}:{cartridge:Cartridge, index:nu
 
     const handleCartridgeSelection = async (e:React.MouseEvent<HTMLElement>) => {
 
-        const cartridgeWithInfo = await cartridgeInfo({id:cartridge.id},{decode:true});
+        const cartridgeWithInfo = await cartridgeInfo({id:cartridge.id},{decode:true, cartesiNodeUrl: envClient.CARTESI_NODE_URL});
 
         console.log('Select')
 

frontend/app/components/CartridgesList.tsx

@@ -1,10 +1,11 @@
 import CartridgeSelectButton from './CartridgeSelectButton';
 import { cache } from 'react';
 import { cartridges as cartridgerequest} from "../backend-libs/app/lib";
+import { envClient } from '../utils/clientEnv';
 
 
 const getCartridges = cache(async () => {
-	const cartridges: any[] = (await cartridgerequest({},{decode:true})).data;
+	const cartridges: any[] = (await cartridgerequest({},{decode:true, cartesiNodeUrl: envClient.CARTESI_NODE_URL})).data;
 
     return cartridges;
   })

frontend/app/components/Navbar.tsx

@@ -27,7 +27,7 @@ function Navbar() {
                     <p>Cartridges</p>
                 </Link>
 
-                <Link href={"/upload-cartridge"} className={ pathname === "/upload-cartridge" ? "link-active" : "link-2step-hover" }>
+                <Link href={"/insert-cartridge"} className={ pathname === "/insert-cartridge" ? "link-active" : "link-2step-hover" }>
                     <p>Insert Cartridge</p>
                 </Link>
             </nav>

frontend/app/components/Rivemu.tsx

@@ -14,6 +14,7 @@ import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
 import { selectedCartridgeContext } from '../cartridges/selectedCartridgeProvider';
 import { cartridge } from '../backend-libs/app/lib';
 import { fontPressStart2P } from '../utils/font';
+import { envClient } from '../utils/clientEnv';
 
 // let rivlogData: Uint8Array | undefined = undefined;
 
@@ -51,7 +52,7 @@ function Rivemu() {
 
     async function loadCartridge() {
         if (!selectedCartridge || !selectedCartridge?.play || selectedCartridge.cartridgeData != undefined) return;
-        const data = await cartridge({id:selectedCartridge.id},{decode:true,decodeModel:"bytes"});
+        const data = await cartridge({id:selectedCartridge.id},{decode:true,decodeModel:"bytes", cartesiNodeUrl: envClient.CARTESI_NODE_URL});
         setCartridgeData(data);
     }
 

frontend/app/insert-cartridge/page.tsx

@@ -0,0 +1,10 @@
+import { fontPressStart2P } from "../utils/font"
+
+
+export default function UploadCartridge() {
+    return (
+      <main className="flex items-center justify-center h-lvh">
+        <span className={`${fontPressStart2P.className} text-4xl` }>Coming Soon!</span>
+      </main>
+    )
+  }

frontend/app/utils/clientEnv.ts

@@ -1,9 +1,13 @@
-import { str, envsafe } from 'envsafe';
+import { str, envsafe, url } from 'envsafe';
 
 
 export const envClient = envsafe({
   DAPP_ADDR: str({
     input: process.env.NEXT_PUBLIC_DAPP_ADDR,
     desc: "Cartesi DApp ETH address."
+  }),
+  CARTESI_NODE_URL: url({
+    input: process.env.NEXT_PUBLIC_CARTESI_NODE_URL,
+    desc: "Cartesi Node URL."
   })
 })