feat(config): replace api url definitions with env var configs

refs #163, #313
akash-network · Oct 3, 2024 · c0f031c · c0f031c
1 parent 8f15bce
commit c0f031c
Show file tree

Hide file tree

Showing 19 changed files with 31,260 additions and 7,164 deletions.
diff --git a/apps/stats-web/env/.env.production b/apps/stats-web/env/.env.production
@@ -1 +1,9 @@
-NEXT_PUBLIC_API_BASE_URL=https://console-api.akash.network
+NEXT_PUBLIC_NODE_ENV=$NODE_ENV
+NEXT_PUBLIC_BASE_API_MAINNET_URL=https://console-api.akash.network
+NEXT_PUBLIC_BASE_API_SANDBOX_URL=https://console-api-sandbox.akash.network
+NEXT_PUBLIC_BASE_API_TESTNET_URL=https://console-api-testnet.akash.network
+NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_BASE_API_MAINNET_URL
+
+BASE_API_MAINNET_URL=$NEXT_PUBLIC_BASE_API_MAINNET_URL
+BASE_API_TESTNET_URL=$NEXT_PUBLIC_BASE_API_TESTNET_URL
+BASE_API_SANDBOX_URL=$NEXT_PUBLIC_BASE_API_SANDBOX_URL
diff --git a/apps/stats-web/env/.env.staging b/apps/stats-web/env/.env.staging
@@ -1 +1,9 @@
-NEXT_PUBLIC_API_BASE_URL=https://console-api-mainnet-staging.akash.network
+NEXT_PUBLIC_NODE_ENV=$NODE_ENV
+NEXT_PUBLIC_BASE_API_MAINNET_URL=https://console-api-mainnet-staging.akash.network
+NEXT_PUBLIC_BASE_API_SANDBOX_URL=https://console-api-sandbox-staging.akash.network
+NEXT_PUBLIC_BASE_API_TESTNET_URL=$NEXT_PUBLIC_BASE_API_MAINNET_URL
+NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_BASE_API_MAINNET_URL
+
+BASE_API_MAINNET_URL=$NEXT_PUBLIC_BASE_API_MAINNET_URL
+BASE_API_TESTNET_URL=$NEXT_PUBLIC_BASE_API_TESTNET_URL
+BASE_API_SANDBOX_URL=$NEXT_PUBLIC_BASE_API_SANDBOX_URL
diff --git a/apps/stats-web/package.json b/apps/stats-web/package.json
@@ -11,8 +11,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@akashnetwork/ui": "*",
     "@akashnetwork/network-store": "*",
+    "@akashnetwork/ui": "*",
     "@cosmjs/encoding": "^0.32.4",
     "@json2csv/plainjs": "^7.0.4",
     "@nivo/line": "^0.87.0",

diff --git a/apps/stats-web/src/app/addresses/[address]/deployments/[dseq]/page.tsx b/apps/stats-web/src/app/addresses/[address]/deployments/[dseq]/page.tsx
@@ -1,19 +1,28 @@
+import type { Network } from "@akashnetwork/network-store";
 import { Metadata } from "next";
+import { z } from "zod";
 
 import { DeploymentInfo } from "./DeploymentInfo";
 
 import PageContainer from "@/components/PageContainer";
 import { Title } from "@/components/Title";
-import { getNetworkBaseApiUrl } from "@/lib/constants";
+import { networkId } from "@/config/env-config.schema";
 import { UrlService } from "@/lib/urlUtils";
+import { serverApiUrlService } from "@/services/api-url/server-api-url.service";
 import { DeploymentDetail } from "@/types";
 
-interface IProps {
-  params: { address: string; dseq: string };
-  searchParams: { [key: string]: string | string[] | undefined };
-}
+const DeploymentDetailPageSchema = z.object({
+  params: z.object({
+    address: z.string(),
+    dseq: z.string()
+  }),
+  searchParams: z.object({
+    network: networkId
+  })
+});
+type DeploymentDetailPageProps = z.infer<typeof DeploymentDetailPageSchema>;
 
-export async function generateMetadata({ params: { address, dseq } }: IProps): Promise<Metadata> {
+export async function generateMetadata({ params: { address, dseq } }: DeploymentDetailPageProps): Promise<Metadata> {
   const url = `https://stats.akash.network${UrlService.deployment(address, dseq)}`;
 
   return {
@@ -27,8 +36,8 @@ export async function generateMetadata({ params: { address, dseq } }: IProps): P
   };
 }
 
-async function fetchDeploymentData(address: string, dseq: string, network: string): Promise<DeploymentDetail> {
-  const apiUrl = getNetworkBaseApiUrl(network);
+async function fetchDeploymentData(address: string, dseq: string, network: Network["id"]): Promise<DeploymentDetail> {
+  const apiUrl = serverApiUrlService.getBaseApiUrlFor(network);
   const response = await fetch(`${apiUrl}/v1/deployment/${address}/${dseq}`);
 
   if (!response.ok) {
@@ -39,8 +48,12 @@ async function fetchDeploymentData(address: string, dseq: string, network: strin
   return response.json();
 }
 
-export default async function DeploymentDetailPage({ params: { address, dseq }, searchParams: { network } }: IProps) {
-  const deployment = await fetchDeploymentData(address, dseq, network as string);
+export default async function DeploymentDetailPage(props: DeploymentDetailPageProps) {
+  const {
+    params: { address, dseq },
+    searchParams: { network }
+  } = DeploymentDetailPageSchema.parse(props);
+  const deployment = await fetchDeploymentData(address, dseq, network);
 
   return (
     <PageContainer>

diff --git a/apps/stats-web/src/app/addresses/[address]/page.tsx b/apps/stats-web/src/app/addresses/[address]/page.tsx
@@ -1,4 +1,6 @@
-import { Metadata } from "next";
+import type { Network } from "@akashnetwork/network-store";
+import type { Metadata } from "next";
+import { z } from "zod";
 
 import { AddressInfo } from "./AddressInfo";
 import AddressLayout from "./AddressLayout";
@@ -7,16 +9,23 @@ import { AssetList } from "./AssetList";
 import { LatestTransactions } from "./LatestTransactions";
 
 import { Title } from "@/components/Title";
-import { getNetworkBaseApiUrl } from "@/lib/constants";
+import { networkId } from "@/config/env-config.schema";
 import { UrlService } from "@/lib/urlUtils";
+import { serverApiUrlService } from "@/services/api-url/server-api-url.service";
 import { AddressDetail } from "@/types";
 
-interface IProps {
-  params: { address: string };
-  searchParams: { [key: string]: string | string[] | undefined };
-}
+const AddressDetailPageSchema = z.object({
+  params: z.object({
+    address: z.string(),
+    dseq: z.string()
+  }),
+  searchParams: z.object({
+    network: networkId
+  })
+});
+type AddressDetailPageProps = z.infer<typeof AddressDetailPageSchema>;
 
-export async function generateMetadata({ params: { address } }: IProps): Promise<Metadata> {
+export async function generateMetadata({ params: { address } }: AddressDetailPageProps): Promise<Metadata> {
   const url = `https://stats.akash.network${UrlService.address(address)}`;
 
   return {
@@ -30,8 +39,8 @@ export async function generateMetadata({ params: { address } }: IProps): Promise
   };
 }
 
-async function fetchAddressData(address: string, network: string): Promise<AddressDetail> {
-  const apiUrl = getNetworkBaseApiUrl(network);
+async function fetchAddressData(address: string, network: Network["id"]): Promise<AddressDetail> {
+  const apiUrl = serverApiUrlService.getBaseApiUrlFor(network);
   const response = await fetch(`${apiUrl}/v1/addresses/${address}`);
 
   if (!response.ok) {
@@ -42,8 +51,12 @@ async function fetchAddressData(address: string, network: string): Promise<Addre
   return response.json();
 }
 
-export default async function AddressDetailPage({ params: { address }, searchParams: { network } }: IProps) {
-  const addressDetail = await fetchAddressData(address, network as string);
+export default async function AddressDetailPage(props: AddressDetailPageProps) {
+  const {
+    params: { address },
+    searchParams: { network }
+  } = AddressDetailPageSchema.parse(props);
+  const addressDetail = await fetchAddressData(address, network);
 
   return (
     <AddressLayout page="address" address={address}>

diff --git a/apps/stats-web/src/app/blocks/[height]/page.tsx b/apps/stats-web/src/app/blocks/[height]/page.tsx
@@ -1,28 +1,36 @@
+import type { Network } from "@akashnetwork/network-store";
 import { Card, CardContent, Table, TableBody, TableHead, TableHeader, TableRow } from "@akashnetwork/ui/components";
 import { SearchX } from "lucide-react";
-import { Metadata } from "next";
+import type { Metadata } from "next";
+import { z } from "zod";
 
 import { BlockInfo } from "./BlockInfo";
 
 import { TransactionRow } from "@/components/blockchain/TransactionRow";
 import PageContainer from "@/components/PageContainer";
 import { Title } from "@/components/Title";
-import { getNetworkBaseApiUrl } from "@/lib/constants";
+import { networkId } from "@/config/env-config.schema";
+import { serverApiUrlService } from "@/services/api-url/server-api-url.service";
 import { BlockDetail } from "@/types";
 
-interface IProps {
-  params: { height: string };
-  searchParams: { [key: string]: string | string[] | undefined };
-}
+const BlockDetailPageSchema = z.object({
+  params: z.object({
+    height: z.string()
+  }),
+  searchParams: z.object({
+    network: networkId
+  })
+});
+type BlockDetailPageProps = z.infer<typeof BlockDetailPageSchema>;
 
-export async function generateMetadata({ params: { height } }: IProps): Promise<Metadata> {
+export async function generateMetadata({ params: { height } }: BlockDetailPageProps): Promise<Metadata> {
   return {
     title: `Block #${height}`
   };
 }
 
-async function fetchBlockData(height: string, network: string): Promise<BlockDetail> {
-  const apiUrl = getNetworkBaseApiUrl(network);
+async function fetchBlockData(height: string, network: Network["id"]): Promise<BlockDetail> {
+  const apiUrl = serverApiUrlService.getBaseApiUrlFor(network);
   const response = await fetch(`${apiUrl}/v1/blocks/${height}`);
 
   if (!response.ok) {
@@ -33,8 +41,12 @@ async function fetchBlockData(height: string, network: string): Promise<BlockDet
   return response.json();
 }
 
-export default async function BlockDetailPage({ params: { height }, searchParams: { network } }: IProps) {
-  const block = await fetchBlockData(height, network as string);
+export default async function BlockDetailPage(props: BlockDetailPageProps) {
+  const {
+    params: { height },
+    searchParams: { network }
+  } = BlockDetailPageSchema.parse(props);
+  const block = await fetchBlockData(height, network);
 
   return (
     <PageContainer>

diff --git a/apps/stats-web/src/app/transactions/[hash]/page.tsx b/apps/stats-web/src/app/transactions/[hash]/page.tsx
@@ -1,44 +1,57 @@
 import React from "react";
+import type { Network } from "@akashnetwork/network-store";
 import { Alert, Card, CardContent } from "@akashnetwork/ui/components";
-import { Metadata } from "next";
+import type { Metadata } from "next";
+import { z } from "zod";
 
 import { TransactionInfo } from "./TransactionInfo";
 
 import PageContainer from "@/components/PageContainer";
 import { Title } from "@/components/Title";
 import { TxMessageRow } from "@/components/transactions/TxMessageRow";
+import { networkId } from "@/config/env-config.schema";
 import { getSplitText } from "@/hooks/useShortText";
-import { getNetworkBaseApiUrl } from "@/lib/constants";
+import { serverApiUrlService } from "@/services/api-url/server-api-url.service";
 import { TransactionDetail } from "@/types";
 
-interface IProps {
-  params: { hash: string };
-  searchParams: { [key: string]: string | string[] | undefined };
-}
+const TransactionDetailPageSchema = z.object({
+  params: z.object({
+    hash: z.string()
+  }),
+  searchParams: z.object({
+    network: networkId
+  })
+});
+type TransactionDetailPageProps = z.infer<typeof TransactionDetailPageSchema>;
 
-export async function generateMetadata({ params: { hash } }: IProps): Promise<Metadata> {
-  const splittedTxHash = getSplitText(hash, 6, 6);
+export async function generateMetadata({ params: { hash } }: TransactionDetailPageProps): Promise<Metadata> {
+  const splitTxHash = getSplitText(hash, 6, 6);
   return {
-    title: `Tx ${splittedTxHash}`
+    title: `Tx ${splitTxHash}`
   };
 }
 
-async function fetchTransactionData(hash: string, network: string): Promise<TransactionDetail | null> {
-  const apiUrl = getNetworkBaseApiUrl(network);
+async function fetchTransactionData(hash: string, network: Network["id"]): Promise<TransactionDetail | null> {
+  const apiUrl = serverApiUrlService.getBaseApiUrlFor(network);
+  console.log("DEBUG apiUrl", apiUrl);
   const response = await fetch(`${apiUrl}/v1/transactions/${hash}`);
 
   if (!response.ok && response.status !== 404) {
     // This will activate the closest `error.js` Error Boundary
-    throw new Error("Error fetching transction data");
+    throw new Error("Error fetching transaction data");
   } else if (response.status === 404) {
     return null;
   }
 
   return response.json();
 }
 
-export default async function TransactionDetailPage({ params: { hash }, searchParams: { network } }: IProps) {
-  const transaction = await fetchTransactionData(hash, network as string);
+export default async function TransactionDetailPage(props: TransactionDetailPageProps) {
+  const {
+    params: { hash },
+    searchParams: { network }
+  } = TransactionDetailPageSchema.parse(props);
+  const transaction = await fetchTransactionData(hash, network);
 
   return (
     <PageContainer>

diff --git a/apps/stats-web/src/app/validators/[address]/page.tsx b/apps/stats-web/src/app/validators/[address]/page.tsx
@@ -1,21 +1,29 @@
-import { Metadata } from "next";
+import type { Network } from "@akashnetwork/network-store";
+import type { Metadata } from "next";
+import { z } from "zod";
 
 import { ValidatorsInfo } from "./ValidatorInfo";
 
 import PageContainer from "@/components/PageContainer";
 import { Title } from "@/components/Title";
-import { getNetworkBaseApiUrl } from "@/lib/constants";
+import { networkId } from "@/config/env-config.schema";
 import { UrlService } from "@/lib/urlUtils";
+import { serverApiUrlService } from "@/services/api-url/server-api-url.service";
 import { ValidatorDetail } from "@/types";
 
-interface IProps {
-  params: { address: string };
-  searchParams: { [key: string]: string | string[] | undefined };
-}
+const ValidatorDetailPageSchema = z.object({
+  params: z.object({
+    address: z.string()
+  }),
+  searchParams: z.object({
+    network: networkId
+  })
+});
+type ValidatorDetailPageProps = z.infer<typeof ValidatorDetailPageSchema>;
 
-export async function generateMetadata({ params: { address }, searchParams: { network } }: IProps): Promise<Metadata> {
+export async function generateMetadata({ params: { address }, searchParams: { network } }: ValidatorDetailPageProps): Promise<Metadata> {
   const url = `https://stats.akash.network${UrlService.validator(address)}`;
-  const apiUrl = getNetworkBaseApiUrl(network as string);
+  const apiUrl = serverApiUrlService.getBaseApiUrlFor(network);
   const response = await fetch(`${apiUrl}/v1/validators/${address}`);
   const data = (await response.json()) as ValidatorDetail;
 
@@ -30,8 +38,8 @@ export async function generateMetadata({ params: { address }, searchParams: { ne
   };
 }
 
-async function fetchValidatorData(address: string, network: string): Promise<ValidatorDetail> {
-  const apiUrl = getNetworkBaseApiUrl(network);
+async function fetchValidatorData(address: string, network: Network["id"]): Promise<ValidatorDetail> {
+  const apiUrl = serverApiUrlService.getBaseApiUrlFor(network);
   const response = await fetch(`${apiUrl}/v1/validators/${address}`);
 
   if (!response.ok) {
@@ -42,8 +50,12 @@ async function fetchValidatorData(address: string, network: string): Promise<Val
   return response.json();
 }
 
-export default async function ValidatorDetailPage({ params: { address }, searchParams: { network } }: IProps) {
-  const validator = await fetchValidatorData(address, network as string);
+export default async function ValidatorDetailPage(props: ValidatorDetailPageProps) {
+  const {
+    params: { address },
+    searchParams: { network }
+  } = ValidatorDetailPageSchema.parse(props);
+  const validator = await fetchValidatorData(address, network);
 
   return (
     <PageContainer>

diff --git a/apps/stats-web/src/components/layout/CustomGoogleAnalytics.tsx b/apps/stats-web/src/components/layout/CustomGoogleAnalytics.tsx
@@ -3,7 +3,7 @@
 import { useReportWebVitals } from "next/web-vitals";
 import { event, GoogleAnalytics as GAnalytics } from "nextjs-google-analytics";
 
-import { isProd } from "@/lib/constants";
+import { browserEnvConfig } from "@/config/browser-env.config";
 
 export default function GoogleAnalytics() {
   useReportWebVitals(({ id, name, label, value }) => {
@@ -15,5 +15,5 @@ export default function GoogleAnalytics() {
     });
   });
 
-  return <>{isProd && <GAnalytics trackPageViews />}</>;
+  return <>{browserEnvConfig.NEXT_PUBLIC_NODE_ENV === "production" && <GAnalytics trackPageViews />}</>;
 }
diff --git a/apps/stats-web/src/config/browser-env.config.ts b/apps/stats-web/src/config/browser-env.config.ts
@@ -2,5 +2,9 @@ import { validateStaticEnvVars } from "./env-config.schema";
 
 export const browserEnvConfig = validateStaticEnvVars({
   NEXT_PUBLIC_DEFAULT_NETWORK_ID: process.env.NEXT_PUBLIC_DEFAULT_NETWORK_ID,
-  NEXT_PUBLIC_API_BASE_URL: process.env.NEXT_PUBLIC_API_BASE_URL
+  NEXT_PUBLIC_API_BASE_URL: process.env.NEXT_PUBLIC_API_BASE_URL,
+  NEXT_PUBLIC_NODE_ENV: process.env.NEXT_PUBLIC_NODE_ENV,
+  NEXT_PUBLIC_BASE_API_TESTNET_URL: process.env.NEXT_PUBLIC_BASE_API_TESTNET_URL,
+  NEXT_PUBLIC_BASE_API_SANDBOX_URL: process.env.NEXT_PUBLIC_BASE_API_SANDBOX_URL,
+  NEXT_PUBLIC_BASE_API_MAINNET_URL: process.env.NEXT_PUBLIC_BASE_API_MAINNET_URL
 });