From 2707b3b4dddc1473f60c844f978f595ba7558bd1 Mon Sep 17 00:00:00 2001 From: Marcin Ciarka Date: Mon, 27 May 2024 17:41:54 +0200 Subject: [PATCH 1/5] chore: navigation porting work --- .../components/navigation/Navigation.types.ts | 2 +- .../NavigationMenuDropdownContentList.tsx | 6 +- .../NavigationMenuDropdownContentListItem.tsx | 8 +- .../helpers/mapNavigationLinkItem.ts | 2 +- .../rays-dashboard/constants/networks-list.ts | 14 ---- .../helpers/lending-protocols-configs.ts | 7 -- .../parsers/map-navigation-link-item.ts | 2 +- apps/rays-dashboard/types/navigation/index.ts | 8 +- packages/app-tokens/src/icons/arb_circle.tsx | 4 +- packages/app-tokens/src/icons/bal_circle.tsx | 4 +- packages/app-tokens/src/icons/crv_circle.tsx | 4 +- packages/app-tokens/src/icons/cseth.tsx | 10 +-- .../app-tokens/src/icons/mkr_circle_color.tsx | 4 +- packages/app-tokens/src/icons/mpeth.tsx | 4 +- packages/app-tokens/src/icons/op_circle.tsx | 4 +- .../src/icons/styeth_circle_color.tsx | 4 +- packages/app-tokens/src/icons/susd_circle.tsx | 4 +- packages/app-tokens/src/icons/unieth.tsx | 4 +- .../app-ui/src/components/atoms/Icon/Icon.tsx | 18 +++-- .../layout/Navigation/Navigation.types.ts | 13 ++-- .../Navigation/NavigationMenuDropdown.tsx | 4 +- .../NavigationMenuDropdownContent.module.scss | 20 +++++ ...gationMenuDropdownContent.module.scss.d.ts | 2 + .../NavigationMenuDropdownContent.tsx | 46 +++++++++++- ...igationMenuDropdownContentIcon.module.scss | 23 ++++++ ...onMenuDropdownContentIcon.module.scss.d.ts | 11 +++ .../NavigationMenuDropdownContentIcon.tsx | 46 ++++++++++++ .../NavigationMenuDropdownContentList.tsx | 6 +- ...ionMenuDropdownContentListItem.module.scss | 75 +++++++++++++++++++ ...nuDropdownContentListItem.module.scss.d.ts | 10 +++ .../NavigationMenuDropdownContentListItem.tsx | 70 +++++++++-------- .../molecules/TokensGroup/TokensGroup.tsx | 6 +- 32 files changed, 335 insertions(+), 110 deletions(-) create mode 100644 packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentIcon.module.scss create mode 100644 packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentIcon.module.scss.d.ts create mode 100644 packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentIcon.tsx diff --git a/apps/oasis-borrow/components/navigation/Navigation.types.ts b/apps/oasis-borrow/components/navigation/Navigation.types.ts index 95a4dd8699..991130e29e 100644 --- a/apps/oasis-borrow/components/navigation/Navigation.types.ts +++ b/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 diff --git a/apps/oasis-borrow/components/navigation/NavigationMenuDropdownContentList.tsx b/apps/oasis-borrow/components/navigation/NavigationMenuDropdownContentList.tsx index 30e6c3f182..bcac452bc1 100644 --- a/apps/oasis-borrow/components/navigation/NavigationMenuDropdownContentList.tsx +++ b/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) => ( {url ? ( - + ) : ( @@ -107,7 +107,7 @@ export function NavigationMenuDropdownContentList({ } ) : ( - + )} )} diff --git a/apps/oasis-borrow/components/navigation/NavigationMenuDropdownContentListItem.tsx b/apps/oasis-borrow/components/navigation/NavigationMenuDropdownContentListItem.tsx index 470066c50d..60880e3e03 100644 --- a/apps/oasis-borrow/components/navigation/NavigationMenuDropdownContentListItem.tsx +++ b/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({ - - + + diff --git a/packages/app-tokens/src/icons/bal_circle.tsx b/packages/app-tokens/src/icons/bal_circle.tsx index 1311808adf..2d2f378c0d 100644 --- a/packages/app-tokens/src/icons/bal_circle.tsx +++ b/packages/app-tokens/src/icons/bal_circle.tsx @@ -23,8 +23,8 @@ export const bal_circle = { y2="29.0001" gradientUnits="userSpaceOnUse" > - - + + diff --git a/packages/app-tokens/src/icons/crv_circle.tsx b/packages/app-tokens/src/icons/crv_circle.tsx index 53f96523d7..d08c810289 100644 --- a/packages/app-tokens/src/icons/crv_circle.tsx +++ b/packages/app-tokens/src/icons/crv_circle.tsx @@ -6039,8 +6039,8 @@ export const crv_circle = { y2="29" gradientUnits="userSpaceOnUse" > - - + + diff --git a/packages/app-tokens/src/icons/cseth.tsx b/packages/app-tokens/src/icons/cseth.tsx index d618f58f0c..5e16824c5a 100644 --- a/packages/app-tokens/src/icons/cseth.tsx +++ b/packages/app-tokens/src/icons/cseth.tsx @@ -45,11 +45,11 @@ export const cseth = { y2="29" gradientUnits="userSpaceOnUse" > - - - - - + + + + + diff --git a/packages/app-tokens/src/icons/mkr_circle_color.tsx b/packages/app-tokens/src/icons/mkr_circle_color.tsx index 3caa94254f..566d97076e 100644 --- a/packages/app-tokens/src/icons/mkr_circle_color.tsx +++ b/packages/app-tokens/src/icons/mkr_circle_color.tsx @@ -20,8 +20,8 @@ export const mkr_circle_color = { y2="29" gradientUnits="userSpaceOnUse" > - - + + diff --git a/packages/app-tokens/src/icons/mpeth.tsx b/packages/app-tokens/src/icons/mpeth.tsx index 06087a4b50..72b67b40e9 100644 --- a/packages/app-tokens/src/icons/mpeth.tsx +++ b/packages/app-tokens/src/icons/mpeth.tsx @@ -21,8 +21,8 @@ export const mpeth = { y2="24.5" gradientUnits="userSpaceOnUse" > - - + + diff --git a/packages/app-tokens/src/icons/op_circle.tsx b/packages/app-tokens/src/icons/op_circle.tsx index 1c4a801b4c..f7a84191c2 100644 --- a/packages/app-tokens/src/icons/op_circle.tsx +++ b/packages/app-tokens/src/icons/op_circle.tsx @@ -18,8 +18,8 @@ export const op_circle = { y2="16" gradientUnits="userSpaceOnUse" > - - + + diff --git a/packages/app-tokens/src/icons/styeth_circle_color.tsx b/packages/app-tokens/src/icons/styeth_circle_color.tsx index be88b8ad6d..d72ce8cf0d 100644 --- a/packages/app-tokens/src/icons/styeth_circle_color.tsx +++ b/packages/app-tokens/src/icons/styeth_circle_color.tsx @@ -20,8 +20,8 @@ export const styeth_circle_color = { y2="6" gradientUnits="userSpaceOnUse" > - - + + diff --git a/packages/app-tokens/src/icons/susd_circle.tsx b/packages/app-tokens/src/icons/susd_circle.tsx index 255fd2f701..23b9aa8cc2 100644 --- a/packages/app-tokens/src/icons/susd_circle.tsx +++ b/packages/app-tokens/src/icons/susd_circle.tsx @@ -46,8 +46,8 @@ export const susd_circle = { y2="41.0151" gradientUnits="userSpaceOnUse" > - - + + diff --git a/packages/app-tokens/src/icons/unieth.tsx b/packages/app-tokens/src/icons/unieth.tsx index d0cd92c030..000b65ab1f 100644 --- a/packages/app-tokens/src/icons/unieth.tsx +++ b/packages/app-tokens/src/icons/unieth.tsx @@ -42,8 +42,8 @@ export const unieth = { y2="24.5" gradientUnits="userSpaceOnUse" > - - + + diff --git a/packages/app-ui/src/components/atoms/Icon/Icon.tsx b/packages/app-ui/src/components/atoms/Icon/Icon.tsx index 5a6cd6c497..04e1998664 100644 --- a/packages/app-ui/src/components/atoms/Icon/Icon.tsx +++ b/packages/app-ui/src/components/atoms/Icon/Icon.tsx @@ -1,7 +1,8 @@ import { FC } from 'react' -interface IconProps { +export interface IconProps { variant?: 'large' | 'small' + size?: number role?: 'presentation' focusable?: boolean icon: { @@ -15,11 +16,14 @@ export const Icon: FC = ({ role = 'presentation', focusable = false, icon, + size, }) => { - const size = { - large: 44, - small: 30, - }[variant] + const finalSize = + size ?? + { + large: 44, + small: 30, + }[variant] return ( = ({ display="inline-block" focusable={focusable} role={role} - width={size} - height={size} + width={finalSize} + height={finalSize} > {icon.path} diff --git a/packages/app-ui/src/components/layout/Navigation/Navigation.types.ts b/packages/app-ui/src/components/layout/Navigation/Navigation.types.ts index 4348a46c63..4b934fd177 100644 --- a/packages/app-ui/src/components/layout/Navigation/Navigation.types.ts +++ b/packages/app-ui/src/components/layout/Navigation/Navigation.types.ts @@ -1,9 +1,12 @@ import { ReactNode } from 'react' +import { ProtocolId } from '@summerfi/serverless-shared' + +import { IconProps } from '@/components/atoms/Icon/Icon' export type NavigationModule = 'swap' | 'bridge' export interface NavigationMenuPanelLink { - icon: never + icon: IconProps['icon'] title: string link: string hash?: string @@ -11,7 +14,7 @@ export interface NavigationMenuPanelLink { } export interface NavigationMenuPanelIcon { - icon?: never + icon?: IconProps['icon'] image?: string tokens?: string[] position: 'global' | 'title' @@ -55,7 +58,7 @@ export interface NavigationMenuPanelAsset { } export interface NavigationMenuPanelLink { - icon: never + icon: IconProps['icon'] title: string link: string hash?: string @@ -63,7 +66,7 @@ export interface NavigationMenuPanelLink { } export interface NavigationMenuPanelIcon { - icon?: never + icon?: IconProps['icon'] image?: string tokens?: string[] position: 'global' | 'title' @@ -75,7 +78,7 @@ export interface NavigationMenuPanelList { header?: string items: { description?: ReactNode - hoverColor?: string + protocolName?: string icon?: NavigationMenuPanelIcon list?: NavigationMenuPanelList navigationModule?: NavigationModule diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.tsx index b4f02c5cde..89913e4707 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.tsx @@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from 'react' import classNames from 'classNames' import { NavigationMenuPanelType } from '@/components/layout/Navigation/Navigation.types' +import { NavigationMenuDropdownContent } from '@/components/layout/Navigation/NavigationMenuDropdownContent' import navigationMenuDropdownStyles from './NavigationMenuDropdown.module.scss' @@ -119,7 +120,6 @@ export const NavigationMenuDropdown = ({ }} {...(currentPanel === label && { ref })} > - {/* */} + /> ))} diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss index aa5fb3a6a1..9b02570560 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss @@ -26,4 +26,24 @@ row-gap: 3; flex-direction: column; width: 100%; +} + +.navigationMenuDropdownContentSecondColumn { + position: relative; + flex-direction: column; + list-style: none; + width: 100%; + margin: 0; + padding: 0; + transition: transform 250ms; +} + +.navigationMenuDropdownContentSecondColumnLi { + position: absolute; + top: 0; + left: 0; + row-gap: 3; + flex-direction: column; + width: 100%; + transition: opacity 250ms, transform 250ms; } \ No newline at end of file diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss.d.ts b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss.d.ts index bf6c405fa5..e95125da16 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss.d.ts +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss.d.ts @@ -1,6 +1,8 @@ export type Styles = { navigationMenuDropdownContentFirstColumn: string navigationMenuDropdownContentFirstColumnLi: string + navigationMenuDropdownContentSecondColumn: string + navigationMenuDropdownContentSecondColumnLi: string } export type ClassNames = keyof Styles diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.tsx index 4fb488639e..5c977d90cf 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-magic-numbers */ -import { useEffect, useRef, useState } from 'react' +import { Fragment, useEffect, useRef, useState } from 'react' import { NavigationMenuPanelType } from '@/components/layout/Navigation/Navigation.types' import { NavigationMenuDropdownContentList } from '@/components/layout/Navigation/NavigationMenuDropdownContentList' @@ -23,7 +23,7 @@ export const NavigationMenuDropdownContent = ({ onChange, onSelect, }: NavigationMenuDropdownContentProps) => { - const ref = useRef(null) + const ref = useRef(null) const [selected, setSelected] = useState<[number, number]>([0, 0]) useEffect(() => { @@ -31,6 +31,11 @@ export const NavigationMenuDropdownContent = ({ }, [currentPanel, isPanelOpen]) useEffect(() => { + console.log('debug', { + currentPanel, + label, + refCurrent: ref.current, + }) if (currentPanel === label && ref.current) { const root = document.documentElement @@ -40,6 +45,7 @@ export const NavigationMenuDropdownContent = ({ '--navigation-dropdown-content-dynamic-height', `${ref.current.offsetHeight}px`, ) + console.log('ref.current.offsetHeight', ref.current.offsetHeight) onChange(ref.current.offsetHeight) } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -67,7 +73,41 @@ export const NavigationMenuDropdownContent = ({ ))} -
asd
+
    + {lists + .filter(({ items }) => items.filter(({ list }) => list !== undefined)) + .map(({ items }, i) => ( + + {items.map(({ list }, j) => ( + + {list && ( +
  • j) || selected[0] > i + ? -50 + : 0 + }px)`, + }} + {...(selected[0] === i && selected[1] === j && { ref })} + > + +
    • + )} +     + ))} +     + ))} +
) } diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentIcon.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentIcon.module.scss new file mode 100644 index 0000000000..531ebd02a6 --- /dev/null +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentIcon.module.scss @@ -0,0 +1,23 @@ +.navigationMenuDropdownContentIconWrapper { + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + &Global { + width: 40px; + height: 40px; + } +} + +.navigationMenuDropdownContentIcon { + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 34px; + height: 34px; + border-radius: ellipse; + color: var(--color-neutral-80); + background-color: var(--color-neutral-30); + transition: 200ms color, 200ms background-color; +} \ No newline at end of file diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentIcon.module.scss.d.ts b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentIcon.module.scss.d.ts new file mode 100644 index 0000000000..597318f8ab --- /dev/null +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentIcon.module.scss.d.ts @@ -0,0 +1,11 @@ +export type Styles = { + navigationMenuDropdownContentIcon: string + navigationMenuDropdownContentIconWrapper: string + navigationMenuDropdownContentIconWrapperGlobal: string +} + +export type ClassNames = keyof Styles + +declare const styles: Styles + +export default styles diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentIcon.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentIcon.tsx new file mode 100644 index 0000000000..1ea415e4dd --- /dev/null +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentIcon.tsx @@ -0,0 +1,46 @@ +/* eslint-disable no-magic-numbers */ +import classNames from 'classNames' +import Image from 'next/image' + +import { Icon } from '@/components/atoms/Icon/Icon' +import { NavigationMenuPanelIcon } from '@/components/layout/Navigation/Navigation.types' +import { TokensGroup } from '@/components/molecules/TokensGroup/TokensGroup' + +import navigationMenuDropdownContentIconStyles from './NavigationMenuDropdownContentIcon.module.scss' + +export type NavigationMenuDropdownContentIconProps = NavigationMenuPanelIcon + +export function NavigationMenuDropdownContentIcon({ + icon, + image, + position, + tokens, +}: NavigationMenuDropdownContentIconProps) { + const isGlobal = position === 'global' + const iconForceSize = isGlobal && tokens?.length === 1 ? 40 : 30 + + return ( +
+ {icon && ( +
+ +
+ )} + {image && {tokens?.join('-')} + {tokens && } +
+ ) +} diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.tsx index b3f8217a7d..295a65496a 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.tsx @@ -40,7 +40,7 @@ export const NavigationMenuDropdownContentList = ({
    - {items.map(({ hoverColor, url, navigationModule, ...item }, i) => ( + {items.map(({ protocolName, url, navigationModule, ...item }, i) => (
  • - + ) : (
    ) : ( - + )} */}
    )} diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss index 3b60bb7bad..7ee68e5dcb 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss @@ -2,4 +2,79 @@ align-items: center; column-gap: 12px; line-height: 24px; +} + +.navigationMenuDropdownContentListItem { + align-items: center; + column-gap: 2; +} + +.starTransition { + transition: color 200ms; +} + +.navigationMenuDropdownContentListItemTitle { + color: var(--color-primary-100); + + &:hover { + position: relative; + transition: color 200ms; + + &::after { + content: attr(data-value); + position: absolute; + top: 0; + left: 0; + opacity: 0; + transition: opacity 200ms; + background-clip: text; + } + } + + // these are from LendingProtocol + &aavev2, + &aavev3 { + &:hover { + &::after { + background-image: var(--gradient-protocol-aave); + } + } + } + &ajna { + &:hover { + &::after { + background-image: var(--gradient-protocol-ajna); + } + } + } + &maker { + &:hover { + &::after { + background-image: var(--gradient-protocol-maker); + } + } + } + &morphoblue { + &:hover { + &::after { + background-image: var(--gradient-protocol-morpho-blue); + } + } + } + &sparkv3 { + &:hover { + &::after { + background-image: var(--gradient-protocol-spark); + } + } + } +} + +.navigationMenuDropdownContentListItemDescription { + margin-top: var(--space-xs); + color: var(--color-neutral-80); + & em { + color: var(--color-primary-100); + font-style: normal; + } } \ No newline at end of file diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss.d.ts b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss.d.ts index 80e3cb1904..0a17218544 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss.d.ts +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss.d.ts @@ -1,5 +1,15 @@ export type Styles = { + navigationMenuDropdownContentListItem: string + navigationMenuDropdownContentListItemDescription: string + navigationMenuDropdownContentListItemTitle: string + navigationMenuDropdownContentListItemTitleaavev2: string + navigationMenuDropdownContentListItemTitleaavev3: string + navigationMenuDropdownContentListItemTitleajna: string + navigationMenuDropdownContentListItemTitlemaker: string + navigationMenuDropdownContentListItemTitlemorphoblue: string + navigationMenuDropdownContentListItemTitlesparkv3: string navigationMenuDropdownContentListItemWrapper: string + starTransition: string } export type ClassNames = keyof Styles diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.tsx index 6e4c1fb143..2f018613a4 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.tsx @@ -1,4 +1,9 @@ +import { IconStar } from '@tabler/icons-react' +import classNames from 'classNames' + +import { Text } from '@/components/atoms/Text/Text' import { NavigationMenuPanelList } from '@/components/layout/Navigation/Navigation.types' +import { NavigationMenuDropdownContentIcon } from '@/components/layout/Navigation/NavigationMenuDropdownContentIcon' import navigationMenuDropdownContentListItemStyles from './NavigationMenuDropdownContentListItem.module.scss' @@ -8,7 +13,7 @@ type NavigationMenuDropdownContentListItemProps = { export function NavigationMenuDropdownContentListItem({ description, - hoverColor, + protocolName, icon, onClick, promoted, @@ -32,42 +37,47 @@ export function NavigationMenuDropdownContentListItem({ } {...(onClick && { onClick })} > - {/* {icon && icon.position === 'global' && }*/} + {icon && icon.position === 'global' && }
    - {/* - +
    {icon && icon.position === 'title' && } - {promoted && ( - - - + + + )} {title} - - + +
    {description && ( {typeof description === 'string' ? ( ') }} /> @@ -76,7 +86,7 @@ export function NavigationMenuDropdownContentListItem({ )} )} - {tags && ( + {/* {tags && ( {tags.map((tag, i) => ( ))} - )}*/} + )} */}
    ) diff --git a/packages/app-ui/src/components/molecules/TokensGroup/TokensGroup.tsx b/packages/app-ui/src/components/molecules/TokensGroup/TokensGroup.tsx index 1e30720ca8..32473bb239 100644 --- a/packages/app-ui/src/components/molecules/TokensGroup/TokensGroup.tsx +++ b/packages/app-ui/src/components/molecules/TokensGroup/TokensGroup.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-magic-numbers */ import { getToken, getTokenDisplayName, @@ -12,6 +13,7 @@ import { Icon } from '@/components/atoms/Icon/Icon' import classNames from '@/components/molecules/TokensGroup/TokensGroup.module.scss' interface TokensGroupProps { + forceSize?: number network?: NetworkNames tokens: string[] } @@ -20,8 +22,8 @@ const defaultSingleSize = 44 const defaultMultipleSize = 30 const networkSizeScaleFactor = 0.1 -export function TokensGroup({ network, tokens }: TokensGroupProps) { - const networkSize = tokens.length ? defaultSingleSize : defaultMultipleSize +export function TokensGroup({ forceSize, network, tokens }: TokensGroupProps) { + const networkSize = forceSize ?? (tokens.length > 1 ? defaultSingleSize : defaultMultipleSize) return (
    From 7a346bdbe00ff428a80f1ba9a46900398765971b Mon Sep 17 00:00:00 2001 From: Marcin Ciarka Date: Tue, 28 May 2024 18:15:27 +0200 Subject: [PATCH 2/5] chore: 90% of the navigation works --- .../rays-dashboard/types/product-hub/index.ts | 5 +- .../app-ui/src/components/atoms/Text/Text.tsx | 6 +- .../atoms/WithArrow/WithArrow.module.scss | 13 ++ .../WithArrow/WithArrow.module.scss.d.ts | 10 ++ .../components/atoms/WithArrow/WithArrow.tsx | 34 +++++ .../layout/Navigation/NavigationMenu.tsx | 4 +- .../NavigationMenuDropdown.module.scss | 4 +- .../NavigationMenuDropdownContent.module.scss | 10 +- .../NavigationMenuDropdownContent.tsx | 6 - ...igationMenuDropdownContentList.module.scss | 24 ++-- ...onMenuDropdownContentList.module.scss.d.ts | 4 - .../NavigationMenuDropdownContentList.tsx | 15 ++- ...ionMenuDropdownContentListItem.module.scss | 124 +++++++++++------- ...nuDropdownContentListItem.module.scss.d.ts | 16 ++- .../NavigationMenuDropdownContentListItem.tsx | 75 ++++------- packages/app-ui/src/styles/spacings.scss | 2 + 16 files changed, 206 insertions(+), 146 deletions(-) create mode 100644 packages/app-ui/src/components/atoms/WithArrow/WithArrow.module.scss create mode 100644 packages/app-ui/src/components/atoms/WithArrow/WithArrow.module.scss.d.ts create mode 100644 packages/app-ui/src/components/atoms/WithArrow/WithArrow.tsx diff --git a/apps/rays-dashboard/types/product-hub/index.ts b/apps/rays-dashboard/types/product-hub/index.ts index f76a288a6b..f5ccbd344b 100644 --- a/apps/rays-dashboard/types/product-hub/index.ts +++ b/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 } diff --git a/packages/app-ui/src/components/atoms/Text/Text.tsx b/packages/app-ui/src/components/atoms/Text/Text.tsx index e92b2cad3d..81bc724dcb 100644 --- a/packages/app-ui/src/components/atoms/Text/Text.tsx +++ b/packages/app-ui/src/components/atoms/Text/Text.tsx @@ -5,7 +5,7 @@ import { AtomProps } from '@/components/atoms/types' import classNames, { ClassNames } from '@/components/atoms/Text/Text.module.scss' -type AllowedHtmlTags = +export type TextAllowedHtmlTags = | 'address' | 'blockquote' | 'h1' @@ -21,8 +21,8 @@ type AllowedHtmlTags = | 'span' export const Text = forwardRef< - HTMLElementTagNameMap[AllowedHtmlTags], - AtomProps + HTMLElementTagNameMap[TextAllowedHtmlTags], + AtomProps >(({ as = 'span', className, variant = 'p1', ...props }, ref) => { return createElement(as, { ...{ diff --git a/packages/app-ui/src/components/atoms/WithArrow/WithArrow.module.scss b/packages/app-ui/src/components/atoms/WithArrow/WithArrow.module.scss new file mode 100644 index 0000000000..b606d48641 --- /dev/null +++ b/packages/app-ui/src/components/atoms/WithArrow/WithArrow.module.scss @@ -0,0 +1,13 @@ +.withArrow { + display: block; + font-weight: 600; + font-size: 1rem; + position: relative; + & .arrow { + transition: transform 200ms; + transform: translateX(0px); + } + &:hover .arrow { + transform: translateX(5px); + } +} \ No newline at end of file diff --git a/packages/app-ui/src/components/atoms/WithArrow/WithArrow.module.scss.d.ts b/packages/app-ui/src/components/atoms/WithArrow/WithArrow.module.scss.d.ts new file mode 100644 index 0000000000..d5700f3415 --- /dev/null +++ b/packages/app-ui/src/components/atoms/WithArrow/WithArrow.module.scss.d.ts @@ -0,0 +1,10 @@ +export type Styles = { + arrow: string + withArrow: string +} + +export type ClassNames = keyof Styles + +declare const styles: Styles + +export default styles diff --git a/packages/app-ui/src/components/atoms/WithArrow/WithArrow.tsx b/packages/app-ui/src/components/atoms/WithArrow/WithArrow.tsx new file mode 100644 index 0000000000..3848027df5 --- /dev/null +++ b/packages/app-ui/src/components/atoms/WithArrow/WithArrow.tsx @@ -0,0 +1,34 @@ +/* eslint-disable no-magic-numbers */ +import React from 'react' + +import { Text, TextAllowedHtmlTags } from '@/components/atoms/Text/Text' + +import { ClassNames } from '@/components/atoms/Text/Text.module.scss' +import withArrowStyles from '@/components/atoms/WithArrow/WithArrow.module.scss' + +export function WithArrow({ + children, + gap = 2, + variant = 'p3', + style, + as, +}: React.PropsWithChildren<{ + gap?: string | number + style?: React.CSSProperties + variant?: ClassNames + as?: TextAllowedHtmlTags +}>) { + return ( + + {children} + + → + + + ) +} diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx index 4e40b49701..07b7ba90a1 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx @@ -119,8 +119,8 @@ export const NavigationMenu = ({ links, panels, currentPath }: NavigationMenuPro const [arrowPosition, setArrowPosition] = useState(0) function closeDropdown() { - setIsPanelSwitched(false) - setIsPanelOpen(false) + // setIsPanelSwitched(false) + // setIsPanelOpen(false) } return ( diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.module.scss index bea4261aa1..3979b9dd79 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.module.scss +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.module.scss @@ -22,7 +22,7 @@ .navigationMenuDropdownBlock { justify-content: center; width: 100%; - padding: 3px; + padding: var(--space-m); border-radius: var(--radius-12); background-color: var(--color-neutral-10); box-shadow: var(--shadow-depth-1); @@ -38,6 +38,7 @@ .navigationMenuDropdownBlockInside { position: relative; + display: flex; flex-direction: column; width: 100%; &Active { @@ -46,6 +47,7 @@ } .navigationMenuDropdownPanelWrapper { + display: flex; position: absolute; width: 100%; opacity: 0; diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss index 9b02570560..ba47f3e313 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss @@ -2,13 +2,13 @@ position: relative; flex-direction: column; flex-shrink: 0; - row-gap: 2; + row-gap: var(--space-m); list-style: none; width: 294px; margin-left: 0; - margin-right: 3; + margin-right: var(--space-m); padding-left: 0; - padding-right: 3; + padding-right: var(--space-m); &::after { content: ""; position: absolute; @@ -23,7 +23,7 @@ } .navigationMenuDropdownContentFirstColumnLi { - row-gap: 3; + row-gap: var(--space-m); flex-direction: column; width: 100%; } @@ -42,7 +42,7 @@ position: absolute; top: 0; left: 0; - row-gap: 3; + row-gap: var(--space-m); flex-direction: column; width: 100%; transition: opacity 250ms, transform 250ms; diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.tsx index 5c977d90cf..3aaf4a4a42 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.tsx @@ -31,11 +31,6 @@ export const NavigationMenuDropdownContent = ({ }, [currentPanel, isPanelOpen]) useEffect(() => { - console.log('debug', { - currentPanel, - label, - refCurrent: ref.current, - }) if (currentPanel === label && ref.current) { const root = document.documentElement @@ -45,7 +40,6 @@ export const NavigationMenuDropdownContent = ({ '--navigation-dropdown-content-dynamic-height', `${ref.current.offsetHeight}px`, ) - console.log('ref.current.offsetHeight', ref.current.offsetHeight) onChange(ref.current.offsetHeight) } // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.module.scss index bee3d9a823..cace322099 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.module.scss +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.module.scss @@ -29,40 +29,44 @@ } .itemHoverEffectDefault { - background-color: var(--color-neutral-30); cursor: default; - .star-with-effect { + background-color: var(--color-neutral-30); + :global .star-with-effect { color: var(--color-interactive-100); } - .nav-icon { + :global .nav-icon { background-color: var(--color-interactive-100); color: var(--color-neutral-10); }; - .heading-with-effect, .tag-with-effect { + :global .heading-with-effect, :global .tag-with-effect { color: transparent; &::after { - opacity: 1; + opacity: 1 !important; } } } +:global .star-with-effect { + svg { + margin: 0px var(--space-xxs) 0px 0px; + } +} .itemHoverEffectHover { - background-color: var(--color-neutral-30); cursor: pointer; &:hover { background-color: var(--color-neutral-30); cursor: default; - .star-with-effect { + :global .star-with-effect { color: var(--color-interactive-100); } - .nav-icon { + :global .nav-icon { color: var(--color-neutral-10); background-color: var(--color-interactive-100); }; - .heading-with-effect, .tag-with-effect { + :global .heading-with-effect, :global .tag-with-effect { color: transparent; &::after { - opacity: 1; + opacity: 1 !important; } } } diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.module.scss.d.ts b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.module.scss.d.ts index 731e6ed223..8600f79e1c 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.module.scss.d.ts +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.module.scss.d.ts @@ -1,15 +1,11 @@ export type Styles = { - headingWithEffect: string itemHoverEffectDefault: string itemHoverEffectHover: string - navIcon: string navigationMenuDropdownContentListHeader: string navigationMenuDropdownContentListWrapper: string navigationMenuDropdownContentListWrapperItem: string navigationMenuDropdownContentListWrapperItemLink: string navigationMenuDropdownContentListWrapperItemLinkTight: string - starWithEffect: string - tagWithEffect: string } export type ClassNames = keyof Styles diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.tsx index 295a65496a..d60c006942 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.tsx @@ -3,6 +3,7 @@ import classNames from 'classNames' import Link from 'next/link' import { Text } from '@/components/atoms/Text/Text' +import { WithArrow } from '@/components/atoms/WithArrow/WithArrow' import { NavigationMenuPanelList } from '@/components/layout/Navigation/Navigation.types' import { NavigationMenuDropdownContentListItem } from '@/components/layout/Navigation/NavigationMenuDropdownContentListItem' @@ -86,6 +87,7 @@ export const NavigationMenuDropdownContentList = ({ }, )} > + {/* {navigationModule ? ( <> { @@ -103,27 +105,26 @@ export const NavigationMenuDropdownContentList = ({
    • ))}
- {/* {link && ( {link.label} - )} */} + )} ) } diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss index 7ee68e5dcb..1d2a424b0b 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss @@ -1,10 +1,12 @@ .navigationMenuDropdownContentListItemWrapper { + display: flex; align-items: center; column-gap: 12px; line-height: 24px; } .navigationMenuDropdownContentListItem { + display: flex; align-items: center; column-gap: 2; } @@ -13,60 +15,48 @@ transition: color 200ms; } -.navigationMenuDropdownContentListItemTitle { - color: var(--color-primary-100); - - &:hover { - position: relative; - transition: color 200ms; - - &::after { - content: attr(data-value); - position: absolute; - top: 0; - left: 0; - opacity: 0; - transition: opacity 200ms; - background-clip: text; +.navigationMenuDropdownContentListItemTitleGradient { + // these are from LendingProtocol + &aavev2, + &aavev3 { + &::after { + background-image: var(--gradient-protocol-aave); + } } - } - - // these are from LendingProtocol - &aavev2, - &aavev3 { - &:hover { - &::after { - background-image: var(--gradient-protocol-aave); - } + &ajna { + &::after { + background-image: var(--gradient-protocol-ajna); + } } - } - &ajna { - &:hover { - &::after { - background-image: var(--gradient-protocol-ajna); - } + &maker { + &::after { + background-image: var(--gradient-protocol-maker); + } } - } - &maker { - &:hover { - &::after { - background-image: var(--gradient-protocol-maker); - } + &morphoblue { + &::after { + background-image: var(--gradient-protocol-morpho-blue); + } } - } - &morphoblue { - &:hover { - &::after { - background-image: var(--gradient-protocol-morpho-blue); - } - } - } - &sparkv3 { - &:hover { - &::after { - background-image: var(--gradient-protocol-spark); - } + &sparkv3 { + &::after { + background-image: var(--gradient-protocol-spark); + } } +} + +.navigationMenuDropdownContentListItemTitle { + color: var(--color-primary-100); + position: relative; + transition: color 200ms; + &::after { + content: attr(data-value); + position: absolute; + top: 0; + left: 0; + opacity: 0; + transition: opacity 200ms; + background-clip: text; } } @@ -77,4 +67,40 @@ color: var(--color-primary-100); font-style: normal; } +} + +.navigationMenuDropdownContentListItemTags { + display: flex; + margin: 0; + padding: 0; + list-style: none; +} +.navigationMenuDropdownContentListItemTagsLi { + color: var(--color-neutral-80); + position: relative; + &NotFirst { + margin-left: var(--space-m); + &::before { + content: ""; + position: absolute; + top: var(--space-s); + left: -10px; + width: var(--space-xxs); + height: var(--space-xxs); + background-color: var(--color-neutral-80); + border-radius: var(--radius-circle); + } + } + &ArrayTag { + transition: color 200ms; + &::after { + content: attr(data-value); + position: absolute; + top: 0; + left: 0; + opacity: 0; + transition: opacity 200ms; + background-clip: text; + } + } } \ No newline at end of file diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss.d.ts b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss.d.ts index 0a17218544..bfe3f7d32f 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss.d.ts +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.module.scss.d.ts @@ -1,13 +1,17 @@ export type Styles = { navigationMenuDropdownContentListItem: string navigationMenuDropdownContentListItemDescription: string + navigationMenuDropdownContentListItemTags: string + navigationMenuDropdownContentListItemTagsLi: string + navigationMenuDropdownContentListItemTagsLiArrayTag: string + navigationMenuDropdownContentListItemTagsLiNotFirst: string navigationMenuDropdownContentListItemTitle: string - navigationMenuDropdownContentListItemTitleaavev2: string - navigationMenuDropdownContentListItemTitleaavev3: string - navigationMenuDropdownContentListItemTitleajna: string - navigationMenuDropdownContentListItemTitlemaker: string - navigationMenuDropdownContentListItemTitlemorphoblue: string - navigationMenuDropdownContentListItemTitlesparkv3: string + navigationMenuDropdownContentListItemTitleGradientaavev2: string + navigationMenuDropdownContentListItemTitleGradientaavev3: string + navigationMenuDropdownContentListItemTitleGradientajna: string + navigationMenuDropdownContentListItemTitleGradientmaker: string + navigationMenuDropdownContentListItemTitleGradientmorphoblue: string + navigationMenuDropdownContentListItemTitleGradientsparkv3: string navigationMenuDropdownContentListItemWrapper: string starTransition: string } diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.tsx index 2f018613a4..6d077b069f 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentListItem.tsx @@ -1,4 +1,5 @@ -import { IconStar } from '@tabler/icons-react' +/* eslint-disable no-magic-numbers */ +import { IconStar, IconStarFilled } from '@tabler/icons-react' import classNames from 'classNames' import { Text } from '@/components/atoms/Text/Text' @@ -20,16 +21,6 @@ export function NavigationMenuDropdownContentListItem({ tags, title, }: NavigationMenuDropdownContentListItemProps) { - const textHoverEffect = { - content: 'attr(data-value)', - position: 'absolute', - top: 0, - left: 0, - opacity: 0, - transition: 'opacity 200ms', - WebkitBackgroundClip: 'text', - } - return (
- + )} {title} @@ -86,49 +77,31 @@ export function NavigationMenuDropdownContentListItem({ )} )} - {/* {tags && ( - + {tags && ( +
    {tags.map((tag, i) => ( - 0 && { - ml: 3, - '&::before': { - content: '""', - position: 'absolute', - top: 2, - left: '-10px', - width: 1, - height: 1, - backgroundColor: 'neutral80', - borderRadius: 'ellipse', - }, - }), - ...(Array.isArray(tag) && { - position: 'relative', - transition: 'color 200ms', - '&::after': { - ...textHoverEffect, - backgroundImage: tag[1], - }, - }), - } as ThemeUIStyleObject - } + [navigationMenuDropdownContentListItemStyles.navigationMenuDropdownContentListItemTagsLiNotFirst]: + i > 0, + [navigationMenuDropdownContentListItemStyles.navigationMenuDropdownContentListItemTagsLiArrayTag]: + Array.isArray(tag), + }, + )} + data-value={Array.isArray(tag) ? tag[0] : tag} > - {Array.isArray(tag) ? tag[0] : tag} - + {Array.isArray(tag) ? tag[0] : tag} + ))} - - )} */} +
+ )}
) diff --git a/packages/app-ui/src/styles/spacings.scss b/packages/app-ui/src/styles/spacings.scss index 0f92f0680b..6215a7b983 100644 --- a/packages/app-ui/src/styles/spacings.scss +++ b/packages/app-ui/src/styles/spacings.scss @@ -1,4 +1,6 @@ :root { + // 0 1 2 3 4 5 6 7 8 + // space: [0, 4, 8, 16, 32, 64, 128, 256, 512], --space-xxs: 4px; --space-xs: 8px; --space-s: 12px; From 323ff6b1c80cc861b03a8150be72428b942497a1 Mon Sep 17 00:00:00 2001 From: Marcin Ciarka Date: Tue, 28 May 2024 18:25:15 +0200 Subject: [PATCH 3/5] chore: Fix closeDropdown function in NavigationMenu component --- .../src/components/layout/Navigation/NavigationMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx index 07b7ba90a1..4e40b49701 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx @@ -119,8 +119,8 @@ export const NavigationMenu = ({ links, panels, currentPath }: NavigationMenuPro const [arrowPosition, setArrowPosition] = useState(0) function closeDropdown() { - // setIsPanelSwitched(false) - // setIsPanelOpen(false) + setIsPanelSwitched(false) + setIsPanelOpen(false) } return ( From 3e7007a7d4c4a2e895d787c026b8a0705ef48481 Mon Sep 17 00:00:00 2001 From: Marcin Ciarka Date: Tue, 28 May 2024 18:33:58 +0200 Subject: [PATCH 4/5] chore: Add next/image to external dependencies in vite.config.ts --- packages/app-ui/vite.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app-ui/vite.config.ts b/packages/app-ui/vite.config.ts index 4813048e41..b77413a0cc 100644 --- a/packages/app-ui/vite.config.ts +++ b/packages/app-ui/vite.config.ts @@ -72,7 +72,7 @@ export default defineConfig({ formats: ['es'], }, rollupOptions: { - external: ['react', 'react/jsx-runtime', 'next/link', 'lodash'], + external: ['react', 'react/jsx-runtime', 'next/link', 'next/image', 'lodash'], input: Object.fromEntries( glob .sync('src/**/*.{ts,tsx}') From bf528aed8fa89a48f5409387bf02b2dd88c562db Mon Sep 17 00:00:00 2001 From: Marcin Ciarka Date: Wed, 29 May 2024 16:47:49 +0200 Subject: [PATCH 5/5] navigation skeleton done --- .../layout/Navigation/NavigationWrapper.tsx | 43 +++++-- .../layout/Navigation/Navigation.module.scss | 1 + .../layout/Navigation/Navigation.tsx | 15 ++- .../layout/Navigation/Navigation.types.ts | 7 ++ .../Navigation/NavigationActions.module.scss | 9 ++ .../NavigationActions.module.scss.d.ts | 9 ++ .../layout/Navigation/NavigationActions.tsx | 33 +++++- .../Navigation/NavigationMenu.module.scss | 6 +- .../layout/Navigation/NavigationMenu.tsx | 106 ++---------------- .../Navigation/NavigationMenuDropdown.tsx | 9 +- .../NavigationMenuDropdownContent.module.scss | 6 + ...gationMenuDropdownContent.module.scss.d.ts | 1 + .../NavigationMenuDropdownContent.tsx | 42 ++++--- .../NavigationMenuDropdownContentList.tsx | 26 ++--- .../layout/Navigation/NavigationMenuLink.tsx | 42 +++++++ .../layout/Navigation/NavigationMenuPanel.tsx | 63 +++++++++++ .../molecules/Loader/Loader.module.scss | 16 +++ .../molecules/Loader/Loader.module.scss.d.ts | 11 ++ .../components/molecules/Loader/Loader.tsx | 39 +++++++ packages/app-ui/src/index.ts | 2 + 20 files changed, 343 insertions(+), 143 deletions(-) create mode 100644 packages/app-ui/src/components/layout/Navigation/NavigationActions.module.scss create mode 100644 packages/app-ui/src/components/layout/Navigation/NavigationActions.module.scss.d.ts create mode 100644 packages/app-ui/src/components/layout/Navigation/NavigationMenuLink.tsx create mode 100644 packages/app-ui/src/components/layout/Navigation/NavigationMenuPanel.tsx create mode 100644 packages/app-ui/src/components/molecules/Loader/Loader.module.scss create mode 100644 packages/app-ui/src/components/molecules/Loader/Loader.module.scss.d.ts create mode 100644 packages/app-ui/src/components/molecules/Loader/Loader.tsx diff --git a/apps/rays-dashboard/components/layout/Navigation/NavigationWrapper.tsx b/apps/rays-dashboard/components/layout/Navigation/NavigationWrapper.tsx index d44578087c..70378612a9 100644 --- a/apps/rays-dashboard/components/layout/Navigation/NavigationWrapper.tsx +++ b/apps/rays-dashboard/components/layout/Navigation/NavigationWrapper.tsx @@ -1,14 +1,20 @@ '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 = () => +const NavigationModuleSwap = () => -export const NavigationWrapper: FC = ({ panels }) => { +export const NavigationWrapper: FC = ({ + panels, + connectedWalletAddress, +}) => { const currentPath = usePathname() return ( @@ -16,13 +22,34 @@ export const NavigationWrapper: FC = ({ panels }) => { 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={ + + } /> ) } diff --git a/packages/app-ui/src/components/layout/Navigation/Navigation.module.scss b/packages/app-ui/src/components/layout/Navigation/Navigation.module.scss index 236980dce2..601c153904 100644 --- a/packages/app-ui/src/components/layout/Navigation/Navigation.module.scss +++ b/packages/app-ui/src/components/layout/Navigation/Navigation.module.scss @@ -7,6 +7,7 @@ display: grid; align-items: center; grid-template-columns: auto auto; + justify-items: flex-end; z-index: 3; max-width: 1408px; margin: var(--space-l) auto var(--space-xxl); diff --git a/packages/app-ui/src/components/layout/Navigation/Navigation.tsx b/packages/app-ui/src/components/layout/Navigation/Navigation.tsx index db6aa5f519..6a4bfa17da 100644 --- a/packages/app-ui/src/components/layout/Navigation/Navigation.tsx +++ b/packages/app-ui/src/components/layout/Navigation/Navigation.tsx @@ -3,6 +3,7 @@ import { FC } from 'react' import { NavigationMenuPanelLinkType, NavigationMenuPanelType, + WithNavigationModules, } from '@/components/layout/Navigation/Navigation.types' import { NavigationActions } from '@/components/layout/Navigation/NavigationActions' import { NavigationBranding } from '@/components/layout/Navigation/NavigationBranding' @@ -10,12 +11,13 @@ import { NavigationMenu } from '@/components/layout/Navigation/NavigationMenu' import navigationStyles from '@/components/layout/Navigation/Navigation.module.scss' -interface NavigationProps { +interface NavigationProps extends WithNavigationModules { currentPath: string logo: string logoSmall: string links?: NavigationMenuPanelLinkType[] panels?: NavigationMenuPanelType[] + walletConnectionComponent?: React.ReactNode } export const Navigation: FC = ({ @@ -24,13 +26,20 @@ export const Navigation: FC = ({ links, panels, currentPath, + walletConnectionComponent, + navigationModules, }) => { return (
- - + +
) diff --git a/packages/app-ui/src/components/layout/Navigation/Navigation.types.ts b/packages/app-ui/src/components/layout/Navigation/Navigation.types.ts index 4b934fd177..b83efdb2fa 100644 --- a/packages/app-ui/src/components/layout/Navigation/Navigation.types.ts +++ b/packages/app-ui/src/components/layout/Navigation/Navigation.types.ts @@ -112,3 +112,10 @@ export interface NavigationProps { panels?: NavigationMenuPanelType[] pill?: NavigationBrandingPill } + +export interface WithNavigationModules { + navigationModules?: { + NavigationModuleSwap: () => React.JSX.Element + NavigationModuleBridge: () => React.JSX.Element + } +} diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationActions.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationActions.module.scss new file mode 100644 index 0000000000..1fa9c01d6c --- /dev/null +++ b/packages/app-ui/src/components/layout/Navigation/NavigationActions.module.scss @@ -0,0 +1,9 @@ +button.walletButtonMock { + min-height: auto; + line-height: 22px; + height: 40px; + min-width: 40px; + width: auto; + box-shadow: var(--shadow-depth-1); + background-color: var(--color-neutral-10); +} \ No newline at end of file diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationActions.module.scss.d.ts b/packages/app-ui/src/components/layout/Navigation/NavigationActions.module.scss.d.ts new file mode 100644 index 0000000000..60d1d2e0fc --- /dev/null +++ b/packages/app-ui/src/components/layout/Navigation/NavigationActions.module.scss.d.ts @@ -0,0 +1,9 @@ +export type Styles = { + walletButtonMock: string +} + +export type ClassNames = keyof Styles + +declare const styles: Styles + +export default styles diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationActions.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationActions.tsx index b04976bf52..b90bcc9e5b 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationActions.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationActions.tsx @@ -1,5 +1,32 @@ -interface NavigationActionsProps {} +import classNames from 'classNames' -export const NavigationActions = () => { - return
NavigationActions
+import { Button } from '@/components/atoms/Button/Button' +import { LoadingSpinner } from '@/components/molecules/Loader/Loader' + +import navigationActionStyles from '@/components/layout/Navigation/NavigationActions.module.scss' + +interface NavigationActionsProps { + walletConnectionComponent?: React.ReactNode +} + +export const NavigationActions = ({ walletConnectionComponent }: NavigationActionsProps) => { + return ( + walletConnectionComponent ?? ( +
+ +
+ ) + ) } diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenu.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationMenu.module.scss index 07b873d8e6..449614e6a2 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenu.module.scss +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenu.module.scss @@ -12,15 +12,15 @@ list-style: none; justify-content: center; padding: 0; - column-gap: var(--space-m + --space-xl); + column-gap: calc(var(--space-m) + var(--space-xl)); @include media('>s') { column-gap: unset; } @include media('>l') { column-gap: var(--space-xl); } - @include media('>xl') { - column-gap: var(--space-m + --space-xl); + @include media('>=xl') { + column-gap: calc(var(--space-m) + var(--space-xl)); } } diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx index 4e40b49701..3d7ebf7dfa 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx @@ -2,117 +2,30 @@ /* eslint-disable no-magic-numbers */ import { useState } from 'react' -import classNames from 'classNames' -import Link from 'next/link' -import { Text } from '@/components/atoms/Text/Text' import { - NavigationMenuPanelLinkProps, NavigationMenuPanelLinkType, - NavigationMenuPanelProps, NavigationMenuPanelType, + WithNavigationModules, } from '@/components/layout/Navigation/Navigation.types' import { NavigationMenuDropdown } from '@/components/layout/Navigation/NavigationMenuDropdown' +import { NavigationMenuLink } from '@/components/layout/Navigation/NavigationMenuLink' +import { NavigationMenuPanel } from '@/components/layout/Navigation/NavigationMenuPanel' import navigationMenuStyles from '@/components/layout/Navigation/NavigationMenu.module.scss' -interface NavigationMenuProps { +interface NavigationMenuProps extends WithNavigationModules { currentPath: string links?: NavigationMenuPanelLinkType[] panels?: NavigationMenuPanelType[] } -function NavigationMenuLink({ - label, - link, - onClick, - onMouseEnter, +export const NavigationMenu = ({ + links, + panels, currentPath, -}: NavigationMenuPanelLinkProps) { - return ( -
  • - {link && ( - - - {label} - - - )} - {onClick && ( - - {label} - - )} -
    • - ) -} - -function NavigationMenuPanelLabel({ - currentPanel, - label, - isPanelOpen, -}: Pick) { - return ( - - {label} - - ) -} - -function NavigationMenuPanel({ - currentPanel, - label, - url, - isPanelOpen, - onMouseEnter, -}: NavigationMenuPanelProps) { - return ( -
  • { - const target = e.target as HTMLDivElement - const halfOffsetWidth = target.offsetWidth / 2 - - onMouseEnter(target.offsetLeft + halfOffsetWidth) - }} - > - {url ? ( - - - - ) : ( - - )} -
    • - ) -} - -export const NavigationMenu = ({ links, panels, currentPath }: NavigationMenuProps) => { + navigationModules, +}: NavigationMenuProps) => { const [isPanelOpen, setIsPanelOpen] = useState(false) const [isPanelSwitched, setIsPanelSwitched] = useState(false) const [currentPanel, setCurrentPanel] = useState(panels?.[0].label ?? '') @@ -158,6 +71,7 @@ export const NavigationMenu = ({ links, panels, currentPath }: NavigationMenuPro isPanelOpen={isPanelOpen} isPanelSwitched={isPanelSwitched} panels={panels} + navigationModules={navigationModules} /> )} diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.tsx index 89913e4707..d094048007 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.tsx @@ -2,12 +2,15 @@ import { useEffect, useRef, useState } from 'react' import classNames from 'classNames' -import { NavigationMenuPanelType } from '@/components/layout/Navigation/Navigation.types' +import { + NavigationMenuPanelType, + WithNavigationModules, +} from '@/components/layout/Navigation/Navigation.types' import { NavigationMenuDropdownContent } from '@/components/layout/Navigation/NavigationMenuDropdownContent' import navigationMenuDropdownStyles from './NavigationMenuDropdown.module.scss' -export interface NavigationMenuDropdownProps { +export interface NavigationMenuDropdownProps extends WithNavigationModules { arrowPosition: number currentPanel: string isPanelOpen: boolean @@ -60,6 +63,7 @@ export const NavigationMenuDropdown = ({ isPanelOpen, isPanelSwitched, panels, + navigationModules, }: NavigationMenuDropdownProps) => { const ref = useRef(null) const [isListSwitched, setIsListSwitched] = useState(false) @@ -124,6 +128,7 @@ export const NavigationMenuDropdown = ({ currentPanel={currentPanel} isPanelActive={isPanelOpen && currentPanel === label} isPanelOpen={isPanelOpen} + navigationModules={navigationModules} label={label} onChange={(_height) => { if (ref.current) setHeight(Math.max(_height, ref.current.offsetHeight)) diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss index ba47f3e313..41692c93ba 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss @@ -46,4 +46,10 @@ flex-direction: column; width: 100%; transition: opacity 250ms, transform 250ms; + pointer-events: none; + opacity: 0; + &Active { + opacity: 1; + pointer-events: auto; + } } \ No newline at end of file diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss.d.ts b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss.d.ts index e95125da16..a556664184 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss.d.ts +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss.d.ts @@ -3,6 +3,7 @@ export type Styles = { navigationMenuDropdownContentFirstColumnLi: string navigationMenuDropdownContentSecondColumn: string navigationMenuDropdownContentSecondColumnLi: string + navigationMenuDropdownContentSecondColumnLiActive: string } export type ClassNames = keyof Styles diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.tsx index 3aaf4a4a42..25e7fe530d 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.tsx @@ -1,18 +1,23 @@ /* eslint-disable no-magic-numbers */ import { Fragment, useEffect, useRef, useState } from 'react' +import classNames from 'classNames' -import { NavigationMenuPanelType } from '@/components/layout/Navigation/Navigation.types' +import { + NavigationMenuPanelType, + WithNavigationModules, +} from '@/components/layout/Navigation/Navigation.types' import { NavigationMenuDropdownContentList } from '@/components/layout/Navigation/NavigationMenuDropdownContentList' import navigationMenuDropdownContentStyles from './NavigationMenuDropdownContent.module.scss' -export type NavigationMenuDropdownContentProps = NavigationMenuPanelType & { - currentPanel: string - isPanelActive: boolean - isPanelOpen: boolean - onChange: (height: number) => void - onSelect: () => void -} +export type NavigationMenuDropdownContentProps = NavigationMenuPanelType & + WithNavigationModules & { + currentPanel: string + isPanelActive: boolean + isPanelOpen: boolean + onChange: (height: number) => void + onSelect: () => void + } export const NavigationMenuDropdownContent = ({ currentPanel, @@ -22,6 +27,7 @@ export const NavigationMenuDropdownContent = ({ lists, onChange, onSelect, + navigationModules, }: NavigationMenuDropdownContentProps) => { const ref = useRef(null) const [selected, setSelected] = useState<[number, number]>([0, 0]) @@ -59,6 +65,7 @@ export const NavigationMenuDropdownContent = ({ {...item} parentIndex={i} selected={selected} + navigationModules={navigationModules} onSelect={(_selected) => { setSelected(_selected) onSelect() @@ -77,13 +84,15 @@ export const NavigationMenuDropdownContent = ({ {list && (
  • - +
    • )} diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.tsx index d60c006942..a8e1f617c0 100644 --- a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.tsx +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContentList.tsx @@ -1,10 +1,14 @@ /* eslint-disable no-magic-numbers */ +import { ReactElement, ReactNode } from 'react' import classNames from 'classNames' import Link from 'next/link' import { Text } from '@/components/atoms/Text/Text' import { WithArrow } from '@/components/atoms/WithArrow/WithArrow' -import { NavigationMenuPanelList } from '@/components/layout/Navigation/Navigation.types' +import { + NavigationMenuPanelList, + WithNavigationModules, +} from '@/components/layout/Navigation/Navigation.types' import { NavigationMenuDropdownContentListItem } from '@/components/layout/Navigation/NavigationMenuDropdownContentListItem' import navigationMenuDropdownContentListStyles from './NavigationMenuDropdownContentList.module.scss' @@ -14,7 +18,7 @@ type NavigationMenuDropdownContentListProps = NavigationMenuPanelList & { selected?: [number, number] onClick?: (selected: [number, number]) => void onSelect?: (selected: [number, number]) => void -} +} & WithNavigationModules export const NavigationMenuDropdownContentList = ({ header, @@ -25,6 +29,7 @@ export const NavigationMenuDropdownContentList = ({ parentIndex, selected, tight, + navigationModules, }: NavigationMenuDropdownContentListProps) => { return ( <> @@ -87,19 +92,14 @@ export const NavigationMenuDropdownContentList = ({ }, )} > - - {/* {navigationModule ? ( - <> - { - { - swap: , - bridge: , - }[navigationModule] - } - + {navigationModule && navigationModules ? ( + { + swap: , + bridge: , + }[navigationModule] ) : ( - )} */} + )} )} diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuLink.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuLink.tsx new file mode 100644 index 0000000000..58eb71f9cf --- /dev/null +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuLink.tsx @@ -0,0 +1,42 @@ +import classNames from 'classNames' +import Link from 'next/link' + +import { Text } from '@/components/atoms/Text/Text' +import { NavigationMenuPanelLinkProps } from '@/components/layout/Navigation/Navigation.types' + +import navigationMenuStyles from '@/components/layout/Navigation/NavigationMenu.module.scss' + +export function NavigationMenuLink({ + label, + link, + onClick, + onMouseEnter, + currentPath, +}: NavigationMenuPanelLinkProps) { + return ( +
  • + {link && ( + + + {label} + + + )} + {onClick && ( + + {label} + + )} +
    • + ) +} diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuPanel.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuPanel.tsx new file mode 100644 index 0000000000..991e41d191 --- /dev/null +++ b/packages/app-ui/src/components/layout/Navigation/NavigationMenuPanel.tsx @@ -0,0 +1,63 @@ +/* eslint-disable no-magic-numbers */ +import classNames from 'classNames' +import Link from 'next/link' + +import { Text } from '@/components/atoms/Text/Text' +import { NavigationMenuPanelProps } from '@/components/layout/Navigation/Navigation.types' + +import navigationMenuStyles from '@/components/layout/Navigation/NavigationMenu.module.scss' + +function NavigationMenuPanelLabel({ + currentPanel, + label, + isPanelOpen, +}: Pick) { + return ( + + {label} + + ) +} + +export function NavigationMenuPanel({ + currentPanel, + label, + url, + isPanelOpen, + onMouseEnter, +}: NavigationMenuPanelProps) { + return ( +
  • { + const target = e.target as HTMLDivElement + const halfOffsetWidth = target.offsetWidth / 2 + + onMouseEnter(target.offsetLeft + halfOffsetWidth) + }} + > + {url ? ( + + + + ) : ( + + )} +
    • + ) +} diff --git a/packages/app-ui/src/components/molecules/Loader/Loader.module.scss b/packages/app-ui/src/components/molecules/Loader/Loader.module.scss new file mode 100644 index 0000000000..b6e70f878a --- /dev/null +++ b/packages/app-ui/src/components/molecules/Loader/Loader.module.scss @@ -0,0 +1,16 @@ +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.animateSpin { + animation: spin 1s linear infinite; +} + +.animateSpinFast { + animation: spin 0.4s linear infinite; +} \ No newline at end of file diff --git a/packages/app-ui/src/components/molecules/Loader/Loader.module.scss.d.ts b/packages/app-ui/src/components/molecules/Loader/Loader.module.scss.d.ts new file mode 100644 index 0000000000..3513acc725 --- /dev/null +++ b/packages/app-ui/src/components/molecules/Loader/Loader.module.scss.d.ts @@ -0,0 +1,11 @@ +export type Styles = { + animateSpin: string + animateSpinFast: string + spin: string +} + +export type ClassNames = keyof Styles + +declare const styles: Styles + +export default styles diff --git a/packages/app-ui/src/components/molecules/Loader/Loader.tsx b/packages/app-ui/src/components/molecules/Loader/Loader.tsx new file mode 100644 index 0000000000..d0f4f82be4 --- /dev/null +++ b/packages/app-ui/src/components/molecules/Loader/Loader.tsx @@ -0,0 +1,39 @@ +import classNames from 'classNames' + +import loaderStyles from '@/components/molecules/Loader/Loader.module.scss' + +const DEFAULT_SIZE = 24 + +export const LoadingSpinner = ({ + className, + size = DEFAULT_SIZE, + fast = false, + color = 'var(--color-primary-100)', + style, +}: { + className?: string + size?: number + fast?: boolean + /** @default var(--color-primary-100) */ + color?: string + style?: React.CSSProperties +}) => ( + + + +) diff --git a/packages/app-ui/src/index.ts b/packages/app-ui/src/index.ts index 249007b49d..8b948bca16 100644 --- a/packages/app-ui/src/index.ts +++ b/packages/app-ui/src/index.ts @@ -11,9 +11,11 @@ export { GenericTokenIcon } from './components/atoms/GenericTokenIcon/GenericTok export { TokensGroup } from './components/molecules/TokensGroup/TokensGroup' export { ProtocolLabel } from './components/molecules/ProtocolLabel/ProtocolLabel' export { Tooltip } from './components/molecules/Tooltip/Tooltip' +export { LoadingSpinner } from './components/molecules/Loader/Loader' export { AutomationIcon } from './components/molecules/AutomationIcon/AutomationIcon' export { Footer } from './components/layout/Footer/Footer' + export { Navigation } from './components/layout/Navigation/Navigation' export * from './components/layout/Navigation/Navigation.types'