DeFly EZ Connect for React App Buttons

post by bhaney44 on Feb 26, 2023

I wanted to start using 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.

post by fabrice on Feb 28, 2023

GitHub - TxnLab/use-wallet: React hooks for using Algorand compatible wallets in dApps supports DeFly.
See demos there: GitHub - TxnLab/use-wallet: React hooks for using Algorand compatible wallets in dApps

post by bhaney44 on Feb 28, 2023

Thanks! The problem there is those methods are using React hooks. I’m looking for a simplified mechanism.

post by emg110 on Mar 4, 2023

I just posted the exact thing you want on Github for you, full code. React class components approach.

post by bhaney44 on Mar 5, 2023

Thank you very much, sir!

post by emg110 on Mar 5, 2023

At your service buddy!