add deposit

.changeset/poor-shoes-hear.md

@@ -0,0 +1,5 @@
+---
+"hub": patch
+---
+
+feat: Add UI and hooks for pre-deposit functionality

apps/hub/src/app/_components/hub-layout.tsx

@@ -1,8 +1,12 @@
 'use client'
 import { useState } from 'react'
 
+import { ToastContainer } from '@status-im/components'
 import { Divider, Footer } from '@status-im/status-network/components'
 
+import { type Vault, VAULTS } from '~constants/index'
+
+import { PreDepositModal } from './pre-deposit-modal'
 import { Sidebar } from './sidebar'
 import { TopBar } from './top-bar'
 
@@ -12,6 +16,11 @@ interface HubLayoutProps {
 
 export function HubLayout({ children }: HubLayoutProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
+  const [selectedVault, setSelectedVault] = useState<Vault | null>(null)
+
+  const handleDepositClick = () => {
+    setSelectedVault(VAULTS[0])
+  }
 
   return (
     <div className="relative isolate z-10 min-h-screen w-full bg-neutral-100 px-1 pb-1">
@@ -22,25 +31,39 @@ export function HubLayout({ children }: HubLayoutProps) {
       <div className="relative w-full overflow-hidden rounded-20 bg-white-100">
         <div className="mx-auto flex h-[calc(100vh-64px-123px)] w-full max-w-[1504px] flex-row overflow-hidden lg:h-[calc(100vh-64px-50px)]">
           {/* Sidebar */}
-          <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+          <Sidebar
+            isOpen={sidebarOpen}
+            onClose={() => setSidebarOpen(false)}
+            onDepositClick={handleDepositClick}
+          />
 
           {/* Main Content */}
           <main className="min-w-0 flex-1 overflow-auto">{children}</main>
         </div>
 
         <section className="sticky z-50 overflow-visible">
           <div className="relative">
-            <div className="absolute left-0 top-0 h-px w-9 bg-gradient-to-l from-[#E7EAEE] to-transparent" />
+            <div className="absolute left-0 top-0 h-px w-9 bg-gradient-to-l from-[#E7EAEE] to-[transparent]" />
             <div className="px-10">
               <Divider variant="fullscreen" />
             </div>
-            <div className="absolute right-0 top-0 h-px w-9 bg-gradient-to-r from-[#E7EAEE] to-transparent" />
+            <div className="absolute right-0 top-0 h-px w-9 bg-gradient-to-r from-[#E7EAEE] to-[transparent]" />
           </div>
           <div className="px-0 lg:px-12">
             <Footer />
           </div>
         </section>
       </div>
+      <ToastContainer />
+      {selectedVault && (
+        <PreDepositModal
+          open={true}
+          onOpenChange={open => !open && setSelectedVault(null)}
+          vault={selectedVault}
+          setActiveVault={setSelectedVault}
+          vaults={VAULTS}
+        />
+      )}
     </div>
   )
 }

apps/hub/src/app/_components/icons/index.ts

@@ -20,5 +20,6 @@ export { default as SNTIcon } from './snt-icon'
 export { default as StakeIcon } from './stake-icon'
 export { default as SubmitAppIcon } from './submit-app-icon'
 export { default as SwapIcon } from './swap-icon'
+export { default as TokenIcon } from './token-icon'
 export { default as TwitterIcon } from './twitter-icon'
 export { default as VaultIcon } from './vault-icon'

apps/hub/src/app/_components/icons/token-icon.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image'
+
+export type TokenIconType = {
+  token: string
+}
+
+export default function TokenIcon({ token }: TokenIconType) {
+  return (
+    <div className="relative size-8">
+      <Image
+        src={`/tokens/${token}.png`}
+        alt={token}
+        width="64"
+        height="64"
+        quality="100"
+      />
+    </div>
+  )
+}

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

@@ -9,6 +9,7 @@ type LinkItemProps = {
   icon: React.ComponentType<{ className?: string }>
   href: string
   tag?: string
+  onClick?: () => void
 }
 
 const LinkItem = (props: LinkItemProps) => {
@@ -25,10 +26,18 @@ const LinkItem = (props: LinkItemProps) => {
   const isExternal = href.startsWith('http')
   const isActive = isActiveRoute(href)
 
+  const handleClick = (e: React.MouseEvent) => {
+    if (props.onClick) {
+      e.preventDefault()
+      props.onClick()
+    }
+  }
+
   return (
     <li key={id}>
       <Link
         href={href}
+        onClick={handleClick}
         className={cx(
           'flex items-center justify-between gap-2 rounded-16 p-4 transition-colors',
           isActive