๐ณ A Solana Wallet adapter for WASM frameworks (WIP).
๐ฆ Wasi Sol
| Framework | Demo | Live Demo | | --- | --- | --- | | Yew | |
| | Dioxus |
|
| | Leptos |
|
|
A Solana Wallet adapter for WASM frameworks.
๐ Wallets Support
| Wallet | Supported | Features | |-----------|-------------|-------------------| | Phantom | โ | All | | Solflare | โ | All | | Backpack | โ | All |
๐ Wasm Frameworks Support
| Framework | Supported | |-----------|-------------| | Yew | โ | | Dioxus | โ | | Leptos | โ |
โ๏ธ Features
| Method | Supported | Tested | |-----------------------|-----------|--------| | connect | โ
| โ
| | disconnect | โ
| โ
| | sign_in | โ
| โ
| | sign_message | โ
| โ
| | sign_transaction | โ
| โ
| | send_transaction | โ
| โ
|
๐ฅ Getting Started
Wasi Sol provides providers and hooks that you can use to bring all wallet adapter functionalities to your app. To begin, wrap your main App component with the corresponding providers:
, ignore
// Yew Component
#[function_component] pub fn App() -> Html { let endpoint = "https://api.mainnet-beta.solana.com"; let wallets = vec![ Wallet::Phantom.into(), Wallet::Solflare.into(), Wallet::Backpack.into(), ];
html! { <ConnectionProvider {endpoint}> <WalletProvider {wallets}> <LoginPage /> </WalletProvider> </ConnectionProvider> } }
This will allow you to use the hooks to create the wallet adapter that exists in the wallets vector:
, ignore
// Yew Component
#[function_component] pub fn LoginPage() -> Html { let phantomcontext = usewallet::<Wallet>(Wallet::Phantom); let solflarecontext = usewallet::<Wallet>(Wallet::Solflare); let backpackcontext = usewallet::<Wallet>(Wallet::Backpack);
// ...snip...
html! { <> </> } }
Now you can choose the wallets you want to add to allow users to connect to. Wasi Sol comes with built-in reusable components that encapsulate all connect and disconnect logic so that you can develop web apps quickly:
, ignore
// Yew Component
#[function_component] pub fn LoginPage() -> Html { // ...snip...
html! { <LoginForm phantom={Some(phantomwalletadapter)} solflare={Some(solflarewalletadapter)} backpack={None} {connected} /> } }
This will select the Phantom and Solflare wallets and allow users to connect them to the app. The Backpack wallet is disabled in this case.
More detailed implementations can be found in the examples below.
๐ Examples
| Framework | Example | |-----------|-------------| | Yew | 
| | Dioxus | | | Leptos | |
๐ง Event Listener
This crate implements a handy event listener pattern with a built-in emitter object that you can use to subscribe to particular events. This functionality allows you to set state in the UI, perform actions on wallet connect, and more.
, ignore
// Yew Component
// ...snip...
#[function_component] pub fn LoginPage() -> Html { let walletcontext = usewallet(); let connected = use_state(|| false); let walletadapter = usestate(|| wallet_context);
let connect_wallet = { // ...snip...
Callback::from(move |_| { // ...snip...
spawn_local(async move { let mut walletinfo = (*walletadapter).clone();
walletinfo.emitter.on("connect", move |publickey: Pubkey| { log::info!("Event Listener: Got pubkey {}", public_key); walletadapter.set(walletinfo); connected.set(true); });
match wallet_info.connect().await { Ok(_) => { } Err(err) => { log::error!("Failed to connect wallet: {}", err); } } }); }) };
// ...snip...
html! { <> </> } }
๐ฅ Contributing
Contributions and feedback are welcome! If you'd like to contribute, report an issue, or suggest an enhancement, please engage with the project on GitHub. Your contributions help improve this library for the community.
๐ License
This project is licensed under the MIT License.
