feat(874): add tooltip to connect hardwallet and style refactor

MetaMask · Jul 21, 2023 · 9d2d8e7 · 9d2d8e7
1 parent 1125115
commit 9d2d8e7
Show file tree

Hide file tree

Showing 13 changed files with 238 additions and 79 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap b/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap
@@ -6,18 +6,51 @@ exports[`ConnectHardwareForm should match snapshot 1`] = `
     class="new-external-account-form"
   >
     <div
-      class="hw-connect__header"
+      class="mm-box hw-connect__header mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center"
     >
-      <h3
-        class="hw-connect__header__title"
+      <div
+        class="mm-box hw-connect__header__title-wrapper mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        Connect a hardware wallet
-      </h3>
-      <p
-        class="hw-connect__header__msg"
+        <h3
+          class="mm-box mm-text mm-text--heading-md mm-text--font-weight-bold mm-box--margin-top-2 mm-box--margin-bottom-3 mm-box--margin-left-auto mm-box--color-text-default"
+        >
+          Connect a hardware wallet
+        </h3>
+        <button
+          aria-label="Close"
+          class="box mm-button-icon mm-button-icon--size-sm box--margin-left-auto box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
+          data-testid="hardware-connect-close-btn"
+        >
+          <span
+            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
+            style="mask-image: url('./images/icons/close.svg');"
+          />
+        </button>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center"
       >
-        Select a hardware wallet you'd like to use with MetaMask.
-      </p>
+        <h5
+          class="mm-box mm-text hw-connect__header__msg mm-text--body-md mm-box--margin-top-2 mm-box--margin-bottom-3 mm-box--color-text-default"
+        >
+          Select a hardware wallet you would like to use with MetaMask.
+        </h5>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-1"
+            class=""
+            data-original-title="Hardware wallet integrations use API calls to external servers, which can see your IP address and the smart contract addresses you interact with."
+            data-tooltipped=""
+            style="display: inline;"
+            tabindex="0"
+          >
+            <span
+              class="box mm-icon mm-icon--size-sm box--margin-left-4 box--display-inline-block box--flex-direction-row box--color-icon-default"
+              style="mask-image: url('./images/icons/security-user.svg');"
+            />
+          </div>
+        </div>
+      </div>
     </div>
     <div
       class="hw-connect__btn-wrapper"

diff --git a/ui/pages/create-account/connect-hardware/account-list.js b/ui/pages/create-account/connect-hardware/account-list.js
@@ -263,7 +263,7 @@ AccountList.propTypes = {
   onUnlockAccounts: PropTypes.func,
   onCancel: PropTypes.func,
   onAccountRestriction: PropTypes.func,
-  hdPaths: PropTypes.array.isRequired,
+  hdPaths: PropTypes.object.isRequired,
 };
 
 AccountList.contextTypes = {

diff --git a/ui/pages/create-account/connect-hardware/account-list.test.js b/ui/pages/create-account/connect-hardware/account-list.test.js
@@ -14,7 +14,7 @@ const render = () => {
   });
 
   const props = {
-    selectedPath: TREZOR_HD_PATHS[0].path,
+    selectedPath: TREZOR_HD_PATHS[0].value,
     device: 'trezor',
     accounts: [
       {

diff --git a/ui/pages/create-account/connect-hardware/index.js b/ui/pages/create-account/connect-hardware/index.js
@@ -371,6 +371,7 @@ class ConnectHardwareForm extends Component {
           connectToHardwareWallet={this.connectToHardwareWallet}
           browserSupported={this.state.browserSupported}
           ledgerTransportType={this.props.ledgerTransportType}
+          onCancel={this.onCancel}
         />
       );
     }

diff --git a/ui/pages/create-account/connect-hardware/index.scss b/ui/pages/create-account/connect-hardware/index.scss
@@ -8,21 +8,8 @@
 .hw-connect {
   width: 100%;
 
-  &__header {
-    &__title {
-      @include H3;
-
-      margin-top: 5px;
-      margin-bottom: 15px;
-    }
-
-    &__msg {
-      @include H6;
-
-      color: var(--color-text-muted);
-      margin-top: 10px;
-      margin-bottom: 20px;
-    }
+  &__header__title-wrapper {
+    width: 100%;
   }
 
   &__QR-subtitle {
@@ -70,8 +57,8 @@
   &__btn {
     background: var(--color-background-alternative);
     border: 1px solid var(--color-border-muted);
-    height: 100px;
-    width: 150px;
+    height: 148px;
+    width: 199px;
     flex: 1;
     display: flex;
     align-items: center;
@@ -81,13 +68,13 @@
     margin-right: 15px;
 
     &__img {
-      width: 95px;
+      width: 136px;
     }
   }
 
   &__btn.selected {
     border-color: var(--color-primary-default);
-    width: 149px;
+    width: 199px;
   }
 
   &__btn:first-child {
@@ -118,13 +105,6 @@
     }
   }
 
-  &__title {
-    @include H4;
-
-    padding-top: 10px;
-    font-weight: 400;
-  }
-
   &__unlock-title {
     @include H3;
 
@@ -134,12 +114,6 @@
   }
 
   &__msg {
-    @include H6;
-
-    color: var(--color-text-muted);
-    margin-top: 10px;
-    margin-bottom: 15px;
-
     &-link {
       @include H6;
 

diff --git a/ui/pages/create-account/connect-hardware/index.test.tsx b/ui/pages/create-account/connect-hardware/index.test.tsx
@@ -28,19 +28,24 @@ jest.mock('../../../selectors', () => ({
   },
 }));
 
+const MOCK_RECENT_PAGE = '/home';
 jest.mock('../../../ducks/history/history', () => ({
-  getMostRecentOverviewPage: () => '',
+  getMostRecentOverviewPage: jest
+    .fn()
+    .mockImplementation(() => MOCK_RECENT_PAGE),
 }));
 
 const mockTrackEvent = jest.fn();
-
+const mockHistoryPush = jest.fn();
 const mockProps = {
   forgetDevice: () => jest.fn(),
   showAlert: () => jest.fn(),
   hideAlert: () => jest.fn(),
   unlockHardwareWalletAccount: () => jest.fn(),
   setHardwareWalletDefaultHdPath: () => jest.fn(),
-  history: {},
+  history: {
+    push: mockHistoryPush,
+  },
   defaultHdPath: "m/44'/60'/0'/0",
   mostRecentOverviewPage: '',
   trackEvent: () => mockTrackEvent,
@@ -83,6 +88,7 @@ const mockState = {
 
 describe('ConnectHardwareForm', () => {
   const mockStore = configureMockStore([thunk])(mockState);
+
   it('should match snapshot', () => {
     const { container } = renderWithProvider(
       <ConnectHardwareForm {...mockProps} />,
@@ -92,6 +98,17 @@ describe('ConnectHardwareForm', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should close the form when close button is clicked', () => {
+    const { getByTestId } = renderWithProvider(
+      <ConnectHardwareForm {...mockProps} />,
+      mockStore,
+    );
+    const closeButton = getByTestId('hardware-connect-close-btn');
+    fireEvent.click(closeButton);
+    expect(mockHistoryPush).toHaveBeenCalledTimes(1);
+    expect(mockHistoryPush).toHaveBeenCalledWith(MOCK_RECENT_PAGE);
+  });
+
   describe('U2F Error', () => {
     it('should render a U2F error', async () => {
       mockConnectHardware.mockRejectedValue(new Error('U2F Error'));