From 45d47fa09a13c520379396a74fc8135dcc8b801f Mon Sep 17 00:00:00 2001
From: enesozturk <enesozturk.d@gmail.com>
Date: Tue, 30 Jan 2024 14:23:36 +0300
Subject: [PATCH 1/3] redirect to domain on click

---
 .../general/Icon/ArrowRightTopIcon.tsx        | 36 ++++---------------
 .../AppExplorer/AppCard/index.tsx             |  3 +-
 .../AppNotifications/AppNotifications.scss    |  3 +-
 .../AppNotificationsHeader.scss               | 19 +++++++---
 .../AppNotificationsHeader/index.tsx          | 21 ++++++++---
 5 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/src/components/general/Icon/ArrowRightTopIcon.tsx b/src/components/general/Icon/ArrowRightTopIcon.tsx
index 87952782..d1301067 100644
--- a/src/components/general/Icon/ArrowRightTopIcon.tsx
+++ b/src/components/general/Icon/ArrowRightTopIcon.tsx
@@ -2,35 +2,13 @@ import React from 'react'
 
 const ArrowRightTopIcon: React.FC<React.SVGProps<SVGSVGElement>> = props => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="17"
-      viewBox="0 0 16 17"
-      fill="none"
-      {...props}
-    >
-      <g clipPath="url(#clip0_4498_48131)">
-        <path
-          d="M11.3012 5.19971L4.70117 11.7997"
-          stroke="currentColor"
-          strokeWidth="1.25"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M6 5.19922L11.2993 5.19932V10.5"
-          stroke="currentColor"
-          strokeWidth="1.25"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_4498_48131">
-          <rect width="16" height="16" fill="white" transform="translate(0 0.5)" />
-        </clipPath>
-      </defs>
+    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.67029 2.14284C2.67029 1.74835 2.99009 1.42856 3.38457 1.42856H7.85648C8.25097 1.42856 8.57077 1.74835 8.57077 2.14284V6.61475C8.57077 7.00924 8.25097 7.32904 7.85648 7.32904C7.462 7.32904 7.1422 7.00924 7.1422 6.61475V3.86796L2.64795 8.36221C2.36901 8.64115 1.91674 8.64115 1.6378 8.36221C1.35885 8.08326 1.35885 7.631 1.6378 7.35205L6.13272 2.85713H3.38457C2.99009 2.85713 2.67029 2.53733 2.67029 2.14284Z"
+        fill="currentColor"
+      />
     </svg>
   )
 }
diff --git a/src/components/notifications/AppExplorer/AppCard/index.tsx b/src/components/notifications/AppExplorer/AppCard/index.tsx
index 6e97def5..e143b11a 100644
--- a/src/components/notifications/AppExplorer/AppCard/index.tsx
+++ b/src/components/notifications/AppExplorer/AppCard/index.tsx
@@ -40,6 +40,7 @@ const AppCard: React.FC<AppCardProps> = ({
   const { activeSubscriptions } = useContext(W3iContext)
 
   const host = new URL(url).host
+  const projectURL = new URL(url)
 
   useEffect(() => {
     // If the account changes, the subscribing flow has broken.
@@ -49,8 +50,6 @@ const AppCard: React.FC<AppCardProps> = ({
   const subscribed =
     userPubkey &&
     activeSubscriptions.some(element => {
-      const projectURL = new URL(url)
-
       return projectURL.hostname === element.metadata.appDomain
     })
   const logoURL = logo || '/fallback.svg'
diff --git a/src/components/notifications/AppNotifications/AppNotifications.scss b/src/components/notifications/AppNotifications/AppNotifications.scss
index d57ed28a..99439c54 100644
--- a/src/components/notifications/AppNotifications/AppNotifications.scss
+++ b/src/components/notifications/AppNotifications/AppNotifications.scss
@@ -199,6 +199,7 @@
           color: var(--accent-color-1);
           display: none;
           align-items: center;
+          gap: 0.125rem;
 
           span {
             color: var(--accent-color-1);
@@ -214,7 +215,7 @@
       color: var(--fg-color-1);
       display: flex;
       align-items: center;
-      gap: 2px;
+      gap: 0.125rem;
 
       &__external-link-icon {
         display: inline-block;
diff --git a/src/components/notifications/AppNotifications/AppNotificationsHeader/AppNotificationsHeader.scss b/src/components/notifications/AppNotifications/AppNotificationsHeader/AppNotificationsHeader.scss
index c41f081f..1ed6dc09 100644
--- a/src/components/notifications/AppNotifications/AppNotificationsHeader/AppNotificationsHeader.scss
+++ b/src/components/notifications/AppNotifications/AppNotificationsHeader/AppNotificationsHeader.scss
@@ -77,13 +77,22 @@
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
     }
-    &__description {
+    &__link {
       color: var(--fg-color-2);
-
+      text-decoration: none;
+      display: flex;
+      align-items: center;
       overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
+      gap: 0.125rem;
+
+      svg {
+        display: inline-block;
+      }
+
+      &:hover {
+        color: var(--fg-color-2);
+        filter: brightness(0.9);
+      }
     }
   }
   &__actions {
diff --git a/src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx b/src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx
index 4d10a5ce..a7b97893 100644
--- a/src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx
+++ b/src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx
@@ -1,7 +1,10 @@
 import { useContext, useState } from 'react'
 
+import { Link } from 'react-router-dom'
+
 import BackButton from '@/components/general/BackButton'
 import Button from '@/components/general/Button'
+import ArrowRightTopIcon from '@/components/general/Icon/ArrowRightTopIcon'
 import Text from '@/components/general/Text'
 import W3iContext from '@/contexts/W3iContext/context'
 import { noop } from '@/utils/general'
@@ -17,6 +20,7 @@ interface IAppNotificationsHeaderProps {
   name: string
   domain: string
 }
+
 const AppNotificationsHeader: React.FC<IAppNotificationsHeaderProps> = ({
   domain,
   logo,
@@ -25,7 +29,7 @@ const AppNotificationsHeader: React.FC<IAppNotificationsHeaderProps> = ({
 }) => {
   const isMobile = useIsMobile()
   const { dappOrigin } = useContext(W3iContext)
-  const [dropdownToShow, setDropdownToShow] = useState<string | undefined>()
+  const url = new URL('https://' + domain)
 
   return (
     <div className="AppNotificationsHeader">
@@ -53,14 +57,21 @@ const AppNotificationsHeader: React.FC<IAppNotificationsHeaderProps> = ({
               />
               <div className="AppNotificationsHeader__app__name_container">
                 <h2 className="AppNotificationsHeader__app__name">{name}</h2>
-                <Text variant="link-500" className="AppNotificationsHeader__app__description">
-                  {domain}
-                </Text>
+                <Link
+                  to={url.href}
+                  className="AppNotificationsHeader__app__link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Text variant="link-500">{domain}</Text>
+                  <div>
+                    <ArrowRightTopIcon />
+                  </div>
+                </Link>
               </div>
             </div>
             <div className="AppNotificationsHeader__wrapper">
               <AppNotificationDropdown
-                closeDropdown={() => setDropdownToShow(undefined)}
                 h="2.5em"
                 w="2.5em"
                 notificationId={id}

From b5be9a24ea2dbcd33c53dad6158c95b1df351578 Mon Sep 17 00:00:00 2001
From: enesozturk <enesozturk.d@gmail.com>
Date: Tue, 30 Jan 2024 14:52:32 +0300
Subject: [PATCH 2/3] fix: type def or dropdown

---
 .../AppNotifications/AppNotificationsHeader/index.tsx          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx b/src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx
index a7b97893..f7eba656 100644
--- a/src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx
+++ b/src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react'
+import { useContext } from 'react'
 
 import { Link } from 'react-router-dom'
 
@@ -76,6 +76,7 @@ const AppNotificationsHeader: React.FC<IAppNotificationsHeaderProps> = ({
                 w="2.5em"
                 notificationId={id}
                 dropdownPlacement="bottomLeft"
+                closeDropdown={noop}
               />
             </div>
           </>

From 4f20a53282a124c42d4407145eb40720a4d1c8b0 Mon Sep 17 00:00:00 2001
From: enesozturk <enesozturk.d@gmail.com>
Date: Mon, 12 Feb 2024 12:30:44 +0300
Subject: [PATCH 3/3] chore: update url generation logic

---
 .../AppNotificationsHeader/index.tsx             |  5 +++--
 src/utils/url.ts                                 | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/url.ts

diff --git a/src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx b/src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx
index f7eba656..8a68c2a2 100644
--- a/src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx
+++ b/src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx
@@ -9,6 +9,7 @@ import Text from '@/components/general/Text'
 import W3iContext from '@/contexts/W3iContext/context'
 import { noop } from '@/utils/general'
 import { useIsMobile } from '@/utils/hooks'
+import getDomainHref from '@/utils/url'
 
 import AppNotificationDropdown from '../AppNotificationDropdown'
 
@@ -29,7 +30,7 @@ const AppNotificationsHeader: React.FC<IAppNotificationsHeaderProps> = ({
 }) => {
   const isMobile = useIsMobile()
   const { dappOrigin } = useContext(W3iContext)
-  const url = new URL('https://' + domain)
+  const href = getDomainHref(domain)
 
   return (
     <div className="AppNotificationsHeader">
@@ -58,7 +59,7 @@ const AppNotificationsHeader: React.FC<IAppNotificationsHeaderProps> = ({
               <div className="AppNotificationsHeader__app__name_container">
                 <h2 className="AppNotificationsHeader__app__name">{name}</h2>
                 <Link
-                  to={url.href}
+                  to={href}
                   className="AppNotificationsHeader__app__link"
                   target="_blank"
                   rel="noopener noreferrer"
diff --git a/src/utils/url.ts b/src/utils/url.ts
new file mode 100644
index 00000000..5e5368f3
--- /dev/null
+++ b/src/utils/url.ts
@@ -0,0 +1,16 @@
+export const PROTOCOL = 'https://'
+
+/**
+ * Returns the full URL of the given domain
+ * @param domain
+ * @return Href value - string
+ */
+export default function getDomainHref(domain: string): string {
+  if (!domain) {
+    throw new Error('Domain is required')
+  }
+
+  const url = new URL(PROTOCOL + domain)
+
+  return url.href
+}