Skip to content

Commit

Permalink
fix: update leptos example
Browse files Browse the repository at this point in the history
  • Loading branch information
@wiseaidev
wiseaidev committed Jul 8, 2024
1 parent 1a30b1d commit 505b3f2
Show file tree
Hide file tree
Showing 9 changed files with 160 additions and 24 deletions.
Empty file modified examples/leptos/Cargo.toml
100644 → 100755
View file
Empty file.
Empty file modified examples/leptos/README.md
100644 → 100755
View file
Empty file.
Empty file modified examples/leptos/images/backpack_logo.png
100644 → 100755
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file modified examples/leptos/images/leptos-logo.png
100644 → 100755
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file modified examples/leptos/images/phantom_logo.png
100644 → 100755
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file modified examples/leptos/images/solflare_logo.png
100644 → 100755
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 6 additions & 1 deletion examples/leptos/index.css
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ footer {
width: 600px;
}

.send-sol-form {
.send-sol-form, .sign-form {
max-width: 400px;
margin: auto;
padding: 20px;
Expand All @@ -100,6 +100,11 @@ footer {
color: #0ff;
}

.forms {
display: flex;
}


.form-title {
text-align: center;
font-size: 24px;
Expand Down
Empty file modified examples/leptos/index.html
100644 → 100755
View file
Empty file.
177 changes: 154 additions & 23 deletions examples/leptos/src/main.rs
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,26 @@ use leptos::*;

use wasi_sol::{
core::traits::WalletAdapter,
core::wallet::{BaseWalletAdapter, Wallet},
core::wallet::Wallet,
forms::leptos::login::LoginForm,
provider::leptos::{
connection::{use_connection, ConnectionProvider},
wallet::{use_wallet, WalletProvider},
},
transaction::Transaction,
pubkey::Pubkey,
system_instruction
};

use std::str::FromStr;

#[component]
pub fn App() -> impl IntoView {
let endpoint = "https://api.mainnet-beta.solana.com";
let wallets = vec![
BaseWalletAdapter::new(
Wallet::Solflare,
"https://solflare.com",
"images/solflare_logo.png",
),
BaseWalletAdapter::new(
Wallet::Phantom,
"https://phantom.app",
"images/phantom_logo.png",
),
BaseWalletAdapter::new(
Wallet::Backpack,
"https://backpack.app",
"images/backpack_logo.png",
),
Wallet::Phantom.into(),
Wallet::Solflare.into(),
Wallet::Backpack.into(),
];

view! {
Expand All @@ -43,18 +36,84 @@ pub fn App() -> impl IntoView {
#[component]
pub fn LoginPage() -> impl IntoView {
let _connection_context = use_connection();
let phantom_context = use_wallet(Wallet::Phantom);
let solflare_context = use_wallet(Wallet::Solflare);
let backpack_context = use_wallet(Wallet::Backpack);
let phantom_context = use_wallet::<Wallet>(Wallet::Phantom);
let solflare_context = use_wallet::<Wallet>(Wallet::Solflare);
let backpack_context = use_wallet::<Wallet>(Wallet::Backpack);
let (connected, set_connected) = create_signal(false);
let (phantom_wallet_adapter, set_phantom_wallet_adapter) = create_signal(phantom_context);
let (solflare_wallet_adapter, set_solflare_wallet_adapter) = create_signal(solflare_context);
let (backpack_wallet_adapter, set_sbackpack_wallet_adapter) = create_signal(backpack_context);

let input_dest_ref: NodeRef<html::Input> = create_node_ref();
let input_amount_ref: NodeRef<html::Input> = create_node_ref();
let input_msg_ref: NodeRef<html::Input> = create_node_ref();

let (dest, _set_dest) = create_signal(String::default());
let (amount, _set_amount) = create_signal(1);
let (msg, _set_msg) = create_signal(String::default());
let (sig, set_sig) = create_signal(String::default());
let (confirmed, set_confirmed) = create_signal(false);

let transfer_sol_phantom = move |ev: leptos::ev::SubmitEvent| {
ev.prevent_default();
let input_dest = input_dest_ref.get()
.expect("<input> should be mounted")
.value();
let amount = input_amount_ref.get()
.expect("<input> should be mounted")
.value().parse::<u64>().unwrap();
spawn_local(async move {
let mut wallet_info = phantom_wallet_adapter.get();
let public_key = wallet_info.public_key().unwrap();
let transfer_instruction = system_instruction::transfer(
&public_key,
&Pubkey::from_str(&input_dest).unwrap(),
amount,
);

let tx = Transaction::new_with_payer(&[transfer_instruction], Some(&public_key));
match wallet_info.sign_send_transaction(tx.clone()).await {
Ok(tx) => {
set_sig.set(tx.to_string());
set_confirmed.set(true);
}
Err(err) => {
log::error!("Error: {}", err);
}
}
});
};

let sign_msg_phantom = move |ev: leptos::ev::SubmitEvent| {
ev.prevent_default();
spawn_local(async move {
let mut wallet_info = phantom_wallet_adapter.get();
let input_msg = input_msg_ref.get()
.expect("<input> should be mounted")
.value();

match wallet_info.sign_message(&input_msg).await {
Ok(tx) => {
set_sig.set(tx.to_string());
set_confirmed.set(true);
}
Err(err) => {
log::error!("Error: {}", err);
}
}
});
};

view! {
<div class="wallet-adapter">
<header class="header">
<img src="images/leptos-logo.png" alt="Leptos Logo" class="leptos-logo" />
{move ||
if !connected.get() {
Some(view!{<img src="images/leptos-logo.png" alt="Leptos Logo" class="leptos-logo" />})
} else {
None
}
}
<h1>"Wasi Sol Wallet Adapter"</h1>
</header>
<div class="content">
Expand All @@ -67,6 +126,78 @@ pub fn LoginPage() -> impl IntoView {
view!{
<p>"Connected Wallet: " {move || phantom_wallet_adapter.get().name()} </p>
<p>"Connected Public Key: " {move || key.to_string() } </p>
<div class="forms">
<div class="send-sol-form">
<h2 class="form-title">{ "Transfer SOL" }</h2>
<form on:submit={transfer_sol_phantom}>
<div class="form-group">
<label for="destination-address">
{ "Destination Address" }
</label>
<input
id="destination-address"
type="text"
class="form-control"
node_ref={input_dest_ref}
required=true
value=dest
/>
</div>
<div class="form-group">
<label for="sol-amount">
{ "SOL Amount (in lamports)" }
</label>
<input
id="sol-amount"
type="number"
class="form-control"
node_ref={input_amount_ref}
required=true
value=amount
/>
</div>
<button type="submit" class="submit-button">{ "Send" }</button>
</form>
</div>
<div class="sign-form">
<h2 class="form-title">{ "Sign Message" }</h2>
<form on:submit={sign_msg_phantom}>
<div class="form-group">
<label for="message">
{ "Message" }
</label>
<input
id="Message"
type="text"
class="form-control"
node_ref={input_msg_ref}
required=true
value=msg
/>
</div>
<button type="submit" class="submit-button">{ "Sign" }</button>
</form>
</div>
</div>
{move ||
if confirmed.get() {
Some(view!{
<div class="transaction-info">
<p>{ "Transaction Successful!" }</p>
<a
href={format!("https://solscan.io/tx/{}", sig.get())}
target="_blank"
rel="noopener noreferrer"
class="view-transaction-button"
>
{ "View Transaction" }
</a>
</div>
})
} else {
None
}
}
}
} else if let Some(key) = solflare_wallet_adapter.get().public_key() {
view!{
Expand All @@ -87,9 +218,9 @@ pub fn LoginPage() -> impl IntoView {
}
</div>
<LoginForm
phantom=(phantom_wallet_adapter, set_phantom_wallet_adapter)
solflare=(solflare_wallet_adapter, set_solflare_wallet_adapter)
backpack=(backpack_wallet_adapter, set_sbackpack_wallet_adapter)
phantom=Some((phantom_wallet_adapter, set_phantom_wallet_adapter))
solflare=Some((solflare_wallet_adapter, set_solflare_wallet_adapter))
backpack=Some((backpack_wallet_adapter, set_sbackpack_wallet_adapter))
connected=(connected, set_connected)
/>
</div>
Expand Down

0 comments on commit 505b3f2

Please sign in to comment.