Wallet Button State Inconsistency on Page Refresh

[codersquirrelbln]

Description:
There is an issue with the wallet button not accurately reflecting the wallet connection state after a hard page refresh. Additionally, after a longer time of being idle, clicking the button opens the modal with incorrect options:

• When the button says "Connect Wallet" (i.e., the user has no associated wallet in the database), it opens the modal showing the "Disconnect Wallet" option.
• When the button says "Disconnect Wallet" (i.e., the user already has a wallet connected in the database), it opens the modal showing the "Connect Wallet" option.

Cause:
The wallet is automatically disconnected after a period of inactivity, likely due to the browser extension’s behavior. When this happens:

• The button displays the correct state (e.g., "Disconnect Wallet" or "Connect Wallet") according to the database.
• However, clicking the button initiates the wrong modal flow:
  • If the button shows "Disconnect Wallet," it incorrectly starts the "Connect Wallet" flow.

Steps to Reproduce:

• Ensure that the wallet button reflects the correct state:
  • "Connect Wallet" if no wallet is connected.
  • "Disconnect Wallet" if a wallet is connected.
• Connect a wallet successfully. The button should update to "Disconnect Wallet."
• Perform a hard refresh (Ctrl+F5 or Cmd+Shift+R), or to simulate the browser extension behavior after a period of idleness, turn off the extension.
• Observe the wallet button text.
• Click the button.

Expected Behavior:

• After a page refresh or the extension disconnects, the button should reflect the correct wallet connection state.
• Clicking the button should open the modal with the correct options:
  • "Connect Wallet" button opens the modal to connect a wallet.
  • "Disconnect Wallet" button opens the modal to disconnect the wallet.

Actual Behavior:

• The button text does not always correspond with the actual wallet connection state after a page refresh.
• Clicking the button opens the incorrect modal:
  • "Connect Wallet" button opens the "Disconnect Wallet" modal.
  • "Disconnect Wallet" button opens the "Connect Wallet" modal.

See screen recordings:
DB shows one wallet connected, button shows Disconnect Wallet, upon click modal triggers the Connect Wallet flow instead of showing the modal for Disconnect

modal_bug_disconnect_opens_connect_modal.mov

Manually delete wallet from DB, then refresh page, button text changes, but it triggers the Disconnect Wallet modal instead of Connect Wallet modal

modal_bug_manual_wallet_deletion.mov

To fix this issue, we need to ensure that the button's state is always correctly aligned with the wallet connection state in the database, especially after a page refresh or when the extension disconnects. Here's a breakdown of the possible solutions and the necessary steps to implement them:

Fix Ideas:
1. Ensure Button Reflects Wallet Connection State Correctly:
Problem: After a refresh or extension disconnection, the button doesn't correctly display dynamically whether the wallet is connected or not.

Solution: After the page refresh, check the wallet connection state in the database and update the button accordingly. This can be done by:

• Ensuring that the backend always sends the correct state for the wallet connection when rendering the page.
• Using JavaScript to update the button text based on the state of the wallet (e.g., if wallet == null show "Connect Wallet"; if wallet != null show "Disconnect Wallet").

Implementation:

• On page load or after a refresh, send an API request to the backend to check if a wallet address is associated with the current user.
• If a wallet exists in the database, display "Disconnect Wallet."
• If no wallet exists, display "Connect Wallet."
• Update the button accordingly when the extension is disconnected, using the wallet data stored in the DB if available.

2. Correct Modal Behavior for Different States:
Problem: Clicking the button opens the wrong modal, either for connecting or disconnecting, depending on the wallet's actual connection state.

Solution: Update the logic of how the button triggers the modal. The modal should always show the correct flow based on the wallet's connection state and the button's text.

Implementation:

• If the button says "Connect Wallet":
  • If the wallet is not connected, the modal should show the "Connect Wallet" flow.
  • If the wallet is disconnected due to extension inactivity but still in the DB, the modal should show "Reconnect Wallet," and provide information that the wallet is still stored in the DB.
• If the button says "Disconnect Wallet":
  • If the wallet is connected, the modal should show the "Disconnect Wallet" flow, which prompts the user to disconnect the wallet.

3. Handling Wallet Reconnection (when wallet is disconnected automatically):
Problem: If the wallet was disconnected automatically due to inactivity (browser extension), users might be confused about reconnecting.
Solution:

• Add a specific state to handle the case where the wallet was disconnected due to the browser extension, but still exists in the DB.
• Display a modal with a message like: "Your wallet is still stored in the database, but for security reasons, the connection has been interrupted. If you want to make a donation to a campaign, please reconnect your wallet."

Implementation:

• When the user tries to perform an action that requires the wallet, check if the wallet is stored in the DB but the extension is disconnected.
• If the wallet is in the DB, show the modal with the option to reconnect the wallet, ensuring that the address in the database is verified (only update if the new wallet address differs from the one stored in the DB).
• If the user reconnects, update the wallet in the database with the new address if it differs.

4. Clear Communication for Wallet State Transitions:
Problem: Users may not understand what happens when the wallet is disconnected or reconnected.

Solution: Provide clear feedback to the user when the wallet is connected, disconnected, or reconnected, explaining what is happening.

Implementation:

• Add hover text for buttons like "Connect Wallet" or "Reconnect Wallet" with explanations of why a wallet might be disconnected or need to be reconnected.
• Provide modal text like: "Your wallet was disconnected due to inactivity. Please reconnect it to continue with your donation."

Final Workflow for UX and DB Interaction:

• User has connected wallet and extension is active:

  • Button shows "Disconnect Wallet."
  • Clicking it opens the "Disconnect Wallet" modal.

• User has connected wallet, but extension is inactive (disconnected):

  • Button shows "Reconnect Wallet."
  • Clicking it opens a modal with an explanation and allows the user to reconnect the wallet.

• User has no wallet connected (empty database):
  -Button shows "Connect Wallet."

  • Clicking it opens the "Connect Wallet" modal.

• User tries to send a transaction but wallet is disconnected:

  • If a wallet is still in the DB, show a prompt to reconnect the wallet.
  • If a wallet is not in the DB, show the "Connect Wallet" flow to create a new wallet.

Next Steps to Implement:
Backend:

• Update the backend to send the correct wallet connection state when rendering the page.
• Create endpoints or logic to check whether the wallet is connected or disconnected after a refresh or due to inactivity.

Frontend:

• Handle the dynamic display of the button text based on wallet state.
• Ensure modals open with the correct options (connect, disconnect, reconnect).
• Show tooltips or information messages on hover or in modals for better UX.

Testing:

• Test the behavior when refreshing the page after wallet disconnection.
• Simulate wallet disconnection via the browser extension or manually disconnect and test how the button and modal behave.

By implementing these changes, we ensure that the button always reflects the correct wallet state, modals open with the correct options, and users are informed and guided appropriately through the wallet connection and disconnection process.