Skip to content

Commit bd2f660

Browse files
willemoldingwillemolding
committed
adds basic app and connected wasm package
1 parent 78abe06 commit bd2f660

File tree

13 files changed

+308
-0
lines changed

13 files changed

+308
-0
lines changed

‎packages/demo-wallet/.gitignore

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.pnp.*
2+
.yarn/*
3+
!.yarn/patches
4+
!.yarn/plugins
5+
!.yarn/releases
6+
!.yarn/sdks
7+
!.yarn/versions
8+
9+
dist
10+
.parcel-cache
11+
wasm-pkg

‎packages/demo-wallet/.proxyrc.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = function (app) {
2+
app.use((req, res, next) => {
3+
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
4+
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
5+
next();
6+
});
7+
};

‎packages/demo-wallet/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# WebZjs Demo Web Wallet

‎packages/demo-wallet/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "@webzjs/demo-wallet",
3+
"source": "src/index.html",
4+
"scripts": {
5+
"start:dev": "parcel --no-autoinstall --no-cache src/index.html"
6+
},
7+
"dependencies": {
8+
"@webzjs/webz-core": "workspace:^",
9+
"bootstrap": "^5.3.3",
10+
"react": "^18.2.0",
11+
"react-bootstrap": "^2.10.4",
12+
"react-dom": "^18.2.0"
13+
}
14+
}

‎packages/demo-wallet/src/App/App.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* Style inputs */
2+
input, select, button {
3+
width: 100%;
4+
padding: 12px 20px;
5+
margin: 8px 0;
6+
display: inline-block;
7+
border: 1px solid #ccc;
8+
border-radius: 4px;
9+
box-sizing: border-box;
10+
}

‎packages/demo-wallet/src/App/App.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import "./App.css";
2+
import "bootstrap/dist/css/bootstrap.min.css";
3+
4+
import { useState, useEffect, createContext } from "react";
5+
6+
import Tab from "react-bootstrap/Tab";
7+
import Tabs from "react-bootstrap/Tabs";
8+
9+
import initWasm, { initThreadPool, start, WebWallet } from "@webzjs/webz-core";
10+
11+
import { ImportAccount } from "./components/ImportAccount";
12+
import { SendFunds } from "./components/SendFunds";
13+
import { ReceiveFunds } from "./components/ReceiveFunds";
14+
import { Balance } from "./components/Balance";
15+
16+
const SAPLING_ACTIVATION = 419200;
17+
const ORCHARD_ACTIVATION = 1687104;
18+
const TIP = 2442739;
19+
20+
const MAINNET_LIGHTWALLETD_PROXY = "https://zcash-mainnet.chainsafe.dev";
21+
const TESTNET_LIGHTWALLETD_PROXY = "https://zcash-testnet.chainsafe.dev";
22+
23+
export const WalletContext = createContext();
24+
25+
export function App() {
26+
27+
useEffect(() => {
28+
async function init() {
29+
await initWasm();
30+
await initThreadPool(1);
31+
setWebWallet(new WebWallet("main", MAINNET_LIGHTWALLETD_PROXY, 1));
32+
}
33+
init();
34+
}, []);
35+
36+
let [webWallet, setWebWallet] = useState();
37+
38+
return (
39+
<div>
40+
<WalletContext.Provider value={webWallet}>
41+
<h1>WebZjs Wallet Demo</h1>
42+
43+
<Tabs defaultActiveKey="import" id="base-wallet-tabs" className="mb-3">
44+
<Tab eventKey="import" title="Import Account">
45+
<ImportAccount />
46+
</Tab>
47+
<Tab eventKey="balance" title="Balance">
48+
<Balance />
49+
</Tab>
50+
<Tab eventKey="send" title="Send">
51+
<SendFunds />
52+
</Tab>
53+
<Tab eventKey="receive" title="Receive">
54+
<ReceiveFunds />
55+
</Tab>
56+
</Tabs>
57+
</WalletContext.Provider>
58+
</div>
59+
);
60+
}

‎packages/demo-wallet/src/App/components/Balance.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Form from "react-bootstrap/Form";
2+
3+
export function Balance() {
4+
return (
5+
<Form>
6+
<Form.Group className="mb-3" controlId="formReceive">
7+
<Form.Label>Shielded ZEC (spendable):</Form.Label>
8+
<Form.Control type="text" disabled />
9+
<Form.Label>Change Pending:</Form.Label>
10+
<Form.Control type="text" disabled />
11+
</Form.Group>
12+
</Form>
13+
);
14+
}

‎packages/demo-wallet/src/App/components/ImportAccount.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { useContext, useState } from "react";
2+
3+
import Button from "react-bootstrap/Button";
4+
import Form from "react-bootstrap/Form";
5+
6+
import { WalletContext } from "../App";
7+
8+
export function ImportAccount() {
9+
let webWallet = useContext(WalletContext);
10+
11+
let [birthdayHeight, setBirthdayHeight] = useState(0);
12+
let [seedPhrase, setSeedPhrase] = useState("");
13+
14+
const handleSubmit = async (event) => {
15+
event.preventDefault();
16+
await webWallet.create_account(seedPhrase, 0, birthdayHeight);
17+
};
18+
19+
return (
20+
<Form onSubmit={handleSubmit}>
21+
<Form.Group className="mb-3" controlId="seedPhrase">
22+
<Form.Label>Seed Phrase</Form.Label>
23+
<Form.Control
24+
as="textarea"
25+
placeholder="Enter 24 word seed phrase"
26+
value={seedPhrase}
27+
onChange={({ target: { value } }) => setSeedPhrase(value)}
28+
rows={3}
29+
/>
30+
<Form.Text className="text-muted">
31+
Do not import a seed phrase holding any significant funds into this
32+
wallet demo
33+
</Form.Text>
34+
</Form.Group>
35+
36+
<Form.Group className="mb-3" controlId="birthdayHeight">
37+
<Form.Label>Birthday Block Height</Form.Label>
38+
<Form.Control
39+
type="number"
40+
placeholder="Birthday block height"
41+
value={birthdayHeight}
42+
onChange={({ target: { value } }) =>
43+
setBirthdayHeight(parseInt(value))
44+
}
45+
/>
46+
</Form.Group>
47+
<Button variant="primary" type="submit">
48+
Import
49+
</Button>
50+
</Form>
51+
);
52+
}

‎packages/demo-wallet/src/App/components/ReceiveFunds.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Form from "react-bootstrap/Form";
2+
3+
export function ReceiveFunds() {
4+
return (
5+
<Form>
6+
<Form.Label>To Account:</Form.Label>
7+
<Form.Select>
8+
<option>Account 1</option>
9+
</Form.Select>
10+
<Form.Text className="text-muted">
11+
Share one of these addresses to receive funds
12+
</Form.Text>
13+
<Form.Group className="mb-3" controlId="formReceive">
14+
<Form.Label>Unified Address:</Form.Label>
15+
<Form.Control type="text" disabled />
16+
<Form.Label>Transparent Address:</Form.Label>
17+
<Form.Control type="text" disabled />
18+
</Form.Group>
19+
</Form>
20+
);
21+
}

‎packages/demo-wallet/src/App/components/SendFunds.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Button from "react-bootstrap/Button";
2+
import Form from "react-bootstrap/Form";
3+
4+
export function SendFunds() {
5+
return (
6+
<Form>
7+
<Form.Group className="mb-3" controlId="formSend">
8+
<Form.Label>From Account:</Form.Label>
9+
<Form.Select>
10+
<option>Account 1</option>
11+
</Form.Select>
12+
<Form.Label>To:</Form.Label>
13+
<Form.Control type="text" placeholder="Zcash z-address"/>
14+
<Form.Label>Amount:</Form.Label>
15+
<Form.Control type="number" placeholder="0.0" size="lg"/>
16+
<Form.Label>Memo (optional):</Form.Label>
17+
<Form.Control type="text" placeholder="memo text (max 512 bytes)"/>
18+
</Form.Group>
19+
<Button variant="primary" type="submit">
20+
Send
21+
</Button>
22+
</Form>
23+
);
24+
}

0 commit comments

Comments
 (0)