From 48465432d688042519c5fda44c9604b5d91b1e7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=B3nio=20Regadas?= <apregadas@gmail.com>
Date: Thu, 29 Jun 2023 15:42:37 +0100
Subject: [PATCH] [MMI] connect custodial with incorrect styles (#19820)

* updates the custody-keyring package and sorts the order of custodians

* updates the styles

* snapshots update

* lint

* run dedupe

* clean up
---
 package.json                                  |   2 +-
 .../__snapshots__/custody.test.js.snap        | 153 +++++++++---------
 ui/pages/institutional/custody/custody.js     | 140 ++++++++++------
 yarn.lock                                     |  62 +++----
 4 files changed, 197 insertions(+), 160 deletions(-)

diff --git a/package.json b/package.json
index 3d6f2789a..a0249594d 100644
--- a/package.json
+++ b/package.json
@@ -215,7 +215,7 @@
     "@lavamoat/snow": "^1.5.0",
     "@material-ui/core": "^4.11.0",
     "@metamask-institutional/custody-controller": "0.2.6",
-    "@metamask-institutional/custody-keyring": "0.0.23",
+    "@metamask-institutional/custody-keyring": "^0.0.25",
     "@metamask-institutional/extension": "^0.1.3",
     "@metamask-institutional/institutional-features": "^1.1.8",
     "@metamask-institutional/portfolio-dashboard": "^1.1.3",
diff --git a/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap b/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
index 6fbc42967..32385217b 100644
--- a/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
+++ b/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
@@ -2,13 +2,14 @@
 
 exports[`CustodyPage renders CustodyPage 1`] = `
 <div>
+  
+  
   <div
-    class="mm-box"
+    class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--background-color-background-default"
+    style="box-shadow: var(--shadow-size-xs) var(--color-shadow-default);"
   >
-    
-    
     <div
-      class="mm-box mm-box--padding-0 mm-box--sm:padding-7 mm-box--md:padding-2 mm-box--display-flex mm-box--flex-direction-column"
+      class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--display-flex mm-box--align-items-center"
     >
       <button
         aria-label="Back"
@@ -19,100 +20,102 @@ exports[`CustodyPage renders CustodyPage 1`] = `
           style="mask-image: url('./images/icons/arrow-left.svg');"
         />
       </button>
-      <h4
-        class="box mm-text mm-text--body-lg-medium box--margin-top-4 box--flex-direction-row box--color-text-default"
+      <p
+        class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
       >
-        Custodial Accounts
-      </h4>
-      <h6
-        class="box mm-text mm-text--body-md box--margin-top-2 box--margin-bottom-5 box--flex-direction-row box--color-text-default"
+        Back
+      </p>
+    </div>
+    <h4
+      class="box mm-text mm-text--body-lg-medium box--margin-top-4 box--flex-direction-row box--color-text-default"
+    >
+      Custodial Accounts
+    </h4>
+    <h6
+      class="box mm-text mm-text--body-md box--margin-top-2 box--margin-bottom-5 box--flex-direction-row box--color-text-default"
+    >
+      Please choose the custodian you want to connect in order to add or refresh a token.
+    </h6>
+    <div
+      class="mm-box"
+    >
+      <ul
+        width="full"
       >
-        Please choose the custodian you want to connect in order to add or refresh a token.
-      </h6>
-      <div
-        class="mm-box"
-      >
-        <ul
-          width="full"
+        <div
+          class="mm-box mm-box--margin-bottom-4 mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--rounded-sm mm-box--border-color-border-default box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-box--padding-3 mm-box--sm:padding-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--rounded-sm mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+            class="mm-box mm-box--display-flex mm-box--align-items-center"
           >
-            <div
-              class="mm-box mm-box--align-items-center"
+            <img
+              alt="Saturn Custody"
+              height="32"
+              src="https://saturn-custody-ui.dev.metamask-institutional.io/saturn.svg"
+              width="32"
+            />
+            <p
+              class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
             >
-              <img
-                alt="Saturn Custody"
-                height="32"
-                src="https://saturn-custody-ui.dev.metamask-institutional.io/saturn.svg"
-                width="32"
-              />
-              <p
-                class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
-              >
-                Saturn Custody
-              </p>
-            </div>
-            <button
-              class="box mm-text mm-button-base mm-button-base--size-sm mm-button-primary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
-              data-testid="custody-connect-button"
-            >
-              Select
-            </button>
+              Saturn Custody
+            </p>
           </div>
-        </ul>
-      </div>
+          <button
+            class="box mm-text mm-button-base mm-button-base--size-sm mm-button-primary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+            data-testid="custody-connect-button"
+          >
+            Select
+          </button>
+        </div>
+      </ul>
     </div>
-    
   </div>
+  
 </div>
 `;
 
 exports[`CustodyPage renders CustodyPage 2`] = `
 <div>
+  
+  
   <div
-    class="mm-box"
+    class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--background-color-background-default"
+    style="box-shadow: var(--shadow-size-xs) var(--color-shadow-default);"
   >
-    
-    
     <div
-      class="mm-box mm-box--padding-0 mm-box--display-flex mm-box--flex-direction-column"
+      class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--display-flex mm-box--align-items-center"
     >
-      <div
-        class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--display-flex mm-box--align-items-center"
+      <button
+        aria-label="Back"
+        class="box mm-button-icon mm-button-icon--size-sm box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
       >
-        <button
-          aria-label="Back"
-          class="box mm-button-icon mm-button-icon--size-sm box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-alternative box--background-color-transparent box--rounded-lg"
-        >
-          <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/arrow-left.svg');"
-          />
-        </button>
-        <p
-          class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
-        >
-          Back
-        </p>
-      </div>
-      <h4
+        <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/arrow-left.svg');"
+        />
+      </button>
+      <p
         class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--align-items-center"
-        >
-          <p
-            class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
-          />
-        </div>
-      </h4>
-      <p
-        class="box mm-text mm-text--body-md box--margin-top-4 box--flex-direction-row box--color-text-default"
-      >
-        Enter your  token or add a new token
+        Back
       </p>
     </div>
+    <h4
+      class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--align-items-center"
+      >
+        <p
+          class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
+        />
+      </div>
+    </h4>
+    <p
+      class="box mm-text mm-text--body-md box--margin-top-4 box--flex-direction-row box--color-text-default"
+    >
+      Enter your  token or add a new token
+    </p>
     <div
       class="mm-box mm-box--padding-bottom-7"
     >
diff --git a/ui/pages/institutional/custody/custody.js b/ui/pages/institutional/custody/custody.js
index 6c545411c..7ab0efb5f 100644
--- a/ui/pages/institutional/custody/custody.js
+++ b/ui/pages/institutional/custody/custody.js
@@ -73,7 +73,21 @@ const CustodyPage = () => {
 
   const custodianButtons = useMemo(() => {
     const custodianItems = [];
-    custodians.forEach((custodian) => {
+
+    const sortedCustodians = custodians.sort(function (a, b) {
+      const nameA = a.name.toLowerCase();
+      const nameB = b.name.toLowerCase();
+
+      if (nameA < nameB) {
+        return -1;
+      }
+      if (nameA > nameB) {
+        return 1;
+      }
+      return 0;
+    });
+
+    sortedCustodians.forEach((custodian) => {
       if (
         (!custodian.production &&
           process.env.METAMASK_ENVIRONMENT === 'production') ||
@@ -88,15 +102,16 @@ const CustodyPage = () => {
       custodianItems.push(
         <Box
           key={uuidv4()}
-          display={Display.FLEX}
-          flexDirection={FlexDirection.ROW}
+          display={Display.Flex}
+          flexDirection={FlexDirection.Row}
           justifyContent={JustifyContent.spaceBetween}
           alignItems={AlignItems.center}
           borderColor={BorderColor.borderDefault}
           borderRadius={BorderRadius.SM}
-          padding={[3, 4]}
+          padding={4}
+          marginBottom={4}
         >
-          <Box display={Display.FLEX} alignItems={AlignItems.center}>
+          <Box display={Display.Flex} alignItems={AlignItems.center}>
             {custodian.iconUrl && (
               <img
                 width={32}
@@ -327,7 +342,7 @@ const CustodyPage = () => {
   };
 
   return (
-    <Box>
+    <>
       {connectError && (
         <Text textAlign={TextAlign.Center} marginTop={3} padding={[2, 7, 5]}>
           {connectError}
@@ -342,18 +357,30 @@ const CustodyPage = () => {
 
       {!accounts && !selectedCustodianType ? (
         <Box
-          padding={[0, 7, 2]}
+          padding={4}
           display={Display.Flex}
           flexDirection={FlexDirection.Column}
+          backgroundColor={Color.backgroundDefault}
+          style={{
+            boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
+          }}
         >
-          <ButtonIcon
-            ariaLabel={t('back')}
-            iconName={IconName.ArrowLeft}
-            size={IconSize.Sm}
-            color={Color.iconDefault}
-            onClick={() => history.push(DEFAULT_ROUTE)}
+          <Box
             display={Display.Flex}
-          />
+            alignItems={AlignItems.center}
+            marginBottom={4}
+            marginTop={4}
+          >
+            <ButtonIcon
+              ariaLabel={t('back')}
+              iconName={IconName.ArrowLeft}
+              size={IconSize.Sm}
+              color={Color.iconDefault}
+              onClick={() => history.push(DEFAULT_ROUTE)}
+              display={Display.Flex}
+            />
+            <Text>{t('back')}</Text>
+          </Box>
           <Text as="h4" variant={TextVariant.bodyLgMedium} marginTop={4}>
             {t('connectCustodialAccountTitle')}
           </Text>
@@ -374,9 +401,13 @@ const CustodyPage = () => {
       {!accounts && selectedCustodianType && (
         <>
           <Box
-            padding={0}
+            padding={4}
             display={Display.Flex}
             flexDirection={FlexDirection.Column}
+            backgroundColor={Color.backgroundDefault}
+            style={{
+              boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
+            }}
           >
             <Box
               display={Display.Flex}
@@ -388,7 +419,7 @@ const CustodyPage = () => {
                 ariaLabel={t('back')}
                 iconName={IconName.ArrowLeft}
                 size={IconSize.Sm}
-                color={Color.iconAlternative}
+                color={Color.iconDefault}
                 onClick={() => cancelConnectCustodianToken()}
                 display={[Display.Flex]}
               />
@@ -410,43 +441,46 @@ const CustodyPage = () => {
             <Text marginTop={4}>
               {t('enterCustodianToken', [selectedCustodianDisplayName])}
             </Text>
-          </Box>
-          <Box paddingBottom={7}>
-            <JwtUrlForm
-              jwtList={jwtList}
-              currentJwt={currentJwt}
-              onJwtChange={(jwt) => setCurrentJwt(jwt)}
-              jwtInputText={t('pasteJWTToken')}
-              apiUrl={apiUrl}
-              urlInputText={t('custodyApiUrl', [selectedCustodianDisplayName])}
-              onUrlChange={(url) => setApiUrl(url)}
-            />
-            <Box
-              display={Display.Flex}
-              flexDirection={FlexDirection.Row}
-              justifyContent={JustifyContent.center}
-              padding={0}
-            >
-              <Button
-                variant={BUTTON_VARIANT.SECONDARY}
-                marginRight={4}
-                onClick={() => {
-                  cancelConnectCustodianToken();
-                }}
-                block
+            <Box paddingBottom={7}>
+              <JwtUrlForm
+                jwtList={jwtList}
+                currentJwt={currentJwt}
+                onJwtChange={(jwt) => setCurrentJwt(jwt)}
+                jwtInputText={t('pasteJWTToken')}
+                apiUrl={apiUrl}
+                urlInputText={t('custodyApiUrl', [
+                  selectedCustodianDisplayName,
+                ])}
+                onUrlChange={(url) => setApiUrl(url)}
+              />
+              <Box
+                display={Display.Flex}
+                flexDirection={FlexDirection.Row}
+                justifyContent={JustifyContent.center}
+                padding={0}
               >
-                {t('cancel')}
-              </Button>
-              <Button
-                data-testid="jwt-form-connect-button"
-                onClick={connect}
-                disabled={
-                  !selectedCustodianName || (addNewTokenClicked && !currentJwt)
-                }
-                block
-              >
-                {t('connect')}
-              </Button>
+                <Button
+                  variant={BUTTON_VARIANT.SECONDARY}
+                  marginRight={4}
+                  onClick={() => {
+                    cancelConnectCustodianToken();
+                  }}
+                  block
+                >
+                  {t('cancel')}
+                </Button>
+                <Button
+                  data-testid="jwt-form-connect-button"
+                  onClick={connect}
+                  disabled={
+                    !selectedCustodianName ||
+                    (addNewTokenClicked && !currentJwt)
+                  }
+                  block
+                >
+                  {t('connect')}
+                </Button>
+              </Box>
             </Box>
           </Box>
         </>
@@ -598,7 +632,7 @@ const CustodyPage = () => {
           </Box>
         </Box>
       )}
-    </Box>
+    </>
   );
 };
 
diff --git a/yarn.lock b/yarn.lock
index 8d44f4106..3279bfe14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3699,22 +3699,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask-institutional/custody-keyring@npm:0.0.23":
-  version: 0.0.23
-  resolution: "@metamask-institutional/custody-keyring@npm:0.0.23"
-  dependencies:
-    "@ethereumjs/tx": ^4.1.1
-    "@ethereumjs/util": ^8.0.5
-    "@metamask-institutional/configuration-client": ^1.0.6
-    "@metamask-institutional/sdk": ^0.1.15
-    "@metamask-institutional/types": ^1.0.2
-    "@metamask/obs-store": ^8.0.0
-    crypto: ^1.0.1
-    lodash.clonedeep: ^4.5.0
-  checksum: eae1003ddfd262526d28c23d6dbdfbc6d42879bb989c9bcf97416d3964aaa6ce202a0803c46256fb1afc1399592176ba2fdfcbd2043c4f1275f5079e067c3a78
-  languageName: node
-  linkType: hard
-
 "@metamask-institutional/custody-keyring@npm:^0.0.22":
   version: 0.0.22
   resolution: "@metamask-institutional/custody-keyring@npm:0.0.22"
@@ -3731,6 +3715,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask-institutional/custody-keyring@npm:^0.0.25":
+  version: 0.0.25
+  resolution: "@metamask-institutional/custody-keyring@npm:0.0.25"
+  dependencies:
+    "@ethereumjs/tx": ^4.1.1
+    "@ethereumjs/util": ^8.0.5
+    "@metamask-institutional/configuration-client": ^1.0.6
+    "@metamask-institutional/sdk": ^0.1.18
+    "@metamask-institutional/types": ^1.0.3
+    "@metamask/obs-store": ^8.0.0
+    crypto: ^1.0.1
+    lodash.clonedeep: ^4.5.0
+  checksum: 9e6405e69be3f96f686b611e7c0c513da70115f78a9731f0960a1480706f7498e4b69154ce9c78967e886558b0a6c06aaf23e89713408b3f74f175176fcd790c
+  languageName: node
+  linkType: hard
+
 "@metamask-institutional/extension@npm:^0.1.3":
   version: 0.1.3
   resolution: "@metamask-institutional/extension@npm:0.1.3"
@@ -3773,24 +3773,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask-institutional/sdk@npm:^0.1.14, @metamask-institutional/sdk@npm:^0.1.15, @metamask-institutional/sdk@npm:^0.1.16, @metamask-institutional/sdk@npm:^0.1.17":
-  version: 0.1.17
-  resolution: "@metamask-institutional/sdk@npm:0.1.17"
+"@metamask-institutional/sdk@npm:^0.1.14, @metamask-institutional/sdk@npm:^0.1.15, @metamask-institutional/sdk@npm:^0.1.16, @metamask-institutional/sdk@npm:^0.1.17, @metamask-institutional/sdk@npm:^0.1.18":
+  version: 0.1.18
+  resolution: "@metamask-institutional/sdk@npm:0.1.18"
   dependencies:
-    "@metamask-institutional/simplecache": ^1.0.2
-    "@metamask-institutional/types": ^1.0.2
+    "@metamask-institutional/simplecache": ^1.1.0
+    "@metamask-institutional/types": ^1.0.3
     "@types/jsonwebtoken": ^9.0.1
     "@types/node": ^18.15.11
     bignumber.js: ^9.1.1
     jsonwebtoken: ^9.0.0
-  checksum: 82b3a8038fdf96983846fa884c867ec9497ac4a2a287d8bb2ce4ffde39b6127ce3af8d2adccab5cedf4ed6b1980488f3cc83347237c085f44ed3a0c004f8a183
+  checksum: c9093f4d6495d35f540b25e6dae70ab69ee9c1ce6e18f6164e9aeae5194318a34dfb471791f4f83cec68059456740bd66a5e6368115431d1029a04524f500067
   languageName: node
   linkType: hard
 
-"@metamask-institutional/simplecache@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "@metamask-institutional/simplecache@npm:1.0.2"
-  checksum: 65444d49478e14956f884e5423992ad7069c9e8979cdc012db3f8f6f207147816b8f3b45be33007772a9628560b5f054ea52b0eb8a9ee25066abc199260d30b6
+"@metamask-institutional/simplecache@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@metamask-institutional/simplecache@npm:1.1.0"
+  checksum: 6011c8cafe4f1ca4736a668cac764dfbb2759f887cfbc76c869491e28a4ed5a206bd0635474c31585852eb39e2b6d0081b778c0c55ec4003ed52abfe2e474ad3
   languageName: node
   linkType: hard
 
@@ -3808,10 +3808,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask-institutional/types@npm:^1.0.1, @metamask-institutional/types@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "@metamask-institutional/types@npm:1.0.2"
-  checksum: 27bee2dc32a1a8869a2918863d60e4c59b350ad5fcf2d3fbc3fd52b9db2e2af33eb3af568726b72cb7accd7aba2639e9e707522989cc5db9ee8d8f1239f9d6f9
+"@metamask-institutional/types@npm:^1.0.1, @metamask-institutional/types@npm:^1.0.2, @metamask-institutional/types@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "@metamask-institutional/types@npm:1.0.3"
+  checksum: ce22762d43c8438104df32a91b115c6e99d5f17745fd0e747141730a91b0affd2d92cd1c7dabe34dad8cc59d6dccc70019aa07bd2039c3da68b9987ab7bcf81b
   languageName: node
   linkType: hard
 
@@ -24473,7 +24473,7 @@ __metadata:
     "@lavamoat/snow": ^1.5.0
     "@material-ui/core": ^4.11.0
     "@metamask-institutional/custody-controller": 0.2.6
-    "@metamask-institutional/custody-keyring": 0.0.23
+    "@metamask-institutional/custody-keyring": ^0.0.25
     "@metamask-institutional/extension": ^0.1.3
     "@metamask-institutional/institutional-features": ^1.1.8
     "@metamask-institutional/portfolio-dashboard": ^1.1.3