Skip to content

Commit

Permalink
adds information about records to record tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@michellewong793
michellewong793 committed Aug 19, 2024
1 parent b1d4e3c commit b6a8328
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 69 deletions.
2 changes: 1 addition & 1 deletion website/src/main.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ function Main() {
/>
</Sider>
<Layout>
<Content style={{ padding: "50px 50px" }}>
<Content style={{ padding: "50px 50px", margin: "0 auto", minWidth: "850px" }}>
<Outlet />
</Content>
<Footer style={{ textAlign: "center", display:"flex", flexDirection: "column" }}>
Expand Down
3 changes: 3 additions & 0 deletions website/src/tabs/record/DecryptRecord.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.container {
max-width: 750px;
}
172 changes: 104 additions & 68 deletions website/src/tabs/record/DecryptRecord.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useState } from "react";
import { Button, Card, Col, Divider, Form, Input, Row, Skeleton } from "antd";
import { CopyButton } from "../../components/CopyButton";
import { useAleoWASM } from "../../aleo-wasm-hook";
import "./DecryptRecord.css";

export const DecryptRecord = () => {
const [ciphertext, setCiphertext] = useState(null);
Expand Down Expand Up @@ -81,81 +82,116 @@ export const DecryptRecord = () => {
ciphertext !== null ? ciphertext.toString() : "";

return (
<Card
title="Decrypt Record"
style={{ width: "100%" }}
extra={
<Button
type="primary"

size="middle"
onClick={populateForm}
>
Demo
</Button>
}
>
<Form {...layout}>
<Form.Item label="Record (Ciphertext)" colon={false}>
<Input
name="recordCiphertext"
size="large"
placeholder="Record (Ciphertext)"
allowClear
onChange={onCiphertextChange}
value={recordCipherTextString()}
/>
</Form.Item>
<Form.Item label="View Key" colon={false}>
<Input
name="viewKey"
size="large"
placeholder="View Key"
allowClear
onChange={onViewKeyChange}
value={viewKeyString()}
/>
</Form.Item>
</Form>
{ciphertext || viewKey ? (
<Row justify="center">
<Col>
<div className="container">
<h1>Records</h1>
<h2>Overview</h2>
<ul>
<li>
{" "}
Records are created by Aleo programs and can be used as
inputs for functions within the same program. Once a
record is used, it’s consumed and can’t be reused.
</li>
<li>
Functions that consume records generate new records as
output.
</li>
<li>
Records are <strong>private</strong> by default, tied to
a single Aleo program and a user's private key.
</li>
<li>
The <strong> View Key </strong> is derived from the
private key and allows users to decrypt their encrypted
data and prove ownership of that data.
</li>
</ul>

<br />
<p>
Try the demo below! Enter a record and
decrypt it using your View Key to experience how the process
works. You can also click the "Show Demo" button on the
right to generate an example.
</p>

<br />

<Card
title="Decrypt Record"
style={{ width: "100%" }}
extra={
<>
<Button

type="primary"
size="middle"
onClick={clearForm}
onClick={populateForm}
>
Clear
Show Demo
</Button>
</Col>
</Row>
) : null}
{
</>
}
>
<Form {...layout}>
<Divider />
<Form.Item label="Record (Plaintext)" colon={false}>
{plaintext ? (
<Row align="middle">
<Col span={23}>
<Input.TextArea
size="large"
rows={10}
placeholder="Record (Plaintext)"
value={recordPlaintext()}
disabled
/>
</Col>
<Col span={1} align="middle">
<CopyButton data={recordPlaintext()} />
</Col>
</Row>
) : (
<Skeleton active />
)}
<Form.Item label="Record (Ciphertext)" colon={false}>
<Input
name="recordCiphertext"
size="large"
placeholder="Record (Ciphertext)"
allowClear
onChange={onCiphertextChange}
value={recordCipherTextString()}
/>
</Form.Item>
<Form.Item label="View Key" colon={false}>
<Input
name="viewKey"
size="large"
placeholder="View Key"
allowClear
onChange={onViewKeyChange}
value={viewKeyString()}
/>
</Form.Item>
</Form>
}
</Card>
{ciphertext || viewKey ? (
<Row justify="center">
<Col>
<Button size="middle" onClick={clearForm}>
Clear
</Button>
</Col>
</Row>
) : null}
{
<Form {...layout}>
<Divider />
<Form.Item label="Record (Plaintext)" colon={false}>
{plaintext ? (
<Row align="middle">
<Col span={23}>
<Input.TextArea
size="large"
rows={10}
placeholder="Record (Plaintext)"
value={recordPlaintext()}
disabled
/>
</Col>
<Col span={1} align="middle">
<CopyButton
data={recordPlaintext()}
/>
</Col>
</Row>
) : (
<Skeleton active />
)}
</Form.Item>
</Form>
}
</Card>
</div>
);
} else {
return (
Expand Down

0 comments on commit b6a8328

Please sign in to comment.