CHANGELOG.md

@@ -1,5 +1,3 @@
-# [0.1.0-develop.36](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.35...v0.1.0-develop.36) (2023-10-13)
-
 # [0.1.0-develop.35](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.34...v0.1.0-develop.35) (2023-10-13)
 
 # [0.1.0-develop.34](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.33...v0.1.0-develop.34) (2023-10-13)

npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
     "name": "@lumeweb/sdk",
-    "version": "0.1.0-develop.36",
+    "version": "0.1.0-develop.35",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@lumeweb/sdk",
-            "version": "0.1.0-develop.36",
+            "version": "0.1.0-develop.35",
             "dependencies": {
                 "@lumeweb/kernel-network-registry-client": "0.1.0-develop.10",
                 "@lumeweb/libkernel": "0.1.0-develop.65",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lumeweb/sdk",
-    "version": "0.1.0-develop.36",
+    "version": "0.1.0-develop.35",
     "type": "module",
     "main": "lib/index.js",
     "types": "lib/src/index.d.ts",

src/components/lume/LumeDashboard/LumeDashboard.tsx

@@ -118,6 +118,16 @@ const NetworkIndicator = ({ network }: { network: Network }) => {
   );
 };
 
+function getTextDimensions(
+  fontSize: number,
+  ratios: { width: number; height: number },
+) {
+  const width = fontSize * ratios.width;
+  const height = fontSize * ratios.height;
+
+  return { width, height };
+}
+
 const CircularProgress = ({
   chain,
   className,
@@ -125,13 +135,37 @@ const CircularProgress = ({
   chain: Network;
   className?: string;
 }) => {
-  const size = 60;
+  const [fontRatio, setFontRatio] = useState({
+    width: 0,
+    height: 0,
+  });
+  useEffect(() => {
+    const testText = document.createElement("span");
+    testText.style.fontSize = `${textSize}px`;
+    testText.style.position = "absolute";
+    testText.style.left = "-9999px"; // This effectively hides the element
+    testText.textContent = "The quick brown fox jumps over the lazy dog";
+
+    document.body.appendChild(testText);
+
+    const rect = testText.getBoundingClientRect();
+
+    setFontRatio({
+      width: rect.width / textSize,
+      height: rect.height / textSize,
+    });
+
+    // Clean up after measurements
+    document.body.removeChild(testText);
+  }, []);
+
+  const size = 55;
   const progressWidth = 2;
   const circleWidth = 2;
   const radius = size / 2 - 10;
   const circumference = 2 * radius * Math.PI;
   const offset = circumference * ((100 - chain.sync) / 100);
-  const fontSize = 15;
+  const textSize = 11;
 
   return (
     <svg
@@ -166,12 +200,12 @@ const CircularProgress = ({
         fill="transparent"
         strokeDasharray={`${circumference}px`}></circle>
       <text
-        x="21px"
-        y="32px"
+        x="4px"
+        y="25px"
         fill="currentColor"
-        fontSize={`${fontSize}px`}
+        fontSize="26px"
         fontWeight="normal"
-        style={{ transform: "rotate(90deg) translate(0px, -56px)" }}>
+        style={{ transform: "rotate(90deg) translate(0px, -32px)" }}>
         {chain.sync}
       </text>
     </svg>