DeFly EZ Connect for React App Buttons

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.


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]);
// wallet disconnect
const disconnect = () => {

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", () => {
    .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
  .then((newAccounts) => {
    // Setup the disconnect event listener
    deflyWallet.connector?.on("disconnect", handleDisconnectWalletClick);

  .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.


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

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

1 Like

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

1 Like

Thank you very much, sir!

1 Like

At your service buddy!

1 Like