LumeWeb
/
web3browser.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of git.lumeweb.com:LumeWeb/web3browser.io into ditorodev

This commit is contained in:
Juan Di Toro 2023-11-09 13:41:15 +01:00
parent 2b5fbc8b36 9836b5de26
commit 2a13d11e9d
1 changed files with 38 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/App.tsx
View File

@ -46,19 +46,26 @@ const App: React.FC = () => {
</span>
) : ethStatus?.syncState === "done" ? (
<span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
<CircleProgressBar radius={5} strokeWidth={3} percentage={100} />
{" "} Ethereum Synced
<CircleProgressBar radius={5} strokeWidth={3} percentage={100} />{" "}
Ethereum Synced
</span>
) : null}
{handshakeStatus?.syncState === "syncing" ? (
<span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
<CircleProgressBar radius={5} strokeWidth={3} percentage={Math.floor(handshakeStatus.sync)} />
<span className="font-bold font-mono text-orange-400 mr-2">{handshakeStatus.sync.toFixed(1)}%</span> Syncing Handshake Network
<CircleProgressBar
radius={5}
strokeWidth={3}
percentage={Math.floor(handshakeStatus.sync)}
/>
<span className="font-bold font-mono text-orange-400 mr-2">
{handshakeStatus.sync.toFixed(1)}%
</span>{" "}
Syncing Handshake Network
</span>
) : handshakeStatus?.syncState === "done" ? (
<span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
<CircleProgressBar radius={5} strokeWidth={3} percentage={100} />
{" "} Handshake Synced
<CircleProgressBar radius={5} strokeWidth={3} percentage={100} />{" "}
Handshake Synced
</span>
) : null}
</div>
@ -67,11 +74,21 @@ const App: React.FC = () => {
);
};
const CircleProgressBar = ({ radius, strokeWidth, textSize, percentage } : {radius: number, strokeWidth: number, textSize?: number, percentage: number}) => {
const CircleProgressBar = ({
radius,
strokeWidth,
textSize,
percentage,
}: {
radius: number;
strokeWidth: number;
textSize?: number;
percentage: number;
}) => {
const circumference = 2 * Math.PI * radius;
const offset = circumference - (percentage / 100) * circumference;
const color = Math.ceil(percentage) >= 100 ? "green-500" : "orange-400"
const color = Math.ceil(percentage) >= 100 ? "green-500" : "orange-400";
return (
<svg width={radius * 2 + strokeWidth} height={radius * 2 + strokeWidth}>
<circle
@ -93,16 +110,18 @@ const CircleProgressBar = ({ radius, strokeWidth, textSize, percentage } : {radi
strokeDashoffset={offset}
strokeLinecap="round"
/>
{textSize ? <text
x="50%"
className={`fill-${color}`}
y="50%"
textAnchor="middle"
dy=".3em"
fontSize={textSize}
>
{`${percentage}%`}
</text> : null }
{textSize ? (
<text
x="50%"
className={`fill-${color}`}
y="50%"
textAnchor="middle"
dy=".3em"
fontSize={textSize}
>
{`${percentage}%`}
</text>
) : null}
</svg>
);
};