feat: add support for dioxus 🗿

Cargo.toml

@@ -4,7 +4,7 @@ version = "0.0.2"
 edition = "2021"
 description = "🔒 A Solana Wallet adapter for WASM frameworks."
 license = "MIT"
-keywords = ["blockchain", "solana", "wallet", "wasm", "yew"]
+keywords = ["blockchain", "solana", "wallet", "wasm", "yew", "dioxus"]
 categories = ["web-programming", "cryptography", "wasm"]
 repository = "https://github.com/gigadao/wasi-sol"
 documentation = "https://docs.rs/wasi-sol"
@@ -28,15 +28,20 @@ web3 = { version = "0.19.0", default-features = false, features = ["eip-1193"] }
 wasm-bindgen = { version = "0.2.92", features = ["serde-serialize"] }
 solana-client-wasm = "1.18.0"
 emitter-rs = "0.0.5"
-yew = "0.21.0"
+yew = { version = "0.21.0", optional = true }
+dioxus = { version = "0.5", optional = true }
+
+[features]
+y = ["yew", ]
+dio = ["dioxus", ]
 
 [package.metadata.docs.rs]
 all-features = true
 rustdoc-args = ["--cfg", "docsrs"]
 
 [profile.release]
 codegen-units = 1
-opt-level = "z"
+opt-level = 3
 lto = "thin"
 strip = "symbols"
 

README.md

@@ -35,7 +35,7 @@ A Solana Wallet adapter for WASM frameworks.
 | Framework | Supported   |
 |-----------|-------------|
 | Yew       | ✅          |
-| Dioxus    | ❌          |
+| Dioxus    | ✅          |
 | Leptos    | ❌          |
 
 ## ⚙️ Features
@@ -56,6 +56,8 @@ A Solana Wallet adapter for WASM frameworks.
 
 In addition to the [`examples`](examples) directory, you can use the following snippet of code to add `wasi-sol` wallet adapter using its built-in providers and hooks:
 
+### YEW
+
 ```rust , ignore
 use yew::prelude::*;
 
@@ -179,6 +181,155 @@ fn main() {
     yew::Renderer::<App>::new().render();
 }
 ```
+
+### Dioxus
+
+```rust , ignore
+use dioxus::prelude::*;
+use wasi_sol::core::traits::WalletAdapter;
+use wasi_sol::core::wallet::BaseWalletAdapter;
+use wasi_sol::provider::dioxus::connection::ConnectionProvider;
+use wasi_sol::provider::dioxus::wallet::use_wallet;
+use wasi_sol::provider::dioxus::wallet::WalletProvider;
+
+fn main() {
+    console_error_panic_hook::set_once();
+    wasm_logger::init(wasm_logger::Config::default());
+    launch(app);
+}
+
+fn app() -> Element {
+    let endpoint = "https://api.mainnet-beta.solana.com";
+    let wallets = vec![BaseWalletAdapter::new(
+        "Phantom",
+        "https://phantom.app",
+        "phantom_icon_url",
+    )];
+
+    rsx! {
+        ConnectionProvider {
+            endpoint: endpoint,
+            WalletProvider {
+                wallets: wallets,
+                endpoint: endpoint,
+                LoginPage {}
+            }
+        }
+    }
+}
+
+#[component]
+fn LoginPage() -> Element {
+    let wallet_context = use_wallet();
+    let wallet_adapter = use_signal(|| wallet_context);
+    let mut connected = use_signal(|| false);
+    let wallet_info = (*wallet_adapter)().clone();
+    let mut error = use_signal(|| None as Option<String>);
+
+    let connect_wallet = move |_| {
+        let mut wallet_adapter = wallet_adapter.clone();
+
+        spawn(async move {
+            let mut wallet_info = (*wallet_adapter)().clone();
+
+            match wallet_info.connect().await {
+                Ok(_) => {
+                    wallet_adapter.set(wallet_info);
+                    connected.set(true);
+                }
+                Err(err) => {
+                    log::error!("Failed to connect wallet: {}", err);
+                }
+            }
+        });
+    };
+
+    let disconnect_wallet = move |_| {
+        let mut wallet_adapter = wallet_adapter.clone();
+
+        spawn(async move {
+            let mut wallet_info = (*wallet_adapter)().clone();
+
+            match wallet_info.disconnect().await {
+                Ok(_) => {
+                    wallet_adapter.set(wallet_info);
+                    connected.set(false);
+                }
+                Err(err) => {
+                    log::error!("Failed to disconnect wallet: {}", err);
+                    error.set(Some(err.to_string()));
+                }
+            }
+        });
+    };
+
+    rsx! {
+        div {
+            class: "wallet-adapter",
+            header {
+                class: "header",
+                img {
+                    src: "./header.svg",
+                    alt: "Phantom Wallet",
+                    class: "button-icon"
+                },
+                h1 { "Wasi Sol Dioxus Wallet Adapter" }
+            },
+            div {
+                class: "content",
+                div {
+                    class: "wallet-info",
+                    if (*connected)() {
+                        if let Some(ref key) = wallet_info.public_key() {
+                            p { "Connected Wallet: {wallet_info.name()}" }
+                            p { "Connected Public Key: {key}" }
+                        } else {
+                            p { "Connected but no wallet info available" }
+                        }
+                    }
+                },
+                div {
+                    class: "buttons",
+                    if !(*connected)() {
+                        button {
+                            class: "connect-button",
+                            onclick: connect_wallet,
+                            img {
+                                src: "./phantom_logo.png",
+                                alt: "Phantom Wallet",
+                                class: "button-icon"
+                            },
+                            "Connect Wallet"
+                        }
+                    } else {
+                        button {
+                            class: "disconnect-button",
+                            onclick: disconnect_wallet,
+                            img {
+                                src: "./phantom_logo.png",
+                                alt: "Disconnect Wallet",
+                                class: "button-icon"
+                            },
+                            "Disconnect Wallet"
+                        }
+                    },
+                    if let Some(ref e) = (*error)() {
+                        p {
+                            style: "color: red;",
+                            { e.clone() }
+                        }
+                    }
+                },
+            },
+            footer {
+                class: "footer",
+                p { "2024 GigaDAO Foundation." }
+            }
+        }
+    }
+}
+```
+
 ## 🎧 Event Listener
 
 ![Event Emitter Pattern](https://github.com/GigaDAO/wasi-sol/assets/62179149/65edfdc2-d86c-464a-a67f-5ef08099adc6)

assets/main.css

@@ -0,0 +1,40 @@
+body {
+    background-color: #111216;
+}
+
+#main {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+}
+
+#links {
+    width: 400px;
+    text-align: left;
+    font-size: x-large;
+    color: white;
+    display: flex;
+    flex-direction: column;
+}
+
+#links a {
+    color: white;
+    text-decoration: none;
+    margin-top: 20px;
+    margin: 10px;
+    border: white 1px solid;
+    border-radius: 5px;
+    padding: 10px;
+}
+
+#links a:hover {
+    background-color: #1f1f1f;
+    cursor: pointer;
+}
+
+#header {
+    max-width: 1200px;
+}

examples/dioxus/Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "wasi-sol-example"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+console_error_panic_hook = "0.1.7"
+log = "0.4.21"
+wasi-sol = { path = "../../", features = ["dio"] }
+wasm-logger = "0.2.0"
+dioxus = { version = "0.5", features = ["web"] }

examples/dioxus/Dioxus.toml

@@ -0,0 +1,43 @@
+[application]
+
+# App (Project) Name
+name = "wasi-sol"
+
+# Dioxus App Default Platform
+# desktop, web
+default_platform = "web"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+# resource (assets) file folder
+asset_dir = "assets"
+
+[web.app]
+
+# HTML title tag content
+title = "wasi-sol"
+
+[web.watcher]
+
+# when watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src", "assets"]
+
+# include `assets` in web platform
+[web.resource]
+
+# CSS style file
+
+style = [ "main.css" ]
+
+# Javascript code file
+script = []
+
+[web.resource.dev]
+
+# Javascript code file
+# serve: [dev-server] only
+script = []

examples/dioxus/README.md

@@ -0,0 +1,43 @@
+# 📚 WASI SOL Dioxus Phantom Component Example
+
+## 🛠️ Pre-requisites:
+
+1. Install [`rustup`](https://www.rust-lang.org/tools/install):
+
+    ```bash
+    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+    ```
+
+1. Install [`Dioxus CLI`](https://dioxuslabs.com/learn/0.5/getting_started):
+
+    ```bash
+    cargo install dioxus-cli
+    ```
+
+1. Add Wasm target:
+
+    ```bash
+    rustup target add wasm32-unknown-unknown
+    ```
+
+## 🚀 Building and Running
+
+1. Fork/Clone the GitHub repository.
+
+	```bash
+	git clone https://github.com/gigadao/wasi-sol
+	```
+
+1. Navigate to the application directory.
+
+	```bash
+	cd wasi-sol/examples/dioxus
+	```
+
+1. Run the client:
+
+	```sh
+	dx serve --port 3000
+	```
+
+Navigate to http://localhost:3000 to explore the landing page.