Skip to content

Commit 5c155e3

Browse files
michellewong793michellewong793
authored
Merge pull request #918 from ProvableHQ/mwong/record-updates
SDK - Update UX of Record Tab
2 parents ef320bd + b6a8328 commit 5c155e3

File tree

5 files changed

+136
-71
lines changed

5 files changed

+136
-71
lines changed

‎website/src/main.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ function Main() {
104104
/>
105105
</Sider>
106106
<Layout>
107-
<Content style={{ padding: "50px 50px" }}>
107+
<Content style={{ padding: "50px 50px", margin: "0 auto", minWidth: "850px" }}>
108108
<Outlet />
109109
</Content>
110110
<Footer style={{ textAlign: "center", display:"flex", flexDirection: "column" }}>

‎website/src/pages/Homepage.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@
44
font-size: 14px;
55
}
66

7+
.buttonRow {
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
gap: 20px;
12+
}
13+
14+
715
.button {
816
background-color: #12e172;
917
padding: 16px 32px 16px 32px;
@@ -93,6 +101,12 @@ a:nth-child(3) {
93101
font-size: 18px;
94102
}
95103

104+
.buttonRow {
105+
display: flex;
106+
flex-direction: row;
107+
gap: 20px;
108+
}
109+
96110
.actionRow {
97111
display: flex;
98112
flex-direction: row;

‎website/src/pages/Homepage.jsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,28 @@ const Homepage = () => {
1818
The tooling for building zero-knowledge applications at your
1919
fingertips
2020
</p>{" "}
21+
<div className="buttonRow">
22+
<Link
23+
target="_blank"
24+
rel="noopener noreferrer"
25+
to="/account"
26+
>
27+
<button className="button">
28+
{" "}
29+
Try now <span className="arrow">&rarr;</span>{" "}
30+
</button>
31+
</Link>{" "}
2132
<Link
2233
target="_blank"
2334
rel="noopener noreferrer"
2435
to="https://developer.aleo.org/sdk/"
2536
>
2637
<button className="button">
2738
{" "}
28-
View Docs <span className="arrow">&rarr;</span>{" "}
39+
See Docs <span className="arrow">&rarr;</span>{" "}
2940
</button>
3041
</Link>{" "}
42+
</div>
3143
<ul className="actionRow">
3244
<Link to="/account" className="actionItem">
3345
{" "}
@@ -52,7 +64,7 @@ const Homepage = () => {
5264
to="https://docs.leo-lang.org/sdk/create-leo-app/tutorial/"
5365
>
5466
<button className="button">
55-
Try it now <span className="arrow">&rarr;</span>
67+
Try now <span className="arrow">&rarr;</span>
5668
</button>
5769
</Link>{" "}
5870
<div className="footer">

‎website/src/tabs/record/DecryptRecord.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.container {
2+
max-width: 750px;
3+
}

‎website/src/tabs/record/DecryptRecord.jsx‎

Lines changed: 104 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState } from "react";
22
import { Button, Card, Col, Divider, Form, Input, Row, Skeleton } from "antd";
33
import { CopyButton } from "../../components/CopyButton";
44
import { useAleoWASM } from "../../aleo-wasm-hook";
5+
import "./DecryptRecord.css";
56

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

8384
return (
84-
<Card
85-
title="Decrypt Record"
86-
style={{ width: "100%" }}
87-
extra={
88-
<Button
89-
type="primary"
90-
91-
size="middle"
92-
onClick={populateForm}
93-
>
94-
Demo
95-
</Button>
96-
}
97-
>
98-
<Form {...layout}>
99-
<Form.Item label="Record (Ciphertext)" colon={false}>
100-
<Input
101-
name="recordCiphertext"
102-
size="large"
103-
placeholder="Record (Ciphertext)"
104-
allowClear
105-
onChange={onCiphertextChange}
106-
value={recordCipherTextString()}
107-
/>
108-
</Form.Item>
109-
<Form.Item label="View Key" colon={false}>
110-
<Input
111-
name="viewKey"
112-
size="large"
113-
placeholder="View Key"
114-
allowClear
115-
onChange={onViewKeyChange}
116-
value={viewKeyString()}
117-
/>
118-
</Form.Item>
119-
</Form>
120-
{ciphertext || viewKey ? (
121-
<Row justify="center">
122-
<Col>
85+
<div className="container">
86+
<h1>Records</h1>
87+
<h2>Overview</h2>
88+
<ul>
89+
<li>
90+
{" "}
91+
Records are created by Aleo programs and can be used as
92+
inputs for functions within the same program. Once a
93+
record is used, it’s consumed and can’t be reused.
94+
</li>
95+
<li>
96+
Functions that consume records generate new records as
97+
output.
98+
</li>
99+
<li>
100+
Records are <strong>private</strong> by default, tied to
101+
a single Aleo program and a user's private key.
102+
</li>
103+
<li>
104+
The <strong> View Key </strong> is derived from the
105+
private key and allows users to decrypt their encrypted
106+
data and prove ownership of that data.
107+
</li>
108+
</ul>
109+
110+
<br />
111+
<p>
112+
Try the demo below! Enter a record and
113+
decrypt it using your View Key to experience how the process
114+
works. You can also click the "Show Demo" button on the
115+
right to generate an example.
116+
</p>
117+
118+
<br />
119+
120+
<Card
121+
title="Decrypt Record"
122+
style={{ width: "100%" }}
123+
extra={
124+
<>
123125
<Button
124-
126+
type="primary"
125127
size="middle"
126-
onClick={clearForm}
128+
onClick={populateForm}
127129
>
128-
Clear
130+
Show Demo
129131
</Button>
130-
</Col>
131-
</Row>
132-
) : null}
133-
{
132+
</>
133+
}
134+
>
134135
<Form {...layout}>
135-
<Divider />
136-
<Form.Item label="Record (Plaintext)" colon={false}>
137-
{plaintext ? (
138-
<Row align="middle">
139-
<Col span={23}>
140-
<Input.TextArea
141-
size="large"
142-
rows={10}
143-
placeholder="Record (Plaintext)"
144-
value={recordPlaintext()}
145-
disabled
146-
/>
147-
</Col>
148-
<Col span={1} align="middle">
149-
<CopyButton data={recordPlaintext()} />
150-
</Col>
151-
</Row>
152-
) : (
153-
<Skeleton active />
154-
)}
136+
<Form.Item label="Record (Ciphertext)" colon={false}>
137+
<Input
138+
name="recordCiphertext"
139+
size="large"
140+
placeholder="Record (Ciphertext)"
141+
allowClear
142+
onChange={onCiphertextChange}
143+
value={recordCipherTextString()}
144+
/>
145+
</Form.Item>
146+
<Form.Item label="View Key" colon={false}>
147+
<Input
148+
name="viewKey"
149+
size="large"
150+
placeholder="View Key"
151+
allowClear
152+
onChange={onViewKeyChange}
153+
value={viewKeyString()}
154+
/>
155155
</Form.Item>
156156
</Form>
157-
}
158-
</Card>
157+
{ciphertext || viewKey ? (
158+
<Row justify="center">
159+
<Col>
160+
<Button size="middle" onClick={clearForm}>
161+
Clear
162+
</Button>
163+
</Col>
164+
</Row>
165+
) : null}
166+
{
167+
<Form {...layout}>
168+
<Divider />
169+
<Form.Item label="Record (Plaintext)" colon={false}>
170+
{plaintext ? (
171+
<Row align="middle">
172+
<Col span={23}>
173+
<Input.TextArea
174+
size="large"
175+
rows={10}
176+
placeholder="Record (Plaintext)"
177+
value={recordPlaintext()}
178+
disabled
179+
/>
180+
</Col>
181+
<Col span={1} align="middle">
182+
<CopyButton
183+
data={recordPlaintext()}
184+
/>
185+
</Col>
186+
</Row>
187+
) : (
188+
<Skeleton active />
189+
)}
190+
</Form.Item>
191+
</Form>
192+
}
193+
</Card>
194+
</div>
159195
);
160196
} else {
161197
return (

0 commit comments

Comments
 (0)