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> </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 +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 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 +110,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>
); );
}; };