Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve zkEvm #1916

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Improve zkEvm #1916

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98a2a1c
Improve zkEvm
dappnodedev Apr 9, 2024
52dcb8e
Fix zkevm type
dappnodedev Apr 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 60 additions & 17 deletions packages/admin-ui/src/pages/rollups/components/Zkevm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import SubTitle from "components/SubTitle";
import { useApi } from "api";
import { useNavigate } from "react-router-dom";
import { NavigateFunction, useNavigate } from "react-router-dom";
import Alert from "react-bootstrap/esm/Alert";
import ErrorView from "components/ErrorView";
import defaultAvatar from "img/defaultAvatar.png";
Expand All @@ -14,8 +14,17 @@ import { zkevmDnpName, packageInfoPath, zkevmUiUrl } from "params";
import ZkevmCommunity from "./ZKevmCommunity";
import { prettyDnpName } from "utils/format";
import { getInstallerPath } from "pages/installer";
import { InstalledPackageData } from "@dappnode/types";

function ZkevmCard({ zkevmDnp, zkevmRunning, navigate }: { zkevmDnp: any, zkevmRunning?: boolean, navigate: any }) {
function ZkevmCard({
zkevmDnp,
zkevmRunning,
navigate
}: {
zkevmDnp: InstalledPackageData;
zkevmRunning?: boolean;
navigate: NavigateFunction;
}) {
const isRunning = zkevmRunning ?? false;

return (
Expand All @@ -26,16 +35,27 @@ function ZkevmCard({ zkevmDnp, zkevmRunning, navigate }: { zkevmDnp: any, zkevmR
<div className="title">{prettyDnpName(zkevmDnp?.dnpName)}</div>
<br />
{isRunning ? (
<Alert variant="success">The Zkevm package is currently <span className="running-text">running</span></Alert>
<Alert variant="success">
The Zkevm package is currently{" "}
<span className="running-text">running</span>
</Alert>
) : (
<Alert variant="warning">The Zkevm package is installed but not currently running.</Alert>
<Alert variant="warning">
The Zkevm package is installed but not currently running.
</Alert>
)}
{isRunning ? (
<a href={zkevmUiUrl} target="_blank" rel="noopener noreferrer">
<Button variant="dappnode" className="fullWidthButton">Go to UI</Button>
<Button variant="dappnode" className="fullWidthButton">
Go to UI
</Button>
</a>
) : (
<Button variant="dappnode" className="fullWidthButton" onClick={() => navigate(packageInfoPath)}>
<Button
variant="dappnode"
className="fullWidthButton"
onClick={() => navigate(packageInfoPath)}
>
GO TO PACKAGES
</Button>
)}
Expand All @@ -46,24 +66,37 @@ function ZkevmCard({ zkevmDnp, zkevmRunning, navigate }: { zkevmDnp: any, zkevmR
export function Zkevm() {
const navigate = useNavigate();
const [reqStatus] = useState<ReqStatus>({});
const dnpsRequest = useApi.packagesGet();
const zkevmDnp = dnpsRequest.data?.find(dnp => dnp.dnpName === zkevmDnpName);
const zkevmRunning = zkevmDnp?.containers.every(container => container.running);
const dnpRequest = useApi.packageGet({ dnpName: zkevmDnpName });
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ This part of the code has changed

const zkevmDnp = dnpRequest.data;
const zkevmRunning = zkevmDnp?.containers.every(
container => container.running
);

return (
<div>
<ZkevmCommunity />
<Card>
<p>The zkEVM is a zero-knowledge powered scalability solution. You can use your dappnode to run self-sovereign tools to empower yourself.
Currently, you can deploy your own UI to Force Transactions in the zkEVM without needing the sequencer, making you uncensorable. Most of the times you won't need this, as it needs ETH in L1 to pay for it, but if something were to happen to the zkEVM, you would be able to withdraw your funds.</p>
<p>
The zkEVM is a zero-knowledge powered scalability solution. You can
use your dappnode to run self-sovereign tools to empower yourself.
Currently, you can deploy your own UI to Force Transactions in the
zkEVM without needing the sequencer, making you uncensorable. Most of
the times you won't need this, as it needs ETH in L1 to pay for it,
but if something were to happen to the zkEVM, you would be able to
withdraw your funds.
</p>
<Row>
<Col md={4}>
{zkevmDnp ? (
<>
<SubTitle>zkEVM Token Withdrawal</SubTitle>
{zkevmRunning !== undefined &&
<ZkevmCard zkevmDnp={zkevmDnp} zkevmRunning={zkevmRunning} navigate={navigate} />
}
{zkevmRunning !== undefined && (
<ZkevmCard
zkevmDnp={zkevmDnp}
zkevmRunning={zkevmRunning}
navigate={navigate}
/>
)}
</>
) : (
<Card className="not-found">
Expand All @@ -73,15 +106,25 @@ export function Zkevm() {
<div className="title">Zkevm Package Not Found</div>
<br />
<p>You must install the Zkevm package</p>
<Button variant="dappnode" className="fullWidthButton" onClick={() => navigate(`${getInstallerPath(zkevmDnpName)}/${zkevmDnpName}`)}>
<Button
variant="dappnode"
className="fullWidthButton"
onClick={() =>
navigate(
`${getInstallerPath(zkevmDnpName)}/${zkevmDnpName}`
)
}
>
GET
</Button>
</Card>
)}
</Col>
</Row>
</Card>
<div>{reqStatus.error && <ErrorView error={reqStatus.error} hideIcon red />}</div>
<div>
{reqStatus.error && <ErrorView error={reqStatus.error} hideIcon red />}
</div>
</div>
);
}
}
Loading