Merge pull request #425 from WalletConnect/feat/redirect-to-domain-on-click-in-topic-header

redirect to domain on click

Author: enesozturk

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>
   )
 }

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'

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;

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 {

src/components/notifications/AppNotifications/AppNotificationsHeader/index.tsx

@@ -1,11 +1,15 @@
-import { useContext, useState } from 'react'
+import { useContext } 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'
 import { useIsMobile } from '@/utils/hooks'
+import getDomainHref from '@/utils/url'
 
 import AppNotificationDropdown from '../AppNotificationDropdown'
 
@@ -17,6 +21,7 @@ interface IAppNotificationsHeaderProps {
   name: string
   domain: string
 }
+
 const AppNotificationsHeader: React.FC<IAppNotificationsHeaderProps> = ({
   domain,
   logo,
@@ -25,7 +30,7 @@ const AppNotificationsHeader: React.FC<IAppNotificationsHeaderProps> = ({
 }) => {
   const isMobile = useIsMobile()
   const { dappOrigin } = useContext(W3iContext)
-  const [dropdownToShow, setDropdownToShow] = useState<string | undefined>()
+  const href = getDomainHref(domain)
 
   return (
     <div className="AppNotificationsHeader">
@@ -53,18 +58,26 @@ 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={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}
                 dropdownPlacement="bottomLeft"
+                closeDropdown={noop}
               />
             </div>
           </>

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
+}