Navigation works

apps/oasis-borrow/components/navigation/Navigation.types.ts

@@ -91,7 +91,7 @@ export interface NavigationMenuPanelList {
 }
 export interface NavigationMenuPanelListItem {
   description?: ReactNode
-  hoverColor?: string
+  protocolName?: string
   icon?: NavigationMenuPanelIcon
   list?: NavigationMenuPanelList
   navigationModule?: NavigationModule

apps/oasis-borrow/components/navigation/NavigationMenuDropdownContentList.tsx

@@ -67,7 +67,7 @@ export function NavigationMenuDropdownContentList({
           p: 0,
         }}
       >
-        {items.map(({ hoverColor, url, navigationModule, ...item }, i) => (
+        {items.map(({ protocolName, url, navigationModule, ...item }, i) => (
           <Box
             key={i}
             as="li"
@@ -93,7 +93,7 @@ export function NavigationMenuDropdownContentList({
           >
             {url ? (
               <Link href={url} sx={{ display: 'block', ...itemInnerPadding }}>
-                <NavigationMenuDropdownContentListItem hoverColor={hoverColor} {...item} />
+                <NavigationMenuDropdownContentListItem protocolName={protocolName} {...item} />
               </Link>
             ) : (
               <Box sx={{ ...itemInnerPadding }}>
@@ -107,7 +107,7 @@ export function NavigationMenuDropdownContentList({
                     }
                   </>
                 ) : (
-                  <NavigationMenuDropdownContentListItem hoverColor={hoverColor} {...item} />
+                  <NavigationMenuDropdownContentListItem protocolName={protocolName} {...item} />
                 )}
               </Box>
             )}

apps/oasis-borrow/components/navigation/NavigationMenuDropdownContentListItem.tsx

@@ -13,7 +13,7 @@ type NavigationMenuDropdownContentListItemProps = {
 
 export function NavigationMenuDropdownContentListItem({
   description,
-  hoverColor,
+  protocolName,
   icon,
   onClick,
   promoted,
@@ -42,18 +42,18 @@ export function NavigationMenuDropdownContentListItem({
           <Heading
             as="h3"
             variant="boldParagraph3"
-            {...(hoverColor && {
+            {...(protocolName && {
               'data-value': title,
               className: 'heading-with-effect',
             })}
             sx={{
               color: 'primary100',
-              ...(hoverColor && {
+              ...(protocolName && {
                 position: 'relative',
                 transition: 'color 200ms',
                 '&::after': {
                   ...textHoverEffect,
-                  backgroundImage: hoverColor,
+                  backgroundImage: protocolName,
                 },
               }),
             }}

apps/oasis-borrow/handlers/navigation/helpers/mapNavigationLinkItem.ts

@@ -31,7 +31,7 @@ export function mapNavigationLinkItem({
           description,
           promoted: star,
           ...(protocol && {
-            hoverColor: lendingProtocolsByName[protocol.slug].gradient,
+            protocolName: protocol.slug,
             icon: {
               image: lendingProtocolsByName[protocol.slug].icon,
               position: 'title',

apps/rays-dashboard/components/layout/Navigation/NavigationWrapper.tsx

@@ -1,28 +1,55 @@
 'use client'
 
 import { FC } from 'react'
-import { Navigation, NavigationMenuPanelType } from '@summerfi/app-ui'
+import { Button, LoadingSpinner, Navigation, NavigationMenuPanelType, Text } from '@summerfi/app-ui'
 import { usePathname } from 'next/navigation'
 
 interface NavigationWrapperProps {
   panels?: NavigationMenuPanelType[]
+  connectedWalletAddress?: string
 }
+const NavigationModuleBridge = () => <LoadingSpinner />
+const NavigationModuleSwap = () => <LoadingSpinner />
 
-export const NavigationWrapper: FC<NavigationWrapperProps> = ({ panels }) => {
+export const NavigationWrapper: FC<NavigationWrapperProps> = ({
+  panels,
+  connectedWalletAddress,
+}) => {
   const currentPath = usePathname()
 
   return (
     <Navigation
       currentPath={currentPath}
       logo="img/branding/logo-dark.svg"
       logoSmall="img/branding/dot-dark.svg"
-      links={[
-        {
-          label: 'Portfolio',
-          link: '/#',
-        },
-      ]}
+      links={
+        connectedWalletAddress
+          ? [
+              {
+                label: 'Portfolio',
+                link: `/portfolio/${connectedWalletAddress}`,
+              },
+            ]
+          : undefined
+      }
       panels={panels}
+      navigationModules={{
+        NavigationModuleBridge,
+        NavigationModuleSwap,
+      }}
+      walletConnectionComponent={
+        <Button variant="secondarySmall" style={{ backgroundColor: 'var(--color-neutral-10)' }}>
+          <Text
+            variant="p4"
+            style={{
+              marginRight: 'var(--space-xl)',
+              marginLeft: 'var(--space-xl)',
+            }}
+          >
+            loaded wallet :)
+          </Text>
+        </Button>
+      }
     />
   )
 }

apps/rays-dashboard/constants/networks-list.ts

@@ -22,71 +22,57 @@ export enum NetworkNames {
   baseGoerli = 'base_goerli',
 }
 
-const ethereumMainnetGradient = 'linear-gradient(128deg, #6580EB 23.94%, #8EA2F2 110.63%)'
-const optimismMainnetGradient = 'linear-gradient(135deg, #FF0420 0%, #FF6C7D 100%)'
-const arbitrumMainnetGradient = 'linear-gradient(128deg, #243145 3.74%, #4DA7F8 83.51%)'
-const baseMainnetGradient = 'linear-gradient(128deg, #0052ff 3.74%, #6696ff 83.51%)'
-
 export type NetworkConfig = {
   name: NetworkNames
   testnet: boolean
-  gradient: string
   badge: string
 }
 
 const mainnetConfig: NetworkConfig = {
   name: NetworkNames.ethereumMainnet,
   testnet: false,
-  gradient: ethereumMainnetGradient,
   badge: ethereumMainnetBadge as string,
 }
 
 const goerliConfig: NetworkConfig = {
   name: NetworkNames.ethereumGoerli,
   testnet: true,
-  gradient: ethereumMainnetGradient,
   badge: ethereumMainnetBadge as string,
 }
 
 const arbitrumMainnetConfig: NetworkConfig = {
   name: NetworkNames.arbitrumMainnet,
   testnet: false,
-  gradient: arbitrumMainnetGradient,
   badge: arbitrumMainnetBadge as string,
 }
 
 const arbitrumGoerliConfig: NetworkConfig = {
   name: NetworkNames.arbitrumGoerli,
   testnet: true,
-  gradient: arbitrumMainnetGradient,
   badge: arbitrumMainnetBadge as string,
 }
 
 const optimismMainnetConfig: NetworkConfig = {
   name: NetworkNames.optimismMainnet,
   testnet: false,
-  gradient: optimismMainnetGradient,
   badge: optimismMainnetBadge as string,
 }
 
 const optimismGoerliConfig: NetworkConfig = {
   name: NetworkNames.optimismGoerli,
   testnet: true,
-  gradient: optimismMainnetGradient,
   badge: optimismMainnetBadge as string,
 }
 
 const baseMainnetConfig: NetworkConfig = {
   name: NetworkNames.baseMainnet,
   testnet: false,
-  gradient: baseMainnetGradient,
   badge: baseMainnetBadge as string,
 }
 
 const baseGoerliConfig: NetworkConfig = {
   name: NetworkNames.baseGoerli,
   testnet: true,
-  gradient: baseMainnetGradient,
   badge: baseMainnetBadge as string,
 }
 

apps/rays-dashboard/helpers/lending-protocols-configs.ts

@@ -19,7 +19,6 @@ export type LendingProtocolConfig = {
   icon: string
   logo: string
   logoScale: number
-  gradient: string
 }
 
 const aaveV2Config: LendingProtocolConfig = {
@@ -28,7 +27,6 @@ const aaveV2Config: LendingProtocolConfig = {
   icon: aaveIcon as string,
   logo: aaveV2Logo as string,
   logoScale: 1,
-  gradient: 'linear-gradient(230deg, #B6509E 15.42%, #2EBAC6 84.42%)',
 }
 
 const aaveV3Config: LendingProtocolConfig = {
@@ -37,16 +35,14 @@ const aaveV3Config: LendingProtocolConfig = {
   icon: aaveIcon as string,
   logo: aaveV3Logo as string,
   logoScale: 1,
-  gradient: 'linear-gradient(230deg, #B6509E 15.42%, #2EBAC6 84.42%)',
 }
 
 const ajnaConfig: LendingProtocolConfig = {
   name: LendingProtocol.Ajna,
   label: LendingProtocolLabel.ajna,
   icon: ajnaIcon as string,
   logo: ajnaLogo as string,
-  logoScale: 1,
-  gradient: 'linear-gradient(90deg, #F154DB 0%, #974EEA 100%)',
+  logoScale: 1.4,
 }
 
 const makerConfig: LendingProtocolConfig = {
@@ -55,25 +51,22 @@ const makerConfig: LendingProtocolConfig = {
   icon: makerIcon as string,
   logo: makerLogo as string,
   logoScale: 1,
-  gradient: 'linear-gradient(135deg, #2DC1B1 0%, #139D8D 100%)',
 }
 
 const morphoBlueConfig: LendingProtocolConfig = {
   name: LendingProtocol.MorphoBlue,
   label: LendingProtocolLabel.morphoblue,
   icon: morphoBlueIcon as string,
   logo: morphoBlueLogo as string,
-  logoScale: 1.2,
-  gradient: 'linear-gradient(90deg, rgba(24,89,242,1) 0%, rgba(0,55,138,1) 100%)',
+  logoScale: 1.4,
 }
 
 const sparkConfig: LendingProtocolConfig = {
   name: LendingProtocol.SparkV3,
   label: LendingProtocolLabel.sparkv3,
   icon: sparkIcon as string,
   logo: sparkLogo as string,
-  logoScale: 1.1,
-  gradient: 'linear-gradient(159deg, #F58013 12.26%, #F19D19 86.52%)',
+  logoScale: 1.6,
 }
 
 const lendingProtocols = [

apps/rays-dashboard/server-handlers/system-config/parsers/map-navigation-link-item.ts

@@ -31,7 +31,7 @@ export function mapNavigationLinkItem({
           description,
           promoted: star,
           ...(protocol && {
-            hoverColor: lendingProtocolsByName[protocol.slug].gradient,
+            protocolName: protocol.slug,
             icon: {
               image: lendingProtocolsByName[protocol.slug].icon,
               position: 'title',

apps/rays-dashboard/types/navigation/index.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
-import { ProtocolId } from '@summerfi/serverless-shared'
 
+import { LendingProtocol } from '@/helpers/lending-protocol'
 import { FeaturesEnum } from '@/types/generated'
 import { OmniProductType } from '@/types/omni-kit'
 import { ProductHubSupportedNetworks } from '@/types/product-hub'
@@ -15,7 +15,7 @@ interface NavigationLink {
   label: string
   link?: string
   protocol?: {
-    slug: ProtocolId
+    slug: LendingProtocol
   }
   token?: string
   star: boolean
@@ -35,7 +35,7 @@ export interface NavigationFeaturedProduct {
   primaryToken: string
   secondaryToken: string
   protocol: {
-    slug: ProtocolId
+    slug: LendingProtocol
   }
   product: {
     slug: OmniProductType
@@ -124,7 +124,7 @@ export type NavigationMenuPanelListTags = ([string, string] | string)[]
 
 export interface NavigationMenuPanelListItem {
   description?: ReactNode
-  hoverColor?: string
+  protocolName?: string
   icon?: NavigationMenuPanelIcon
   list?: {
     header?: string

apps/rays-dashboard/types/product-hub/index.ts

@@ -1,6 +1,7 @@
 import { AutomationFeature, EarnStrategies } from '@summerfi/app-db'
-import { NetworkNames, ProtocolId } from '@summerfi/serverless-shared'
+import { NetworkNames } from '@summerfi/serverless-shared'
 
+import { LendingProtocol } from '@/helpers/lending-protocol'
 import { OmniProductType } from '@/types/omni-kit'
 import { TranslatableType } from '@/types/translatable'
 
@@ -154,7 +155,7 @@ export interface ProductHubFeaturedFilters
   network: ProductHubSupportedNetworks
   primaryToken: string
   product: OmniProductType
-  protocol: ProtocolId
+  protocol: LendingProtocol
   secondaryToken: string
 }
 

packages/app-tokens/src/icons/arb_circle.tsx

@@ -37,8 +37,8 @@ export const arb_circle = {
           y2="16"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#2D374B" />
-          <stop offset="1" stop-color="#585C65" />
+          <stop stopColor="#2D374B" />
+          <stop offset="1" stopColor="#585C65" />
         </linearGradient>
       </defs>
     </>

packages/app-tokens/src/icons/bal_circle.tsx

@@ -23,8 +23,8 @@ export const bal_circle = {
           y2="29.0001"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#222121" />
-          <stop offset="1" stop-color="#8E8E8E" />
+          <stop stopColor="#222121" />
+          <stop offset="1" stopColor="#8E8E8E" />
         </linearGradient>
       </defs>
     </>

packages/app-tokens/src/icons/crv_circle.tsx

@@ -6039,8 +6039,8 @@ export const crv_circle = {
           y2="29"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#609DEA" />
-          <stop offset="1" stop-color="#3465A4" />
+          <stop stopColor="#609DEA" />
+          <stop offset="1" stopColor="#3465A4" />
         </linearGradient>
       </defs>
     </>

packages/app-tokens/src/icons/cseth.tsx

@@ -45,11 +45,11 @@ export const cseth = {
           y2="29"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#A57BFF" />
-          <stop offset="0.239583" stop-color="#FF66D4" />
-          <stop offset="0.5" stop-color="#FF5B78" />
-          <stop offset="0.739583" stop-color="#FF9E57" />
-          <stop offset="1" stop-color="#FFD595" />
+          <stop stopColor="#A57BFF" />
+          <stop offset="0.239583" stopColor="#FF66D4" />
+          <stop offset="0.5" stopColor="#FF5B78" />
+          <stop offset="0.739583" stopColor="#FF9E57" />
+          <stop offset="1" stopColor="#FFD595" />
         </linearGradient>
         <clipPath id="clip0_14480_4437">
           <rect width="26" height="26" fill="white" transform="translate(3 3)" />

packages/app-tokens/src/icons/mkr_circle_color.tsx

@@ -20,8 +20,8 @@ export const mkr_circle_color = {
           y2="29"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#2DC1B1" />
-          <stop offset="1" stop-color="#139D8D" />
+          <stop stopColor="#2DC1B1" />
+          <stop offset="1" stopColor="#139D8D" />
         </linearGradient>
       </defs>
     </>