From a01e4fa00ad23a836941883137aafbd2c2837527 Mon Sep 17 00:00:00 2001
From: Harsh Shukla <125105825+PrgrmrHarshShukla@users.noreply.github.com>
Date: Tue, 25 Jul 2023 02:10:41 +0530
Subject: [PATCH] Updating SignatureRequestData components (#19994)

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
---
 .../signature-request.test.js.snap            | 540 +++++++++---------
 .../signature-request-data.js                 |  36 +-
 .../__snapshots__/index.test.js.snap          | 270 ++++-----
 3 files changed, 424 insertions(+), 422 deletions(-)

diff --git a/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap b/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap
index 6e14a4b50..c7cdfac65 100644
--- a/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap
+++ b/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap
@@ -234,82 +234,82 @@ exports[`Signature Request Component render should match snapshot when we are us
         >
           Mail
         </p>
-        <div
-          class="box signature-request-data__node box--flex-direction-row"
+        <ul
+          class="mm-box signature-request-data__node"
         >
-          <div
-            class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+          <li
+            class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
           >
-            <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+            <div
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
             >
               Contents
               :
                
-            </span>
-            <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+            </div>
+            <div
+              class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
             >
               Hello, Bob!
-            </span>
-          </div>
-          <div
-            class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+            </div>
+          </li>
+          <li
+            class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
           >
-            <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+            <div
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
             >
               From
               :
                
-            </span>
-            <div
-              class="box signature-request-data__node box--flex-direction-row"
+            </div>
+            <ul
+              class="mm-box signature-request-data__node"
             >
-              <div
-                class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+              <li
+                class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
               >
-                <span
-                  class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                <div
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                 >
                   Name
                   :
                    
-                </span>
-                <span
-                  class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                </div>
+                <div
+                  class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                 >
                   Cow
-                </span>
-              </div>
-              <div
-                class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+                </div>
+              </li>
+              <li
+                class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
               >
-                <span
-                  class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+                <div
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
                 >
                   Wallets
                   :
                    
-                </span>
-                <div
-                  class="box signature-request-data__node box--flex-direction-row"
+                </div>
+                <ul
+                  class="mm-box signature-request-data__node"
                 >
-                  <div
-                    class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                  <li
+                    class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                   >
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    <div
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       0
                       :
                        
-                    </span>
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    </div>
+                    <div
+                      class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                     >
-                      <h6
-                        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                      <div
+                        class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                       >
                         <div
                           class="tx-insight tx-insight-component tx-insight-component-address"
@@ -368,24 +368,24 @@ exports[`Signature Request Component render should match snapshot when we are us
                             0xCD2...D826
                           </div>
                         </div>
-                      </h6>
-                    </span>
-                  </div>
-                  <div
-                    class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                      </div>
+                    </div>
+                  </li>
+                  <li
+                    class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                   >
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    <div
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       1
                       :
                        
-                    </span>
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    </div>
+                    <div
+                      class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                     >
-                      <h6
-                        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                      <div
+                        class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                       >
                         <div
                           class="tx-insight tx-insight-component tx-insight-component-address"
@@ -444,83 +444,83 @@ exports[`Signature Request Component render should match snapshot when we are us
                             0xDea...beeF
                           </div>
                         </div>
-                      </h6>
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li
+            class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
           >
-            <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+            <div
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
             >
               To
               :
                
-            </span>
-            <div
-              class="box signature-request-data__node box--flex-direction-row"
+            </div>
+            <ul
+              class="mm-box signature-request-data__node"
             >
-              <div
-                class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+              <li
+                class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
               >
-                <span
-                  class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+                <div
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
                 >
                   0
                   :
                    
-                </span>
-                <div
-                  class="box signature-request-data__node box--flex-direction-row"
+                </div>
+                <ul
+                  class="mm-box signature-request-data__node"
                 >
-                  <div
-                    class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                  <li
+                    class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                   >
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    <div
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       Name
                       :
                        
-                    </span>
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    </div>
+                    <div
+                      class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       Bob
-                    </span>
-                  </div>
-                  <div
-                    class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+                    </div>
+                  </li>
+                  <li
+                    class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
                   >
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+                    <div
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       Wallets
                       :
                        
-                    </span>
-                    <div
-                      class="box signature-request-data__node box--flex-direction-row"
+                    </div>
+                    <ul
+                      class="mm-box signature-request-data__node"
                     >
-                      <div
-                        class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                      <li
+                        class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                       >
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        <div
+                          class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                         >
                           0
                           :
                            
-                        </span>
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        </div>
+                        <div
+                          class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                         >
-                          <h6
-                            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                          <div
+                            class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                           >
                             <div
                               class="tx-insight tx-insight-component tx-insight-component-address"
@@ -579,24 +579,24 @@ exports[`Signature Request Component render should match snapshot when we are us
                                 0xbBb...BBbB
                               </div>
                             </div>
-                          </h6>
-                        </span>
-                      </div>
-                      <div
-                        class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                          </div>
+                        </div>
+                      </li>
+                      <li
+                        class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                       >
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        <div
+                          class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                         >
                           1
                           :
                            
-                        </span>
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        </div>
+                        <div
+                          class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                         >
-                          <h6
-                            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                          <div
+                            class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                           >
                             <div
                               class="tx-insight tx-insight-component tx-insight-component-address"
@@ -655,24 +655,24 @@ exports[`Signature Request Component render should match snapshot when we are us
                                 0xB0B...Ea57
                               </div>
                             </div>
-                          </h6>
-                        </span>
-                      </div>
-                      <div
-                        class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                          </div>
+                        </div>
+                      </li>
+                      <li
+                        class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                       >
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        <div
+                          class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                         >
                           2
                           :
                            
-                        </span>
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        </div>
+                        <div
+                          class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                         >
-                          <h6
-                            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                          <div
+                            class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                           >
                             <div
                               class="tx-insight tx-insight-component tx-insight-component-address"
@@ -731,16 +731,16 @@ exports[`Signature Request Component render should match snapshot when we are us
                                 0xB0B...0000
                               </div>
                             </div>
-                          </h6>
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+                          </div>
+                        </div>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
       </div>
     </div>
     <div
@@ -1009,82 +1009,82 @@ exports[`Signature Request Component render should match snapshot when we want t
         >
           Mail
         </p>
-        <div
-          class="box signature-request-data__node box--flex-direction-row"
+        <ul
+          class="mm-box signature-request-data__node"
         >
-          <div
-            class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+          <li
+            class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
           >
-            <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+            <div
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
             >
               Contents
               :
                
-            </span>
-            <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+            </div>
+            <div
+              class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
             >
               Hello, Bob!
-            </span>
-          </div>
-          <div
-            class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+            </div>
+          </li>
+          <li
+            class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
           >
-            <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+            <div
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
             >
               From
               :
                
-            </span>
-            <div
-              class="box signature-request-data__node box--flex-direction-row"
+            </div>
+            <ul
+              class="mm-box signature-request-data__node"
             >
-              <div
-                class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+              <li
+                class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
               >
-                <span
-                  class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                <div
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                 >
                   Name
                   :
                    
-                </span>
-                <span
-                  class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                </div>
+                <div
+                  class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                 >
                   Cow
-                </span>
-              </div>
-              <div
-                class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+                </div>
+              </li>
+              <li
+                class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
               >
-                <span
-                  class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+                <div
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
                 >
                   Wallets
                   :
                    
-                </span>
-                <div
-                  class="box signature-request-data__node box--flex-direction-row"
+                </div>
+                <ul
+                  class="mm-box signature-request-data__node"
                 >
-                  <div
-                    class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                  <li
+                    class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                   >
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    <div
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       0
                       :
                        
-                    </span>
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    </div>
+                    <div
+                      class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                     >
-                      <h6
-                        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                      <div
+                        class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                       >
                         <div
                           class="tx-insight tx-insight-component tx-insight-component-address"
@@ -1143,24 +1143,24 @@ exports[`Signature Request Component render should match snapshot when we want t
                             0xCD2...D826
                           </div>
                         </div>
-                      </h6>
-                    </span>
-                  </div>
-                  <div
-                    class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                      </div>
+                    </div>
+                  </li>
+                  <li
+                    class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                   >
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    <div
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       1
                       :
                        
-                    </span>
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    </div>
+                    <div
+                      class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                     >
-                      <h6
-                        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                      <div
+                        class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                       >
                         <div
                           class="tx-insight tx-insight-component tx-insight-component-address"
@@ -1219,83 +1219,83 @@ exports[`Signature Request Component render should match snapshot when we want t
                             0xDea...beeF
                           </div>
                         </div>
-                      </h6>
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li
+            class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
           >
-            <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+            <div
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
             >
               To
               :
                
-            </span>
-            <div
-              class="box signature-request-data__node box--flex-direction-row"
+            </div>
+            <ul
+              class="mm-box signature-request-data__node"
             >
-              <div
-                class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+              <li
+                class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
               >
-                <span
-                  class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+                <div
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
                 >
                   0
                   :
                    
-                </span>
-                <div
-                  class="box signature-request-data__node box--flex-direction-row"
+                </div>
+                <ul
+                  class="mm-box signature-request-data__node"
                 >
-                  <div
-                    class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                  <li
+                    class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                   >
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    <div
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       Name
                       :
                        
-                    </span>
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    </div>
+                    <div
+                      class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       Bob
-                    </span>
-                  </div>
-                  <div
-                    class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+                    </div>
+                  </li>
+                  <li
+                    class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
                   >
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+                    <div
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       Wallets
                       :
                        
-                    </span>
-                    <div
-                      class="box signature-request-data__node box--flex-direction-row"
+                    </div>
+                    <ul
+                      class="mm-box signature-request-data__node"
                     >
-                      <div
-                        class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                      <li
+                        class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                       >
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        <div
+                          class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                         >
                           0
                           :
                            
-                        </span>
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        </div>
+                        <div
+                          class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                         >
-                          <h6
-                            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                          <div
+                            class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                           >
                             <div
                               class="tx-insight tx-insight-component tx-insight-component-address"
@@ -1354,24 +1354,24 @@ exports[`Signature Request Component render should match snapshot when we want t
                                 0xbBb...BBbB
                               </div>
                             </div>
-                          </h6>
-                        </span>
-                      </div>
-                      <div
-                        class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                          </div>
+                        </div>
+                      </li>
+                      <li
+                        class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                       >
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        <div
+                          class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                         >
                           1
                           :
                            
-                        </span>
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        </div>
+                        <div
+                          class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                         >
-                          <h6
-                            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                          <div
+                            class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                           >
                             <div
                               class="tx-insight tx-insight-component tx-insight-component-address"
@@ -1430,24 +1430,24 @@ exports[`Signature Request Component render should match snapshot when we want t
                                 0xB0B...Ea57
                               </div>
                             </div>
-                          </h6>
-                        </span>
-                      </div>
-                      <div
-                        class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                          </div>
+                        </div>
+                      </li>
+                      <li
+                        class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                       >
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        <div
+                          class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                         >
                           2
                           :
                            
-                        </span>
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        </div>
+                        <div
+                          class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                         >
-                          <h6
-                            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                          <div
+                            class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                           >
                             <div
                               class="tx-insight tx-insight-component tx-insight-component-address"
@@ -1506,16 +1506,16 @@ exports[`Signature Request Component render should match snapshot when we want t
                                 0xB0B...0000
                               </div>
                             </div>
-                          </h6>
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+                          </div>
+                        </div>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
       </div>
     </div>
     <div
diff --git a/ui/components/app/signature-request/signature-request-data/signature-request-data.js b/ui/components/app/signature-request/signature-request-data/signature-request-data.js
index 82932a1de..260945aba 100644
--- a/ui/components/app/signature-request/signature-request-data/signature-request-data.js
+++ b/ui/components/app/signature-request/signature-request-data/signature-request-data.js
@@ -11,45 +11,46 @@ import {
   isValidHexAddress,
   toChecksumHexAddress,
 } from '../../../../../shared/modules/hexstring-utils';
-import Box from '../../../ui/box';
-import Typography from '../../../ui/typography';
 import {
-  DISPLAY,
-  FONT_WEIGHT,
-  TypographyVariant,
+  Display,
+  FontWeight,
+  TextVariant,
   TextColor,
 } from '../../../../helpers/constants/design-system';
 import { sanitizeString } from '../../../../helpers/utils/util';
+import { Box, Text } from '../../../component-library';
 
 function SignatureRequestData({ data }) {
   const identities = useSelector(getMemoizedMetaMaskIdentities);
 
   return (
-    <Box className="signature-request-data__node">
+    <Box as="ul" className="signature-request-data__node">
       {Object.entries(data).map(([label, { value, type }], i) => (
         <Box
+          as="li"
           className="signature-request-data__node"
+          marginBottom={2}
           key={`${label}-${i}`}
           paddingLeft={2}
           display={
-            typeof value !== 'object' || value === null ? DISPLAY.FLEX : null
+            typeof value !== 'object' || value === null ? Display.Flex : null
           }
         >
-          <Typography
-            as="span"
+          <Text
+            as="div"
             color={TextColor.textDefault}
             marginLeft={4}
             fontWeight={
-              typeof value === 'object' ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL
+              typeof value === 'object' ? FontWeight.Bold : FontWeight.Normal
             }
           >
             {sanitizeString(label.charAt(0).toUpperCase() + label.slice(1))}:{' '}
-          </Typography>
+          </Text>
           {typeof value === 'object' && value !== null ? (
             <SignatureRequestData data={value} />
           ) : (
-            <Typography
-              as="span"
+            <Text
+              as="div"
               color={TextColor.textDefault}
               marginLeft={4}
               className="signature-request-data__node__value"
@@ -58,8 +59,9 @@ function SignatureRequestData({ data }) {
               isValidHexAddress(value, {
                 mixedCaseUseChecksum: true,
               }) ? (
-                <Typography
-                  variant={TypographyVariant.H7}
+                <Text
+                  variant={TextVariant.bodySm}
+                  as="div"
                   color={TextColor.infoDefault}
                   className="signature-request-data__node__value__address"
                 >
@@ -68,11 +70,11 @@ function SignatureRequestData({ data }) {
                     checksummedRecipientAddress={toChecksumHexAddress(value)}
                     recipientName={getAccountName(identities, value)}
                   />
-                </Typography>
+                </Text>
               ) : (
                 sanitizeString(`${value}`)
               )}
-            </Typography>
+            </Text>
           )}
         </Box>
       ))}
diff --git a/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap b/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
index 3522d4d7a..c9e8f1f75 100644
--- a/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
+++ b/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
@@ -233,82 +233,82 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
         >
           Mail
         </p>
-        <div
-          class="box signature-request-data__node box--flex-direction-row"
+        <ul
+          class="mm-box signature-request-data__node"
         >
-          <div
-            class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+          <li
+            class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
           >
-            <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+            <div
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
             >
               Contents
               :
                
-            </span>
-            <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+            </div>
+            <div
+              class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
             >
               Hello, Bob!
-            </span>
-          </div>
-          <div
-            class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+            </div>
+          </li>
+          <li
+            class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
           >
-            <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+            <div
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
             >
               From
               :
                
-            </span>
-            <div
-              class="box signature-request-data__node box--flex-direction-row"
+            </div>
+            <ul
+              class="mm-box signature-request-data__node"
             >
-              <div
-                class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+              <li
+                class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
               >
-                <span
-                  class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                <div
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                 >
                   Name
                   :
                    
-                </span>
-                <span
-                  class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                </div>
+                <div
+                  class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                 >
                   Cow
-                </span>
-              </div>
-              <div
-                class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+                </div>
+              </li>
+              <li
+                class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
               >
-                <span
-                  class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+                <div
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
                 >
                   Wallets
                   :
                    
-                </span>
-                <div
-                  class="box signature-request-data__node box--flex-direction-row"
+                </div>
+                <ul
+                  class="mm-box signature-request-data__node"
                 >
-                  <div
-                    class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                  <li
+                    class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                   >
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    <div
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       0
                       :
                        
-                    </span>
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    </div>
+                    <div
+                      class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                     >
-                      <h6
-                        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                      <div
+                        class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                       >
                         <div
                           class="tx-insight tx-insight-component tx-insight-component-address"
@@ -367,24 +367,24 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
                             0xCD2...D826
                           </div>
                         </div>
-                      </h6>
-                    </span>
-                  </div>
-                  <div
-                    class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                      </div>
+                    </div>
+                  </li>
+                  <li
+                    class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                   >
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    <div
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       1
                       :
                        
-                    </span>
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    </div>
+                    <div
+                      class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                     >
-                      <h6
-                        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                      <div
+                        class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                       >
                         <div
                           class="tx-insight tx-insight-component tx-insight-component-address"
@@ -443,83 +443,83 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
                             0xDea...beeF
                           </div>
                         </div>
-                      </h6>
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li
+            class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
           >
-            <span
-              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+            <div
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
             >
               To
               :
                
-            </span>
-            <div
-              class="box signature-request-data__node box--flex-direction-row"
+            </div>
+            <ul
+              class="mm-box signature-request-data__node"
             >
-              <div
-                class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+              <li
+                class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
               >
-                <span
-                  class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+                <div
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
                 >
                   0
                   :
                    
-                </span>
-                <div
-                  class="box signature-request-data__node box--flex-direction-row"
+                </div>
+                <ul
+                  class="mm-box signature-request-data__node"
                 >
-                  <div
-                    class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                  <li
+                    class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                   >
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    <div
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       Name
                       :
                        
-                    </span>
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                    </div>
+                    <div
+                      class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       Bob
-                    </span>
-                  </div>
-                  <div
-                    class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
+                    </div>
+                  </li>
+                  <li
+                    class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
                   >
-                    <span
-                      class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+                    <div
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
                     >
                       Wallets
                       :
                        
-                    </span>
-                    <div
-                      class="box signature-request-data__node box--flex-direction-row"
+                    </div>
+                    <ul
+                      class="mm-box signature-request-data__node"
                     >
-                      <div
-                        class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                      <li
+                        class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                       >
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        <div
+                          class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                         >
                           0
                           :
                            
-                        </span>
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        </div>
+                        <div
+                          class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                         >
-                          <h6
-                            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                          <div
+                            class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                           >
                             <div
                               class="tx-insight tx-insight-component tx-insight-component-address"
@@ -578,24 +578,24 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
                                 0xbBb...BBbB
                               </div>
                             </div>
-                          </h6>
-                        </span>
-                      </div>
-                      <div
-                        class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                          </div>
+                        </div>
+                      </li>
+                      <li
+                        class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                       >
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        <div
+                          class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                         >
                           1
                           :
                            
-                        </span>
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        </div>
+                        <div
+                          class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                         >
-                          <h6
-                            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                          <div
+                            class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                           >
                             <div
                               class="tx-insight tx-insight-component tx-insight-component-address"
@@ -654,24 +654,24 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
                                 0xB0B...Ea57
                               </div>
                             </div>
-                          </h6>
-                        </span>
-                      </div>
-                      <div
-                        class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
+                          </div>
+                        </div>
+                      </li>
+                      <li
+                        class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
                       >
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        <div
+                          class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--color-text-default"
                         >
                           2
                           :
                            
-                        </span>
-                        <span
-                          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+                        </div>
+                        <div
+                          class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
                         >
-                          <h6
-                            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
+                          <div
+                            class="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
                           >
                             <div
                               class="tx-insight tx-insight-component tx-insight-component-address"
@@ -730,16 +730,16 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
                                 0xB0B...0000
                               </div>
                             </div>
-                          </h6>
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+                          </div>
+                        </div>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
       </div>
     </div>
     <div