external links

.changeset/nasty-ears-act.md

@@ -0,0 +1,5 @@
+---
+"hub": patch
+---
+
+external links

apps/hub/src/app/_components/link-item.tsx

@@ -1,5 +1,6 @@
 import { ExternalIcon } from '@status-im/icons/20'
 import { Link } from '@status-im/status-network/components'
+import { cx } from 'cva'
 import { usePathname } from 'next/navigation'
 
 type LinkItemProps = {
@@ -8,9 +9,11 @@
   icon: React.ComponentType<{ className?: string }>
   href: string
   tag?: string
+  soon?: boolean
 }
 
 const LinkItem = (props: LinkItemProps) => {
+  const { id, label, icon: Icon, href, tag, soon } = props
   const pathname = usePathname()
 
   const isActiveRoute = (href: string) => {
@@ -20,33 +23,41 @@
     return pathname === href
   }
 
-  const isExternal = props.href.startsWith('http')
-  const isActive = isActiveRoute(props.href)
+  const isExternal = href.startsWith('http')
+  const isActive = isActiveRoute(href)
 
   return (
-    <li key={props.id}>
+    <li key={id}>
       <Link
-        href={props.href}
-        className={`flex items-center justify-between gap-2 rounded-16 p-4 transition-colors ${
+        href={soon ? '#' : href}
+        className={cx(
+          'flex items-center justify-between gap-2 rounded-16 p-4 transition-colors',
           isActive
             ? 'bg-customisation-purple-50/5 text-purple'
-            : 'text-neutral-90 hover:bg-neutral-10 hover:text-neutral-100'
-        }`}
+            : 'text-neutral-90 hover:bg-neutral-10 hover:text-neutral-100',
+          soon && 'pointer-events-none'
+        )}
+        aria-disabled={soon}
       >
-        <div className="flex items-center gap-2">
-          <props.icon className="size-5" />
-          <span className="text-15 font-medium leading-[1.45] tracking-[-0.9%]">
-            {props.label}
-          </span>
-          {!!props.tag && (
-            <div className="inline-flex items-center gap-1 rounded-full bg-purple px-1.5 py-0.5">
-              <span className="text-11 font-medium leading-[1.42] tracking-[-0.5%] text-white-100">
-                {props.tag}
-              </span>
-            </div>
-          )}
+        <div className="flex flex-1 items-center justify-between">
+          <div className={cx('flex items-center gap-2', soon && 'opacity-50')}>
+            <Icon className="size-5" />
+            <span className="text-15 font-medium">{label}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            {!!tag && (
+              <div className="inline-flex items-center gap-1 rounded-full bg-purple px-1.5 py-0.5">
+                <span className="text-11 text-white-100">{tag}</span>
+              </div>
+            )}
+            {soon && (
+              <div className="inline-flex items-center gap-1 rounded-full bg-neutral-80/5 px-1.5 py-0.5">
+                <span className="text-11 text-neutral-100">Soon</span>
+              </div>
+            )}
+          </div>
         </div>
-        {isExternal && <ExternalIcon />}
+        {isExternal && !soon && <ExternalIcon />}
       </Link>
     </li>
   )

apps/hub/src/app/_components/sidebar.tsx

@@ -23,7 +23,7 @@ const NAV_LINKS = [
     id: 'deposit',
     label: 'Deposit',
     icon: DepositIcon,
-    href: 'https://example.com',
+    href: '/deposit',
     tag: 'Mainnet',
   },
   { id: 'discover', label: 'Discover', icon: DiscoverIcon, href: '/discover' },
@@ -32,24 +32,31 @@ const NAV_LINKS = [
 ]
 
 const TOKENS_LINKS = [
-  { id: 'swap', label: 'Swap', icon: SwapIcon, href: 'https://example.com' },
+  {
+    id: 'swap',
+    label: 'Swap',
+    icon: SwapIcon,
+    href: '#',
+    soon: true,
+  },
   {
     id: 'launch',
     label: 'Launch',
     icon: LaunchIcon,
-    href: 'https://example.com',
+    href: '#',
+    soon: true,
   },
   {
     id: 'bridge',
     label: 'Bridge',
     icon: BridgeIcon,
-    href: 'https://example.com',
+    href: 'https://bridge.status.network/',
   },
   {
     id: 'mint-usdz',
-    label: 'Mint USDZ',
+    label: 'Pre-mint GUSD',
     icon: MintIcon,
-    href: 'https://example.com',
+    href: '/deposit',
   },
 ]
 
@@ -58,7 +65,7 @@ const OTHER_LINKS = [
     id: 'explorer',
     label: 'Explorer',
     icon: ExplorerIcon,
-    href: 'https://example.com',
+    href: 'https://sepoliascan.status.network/',
   },
   {
     id: 'governance',
@@ -70,9 +77,14 @@ const OTHER_LINKS = [
     id: 'submit-app',
     label: 'Submit an app',
     icon: SubmitAppIcon,
-    href: '/submit-app',
+    href: 'https://statusnetwork.typeform.com/builder',
+  },
+  {
+    id: 'docs',
+    label: 'Docs',
+    icon: DocsIcon,
+    href: 'https://docs.status.network/',
   },
-  { id: 'docs', label: 'Docs', icon: DocsIcon, href: '/docs' },
 ]
 
 type Props = {

apps/hub/tailwind.config.ts

@@ -87,6 +87,13 @@ export default {
             letterSpacing: '-0.024375rem',
           },
         ],
+        11: [
+          '0.6875rem',
+          {
+            lineHeight: '0.',
+            letterSpacing: '-0.0034375rem',
+          },
+        ],
       },
 
       colors: {