[MMI] confirm-add-custodian-token component (#18261)

* adds component with locales and test * adds feedback from review * adds storeis file * update snapshots * prettier * clean up stories file * relocation * review fixes * Update ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js Co-authored-by: George Marshall <[email protected]> * Update ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js Co-authored-by: George Marshall <[email protected]> * Update ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js Co-authored-by: George Marshall <[email protected]> * Button path remove * Update ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js Co-authored-by: George Marshall <[email protected]> * pulled * stories file update location --------- Co-authored-by: George Marshall <[email protected]>
MetaMask · Mar 31, 2023 · 234fb4a · 234fb4a
1 parent e895ff3
commit 234fb4a
Show file tree

Hide file tree

Showing 11 changed files with 501 additions and 46 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/ui/components/institutional/jwt-url-form/__snapshots__/jwt-url-form.test.js.snap b/ui/components/institutional/jwt-url-form/__snapshots__/jwt-url-form.test.js.snap
@@ -3,16 +3,16 @@
 exports[`JwtUrlForm shows JWT text area when no jwt token exists 1`] = `
 <div>
   <div
-    class="box jwt-url-form box--margin-bottom-8 box--display-flex box--flex-direction-row box--align-items-flex-start"
+    class="box jwt-url-form box--margin-bottom-8 box--display-flex box--flex-direction-column box--align-items-flex-start"
   >
     <div
-      class="box jwt-url-form__jwt-container box--margin-bottom-6 box--flex-direction-row"
+      class="box jwt-url-form__jwt-container box--margin-top-4 box--margin-bottom-6 box--display-flex box--flex-direction-column box--align-items-center box--width-full"
     >
       <div
         class="box box--flex-direction-row"
       >
         <p
-          class="box mm-text jwt-url-form__instruction mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text jwt-url-form__instruction mm-text--body-md box--display-block box--flex-direction-row box--color-text-default"
         >
           input text
         </p>
@@ -25,10 +25,10 @@ exports[`JwtUrlForm shows JWT text area when no jwt token exists 1`] = `
       </div>
     </div>
     <div
-      class="box jwt-url-form__jwt-apiUrlInput box--flex-direction-row"
+      class="box box--flex-direction-row box--width-full"
     >
       <p
-        class="box mm-text jwt-url-form__instruction mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="box mm-text jwt-url-form__instruction mm-text--body-md box--display-block box--flex-direction-row box--color-text-default"
       />
       <div
         class="box box--flex-direction-row"

diff --git a/ui/components/institutional/jwt-url-form/jwt-url-form.js b/ui/components/institutional/jwt-url-form/jwt-url-form.js
@@ -5,6 +5,8 @@ import {
   AlignItems,
   DISPLAY,
   BorderColor,
+  BLOCK_SIZES,
+  FLEX_DIRECTION,
 } from '../../../helpers/constants/design-system';
 import { Text } from '../../component-library';
 import JwtDropdown from '../jwt-dropdown';
@@ -22,7 +24,15 @@ const JwtUrlForm = (props) => {
     const showJwtDropdown = props.jwtList.length >= 1;
 
     return (
-      <Box className="jwt-url-form__jwt-container" marginBottom={6}>
+      <Box
+        width={BLOCK_SIZES.FULL}
+        display={DISPLAY.FLEX}
+        flexDirection={FLEX_DIRECTION.COLUMN}
+        marginTop={4}
+        alignItems={AlignItems.center}
+        className="jwt-url-form__jwt-container"
+        marginBottom={6}
+      >
         {showJwtDropdown && (
           <JwtDropdown
             data-testid="jwt-dropdown"
@@ -36,13 +46,15 @@ const JwtUrlForm = (props) => {
         )}
         {showJwtDropdown && !showAddNewToken && (
           <Box
-            className="jwt-url-form__btn__container"
+            width={BLOCK_SIZES.FULL}
             display={DISPLAY.FLEX}
+            flexDirection={FLEX_DIRECTION.COLUMN}
             alignItems={AlignItems.center}
             marginTop={2}
           >
             <Text>{t('or')}</Text>
             <Button
+              data-testid="addNewToken-btn"
               type="secondary"
               medium="true"
               onClick={() => {
@@ -56,7 +68,7 @@ const JwtUrlForm = (props) => {
         )}
         {(!showJwtDropdown || showAddNewToken) && (
           <Box>
-            <Text className="jwt-url-form__instruction">
+            <Text className="jwt-url-form__instruction" display={DISPLAY.BLOCK}>
               {props.jwtInputText}
             </Text>
             {fileTooBigError && (
@@ -85,8 +97,10 @@ const JwtUrlForm = (props) => {
 
   const renderAPIURLInput = () => {
     return (
-      <Box className="jwt-url-form__jwt-apiUrlInput">
-        <Text className="jwt-url-form__instruction">{props.urlInputText}</Text>
+      <Box width={BLOCK_SIZES.FULL}>
+        <Text className="jwt-url-form__instruction" display={DISPLAY.BLOCK}>
+          {props.urlInputText}
+        </Text>
         <Box>
           <input
             className="jwt-url-form__input"
@@ -106,6 +120,7 @@ const JwtUrlForm = (props) => {
     <Box
       className="jwt-url-form"
       display={DISPLAY.FLEX}
+      flexDirection={FLEX_DIRECTION.COLUMN}
       alignItems={AlignItems.flexStart}
       marginBottom={8}
     >

diff --git a/ui/components/institutional/jwt-url-form/jwt-url-form.scss b/ui/components/institutional/jwt-url-form/jwt-url-form.scss
@@ -1,28 +1,8 @@
 .jwt-url-form {
-  flex-flow: column;
-
-  &__jwt-container {
-    width: 100%;
-  }
-
-  &__jwt-apiUrlInput {
-    width: 100%;
-  }
-
-  &__btn__container {
-    flex-flow: column;
-    width: 100%;
-
-    & > span {
-      padding-bottom: 10px;
-    }
-  }
-
   &__instruction {
     @include Paragraph;
 
     align-self: flex-start;
-    display: block;
     font-size: 14px;
   }
 
@@ -37,14 +17,6 @@
     padding: 0 10px;
   }
 
-  &__input-jwt-container {
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-    width: 100%;
-    margin-top: 16px;
-  }
-
   &__input-jwt {
     @include Paragraph;
 

diff --git a/ui/components/institutional/jwt-url-form/jwt-url-form.test.js b/ui/components/institutional/jwt-url-form/jwt-url-form.test.js
@@ -27,24 +27,25 @@ describe('JwtUrlForm', function () {
   };
 
   it('opens JWT Url Form without input for new JWT', () => {
-    const { container, getByText } = renderWithProvider(
+    const { getAllByTestId, getByText } = renderWithProvider(
       <JwtUrlForm {...props} />,
       store,
     );
 
-    const btn = container.querySelector(
-      '.jwt-url-form__btn__container .btn-secondary',
+    expect(getAllByTestId('addNewToken-btn')[0]).toHaveAttribute(
+      'role',
+      'button',
     );
-    expect(btn).toHaveClass('button');
     expect(getByText('Add new token')).toBeInTheDocument();
   });
 
   it('shows JWT textarea with provided input text', () => {
-    const { container } = renderWithProvider(<JwtUrlForm {...props} />, store);
-
-    const btn = container.querySelector(
-      '.jwt-url-form__btn__container .btn-secondary',
+    const { getAllByTestId } = renderWithProvider(
+      <JwtUrlForm {...props} />,
+      store,
     );
+
+    const btn = getAllByTestId('addNewToken-btn')[0];
     fireEvent.click(btn);
     expect(screen.getByText('input text')).toBeInTheDocument();
   });

diff --git a/ui/helpers/constants/routes.ts b/ui/helpers/constants/routes.ts
@@ -20,6 +20,9 @@ const CONTACT_LIST_ROUTE = '/settings/contact-list';
 const CONTACT_EDIT_ROUTE = '/settings/contact-list/edit-contact';
 const CONTACT_ADD_ROUTE = '/settings/contact-list/add-contact';
 const CONTACT_VIEW_ROUTE = '/settings/contact-list/view-contact';
+///: BEGIN:ONLY_INCLUDE_IN(mmi)
+const CUSTODY_ACCOUNT_ROUTE = '/new-account/custody';
+///: END:ONLY_INCLUDE_IN
 const REVEAL_SEED_ROUTE = '/seed';
 const MOBILE_SYNC_ROUTE = '/mobile-sync';
 const RESTORE_VAULT_ROUTE = '/restore-vault';
@@ -203,6 +206,9 @@ export {
   CONTACT_EDIT_ROUTE,
   CONTACT_ADD_ROUTE,
   CONTACT_VIEW_ROUTE,
+  ///: BEGIN:ONLY_INCLUDE_IN(mmi)
+  CUSTODY_ACCOUNT_ROUTE,
+  ///: END:ONLY_INCLUDE_IN
   NETWORKS_ROUTE,
   NETWORKS_FORM_ROUTE,
   ADD_NETWORK_ROUTE,