metamask-extension icon indicating copy to clipboard operation
metamask-extension copied to clipboard

Published 20 hours ago • verified publisher icon MetaMask

UX: Multichain: Show 'connect account' toast when current account isn't connected

Open darkwing opened this issue 1 year ago • 1 comments

Description

Coming soon.

** ToDo **

  • [x] Add logic for conditionally showing the toast
  • [x] Implement UI and state for closing item
  • [x] Add dispatch to actually connect the account
  • [x] Ensure avatar displays properly
  • [x] Trigger tooltip to display upon connection
  • [ ] Get opposite data-theme working properly

Related issues

Fixes:https://app.zenhub.com/workspaces/metamask-wallet-ux-63529dce65cbb100265a3842/issues/gh/metamask/metamask-planning/1977

Manual testing steps

Coming soon.

Screenshots/Recordings

Before

N/A

After

Coming soon.

Pre-merge author checklist

  • [ ] I’ve followed MetaMask Coding Standards.
  • [ ] I've clearly explained what problem this PR is solving and how it is solved.
  • [ ] I've linked related issues
  • [ ] I've included manual testing steps
  • [ ] I've included screenshots/recordings if applicable
  • [ ] I’ve included tests if applicable
  • [ ] I’ve documented my code using JSDoc format if applicable
  • [ ] I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
  • [ ] I’ve properly set the pull request status:
    • [ ] In case it's not yet "ready for review", I've set it to "draft".
    • [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

  • [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

darkwing avatar Feb 15 '24 02:02 darkwing

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

github-actions[bot] avatar Feb 15 '24 02:02 github-actions[bot]

Codecov Report

Attention: Patch coverage is 59.18367% with 20 lines in your changes are missing coverage. Please review.

Project coverage is 68.61%. Comparing base (02cbc94) to head (ab55b27). Report is 1 commits behind head on develop.

Files Patch % Lines
ui/pages/routes/routes.component.js 45.83% 13 Missing :warning:
ui/pages/routes/routes.container.js 54.55% 5 Missing :warning:
ui/components/multichain/toast/toast.tsx 90.00% 1 Missing :warning:
ui/selectors/selectors.js 66.67% 1 Missing :warning:
Additional details and impacted files 
@@           Coverage Diff            @@
##           develop   #22966   +/-   ##
========================================
  Coverage    68.60%   68.61%           
========================================
  Files         1098     1099    +1     
  Lines        43319    43351   +32     
  Branches     11557    11567   +10     
========================================
+ Hits         29719    29742   +23     
- Misses       13600    13609    +9

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

codecov[bot] avatar Feb 27 '24 17:02 codecov[bot]

Builds ready [863e2a0]
Page Load Metrics (967 ± 466 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint672021233718
domContentLoaded10121292512
load542376967971466
domInteractive10121292512
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 0 Bytes (0.00%)
  • ui: 3.92 KiB (0.06%)
  • common: 67 Bytes (0.00%)

metamaskbot avatar Feb 27 '24 17:02 metamaskbot

Started an E2E but will need to be a follow up PR -- getting it working properly is difficult at the moment because we don't have a way to open the extension on a dApp without the action closing the popup right away.

const { strict: assert } = require('assert');
const { toHex } = require('@metamask/controller-utils');
const {
  defaultGanacheOptions,
  withFixtures,
  openDapp,
  DAPP_URL,
  DAPP_ONE_URL,
  unlockWallet,
  WINDOW_TITLES,
  generateGanacheOptions,
  regularDelayMs,
  switchToNotificationWindow,
} = require('../helpers');
const FixtureBuilder = require('../fixture-builder');
const { PAGES } = require('../webdriver/driver');

describe('Dapp connect toast', function () {
  it('should display when an account other than the current account is connected', async function () {
    await withFixtures(
      {
        dapp: true,
        fixtures: new FixtureBuilder().build(),
        ganacheOptions: generateGanacheOptions({
          concurrent: { port: 8546, chainId: 1338 },
        }),
        title: this.test.fullTitle(),
      },
      async ({ driver }) => {
        await driver.navigate();

        await unlockWallet(driver);
        await openDapp(driver);

        // Connect the dapp
        await driver.clickElement('#connectButton');
        await driver.delay(regularDelayMs);
        await driver.waitUntilXWindowHandles(3);
        await switchToNotificationWindow(driver);
        await driver.clickElement({
          text: 'Next',
          tag: 'button',
          css: '[data-testid="page-container-footer-next"]',
        });
        await driver.clickElement({
          text: 'Connect',
          tag: 'button',
          css: '[data-testid="page-container-footer-next"]',
        });
        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);

        //
        // TODO: Somehow, some way, open the popup
        //
        driver.navigate(PAGES.POPUP, 'tab=0');

        // Create and switch to account 2
        await driver.waitForSelector('[data-testid="account-menu-icon"]');
        await driver.clickElement('[data-testid="account-menu-icon"]');
        await driver.clickElement(
          '[data-testid="multichain-account-menu-popover-action-button"]',
        );
        await driver.clickElement(
          '[data-testid="multichain-account-menu-popover-add-account"]',
        );
        await driver.clickElement({ text: 'Create', tag: 'button' });

        // Ensure toast is displaying and connects account when clicked
        const connectSelector = {
          text: 'Connect account',
          tag: '.toasts-container button',
        };
        await driver.waitForSelector(connectSelector);
        await driver.clickElement(connectSelector);

        // Ensure the account tooltip is displaying and correct connection color
        await driver.waitForSelector(
          'div[data-original-title="Account 2 connected"]',
        );
        await driver.waitForSelector(
          '.multichain-connected-site-menu__badge.mm-box--background-color-success-default',
        );

        // TEMPORARY: KEEP TEST OPEN
        await driver.clickElement('#xx');
      },
    );
  });
});

darkwing avatar Feb 28 '24 15:02 darkwing

For the already connected accounts, if I switch the account. I see the toast. But if I disconnect all my accounts and go to the dapp. It's not able to make a request to MetaMask to connect with it

We should investigate that as a separate issue. The connections are working properly, which is what this toast is doing.

darkwing avatar Feb 28 '24 18:02 darkwing

Builds ready [ab55b27]
Page Load Metrics (708 ± 411 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint683811328340
domContentLoaded1084302010
load542049708856411
domInteractive1084302010
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 0 Bytes (0.00%)
  • ui: 3.92 KiB (0.06%)
  • common: 67 Bytes (0.00%)

metamaskbot avatar Feb 28 '24 20:02 metamaskbot

Idea for e2e: add window.stateHooks.setActiveTabOrigin in ui/index.js so that we can test this

darkwing avatar Feb 29 '24 20:02 darkwing