Skip to content

Commit d21341e

Browse files
uzanalex4506
uzan
authored and
alex4506
committed
dapp upload
1 parent acfee8d commit d21341e

File tree

6 files changed

+467
-0
lines changed

6 files changed

+467
-0
lines changed

‎100243241/App.css

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-logo {
6+
height: 40vmin;
7+
pointer-events: none;
8+
}
9+
10+
@media (prefers-reduced-motion: no-preference) {
11+
.App-logo {
12+
animation: App-logo-spin infinite 20s linear;
13+
}
14+
}
15+
16+
.App-header {
17+
background-color: #282c34;
18+
min-height: 100vh;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
font-size: calc(10px + 2vmin);
24+
color: white;
25+
}
26+
27+
.App-link {
28+
color: #61dafb;
29+
}
30+
31+
@keyframes App-logo-spin {
32+
from {
33+
transform: rotate(0deg);
34+
}
35+
to {
36+
transform: rotate(360deg);
37+
}
38+
}

‎100243241/App.tsx

+280
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
import React, {useEffect, useState} from 'react';
2+
import logo from './logo.svg';
3+
import './App.css';
4+
import {Layout, Row, Col, Button, Spin, List, Checkbox, Input} from "antd";
5+
import { WalletSelector } from "@aptos-labs/wallet-adapter-ant-design";
6+
import "@aptos-labs/wallet-adapter-ant-design/dist/index.css";
7+
import { Aptos } from "@aptos-labs/ts-sdk";
8+
import {
9+
useWallet,
10+
InputTransactionData,
11+
} from "@aptos-labs/wallet-adapter-react";
12+
import {CheckboxChangeEvent} from "antd/es/checkbox";
13+
14+
15+
const aptos = new Aptos();
16+
17+
type Task={
18+
address: string;
19+
completed: boolean;
20+
content: string;
21+
task_id: string;
22+
}
23+
24+
function App() {
25+
const [accountHasList, setAccountHasList] = useState<boolean>(false);
26+
// a local state to keep tract whether a transaction is in progress
27+
const [transactionInProgress, setTransactionInProgress] =
28+
useState<boolean>(false);
29+
// Extract the account object from the wallet adapter
30+
const { account,signAndSubmitTransaction }=useWallet();
31+
const [tasks, setTasks]=useState<Task[]>([]);
32+
const [newTask, setNewTask] = useState<string>("");
33+
34+
// add a hook to update the account resource changes
35+
useEffect(() => {
36+
fetchList();
37+
}, [account?.address]);
38+
39+
40+
41+
const moduleAddress = "0xa85172e8c0f2125ca6b11b2774b45f3c39540c2b799583eb6771ae29c7ef2939";
42+
43+
// onWriteTask function will get called whenever a user types something in the input text
44+
const onWriteTask = (event: React.ChangeEvent<HTMLInputElement>) => {
45+
const value = event.target.value;
46+
setNewTask(value);
47+
};
48+
49+
const fetchList = async () => {
50+
if (!account) return [];
51+
try {
52+
const todoListResource = await aptos.getAccountResource(
53+
{
54+
accountAddress:account?.address,
55+
resourceType: `${moduleAddress}::notebook::TodoList`
56+
}
57+
);
58+
setAccountHasList(true);
59+
60+
// tasks table handle
61+
const tableHandle = (todoListResource as any).tasks.handle;
62+
// tasks table counter
63+
const taskCounter = (todoListResource as any).task_counter;
64+
65+
let tasks=[];
66+
let counter=1;
67+
while(counter <= taskCounter) {
68+
const tableItem = {
69+
key_type: "u64",
70+
value_type: `${moduleAddress}::notebook::Task`,
71+
key: `${counter}`,
72+
};
73+
const task = await aptos.getTableItem<Task>({handle:tableHandle, data:tableItem});
74+
tasks.push(task);
75+
counter++;
76+
}
77+
setTasks(tasks);
78+
} catch (e: any){
79+
setAccountHasList(false);
80+
}
81+
}
82+
83+
const addNewList = async () => {
84+
if (!account) return [];
85+
setTransactionInProgress(true);
86+
// call the todolist function
87+
const transaction:InputTransactionData = {
88+
data: {
89+
function:`${moduleAddress}::notebook::create_list`,
90+
functionArguments:[]
91+
}
92+
}
93+
94+
try {
95+
const response = await signAndSubmitTransaction(transaction);
96+
// wait for transaction
97+
await aptos.waitForTransaction({transactionHash:response.hash});
98+
setAccountHasList(true);
99+
} catch (e) {
100+
setAccountHasList(false);
101+
} finally {
102+
setTransactionInProgress(false);
103+
}
104+
};
105+
106+
//submit task text onto blockchain
107+
const onTaskAdded = async() => {
108+
// check for connected account
109+
if(!account) return;
110+
setTransactionInProgress(true);
111+
const transaction:InputTransactionData={
112+
data:{
113+
function:`${moduleAddress}::notebook::create_task`,
114+
functionArguments:[newTask]
115+
}
116+
}
117+
118+
//hold the latest task.task_id from our local state
119+
const latestId = tasks.length > 0 ? parseInt(tasks[tasks.length - 1].task_id) + 1 : 1;
120+
// build a newTaskToPush object into our local state
121+
const newTaskToPush = {
122+
address: account.address,
123+
completed: false,
124+
content: newTask,
125+
task_id: latestId + "",
126+
};
127+
128+
try {
129+
// sign and submit transaction to chain
130+
const response = await signAndSubmitTransaction(transaction);
131+
// wait for transaction
132+
await aptos.waitForTransaction({transactionHash:response.hash});
133+
134+
// Create a new array based on current state;
135+
let newTasks = [...tasks];
136+
137+
// Add item to the tasks array
138+
newTasks.push(newTaskToPush);
139+
//Set state
140+
setTasks(newTasks);
141+
//clear input text
142+
setNewTask("");
143+
} catch (e) {
144+
console.log("error", e);
145+
} finally {
146+
setTransactionInProgress(false);
147+
}
148+
};
149+
150+
const onCheckboxChange = async (
151+
event: CheckboxChangeEvent,
152+
taskId: string
153+
)=> {
154+
if (!account) return;
155+
if (!event.target.checked) return;
156+
setTransactionInProgress(true);
157+
const transaction:InputTransactionData = {
158+
data:{
159+
function:`${moduleAddress}::notebook::complete_task`,
160+
functionArguments:[taskId]
161+
}
162+
}
163+
164+
try {
165+
// sign and submit transaction to chain
166+
const response = await signAndSubmitTransaction(transaction);
167+
// wait for transaction
168+
await aptos.waitForTransaction({transactionHash:response.hash});
169+
170+
setTasks((prevState) => {
171+
const newState = prevState.map((obj) => {
172+
// if task_id equals the checked taskId, update completed property
173+
if (obj.task_id === taskId) {
174+
return { ...obj, completed: true };
175+
}
176+
177+
// otherwise return object as is
178+
return obj;
179+
});
180+
181+
return newState;
182+
});
183+
} catch (error: any) {
184+
console.log("error", error);
185+
} finally {
186+
setTransactionInProgress(false);
187+
}
188+
}
189+
190+
return (
191+
<>
192+
<Layout>
193+
<Row align="middle">
194+
<Col span={10} offset={2}>
195+
<h1>Our todolist</h1>
196+
</Col>
197+
<Col span={12} style={{ textAlign: "right", paddingRight: "200px" }}>
198+
<WalletSelector />
199+
</Col>
200+
</Row>
201+
</Layout>
202+
<Spin spinning = {transactionInProgress}>
203+
{
204+
!accountHasList ? (
205+
<Row gutter={[0, 32]} style={{ marginTop: "2rem" }}>
206+
<Col span={8} offset={8}>
207+
<Button
208+
disabled={!account}
209+
block
210+
onClick={addNewList}
211+
type="primary"
212+
style={{ height: "40px", backgroundColor: "#3f67ff" }}
213+
>
214+
Add new list
215+
</Button>
216+
</Col>
217+
</Row>
218+
) : (
219+
<Row gutter={[0, 32]} style={{ marginTop: "2rem" }}>
220+
<Col span={8} offset={8}>
221+
<Input.Group compact>
222+
<Input
223+
onChange={(event) => onWriteTask(event)}
224+
style={{ width: "calc(100% - 60px)" }}
225+
placeholder="Add a Task"
226+
size="large"
227+
value={newTask}
228+
/>
229+
<Button
230+
onClick={onTaskAdded}
231+
type="primary"
232+
style={{ height: "40px", backgroundColor: "#3f67ff" }}
233+
>
234+
Add
235+
</Button>
236+
</Input.Group>
237+
</Col>
238+
<Col span={8} offset={8}>
239+
{tasks && (
240+
<List
241+
size="small"
242+
bordered
243+
dataSource={tasks}
244+
renderItem={(task: any) => (
245+
<List.Item actions={[
246+
<div>
247+
{task.completed ? (
248+
<Checkbox defaultChecked={true} disabled />
249+
) : (
250+
<Checkbox
251+
onChange={(event) =>
252+
onCheckboxChange(event, task.task_id)
253+
}
254+
/>
255+
)}
256+
</div>,
257+
]}>
258+
<List.Item.Meta
259+
title={task.content}
260+
description={
261+
<a
262+
href={`https://explorer.aptoslabs.com/account/${task.address}/`}
263+
target="_blank"
264+
>{`${task.address.slice(0, 6)}...${task.address.slice(-5)}`}</a>
265+
}
266+
/>
267+
</List.Item>
268+
)}
269+
/>
270+
)}
271+
</Col>
272+
</Row>
273+
)
274+
}
275+
</Spin>
276+
</>
277+
);
278+
}
279+
280+
export default App;

‎100243241/Move.toml

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
[package]
2+
name = "notebook-on-aptos"
3+
version = "1.0.0"
4+
authors = []
5+
6+
[addresses]
7+
notebook_addr='a85172e8c0f2125ca6b11b2774b45f3c39540c2b799583eb6771ae29c7ef2939'
8+
9+
[dev-addresses]
10+
11+
[dependencies.AptosFramework]
12+
git = "https://github.com/aptos-labs/aptos-core.git"
13+
rev = "mainnet"
14+
subdir = "aptos-move/framework/aptos-framework"
15+
16+
[dev-dependencies]

‎100243241/index.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
code {
11+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12+
monospace;
13+
}

0 commit comments

Comments
 (0)