I wanted to start use the DeFly wallet for the Choice Coin voting application. The goal is to allow users to connect their DeFly wallets to use Choice to vote.
The way the app needs to work is to allow the user to click the connect button to connect their DeFly wallet and the disconnect button to disconnect their DeFly wallet.
Problem
There exists no known method for enabling users to connect decentralized applications to their DeFly wallet via buttons in a react app.
For example, the app currently uses PeraWallet. I built an ez connect for PeraWallet, but the user experience is way better on DeFly, where the PeraWallet experience is awful and users are constantly complaining about it. So, I want to use DeFly instead.
// Algorand Wallet
// Wallet Connect
async function walletConnect() {
const newAccounts= await perawallet.connect()
localStorage.setItem("address", newAccounts[0]);
window.location.reload()
}
// wallet disconnect
const disconnect = () => {
perawallet.disconnect()
localStorage.removeItem("address");
window.location.reload()
}
The functions are integrated with the app via the useEffect method.
function App() {
useEffect(() => {
perawallet.reconnectSession().then((accounts) => {
if (accounts.length) {
localStorage.setItem("address", accounts[0]);
}
perawallet.connector?.on("disconnect", () => {
localStorage.removeItem("address");
});
})
.catch((e) => console.log(e));
}, [])
return (.......
....................
Finally, the functions are connected with buttons.
<button id='button1' onClick={walletConnect}> Connect</button>
<button id='button2' onClick={disconnect}> Disconnect</button>
With DeFly, so far we have the following connection and disconnect mechanism.
// DeFly
// Connect handler
deflyWallet
.connect()
.then((newAccounts) => {
// Setup the disconnect event listener
deflyWallet.connector?.on("disconnect", handleDisconnectWalletClick);
setAccountAddress(newAccounts[0]);
})
.reject((error) => {
// You MUST handle the reject because once the user closes the modal, deflyWallet.connect() promise will be rejected.
// For the async/await syntax you MUST use try/catch
if (error?.data?.type !== "CONNECT_MODAL_CLOSED") {
// log the necessary errors
}
});
Solution Sought
A way to enable DeFly wallet connection functionality in: 1) a react app, 2) via buttons. For more, see #7 on GitHub.