web-app env-less build

web-app/.env.example

@@ -1,4 +1,2 @@
 VITE_API_HOST="http://localhost:3000"
-VITE_DATA_API_HOST="http://localhost:6379"
-VITE_POSTHOG_KEY=""
-VITE_POSTHOG_HOST="https://eu.posthog.com"
+VITE_DATA_API_HOST="http://localhost:4000"

web-app/docker/Dockerfile

@@ -1,3 +1,4 @@
+:q
 #########################################
 #              FIRST STAGE              #
 #########################################
@@ -8,9 +9,6 @@ WORKDIR /app
 ARG CI_COMMIT_SHA=""
 ENV VITE_CI_COMMIT_SHA $CI_COMMIT_SHA
 
-ENV VITE_API_HOST "https://api.0l.fyi"
-ENV VITE_DATA_API_HOST="https://data.0l.fyi"
-
 COPY ./package.json ./package-lock.json ./
 RUN npm ci
 COPY ./ ./

web-app/src/config.ts

@@ -0,0 +1,33 @@
+const API_HOST: string = import.meta.env.VITE_API_HOST;
+const VITE_DATA_API_HOST: string = import.meta.env.VITE_DATA_API_HOST;
+
+export interface Config {
+  apiHost: string;
+  dataApiHost: string;
+}
+
+const configMap = new Map<string, Config>([
+  [
+    '0l.fyi',
+    {
+      apiHost: 'https://api.0l.fyi',
+      dataApiHost: 'https://data.0l.fyi',
+    },
+  ],
+  [
+    'canary.0l.fyi',
+    {
+      apiHost: 'https://canary.api.0l.fyi',
+      dataApiHost: 'https://canary.data.0l.fyi',
+    },
+  ],
+  [
+    'localhost',
+    {
+      apiHost: API_HOST,
+      dataApiHost: VITE_DATA_API_HOST,
+    },
+  ],
+]);
+
+export const config = configMap.get(window.location.hostname) ?? configMap.get('0l.fyi')!;

web-app/src/main.tsx

@@ -9,10 +9,11 @@ import App from './modules/core/App';
 
 import './index.css';
 
-const { VITE_POSTHOG_KEY, VITE_POSTHOG_HOST } = import.meta.env;
+const VITE_POSTHOG_KEY = "phc_hPZOabiIQet1rsxRGAELYmKy8eByxgklujcj3rTz4cd";
+const VITE_POSTHOG_HOST = "https://eu.posthog.com";
 
 const PostHogProviderWrapper = ({ children }: PropsWithChildren) => {
-  if (VITE_POSTHOG_KEY && VITE_POSTHOG_HOST) {
+  if (window.location.host === '0l.fyi') {
     posthog.init(VITE_POSTHOG_KEY, {
       api_host: VITE_POSTHOG_HOST,
     });

web-app/src/modules/core/apollo.tsx

@@ -2,11 +2,11 @@ import { ApolloClient, InMemoryCache, split, HttpLink } from '@apollo/client';
 import { getMainDefinition } from '@apollo/client/utilities';
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
 import { createClient } from 'graphql-ws';
+import { config } from '../../config';
 
-const API_HOST: string = import.meta.env.VITE_API_HOST;
-const wsHost = API_HOST.startsWith('https://')
-  ? `wss://${API_HOST.substring('https://'.length)}/graphql`
-  : `ws://${API_HOST.substring('http://'.length)}/graphql`;
+const wsHost = config.apiHost.startsWith('https://')
+  ? `wss://${config.apiHost.substring('https://'.length)}/graphql`
+  : `ws://${config.apiHost.substring('http://'.length)}/graphql`;
 
 const wsLink = new GraphQLWsLink(
   createClient({
@@ -15,7 +15,7 @@ const wsLink = new GraphQLWsLink(
 );
 
 const httpLink = new HttpLink({
-  uri: `${import.meta.env.VITE_API_HOST}/graphql`,
+  uri: `${config.apiHost}/graphql`,
 });
 
 const splitLink = split(

web-app/src/modules/core/routes/Account/HistoricalBalance.tsx

@@ -3,6 +3,8 @@ import clsx from "clsx";
 import axios from "axios";
 import ReactECharts from "echarts-for-react";
 
+import { config } from "../../../../config";
+
 interface Props {
   address: string;
 }
@@ -18,7 +20,7 @@ const HistoricalBalance: FC<Props> = ({ address }) => {
         unlocked: number[],
         locked: number[],
       }>({
-        url: `${import.meta.env.VITE_DATA_API_HOST}/historical-balance/${address}`,
+        url: `${config.dataApiHost}/historical-balance/${address}`,
       });
 
       const historicalBalance = res.data.balance.map((it, index) => [

web-app/src/modules/core/routes/CirculatingSupply/CirculatingSupply.tsx

@@ -3,13 +3,15 @@ import axios from "axios";
 import ReactECharts from "echarts-for-react";
 import clsx from "clsx";
 
+import { config } from "../../../../config";
+
 const CirculatingSupply: FC = () => {
   const [options, setOptions] = useState<any>();
 
   useEffect(() => {
     const load = async () => {
       const res = await axios<[number, number][]>({
-        url: `${import.meta.env.VITE_DATA_API_HOST}/locked-coins`,
+        url: `${config.dataApiHost}/locked-coins`,
       });
 
       const data = res.data.map((it ) => [

web-app/src/modules/core/routes/Stats/Stats.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useState } from "react";
 import ReactECharts from "echarts-for-react";
 
+import { config } from "../../../../config";
 import Money from "../../../ui/Money";
 import ChartComponent from "./ChartComponent";
 import StatItem from "./components/StatItem";
 import StatsContainer from "./components/StatsContainer";
 import Page from "../../../ui/Page";
 
 const getData = async () => {
-  const res = await fetch(`${import.meta.env.VITE_API_HOST}/stats`);
+  const res = await fetch(`${config.apiHost}/stats`);
   const data = await res.json();
   return data;
 };

web-app/src/modules/core/routes/TotalSupply/TotalSupply.tsx

@@ -2,14 +2,15 @@ import { FC, useEffect, useState } from "react";
 import axios from "axios";
 import ReactECharts from "echarts-for-react";
 import clsx from "clsx";
+import { config } from "../../../../config";
 
 const TotalSupply: FC = () => {
   const [options, setOptions] = useState<any>();
 
   useEffect(() => {
     const load = async () => {
       const res = await axios<[number, number][]>({
-        url: `${import.meta.env.VITE_DATA_API_HOST}/total-supply`,
+        url: `${config.dataApiHost}/total-supply`,
       });
 
       const data = res.data.map((it) => [it[0] * 1e3, it[1]]);