Use import-meta-env package

2025-06-04 12:02:24 +05:30
16 changed files with 340 additions and 71 deletions
--- a/README.md
+++ b/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 :)

--- a/components/ChainConnect/DialogButton.tsx
+++ b/components/ChainConnect/DialogButton.tsx
@ -26,7 +26,8 @@ export function ChainHeader() {
 }

 export default function DialogButton() {
-  const showChainSelect = process.env.NEXT_PUBLIC_MULTICHAIN?.toLowerCase() === "true";
+  console.log("MULTI CHIANSFOJJEPOIDJOPIJOIFJEOIWJOIEJWIOEIOJFOIEJOIFJOIPFJOIJGFOIWJOIJFOIJOIFGJOIWFJOIJFOIJROIJOIJOPIG", import.meta.env.NEXT_PUBLIC_MULTICHAIN);
+  const showChainSelect = import.meta.env.NEXT_PUBLIC_MULTICHAIN?.toLowerCase() === "true";

  return showChainSelect ? (
    <DialogTrigger>
--- a/components/head.tsx
+++ b/components/head.tsx
@ -20,6 +20,13 @@ 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} />
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+                globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"');
+              `,
+      }}
+    />
  </NextHead>
 );

--- a/context/ChainsContext/index.tsx
+++ b/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);
--- a/context/ChainsContext/service.tsx
+++ b/context/ChainsContext/service.tsx
@ -73,7 +73,7 @@ export const useChainsFromRegistry = () => {
 export const getNodeFromArray = async (nodeArray: readonly string[]) => {
  let secureNodes: readonly string[] = [];

-  if (process.env.NEXT_PUBLIC_IS_HTTP_ENABLED?.toLowerCase() === "true") {
+  if (import.meta.env.NEXT_PUBLIC_IS_HTTP_ENABLED?.toLowerCase() === "true") {
    // Allow all nodes, HTTP or HTTPS
    secureNodes = nodeArray;
  } else {
@ -104,33 +104,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;
 };
--- a/context/ChainsContext/storage.tsx
+++ b/context/ChainsContext/storage.tsx
@ -142,30 +142,30 @@ export const getChainFromUrl = (chainName: string) => {
 };

 export const getChainFromEnvfile = (chainName: string) => {
-  const registryName = process.env.NEXT_PUBLIC_REGISTRY_NAME || "";
+  const registryName = import.meta.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;
+  const logo = import.meta.env.NEXT_PUBLIC_LOGO;
+  const chainId = import.meta.env.NEXT_PUBLIC_CHAIN_ID;
+  const chainDisplayName = import.meta.env.NEXT_PUBLIC_CHAIN_DISPLAY_NAME;
+  const nodeAddresses = import.meta.env.NEXT_PUBLIC_NODE_ADDRESSES;
+  const denom = import.meta.env.NEXT_PUBLIC_DENOM;
+  const displayDenom = import.meta.env.NEXT_PUBLIC_DISPLAY_DENOM;
+  const displayDenomExponent = import.meta.env.NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT;
+  const assets = import.meta.env.NEXT_PUBLIC_ASSETS;
+  const gasPrice = import.meta.env.NEXT_PUBLIC_GAS_PRICE;
+  const addressPrefix = import.meta.env.NEXT_PUBLIC_ADDRESS_PREFIX;
  // An object containing link templates for txs and accounts
-  const explorerLinks = process.env.NEXT_PUBLIC_EXPLORER_LINKS;
+  const explorerLinks = import.meta.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 }),
--- a/graphql/index.ts
+++ b/graphql/index.ts
@ -1,9 +1,9 @@
 import { GraphQLClient } from "graphql-request";

 export const gqlClient = new GraphQLClient(
-  process.env.DGRAPH_URL || "",
-  process.env.DGRAPH_SECRET
-    ? { headers: { authorization: process.env.DGRAPH_SECRET || "" } }
+  import.meta.env.DGRAPH_URL || "",
+  import.meta.env.DGRAPH_SECRET
+    ? { headers: { authorization: import.meta.env.DGRAPH_SECRET || "" } }
    : undefined,
 );

--- a/import-meta-env.d.ts
+++ b/import-meta-env.d.ts
@ -0,0 +1,24 @@
+// Generated by '@import-meta-env/typescript'
+
+interface ImportMetaEnv {
+  readonly DGRAPH_SECRET: string;
+  readonly DGRAPH_URL: string;
+  readonly NEXT_PUBLIC_MULTICHAIN: string;
+  readonly NEXT_PUBLIC_REGISTRY_NAME: string;
+  readonly NEXT_PUBLIC_IS_HTTP_ENABLED: string;
+  readonly NEXT_PUBLIC_LOGO: string;
+  readonly NEXT_PUBLIC_CHAIN_ID: string;
+  readonly NEXT_PUBLIC_CHAIN_DISPLAY_NAME: string;
+  readonly NEXT_PUBLIC_NODE_ADDRESSES: string;
+  readonly NEXT_PUBLIC_DENOM: string;
+  readonly NEXT_PUBLIC_DISPLAY_DENOM: string;
+  readonly NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT: string;
+  readonly NEXT_PUBLIC_ASSETS: string;
+  readonly NEXT_PUBLIC_GAS_PRICE: string;
+  readonly NEXT_PUBLIC_ADDRESS_PREFIX: string;
+  readonly NEXT_PUBLIC_EXPLORER_LINKS: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
--- a/lib/chainRegistry.ts
+++ b/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`),
--- a/lib/request.ts
+++ b/lib/request.ts
@ -25,9 +25,9 @@ export const requestGhJson = (endpoint: string, { headers, ...restConfig }: Requ
 type RequestGraphQlJsonConfig = Omit<RequestInit, "body"> & { body: { query: string } };

 export const requestGraphQlJson = (config: RequestGraphQlJsonConfig) =>
-  requestJson(process.env.DGRAPH_URL || "", {
+  requestJson(import.meta.env.DGRAPH_URL || "", {
    ...config,
-    headers: process.env.DGRAPH_SECRET
-      ? { "X-Auth-Token": process.env.DGRAPH_SECRET, ...config.headers }
+    headers: import.meta.env.DGRAPH_SECRET
+      ? { "X-Auth-Token": import.meta.env.DGRAPH_SECRET, ...config.headers }
      : config.headers,
  });
--- a/next.config.js
+++ b/next.config.js
@ -1,6 +1,17 @@
 /** @type {import('next').NextConfig} */
+const { webpack } = require('@import-meta-env/unplugin');
+
 const nextConfig = {
  reactStrictMode: true,
+  webpack: (config) => {
+    config.plugins.push(
+      webpack({
+        example: '.env.sample',
+        env: '.env.local',
+      })
+    );
+    return config;
+  },
 };

 module.exports = nextConfig;
--- a/package-lock.json
+++ b/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",
@ -86,6 +88,11 @@
        "typescript": "5.5.2",
        "vanilla-jsoneditor": "^0.23.7",
        "zod": "^3.23.8"
+      },
+      "devDependencies": {
+        "@import-meta-env/cli": "^0.7.3",
+        "@import-meta-env/typescript": "^0.4.0",
+        "@import-meta-env/unplugin": "^0.6.2"
      }
    },
    "node_modules/@adobe/css-tools": {
@ -1414,6 +1421,189 @@
        "url": "https://github.com/sponsors/nzakas"
      }
    },
+    "node_modules/@import-meta-env/cli": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@import-meta-env/cli/-/cli-0.7.3.tgz",
+      "integrity": "sha512-7xSPYhpXr0tulKk7Xv332fKRmoTwNUI+6eWUwgekNeRCNUvWsy9C0MfFk2rCDc43gGDJOywb1LxulthWpxFX1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "13.1.0",
+        "dotenv": "^16.0.0",
+        "glob": "11.0.1",
+        "picocolors": "1.1.1",
+        "serialize-javascript": "6.0.2"
+      },
+      "bin": {
+        "import-meta-env": "bin/import-meta-env.js"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "@import-meta-env/babel": "^0.5.0",
+        "@import-meta-env/swc": "^0.4.5",
+        "@import-meta-env/unplugin": "^0.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@import-meta-env/babel": {
+          "optional": true
+        },
+        "@import-meta-env/swc": {
+          "optional": true
+        },
+        "@import-meta-env/unplugin": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@import-meta-env/cli/node_modules/commander": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz",
+      "integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@import-meta-env/cli/node_modules/glob": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.1.tgz",
+      "integrity": "sha512-zrQDm8XPnYEKawJScsnM0QzobJxlT/kHOOlRTio8IH/GrmxRE5fjllkzdaHclIuNjUQTJYH2xHNIGfdpJkDJUw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^4.0.1",
+        "minimatch": "^10.0.0",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^2.0.0"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@import-meta-env/cli/node_modules/jackspeak": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz",
+      "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@import-meta-env/cli/node_modules/lru-cache": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.1.0.tgz",
+      "integrity": "sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@import-meta-env/cli/node_modules/minimatch": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.1.tgz",
+      "integrity": "sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@import-meta-env/cli/node_modules/path-scurry": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz",
+      "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@import-meta-env/typescript": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@import-meta-env/typescript/-/typescript-0.4.0.tgz",
+      "integrity": "sha512-SHU8u4H/RAaJgTWPOfUKUFP5Dfg3iLy6ovCTOxqbsgOQyIfS+TgRy9EFCMxmuub1ULo77FAJ5nRwf2z3BenXsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^12.0.0",
+        "dotenv": "^16.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "import-meta-env-typescript": "bin/import-meta-env-typescript.js"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@import-meta-env/typescript/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "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 +4910,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 +6619,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",
@ -11452,6 +11655,16 @@
      ],
      "license": "MIT"
    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
    "node_modules/react": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@ -12088,6 +12301,16 @@
        "node": ">=10"
      }
    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
    "node_modules/set-cookie-parser": {
      "version": "2.7.1",
      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
@ -13236,6 +13459,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 +13760,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",
--- a/package.json
+++ b/package.json
@ -1,13 +1,14 @@
 {
  "name": "cosmos-multisig-ui",
  "private": true,
-  "version": "0.1.3",
+  "version": "0.1.2",
  "scripts": {
    "dev": "next dev",
    "test": "jest --watch",
    "test:ci": "jest",
    "build": "next build",
    "start": "next start -p 7000",
+    "set-env": "import-meta-env -x .env.sample",
    "format": "prettier --write --log-level warn \"./**/*.{js,jsx,mjs,ts,tsx}\"",
    "lint": "eslint --max-warnings 0 \"./**/*.{js,jsx,mjs,ts,tsx}\"",
    "lint:fix": "eslint --max-warnings 0 \"./**/*.{js,jsx,mjs,ts,tsx}\" --fix"
@ -93,5 +94,11 @@
    "typescript": "5.5.2",
    "vanilla-jsoneditor": "^0.23.7",
    "zod": "^3.23.8"
-  }
+  },
+  "devDependencies": {
+    "@import-meta-env/typescript": "^0.4.0",
+    "@import-meta-env/unplugin": "^0.6.2",
+    "@import-meta-env/cli": "^0.7.3"
+  },
+  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }
--- a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml
+++ b/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}
--- a/stack-orchestrator/config/cosmos-multisig-ui/run.sh
+++ b/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}"
--- a/stack-orchestrator/stacks/cosmos-multisig-ui/README.md
+++ b/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=