Skip to content

Commit

Permalink
feat: Chinese sites
Browse files Browse the repository at this point in the history
  • Loading branch information
@DanielSchiavini
DanielSchiavini committed Nov 1, 2024
1 parent 2949bce commit e0b807d
Show file tree
Hide file tree
Showing 7 changed files with 101 additions and 214 deletions.
177 changes: 26 additions & 151 deletions apps/lend/src/layout/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,122 +1,20 @@
import { t } from '@lingui/macro'
import styled, { css } from 'styled-components'
import Image from 'next/image'
import React, { useEffect, useRef } from 'react'
import React, { FunctionComponent, useEffect, useRef } from 'react'

import { breakpoints } from '@/ui/utils/responsive'
import { sizes } from '@/ui/utils'
import networks from '@/networks'
import useStore from '@/store/useStore'

import { RCDiscordLogo, RCGithubLogo, RCTelegramLogo, RCTwitterLogo } from '@/images'
import Box from '@/ui/Box'
import { ExternalLink, InternalLink } from '@/ui/Link'
import { ExternalLink } from '@/ui/Link'
import { useHeightResizeObserver } from '@/ui/hooks'
import { LocaleValue } from '@/common/features/switch-language'
import { NavigationSection } from '@/common/widgets/Header/types'

type InnerSectionProps = {
className?: string
columnCount?: number
}

export const CommunitySection = ({
className,
columnCount,
locale,
}: { locale: LocaleValue } & InnerSectionProps) => (
<CommunityWrapper className={className} $columnCount={columnCount}>
<SectionItem>
<StyledExternalLink href="https://twitter.com/curvefinance">{t`Twitter`}</StyledExternalLink>
</SectionItem>
<SectionItem>
<StyledExternalLink href="https://t.me/curvefi">{t`Telegram`}</StyledExternalLink>
{locale !== 'en' && (
<>
{` EN | `}
<StyledExternalLink href="https://t.me/curveficn">{t`CN`}</StyledExternalLink>
</>
)}
</SectionItem>
{(locale === 'zh-Hans' || locale === 'zh-Hant') && (
<SectionItem>
<StyledExternalLink href="https://imdodo.com/s/147186?inv=7J46">{t`Dodo`}</StyledExternalLink>
</SectionItem>
)}
<SectionItem>
<StyledExternalLink href="https://discord.gg/rgrfS7W">{t`Discord`}</StyledExternalLink>
</SectionItem>
<SectionItem>
<StyledExternalLink href="https://www.youtube.com/c/CurveFinance">{t`YouTube`}</StyledExternalLink>
{locale !== 'en' && (
<>
{` EN | `}
<StyledExternalLink href="https://www.youtube.com/watch?v=FtzDlWdcou8&list=PLh7yM-DPEDYgP-vyEOCIboD3xg_TgJmkj">
{t`CN`}
</StyledExternalLink>
</>
)}
</SectionItem>
{(locale === 'zh-Hans' || locale === 'zh-Hant') && (
<SectionItem>
<StyledExternalLink href="https://www.curve.wiki/">{t`Wiki CN`}</StyledExternalLink>
</SectionItem>
)}
<SectionItem>
<StyledExternalLink href="https://dune.com/mrblock_buidl/Curve.fi">{t`Dune Analytics`}</StyledExternalLink>
</SectionItem>
<SectionItem>
<StyledExternalLink href="https://curvemonitor.com">{t`Curve Monitor`}</StyledExternalLink>
</SectionItem>
<SectionItem>
<StyledExternalLink href="https://crvhub.com/">{t`Crvhub`}</StyledExternalLink>
</SectionItem>
</CommunityWrapper>
)

interface ResourcesSectionProps extends InnerSectionProps {
chainId: ChainId | null
}

export const ResourcesSection = ({ className, columnCount, chainId }: ResourcesSectionProps) => {
const orgUIPath = networks[chainId ?? '1']?.orgUIPath
type FooterProps = { sections: NavigationSection[] }

return (
<ResourcesWrapper className={className} $columnCount={columnCount}>
{/*<SectionItem>*/}
{/* <StyledExternalLink href="https://github.com/curvefi/curve-stablecoin/blob/master/doc/curve-stablecoin.pdf">{t`Whitepaper`}</StyledExternalLink>*/}
{/*</SectionItem>*/}
<SectionItem>
<StyledExternalLink href="https://resources.curve.fi/lending/understanding-lending/">{t`Resources`}</StyledExternalLink>
</SectionItem>
<SectionItem>
<StyledExternalLink href="https://github.com/curvefi/curve-stablecoin">{t`Github`}</StyledExternalLink>
</SectionItem>
<SectionItem>
<StyledExternalLink href="https://docs.curve.fi">{t`Developer Docs`}</StyledExternalLink>
</SectionItem>
<SectionItem>
<StyledExternalLink href="https://resources.curve.fi/glossary-branding/branding/">{t`Branding`}</StyledExternalLink>
</SectionItem>
<SectionItem>
<StyledExternalLink href="https://docs.curve.fi/integration/overview/">{t`Integrations`}</StyledExternalLink>
</SectionItem>
<SectionItem>
<StyledExternalLink href="https://docs.curve.fi/references/audits/">{t`Audits`}</StyledExternalLink>
</SectionItem>
<SectionItem>
<StyledExternalLink href="https://docs.curve.fi/references/deployed-contracts/">{t`Contracts`}</StyledExternalLink>
</SectionItem>
<SectionItem>
<StyledExternalLink href={`${orgUIPath}/bugbounty`}>{t`Bug Bounty`}</StyledExternalLink>
</SectionItem>
<SectionItem>
<StyledExternalLink href="https://news.curve.fi/">{t`News`}</StyledExternalLink>
</SectionItem>
</ResourcesWrapper>
)
}

const Footer = ({ chainId }: { chainId: ChainId }) => {
const Footer: FunctionComponent<FooterProps> = ({ sections }) => {
const footerRef = useRef<HTMLDivElement>(null)
const elHeight = useHeightResizeObserver(footerRef)

Expand All @@ -127,8 +25,6 @@ const Footer = ({ chainId }: { chainId: ChainId }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [elHeight])

const locale = useStore((state) => state.locale)

return (
<FooterWrapper ref={footerRef}>
<FooterInnerWrapper grid gridAutoFlow="column" gridColumnGap={3} flexAlignItems="start">
Expand All @@ -154,52 +50,37 @@ const Footer = ({ chainId }: { chainId: ChainId }) => {
</div>

<InfoBox grid gridAutoFlow="column">
<Section title="Community">
<CommunitySection locale={locale} />
</Section>
<Section title="Resources">
<ResourcesSection chainId={chainId} />
</Section>
{sections.map((section) => (
<Section key={section.title} title={section.title}>
{section.links.map(({ label, route }) => (
<SectionItem key={route}>
<StyledExternalLink href={route}>{label}</StyledExternalLink>
</SectionItem>
))}
</Section>
))}
</InfoBox>
</FooterInnerWrapper>
</FooterWrapper>
)
}

interface SectionProps extends InnerSectionProps {
interface SectionProps {
className?: string
columnCount?: number
title: React.ReactNode
}

const Section = ({ className, title, children }: React.PropsWithChildren<SectionProps>) => {
return (
<SectionWrapper className={className} as="article">
<Header>{title}</Header>
{children}
</SectionWrapper>
)
}

const ResourcesWrapper = styled.ul<{ $columnCount?: number }>`
@media (min-width: ${breakpoints.md}rem) {
column-count: ${({ $columnCount }) => $columnCount || 3};
}
`
const Section = ({ className, title, children }: React.PropsWithChildren<SectionProps>) => (
<SectionWrapper className={className} as="article">
<Header>{title}</Header>
<SectionChildrenWrapper>{children}</SectionChildrenWrapper>
</SectionWrapper>
)

const CommunityWrapper = styled.ul<{ $columnCount?: number }>`
@media (min-width: ${breakpoints.md}rem) {
${({ $columnCount }) => {
if ($columnCount) {
return `
column-count: ${$columnCount};
`
} else {
return `
min-width: 15rem; //240px
column-count: 2;
`
}
}}
}
const SectionChildrenWrapper = styled.ul`
@media (min-width: ${breakpoints.md}rem) { column-count: 2 }
@media (min-width: ${breakpoints.lg}rem) { column-count: 3 }
`

const FooterLogoWrapper = styled.div`
Expand Down Expand Up @@ -286,12 +167,6 @@ const ExternalLinkButton = styled(ExternalLink)`
${linkStyles};
`

const StyledInternalLink = styled(InternalLink)`
${linkStyles};
text-transform: inherit;
text-decoration: none;
`

const CurveLogo = styled(Image)`
width: 160px;
height: 41.59px;
Expand Down
56 changes: 18 additions & 38 deletions apps/lend/src/layout/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import type { AppPage } from '@/ui/AppNav/types'

import React, { useCallback, useEffect, useMemo, useRef } from 'react'
import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react'
import { t } from '@lingui/macro'
import { useNavigate } from 'react-router-dom'

import { CONNECT_STAGE, ROUTE } from '@/constants'
import { DEFAULT_LOCALES } from '@/lib/i18n'
import { DEFAULT_LOCALES, updateAppLocale } from '@/lib/i18n'
import { getNetworkFromUrl, getParamsFromUrl, getRestFullPathname, getRestPartialPathname } from '@/utils/utilsRouter'
import { _parseRouteAndIsActive, FORMAT_OPTIONS, formatNumber, isLoading } from '@/ui/utils'
import { getWalletSignerAddress, useConnectWallet } from '@/common/features/connect-wallet'
Expand All @@ -15,49 +13,30 @@ import useStore from '@/store/useStore'
import { useTvl } from '@/entities/chain'
import { Header as NewHeader } from '@/common/widgets/Header'
import { ThemeKey } from '@ui-kit/shared/lib'
import { NavigationSection } from '@/common/widgets/Header/types'
import { Locale } from '@/ui/AppNav/types'

type HeaderProps = { chainId: ChainId, sections: NavigationSection[] }

const getSections = (rChainId: ChainId) => [
{
title: t`Documentation`,
links: [
{ route: 'https://news.curve.fi/', label: t`News` },
{ route: 'https://resources.curve.fi/lending/understanding-lending/', label: t`User Resources` },
{ route: 'https://docs.curve.fi', label: t`Developer Resources` },
{ route: 'https://docs.curve.fi/integration/overview/', label: t`Integrations` },
{ route: 'https://resources.curve.fi/glossary-branding/branding/', label: t`Branding` }
]
},
{
title: t`Security`, // audits, bug bounty, dune analytics, curve monitor & crvhub
links: [
{ route: 'https://docs.curve.fi/references/audits/', label: t`Audits` },
{ route: `${networks[rChainId ?? '1']?.orgUIPath}/bugbounty`, label: t`Bug Bounty` },
{ route: 'https://dune.com/mrblock_buidl/Curve.fi', label: t`Dune Analytics` },
{ route: 'https://curvemonitor.com', label: t`Curve Monitor` },
{ route: 'https://crvhub.com/', label: t`Crvhub` }
]
}
]

const Header = () => {
const Header: FunctionComponent<HeaderProps> = ({ chainId, sections }) => {
const [{ wallet }] = useConnectWallet()
const mainNavRef = useRef<HTMLDivElement>(null)
const navigate = useNavigate()
const elHeight = useHeightResizeObserver(mainNavRef)

const { rChainId, rLocalePathname } = getParamsFromUrl()
const { rLocalePathname } = getParamsFromUrl()

const connectState = useStore((state) => state.connectState)
const isAdvancedMode = useStore((state) => state.isAdvanceMode)
const isMdUp = useStore((state) => state.layout.isMdUp)
const locale = useStore((state) => state.locale)
const updateGlobalStoreByKey = useStore((state) => state.updateGlobalStoreByKey)
const routerProps = useStore((state) => state.routerProps)
const themeType = useStore((state) => state.themeType)
const setLayoutHeight = useStore((state) => state.layout.setLayoutHeight)
const setAppCache = useStore((state) => state.setAppCache)
const updateConnectState = useStore((state) => state.updateConnectState)
const { data: tvl } = useTvl(rChainId);
const { data: tvl } = useTvl(chainId);

const { params: routerParams, location } = routerProps ?? {}
const routerPathname = location?.pathname ?? ''
Expand All @@ -70,6 +49,7 @@ const Header = () => {

return (
<NewHeader
locale={locale}
isMdUp={isMdUp}
advancedMode={[
isAdvancedMode,
Expand All @@ -94,17 +74,17 @@ const Header = () => {
locale,
locales: DEFAULT_LOCALES,
onChange: useCallback((selectedLocale: React.Key) => {
const locale = selectedLocale === 'en' ? '' : `/${selectedLocale}`
const { rNetwork } = getNetworkFromUrl()
navigate(`${locale}/${rNetwork}/${getRestFullPathname()}`)
}, [navigate]),
updateAppLocale(selectedLocale as Locale, updateGlobalStoreByKey)
navigate(`${selectedLocale === 'en' ? '' : `/${selectedLocale}`}/${rNetwork}/${getRestFullPathname()}`)
}, [updateGlobalStoreByKey, navigate]),
}}
chains={{
options: visibleNetworksList,
disabled: isLoading(connectState, CONNECT_STAGE.SWITCH_NETWORK),
chainId: rChainId,
chainId: chainId,
onChange: useCallback((selectedChainId: ChainId) => {
if (rChainId !== selectedChainId) {
if (chainId !== selectedChainId) {
const network = networks[selectedChainId as ChainId].id
const [currPath] = window.location.hash.split('?')

Expand All @@ -115,9 +95,9 @@ const Header = () => {
navigate(`${rLocalePathname}/${network}/${getRestPartialPathname()}`)
}

updateConnectState('loading', CONNECT_STAGE.SWITCH_NETWORK, [rChainId, selectedChainId])
updateConnectState('loading', CONNECT_STAGE.SWITCH_NETWORK, [chainId, selectedChainId])
}
}, [rChainId, rLocalePathname, updateConnectState, navigate]),
}, [chainId, rLocalePathname, updateConnectState, navigate]),
}}
wallet={{
onConnectWallet: useCallback(() => updateConnectState('loading', CONNECT_STAGE.CONNECT_WALLET, ['']), [updateConnectState]),
Expand All @@ -127,7 +107,7 @@ const Header = () => {
label: t`Connect Wallet`,
}}
appStats={[{ label: 'TVL', value: tvl && formatNumber(tvl, { ...FORMAT_OPTIONS.USD, showDecimalIfSmallNumberOnly: true }) || '' }]}
sections={useMemo(() => getSections(rChainId), [rChainId])}
sections={sections}
translations={{
advancedMode: t`Advanced`,
themeSwitcher: t`Mode`,
Expand Down
Loading

0 comments on commit e0b807d

Please sign in to comment.