wasi_sol/forms/dioxus/
login.rs

1use dioxus::prelude::*;
2
3use crate::core::traits::WalletAdapter;
4use crate::core::wallet::BaseWalletAdapter;
5
6#[derive(Props, Clone, PartialEq)]
7pub struct CompProps {
8    pub phantom: Option<Signal<BaseWalletAdapter, UnsyncStorage>>,
9    pub solflare: Option<Signal<BaseWalletAdapter, UnsyncStorage>>,
10    pub backpack: Option<Signal<BaseWalletAdapter, UnsyncStorage>>,
11    pub connected: Signal<bool, UnsyncStorage>,
12}
13
14#[component]
15pub fn LoginForm(props: CompProps) -> Element {
16    let mut connected = props.connected;
17
18    let phantom_wallet = props.phantom;
19    let solflare_wallet = props.solflare;
20    let backpack_wallet = props.backpack;
21
22    let mut phantom_wallet_info = use_signal(|| BaseWalletAdapter::default());
23    let mut solflare_wallet_info = use_signal(|| BaseWalletAdapter::default());
24    let mut backpack_wallet_info = use_signal(|| BaseWalletAdapter::default());
25
26    if phantom_wallet.is_some() {
27        phantom_wallet_info = phantom_wallet.unwrap();
28    }
29    if solflare_wallet.is_some() {
30        solflare_wallet_info = solflare_wallet.unwrap();
31    }
32    if backpack_wallet.is_some() {
33        backpack_wallet_info = backpack_wallet.unwrap();
34    }
35
36    let error = use_signal(|| None as Option<String>);
37
38    let connect_wallet_phantom = move |_| {
39        spawn(async move {
40            let mut phantom_wallet_adapter = phantom_wallet_info();
41
42            match phantom_wallet_adapter.connect().await {
43                Ok(confirmed) => {
44                    if confirmed {
45                        phantom_wallet_info.set(phantom_wallet_adapter);
46                    }
47                    connected.set(confirmed);
48                }
49                Err(err) => {
50                    log::error!("Failed to connect wallet: {}", err);
51                }
52            }
53        });
54    };
55
56    let connect_wallet_solflare = move |_| {
57        spawn(async move {
58            let mut solflare_wallet_adapter = solflare_wallet_info();
59
60            match solflare_wallet_adapter.connect().await {
61                Ok(confirmed) => {
62                    if confirmed {
63                        solflare_wallet_info.set(solflare_wallet_adapter);
64                    }
65                    connected.set(confirmed);
66                }
67                Err(err) => {
68                    log::error!("Failed to connect wallet: {}", err);
69                }
70            }
71        });
72    };
73
74    let connect_wallet_backpack = move |_| {
75        spawn(async move {
76            let mut backpack_wallet_adapter = backpack_wallet_info();
77
78            match backpack_wallet_adapter.connect().await {
79                Ok(confirmed) => {
80                    if confirmed {
81                        backpack_wallet_info.set(backpack_wallet_adapter);
82                    }
83                    connected.set(confirmed);
84                }
85                Err(err) => {
86                    log::error!("Failed to connect wallet: {}", err);
87                }
88            }
89        });
90    };
91
92    let disconnect_wallet = move |_| {
93        spawn(async move {
94            let mut phantom_wallet_adapter = phantom_wallet_info();
95            let mut solflare_wallet_adapter = solflare_wallet_info();
96            let mut backpack_wallet_adapter = backpack_wallet_info();
97
98            match phantom_wallet_adapter.disconnect().await {
99                Ok(_) => {
100                    phantom_wallet_info.set(phantom_wallet_adapter);
101                    connected.set(false);
102                }
103                Err(_err) => {}
104            }
105
106            match solflare_wallet_adapter.disconnect().await {
107                Ok(_) => {
108                    solflare_wallet_info.set(solflare_wallet_adapter);
109                    connected.set(false);
110                }
111                Err(_err) => {}
112            }
113
114            match backpack_wallet_adapter.disconnect().await {
115                Ok(_) => {
116                    backpack_wallet_info.set(backpack_wallet_adapter);
117                    connected.set(false);
118                }
119                Err(_err) => {}
120            }
121        });
122    };
123
124    rsx! {
125        div {
126            class: "container",
127            div {
128                class: "buttons",
129                if !connected() {
130                    if phantom_wallet.is_some() {
131                        button {
132                            class: "connect-button-phantom",
133                            onclick: connect_wallet_phantom,
134                            img {
135                                src: phantom_wallet_info().icon(),
136                                alt: "Phantom Wallet",
137                                class: "button-icon-phantom"
138                            },
139                            "Connect Phantom Wallet"
140                        }
141                    }
142                    if solflare_wallet.is_some() {
143                        button {
144                            class: "connect-button-solflare",
145                            onclick: connect_wallet_solflare,
146                            img {
147                                src: solflare_wallet_info().icon(),
148                                alt: "Solflare Wallet",
149                                class: "button-icon-solflare"
150                            },
151                            "Connect Solflare Wallet"
152                        }
153                    }
154                    if backpack_wallet.is_some() {
155                        button {
156                            class: "connect-button-backpack",
157                            onclick: connect_wallet_backpack,
158                            img {
159                                src: backpack_wallet_info().icon(),
160                                alt: "Backpack Wallet",
161                                class: "button-icon-backpack"
162                            },
163                            "Connect Backpack Wallet"
164                        }
165                    }
166                } else if let Some(ref _key) = phantom_wallet_info().public_key() {
167                    button {
168                        class: "disconnect-button",
169                        onclick: disconnect_wallet,
170                        img {
171                            src: phantom_wallet_info().icon(),
172                            alt: "Disconnect Wallet",
173                            class: "button-icon"
174                        },
175                        "Disconnect Wallet"
176                    }
177                    } else if let Some(ref _key) = solflare_wallet_info().public_key() {
178                    button {
179                        class: "disconnect-button",
180                        onclick: disconnect_wallet,
181                        img {
182                            src: solflare_wallet_info().icon(),
183                            alt: "Disconnect Wallet",
184                            class: "button-icon"
185                        },
186                        "Disconnect Wallet"
187                    }
188                    },
189                if let Some(ref e) = error() {
190                    p {
191                        style: "color: red;",
192                        { e.clone() }
193                    }
194                }
195            },
196        },
197    }
198}
wasi_sol/forms/dioxus/login.rs

wasi_sol/forms/dioxus/
login.rs
