MetaMask · DDDDDanica · Jul 24, 2023 · Jul 20, 2023 · DDDDDanica · Jul 21, 2023
@@ -3,21 +3,35 @@
 exports[`ConnectHardwareForm should match snapshot 1`] = `
 <div>
   <div
-    class="new-external-account-form"
+    class="mm-box new-external-account-form mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
   >
     <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--margin-top-6 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-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>
+      <h5
+        class="mm-box mm-text hw-connect__header__msg mm-text--body-md mm-box--margin-top-5 mm-box--margin-bottom-3 mm-box--color-text-default"
       >
-        Select a hardware wallet you'd like to use with MetaMask.
-      </p>
+        Select a hardware wallet you would like to use with MetaMask.
+      </h5>
     </div>
     <div
       class="hw-connect__btn-wrapper"
@@ -98,13 +112,16 @@ exports[`ConnectHardwareForm should match snapshot 1`] = `
       </button>
     </div>
     <button
-      class="button btn--rounded btn-primary btn--large hw-connect__connect-btn"
+      class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled hw-connect__connect-btn mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
       disabled=""
-      role="button"
-      tabindex="0"
     >
       Continue
     </button>
+    <h6
+      class="mm-box mm-text new-external-account-form footer mm-text--body-sm mm-text--text-align-center mm-box--margin-top-4 mm-box--color-text-alternative"
+    >
+      Hardware wallet integrations use API calls to external servers, which can see your IP address and the smart contract addresses you interact with.
+    </h6>
   </div>
 </div>
 `;
@@ -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 = {

@@ -14,7 +14,7 @@ const render = () => {
   });
 
   const props = {
-    selectedPath: TREZOR_HD_PATHS[0].path,
+    selectedPath: TREZOR_HD_PATHS[0].value,
     device: 'trezor',
     accounts: [
       {

@@ -371,6 +371,7 @@ class ConnectHardwareForm extends Component {
           connectToHardwareWallet={this.connectToHardwareWallet}
           browserSupported={this.state.browserSupported}
           ledgerTransportType={this.props.ledgerTransportType}
+          onCancel={this.onCancel}
         />
       );
     }

@@ -1,5 +1,4 @@
 .hw-tutorial {
-  width: 375px;
   overflow: visible;
   display: block;
   padding: 15px 30px;
@@ -8,21 +7,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 +56,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 +67,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 +104,6 @@
     }
   }
 
-  &__title {
-    @include H4;
-
-    padding-top: 10px;
-    font-weight: 400;
-  }
-
   &__unlock-title {
     @include H3;
 
@@ -134,12 +113,6 @@
   }
 
   &__msg {
-    @include H6;
-
-    color: var(--color-text-muted);
-    margin-top: 10px;
-    margin-bottom: 15px;
-
     &-link {
       @include H6;
 
@@ -270,10 +243,9 @@
 }
 
 .new-external-account-form {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  padding: 15px 30px 0;
+  &.footer {
+    width: 520px;
+  }
 
   &.unsupported-browser {
     height: 210px;

@@ -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'));