Merge pull request #425 from WalletConnect/feat/redirect-to-domain-on…

…-click-in-topic-header redirect to domain on click
WalletConnect · Feb 12, 2024 · 4856a95 · 4856a95
2 parents 393c689 + 4f20a53
commit 4856a95
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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/...ponents/notifications/AppNotifications/AppNotificationsHeader/AppNotificationsHeader.scss b/...ponents/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
@@ -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>
           </>

diff --git a/src/utils/url.ts 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
+}