chore(release): 0.1.0-develop.35 [skip ci]

# [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)

CHANGELOG.md

@@ -1,3 +1,5 @@
+# [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)
 
 # [0.1.0-develop.33](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.32...v0.1.0-develop.33) (2023-10-12)

npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
     "name": "@lumeweb/sdk",
-    "version": "0.1.0-develop.34",
+    "version": "0.1.0-develop.35",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@lumeweb/sdk",
-            "version": "0.1.0-develop.34",
+            "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.34",
+    "version": "0.1.0-develop.35",
     "type": "module",
     "main": "lib/index.js",
     "types": "lib/src/index.d.ts",

src/components/lume/LumeDashboard/LumeDashboard.tsx

@@ -117,6 +117,7 @@ const NetworkIndicator = ({ network }: { network: Network }) => {
     </div>
   );
 };
+
 function getTextDimensions(
   fontSize: number,
   ratios: { width: number; height: number },
@@ -138,31 +139,33 @@ const CircularProgress = ({
     width: 0,
     height: 0,
   });
-
-  const radius = 45;
-  const SVG_SIZE = radius * 2 + 10; // +10 to add some padding around
-  const STROKE_WIDTH = radius * 0.08; // 8% of the radius for the stroke width
-  const textSize = radius * 0.5; // half of the radius for text size
-
   useEffect(() => {
     const testText = document.createElement("span");
     testText.style.fontSize = `${textSize}px`;
     testText.style.position = "absolute";
-    testText.style.left = "-9999px";
+    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);
-  }, [textSize]);
+  }, []);
 
-  const { width: textWidth } = getTextDimensions(textSize, fontRatio);
+  const size = 55;
-
+  const progressWidth = 2;
-  const circumference = 2 * Math.PI * radius;
+  const circleWidth = 2;
+  const radius = size / 2 - 10;
+  const circumference = 2 * radius * Math.PI;
   const offset = circumference * ((100 - chain.sync) / 100);
+  const textSize = 11;
 
   return (
     <svg
@@ -170,36 +173,39 @@ const CircularProgress = ({
         className,
         chainIndicatorVariant({ syncState: chain.syncState }),
       ])}
-      width={SVG_SIZE}
+      width={size}
-      height={SVG_SIZE}
+      height={size}
-      viewBox={`0 0 ${SVG_SIZE} ${SVG_SIZE}`}
+      viewBox={`-${size * 0.125} -${size * 0.125} ${size * 1.25} ${
+        size * 1.25
+      }`}
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       style={{ transform: "rotate(-90deg)" }}>
       <circle
-        r={radius}
+        r={size / 2 - 10}
-        cx={SVG_SIZE / 2}
+        cx={size / 2}
-        cy={SVG_SIZE / 2}
+        cy={size / 2}
         fill="transparent"
         stroke="#e0e0e0"
-        strokeWidth={STROKE_WIDTH}
+        strokeWidth={`${circleWidth}px`}
         strokeDasharray={`${circumference}px`}></circle>
       <circle
-        r={radius}
+        r={size / 2 - 10}
-        cx={SVG_SIZE / 2}
+        cx={size / 2}
-        cy={SVG_SIZE / 2}
+        cy={size / 2}
         stroke="currentColor"
-        strokeWidth={STROKE_WIDTH}
+        strokeWidth={`${progressWidth}px`}
         strokeLinecap="round"
         strokeDashoffset={`${offset}px`}
         fill="transparent"
         strokeDasharray={`${circumference}px`}></circle>
       <text
-        x={(SVG_SIZE - textWidth) / 2}
+        x="4px"
-        y={(SVG_SIZE + textSize) / 2} // Adding half of the text size for vertical centering
+        y="25px"
         fill="currentColor"
-        fontSize={`${textSize}px`}
+        fontSize="26px"
-        fontWeight="normal">
+        fontWeight="normal"
+        style={{ transform: "rotate(90deg) translate(0px, -32px)" }}>
         {chain.sync}
       </text>
     </svg>