feat: SIWE sign message section

package.json

@@ -488,6 +488,7 @@
     "@types/gulp-sourcemaps": "^0.0.35",
     "@types/he": "^1",
     "@types/jest": "^29.5.12",
+    "@types/luxon": "^3.4.2",
     "@types/mocha": "^10.0.3",
     "@types/node": "^20",
     "@types/pify": "^5.0.1",

test/data/confirmations/personal_sign.ts

@@ -46,3 +46,41 @@ export const signatureRequestSIWE = {
     },
   },
 };
+
+export const SignatureRequestSIWEWithResources = {
+  id: '210ca3b0-1ccb-11ef-b096-89c4d726ebb5',
+  securityAlertResponse: {
+    reason: 'loading',
+    result_type: 'validation_in_progress',
+    securityAlertId: 'b826df20-2eda-41bf-becf-6a100141a8be',
+  },
+  status: 'unapproved',
+  time: 1716884423019,
+  type: 'personal_sign',
+  msgParams: {
+    from: '0x935e73edb9ff52e23bac7f7e049a1ecd06d05477',
+    data: '0x6d6574616d61736b2e6769746875622e696f2077616e747320796f7520746f207369676e20696e207769746820796f757220457468657265756d206163636f756e743a0a3078393335653733656462396666353265323362616337663765303433613165636430366430353437370a0a492061636365707420746865204d6574614d61736b205465726d73206f6620536572766963653a2068747470733a2f2f636f6d6d756e6974792e6d6574616d61736b2e696f2f746f730a0a5552493a2068747470733a2f2f6d6574616d61736b2e6769746875622e696f0a56657273696f6e3a20310a436861696e2049443a20310a4e6f6e63653a2033323839313735370a4973737565642041743a20323032312d30392d33305431363a32353a32342e3030305a',
+    signatureMethod: 'personal_sign',
+    origin: 'https://metamask.github.io',
+    siwe: {
+      isSIWEMessage: true,
+      parsedMessage: {
+        domain: 'metamask.github.io',
+        address: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+        statement:
+          'I accept the MetaMask Terms of Service: https://community.metamask.io/tos',
+        uri: 'https://metamask.github.io',
+        version: '1',
+        chainId: 1,
+        nonce: '32891757',
+        issuedAt: '2021-09-30T16:25:24.000Z',
+        notBefore: '2022-03-17T12:45:13.610Z',
+        requestId: 'some_id',
+        resources: [
+          'ipfs://Qme7ss3ARVgxv6rXqVPiikMJ8u2NLgmgszg13pYrDKEoiu',
+          'https://example.com/my-web2-claim.json',
+        ],
+      },
+    },
+  },
+};

ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx

@@ -21,6 +21,7 @@ import {
 import { SignatureRequestType } from '../../../../types/confirm';
 import { isSIWESignatureRequest } from '../../../../utils';
 import { AlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
+import { SIWESignInfo } from './siwe-sign';
 
 const PersonalSignInfo: React.FC = () => {
   const t = useI18nContext();
@@ -33,11 +34,11 @@ const PersonalSignInfo: React.FC = () => {
   }
 
   const { from } = currentConfirmation.msgParams;
-  const isSiweSigReq = isSIWESignatureRequest(currentConfirmation);
+  const isSIWE = isSIWESignatureRequest(currentConfirmation);
 
   return (
     <>
-      {isSiweSigReq && (
+      {isSIWE && (
         <Box
           backgroundColor={BackgroundColor.backgroundDefault}
           borderRadius={BorderRadius.MD}
@@ -66,7 +67,7 @@ const PersonalSignInfo: React.FC = () => {
         >
           <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
         </AlertRow>
-        {isSiweSigReq && (
+        {isSIWE && (
           <ConfirmInfoRow label={t('signingInWith')}>
             <ConfirmInfoRowAddress address={from} />
           </ConfirmInfoRow>
@@ -78,17 +79,21 @@ const PersonalSignInfo: React.FC = () => {
         padding={2}
         marginBottom={4}
       >
-        <AlertRow
-          alertKey="message"
-          ownerId={currentConfirmation.id}
-          label={t('message')}
-        >
-          <ConfirmInfoRowText
-            text={sanitizeString(
-              hexToText(currentConfirmation.msgParams?.data),
-            )}
-          />
-        </AlertRow>
+        {isSIWE ? (
+          <SIWESignInfo />
+        ) : (
+          <AlertRow
+            alertKey="message"
+            ownerId={currentConfirmation.id}
+            label={t('message')}
+          >
+            <ConfirmInfoRowText
+              text={sanitizeString(
+                hexToText(currentConfirmation.msgParams?.data),
+              )}
+            />
+          </AlertRow>
+        )}
       </Box>
     </>
   );