Skip to content

Commit 3594fc6

Browse files
adnfx2adnfx2
committed
Init hedera react template
1 parent d31eb0d commit 3594fc6

34 files changed

+1541
-175
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@
1313

1414
# misc
1515
.DS_Store
16+
.env
1617
.env.local
1718
.env.development.local
1819
.env.test.local
1920
.env.production.local
21+
.eslintcache
2022

2123
npm-debug.log*
2224
yarn-debug.log*

‎package.json

+9
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,21 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@hashgraph/sdk": "^2.0.14",
7+
"@material-ui/core": "^4.11.2",
8+
"@material-ui/icons": "^4.11.2",
69
"@testing-library/jest-dom": "^5.11.4",
710
"@testing-library/react": "^11.1.0",
811
"@testing-library/user-event": "^12.1.10",
12+
"dotenv": "^8.2.0",
13+
"fontsource-roboto": "^4.0.0",
14+
"qrcode.react": "^1.0.1",
915
"react": "^17.0.1",
16+
"react-blockies": "^1.4.1",
17+
"react-copy-to-clipboard": "^5.0.3",
1018
"react-dom": "^17.0.1",
1119
"react-scripts": "4.0.1",
20+
"react-toastify": "^7.0.3",
1221
"web-vitals": "^0.2.4"
1322
},
1423
"scripts": {

‎public/favicon.ico

-3.78 KB
Binary file not shown.

‎public/hedera-logo.svg

+1
Loading

‎public/index.html

+3-30
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,15 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="%PUBLIC_URL%/hedera-logo.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
178
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
22-
23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>React App</title>
9+
<title>Hedera App</title>
2810
</head>
2911
<body>
3012
<noscript>You need to enable JavaScript to run this app.</noscript>
3113
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
14+
<!-- Hedera front-end template -->
4215
</body>
4316
</html>

‎public/logo192.png

-5.22 KB
Binary file not shown.

‎public/logo512.png

-9.44 KB
Binary file not shown.

‎public/manifest.json

+4-15
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,10 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "Hedera App",
3+
"name": "Hedera App",
44
"icons": [
55
{
6-
"src": "favicon.ico",
7-
"sizes": "64x64 32x32 24x24 16x16",
8-
"type": "image/x-icon"
9-
},
10-
{
11-
"src": "logo192.png",
12-
"type": "image/png",
13-
"sizes": "192x192"
14-
},
15-
{
16-
"src": "logo512.png",
17-
"type": "image/png",
18-
"sizes": "512x512"
6+
"src": "hedera-logo.svg",
7+
"sizes": "64x64 32x32 24x24 16x16"
198
}
209
],
2110
"start_url": ".",

‎src/App.css

-38
This file was deleted.

‎src/App.js

+15-20
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
1-
import logo from './logo.svg';
2-
import './App.css';
1+
import Header from "./components/Header";
2+
import Wallet from "./components/Wallet";
3+
import DarkThemeProvider from "./material-ui/DarkThemeProvider";
4+
import { AccountsManagerProvider } from "./hashgraph-lib/accountsManager";
5+
import { ToastContainer } from "react-toastify";
6+
import "react-toastify/dist/ReactToastify.css";
37

4-
function App() {
8+
const App = () => {
59
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
10+
<DarkThemeProvider>
11+
<AccountsManagerProvider>
12+
<Header />
13+
<Wallet />
14+
<ToastContainer />
15+
</AccountsManagerProvider>
16+
</DarkThemeProvider>
2217
);
23-
}
18+
};
2419

2520
export default App;

‎src/App.test.js

-8
This file was deleted.

‎src/assets/hedera-logo.svg

+1
Loading

‎src/components/Header/index.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import AppBar from "@material-ui/core/AppBar";
2+
import Toolbar from "@material-ui/core/Toolbar";
3+
import Typography from "@material-ui/core/Typography";
4+
import { makeStyles } from "@material-ui/core/styles";
5+
import hederaLogo from "../../assets/hedera-logo.svg";
6+
7+
const useStyles = makeStyles({
8+
logo: {
9+
maxWidth: 64,
10+
paddingRight: 10,
11+
},
12+
});
13+
14+
const Header = () => {
15+
const classes = useStyles();
16+
17+
return (
18+
<AppBar position="static" color="default" elevation={0}>
19+
<Toolbar>
20+
<img src={hederaLogo} alt="Hedera" className={classes.logo} />
21+
<Typography variant="h6">HEDERA TEMPLATE</Typography>
22+
</Toolbar>
23+
</AppBar>
24+
);
25+
};
26+
27+
export default Header;

‎src/components/Wallet/AccountID.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Container from "@material-ui/core/Container";
2+
import Typography from "@material-ui/core/Typography";
3+
import Avatar from "@material-ui/core/Avatar";
4+
import Blockies from "react-blockies";
5+
import Grid from "@material-ui/core/Grid";
6+
import ErrorIcon from "@material-ui/icons/Error";
7+
8+
const AccountID = ({ accountId }) => {
9+
return (
10+
<Container>
11+
<Grid container spacing={2} justify="center" alignItems="center">
12+
<Grid item>
13+
<Avatar>
14+
{accountId ? <Blockies seed={accountId} /> : <ErrorIcon />}
15+
</Avatar>
16+
</Grid>
17+
<Grid item>
18+
<Typography>{accountId || "Disconnected"}</Typography>
19+
</Grid>
20+
</Grid>
21+
</Container>
22+
);
23+
};
24+
25+
export default AccountID;

‎src/components/Wallet/AccountListItem.js

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import { useState } from "react";
2+
import { makeStyles } from "@material-ui/core/styles";
3+
import Avatar from "@material-ui/core/Avatar";
4+
import Button from "@material-ui/core/Button";
5+
import ListItem from "@material-ui/core/ListItem";
6+
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
7+
import ListItemText from "@material-ui/core/ListItemText";
8+
import Dialog from "@material-ui/core/Dialog";
9+
import DialogTitle from "@material-ui/core/DialogTitle";
10+
import DialogContent from "@material-ui/core/DialogContent";
11+
import DialogActions from "@material-ui/core/DialogActions";
12+
import TextField from "@material-ui/core/TextField";
13+
import DeleteIcon from "@material-ui/icons/Delete";
14+
import AddIcon from "@material-ui/icons/Add";
15+
import Blockies from "react-blockies";
16+
17+
const useStyles = makeStyles((theme) => ({
18+
listItem: {
19+
minWidth: 240,
20+
},
21+
deleteButton: {
22+
"&:hover": {
23+
color: theme.palette.error.dark,
24+
},
25+
},
26+
}));
27+
28+
const AccountListItem = ({
29+
walletKeys,
30+
handleSelectAccount,
31+
handleDeleteAccount,
32+
...props
33+
}) => {
34+
const classes = useStyles();
35+
const { accountId } = walletKeys;
36+
37+
return (
38+
<ListItem
39+
className={classes.listItem}
40+
button
41+
onClick={() => handleSelectAccount(walletKeys)}
42+
key={accountId}
43+
{...props}
44+
>
45+
<ListItemAvatar>
46+
<Avatar>
47+
<Blockies seed={accountId} />
48+
</Avatar>
49+
</ListItemAvatar>
50+
<ListItemText primary={accountId} />
51+
<DeleteIcon
52+
className={classes.deleteButton}
53+
onClick={handleDeleteAccount}
54+
/>
55+
</ListItem>
56+
);
57+
};
58+
59+
export const AddAccountItem = ({ handleAddAccount }) => {
60+
const [showAddAccount, setShowAddAccount] = useState(false);
61+
const [accountId, setAccountId] = useState("");
62+
const [privateKey, setPrivateKey] = useState("");
63+
const handleOpenAddAccount = () => setShowAddAccount(true);
64+
const handleCloseAddAccount = () => setShowAddAccount(false);
65+
66+
const handleAccountField = (e) => {
67+
const value = e.target.value;
68+
setAccountId(value);
69+
};
70+
71+
const handlePrivateKeyField = (e) => {
72+
const value = e.target.value;
73+
setPrivateKey(value);
74+
};
75+
76+
const handleOnSubmit = () => {
77+
handleAddAccount(accountId, privateKey);
78+
setAccountId("");
79+
setPrivateKey("");
80+
handleCloseAddAccount();
81+
};
82+
83+
const disableSubmit = !(accountId && privateKey);
84+
85+
return (
86+
<>
87+
<ListItem button onClick={handleOpenAddAccount}>
88+
<ListItemAvatar>
89+
<Avatar>
90+
<AddIcon />
91+
</Avatar>
92+
</ListItemAvatar>
93+
<ListItemText primary="Add account" />
94+
</ListItem>
95+
<Dialog open={showAddAccount} onClose={handleCloseAddAccount}>
96+
<DialogTitle>Add account</DialogTitle>
97+
<DialogContent>
98+
<TextField
99+
variant="outlined"
100+
margin="normal"
101+
required
102+
fullWidth
103+
id="accoundId"
104+
label="Hedera account ID"
105+
name="AccountId"
106+
onChange={handleAccountField}
107+
value={accountId}
108+
/>
109+
<TextField
110+
variant="outlined"
111+
margin="normal"
112+
required
113+
fullWidth
114+
id="privateKey"
115+
label="Private Key"
116+
name="PrivateKey"
117+
onChange={handlePrivateKeyField}
118+
value={privateKey}
119+
/>
120+
</DialogContent>
121+
<DialogActions>
122+
<Button
123+
disabled={disableSubmit}
124+
variant="contained"
125+
color="primary"
126+
type="submit"
127+
onClick={handleOnSubmit}
128+
>
129+
Done!
130+
</Button>
131+
</DialogActions>
132+
</Dialog>
133+
</>
134+
);
135+
};
136+
137+
export default AccountListItem;

0 commit comments

Comments
 (0)