Skip to content

Commit deb1781

Browse files
skutcherskutcher
committed
initial frontend commit
1 parent 7d97c29 commit deb1781

6 files changed

Lines changed: 160 additions & 0 deletions

File tree

‎frontend/Cargo.toml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
[package]
2+
name = "dioxus_meta_app"
3+
version = "0.1.0"
4+
edition = "2024"
5+
6+
[dependencies]
7+
dioxus = { version = "0.6.3", features = ["macro","web"] }
8+
dioxus-web = "0.6.3"
9+
wasm-bindgen = "0.2"
10+
wasm-bindgen-futures = "0.4"
11+
js-sys = "0.3"
12+
web-sys = { version = "0.3", features = ["Window", "console", "HtmlInputElement"] }
13+
serde = { version = "1.0", features = ["derive"] }
14+
serde_json = "1.0"

‎frontend/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Dioxus 0.6.3 MetaMask App</title>
6+
</head>
7+
<body>
8+
<div id="main"></div>
9+
<script type="module">
10+
import init from "./main.js";
11+
init();
12+
</script>
13+
</body>
14+
</html>

‎frontend/src/app.rs‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
use dioxus::prelude::*;
2+
use wasm_bindgen_futures::spawn_local;
3+
use crate::metamask::{connect_metamask, wrap_tokens, unwrap_tokens};
4+
5+
#[component]
6+
pub fn App() -> Element {
7+
// Signals for input
8+
let address = use_signal(|| "".to_string());
9+
let mut underlying = use_signal(|| "".to_string());
10+
let mut wrapped = use_signal(|| "".to_string());
11+
let mut amount = use_signal(|| "".to_string());
12+
13+
// Signal for transaction status
14+
let tx_status = use_signal(|| "".to_string());
15+
16+
let contract_address = "0xYourContractAddressHere";
17+
18+
rsx! {
19+
div {
20+
h2 { "dToken Wrapper UI" }
21+
22+
// Connect MetaMask
23+
button {
24+
onclick: move |_| {
25+
let mut address = address.clone();
26+
spawn_local(async move {
27+
let addr = connect_metamask().await;
28+
address.set(addr.as_string().unwrap_or_default());
29+
});
30+
},
31+
"Connect MetaMask"
32+
}
33+
p { "Connected: {address}" }
34+
35+
// Input for underlying token
36+
input {
37+
placeholder: "Underlying token address",
38+
value: "{underlying}",
39+
oninput: move |e| underlying.set(e.value())
40+
}
41+
42+
// Input for amount
43+
input {
44+
placeholder: "Amount",
45+
value: "{amount}",
46+
oninput: move |e| amount.set(e.value())
47+
}
48+
49+
// Wrap button
50+
button {
51+
onclick: move |_| {
52+
let underlying = underlying.clone();
53+
let amount = amount.clone();
54+
let mut tx_status = tx_status.clone();
55+
spawn_local(async move {
56+
tx_status.set("Wrapping...".to_string());
57+
let res = wrap_tokens(contract_address, &underlying.read(), &amount.read()).await;
58+
tx_status.set(format!("Wrap done: {:?}", res));
59+
});
60+
},
61+
"Wrap Tokens"
62+
}
63+
64+
// Input for wrapped token
65+
input {
66+
placeholder: "Wrapped token address",
67+
value: "{wrapped}",
68+
oninput: move |e| wrapped.set(e.value())
69+
}
70+
71+
// Unwrap button
72+
button {
73+
onclick: move |_| {
74+
let wrapped = wrapped.clone();
75+
let amount = amount.clone();
76+
let mut tx_status = tx_status.clone();
77+
spawn_local(async move {
78+
tx_status.set("Unwrapping...".to_string());
79+
let res = unwrap_tokens(contract_address, &wrapped.read(), &amount.read()).await;
80+
tx_status.set(format!("Unwrap done: {:?}", res));
81+
});
82+
},
83+
"Unwrap Tokens"
84+
}
85+
86+
// Transaction status display
87+
p { "Transaction Status: {tx_status}" }
88+
}
89+
}
90+
}

‎frontend/src/main.rs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
mod app;
2+
mod metamask;
3+
4+
fn main() {
5+
// Launch the root component
6+
dioxus::launch(app::App);
7+
}

‎frontend/src/metamask.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { ethers } from "https://cdn.jsdelivr.net/npm/ethers/dist/ethers.min.js";
2+
3+
let provider;
4+
let signer;
5+
6+
export async function connect_metamask() {
7+
if (!window.ethereum) throw new Error("MetaMask not installed");
8+
await window.ethereum.request({ method: 'eth_requestAccounts' });
9+
provider = new ethers.BrowserProvider(window.ethereum);
10+
signer = await provider.getSigner();
11+
return await signer.getAddress();
12+
}
13+
14+
export async function wrap_tokens(contractAddress, underlying, amount) {
15+
const abi = ["function wrap(address underlying, uint256 amount) external"];
16+
const contract = new ethers.Contract(contractAddress, abi, signer);
17+
const tx = await contract.wrap(underlying, amount);
18+
return tx.wait();
19+
}
20+
21+
export async function unwrap_tokens(contractAddress, wrapped, amount) {
22+
const abi = ["function unwrap(address wrapped, uint256 amount) external"];
23+
const contract = new ethers.Contract(contractAddress, abi, signer);
24+
const tx = await contract.unwrap(wrapped, amount);
25+
return tx.wait();
26+
}

‎frontend/src/metamask.rs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
use wasm_bindgen::prelude::*;
2+
3+
// Bind JS functions in metamask.js
4+
#[wasm_bindgen(module = "/src/metamask.js")]
5+
extern "C" {
6+
pub async fn connect_metamask() -> JsValue;
7+
pub async fn wrap_tokens(contract: &str, underlying: &str, amount: &str) -> JsValue;
8+
pub async fn unwrap_tokens(contract: &str, wrapped: &str, amount: &str) -> JsValue;
9+
}

0 commit comments

Comments
 (0)