Merge pull request #241 from stabilitydao/4-vault

UI kit: breadcrumbs + navbar + table + fitlers

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stability-ui",
   "type": "module",
-  "version": "0.12.2-alpha",
+  "version": "0.12.3-alpha",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/components/Header/Wallet.tsx

@@ -128,8 +128,9 @@ const Wallet = (): JSX.Element => {
     }
   };
   const initProfile = async () => {
-    if (!$assetsBalances) return; // dublicated for TS
+    if (!$assetsBalances[$currentChainID]) return; // dublicated for TS
     let profileBalance = 0;
+
     const assets = Object.entries($assetsBalances[$currentChainID])
       .filter((token) => token[1] && getTokenData(token[0]))
       .map(([address, data]) => {
@@ -147,6 +148,7 @@ const Wallet = (): JSX.Element => {
           symbol: getTokenData(address)?.symbol,
         };
       });
+
     if (currentChain?.name === "Polygon") {
       const profitMaker = await checkPM();
       if (profitMaker) assets.push(profitMaker);
@@ -209,19 +211,19 @@ const Wallet = (): JSX.Element => {
   );
 
   return (
-    <div className="flex flex-nowrap justify-end whitespace-nowrap">
-      {currentChain && (
+    <div className="flex gap-3 flex-nowrap justify-end whitespace-nowrap text-[#F9F8FA] text-[16px] font-semibold">
+      {currentChain && $account && (
         <button
-          className="bg-[#272451] sm:py-1 px-3 rounded-xl mx-2 sm:mx-4 flex items-center sm:gap-1"
+          className="bg-[#1F0F50] h-10 sm:py-1 px-3 rounded-xl sm:gap-1 min-[601px]:justify-normal flex items-center justify-center"
           id="network"
           onClick={() => open({ view: "Networks" })}
         >
           <img
-            className="w-5 h-5 rounded-full sm:mx-1"
+            className="w-5 h-5 rounded-full mx-1 min-[601px]:mx-0 sm:mx-1"
             src={currentChain?.logoURI}
             alt={currentChain?.name}
           />
-          <p className="hidden sm:flex"> {currentChain?.name}</p>
+          <p className="lg:flex hidden">{currentChain?.name}</p>
         </button>
       )}
       {isSwitchNetwork && (
@@ -234,19 +236,27 @@ const Wallet = (): JSX.Element => {
       )}
       <button
         data-testid="connectButton"
-        className="bg-[#30127f] text-[#fcf3f6] py-0.5 px-4 rounded-xl sm:mx-4 min-w-[120px] flex items-center justify-center gap-1"
+        className="bg-[#612FFB] h-10 py-1 px-3 rounded-xl flex items-center justify-center gap-1 min-w-[52px]"
         onClick={() => openProfile()}
       >
-        {$account && providerImage && (
+        {$account && providerImage ? (
           <img className="w-5" src={providerImage} alt="providerImage" />
+        ) : (
+          <img
+            className="w-5 md:hidden block"
+            src="/public/wallet.svg"
+            alt="walletImage"
+          />
         )}
-        {$account
-          ? `${
-              $visible
-                ? `${$account.slice(0, 6)}...${$account.slice(-4)}`
-                : "*************"
-            }`
-          : "Connect Wallet"}
+        <span className="md:block hidden">
+          {$account
+            ? `${
+                $visible
+                  ? `${$account.slice(0, 6)}...${$account.slice(-4)}`
+                  : "*************"
+              }`
+            : "Connect Wallet"}
+        </span>
       </button>
     </div>
   );

src/components/Header/header.css

@@ -5,36 +5,33 @@ body.no-scroll {
 .burger-menu {
   display: none;
   cursor: pointer;
+  background: #1f0f50;
+  border-radius: 16px;
+  width: 40px;
+  height: 40px;
 }
 .menu-nav {
   display: none;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 767px) {
   .burger-menu {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
   }
-  .burger-menu .bar {
-    width: 16px;
-    height: 3px;
-    background-color: #fff;
-    margin: 2px 10px;
-    transition: 0.4s;
-  }
   .menu-nav {
     flex-direction: column;
     align-items: center;
-    background-color: #23262d;
+    background-color: #1f0f50;
     padding: 10px;
     position: absolute;
     top: 60px;
     left: 0;
     width: 100%;
-    height: 100%;
     z-index: 100;
+    border-radius: 0 0 24px 24px;
   }
   .menu-nav.active {
     display: flex;
@@ -47,15 +44,3 @@ body.no-scroll {
     margin: 5px 0;
   }
 }
-.burger-menu.active .bar:nth-child(1) {
-  transform: rotate(-45deg) translate(-4px, 4px);
-}
-
-.burger-menu.active .bar:nth-child(2) {
-  opacity: 0;
-  transition: 0s;
-}
-
-.burger-menu.active .bar:nth-child(3) {
-  transform: rotate(45deg) translate(-6px, -6px);
-}

src/components/Header/index.tsx

@@ -10,6 +10,15 @@ const Header = (): JSX.Element => {
   const pathname = window.location.pathname;
   const currentPath = pathname.slice(1); // remove the first "/"
 
+  const platformPaths = [
+    "platform",
+    "strategies",
+    "chains",
+    "integrations",
+    "assets",
+    "create-vault",
+  ];
+
   const [menu, setMenu] = useState(false);
 
   const toggleMenu = () => {
@@ -20,35 +29,78 @@ const Header = (): JSX.Element => {
 
   return (
     <WagmiLayout>
-      <header>
+      <header className="font-manrope bg-[#130932] md:bg-transparent rounded-b-[16px]">
         <span className="title sm:w-4/12 md:w-5/12">
           <a data-testid="stability-logo" href="/" title="Stability">
             <img src="/logo.svg" alt="Stability logo" />
-            <span className="hidden sm:flex">Stability</span>
+            <span className="block text-[20px] font-semibold text-[#A995FF]">
+              Stability
+            </span>
           </a>
         </span>
-        <div className="menu w-2/12">
+        <div className="menu w-2/12 text-[16px]">
           <a
             data-testid="vaults-link"
-            className={currentPath === "" ? "active font-bold" : ""}
+            className={
+              currentPath === "" || currentPath.includes("vault/")
+                ? "active"
+                : ""
+            }
             href="/"
           >
             Vaults
           </a>
+          <a
+            data-testid="vaults-link"
+            className={currentPath === "users" ? "active" : ""}
+            href="/users"
+          >
+            Users
+          </a>
+          <a
+            data-testid="vaults-link"
+            className={
+              platformPaths.some((path) => path === currentPath) ||
+              currentPath.includes("network")
+                ? "active"
+                : ""
+            }
+            href="/platform"
+          >
+            Platform
+          </a>
         </div>
-        <div className="flex sm:w-8/12 md:w-5/12 justify-end">
+        <div className="flex sm:w-8/12 md:w-5/12 justify-end mr-[15px] gap-3">
           <Wallet />
-          <div
-            className={`burger-menu ${menu && "active"}`}
-            onClick={toggleMenu}
-          >
-            <div className="bar"></div>
-            <div className="bar"></div>
-            <div className="bar"></div>
+          <div className="burger-menu" onClick={toggleMenu}>
+            {menu ? (
+              <img src="/close.svg" alt="close" />
+            ) : (
+              <img src="/menu.svg" alt="menu" />
+            )}
           </div>
         </div>
-        <nav className={`menu-nav text-center ${menu && "active"}`}>
-          <a href="/">Vaults</a>
+        <nav className={`menu-nav text-center gap-3 ${menu && "active"}`}>
+          <a
+            className={`px-4 py-[10px] font-semibold ${currentPath === "" || currentPath.includes("vault/") ? "bg-[#2B1570] rounded-[16px]" : ""}`}
+            href="/"
+          >
+            Vaults
+          </a>
+          <a
+            data-testid="vaults-link"
+            className={`px-4 py-[10px] font-semibold ${currentPath === "users" ? "bg-[#2B1570] rounded-[16px]" : ""}`}
+            href="/users"
+          >
+            Users
+          </a>
+          <a
+            data-testid="vaults-link"
+            className={`px-4 py-[10px] font-semibold ${platformPaths.some((path) => path === currentPath) || currentPath.includes("network") ? "bg-[#2B1570] rounded-[16px]" : ""}`}
+            href="/platform"
+          >
+            Platform
+          </a>
         </nav>
       </header>
     </WagmiLayout>

src/constants/index.ts

@@ -54,7 +54,7 @@ const TABLE: TTableColumn[] = [
     dataType: "number",
   },
   {
-    name: "IL RISK",
+    name: "RISK",
     keyName: "il",
     sortType: "none",
     dataType: "number",

src/layouts/AppStore.tsx

@@ -608,8 +608,8 @@ const AppStore = (props: React.PropsWithChildren): JSX.Element => {
               );
 
               for (let i = 0; i < contractBalance[1].length; i++) {
-                erc20Balance[String(contractBalance[1][i])] = BigInt(
-                  contractBalance[3][i]
+                erc20Balance[String(contractBalance[0][i])] = BigInt(
+                  contractBalance[2][i]
                 );
               }
 

src/layouts/Layout.astro

@@ -41,15 +41,18 @@ const {
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content={metaTitle} />
     <meta name="twitter:description" content={metaDescription} />
-        <meta property="og:image" content={img} />
+    <meta property="og:image" content={img} />
     <meta property="twitter:image:height" content="100" />
     <meta property="twitter:image:width" content="100" />
-      <meta property="og:image:alt" content={metaTitle} />
+    <meta property="og:image:alt" content={metaTitle} />
     <meta property="og:type" content="object" />
     <meta property="og:title" content={metaTitle} />
     <meta property="og:url" content={metaUrl} />
     <meta property="og:description" content={metaDescription} />
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
     <meta name="generator" content={Astro.generator} />
     <title>{title} - Stability</title>
     <!-- <ViewTransitions /> -->
@@ -115,7 +118,7 @@ const {
 	}
 	html {
 		font-family: system-ui, sans-serif;
-		background: #0C0C1C;
+		background: #0C0620;
 		background-size: 224px;
 	}
 	body {
@@ -132,7 +135,6 @@ const {
 	.title {
 		display: flex;
 		align-items: center;
-		padding-bottom: 4px;
 	}
 	.title > a {
 		color: #a995ff;
@@ -153,34 +155,35 @@ const {
 	.menu {
 		display: flex;
 		justify-content: center;
+		gap:12px;
 	}
 	.menu-nav a {
 		width: 100%;
 	}
-	@media screen and (max-width: 600px) {
+	@media screen and (max-width: 767px) {
 		.menu {
 			display: none;
 		}
 	}
 	.menu > a {
 		margin: 0;
 		min-width: 90px;
-		height: 60px;
+		height: 40px;
 		color: #fcf3f6;
 		display: flex;
 		align-self: center;
 		align-items: center;
 		justify-content: center;
-		text-decoration: none;
-		font-size: 17px;
-		border-bottom: 3px solid transparent;
-		padding-top: 3px;
+		font-weight: 600;
+		padding: 10px 16px;
 	}
 	.menu > a.active {
-		border-bottom: 3px solid #9b7ff7;
+		background: #2B1570;
+		border-radius: 16px;
 	}
 	.menu > a:hover {
-		background-color: #3e294c;
+		border-radius: 16px;
+		background-color: #3D1E9F ;
 	}
 
 	main {