feat(ui): APKT-2592 make wui-ux-by-reown clickable (#4198)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>
Co-authored-by: Derek <[email protected]>

Author: 3 people

packages/ui/src/composites/wui-ux-by-reown/index.ts

@@ -3,6 +3,7 @@ import { LitElement, html } from 'lit'
 import '../../components/wui-icon/index.js'
 import '../../components/wui-text/index.js'
 import '../../layout/wui-flex/index.js'
+import { REOWN_URL } from '../../utils/ConstantsUtil.js'
 import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
 import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
@@ -14,15 +15,17 @@ export class WuiUxByReown extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <wui-flex
-        justifyContent="center"
-        alignItems="center"
-        gap="xs"
-        .padding=${['0', '0', 'l', '0']}
-      >
-        <wui-text variant="small-500" color="fg-100"> UX by </wui-text>
-        <wui-icon name="reown" size="xxxl" class="reown-logo"></wui-icon>
-      </wui-flex>
+      <a href=${REOWN_URL} rel="noreferrer" target="_blank" style="text-decoration: none;">
+        <wui-flex
+          justifyContent="center"
+          alignItems="center"
+          gap="xs"
+          .padding=${['0', '0', 'l', '0']}
+        >
+          <wui-text variant="small-500" color="fg-100"> UX by </wui-text>
+          <wui-icon name="reown" size="xxxl" class="reown-logo"></wui-icon>
+        </wui-flex>
+      </a>
     `
   }
 }

packages/ui/src/composites/wui-ux-by-reown/styles.ts

@@ -4,4 +4,13 @@ export default css`
   .reown-logo {
     height: var(--wui-spacing-xxl);
   }
+
+  a {
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  a:hover {
+    opacity: 0.9;
+  }
 `

packages/ui/src/utils/ConstantsUtil.ts

@@ -1,2 +1,3 @@
 export const specialCharactersRegex = /[.*+?^${}()|[\]\\]/gu
 export const numbersRegex = /[0-9,.]/u
+export const REOWN_URL = 'https://reown.com'