Compare commits

..

3 Commits

4 changed files with 11 additions and 43 deletions

View File

@ -1,3 +1,5 @@
# [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)

4
npm-shrinkwrap.json generated
View File

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

View File

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

View File

@ -118,16 +118,6 @@ 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,
@ -135,37 +125,13 @@ const CircularProgress = ({
chain: Network;
className?: string;
}) => {
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 size = 60;
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 textSize = 11;
const fontSize = 15;
return (
<svg
@ -200,12 +166,12 @@ const CircularProgress = ({
fill="transparent"
strokeDasharray={`${circumference}px`}></circle>
<text
x="4px"
y="25px"
x="21px"
y="32px"
fill="currentColor"
fontSize="26px"
fontSize={`${fontSize}px`}
fontWeight="normal"
style={{ transform: "rotate(90deg) translate(0px, -32px)" }}>
style={{ transform: "rotate(90deg) translate(0px, -56px)" }}>
{chain.sync}
</text>
</svg>