From c565eaca36aff6e374abd824c05783c3814f06a5 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Sat, 30 Sep 2023 12:18:49 +0200
Subject: [PATCH] fix: finish the dashboard style

---
 src/assets/lume-logo.png                      | Bin 0 -> 2592 bytes
 .../lume/LumeDashboard/LumeDashboard.tsx      |  70 +++++++++++++-----
 src/components/lume/LumeProvider.tsx          |  16 ++--
 3 files changed, 59 insertions(+), 27 deletions(-)
 create mode 100644 src/assets/lume-logo.png

diff --git a/src/assets/lume-logo.png b/src/assets/lume-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a24ad80ef777350f33dab8041c0dc6557dc1034
GIT binary patch
literal 2592
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
CYVJ?~

literal 0
HcmV?d00001

diff --git a/src/components/lume/LumeDashboard/LumeDashboard.tsx b/src/components/lume/LumeDashboard/LumeDashboard.tsx
index ccb23e4..5e80131 100644
--- a/src/components/lume/LumeDashboard/LumeDashboard.tsx
+++ b/src/components/lume/LumeDashboard/LumeDashboard.tsx
@@ -1,28 +1,64 @@
 import * as Dialog from "@radix-ui/react-dialog"
 import { Chain, useLume } from "@/components/lume/LumeProvider"
+import Logo from "@/assets/lume-logo.png"
+
+const SYNCSTATE_TO_TEXT: Record<Chain['syncState'], string> = {
+  done: 'Synced',
+  error: 'Issue',
+  syncing: 'Syncing'
+}
+
+const SYNC_STATE_TO_TW_COLOR: Record<Chain['syncState'], string> = {
+  'done': 'text-primary',
+  'error': 'text-red-500',
+  'syncing': 'text-orange-500',
+}
+
 
 const LumeDashboard = () => {
   const { chains } = useLume()
 
+  const contentChains = chains.filter(c => c.type === 'content');
+  const blockchainChains = chains.filter(c => c.type === 'blockchain');
+
   return (
     <Dialog.Root>
       <Dialog.Trigger>Open</Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" />
-        <Dialog.Content className="fixed p-5 z-50 right-0 bottom-0 top-0 w-[300px] bg-neutral-800 text-white border-black border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500">
-          <Dialog.Title>Syncing State: Connected</Dialog.Title>
-          <Dialog.Description>Network Log:</Dialog.Description>
-          {chains.map((chain) => (
-            <div key={chain.chainId}>
-              <CircularProgress chain={chain} />
+        <Dialog.Content className="fixed p-5 z-50 right-0 bottom-0 top-0 w-[300px] bg-neutral-950 text-white border-black border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500">
+          <div className="w-[calc(100%+38px)] border-b pb-3 -mx-5 px-5 border-neutral-900">
+            <img src={Logo.src} className="w-24" />
+          </div>
+          <div className="mt-4 mb-8">
+            <h2 className="text-xl mb-4"> Content </h2>
+            <div className="grid grid-cols-2">
+              {contentChains.map((chain, index) => <ChainIndicator key={`Content_ChainIndicator_${index}`} chain={chain} />)}
             </div>
-          ))}
+          </div>
+
+          <div className="mt-4 mb-8">
+            <h2 className="text-xl mb-4"> Blockchain </h2>
+            <div className="grid grid-cols-2">
+              {blockchainChains.map((chain, index) => <ChainIndicator key={`Blockchain_ChainIndicator_${index}`} chain={chain} />)}
+            </div>
+          </div>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
   )
 }
 
+const ChainIndicator = ({ chain }: { chain: Chain }) => {
+  return <div key={chain.chainId} className="flex flex-row gap-x-2 items-center ">
+    <CircularProgress chain={chain} />
+    <div className="flex flex-col">
+      <span>{chain.name}</span>
+      <span className={`text-[12px] -mt-1 ${SYNC_STATE_TO_TW_COLOR[chain.syncState]}`}> {SYNCSTATE_TO_TEXT[chain.syncState]} </span>
+    </div>
+  </div>
+}
+
 const CircularProgress = ({
   chain,
   className
@@ -35,16 +71,10 @@ const CircularProgress = ({
 
   return (
     <svg
-      className={`${className} ${
-        chain.syncState === "done"
-          ? "text-primary"
-          : chain.syncState === "error"
-          ? "text-red-600"
-          : "text-orange-500"
-      }`}
-      width="100"
-      height="100"
-      viewBox="-25 -25 250 250"
+      className={`${className} ${SYNC_STATE_TO_TW_COLOR[chain.syncState]}`}
+      width="36"
+      height="36"
+      viewBox="0 0 100 100"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       style={{ transform: "rotate(-90deg)" }}
@@ -55,7 +85,7 @@ const CircularProgress = ({
         cy="50"
         fill="transparent"
         stroke="#e0e0e0"
-        stroke-width="8px"
+        stroke-width="4px"
         stroke-dasharray="282.74px"
         stroke-dashoffset="0"
       ></circle>
@@ -64,7 +94,7 @@ const CircularProgress = ({
         cx="50"
         cy="50"
         stroke="currentColor"
-        stroke-width="8px"
+        stroke-width="4px"
         stroke-linecap="round"
         stroke-dashoffset={`${progressOffset}px`}
         fill="transparent"
@@ -75,7 +105,7 @@ const CircularProgress = ({
         y="57.5px"
         fill="currentColor"
         font-size="26px"
-        font-weight="bold"
+        font-weight="normal"
         style={{ transform: "rotate(90deg) translate(0px, -98px)" }}
       >
         {chain.progress}
diff --git a/src/components/lume/LumeProvider.tsx b/src/components/lume/LumeProvider.tsx
index 29c3591..cdcff4b 100644
--- a/src/components/lume/LumeProvider.tsx
+++ b/src/components/lume/LumeProvider.tsx
@@ -4,12 +4,13 @@ type LumeSyncState = 'syncing' | 'done' | 'error'
 
 export type Chain = {
   syncState: LumeSyncState,
+  name: string,
   chainId: string,
   active: boolean,
   progress: number, // in porcentage
   logs: string[],
   type: 'blockchain' | 'content',
-  peerCount?: number 
+  peerCount?: number
 }
 
 type LumeObject = {
@@ -27,15 +28,16 @@ const LumeProvider = ({ children }: { children: React.ReactNode }) => {
   const [lume, setLume] = React.useState<LumeObject>({
     chains: [
       {
+        name: 'Ethereum',
         syncState: 'done',
         chainId: '1',
         active: true,
         progress: 100,
         logs: [],
-        type: 'blockchain',
-        peerCount: 5
+        type: 'blockchain'
       },
       {
+        name: "IPFS",
         syncState: 'syncing',
         chainId: '2',
         active: false,
@@ -59,13 +61,13 @@ const LumeProvider = ({ children }: { children: React.ReactNode }) => {
 
 export default LumeProvider;
 
-export function useLume() { 
-  const ctx  = useContext(LumeContext); 
+export function useLume() {
+  const ctx = useContext(LumeContext);
 
-  if(!ctx) {
+  if (!ctx) {
     throw new Error('useLume must be used within a LumeProvider');
   }
-  
+
   const { lume } = ctx;
   return lume
 }