Skip to content

Commit

Permalink
feat: implement a backpack wallet adpater
Browse files Browse the repository at this point in the history
  • Loading branch information
@wiseaidev
wiseaidev committed Jun 29, 2024
1 parent a775b92 commit 0d8c037
Show file tree
Hide file tree
Showing 26 changed files with 1,035 additions and 566 deletions.
1 change: 1 addition & 0 deletions Cargo.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ yew = { version = "0.21.0", optional = true }
dioxus = { version = "0.5", optional = true }
leptos = { version = "0.6.12", optional = true }
serde-wasm-bindgen = "0.6.5"
web-sys = { version = "0.3.69", features = ["Window"] }

[features]
yew = ["dep:yew", ]
Expand Down
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

# 🦀 Wasi Sol

![wasi-sol-logo](https://github.com/GigaDAO/wasi-sol/assets/62179149/faac3b2c-4c6e-41e9-87f9-34506f3b21bd)

[![made-with-rust](https://img.shields.io/badge/Made%20with-Rust-1f425f.svg?logo=rust&logoColor=white)](https://www.rust-lang.org/)
[![Netlify Status](https://api.netlify.com/api/v1/badges/d7858d73-f54a-4d4f-878f-466168d8ea07/deploy-status)](https://wasi-sol.netlify.app/)
[![Netlify Status](https://api.netlify.com/api/v1/badges/15f88b9f-edfd-4e94-9bca-2150b95343ca/deploy-status)](https://wasi-sol-dio.netlify.app)
Expand All @@ -13,6 +15,8 @@
[![docs](https://docs.rs/wasi-sol/badge.svg)](https://docs.rs/wasi-sol/)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)

[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&amp%3Bref=main&amp%3Brepo=816037127&skip_quickstart=true&repo=816037127&machine=basicLinux32gb&ref=main&geo=EuropeWest)

[![GigaDAO Discord](https://dcbadge.limes.pink/api/server/gigadao-gigadex-now-live-920188005686337566)](https://discord.gg/gigadao-gigadex-now-live-920188005686337566)

| Framework | Demo |
Expand Down
Binary file added examples/dioxus/assets/backpack_logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
73 changes: 26 additions & 47 deletions examples/dioxus/assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,74 +29,53 @@ body {
margin-bottom: 20px;
}


.buttons {
display: flex;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 20px;
margin-bottom: 20px;
}

.connect-button-phantom, .connect-button-solflare {
display: flex;
background-color: #a033ff;
align-items: center;
justify-content: center;
color: #fff;
padding: 10px 20px;

button {
background-color: #000;
color: #ffffff;
border: none;
border-radius: 20px;
cursor: pointer;
padding: 10px;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
}

.connect-button-solflare {
background-color: #241e2a;
}

.connect-button-phantom:hover, .connect-button-solflare:hover {
box-shadow: 0 0 10px rgba(160, 51, 255, 0.6);
}

.disconnect-button {
cursor: pointer;
display: flex;
background-color: #e84855;
color: #fff;
align-items: center;
justify-content: center;
padding: 10px 20px;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
gap: 10px;
transition: background-color 0.3s;
}

button:hover {
background-color: #3700b3;
}

.connect-button-solflare img,
.connect-button-phantom img,
.disconnect-button img {
button img {
width: 24px;
margin-right: 10px;
height: 24px;
}

.connect-button-solflare:hover,
.connect-button-phantom:hover,
.disconnect-button:hover {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
button.disconnect {
background-color: #b00020;
}

.disconnect-button:hover {
box-shadow: 0 0 10px rgba(232, 72, 85, 0.6);
button.disconnect:hover {
background-color: #7f0000;
}

.error-message {
color: red;
font-size: 14px;
}

footer {
margin-top: 20px;
Expand Down
132 changes: 13 additions & 119 deletions examples/dioxus/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ use wasi_sol::{
connection::ConnectionProvider,
wallet::{use_wallet, WalletProvider},
},
forms::dioxus::login::LoginForm
};

fn main() {
Expand All @@ -17,8 +18,9 @@ fn main() {
fn app() -> Element {
let endpoint = "https://api.mainnet-beta.solana.com";
let wallets = vec![
BaseWalletAdapter::new("Solflare", "https://solflare.com", "./solflare_logo.png"),
BaseWalletAdapter::new("Phantom", "https://phantom.app", "./phantom_logo.png"),
BaseWalletAdapter::new(Wallet::Solflare, "https://solflare.com", "./solflare_logo.png"),
BaseWalletAdapter::new(Wallet::Phantom, "https://phantom.app", "./phantom_logo.png"),
BaseWalletAdapter::new(Wallet::Backpack, "https://backpack.app", "./backpack_logo.png"),
];

rsx! {
Expand All @@ -36,74 +38,13 @@ fn app() -> Element {
fn LoginPage() -> Element {
let phantom_context = use_wallet(Wallet::Phantom);
let solflare_context = use_wallet(Wallet::Solflare);
let backpack_context = use_wallet(Wallet::Backpack);
let phantom_wallet_adapter = use_signal(|| phantom_context);
let solflare_wallet_adapter = use_signal(|| solflare_context);
let mut connected = use_signal(|| false);
let backpack_wallet_adapter = use_signal(|| backpack_context);
let connected = use_signal(|| false);
let phantom_wallet_info = (*phantom_wallet_adapter)().clone();
let solflare_wallet_info = (*solflare_wallet_adapter)().clone();
let error = use_signal(|| None as Option<String>);

let connect_wallet_phantom = move |_| {
let mut phantom_wallet_adapter = phantom_wallet_adapter.clone();

spawn(async move {
let mut phantom_wallet_info = (*phantom_wallet_adapter)().clone();

match phantom_wallet_info.connect().await {
Ok(_) => {
phantom_wallet_adapter.set(phantom_wallet_info);
connected.set(true);
}
Err(err) => {
log::error!("Failed to connect wallet: {}", err);
}
}
});
};

let connect_wallet_solflare = move |_| {
let mut solflare_wallet_adapter = solflare_wallet_adapter.clone();

spawn(async move {
let mut solflare_wallet_info = (*solflare_wallet_adapter)().clone();

match solflare_wallet_info.connect().await {
Ok(_) => {
solflare_wallet_adapter.set(solflare_wallet_info);
connected.set(true);
}
Err(err) => {
log::error!("Failed to connect wallet: {}", err);
}
}
});
};

let disconnect_wallet = move |_| {
let mut phantom_wallet_adapter = phantom_wallet_adapter.clone();
let mut solflare_wallet_adapter = solflare_wallet_adapter.clone();

spawn(async move {
let mut phantom_wallet_info = (*phantom_wallet_adapter)().clone();
let mut solflare_wallet_info = (*solflare_wallet_adapter)().clone();

match phantom_wallet_info.disconnect().await {
Ok(_) => {
phantom_wallet_adapter.set(phantom_wallet_info);
connected.set(false);
}
Err(_err) => {}
}

match solflare_wallet_info.disconnect().await {
Ok(_) => {
solflare_wallet_adapter.set(solflare_wallet_info);
connected.set(false);
}
Err(_err) => {}
}
});
};

rsx! {
div {
Expand Down Expand Up @@ -133,60 +74,13 @@ fn LoginPage() -> Element {
}
}
},
div {
class: "buttons",
if !(*connected)() {
button {
class: "connect-button-phantom",
onclick: connect_wallet_phantom,
img {
src: phantom_wallet_info.icon(),
alt: "Phantom Wallet",
class: "button-icon-phantom"
},
"Connect Wallet"
}
button {
class: "connect-button-solflare",
onclick: connect_wallet_solflare,
img {
src: solflare_wallet_info.icon(),
alt: "Solflare Wallet",
class: "button-icon-solflare"
},
"Connect Wallet"
}
} else if let Some(ref _key) = phantom_wallet_info.public_key() {
button {
class: "disconnect-button",
onclick: disconnect_wallet,
img {
src: phantom_wallet_info.icon(),
alt: "Disconnect Wallet",
class: "button-icon"
},
"Disconnect Wallet"
}
} else if let Some(ref _key) = solflare_wallet_info.public_key() {
button {
class: "disconnect-button",
onclick: disconnect_wallet,
img {
src: solflare_wallet_info.icon(),
alt: "Disconnect Wallet",
class: "button-icon"
},
"Disconnect Wallet"
}
},
if let Some(ref e) = (*error)() {
p {
style: "color: red;",
{ e.clone() }
}
}
},
},
LoginForm {
phantom: phantom_wallet_adapter,
solflare: solflare_wallet_adapter,
backpack: backpack_wallet_adapter,
connected: connected
}
footer {
class: "footer",
p { "2024 GigaDAO Foundation." }
Expand Down
Binary file added examples/leptos/images/backpack_logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
74 changes: 25 additions & 49 deletions examples/leptos/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,79 +29,55 @@ body {
margin-bottom: 20px;
}


.buttons {
display: flex;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 20px;
margin-bottom: 20px;
}


.connect-button-phantom, .connect-button-solflare {
display: flex;
background-color: #a033ff;
align-items: center;
justify-content: center;
color: #fff;
padding: 10px 20px;
button {
background-color: #000;
color: #ffffff;
border: none;
border-radius: 20px;
cursor: pointer;
padding: 10px;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
}

.connect-button-solflare {
background-color: #241e2a;
}

.connect-button-phantom:hover, .connect-button-solflare:hover {
box-shadow: 0 0 10px rgba(160, 51, 255, 0.6);
}

.disconnect-button {
cursor: pointer;
display: flex;
background-color: #e84855;
color: #fff;
align-items: center;
justify-content: center;
padding: 10px 20px;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
gap: 10px;
transition: background-color 0.3s;
}

button:hover {
background-color: #3700b3;
}

.connect-button-solflare img,
.connect-button-phantom img,
.disconnect-button img {
button img {
width: 24px;
margin-right: 10px;
height: 24px;
}

.yew-logo {
width: 600px;
button.disconnect {
background-color: #b00020;
}

.connect-button-solflare:hover,
.connect-button-phantom:hover,
.disconnect-button:hover {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
button.disconnect:hover {
background-color: #7f0000;
}

.disconnect-button:hover {
box-shadow: 0 0 10px rgba(232, 72, 85, 0.6);
.error-message {
color: red;
font-size: 14px;
}


footer {
margin-top: 20px;
padding-top: 10px;
Expand Down
Loading

0 comments on commit 0d8c037

Please sign in to comment.