Deploy to Vercel with mocks (#17)

* Add env vars

* Move txs.json to mocks dir

* Add msw dep

* Add API mock handler

* Add API mock worker

* Add generated mockServiceWorker

* Add MockApiProvider

* Remove comments from sample envfile

* Fix render in provider

* Add envvar to playwright config

Author: abefernan

.env.sample

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_API_URL=http://localhost:4000/api/v1
+NEXT_PUBLIC_MOCK_API=FALSE

hooks/api.ts

@@ -1,5 +1,4 @@
-"use client";
-
+import { env } from "@/lib/env";
 import { Tx, TxSchema } from "@/types/txs";
 import {
   keepPreviousData,
@@ -8,9 +7,6 @@ import {
 } from "@tanstack/react-query";
 import { z } from "zod";
 
-//TODO - use an envfile
-const API_URL = "http://localhost:4000/api/v1";
-
 export const useTxs = (operationName?: string, tags?: Map<string, string>) => {
   const tagsObj = tags ? Object.fromEntries(tags.entries()) : undefined;
 
@@ -25,7 +21,9 @@ export const useTxs = (operationName?: string, tags?: Map<string, string>) => {
   return useQuery<Readonly<Array<Tx>>>({
     queryKey: ["txs", { operationName, tags: tagsObj }],
     queryFn: () =>
-      fetch(`${API_URL}/txs${params.size ? `?${params.toString()}` : ""}`)
+      fetch(
+        `${env.NEXT_PUBLIC_API_URL}/txs${params.size ? `?${params.toString()}` : ""}`,
+      )
         .then((res) => res.json())
         .then(({ txs }) => z.array(TxSchema).parse(txs)),
     placeholderData: keepPreviousData,
@@ -38,7 +36,7 @@ export const useTx = (id: string) => {
   return useQuery<Readonly<Array<Tx>>>({
     queryKey: ["tx", id],
     queryFn: () =>
-      fetch(`${API_URL}/txs?traceID=${id}`)
+      fetch(`${env.NEXT_PUBLIC_API_URL}/txs?traceID=${id}`)
         .then((res) => res.json())
         .then(({ txs }) => z.array(TxSchema).parse(txs)),
     placeholderData: () => {

lib/env.ts

@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+//NOTE - Webpack disallows reading process.env as a whole, so we need to parse individual variables
+export const env = {
+  NEXT_PUBLIC_API_URL: z.string().url().parse(process.env.NEXT_PUBLIC_API_URL),
+  NEXT_PUBLIC_MOCK_API: z
+    .optional(z.enum(["TRUE", "FALSE"]))
+    .parse(process.env.NEXT_PUBLIC_MOCK_API),
+};