Use import-meta-env package

components/ChainConnect/DialogButton.tsx

@@ -1,6 +1,5 @@
 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";
@@ -27,8 +26,8 @@ export function ChainHeader() {
 }
 
 export default function DialogButton() {
-  console.log("MULTICHAIN PUBLIC DIALOG BUTTION",env('NEXT_PUBLIC_MULTICHAIN'));
-  const showChainSelect = 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>

components/head.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { PublicEnvScript } from 'next-runtime-env';
 import NextHead from "next/head";
 import { string } from "prop-types";
 
@@ -21,7 +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} />
-    <PublicEnvScript />
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+                globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"');
+              `,
+      }}
+    />
   </NextHead>
 );
 

context/ChainsContext/service.tsx

@@ -14,7 +14,6 @@ import {
   setShaInStorage,
 } from "./storage";
 import { ChainItems } from "./types";
-import { env } from "next-runtime-env";
 
 export const useChainsFromRegistry = () => {
   const [chainItems, setChainItems] = useState<ChainItems>({
@@ -74,9 +73,7 @@ export const useChainsFromRegistry = () => {
 export const getNodeFromArray = async (nodeArray: readonly string[]) => {
   let secureNodes: readonly string[] = [];
 
-  console.log(env('NEXT_PUBLIC_IS_HTTP_ENABLED'));
-
-  if (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 {

context/ChainsContext/storage.tsx

@@ -1,7 +1,6 @@
 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);
@@ -143,23 +142,23 @@ export const getChainFromUrl = (chainName: string) => {
 };
 
 export const getChainFromEnvfile = (chainName: string) => {
-  const registryName = env("NEXT_PUBLIC_REGISTRY_NAME") || "";
+  const registryName = import.meta.env.NEXT_PUBLIC_REGISTRY_NAME || "";
   if (chainName && registryName !== chainName) {
     return { registryName: chainName };
   }
 
-  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 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 = import.meta.env.NEXT_PUBLIC_EXPLORER_LINKS;
 
   const nodeAddressesValue: readonly string[] = JSON.parse(nodeAddresses || "[]");
   const assetsValue: readonly RegistryAsset[] = JSON.parse(assets || "[]");

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,
 );
 

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;
+}

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,
   });

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;

package-lock.json

@@ -71,7 +71,6 @@
         "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",
@@ -91,8 +90,9 @@
         "zod": "^3.23.8"
       },
       "devDependencies": {
-        "@import-meta-env/unplugin": "^0.6.2",
-        "dotenv": "^16.5.0"
+        "@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": {
@@ -1421,6 +1421,163 @@
         "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",
@@ -10479,20 +10636,6 @@
         }
       }
     },
-    "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",
@@ -11512,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",
@@ -12148,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",

package.json

@@ -3,11 +3,12 @@
   "private": true,
   "version": "0.1.2",
   "scripts": {
-    "dev": "next dev -p 7000",
+    "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"
@@ -76,7 +77,6 @@
     "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",
@@ -95,9 +95,10 @@
     "vanilla-jsoneditor": "^0.23.7",
     "zod": "^3.23.8"
   },
-  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447",
   "devDependencies": {
+    "@import-meta-env/typescript": "^0.4.0",
     "@import-meta-env/unplugin": "^0.6.2",
-    "dotenv": "^16.5.0"
-  }
+    "@import-meta-env/cli": "^0.7.3"
+  },
+  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }