Merge branch 'master' of git.lumeweb.com:LumeWeb/web3browser.io into ditorodev
This commit is contained in:
commit
2a13d11e9d
|
@ -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,10 +74,20 @@ 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}>
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue