implement env variables in graph-client

packages/apps/graph-client/.env.example

@@ -0,0 +1,2 @@
+# Depth necessary on a block to call it "confirmed", omit to use default value: 6
+CONFIRMED_CONFIRMATION_DEPTH=

packages/apps/graph-client/src/components/chainweb/chain-block/chain-block.tsx

@@ -1,3 +1,4 @@
+import { env } from '../../../utils/env';
 import { IBlock } from '../../../utils/hooks/use-parsed-blocks';
 import { Box } from '../../box';
 import { Text } from '../../text';
@@ -43,7 +44,8 @@ export const ChainBlock = (props: IChainBlockProps): JSX.Element => {
             <TimerIcon />
             <TimeTicker date={new Date(block.creationtime)} />
 
-            {block.confirmationDepth >= 6 ? (
+            {block.confirmationDepth >=
+            env('CONFIRMED_CONFIRMATION_DEPTH', 6) ? (
               <CheckCircledIcon />
             ) : (
               <InfoCircledIcon />

packages/apps/graph-client/src/utils/env.ts

@@ -0,0 +1,27 @@
+export interface IEnvInterface {
+  CONFIRMED_CONFIRMATION_DEPTH?: number;
+}
+
+type RequiredEnv = Required<IEnvInterface>;
+
+export const dotenv: IEnvInterface = {
+  CONFIRMED_CONFIRMATION_DEPTH: Number(
+    process.env.CONFIRMED_CONFIRMATION_DEPTH,
+  ),
+};
+
+export const env = <T extends keyof RequiredEnv, TDefault>(
+  key: T,
+  defaultValue: TDefault,
+): TDefault | NonNullable<RequiredEnv[T]> => {
+  console.log(dotenv[key]);
+  const falsyKey =
+    (typeof dotenv[key] === 'number' && isNaN(Number(dotenv[key]))) ||
+    dotenv[key] === null ||
+    dotenv[key] === undefined;
+  // TODO: uncomment this line when there's env vars that are strings
+  //dotenv[key] === '';
+  return falsyKey
+    ? (defaultValue as TDefault)
+    : (dotenv[key] as NonNullable<RequiredEnv[T]>);
+};