Use next-runtime-env package

README.md

@@ -42,7 +42,7 @@ Copy the `.env.sample` file and rename it to `.env.local`
 
 ### 2. Run a local cosmos-sdk Simapp instance
 
-It's recommended that you make your simapp instance mimic the denomination of cosmoshub-4 (`uatom`). Put the local address of your node as the value for `NEXT_PUBLIC_NODE_ADDRESSES` in your `.env.local` file.
+It's recommended that you make your simapp instance mimic the denomination of cosmoshub-4 (`uatom`). Put the local address of your node as the value for `NEXT_PUBLIC_NODE_ADDRESS` in your `.env.local` file.
 
 A more in depth tutorial on this is coming soon :)
 

components/ChainConnect/DialogButton.tsx

@@ -1,5 +1,6 @@
 import { useChains } from "@/context/ChainsContext";
 import { isChainInfoFilled } from "@/context/ChainsContext/helpers";
+import { env } from 'next-runtime-env';
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { DialogTrigger } from "../ui/dialog";
 import { Skeleton } from "../ui/skeleton";
@@ -26,7 +27,8 @@ export function ChainHeader() {
 }
 
 export default function DialogButton() {
-  const showChainSelect = process.env.NEXT_PUBLIC_MULTICHAIN?.toLowerCase() === "true";
+  console.log("MULTICHAIN PUBLIC DIALOG BUTTION",env('NEXT_PUBLIC_MULTICHAIN'));
+  const showChainSelect = env('NEXT_PUBLIC_MULTICHAIN')?.toLowerCase() === "true";
 
   return showChainSelect ? (
     <DialogTrigger>

components/head.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { PublicEnvScript } from 'next-runtime-env';
 import NextHead from "next/head";
 import { string } from "prop-types";
 
@@ -20,6 +21,7 @@ const Head = (props: Props) => (
     <meta property="og:url" content={props.url || defaultOGURL} />
     <meta property="og:title" content={props.title || ""} />
     <meta property="og:description" content={props.description || defaultDescription} />
+    <PublicEnvScript />
   </NextHead>
 );
 

context/ChainsContext/index.tsx

@@ -3,7 +3,7 @@ import { toastError } from "@/lib/utils";
 import { ReactNode, createContext, useContext, useEffect, useReducer } from "react";
 import { emptyChain, isChainInfoFilled, setChain, setChains, setChainsError } from "./helpers";
 import { getChain, getNodeFromArray, useChainsFromRegistry } from "./service";
-import { addLocalChainInStorage, addRecentChainNameInStorage, getChainFromEnvfile, setChainInUrl } from "./storage";
+import { addLocalChainInStorage, addRecentChainNameInStorage, setChainInUrl } from "./storage";
 import { Action, ChainsContextType, Dispatch, State } from "./types";
 
 const ChainsContext = createContext<ChainsContextType | undefined>(undefined);
@@ -61,8 +61,6 @@ interface ChainsProviderProps {
   readonly children: ReactNode;
 }
 
-const envfileChain = getChainFromEnvfile('');
-
 export const ChainsProvider = ({ children }: ChainsProviderProps) => {
   const [state, dispatch] = useReducer(chainsReducer, {
     chain: emptyChain,
@@ -72,10 +70,6 @@ export const ChainsProvider = ({ children }: ChainsProviderProps) => {
   });
 
   const { chainItems, chainItemsError } = useChainsFromRegistry();
-  
-  if (isChainInfoFilled(envfileChain)) {
-    chainItems.localnets.set(envfileChain.registryName, envfileChain);
-  }
 
   useEffect(() => {
     setChains(dispatch, chainItems);

context/ChainsContext/service.tsx

@@ -14,6 +14,7 @@ import {
   setShaInStorage,
 } from "./storage";
 import { ChainItems } from "./types";
+import { env } from "next-runtime-env";
 
 export const useChainsFromRegistry = () => {
   const [chainItems, setChainItems] = useState<ChainItems>({
@@ -73,7 +74,9 @@ export const useChainsFromRegistry = () => {
 export const getNodeFromArray = async (nodeArray: readonly string[]) => {
   let secureNodes: readonly string[] = [];
 
-  if (process.env.NEXT_PUBLIC_IS_HTTP_ENABLED?.toLowerCase() === "true") {
+  console.log(env('NEXT_PUBLIC_IS_HTTP_ENABLED'));
+
+  if (env('NEXT_PUBLIC_IS_HTTP_ENABLED')?.toLowerCase() === "true") {
     // Allow all nodes, HTTP or HTTPS
     secureNodes = nodeArray;
   } else {
@@ -104,33 +107,19 @@ export const getChain = (chains: ChainItems) => {
   // Avoid app from thinking the /api route is a registryName
   const chainNameFromUrl = rootRoute === "api" ? "" : rootRoute;
 
-  // Get chain only after public chains have been fetched from registry
-  if (!(chains.mainnets.size || chains.testnets.size)) {
-    return emptyChain;
-  }
-
   const recentChain = getRecentChainFromStorage(chains);
   if (!chainNameFromUrl && isChainInfoFilled(recentChain)) {
     return recentChain;
   }
 
-  // Set chain if no reccent chain and chain name set in URL
-
-  // Check if info set in URL
   const urlChain = getChainFromUrl(chainNameFromUrl);
-  let storedChain = getChainFromStorage(chainNameFromUrl, chains);
-  let chain = { ...storedChain, ...urlChain };
-  if (isChainInfoFilled(chain)) {
-    return chain;
-  }
-
-  // Check if info set in env
   const envfileChain = getChainFromEnvfile(chainNameFromUrl);
-  storedChain = getChainFromStorage(
-    envfileChain.registryName || "cosmoshub",
+  const storedChain = getChainFromStorage(
+    chainNameFromUrl || envfileChain.registryName || "cosmoshub",
     chains,
   );
-  chain = { ...storedChain, ...envfileChain };
+
+  const chain = { ...storedChain, ...envfileChain, ...urlChain };
 
   return isChainInfoFilled(chain) ? chain : emptyChain;
 };

context/ChainsContext/storage.tsx

@@ -1,6 +1,7 @@
 import { RegistryAsset } from "@/types/chainRegistry";
 import { emptyChain } from "./helpers";
 import { ChainInfo, ChainItems, ExplorerLinks } from "./types";
+import { env } from "next-runtime-env";
 
 const registryShaStorageKey = "context-registry-sha";
 export const getShaFromStorage = () => localStorage.getItem(registryShaStorageKey);
@@ -142,30 +143,30 @@ export const getChainFromUrl = (chainName: string) => {
 };
 
 export const getChainFromEnvfile = (chainName: string) => {
-  const registryName = process.env.NEXT_PUBLIC_REGISTRY_NAME || "";
+  const registryName = env("NEXT_PUBLIC_REGISTRY_NAME") || "";
   if (chainName && registryName !== chainName) {
     return { registryName: chainName };
   }
 
-  const logo = process.env.NEXT_PUBLIC_LOGO;
-  const chainId = process.env.NEXT_PUBLIC_CHAIN_ID;
-  const chainDisplayName = process.env.NEXT_PUBLIC_CHAIN_DISPLAY_NAME;
-  const nodeAddresses = process.env.NEXT_PUBLIC_NODE_ADDRESSES;
-  const denom = process.env.NEXT_PUBLIC_DENOM;
-  const displayDenom = process.env.NEXT_PUBLIC_DISPLAY_DENOM;
-  const displayDenomExponent = process.env.NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT;
-  const assets = process.env.NEXT_PUBLIC_ASSETS;
-  const gasPrice = process.env.NEXT_PUBLIC_GAS_PRICE;
-  const addressPrefix = process.env.NEXT_PUBLIC_ADDRESS_PREFIX;
-  // An object containing link templates for txs and accounts
-  const explorerLinks = process.env.NEXT_PUBLIC_EXPLORER_LINKS;
+  const logo = env("NEXT_PUBLIC_LOGO");
+  const chainId = env("NEXT_PUBLIC_CHAIN_ID");
+  const chainDisplayName = env("NEXT_PUBLIC_CHAIN_DISPLAY_NAME");
+  const nodeAddresses = env("NEXT_PUBLIC_NODE_ADDRESSES");
+  const denom = env("NEXT_PUBLIC_DENOM");
+  const displayDenom = env("NEXT_PUBLIC_DISPLAY_DENOM");
+  const displayDenomExponent = env("NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT");
+  const assets = env("NEXT_PUBLIC_ASSETS");
+  const gasPrice = env("NEXT_PUBLIC_GAS_PRICE");
+  const addressPrefix = env("NEXT_PUBLIC_ADDRESS_PREFIX");
+  // An object containing link 'templates') for txs and accounts
+  const explorerLinks = env("NEXT_PUBLIC_EXPLORER_LINKS");
 
   const nodeAddressesValue: readonly string[] = JSON.parse(nodeAddresses || "[]");
   const assetsValue: readonly RegistryAsset[] = JSON.parse(assets || "[]");
   const explorerLinksValue: Partial<ExplorerLinks> = JSON.parse(explorerLinks || "{}");
 
   const envfileChain: Partial<ChainInfo> = {
-    registryName,
+    registryName: chainName,
     ...(logo && { logo }),
     ...(chainId && { chainId }),
     ...(chainDisplayName && { chainDisplayName }),

lib/chainRegistry.ts

@@ -11,9 +11,6 @@ const mainnetsUrl = `https://api.github.com/repos/${chainRegistryRepo}/contents`
 const testnetsUrl = `https://api.github.com/repos/${chainRegistryRepo}/contents/testnets`;
 const registryCdnUrl = `https://cdn.jsdelivr.net/gh/${chainRegistryRepo}@${repoBranch}`;
 
-const registryEnabledChains = process.env.NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS;
-const registryEnabledChainsValue: readonly string[] = JSON.parse(registryEnabledChains || "[]");
-
 const getShaFromRegistry = async () => {
   const { sha }: { sha: string } = await requestGhJson(shaUrl);
   return sha;
@@ -39,11 +36,6 @@ const getChainsFromRegistry = async () => {
       continue;
     }
 
-    // Skip if chain is not included in NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS (unset env to fetch all chains)
-    if (registryEnabledChainsValue.length && !registryEnabledChainsValue.includes(path)) {
-      continue;
-    }
-
     mainnetPromisesMap.set(path, {
       chainInfo: requestGhJson(`${registryCdnUrl}/${path}/chain.json`),
       assetList: requestGhJson(`${registryCdnUrl}/${path}/assetlist.json`),
@@ -77,11 +69,6 @@ const getChainsFromRegistry = async () => {
       continue;
     }
 
-    // Skip if chain is not included in NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS (unset env to fetch all chains)
-    if (registryEnabledChainsValue.length && !registryEnabledChainsValue.includes(path)) {
-      continue;
-    }
-
     testnetPromisesMap.set(path, {
       chainInfo: requestGhJson(`${registryCdnUrl}/${path}/chain.json`),
       assetList: requestGhJson(`${registryCdnUrl}/${path}/assetlist.json`),

package-lock.json

@@ -1,10 +1,12 @@
 {
   "name": "cosmos-multisig-ui",
+  "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cosmos-multisig-ui",
+      "version": "0.1.2",
       "dependencies": {
         "@cosmjs/amino": "^0.33.0",
         "@cosmjs/cosmwasm-stargate": "^0.33.0",
@@ -69,6 +71,7 @@
         "jest-environment-jsdom": "^29.7.0",
         "lucide-react": "^0.397.0",
         "next": "^14.2.23",
+        "next-runtime-env": "^3.3.0",
         "next-themes": "^0.3.0",
         "postcss": "8.4.38",
         "prettier": "^3.4.2",
@@ -86,6 +89,10 @@
         "typescript": "5.5.2",
         "vanilla-jsoneditor": "^0.23.7",
         "zod": "^3.23.8"
+      },
+      "devDependencies": {
+        "@import-meta-env/unplugin": "^0.6.2",
+        "dotenv": "^16.5.0"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -1414,6 +1421,32 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@import-meta-env/unplugin": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@import-meta-env/unplugin/-/unplugin-0.6.2.tgz",
+      "integrity": "sha512-m8TEQTgWekSkhlT9lkHBKQ4TDf5l8+BWvO6q/cxcsv1AvyfsOXUOHbvjhKSiVDaz/CDDCbOWc/aOAiPFRzcXGA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "dotenv": "^16.0.0",
+        "magic-string": "^0.30.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "unplugin": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "@import-meta-env/cli": "^0.7.0"
+      },
+      "peerDependenciesMeta": {
+        "@import-meta-env/cli": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -4720,9 +4753,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -6429,6 +6462,19 @@
         "node": ">=12"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
+      "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -10433,6 +10479,20 @@
         }
       }
     },
+    "node_modules/next-runtime-env": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/next-runtime-env/-/next-runtime-env-3.3.0.tgz",
+      "integrity": "sha512-JgKVnog9mNbjbjH9csVpMnz2tB2cT5sLF+7O47i6Ze/s/GoiKdV7dHhJHk1gwXpo6h5qPj5PTzryldtSjvrHuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "next": "^14",
+        "react": "^18"
+      },
+      "peerDependencies": {
+        "next": "^14",
+        "react": "^18"
+      }
+    },
     "node_modules/next-themes": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
@@ -13236,6 +13296,34 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/unplugin": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.5.tgz",
+      "integrity": "sha512-RyWSb5AHmGtjjNQ6gIlA67sHOsWpsbWpwDokLwTcejVdOjEkJZh7QKu14J00gDDVSh8kGH4KYC/TNBceXFZhtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.1",
+        "picomatch": "^4.0.2",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unplugin/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
@@ -13509,6 +13597,13 @@
         "node": ">=12"
       }
     },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/whatwg-encoding": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",

package.json

@@ -1,9 +1,9 @@
 {
   "name": "cosmos-multisig-ui",
   "private": true,
-  "version": "0.1.3",
+  "version": "0.1.2",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 7000",
     "test": "jest --watch",
     "test:ci": "jest",
     "build": "next build",
@@ -76,6 +76,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "lucide-react": "^0.397.0",
     "next": "^14.2.23",
+    "next-runtime-env": "^3.3.0",
     "next-themes": "^0.3.0",
     "postcss": "8.4.38",
     "prettier": "^3.4.2",
@@ -93,5 +94,10 @@
     "typescript": "5.5.2",
     "vanilla-jsoneditor": "^0.23.7",
     "zod": "^3.23.8"
+  },
+  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447",
+  "devDependencies": {
+    "@import-meta-env/unplugin": "^0.6.2",
+    "dotenv": "^16.5.0"
   }
 }

stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml

@@ -7,7 +7,6 @@ services:
     environment:
       DGRAPH_DOMAIN: ${DGRAPH_DOMAIN:-http://alpha:8080}
       NEXT_PUBLIC_MULTICHAIN: ${NEXT_PUBLIC_MULTICHAIN}
-      NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS: ${NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS}
       NEXT_PUBLIC_REGISTRY_NAME: ${NEXT_PUBLIC_REGISTRY_NAME}
       NEXT_PUBLIC_LOGO: ${NEXT_PUBLIC_LOGO}
       NEXT_PUBLIC_CHAIN_ID: ${NEXT_PUBLIC_CHAIN_ID}

stack-orchestrator/config/cosmos-multisig-ui/run.sh

@@ -8,7 +8,6 @@ fi
 # Export environment variables
 export DGRAPH_URL="${DGRAPH_DOMAIN}/graphql"
 export NEXT_PUBLIC_MULTICHAIN="${NEXT_PUBLIC_MULTICHAIN}"
-export NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS="${NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS}"
 export NEXT_PUBLIC_REGISTRY_NAME="${NEXT_PUBLIC_REGISTRY_NAME}"
 export NEXT_PUBLIC_LOGO="${NEXT_PUBLIC_LOGO}"
 export NEXT_PUBLIC_CHAIN_ID="${NEXT_PUBLIC_CHAIN_ID}"
@@ -26,7 +25,6 @@ echo "Using the following env variables:"
 echo "DGRAPH_DOMAIN: ${DGRAPH_DOMAIN}"
 echo "DGRAPH_URL: ${DGRAPH_URL}"
 echo "NEXT_PUBLIC_MULTICHAIN: ${NEXT_PUBLIC_MULTICHAIN}"
-echo "NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS: ${NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS}"
 echo "NEXT_PUBLIC_REGISTRY_NAME: ${NEXT_PUBLIC_REGISTRY_NAME}"
 echo "NEXT_PUBLIC_LOGO: ${NEXT_PUBLIC_LOGO}"
 echo "NEXT_PUBLIC_CHAIN_ID: ${NEXT_PUBLIC_CHAIN_ID}"

stack-orchestrator/stacks/cosmos-multisig-ui/README.md

@@ -52,9 +52,6 @@ Instructions for running the `cosmos-multisig-ui` using [laconic-so](https://git
   # Allow multiple networks/chains in app
   NEXT_PUBLIC_MULTICHAIN=
 
-  # List of public chains to show in app / or leave empty to show all chains
-  NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS=
-
   # Name of the chain registry
   NEXT_PUBLIC_REGISTRY_NAME=