Connecting and Disconnecting

With auto-detection implemented, the next step is adding the following connection management methods to your wallet's controller.ts file:

  • canAutoConnect()
  • isConnected()
  • connect()
  • disconnect()

canAutoConnect()

This method determines whether the wallet can automatically connect without requiring user interaction or displaying a login prompt.

Suggested Implementation

Method 1: Use internal states

Some wallets maintain internal states (such as locked or connected) and provide methods to check those states.

Method 2: Silent account query

Most wallets allow calling getAccounts() without triggering authentication. This method returns:

  • A valid account array if the user is already logged in.
  • An empty array or error if authentication is required.

Use either approach to determine if WalletConnect can establish an automatic connection on page refresh.

Important!
Auto-connection only works when a user was previously authenticated with the wallet.
The following code example is from OPWallet:
canAutoConnect() implementation using getAccounts()typescript
class OPWallet implements WalletBase {
    //...
    async canAutoConnect(): Promise<boolean> {
        // getAccounts returns empty array if not connected,
        // and returns some info if connected, all this 
        // without launching connection modal window.
        const accounts = (await this.walletBase?.getAccounts()) || [];
        return accounts.length > 0;
    }
    //...
}

isConnected()

This method returns a boolean indicating the current WalletConnect connection status.
Return true when the wallet is connected. This requires both conditions to be met:

  • The user is logged into the wallet.
  • WalletConnect has an established connection with the wallet.

Return false otherwise.

Suggested Implementation

Maintain a boolean state that is set to true when connect() succeeds and false when disconnect() is called.

canAutoConnect() only checks if the user is logged into the wallet while isConnected() verifies the complete WalletConnect connection state.

The following code example is from OPWallet:
isConnected() implementationtypescript
class OPWallet implements WalletBase {
    //...
    isConnected() : boolean {
        return !!this.walletBase && this._isConnected;
    }
    //...
}

connect()

This method initiates the wallet connection process and returns an array of connected account addresses. The behavior depends on the wallet's current state:

  • Locked: Display the login/authentication prompt to the user.
  • Unlocked: Connect directly without prompting, if possible.

Suggested Implementation

Call your wallet's connection API (typically connect() or similar method).

The following code example is from OPWallet:
connect() implementationtypescript
class OPWallet implements WalletBase {
    //...
    async connect(): Promise<string[]> {
        // Safe guard, should never happen
        if (!this.isInstalled() || !this.walletBase) {
            throw new Error(notInstalledError);
        }
        // In OpWallet, requestAccounts will
        // - connect automatically if wallet is logged in
        // - launch login form if wallet is not open
        return this.walletBase.requestAccounts().then((accounts: string[]) => {
            // Set _isConnected to be returned by the isConnected() call
            this._isConnected = accounts.length > 0;
            // Should return a list of string (each on being an account address)
            return accounts;
        });
    }
    //...
}

disconnect()

This method terminates the connection between WalletConnect and the wallet. After disconnection, the next connect() call will require the user to authenticate or select an account.

Suggested Implementation

Call your wallet's disconnection method (typically disconnect() or similar).

The following code example is from OPWallet:
disconnect() implementationtypescript
class OPWallet implements WalletBase {
    //...
    async disconnect() Promise<void>; {
        // Safe guard, should never happen
        if (!this.isInstalled() || !this.walletBase) {
            throw new Error(notInstalledError);
        }
        // Need to check if we are 'really' connected because
        // in OpWallet, calling disconnect, if we are not already
        // connected, will show the login window to the user!
        return this._isConnected
            ? await this.walletBase.disconnect().then(() => {
                // Set the _isConnected to be read by isConnected() call
                this._isConnected = false;
            })
            : undefined;
    }
    //...
}