Proper ALGO Wallet Disconnect Pattern?

[devspacenine]

So I have an issue with ALGO wallet connections and disconnections that I'm having a real hard time figuring out. I can't seem to properly disconnect from a wallet with MyAlgoWallet and WalletConnect sessions.

This is a react hook that I'm using to facilitate wallet connections/disconnections.

import { useState, useEffect, useRef } from 'react';
import { Stdlib_User } from '@reach-sh/stdlib/dist/types/interfaces';
import { ALGO_MyAlgoConnect, ALGO_WalletConnect } from '@reach-sh/stdlib';

export interface AlgoWalletInterface {
  account?: any;
  walletAddress?: string;
  algod?: any;
  indexer?: any;
}

export interface UseAlgoWalletInterface {
  wallet: AlgoWalletInterface;
  connectMyAlgoWallet: (address?: string) => void;
  disconnectMyAlgoWallet: (error?: Error, payload?: any) => void;
  connectWalletConnect: (address?: string) => void;
  disconnectWalletConnect: (error?: Error, payload?: any) => void;
  loading?: boolean;
}

export const useAlgoWallet = (reconnectOnLoad?: boolean, address?: string): UseAlgoWalletInterface => {
  const reach = useRef<Stdlib_User<any, any, any, any, any, any, any, any, any, any> | null>(null);

  // MyAlgoWallet and WalletConnect need to by loaded dynamically to work
  const myAlgoConnect = useRef<typeof ALGO_MyAlgoConnect | null>(null);
  const walletConnect = useRef<typeof ALGO_WalletConnect | null>(null);
  const [loading, setLoading] = useState(true);

  const [wallet, setWallet] = useState({});

  async function connectMyAlgoWallet() {
    setWalletFallback({ MyAlgoConnect: myAlgoConnect.current });
    await connectWallet();
  }

  async function connectWalletConnect() {
    setWalletFallback({ WalletConnect: walletConnect.current });
    await connectWallet();
  }

  async function disconnectMyAlgoWallet() {
    await window.algorand.disconnect();
    setWallet({});
    //window.location.reload();
  }

  async function disconnectWalletConnect() {
    await window.algorand.disconnect();
    setWallet({});
    //window.location.reload();
  }

  function setWalletFallback(_wallet) {
    reach.current.setWalletFallback(
      reach.current.walletFallback({
        providerEnv: 'TestNet',
        ..._wallet,
      })
    );
  }

  async function connectWallet() {
    let account;

    // Retrieve the provider
    const provider = await reach.current.getProvider();

    // Try to retrieve the account
    try {
      account = await reach.current.getDefaultAccount();
    } catch (e) {
      if (e.message !== 'Operation cancelled') {
        console.error('Error when connecting to MyAlgoWallet: ', e, e.message);
      } else {
        console.log('Connect cancelled: ', e);
      }
      return;
    }

    // Get the algod client and the indexer client from the provider
    setWallet({
      account: account,
      walletAddress: account?.networkAccount?.addr,
      algod: provider.algodClient,
      indexer: provider.indexer,
    });

    console.log('provider: ', provider, 'account: ', account, 'address: ', account?.networkAccount?.addr);
  }

  useEffect(() => {
    console.log('useEffect: ', wallet);
    async function loadLibs() {
      const reachStdlib = await import('@reach-sh/stdlib');

      reach.current = reachStdlib.loadStdlib({ ...process.env, REACH_CONNECTOR_MODE: 'ALGO' });
      myAlgoConnect.current = reachStdlib.ALGO_MyAlgoConnect;
      walletConnect.current = reachStdlib.ALGO_WalletConnect;

      setLoading(false);
    }

    // We need to reload reach libs everytime account is reset to an empty object {}
    if (loading || (wallet && Object.keys(wallet).length === 0 && Object.getPrototypeOf(wallet) === Object.prototype)) {
      console.log('loading libs: ', loading, wallet);
      loadLibs();
    }
  }, [wallet]);

  return {
    wallet: wallet || {},
    connectMyAlgoWallet,
    disconnectMyAlgoWallet,
    connectWalletConnect,
    disconnectWalletConnect,
    loading,
  };
};

Initiating the first QR prompt to connect a wallet is working as expected, but for the life of me I cannot figure out how to properly disconnect from MyAlgoWallet and WalletConnect sessions. I would like for the QR prompt to come up again when someone tries to reconnect after disconnecting. Instead, calling the connect methods again just automatically connects to the previously used wallet address. Unless I refresh the page. For some reason with this code, the window.algorand object is not what I expect it to be. It does not include the disconnect() method and delete window.algorand does not do anything. I suspect my issue has something to do with the useRef pattern I'm using.

[jeapostrophe]

I don't understand what the main problem you're experiencing is.

First, I don't know what useRef means, so if it is a problem, I don't know anything about it.

Second, you definitely want to delete window.algorand if you expect to get a different one after.

Third, calling window.algorand.disconnect() is what you want

Fourth, disconnecting is just calling a function on the underlying thing, so if it isn't implemented right then you'll have a problem. I once had a problem where my PeraWallet app on my phone hadn't updated and I got really weird behavior.