Dynamic client side envs 2

.env.example

@@ -0,0 +1,5 @@
+PENUMBRA_GRPC_ENDPOINT=
+PENUMBRA_INDEXER_ENDPOINT=
+PENUMBRA_INDEXER_CA_CERT=
+PENUMBRA_CHAIN_ID=
+PENUMBRA_CUILOA_URL=

README.md

@@ -26,7 +26,7 @@ or plug in credentials for an already running database via environment variables
 # add these to e.g. `.envrc`:
 export PENUMBRA_GRPC_ENDPOINT="https://testnet.plinfra.net"
 export PENUMBRA_INDEXER_ENDPOINT="postgresql://<PGUSER>:<PGPASS>@<PGHOST>:<PGPORT>/<PGDATABASE>?sslmode=require""
-export NEXT_PUBLIC_CHAIN_ID="penumbra-testnet-phobos-2"
+export PENUMBRA_CHAIN_ID="penumbra-testnet-phobos-2"
 # optional: if you see "self-signed certificate in certificate chain" errors,
 # you'll likely need to export a `ca-cert.pem` file for the DB TLS.
 # export PENUMBRA_INDEXER_CA_CERT="$(cat ca-cert.pem)"
@@ -49,8 +49,8 @@ you'll want to set are:
   * `PENUMBRA_GRPC_ENDPOINT`: the URL to a remote node's `pd` gRPC service
   * `PENUMBRA_INDEXER_ENDPOINT`: the URL to a Postgre database containing ABCI events
   * `PENUMBRA_INDEXER_CA_CERT`: optional; if set, the database connection will use the provided certificate authority when validating TLS
-  * `NEXT_PUBLIC_CHAIN_ID`: the chain id for the network being indexed, controls asset-registry lookups
-  * `NEXT_PUBLIC_CUILOA_URL`: the URL for a block-explorer application, for generating URLs for more block/transaction info
+  * `PENUMBRA_CHAIN_ID`: the chain id for the network being indexed, controls asset-registry lookups
+  * `PENUMBRA_CUILOA_URL`: the URL for a block-explorer application, for generating URLs for more block/transaction info
 
 ## Name
 

src/components/copiedTx.tsx

@@ -3,7 +3,7 @@
 import React, { FC, useState } from "react";
 import { CopyIcon } from "@radix-ui/react-icons";
 import { HStack } from "@chakra-ui/react";
-import { Constants } from "@/utils/configConstants.ts";
+import { useEnvContext } from '@/utils/env/context';
 
 interface CopyTxToClipboardProps {
   txHash: string;
@@ -14,6 +14,7 @@ const CopyTxToClipboard: FC<CopyTxToClipboardProps> = ({
   txHash,
   clipboardPopupText,
 }) => {
+  const envs = useEnvContext();
   const [isCopied, setIsCopied] = useState(false);
 
   const handleCopy = () => {
@@ -26,7 +27,7 @@ const CopyTxToClipboard: FC<CopyTxToClipboardProps> = ({
   return (
     <HStack align={"center"} spacing={".5em"}>
       <a
-        href={`${Constants.cuiloaUrl}/transaction/${txHash}`}
+        href={`${envs.PENUMBRA_CUILOA_URL}/transaction/${txHash}`}
         target="_blank"
         rel="noreferrer"
         style={{

src/components/liquidityPositions/currentStatus.tsx

@@ -8,7 +8,7 @@ import {
 } from "@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb";
 import { fromBaseUnit } from "../../utils/math/hiLo";
 import { uint8ArrayToBase64 } from "../../utils/math/base64";
-import { fetchTokenAsset } from "../../utils/token/tokenFetch";
+import { useFetchTokenAsset } from "../../utils/token/tokenFetch";
 import BigNumber from "bignumber.js";
 import { CopyIcon } from "@radix-ui/react-icons";
 import { Token } from "@/utils/types/token";
@@ -21,6 +21,7 @@ interface CurrentLPStatusProps {
 const CurrentLPStatus = ({ nftId, position }: CurrentLPStatusProps) => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [isCopied, setIsCopied] = useState<boolean>(false);
+  const fetchTokenAsset = useFetchTokenAsset();
 
   const handleCopy = () => {
     navigator.clipboard.writeText(nftId).then(() => {

src/components/lpAssetView.tsx

@@ -7,7 +7,7 @@ import {
   LiquidityPositionEvent,
   PositionExecutionEvent,
 } from "@/utils/indexer/types/lps";
-import { fetchTokenAsset } from "@/utils/token/tokenFetch";
+import { useFetchTokenAsset } from "@/utils/token/tokenFetch";
 import { fromBaseUnit } from "@/utils/math/hiLo";
 import { base64ToUint8Array } from "@/utils/math/base64";
 import { Token } from "@/utils/types/token";
@@ -37,6 +37,7 @@ const LPAssetView: FC<LPAssetViewProps> = ({ sectionTitle, lp_event }) => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [reserves1, setReserves1] = useState<number>(0);
   const [reserves2, setReserves2] = useState<number>(0);
+  const fetchTokenAsset = useFetchTokenAsset();
 
   useEffect(() => {
     // Function to fetch tokens asynchronously

src/components/pairSelector.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Box, Text, Flex } from '@chakra-ui/react';
-import { fetchAllTokenAssets } from '@/utils/token/tokenFetch';
+import { useTokenAssets } from '@/utils/token/tokenFetch';
 import OutsideClickHandler from 'react-outside-click-handler';
 import { Token } from '@/utils/types/token';
 
@@ -15,13 +15,13 @@ export default function PairSelector({
   setShow: (show: boolean) => void;
   onSelect: (assets: [Token, Token]) => void;
 }) {
+  const tokenAssetsList = useTokenAssets();
   const [tokenAssets, setTokenAssets] = useState<Record<string, Token>>({});
   const [selectedAssets, setSelectedAssets] = useState<Token[]>([]);
 
   useEffect(() => {
-    const tokenAssets = fetchAllTokenAssets();
-    setTokenAssets(Object.fromEntries(tokenAssets.map(asset => [asset.symbol, asset])));
-  }, []);
+    setTokenAssets(Object.fromEntries(tokenAssetsList.map(asset => [asset.symbol, asset])));
+  }, [tokenAssetsList]);
 
   useEffect(() => {
     setSelectedAssets([]);

src/components/swaps/index.tsx

@@ -8,7 +8,7 @@ import {
   SwapExecution,
   SwapExecution_Trace,
 } from "@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb";
-import { fetchAllTokenAssets } from "@/utils/token/tokenFetch";
+import { useTokenAssets } from "@/utils/token/tokenFetch";
 import { Token } from "@/utils/types/token";
 import { LoadingSpinner } from "@/components/util/loadingSpinner";
 
@@ -26,6 +26,7 @@ export default function Swaps() {
     Record<string, Token>
   >({});
   const [isLoading, setIsLoading] = useState(true);
+  const tokenAssets = useTokenAssets();
 
   useEffect(() => {
     const fetchData = async () => {
@@ -72,7 +73,6 @@ export default function Swaps() {
 
           setSwapExecutions(swaps as SwapExecution[]);
 
-          const tokenAssets = fetchAllTokenAssets();
           const metadataByAssetId: Record<string, Token> = {};
           tokenAssets.forEach((asset) => {
             metadataByAssetId[asset.inner] = {

src/pages/_app.tsx

@@ -8,6 +8,7 @@ import { Analytics } from "@vercel/analytics/react"
 import { inject } from '@vercel/analytics';
 import { SpeedInsights } from "@vercel/speed-insights/next"
 import { injectSpeedInsights } from '@vercel/speed-insights';
+import { EnvContext } from '@/utils/env/context';
 
 function app({ Component, pageProps }: AppProps) {
   // Inject the analytics script
@@ -31,9 +32,11 @@ function app({ Component, pageProps }: AppProps) {
   });
   return (
     <ChakraProvider theme={theme}>
-      <Analytics />
-      <SpeedInsights />
-      <Component {...pageProps} />
+      <EnvContext.Provider value={pageProps.envs}>
+        <Analytics />
+        <SpeedInsights />
+        <Component {...pageProps} />
+      </EnvContext.Provider>
     </ChakraProvider>
   );
 }

src/pages/api/lp/positionsByPrice/[...params].ts

@@ -31,7 +31,7 @@ export default async function positionsByPriceHandler(
     }
 
     // Get token 1 & 2
-    const tokenAssets = fetchAllTokenAssets();
+    const tokenAssets = fetchAllTokenAssets(process.env.PENUMBRA_CHAIN_ID);
     const asset1Token = tokenAssets.find(
       (x) => x.display.toLocaleLowerCase() === token1.toLocaleLowerCase()
     );

src/pages/api/ohlc/[...params].ts

@@ -29,7 +29,7 @@ export default async function candleStickData(
   const limit = params[3] || null;
 
   try {
-    const tokenAssets = fetchAllTokenAssets();
+    const tokenAssets = fetchAllTokenAssets(process.env.PENUMBRA_CHAIN_ID);
     if (!startHeight || !tokenIn || !tokenOut || !limit) {
       res.status(400).json({ error: "Invalid query parameters" }); return;
     }

src/pages/api/simulations/[...params].ts

@@ -41,7 +41,7 @@ export default async function simulationHandler(
     }
 
     // Get token 1 & 2
-    const tokenAssets = fetchAllTokenAssets();
+    const tokenAssets = fetchAllTokenAssets(process.env.PENUMBRA_CHAIN_ID);
     const asset1Token = tokenAssets.find(
       (x) => x.display.toLocaleLowerCase() === token1.toLocaleLowerCase()
     );

src/pages/block/[block_height].tsx

@@ -16,7 +16,6 @@ import { BlockDetailedSummaryData } from "@/utils/types/block";
 import { BlockInfo, LiquidityPositionEvent } from "@/utils/indexer/types/lps";
 import { SwapExecutionWithBlockHeight } from "@/utils/protos/types/DexQueryServiceClientInterface";
 import { LoadingSpinner } from "@/components/util/loadingSpinner";
-import { Constants } from "@/utils/configConstants.ts";
 import { formatTimestampShort } from "@/components/blockTimestamp";
 import { AddIcon, MinusIcon } from "@chakra-ui/icons";
 import { innerToBech32Address } from "@/utils/math/bech32";
@@ -25,9 +24,11 @@ import {
   SwapExecution_Trace,
 } from "@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb";
 import BigNumber from "bignumber.js";
-import { fetchAllTokenAssets } from "@/utils/token/tokenFetch";
+import { useTokenAssets } from "@/utils/token/tokenFetch";
 import { Token } from "@/utils/types/token";
 import { fromBaseUnit } from "@/utils/math/hiLo";
+import { getClientSideEnvs } from "@/utils/env/getClientSideEnvs";
+import { useEnvContext } from "@/utils/env/context";
 
 export const Price = ({
   trace,
@@ -438,8 +439,9 @@ export default function Block() {
   }) => {
     // ! Expand default
     const [isExpanded, setIsExpanded] = useState(false); // EXPAND
-    const tokenAssets = fetchAllTokenAssets();
+    const tokenAssets = useTokenAssets();
     const metadataByAssetId: Record<string, Token> = {};
+    const envs = useEnvContext();
     tokenAssets.forEach((asset) => {
       metadataByAssetId[asset.inner] = {
         symbol: asset.symbol,
@@ -653,7 +655,7 @@ export default function Block() {
             </Text>
             <Text>
               <a
-                href={Constants.cuiloaUrl + "/block/" + blockHeight}
+                href={envs.PENUMBRA_CUILOA_URL + "/block/" + blockHeight}
                 target="_blank"
                 rel="noreferrer"
                 style={{
@@ -704,3 +706,13 @@ export default function Block() {
     </Layout>
   );
 }
+
+export async function getServerSideProps() {
+  const envs = getClientSideEnvs();
+
+  return {
+    props: {
+      envs,
+    },
+  };
+}

src/pages/explorer/index.tsx

@@ -5,6 +5,7 @@ import Layout from "../../components/layout";
 import { LPSearchBar } from "../../components/lpSearchBar";
 import Blocks from '../../components/blocks'
 import Swaps from '../../components/swaps'
+import { getClientSideEnvs } from "@/utils/env/getClientSideEnvs";
 
 export default function Explorer() {
   return (
@@ -33,4 +34,14 @@ export default function Explorer() {
       </Box>
     </Layout>
   );
+}
+
+export async function getServerSideProps() {
+  const envs = getClientSideEnvs();
+
+  return {
+    props: {
+      envs,
+    },
+  };
 }

src/pages/lp/[lp_nft_id].tsx

@@ -17,6 +17,7 @@ import {
 import TimelinePosition from "@/components/liquidityPositions/timelinePosition";
 import ExecutionEvent from "@/components/liquidityPositions/executionEvent";
 import { ChevronDownIcon } from "@chakra-ui/icons";
+import { getClientSideEnvs } from "@/utils/env/getClientSideEnvs";
 
 export default function LP() {
   const [isLoading, setIsLoading] = useState(true);
@@ -359,3 +360,13 @@ export default function LP() {
     </Layout>
   );
 }
+
+export async function getServerSideProps() {
+  const envs = getClientSideEnvs();
+
+  return {
+    props: {
+      envs,
+    },
+  };
+}

src/pages/lp/utils.tsx

@@ -6,6 +6,7 @@ import React, { useState } from "react";
 import Layout from "../../components/layout";
 import { VStack, Text, Center, HStack, Input, Button } from "@chakra-ui/react";
 import { innerToBech32Address, bech32ToInner } from "../../utils/math/bech32";
+import { getClientSideEnvs } from "@/utils/env/getClientSideEnvs";
 
 export default function Utils() {
   const [innerAddress, setInnerAddress] = useState("");
@@ -64,4 +65,14 @@ export default function Utils() {
       </Center>
     </Layout>
   );
+}
+
+export async function getServerSideProps() {
+  const envs = getClientSideEnvs();
+
+  return {
+    props: {
+      envs,
+    },
+  };
 }

src/pages/pair/[...params].tsx

@@ -29,7 +29,8 @@ import DepthChart from "@/components/charts/depthChart";
 import OHLCChart from "@/components/charts/ohlcChart";
 import BuySellChart from "@/components/charts/buySellChart";
 import { Token } from "@/utils/types/token";
-import { fetchAllTokenAssets } from "@/utils/token/tokenFetch";
+import { useTokenAssets } from "@/utils/token/tokenFetch";
+import { getClientSideEnvs } from "@/utils/env/getClientSideEnvs";
 // TODO: Better parameter check
 
 // ! Important note: 'sell' side here refers to selling asset1 for asset2, so its really DEMAND for buying asset 1, anc vice versa for 'buy' side
@@ -41,6 +42,7 @@ export default function TradingPairs() {
   const [error, setError] = useState<string | undefined>();
   const searchParams = useSearchParams();
   const [activeChart, setActiveChart] = useState<"Depth" | "OHLC">("Depth");
+  const tokenAssets = useTokenAssets();
 
   // Pairs are in the form of baseToken:quoteToken
   const router = useRouter();
@@ -140,7 +142,6 @@ export default function TradingPairs() {
     setIsLoading(true);
 
     // Get token 1 & 2
-    const tokenAssets = fetchAllTokenAssets();
     const asset1Token = tokenAssets.find(
       (x) => x.display.toLocaleLowerCase() === token1Symbol.toLocaleLowerCase()
     );
@@ -248,7 +249,6 @@ export default function TradingPairs() {
 
     try {
       // Get token 1 & 2
-      const tokenAssets = fetchAllTokenAssets();
       const asset1Token = tokenAssets.find(
         (x) =>
           x.display.toLocaleLowerCase() === token1Symbol.toLocaleLowerCase()
@@ -755,3 +755,13 @@ export default function TradingPairs() {
     </Layout>
   );
 }
+
+export async function getServerSideProps() {
+  const envs = getClientSideEnvs();
+
+  return {
+    props: {
+      envs,
+    },
+  };
+}