From b26f31e4d821c7de669d0c08df8abe5cae1a5ad7 Mon Sep 17 00:00:00 2001
From: Derrick Hammer <derrick@derrickhammer.com>
Date: Thu, 12 Oct 2023 15:01:18 -0400
Subject: [PATCH] refactor: camelcase network types

---
 npm-shrinkwrap.json                           | 28 ++++++++++++++++---
 package.json                                  |  1 +
 .../lume/LumeDashboard/LumeDashboard.tsx      |  4 ++-
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index d554ecd..5307d04 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -14,6 +14,7 @@
                 "@radix-ui/react-icons": "^1.3.0",
                 "@radix-ui/react-slot": "^1.0.2",
                 "@scure/bip39": "^1.2.1",
+                "camelcase": "^8.0.0",
                 "class-variance-authority": "^0.7.0",
                 "clsx": "^2.0.0",
                 "framer-motion": "^10.16.4",
@@ -2908,6 +2909,14 @@
                 "node": ">=8"
             }
         },
+        "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
+            "version": "5.3.1",
+            "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+            "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -9706,11 +9715,14 @@
             }
         },
         "node_modules/camelcase": {
-            "version": "5.3.1",
-            "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-            "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-8.0.0.tgz",
+            "integrity": "sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==",
             "engines": {
-                "node": ">=6"
+                "node": ">=16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
             }
         },
         "node_modules/camelcase-css": {
@@ -9738,6 +9750,14 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/camelcase-keys/node_modules/camelcase": {
+            "version": "5.3.1",
+            "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+            "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/caniuse-lite": {
             "version": "1.0.30001546",
             "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001546.tgz",
diff --git a/package.json b/package.json
index 8ea7bf7..ade8e5d 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-slot": "^1.0.2",
         "@scure/bip39": "^1.2.1",
+        "camelcase": "^8.0.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
         "framer-motion": "^10.16.4",
diff --git a/src/components/lume/LumeDashboard/LumeDashboard.tsx b/src/components/lume/LumeDashboard/LumeDashboard.tsx
index f1b065a..0a8d5c3 100644
--- a/src/components/lume/LumeDashboard/LumeDashboard.tsx
+++ b/src/components/lume/LumeDashboard/LumeDashboard.tsx
@@ -5,6 +5,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "../../utils";
 import { useState, useEffect } from "react";
 import React from "react";
+import camelCase from "camelcase";
 
 const SYNCSTATE_TO_TEXT: Record<Network["syncState"], string> = {
   done: "Synced",
@@ -96,12 +97,13 @@ const chainIndicatorVariant = cva("chainIndicatorVariant", {
     },
   },
 });
+
 const NetworkIndicator = ({ network }: { network: Network }) => {
   return (
     <div key={network.id} className="flex flex-row gap-x-2 items-center ">
       <CircularProgress chain={network} />
       <div className="flex flex-col">
-        <span>{network.name}</span>
+        <span>{camelCase(network.name)}</span>
         <span
           className={cn([
             "text-[12px] -mt-1",