Skip to content

Commit

Permalink
fix: update yew example
Browse files Browse the repository at this point in the history
  • Loading branch information
@wiseaidev
wiseaidev committed Jul 8, 2024
1 parent 505b3f2 commit 32f3c0e
Showing 1 changed file with 286 additions and 6 deletions.
292 changes: 286 additions & 6 deletions examples/yew/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ use web_sys::HtmlInputElement;

#[function_component]
pub fn App() -> Html {
// Use custom rpc endpoint;
let endpoint = "https://api.mainnet-beta.solana.com";
let wallets = vec![
Wallet::Phantom.into(),
Expand Down Expand Up @@ -109,7 +108,7 @@ pub fn LoginPage() -> Html {
})
};

let transfer_sol = {
let transfer_sol_phantom = {
let phantom_wallet_adapter = phantom_wallet_adapter.clone();
let confirmed = confirmed.clone();
let input_dest = input_dest.clone();
Expand Down Expand Up @@ -150,10 +149,11 @@ pub fn LoginPage() -> Html {
})
};

let sign_msg = {
let sign_msg_phantom = {
let phantom_wallet_adapter = phantom_wallet_adapter.clone();
let confirmed = confirmed.clone();
let input_msg = input_msg.clone();
let signature = signature.clone();
let error = error.clone();

Callback::from(move |event: SubmitEvent| {
Expand Down Expand Up @@ -182,6 +182,154 @@ pub fn LoginPage() -> Html {
})
};

let transfer_sol_solflare = {
let solflare_wallet_adapter = solflare_wallet_adapter.clone();
let confirmed = confirmed.clone();
let input_dest = input_dest.clone();
let signature = signature.clone();
let error = error.clone();

Callback::from(move |event: SubmitEvent| {
event.prevent_default();
let signature = signature.clone();
let input_dest = input_dest.clone();
let confirmed = confirmed.clone();

let solflare_wallet_adapter = solflare_wallet_adapter.clone();
let error = error.clone();

spawn_local(async move {
let mut wallet_info = (*solflare_wallet_adapter).clone();
let public_key = wallet_info.public_key().unwrap();

let transfer_instruction = system_instruction::transfer(
&public_key,
&Pubkey::from_str(&input_dest).unwrap(),
input_amount,
);

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

let sign_msg_solflare = {
let solflare_wallet_adapter = solflare_wallet_adapter.clone();
let confirmed = confirmed.clone();
let input_msg = input_msg.clone();
let error = error.clone();
let signature = signature.clone();

Callback::from(move |event: SubmitEvent| {
event.prevent_default();
let signature = signature.clone();
let input_msg = input_msg.clone();
let confirmed = confirmed.clone();

let solflare_wallet_adapter = solflare_wallet_adapter.clone();
let error = error.clone();

spawn_local(async move {
let mut wallet_info = (*solflare_wallet_adapter).clone();

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

let transfer_sol_backpack = {
let backpack_wallet_adapter = backpack_wallet_adapter.clone();
let confirmed = confirmed.clone();
let input_dest = input_dest.clone();
let signature = signature.clone();
let error = error.clone();

Callback::from(move |event: SubmitEvent| {
event.prevent_default();
let signature = signature.clone();
let input_dest = input_dest.clone();
let confirmed = confirmed.clone();

let backpack_wallet_adapter = backpack_wallet_adapter.clone();
let error = error.clone();

spawn_local(async move {
let mut wallet_info = (*backpack_wallet_adapter).clone();
let public_key = wallet_info.public_key().unwrap();

let transfer_instruction = system_instruction::transfer(
&public_key,
&Pubkey::from_str(&input_dest).unwrap(),
input_amount,
);

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

let sign_msg_backpack = {
let backpack_wallet_adapter = backpack_wallet_adapter.clone();
let confirmed = confirmed.clone();
let input_msg = input_msg.clone();
let signature = signature.clone();
let error = error.clone();

Callback::from(move |event: SubmitEvent| {
event.prevent_default();
let signature = signature.clone();
let input_msg = input_msg.clone();
let confirmed = confirmed.clone();

let backpack_wallet_adapter = backpack_wallet_adapter.clone();
let error = error.clone();

spawn_local(async move {
let mut wallet_info = (*backpack_wallet_adapter).clone();

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

html! {
<div class="wallet-adapter">
<header class="header">
Expand All @@ -199,7 +347,7 @@ pub fn LoginPage() -> Html {
<div class="forms">
<div class="send-sol-form">
<h2 class="form-title">{ "Transfer SOL" }</h2>
<form onsubmit={transfer_sol}>
<form onsubmit={transfer_sol_phantom}>
<div class="form-group">
<label for="destination-address">
{ "Destination Address" }
Expand Down Expand Up @@ -231,7 +379,7 @@ pub fn LoginPage() -> Html {
</div>
<div class="sign-form">
<h2 class="form-title">{ "Sign Message" }</h2>
<form onsubmit={sign_msg}>
<form onsubmit={sign_msg_phantom}>
<div class="form-group">
<label for="message">
{ "Message" }
Expand Down Expand Up @@ -265,9 +413,141 @@ pub fn LoginPage() -> Html {
} else if let Some(ref key) = solflare_wallet_info.public_key() {
<p>{ format!("Connected Wallet: {}", solflare_wallet_info.name()) }</p>
<p>{ format!("Connected Public Key: {}", key) }</p>
<div class="forms">
<div class="send-sol-form">
<h2 class="form-title">{ "Transfer SOL" }</h2>
<form onsubmit={transfer_sol_solflare}>
<div class="form-group">
<label for="destination-address">
{ "Destination Address" }
</label>
<input
id="destination-address"
type="text"
class="form-control"
ref={input_dest_ref}
required=true
oninput={on_dest_change}
/>
</div>
<div class="form-group">
<label for="sol-amount">
{ "SOL Amount (in lamports)" }
</label>
<input
id="sol-amount"
type="number"
class="form-control"
ref={input_amount_ref}
required=true
oninput={on_amount_change}
/>
</div>
<button type="submit" class="submit-button">{ "Send" }</button>
</form>
</div>
<div class="sign-form">
<h2 class="form-title">{ "Sign Message" }</h2>
<form onsubmit={sign_msg_solflare}>
<div class="form-group">
<label for="message">
{ "Message" }
</label>
<input
id="Message"
type="text"
class="form-control"
ref={input_msg_ref}
required=true
oninput={on_msg_change}
/>
</div>
<button type="submit" class="submit-button">{ "Sign" }</button>
</form>
</div>
</div>
if *confirmed {
<div class="transaction-info">
<p>{ "Transaction Successful!" }</p>
<a
href={format!("https://solscan.io/tx/{}", sig)}
target="_blank"
rel="noopener noreferrer"
class="view-transaction-button"
>
{ "View Transaction" }
</a>
</div>
}
} else if let Some(ref key) = backpack_wallet_info.public_key() {
<p>{ format!("Connected Wallet: {}", backpack_wallet_info.name()) }</p>
<p>{ format!("Connected Public Key: {}", key) }</p>
<div class="forms">
<div class="send-sol-form">
<h2 class="form-title">{ "Transfer SOL (Coming Soon)" }</h2>
<form onsubmit={transfer_sol_backpack}>
<div class="form-group">
<label for="destination-address">
{ "Destination Address" }
</label>
<input
id="destination-address"
type="text"
class="form-control"
ref={input_dest_ref}
required=true
oninput={on_dest_change}
/>
</div>
<div class="form-group">
<label for="sol-amount">
{ "SOL Amount (in lamports)" }
</label>
<input
id="sol-amount"
type="number"
class="form-control"
ref={input_amount_ref}
required=true
oninput={on_amount_change}
/>
</div>
<button type="submit" class="submit-button">{ "Send" }</button>
</form>
</div>
<div class="sign-form">
<h2 class="form-title">{ "Sign Message (Coming Soon)" }</h2>
<form onsubmit={sign_msg_backpack}>
<div class="form-group">
<label for="message">
{ "Message" }
</label>
<input
id="Message"
type="text"
class="form-control"
ref={input_msg_ref}
required=true
oninput={on_msg_change}
/>
</div>
<button type="submit" class="submit-button">{ "Sign" }</button>
</form>
</div>
</div>
if *confirmed {
<div class="transaction-info">
<p>{ "Transaction Successful!" }</p>
<a
href={format!("https://solscan.io/tx/{}", sig)}
target="_blank"
rel="noopener noreferrer"
class="view-transaction-button"
>
{ "View Transaction" }
</a>
</div>
}
} else {
<p>{ "Connected but no wallet info available" }</p>
}
Expand All @@ -276,7 +556,7 @@ pub fn LoginPage() -> Html {
<LoginForm
phantom={Some(phantom_wallet_adapter)}
solflare={Some(solflare_wallet_adapter)}
backpack={None}
backpack={Some(backpack_wallet_adapter)}
{connected}
/>
if let Some(ref e) = *error {
Expand Down

0 comments on commit 32f3c0e

Please sign in to comment.