feat(suite): #4512 add Send AOPP modal

packages/suite/src/actions/suite/modalActions.ts

@@ -114,6 +114,13 @@ export type UserContextPayload =
       }
     | {
           type: 'safety-checks';
+      }
+    | {
+          type: 'send-aopp-message';
+          address: string;
+          signature: string;
+          callback: string;
+          decision: Deferred<boolean>;
       };
 
 export type ModalAction =
@@ -200,7 +207,8 @@ type DeferredModals = Extract<
             | 'coinmarket-buy-terms'
             | 'coinmarket-sell-terms'
             | 'coinmarket-exchange-dex-terms'
-            | 'coinmarket-exchange-terms';
+            | 'coinmarket-exchange-terms'
+            | 'send-aopp-message';
     }
 >;
 // extract single modal by `type` util

packages/suite/src/components/suite/modals/SendAoppMessage/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button, variables } from '@trezor/components';
+import { Modal, Translation } from '@suite-components';
+import type { UserContextPayload } from '@suite-actions/modalActions';
+
+const Row = styled.div`
+    display: flex;
+    text-align: left;
+    margin-bottom: 8px;
+    & > * {
+        &:first-child {
+            min-width: 120px;
+            font-weight: ${variables.FONT_WEIGHT.MEDIUM};
+        }
+        &:not(:first-child) {
+            overflow-wrap: anywhere;
+        }
+    }
+`;
+
+const ActionRow = styled.div`
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 24px;
+`;
+
+const StyledButton = styled(Button)`
+    width: 200px;
+`;
+
+type Props = Extract<UserContextPayload, { type: 'send-aopp-message' }> & {
+    onCancel: () => void;
+};
+
+const SendAoppMessage = ({ onCancel, decision, address, signature, callback }: Props) => (
+    <Modal cancelable onCancel={onCancel} heading={<Translation id="TR_AOPP_SEND" />}>
+        <Row>
+            <Translation id="TR_ADDRESS" />
+            <div>{address}</div>
+        </Row>
+        <Row>
+            <Translation id="TR_SIGNATURE" />
+            <div>{signature}</div>
+        </Row>
+        <Row>
+            <Translation id="TR_TO" />
+            <div>{callback}</div>
+        </Row>
+        <ActionRow>
+            <StyledButton
+                onClick={() => {
+                    decision.resolve(true);
+                    onCancel();
+                }}
+            >
+                <Translation id="TR_NAV_SEND" />
+            </StyledButton>
+        </ActionRow>
+    </Modal>
+);
+
+export default SendAoppMessage;

packages/suite/src/components/suite/modals/index.tsx

@@ -40,6 +40,7 @@ import MetadataProvider from './metadata/MetadataProvider';
 import AdvancedCoinSettings from './AdvancedCoinSettings';
 import AddToken from './AddToken';
 import SafetyChecks from './SafetyChecks';
+import SendAoppMessage from './SendAoppMessage';
 
 import type { AcquiredDevice } from '@suite-types';
 
@@ -231,6 +232,8 @@ const getUserContextModal = ({ modal, onCancel }: SharedProps) => {
             return <AddToken {...payload} onCancel={onCancel} />;
         case 'safety-checks':
             return <SafetyChecks onCancel={onCancel} />;
+        case 'send-aopp-message':
+            return <SendAoppMessage {...payload} onCancel={onCancel} />;
         default:
             return null;
     }