feat(vault): staking

apps/vault/package.json

@@ -15,6 +15,7 @@
     "@next/font": "^14.1.0",
     "@reduxjs/toolkit": "^2.2.1",
     "@tanstack/react-query": "^5.22.2",
+    "big.js": "^6.2.2",
     "chart.js": "^4.4.2",
     "core": "workspace:*",
     "firebase": "^10.8.0",
@@ -30,6 +31,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
+    "@types/big.js": "^6.2.2",
     "@types/node": "^20",
     "@types/react": "^18.2.8",
     "@types/react-dom":"^18.2.19",

apps/vault/src/components/Breadcrumbs.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import HomeIcon from '../assets/home-icon.svg';
+import ChevronRightIcon from '../assets/chevron-right-icon.svg';
+import Image from 'next/image';
+import Link from 'next/link';
+
+interface BreadcrumbsProps {
+  pages: Page[];
+}
+
+interface Page {
+  name: string;
+  href: string;
+  current?: boolean;
+}
+
+const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ pages }) => {
+  return (
+    <nav aria-label="Breadcrumb" className="px-4 mt-4 flex">
+      <ol role="list" className="flex items-center space-x-4">
+        <li>
+          <div>
+            <Link href="/" className="text-gray-400 hover:text-gray-500">
+              <Image className="ps-2 w-8 inline" src={HomeIcon} alt={'Home'} />
+              <span className="sr-only">Home</span>
+            </Link>
+          </div>
+        </li>
+        {pages.map((page) => (
+          <li key={page.name}>
+            <div className="flex items-center">
+              <Image
+                className="ps-2 h-5 w-5 inline"
+                src={ChevronRightIcon}
+                alt={'>'}
+              />
+              <Link
+                href={page.href}
+                aria-current={page.current ? 'page' : undefined}
+                className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+              >
+                {page.name}
+              </Link>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+};
+
+export default Breadcrumbs;

apps/vault/src/components/CopyText.tsx

@@ -0,0 +1,40 @@
+import Image from 'next/image';
+import CopyIcon from '../assets/copy-icon.svg';
+import React, { useState } from 'react';
+import { InfoAlert } from '@/components';
+
+interface CopyTextProps {
+  text: string;
+  alertMessage?: string;
+}
+
+const CopyText: React.FC<CopyTextProps> = ({ text, alertMessage }) => {
+  const [alertText, setAlertText] = useState<string | null>(null);
+  return (
+    <>
+      <InfoAlert
+        show={alertText != null}
+        hide={() => setAlertText(null)}
+        alertText={alertText || ''}
+        className="my-3"
+      />
+      <div className="flex flex-row no-wrap">
+        <div className="grow-0 outline rounded p-1">
+          <span className="font-mono">{text}</span>
+          <Image
+            className="ps-2 w-8 inline hover:opacity-70"
+            src={CopyIcon}
+            alt={'Copy'}
+            onClick={() =>
+              navigator.clipboard
+                .writeText(text || '')
+                .then(() => setAlertText(alertMessage ?? 'Copied'))
+            }
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CopyText;

apps/vault/src/components/CryptoId.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface CryptoIdProps {
+  id: string;
+  className?: string;
+}
+
+const CryptoId: React.FC<CryptoIdProps> = ({ id, className }) => {
+  return (
+    <div className={`flex ${className}`}>
+      <Image
+        src={`https://raw.githubusercontent.com/spothq/cryptocurrency-icons/refs/heads/master/svg/icon/${getMainCoinId(id)}.svg`}
+        alt="Crypto Logo"
+        height={24}
+        width={24}
+        onError={(event) => {
+          // @ts-ignore
+          event.target.src =
+            'https://raw.githubusercontent.com/spothq/cryptocurrency-icons/refs/heads/master/svg/icon/generic.svg';
+        }}
+      />
+      <span className={`ms-1`}>{id}</span>
+    </div>
+  );
+};
+
+export default CryptoId;
+
+function getMainCoinId(id: string): string {
+  if (id === 'AVAXTEST') {
+    return 'avax';
+  }
+  return id.split('_')[0].toLowerCase();
+}

apps/vault/src/components/NavigationBar.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+
+const tabs = [
+  { name: 'Home', href: '/' },
+  { name: 'Staking', href: '/staking' },
+  { name: 'Staking positions', href: '/staking/positions' },
+  { name: 'Staking providers', href: '/staking/providers' },
+];
+
+function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(' ');
+}
+
+const NavigationBar: React.FC = () => {
+  const router = useRouter();
+  const currentTab = tabs.find((tab) => tab.href === router.pathname);
+  const tabName = currentTab ? currentTab.name : undefined;
+  return (
+    <div>
+      <div className="border-b border-gray-200">
+        <nav aria-label="Tabs" className="-mb-px flex space-x-8">
+          {tabs.map((tab) => (
+            <Link
+              key={tab.name}
+              href={tab.href}
+              aria-current={tab.name == tabName ? 'page' : undefined}
+              className={classNames(
+                tab.name == tabName
+                  ? 'text-label-dark-primary border-b-2 border-brand-light-primary'
+                  : 'text-label-dark-secondary',
+                'whitespace-nowrap h-10 p-2 text-sm font-medium'
+              )}
+            >
+              {tab.name}
+            </Link>
+          ))}
+        </nav>
+      </div>
+    </div>
+  );
+};
+
+export default NavigationBar;

apps/vault/src/components/VaultHeader.tsx

@@ -6,9 +6,6 @@ import config from '@/firebase/config';
 import { Header } from 'ui';
 import vaultLogo from '../assets/vault-logo.svg';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
-
-interface VaultHeaderProps {}
 
 // TODO: upgrade the secondary header here with the ui one
 const AuthHeader = dynamic(
@@ -26,10 +23,7 @@ const AuthHeader = dynamic(
   }
 );
 
-const VaultHeader: React.FC<VaultHeaderProps> = ({}) => {
-  const router = useRouter();
-  const isLanding =
-    router.pathname.startsWith('/products/') || router.pathname === '/';
+const VaultHeader: React.FC = () => {
   return (
     <>
       <AuthHeader

apps/vault/src/components/alerts/InfoAlert.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import CircleCheckIcon from '../../assets/circle-check-icon.png';
-import XMarkIcon from '../../assets/x-mark-icon.png';
+import CircleCheckIcon from '../../assets/circle-check-icon.svg';
+import XMarkIcon from '../../assets/xmark-icon.svg';
 import Image from 'next/image';
 
 interface InfoAlertProps {
@@ -23,7 +23,7 @@ const InfoAlert: React.FC<InfoAlertProps> = ({
       <div className="flex">
         <div className="flex-shrink-0">
           <Image
-            className="h-5 w-5"
+            className="h-7 w-7"
             aria-hidden="true"
             src={CircleCheckIcon}
             alt={'check'}
@@ -34,22 +34,20 @@ const InfoAlert: React.FC<InfoAlertProps> = ({
             {alertText}
           </p>
         </div>
-        <div className="ml-auto pl-3">
-          <div className="-mx-1.5 -my-1.5">
-            <button
-              type="button"
-              className="inline-flex rounded-md p-1.5 hover:bg-bg-light-tertiary focus:outline-none focus:ring-2 focus:ring-brand-light-tertiary focus:ring-offset-2"
-              onClick={hide}
-            >
-              <span className="sr-only">Dismiss</span>
-              <Image
-                className="h-5 w-5"
-                aria-hidden="true"
-                src={XMarkIcon}
-                alt={'Dismiss'}
-              />
-            </button>
-          </div>
+        <div className="ml-auto">
+          <button
+            type="button"
+            className="inline-flex rounded-full p-1 mt-1 hover:bg-bg-light-tertiary focus:outline-none focus:ring-2 focus:ring-brand-light-tertiary focus:ring-offset-2"
+            onClick={hide}
+          >
+            <span className="sr-only">Dismiss</span>
+            <Image
+              className="h-5 w-5"
+              aria-hidden="true"
+              src={XMarkIcon}
+              alt={'Dismiss'}
+            />
+          </button>
         </div>
       </div>
     </div>

apps/vault/src/components/index.ts

@@ -1,8 +1,17 @@
 export { default as VaultHeader } from './VaultHeader';
 export { default as VaultFooter } from './VaultFooter';
+export { default as NavigationBar } from './NavigationBar';
+export { default as Breadcrumbs } from './Breadcrumbs';
+export { default as CopyText } from './CopyText';
+export { default as CryptoId } from './CryptoId';
+export { default as VaultStakingPositionStatusLabel } from './staking/VaultStakingPositionStatusLabel';
+export { default as StakingAssetsTable } from './staking/VaultStakingAssetsTable';
+export { default as VaultStakeActionModal } from './staking/VaultStakeActionModal';
+export { default as VaultStakingPositionsTable } from './staking/positions/VaultStakingPositionsTable';
+export { default as VaultStakingProviderInfo } from './staking/providers/VaultStakingProviderInfo';
 export { default as BalanceCard } from './vaultAssets/BalanceCard';
 export { default as DonutChart } from './vaultAssets/DonutChart';
 export { default as CurrencyDropdown } from './vaultAssets/CurrencyDropdown';
 export { default as VaultAssetsTable } from './vaultAssets/VaultAssetsTable';
-export { default as AddressModal } from './vaultAssetAddress/AddressModal';
+export { default as AddressModal } from './vaultAssets/address/AddressModal';
 export { default as InfoAlert } from './alerts/InfoAlert';