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
 

package.json

@@ -36,6 +36,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@rehooks/component-size": "^1.0.3",
     "@styled-icons/octicons": "^10.47.0",
+    "@tanstack/react-query": "^5.59.0",
     "@tsconfig/strictest": "^2.0.5",
     "@tsconfig/vite-react": "^3.0.2",
     "@vercel/analytics": "^1.3.1",

src/fetchers/env.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import { ClientEnv } from '@/utils/env/types';
+
+export const useEnv = () => {
+  return useQuery({
+    queryKey: ['clientEnv'],
+    queryFn: async (): Promise<ClientEnv> => {
+      return fetch('/api/env').then(resp => resp.json() as unknown as ClientEnv);
+    },
+    staleTime: Infinity,
+  });
+};

src/fetchers/registry.ts

@@ -0,0 +1,21 @@
+import { ChainRegistryClient, Registry } from '@penumbra-labs/registry';
+import { useQuery } from '@tanstack/react-query';
+import { useEnv } from './env';
+
+export const chainRegistryClient = new ChainRegistryClient();
+
+export const useRegistry = () => {
+  const { data: env } = useEnv();
+  const chainId = env?.PENUMBRA_CHAIN_ID;
+
+  return useQuery({
+    queryKey: ['penumbraRegistry', chainId],
+    queryFn: async (): Promise<Registry | null> => {
+      if (!chainId) {
+        return null;
+      }
+      return chainRegistryClient.remote.get(chainId);
+    },
+    staleTime: Infinity,
+  });
+};

src/fetchers/tokenAssets.ts

@@ -0,0 +1,48 @@
+import { useRegistry } from "./registry";
+import { AssetId } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
+import { decimalsFromDenomUnits, imagePathFromAssetImages } from '@/old/utils/token/tokenFetch'
+import { uint8ArrayToBase64, base64ToUint8Array } from '@/old/utils/math/base64';
+import { Token } from '@/old/utils/types/token';
+
+export const useTokenAssets = (): Token[] => {
+  const { data: registry } = useRegistry();
+  if (!registry) {
+    return [];
+  }
+
+  const assets = registry.getAllAssets();
+
+  return assets
+    .filter(asset => asset.penumbraAssetId && !asset.display.startsWith('delegation_'))
+    .map(asset => {
+      const displayParts = asset.display.split('/');
+      return {
+        decimals: decimalsFromDenomUnits(asset.denomUnits),
+        display: displayParts[displayParts.length - 1] ?? '',
+        symbol: asset.symbol,
+        inner: asset.penumbraAssetId?.inner && uint8ArrayToBase64(asset.penumbraAssetId.inner),
+        imagePath: imagePathFromAssetImages(asset.images),
+      };
+    }) as Token[];
+};
+
+export const useTokenAsset = (tokenId: Uint8Array | string): null | Token => {
+  const { data: registry } = useRegistry();
+
+  if (!registry) {
+    return null;
+  }
+
+  const assetId: AssetId = new AssetId();
+  assetId.inner = typeof tokenId !== 'string' ? tokenId : base64ToUint8Array(tokenId);
+
+  const tokenMetadata = registry.getMetadata(assetId);
+  const displayParts = tokenMetadata.display.split('/');
+  return {
+    decimals: decimalsFromDenomUnits(tokenMetadata.denomUnits),
+    display: displayParts[displayParts.length - 1] ?? '',
+    symbol: tokenMetadata.symbol,
+    inner: typeof tokenId !== 'string' ? uint8ArrayToBase64(tokenId) : tokenId,
+    imagePath: imagePathFromAssetImages(tokenMetadata.images),
+  };
+}

src/old/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 "@/old/utils/configConstants";
+import { useEnv } from "@/fetchers/env";
 
 interface CopyTxToClipboardProps {
   txHash: string;
@@ -14,6 +14,7 @@ const CopyTxToClipboard: FC<CopyTxToClipboardProps> = ({
   txHash,
   clipboardPopupText,
 }) => {
+  const env = useEnv();
   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={`${env?.PENUMBRA_CUILOA_URL}/transaction/${txHash}`}
         target="_blank"
         rel="noreferrer"
         style={{

src/old/components/liquidityPositions/currentStatus.tsx

@@ -12,25 +12,14 @@ import { fetchTokenAsset } from "@/old/utils/token/tokenFetch";
 import BigNumber from "bignumber.js";
 import { CopyIcon } from "@radix-ui/react-icons";
 import { Token } from "@/old/utils/types/token";
+import { useTokenAsset } from "@/fetchers/tokenAssets";
 
 interface CurrentLPStatusProps {
   nftId: string;
   position: Position;
 }
 
-const CurrentLPStatus = ({ nftId, position }: CurrentLPStatusProps) => {
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [isCopied, setIsCopied] = useState<boolean>(false);
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(nftId).then(() => {
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 1500); // Hide popup after 1.5 seconds
-    });
-  };
-
-  // First process position to human readable pieces
-
+function getStatusText(position): string {
   // Get status
   const status = (position.state!).state.toString();
 
@@ -57,64 +46,29 @@ const CurrentLPStatus = ({ nftId, position }: CurrentLPStatusProps) => {
       statusText = "Unknown";
   }
 
-  // Get fee tier
-  const feeTier = Number(position.phi!.component!.fee);
-
-  const asset1 = position.phi!.pair!.asset1;
-  const asset2 = position.phi!.pair!.asset2;
-
-  // States for tokens
-  const [asset1Token, setAsset1Token] = useState<Token>({
-    symbol: "UNKNOWN",
-    display: "UNKNOWN",
-    decimals: 0,
-    inner: "UNKNOWN",
-    imagePath: "UNKNOWN",
-  });
-  const [asset2Token, setAsset2Token] = useState<Token>({
-    symbol: "UNKNOWN",
-    display: "UNKNOWN",
-    decimals: 0,
-    inner: "UNKNOWN",
-    imagePath: "UNKNOWN",
-  });
-  const [assetError, setAssetError] = useState<string | undefined>();
+  return statusText;
+}
 
-  useEffect(() => {
-    // Function to fetch tokens asynchronously
-    const fetchTokens = async () => {
-      try {
-        const asset1 = position.phi!.pair!.asset1;
-        const asset2 = position.phi!.pair!.asset2;
+const CurrentLPStatus = ({ nftId, position }: CurrentLPStatusProps) => {
+  const [isCopied, setIsCopied] = useState<boolean>(false);
 
-        if (asset1?.inner) {
-          const fetchedAsset1Token = fetchTokenAsset(asset1.inner);
-          if (!fetchedAsset1Token) {
-            setAssetError("Asset 1 token not found");
-            throw new Error("Asset 1 token not found");
-          }
-          setAsset1Token(fetchedAsset1Token);
-        }
+  const handleCopy = () => {
+    navigator.clipboard.writeText(nftId).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 1500); // Hide popup after 1.5 seconds
+    });
+  };
 
-        if (asset2?.inner) {
-          const fetchedAsset2Token = fetchTokenAsset(asset2.inner);
-          if (!fetchedAsset2Token) {
-            setAssetError("Asset 2 token not found");
-            throw new Error("Asset 2 token not found");
-          }
-          setAsset2Token(fetchedAsset2Token);
-        }
-      } catch (error) {
-        console.error(error);
-      }
-    };
+  // First process position to human readable pieces
+  const statusText = getStatusText(position);
 
-    fetchTokens();
-  }, [position]);
+  // Get fee tier
+  const feeTier = Number(position.phi!.component!.fee);
 
-  if (!isLoading && (!asset1Token || !asset2Token)) {
-    return <div>{`LP exists, but ${assetError}.`}</div>;
-  }
+  const { asset1, asset2 }  = position.phi!.pair!;
+  const asset1Token = useTokenAsset(asset1.inner);
+  const asset2Token = useTokenAsset(asset2.inner);
+  const [assetError, setAssetError] = useState<string | undefined>();
 
   const reserves1 = fromBaseUnit(
     BigInt(position.reserves!.r1?.lo || 0),

src/old/components/lpAssetView.tsx

@@ -7,7 +7,7 @@ import {
   LiquidityPositionEvent,
   PositionExecutionEvent,
 } from "@/old/utils/indexer/types/lps";
-import { fetchTokenAsset } from "@/old/utils/token/tokenFetch";
+import { useTokenAsset } from "@/fetchers/tokenAssets";
 import { fromBaseUnit } from "@/old/utils/math/hiLo";
 import { base64ToUint8Array } from "@/old/utils/math/base64";
 import { Token } from "@/old/utils/types/token";
@@ -18,82 +18,17 @@ interface LPAssetViewProps {
 }
 
 const LPAssetView: FC<LPAssetViewProps> = ({ sectionTitle, lp_event }) => {
-  // States for tokens
-  const [asset1Token, setAsset1Token] = useState<Token>({
-    symbol: "UNKNOWN",
-    display: "UNKNOWN",
-    decimals: 0,
-    inner: "UNKNOWN",
-    imagePath: "UNKNOWN",
-  });
-  const [asset2Token, setAsset2Token] = useState<Token>({
-    symbol: "UNKNOWN",
-    display: "UNKNOWN",
-    decimals: 0,
-    inner: "UNKNOWN",
-    imagePath: "UNKNOWN",
-  });
-  const [assetError, setAssetError] = useState<string | undefined>();
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [reserves1, setReserves1] = useState<number>(0);
-  const [reserves2, setReserves2] = useState<number>(0);
-
-  useEffect(() => {
-    // Function to fetch tokens asynchronously
-    const fetchTokens = async () => {
-      setIsLoading(true);
-      try {
-        let asset1;
-        let asset2;
-
-        if ("lpevent_attributes" in lp_event) {
-          asset1 = base64ToUint8Array(
-            lp_event.lpevent_attributes.tradingPair!.asset1.inner
-          );
-          asset2 = base64ToUint8Array(
-            lp_event.lpevent_attributes.tradingPair!.asset2.inner
-          );
-        } else {
-          asset1 = base64ToUint8Array(
-            lp_event.execution_event_attributes.tradingPair!.asset1.inner
-          );
-          asset2 = base64ToUint8Array(
-            lp_event.execution_event_attributes.tradingPair!.asset2.inner
-          );
-        }
+  const { asset1, asset2 } = lp_event.lpevent_attributes.tradingPair
+    ?? lp_event.execution_event_attributes.tradingPair;
 
-        if (asset1) {
-          const fetchedAsset1Token = fetchTokenAsset(asset1)
-          if (!fetchedAsset1Token) {
-            setAssetError("Asset 1 token not found");
-            throw new Error("Asset 1 token not found");
-          }
-          setAsset1Token(fetchedAsset1Token);
-        }
+  const asset1Token = useTokenAsset(asset1 && base64ToUint8Array(asset1.inner));
+  const asset2Token = useTokenAsset(asset2 && base64ToUint8Array(asset2.inner));
 
-        if (asset2) {
-          const fetchedAsset2Token = fetchTokenAsset(asset2)
-          // const fetchedAsset2Token = await fetchToken(asset2);
-          if (!fetchedAsset2Token) {
-            setAssetError("Asset 2 token not found");
-            throw new Error("Asset 2 token not found");
-          }
-          setAsset2Token(fetchedAsset2Token);
-        }
-      } catch (error) {
-        console.error(error);
-      }
-      setIsLoading(false);
-    };
-
-    fetchTokens();
-  }, [lp_event]);
-
-  if (!isLoading && (!asset1Token || !asset2Token)) {
-    return <div>{`LP exists, but ${assetError}.`}</div>;
-  }
+  const [reserves1, setReserves1] = useState<number>(0);
+  const [reserves2, setReserves2] = useState<number>(0);
 
   useEffect(() => {
+    if (!asset1Token) return;
     // number to bigint
     // if undefined, default to 0
     let reserves1;