update favicon, metadata, colors lib

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "community": "ts-node -r tsconfig-paths/register -P scripts/tsconfig.json scripts/run.ts",
+    "setup_dev": "ts-node -r tsconfig-paths/register -P scripts/tsconfig.json scripts/setup_dev.ts",
     "dev": "next dev",
     "build": "next build",
     "start": "ts-node -r tsconfig-paths/register -P scripts/tsconfig.json scripts/run_local.ts",
@@ -70,4 +71,4 @@
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5"
   }
-}
+}

scripts/setup_dev.ts

@@ -0,0 +1,56 @@
+import { ethers } from "ethers";
+import { encrypt } from "@/utils/encrypt";
+import { generateBase64Key } from "@/utils/random";
+import { terminal as term } from "terminal-kit";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
+
+function terminate() {
+  term.grabInput(false);
+  setTimeout(function () {
+    process.exit();
+  }, 100);
+}
+
+term.on("key", function (name: string, _: any, __: any) {
+  if (name === "CTRL_C") {
+    terminate();
+  }
+});
+
+async function main() {
+  console.log("Hello");
+  term.clear();
+
+  term.nextLine(2);
+  term("⏳ Creating .env file...\n");
+
+  // Read the file
+  let env = readFileSync(".env.example", "utf8");
+
+  const dbSecret = generateBase64Key(32);
+  env = env.replace("<db_secret>", dbSecret);
+
+  // write .env
+  const filePath = process.cwd() + "/.env.local";
+  term("\nWriting .env file...\n");
+
+  // write the file
+  writeFileSync(filePath, env);
+
+  term(`✅ Created .env file on ${filePath}.\n`);
+
+  const pk = ethers.Wallet.createRandom().privateKey.replace("0x", "");
+
+  const b64PK = btoa(pk);
+
+  const encryptedKey = encrypt(b64PK, dbSecret);
+
+  writeFileSync(".community/config/pk", encryptedKey);
+}
+
+main()
+  .then(() => process.exit(0))
+  .catch((error) => {
+    console.error(error);
+    process.exit(1);
+  });

src/app/layout.tsx

@@ -12,8 +12,8 @@ const fontSans = FontSans({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Citizen Wallet Community Server",
+  description: "Dashboard for your community token",
 };
 
 export default function RootLayout({

src/containers/Sidebar/index.tsx

@@ -116,9 +116,14 @@ export default function Sidebar({
               confirmText="Update"
               onConfirm={handleUpdate}
             >
-              <Button disabled={updating}>
-                Update available v{newVersion}
-              </Button>
+              <>
+                <Button disabled={updating}>
+                  Update available v{newVersion}
+                </Button>
+                <Text size="1" align="center">
+                  Dashboard: v{VERSION}
+                </Text>
+              </>
             </ConfirmModal>
           )}
           {!newVersion && (
@@ -176,9 +181,15 @@ export default function Sidebar({
                   confirmText="Update"
                   onConfirm={handleUpdate}
                 >
-                  <Button disabled={updating}>
-                    Update available v{newVersion}
-                  </Button>
+                  <>
+                    <Button disabled={updating}>
+                      Update available v{newVersion}
+                    </Button>
+
+                    <Text size="1" align="center">
+                      Dashboard: v{VERSION}
+                    </Text>
+                  </>
                 </ConfirmModal>
               )}
               {!newVersion && (

src/lib/colors.ts

@@ -1,21 +1,33 @@
-function hexToRgb(hex: string): { r: number; g: number; b: number } {
+function rgbToHex(r: number, g: number, b: number): string {
+  return (
+    "#" +
+    ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()
+  );
+}
+
+export function darkenHexColor(hex: string, percent: number): string {
+  let [r, g, b] = hexToRgb(hex);
+  r = Math.max(0, Math.min(255, r - (r * percent) / 100));
+  g = Math.max(0, Math.min(255, g - (g * percent) / 100));
+  b = Math.max(0, Math.min(255, b - (b * percent) / 100));
+  return rgbToHex(Math.round(r), Math.round(g), Math.round(b));
+}
+
+function hexToRgb(hex: string): [number, number, number] {
   hex = hex.replace(/^#/, "");
   const bigint = parseInt(hex, 16);
   const r = (bigint >> 16) & 255;
   const g = (bigint >> 8) & 255;
   const b = bigint & 255;
-  return { r, g, b };
+  return [r, g, b];
+}
+
+export function hexToRgba(hex: string, alpha?: number) {
+  const [r, g, b] = hexToRgb(hex);
+  return `rgba(${r}, ${g}, ${b}, ${alpha || 1})`;
 }
 
-function getLuminance({
-  r,
-  g,
-  b,
-}: {
-  r: number;
-  g: number;
-  b: number;
-}): number {
+function getLuminance(r: number, g: number, b: number): number {
   const [R, G, B] = [r, g, b].map((v) => {
     v /= 255;
     return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
@@ -26,7 +38,7 @@ function getLuminance({
 // Returns the text color that should be used based on the luminosity of the background color
 export function getTextColor(hex: string): "black" | "white" {
   const rgb = hexToRgb(hex);
-  const luminance = getLuminance(rgb);
+  const luminance = getLuminance(...rgb);
   // Use a threshold of 0.5 for luminance
   return luminance > 0.5 ? "black" : "white";
 }

src/services/app/index.ts

@@ -34,7 +34,11 @@ export const downloadApp = () => {
 
 export const appProcessId = (): string | undefined => {
   try {
-    const command = "lsof -i :3002 -t";
+    // for some reason, lsof -i :3002 doesn't return the node process
+    // we could use `fuser 3002/tcp` but it's not available on all systems
+    // the following command works on linux and mac
+    const command =
+      "ps -eo pid,args | grep 3002 | head -n 1 | awk '{print $1}'";
     const pid = execSync(command).toString().trim();
 
     return pid;