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

fix: floors should be floor

This commit is contained in:
Derrick Hammer 2023-11-04 18:45:50 -04:00
parent 6eec1cff6b
commit 9836b5de26
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
1 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/App.tsx
View File

@ -36,29 +36,44 @@ const App: React.FC = () => {
</div> </div>
</div> </div>
<Navigator /> <Navigator />
{true || ethStatus?.syncState === "syncing" || {true ||
ethStatus?.syncState === "syncing" ||
handshakeStatus?.syncState === "syncing" ? ( handshakeStatus?.syncState === "syncing" ? (
<div className="py-4 -mb-4 flex flex-row gap-x-3"> <div className="py-4 -mb-4 flex flex-row gap-x-3">
{ethStatus?.syncState === "syncing" ? ( {ethStatus?.syncState === "syncing" ? (
<span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg"> <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.floors(ethStatus.sync)} /> <CircleProgressBar
<span className="font-bold font-mono text-orange-400 mr-2">{ethStatus.sync.toFixed(1)}%</span> Syncing Ethereum Network radius={5}
strokeWidth={3}
percentage={Math.floor(ethStatus.sync)}
/>
<span className="font-bold font-mono text-orange-400 mr-2">
{ethStatus.sync.toFixed(1)}%
</span>{" "}
Syncing Ethereum Network
</span> </span>
) : ethStatus?.syncState === "done" ? ( ) : ethStatus?.syncState === "done" ? (
<span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg"> <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} /> <CircleProgressBar radius={5} strokeWidth={3} percentage={100} />{" "}
{" "} Ethereum Synced Ethereum Synced
</span> </span>
) : null} ) : null}
{handshakeStatus?.syncState === "syncing" ? ( {handshakeStatus?.syncState === "syncing" ? (
<span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg"> <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)} /> <CircleProgressBar
<span className="font-bold font-mono text-orange-400 mr-2">{handshakeStatus.sync.toFixed(1)}%</span> Syncing Handshake Network 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> </span>
) : handshakeStatus?.syncState === "done" ? ( ) : handshakeStatus?.syncState === "done" ? (
<span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg"> <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} /> <CircleProgressBar radius={5} strokeWidth={3} percentage={100} />{" "}
{" "} Handshake Synced Handshake Synced
</span> </span>
) : null} ) : null}
</div> </div>
@ -67,11 +82,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 circumference = 2 * Math.PI * radius;
const offset = circumference - (percentage / 100) * circumference; 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 ( return (
<svg width={radius * 2 + strokeWidth} height={radius * 2 + strokeWidth}> <svg width={radius * 2 + strokeWidth} height={radius * 2 + strokeWidth}>
<circle <circle
@ -93,16 +118,18 @@ const CircleProgressBar = ({ radius, strokeWidth, textSize, percentage } : {radi
strokeDashoffset={offset} strokeDashoffset={offset}
strokeLinecap="round" strokeLinecap="round"
/> />
{textSize ? <text {textSize ? (
x="50%" <text
className={`fill-${color}`} x="50%"
y="50%" className={`fill-${color}`}
textAnchor="middle" y="50%"
dy=".3em" textAnchor="middle"
fontSize={textSize} dy=".3em"
> fontSize={textSize}
{`${percentage}%`} >
</text> : null } {`${percentage}%`}
</text>
) : null}
</svg> </svg>
); );
}; };