diff --git a/apps/lend/src/components/ChartLiquidationRange/index.tsx b/apps/lend/src/components/ChartLiquidationRange/index.tsx index a71cf0fcd..e7015f533 100644 --- a/apps/lend/src/components/ChartLiquidationRange/index.tsx +++ b/apps/lend/src/components/ChartLiquidationRange/index.tsx @@ -7,7 +7,7 @@ import { ResponsiveContainer, Tooltip, XAxis, - YAxis, + YAxis } from 'recharts' import { t } from '@lingui/macro' import React from 'react' @@ -17,6 +17,7 @@ import styled from 'styled-components' import { formatNumber } from '@/ui/utils' import ChartTooltip, { TipContent, TipIcon, TipTitle } from '@/components/ChartTooltip' +import { ThemeKey } from '@ui-kit/shared/lib' interface Props { data: { name: string; curr: number[]; new: number[]; oraclePrice: string; oraclePriceBand: number | null }[] @@ -24,7 +25,7 @@ interface Props { height?: number isDetailView?: boolean // component not inside the form isManage: boolean - theme: Theme + theme: ThemeKey } const ChartLiquidationRange = ({ height, data, healthColorKey, isManage, isDetailView, theme }: Props) => { diff --git a/apps/lend/src/layout/Footer.tsx b/apps/lend/src/layout/Footer.tsx index d6c2c5e50..c7418266c 100644 --- a/apps/lend/src/layout/Footer.tsx +++ b/apps/lend/src/layout/Footer.tsx @@ -1,6 +1,4 @@ -import type { Locale } from '@/lib/i18n' - -import { t, Trans } from '@lingui/macro' +import { t } from '@lingui/macro' import styled, { css } from 'styled-components' import Image from 'next/image' import React, { useEffect, useRef } from 'react' @@ -14,6 +12,7 @@ import { RCDiscordLogo, RCGithubLogo, RCTelegramLogo, RCTwitterLogo } from '@/im import Box from '@/ui/Box' import { ExternalLink, InternalLink } from '@/ui/Link' import { useHeightResizeObserver } from '@/ui/hooks' +import { LocaleValue } from '@/common/features/switch-language' type InnerSectionProps = { className?: string @@ -24,7 +23,7 @@ export const CommunitySection = ({ className, columnCount, locale, -}: { locale: Locale['value'] } & InnerSectionProps) => ( +}: { locale: LocaleValue } & InnerSectionProps) => ( {t`Twitter`} diff --git a/apps/lend/src/layout/Header.tsx b/apps/lend/src/layout/Header.tsx index 8caa2c528..c436e59f2 100644 --- a/apps/lend/src/layout/Header.tsx +++ b/apps/lend/src/layout/Header.tsx @@ -1,49 +1,36 @@ -import AppLogo from '@/ui/Brand/AppLogo' import type { AppPage } from '@/ui/AppNav/types' -import React, { useEffect, useMemo, useRef } from 'react' +import React, { useCallback, useEffect, useMemo, useRef } from 'react' import { t } from '@lingui/macro' -import { useNavigate, useParams } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import { CONNECT_STAGE, ROUTE } from '@/constants' import { DEFAULT_LOCALES } from '@/lib/i18n' import { getNetworkFromUrl, getParamsFromUrl, getRestFullPathname, getRestPartialPathname } from '@/utils/utilsRouter' import { _parseRouteAndIsActive, FORMAT_OPTIONS, formatNumber, isLoading } from '@/ui/utils' -import { ConnectWalletIndicator, getWalletSignerAddress, useConnectWallet } from '@/common/features/connect-wallet' +import { getWalletSignerAddress, useConnectWallet } from '@/common/features/connect-wallet' import { useHeightResizeObserver } from '@/ui/hooks' import networks, { visibleNetworksList } from '@/networks' import useStore from '@/store/useStore' -import { - AppButtonLinks, - AppNavBar, - AppNavBarContent, - AppNavMenuSection, - AppNavMobile, - APPS_LINKS -} from '@/ui/AppNav' +import { APPS_LINKS } from '@/ui/AppNav' import { CommunitySection, ResourcesSection } from '@/layout/Footer' -import AppNavPages from '@/ui/AppNav/AppNavPages' -import HeaderSecondary from '@/layout/HeaderSecondary' import { useTvl } from '@/entities/chain' -import { ChainSwitcher } from '@/common/features/switch-chain' -import { LanguageSwitcher } from '@/common/features/switch-language' +import { Header as NewHeader } from '@/common/widgets/Header/Header' +import { ThemeKey } from '@ui-kit/shared/lib' const Header = () => { const [{ wallet }] = useConnectWallet() const mainNavRef = useRef(null) const navigate = useNavigate() - const params = useParams() const elHeight = useHeightResizeObserver(mainNavRef) const { rChainId, rLocalePathname } = getParamsFromUrl() const connectState = useStore((state) => state.connectState) - const isAdvanceMode = useStore((state) => state.isAdvanceMode) + const isAdvancedMode = useStore((state) => state.isAdvanceMode) const isMdUp = useStore((state) => state.layout.isMdUp) - const isLgUp = useStore((state) => state.layout.isLgUp) - const pageWidth = useStore((state) => state.layout.pageWidth) const locale = useStore((state) => state.locale) const routerProps = useStore((state) => state.routerProps) const themeType = useStore((state) => state.themeType) @@ -62,17 +49,12 @@ const Header = () => { { route: ROUTE.PAGE_INTEGRATIONS, label: t`Integrations`, - groupedTitle: isLgUp ? 'Others' : 'More', ...!isLgUp && { minWidth: '10rem' } + groupedTitle: isMdUp ? 'Others' : 'More', ...!isMdUp && { minWidth: '10rem' } }, - { route: ROUTE.PAGE_RISK_DISCLAIMER, label: t`Risk Disclaimer`, groupedTitle: isLgUp ? 'risk' : 'More' } - ], rLocalePathname, routerPathname, routerNetwork), [isLgUp, rLocalePathname, routerNetwork, routerPathname]) + { route: ROUTE.PAGE_RISK_DISCLAIMER, label: t`Risk Disclaimer`, groupedTitle: isMdUp ? 'risk' : 'More' } + ], rLocalePathname, routerPathname, routerNetwork), [isMdUp, rLocalePathname, routerNetwork, routerPathname]) - const getPath = (route: string) => { - const networkName = networks[rChainId || '1'].id - return `#${rLocalePathname}/${networkName}${route}` - } - - const handleNetworkChange = (selectedChainId: ChainId) => { + const handleNetworkChange = useCallback((selectedChainId: ChainId) => { if (rChainId !== selectedChainId) { const network = networks[selectedChainId as ChainId].id const [currPath] = window.location.hash.split('?') @@ -86,120 +68,54 @@ const Header = () => { updateConnectState('loading', CONNECT_STAGE.SWITCH_NETWORK, [rChainId, selectedChainId]) } - } + }, [rChainId, rLocalePathname, updateConnectState, navigate]) useEffect(() => { setLayoutHeight('mainNav', elHeight) // eslint-disable-next-line react-hooks/exhaustive-deps }, [elHeight]) - const selectNetworkComp = ( - - ) - - const appNavAdvancedMode = { - isAdvanceMode, - handleClick: () => setAppCache('isAdvanceMode', !isAdvanceMode), - } - - const appNavConnect = { - connectState, - walletSignerAddress: getWalletSignerAddress(wallet), - handleClick: () => { - if (wallet) { - updateConnectState('loading', CONNECT_STAGE.DISCONNECT_WALLET) - } else { - updateConnectState('loading', CONNECT_STAGE.CONNECT_WALLET, ['']) - } - }, - } - - const appNavLocale = - DEFAULT_LOCALES.length > 1 - ? { - locale, - locales: DEFAULT_LOCALES, - handleChange: (selectedLocale: React.Key) => { - const locale = selectedLocale !== 'en' ? `/${selectedLocale}` : '' - const { rNetwork } = getNetworkFromUrl() - navigate(`${locale}/${rNetwork}/${getRestFullPathname()}`) - }, - } - : undefined - - const appNavTheme = { - themeType, - handleClick: (selectedThemeType: Theme) => setAppCache('themeType', selectedThemeType), - } - return ( - <> - {isMdUp && ( - - )} - - - {isMdUp ? ( - <> - - - - - - - - {appNavLocale && ( - - )} - {selectNetworkComp} - - - - ) : ( - { - if (navigate && params) { - let parsedRoute = route.charAt(0) === '#' ? route.substring(2) : route - navigate(parsedRoute) - } - }, - }} - sections={[ - { id: 'apps', title: t`Apps`, links: APPS_LINKS }, - { id: 'community', title: t`Community`, comp: }, - { id: 'resources', title: t`Resources`, comp: }, - ]} - selectNetwork={selectNetworkComp} - stats={[]} - theme={appNavTheme} - /> - )} - - - + setAppCache('isAdvanceMode', isAdvanced), [setAppCache]), + ]} + currentApp="lend" + pages={pages} + themes={[ + themeType, + useCallback((selectedThemeType: ThemeKey) => setAppCache('themeType', selectedThemeType), [setAppCache]), + ]} + languages={{ + locale, + locales: DEFAULT_LOCALES, + onChange: useCallback((selectedLocale: React.Key) => { + const locale = selectedLocale === 'en' ? '' : `/${selectedLocale}` + const { rNetwork } = getNetworkFromUrl() + navigate(`${locale}/${rNetwork}/${getRestFullPathname()}`) + }, [navigate]), + }} + chains={{ + options: visibleNetworksList, + disabled: isLoading(connectState, CONNECT_STAGE.SWITCH_NETWORK), + chainId: rChainId, + onChange: handleNetworkChange, + }} + wallet={{ + onConnectWallet: useCallback(() => updateConnectState('loading', CONNECT_STAGE.CONNECT_WALLET, ['']), [updateConnectState]), + onDisconnectWallet: useCallback(() => updateConnectState('loading', CONNECT_STAGE.DISCONNECT_WALLET), [updateConnectState]), + walletAddress: getWalletSignerAddress(wallet), + disabled: isLoading(connectState, CONNECT_STAGE.SWITCH_NETWORK), + }} + appStats={[{ label: 'TVL', value: tvl && formatNumber(tvl, { ...FORMAT_OPTIONS.USD, showDecimalIfSmallNumberOnly: true }) || '' }]} + sections={[ + { id: 'apps', title: t`Apps`, links: APPS_LINKS }, + { id: 'community', title: t`Community`, comp: }, + { id: 'resources', title: t`Resources`, comp: }, + ]} + /> ) } diff --git a/apps/lend/src/lib/i18n.ts b/apps/lend/src/lib/i18n.ts index 7e22eb92c..01ebe0480 100644 --- a/apps/lend/src/lib/i18n.ts +++ b/apps/lend/src/lib/i18n.ts @@ -3,14 +3,9 @@ import type { DefaultStateKeys } from '@/store/createAppSlice' import { I18n, i18n } from '@lingui/core' import { en, zh } from 'make-plural/plurals' import { setStorageValue } from '@/utils/utilsStorage' +import { LocaleOption } from '@/common/features/switch-language' -export type Locale = { - name: string - value: 'en' | 'zh-Hans' | 'zh-Hant' | 'pseudo' - lang: string -} - -export const DEFAULT_LOCALES: Locale[] = [ +export const DEFAULT_LOCALES: LocaleOption[] = [ { name: 'English', value: 'en', lang: 'en' }, ...( process.env.NODE_ENV === 'development' ? [ @@ -38,7 +33,7 @@ export const findLocale = (selectedLocale: string) => DEFAULT_LOCALES.find((l) = return l.value.toLowerCase() === parsedLocale }) -export function parseLocale(locale?: string): { parsedLocale: Locale['value']; pathnameLocale: string } { +export function parseLocale(locale?: string): { parsedLocale: LocaleOption['value']; pathnameLocale: string } { if (!locale) return { parsedLocale: 'en', pathnameLocale: '' } const foundLocale = findLocale(locale) const parsedLocale = foundLocale?.value ?? 'en' diff --git a/apps/lend/src/pages/_app.tsx b/apps/lend/src/pages/_app.tsx index 63dbba1d6..598b826d9 100644 --- a/apps/lend/src/pages/_app.tsx +++ b/apps/lend/src/pages/_app.tsx @@ -103,7 +103,7 @@ function CurveApp({ Component }: AppProps) { return (
{typeof window === 'undefined' || !appLoaded ? null : ( - + diff --git a/apps/lend/src/store/createAppSlice.ts b/apps/lend/src/store/createAppSlice.ts index ae64353b9..7ba231333 100644 --- a/apps/lend/src/store/createAppSlice.ts +++ b/apps/lend/src/store/createAppSlice.ts @@ -1,7 +1,6 @@ import type { GetState, SetState } from 'zustand' import type { State } from '@/store/useStore' import type { ConnectState } from '@/ui/utils' -import type { Locale } from '@/lib/i18n' import produce from 'immer' @@ -9,6 +8,8 @@ import { REFRESH_INTERVAL } from '@/constants' import { log } from '@/shared/lib/logging' import { setStorageValue } from '@/utils/utilsStorage' import isEqual from 'lodash/isEqual' +import { ThemeKey } from '@ui-kit/shared/lib' +import { LocaleValue } from '@/common/features/switch-language' export type DefaultStateKeys = keyof typeof DEFAULT_STATE export type SliceKey = keyof State | '' @@ -24,11 +25,11 @@ type SliceState = { isLoadingCurve: true isMobile: boolean isPageVisible: boolean - locale: Locale['value'] + locale: LocaleValue maxSlippage: string routerProps: RouterProps | null scrollY: number - themeType: Theme + themeType: ThemeKey } // prettier-ignore @@ -57,7 +58,7 @@ const DEFAULT_STATE: SliceState = { maxSlippage: '0.1', routerProps: null, scrollY: 0, - themeType: 'default', + themeType: 'light', } const createAppSlice = (set: SetState, get: GetState): AppSlice => ({ diff --git a/apps/lend/src/types/global.d.ts b/apps/lend/src/types/global.d.ts index 9aa04c8b9..57e9a038d 100644 --- a/apps/lend/src/types/global.d.ts +++ b/apps/lend/src/types/global.d.ts @@ -1,6 +1,6 @@ import type { I1inchRoute, IChainId, INetworkName } from '@curvefi/lending-api/lib/interfaces' import type { OneWayMarketTemplate } from '@curvefi/lending-api/lib/markets' -import type { Locale } from '@/lib/i18n' +import type { LocaleOption } from '@/lib/i18n' import type { Location, NavigateFunction, Params } from 'react-router' import type { ReactNode } from 'react' import React from 'react' @@ -9,6 +9,7 @@ import type lendingApi from '@curvefi/lending-api' import type { TooltipProps } from '@/ui/Tooltip/types' import { TITLE } from '@/constants' +import { ThemeKey } from '@ui-kit/shared/lib' declare global { interface Window { @@ -364,8 +365,6 @@ declare global { navigate: NavigateFunction } - type Theme = 'default' | 'dark' | 'chad' - type UsdRate = { [tokenAddress: string]: string | number } type Wallet = WalletState type MarketDetailsView = 'user' | 'market' | '' type TitleKey = keyof typeof TITLE diff --git a/apps/lend/src/utils/utilsRouter.ts b/apps/lend/src/utils/utilsRouter.ts index 47174809c..1aa459f08 100644 --- a/apps/lend/src/utils/utilsRouter.ts +++ b/apps/lend/src/utils/utilsRouter.ts @@ -1,9 +1,8 @@ import type { Params } from 'react-router' -import type { Locale } from '@/lib/i18n' - import { DEFAULT_LOCALES, parseLocale } from '@/lib/i18n' import { MAIN_ROUTE, ROUTE } from '@/constants' import networks, { networksIdMapper } from '@/networks' +import { LocaleOption } from '@/common/features/switch-language' export function getPath({ locale = 'en', network = 'ethereum', ...rest }: Params, rerouteRoute: string) { const { parsedLocale } = parseLocale(locale) @@ -90,7 +89,7 @@ export function parseParams(params: Params, chainIdNotRequired?: boolean) { export function getLocaleFromUrl() { const restPathnames = window.location.hash?.substring(2)?.split('/') ?? [] - let resp: { rLocale: Locale | null; rLocalePathname: string } = { + let resp: { rLocale: LocaleOption | null; rLocalePathname: string } = { rLocale: null, rLocalePathname: '', } diff --git a/apps/lend/src/utils/utilsStorage.ts b/apps/lend/src/utils/utilsStorage.ts index 026a1cab2..7f0aad168 100644 --- a/apps/lend/src/utils/utilsStorage.ts +++ b/apps/lend/src/utils/utilsStorage.ts @@ -1,5 +1,6 @@ import merge from 'lodash/merge' import dayjs from 'dayjs' +import { ThemeKey } from '@ui-kit/shared/lib' export const APP_STORAGE = { APP_CACHE: 'lend-app-cache', @@ -31,8 +32,8 @@ export function getStorageValue(key: Key) { function getTheme(svThemeType: string | undefined) { if (svThemeType) { - const foundThemeType = ['default', 'dark', 'chad'].find((t) => t === svThemeType) as Theme - return (foundThemeType || 'default') as Theme + const foundThemeType = ['default', 'dark', 'chad'].find((t) => t === svThemeType) as ThemeKey + return (foundThemeType || 'default') as ThemeKey } } diff --git a/apps/loan/src/layout/Header.tsx b/apps/loan/src/layout/Header.tsx index 936e5e2ff..3d6bf4afd 100644 --- a/apps/loan/src/layout/Header.tsx +++ b/apps/loan/src/layout/Header.tsx @@ -14,20 +14,13 @@ import { visibleNetworksList } from '@/networks' import useLayoutHeight from '@/hooks/useLayoutHeight' import useStore from '@/store/useStore' -import { - AppButtonLinks, - AppNavBar, - AppNavBarContent, - AppNavMenuSection, - AppNavMobile, - APPS_LINKS, - AppSelectNetwork -} from '@/ui/AppNav' +import { AppNavBar, AppNavBarContent, AppNavMenuSection, AppNavMobile, APPS_LINKS, AppSelectNetwork } from '@/ui/AppNav' import { CommunitySection, ResourcesSection } from '@/layout/Footer' import AppLogo from '@/ui/Brand' import AppNavPages from '@/ui/AppNav/AppNavPages' import ConnectWallet from '@/ui/Button/ConnectWallet' import HeaderSecondary from '@/layout/HeaderSecondary' +import { AppButtonLinks } from '@/common/widgets/Header/AppButtonLinks' const Header = () => { const [{ wallet }] = useConnectWallet() @@ -61,8 +54,6 @@ const Header = () => { const routerNetwork = routerParams?.network ?? 'ethereum' const routerPathname = location?.pathname ?? '' - const appLogoProps: AppLogoProps = {} - const pages: AppPage[] = useMemo(() => { const links = isLgUp ? [ @@ -153,7 +144,7 @@ const Header = () => { {isMdUp ? ( <> - + diff --git a/apps/main/src/layout/default/Header.tsx b/apps/main/src/layout/default/Header.tsx index dcd032684..7c7dc9ec0 100644 --- a/apps/main/src/layout/default/Header.tsx +++ b/apps/main/src/layout/default/Header.tsx @@ -16,7 +16,6 @@ import useStore from '@/store/useStore' import { APP_LINK, - AppButtonLinks, AppNavBar, AppNavBarContent, AppNavMenuSection, @@ -29,6 +28,7 @@ import AppLogo from '@/ui/Brand' import AppNavPages from '@/ui/AppNav/AppNavPages' import ConnectWallet from '@/ui/Button/ConnectWallet' import HeaderSecondary from '@/layout/default/HeaderSecondary' +import { AppButtonLinks } from '@/common/widgets/Header/AppButtonLinks' const Header = () => { const [{ wallet }] = useConnectWallet() diff --git a/packages/curve-common/global.d.ts b/packages/curve-common/global.d.ts index 41f89fadb..6e3147caf 100644 --- a/packages/curve-common/global.d.ts +++ b/packages/curve-common/global.d.ts @@ -8,3 +8,8 @@ declare global { ethereum: EIP1193Provider & { isBitKeep?: boolean } } } + +declare module '*.png' { + const content: any + export default content +} diff --git a/packages/curve-common/src/features/switch-chain/ui/ChainSwitcher.tsx b/packages/curve-common/src/features/switch-chain/ui/ChainSwitcher.tsx index 15233bbc2..30db1240a 100644 --- a/packages/curve-common/src/features/switch-chain/ui/ChainSwitcher.tsx +++ b/packages/curve-common/src/features/switch-chain/ui/ChainSwitcher.tsx @@ -1,8 +1,7 @@ -import { Select } from '@ui-kit/shared/ui/Select' -import { MenuItem } from '@ui-kit/shared/ui/MenuItem' +import { MenuItem } from 'curve-ui-kit/src/shared/ui/MenuItem' import { FunctionComponent, SVGProps, useCallback, useMemo } from 'react' -import { SelectChangeEvent } from '@mui/material/Select/SelectInput' import { Typography } from 'curve-ui-kit/src/shared/ui/Typography' +import { CompactDropDown } from 'curve-ui-kit/src/shared/ui/CompactDropDown' export type IconType = FunctionComponent> @@ -23,21 +22,17 @@ export const ChainSwitcher = ({ options, chainId, onCha const networkIcons = useMemo(() => options.reduce((acc, option) => ({ ...acc, [option.chainId]: option.icon }), {} as Record), [options]) const renderChainIcon = useCallback((value: TChainId) => { - const Icon = networkIcons[value] + const Icon: IconType = networkIcons[value] return }, [networkIcons]) - const onValueChange = useCallback((v: SelectChangeEvent) => onChange(v.target.value as TChainId), [onChange]) - return ( - - value={[-1, 0].includes(chainId) ? 1 : chainId} - onChange={onValueChange} + + value={chainId} + onChange={onChange} variant="standard" disabled={disabled} renderValue={renderChainIcon} - size="small" - sx={{padding:0}} > { options.map(({ chainId: id, icon: Icon, label }) => ( @@ -49,6 +44,6 @@ export const ChainSwitcher = ({ options, chainId, onCha )) } - + ) } diff --git a/packages/curve-common/src/features/switch-language/ui/LanguageSwitcher.tsx b/packages/curve-common/src/features/switch-language/ui/LanguageSwitcher.tsx index 0753ec69b..72ad38c6b 100644 --- a/packages/curve-common/src/features/switch-language/ui/LanguageSwitcher.tsx +++ b/packages/curve-common/src/features/switch-language/ui/LanguageSwitcher.tsx @@ -1,36 +1,26 @@ -import { Select } from '@ui-kit/shared/ui/Select' -import { MenuItem } from '@ui-kit/shared/ui/MenuItem' - -import { useCallback } from 'react' -import { SelectChangeEvent } from '@mui/material/Select/SelectInput' +import { MenuItem } from 'curve-ui-kit/src/shared/ui/MenuItem' import { Typography } from 'curve-ui-kit/src/shared/ui/Typography' +import { CompactDropDown } from 'curve-ui-kit/src/shared/ui/CompactDropDown' -export type LanguageOption = { - value: string - lang: string +export type LocaleValue = 'en' | 'zh-Hans' | 'zh-Hant' | 'pseudo' +export type LocaleOption = { name: string + value: LocaleValue + lang: string } export type LanguageSwitcherProps = { - languageCode: string - languageOptions: LanguageOption[] - onChange: (languageCode: string) => void + locale: LocaleValue + locales: LocaleOption[] + onChange: (value: LocaleValue) => void } -export const LanguageSwitcher = ({ languageOptions, languageCode, onChange }: LanguageSwitcherProps) => ( - +export const LanguageSwitcher = ({ locales, locale, onChange }: LanguageSwitcherProps) => ( + value={locale} onChange={onChange}> + {locales.map((languageOption) => ( + + {languageOption.name} + + ))} + ) diff --git a/packages/curve-ui-kit/src/shared/ui/Header/AppButtonLinks.tsx b/packages/curve-common/src/widgets/Header/AppButtonLinks.tsx similarity index 88% rename from packages/curve-ui-kit/src/shared/ui/Header/AppButtonLinks.tsx rename to packages/curve-common/src/widgets/Header/AppButtonLinks.tsx index b96f931c5..8bfa05bfe 100644 --- a/packages/curve-ui-kit/src/shared/ui/Header/AppButtonLinks.tsx +++ b/packages/curve-common/src/widgets/Header/AppButtonLinks.tsx @@ -1,8 +1,8 @@ import Box from '@mui/material/Box' import Button from '@mui/material/Button' +import Link from '@mui/material/Link' import { APP_LINK } from 'ui/src/AppNav/constants' import { AppName, AppNames } from 'ui/src/AppNav/types' -import { RouterLink } from '../RouterLink' export type AppNavAppsProps = { currentApp: AppName } @@ -11,12 +11,13 @@ export const AppButtonLinks = ({ currentApp }: AppNavAppsProps) => ( {AppNames.map((appName) => { const app = APP_LINK[appName] const isActive = currentApp === appName + console.log(app) return (