From 775a87e2f3096da8dbe1f3689ba7e9e5df747b67 Mon Sep 17 00:00:00 2001
From: Oleg Chendighelean <oleg.chendighelean@trili.tech>
Date: Thu, 3 Oct 2024 17:52:16 +0100
Subject: [PATCH] Add report button to dapp request modal

---
 .../utils/beacon/PermissionRequestModal.tsx   | 30 +++++++++++------
 .../beacon/PermissionRequestModal.tsx         | 32 +++++++++++++------
 apps/web/src/styles/theme.ts                  |  3 +-
 3 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/apps/desktop/src/utils/beacon/PermissionRequestModal.tsx b/apps/desktop/src/utils/beacon/PermissionRequestModal.tsx
index 8735e66f68..ea75d6f4c4 100644
--- a/apps/desktop/src/utils/beacon/PermissionRequestModal.tsx
+++ b/apps/desktop/src/utils/beacon/PermissionRequestModal.tsx
@@ -16,6 +16,7 @@ import {
   FormErrorMessage,
   Heading,
   Image,
+  Link,
   ModalBody,
   ModalCloseButton,
   ModalContent,
@@ -77,15 +78,6 @@ export const PermissionRequestModal = ({ request }: { request: PermissionRequest
         <Text marginTop="10px" color={colors.gray[400]} textAlign="center" size="sm">
           {request.appMetadata.name} is requesting permission to sign this operation.
         </Text>
-
-        <Flex alignItems="center" justifyContent="center" marginTop="10px">
-          <Heading marginRight="4px" color={colors.gray[450]} size="sm">
-            Network:
-          </Heading>
-          <Text color={colors.gray[400]} size="sm">
-            {capitalize(request.network.type)}
-          </Text>
-        </Flex>
       </ModalHeader>
       <ModalCloseButton />
       <ModalBody data-testid="beacon-request-body">
@@ -102,6 +94,26 @@ export const PermissionRequestModal = ({ request }: { request: PermissionRequest
           <Heading size="sm">{request.appMetadata.name}</Heading>
         </Flex>
 
+        <Flex alignItems="center" justifyContent="space-between" marginTop="12px">
+          <Flex alignItems="center" gap="4px">
+            <Text size="xs">Suspicious DApp? </Text>
+            <Link
+              fontSize="12px"
+              textDecoration="underline"
+              href="mailto:umami-support@trili.tech"
+              isExternal
+            >
+              Report
+            </Link>
+          </Flex>
+          <Flex alignItems="center" justifyContent="center">
+            <Heading marginRight="4px" color={colors.gray[450]} size="md">
+              Network:
+            </Heading>
+            <Text color={colors.gray[400]}>{capitalize(request.network.type)}</Text>
+          </Flex>
+        </Flex>
+
         <Accordion marginTop="16px" allowToggle={true}>
           <AccordionItem background={colors.gray[800]} border="none" borderRadius="8px">
             <AccordionButton>
diff --git a/apps/web/src/components/beacon/PermissionRequestModal.tsx b/apps/web/src/components/beacon/PermissionRequestModal.tsx
index 90f1e6fc25..f1e6e3facd 100644
--- a/apps/web/src/components/beacon/PermissionRequestModal.tsx
+++ b/apps/web/src/components/beacon/PermissionRequestModal.tsx
@@ -16,6 +16,7 @@ import {
   FormErrorMessage,
   Heading,
   Image,
+  Link,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -79,15 +80,6 @@ export const PermissionRequestModal = ({ request }: { request: PermissionRequest
         <Text marginTop="10px" color={color("700")} textAlign="center" size="sm">
           {request.appMetadata.name} is requesting permission to sign this operation.
         </Text>
-
-        <Flex alignItems="center" justifyContent="center" marginTop="10px">
-          <Heading marginRight="4px" color={color("700")} size="sm">
-            Network:
-          </Heading>
-          <Text color={color("700")} fontWeight="400" size="sm">
-            {capitalize(request.network.type)}
-          </Text>
-        </Flex>
       </ModalHeader>
       <ModalCloseButton />
       <ModalBody data-testid="beacon-request-body">
@@ -109,6 +101,28 @@ export const PermissionRequestModal = ({ request }: { request: PermissionRequest
           <Heading size="sm">{request.appMetadata.name}</Heading>
         </Flex>
 
+        <Flex alignItems="center" justifyContent="space-between" marginTop="12px">
+          <Flex alignItems="center" gap="4px">
+            <Text size="sm">Suspicious DApp? </Text>
+            <Link
+              fontSize="14px"
+              textDecoration="underline"
+              href="mailto:umami-support@trili.tech"
+              isExternal
+            >
+              Report
+            </Link>
+          </Flex>
+          <Flex alignItems="center" justifyContent="center">
+            <Heading marginRight="4px" color={color("700")} size="md">
+              Network:
+            </Heading>
+            <Text color={color("700")} fontWeight="400">
+              {capitalize(request.network.type)}
+            </Text>
+          </Flex>
+        </Flex>
+
         <Accordion marginTop="16px" allowToggle={true}>
           <AccordionItem background={color("100")} border="none" borderRadius="8px">
             <AccordionButton borderRadius="full">
diff --git a/apps/web/src/styles/theme.ts b/apps/web/src/styles/theme.ts
index bd5a666673..b860568a0a 100644
--- a/apps/web/src/styles/theme.ts
+++ b/apps/web/src/styles/theme.ts
@@ -293,7 +293,8 @@ const theme = extendTheme({
     },
     Link: {
       baseStyle: {
-        color: "gray.500",
+        color: "gray.600",
+        textUnderlineOffset: "2px",
       },
       variants: {
         dropdownOption: {