()
+
+ /************************************************************************************************
+ ** Scroll Handling
+ **
+ ** Detects which section is currently in view during scrolling
+ ** Uses requestAnimationFrame for performance and prevents interference during manual scrolling
+ ************************************************************************************************/
+ useEffect(() => {
+ const handleScroll = (): void => {
+ // Skip scroll handling when user has manually clicked a section
+ if (isManualScrolling.current) {
+ return
+ }
+
+ // Cancel any pending animation frame to avoid rapid updates
+ if (rafId.current) {
+ cancelAnimationFrame(rafId.current)
+ }
+
+ // Use requestAnimationFrame for better performance
+ rafId.current = requestAnimationFrame(() => {
+ // Calculate positions of all sections
+ const sectionPositions = Object.entries(sectionRefs.current).map(([title, element]) => ({
+ title,
+ top: element?.getBoundingClientRect().top ?? 0,
+ }))
+
+ // Find which section is closest to our target position (160px from top)
+ // This accounts for the header height and provides a good UX
+ const closestSection = sectionPositions.reduce(
+ (closest, current) => {
+ const currentDistance = Math.abs(current.top - 160)
+ const closestDistance = Math.abs(closest.top - 160)
+ return currentDistance < closestDistance ? current : closest
+ },
+ sectionPositions[0] || { title: '', top: 0 }
+ )
+
+ // Update the active section
+ setActiveSection(closestSection.title)
+ })
+ }
+
+ // Add scroll event listener
+ window.addEventListener('scroll', handleScroll)
+
+ // Initialize by triggering the scroll handler
+ handleScroll()
+
+ // Clean up event listener and any pending animation frames
+ return () => {
+ window.removeEventListener('scroll', handleScroll)
+ if (rafId.current) {
+ cancelAnimationFrame(rafId.current)
+ }
+ }
+ }, [])
+
+ /************************************************************************************************
+ ** Section Navigation
+ **
+ ** Handles user clicking on a section in the navigation
+ ** Implements smooth scrolling and temporary disables scroll tracking
+ ************************************************************************************************/
+ const scrollToSection = (sectionTitle: string): void => {
+ const element = sectionRefs.current[sectionTitle]
+ if (!element) {
+ return
+ }
+
+ // Flag that we're manually scrolling to prevent interference
+ isManualScrolling.current = true
+
+ // Update active section immediately for better UX
+ setActiveSection(sectionTitle)
+
+ // Calculate scroll position with offset for header height
+ const elementPosition = element.getBoundingClientRect().top
+ const offsetPosition = elementPosition + window.scrollY - 160
+
+ // Smooth scroll to the target position
+ window.scrollTo({
+ top: offsetPosition,
+ behavior: 'smooth',
+ })
+
+ // Reset the manual scrolling flag after animation completes
+ setTimeout(() => {
+ isManualScrolling.current = false
+ }, 500)
+ }
+
+ // Early return if data is missing
+ if (!faqData?.faqSection) {
+ return {RESOURCES_DICT.faq.noDataMessage}
+ }
+
+ return (
+
+
+ {/* FAQ Title */}
+
+ {faqData.title}
+
+
+
+ {/* FAQ Sections */}
+
+ {faqData.faqSection.map((section: TFaqSection) => (
+
{
+ sectionRefs.current[section.sectionTitle] = el
+ }}
+ aria-labelledby={`section-${section.id}`}
+ >
+
+ {section.sectionTitle}
+
+
+
+ {section.faqSectionItem.map((item) => (
+
+
+ ))}
+
+
+ {/* FAQ Navigation Sidebar */}
+
+
+
+ {/* Footer Banner */}
+
+
+
-
- {sections.map(section => (
-
- onSectionClick(section.sectionTitle)}
- className={cl(
- 'text-left text-lg transition-all hover:text-blue',
- activeSection === section.sectionTitle ? 'text-white' : 'text-gray-500'
- )}
- aria-current={activeSection === section.sectionTitle ? 'true' : 'false'}>
- {section.sectionTitle}
-
-
- ))}
-
-
- )
+ return (
+
+
+ {sections.map((section) => (
+
+ onSectionClick(section.sectionTitle)}
+ className={cl(
+ 'text-left text-lg transition-all hover:text-blue',
+ activeSection === section.sectionTitle ? 'text-white' : 'text-gray-500'
+ )}
+ aria-current={activeSection === section.sectionTitle ? 'true' : 'false'}
+ >
+ {section.sectionTitle}
+
+
+ ))}
+
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/NewsroomBreadcrumb.tsx b/app/[lang]/(resources)/_components/NewsroomBreadcrumb.tsx
index 8f3375d..4f3d2d9 100644
--- a/app/[lang]/(resources)/_components/NewsroomBreadcrumb.tsx
+++ b/app/[lang]/(resources)/_components/NewsroomBreadcrumb.tsx
@@ -1,23 +1,24 @@
'use client'
-import {usePathname} from 'next/navigation'
+import { usePathname } from 'next/navigation'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {IconBack} from '@/app/[lang]/_icons/IconBack'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { IconBack } from '@/app/[lang]/_icons/IconBack'
+import { cl } from '@/app/[lang]/_utils/cl'
export function NewsroomBreadcrumb(): React.ReactNode {
- const pathname = usePathname()
+ const pathname = usePathname()
- return (
-
- {'Back to Newsroom'}
-
- )
+ return (
+
+ {'Back to Newsroom'}
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/NewsroomNav.tsx b/app/[lang]/(resources)/_components/NewsroomNav.tsx
index 9c76540..6895898 100644
--- a/app/[lang]/(resources)/_components/NewsroomNav.tsx
+++ b/app/[lang]/(resources)/_components/NewsroomNav.tsx
@@ -1,40 +1,40 @@
'use client'
-import {useParams, usePathname} from 'next/navigation'
+import { useParams, usePathname } from 'next/navigation'
-import {TabItem} from '@/app/[lang]/_components/TabItem'
-import {newsroomCategories, newsroomTags} from '@/app/[lang]/_utils/constants'
+import { TabItem } from '@/app/[lang]/_components/TabItem'
+import { newsroomCategories, newsroomTags } from '@/app/[lang]/_utils/constants'
export function NewsroomNav(): React.ReactNode {
- const pathname = usePathname()
- const params = useParams()
- const category = (params.category as string) || ''
- const tag = (params.tag as string) || ''
+ const pathname = usePathname()
+ const params = useParams()
+ const category = (params.category as string) || ''
+ const tag = (params.tag as string) || ''
- if (tag || pathname.includes('/tags')) {
- return (
-
- {newsroomTags.map(tab => (
-
- )
- }
- return (
-
- {newsroomCategories.map(tab => (
-
- )
+ if (tag || pathname.includes('/tags')) {
+ return (
+
+ {newsroomTags.map((tab) => (
+
+ )
+ }
+ return (
+
+ {newsroomCategories.map((tab) => (
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/NewsroomTitle.tsx b/app/[lang]/(resources)/_components/NewsroomTitle.tsx
index 9b373eb..4f9f838 100644
--- a/app/[lang]/(resources)/_components/NewsroomTitle.tsx
+++ b/app/[lang]/(resources)/_components/NewsroomTitle.tsx
@@ -1,46 +1,46 @@
'use client'
-import {useParams, usePathname} from 'next/navigation'
+import { useParams, usePathname } from 'next/navigation'
-import {newsroomCategoriesSlugToCategory} from '@/app/[lang]/_utils/constants'
+import { newsroomCategoriesSlugToCategory } from '@/app/[lang]/_utils/constants'
export function NewsroomTitle(): React.ReactNode {
- const pathname = usePathname()
- const params = useParams()
- const category = (params.category as string) || ''
- const tag = (params.tag as string) || ''
+ const pathname = usePathname()
+ const params = useParams()
+ const category = (params.category as string) || ''
+ const tag = (params.tag as string) || ''
- if (tag || pathname.includes('/tags')) {
- if (tag) {
- return (
-
- {'Tagged: '}
- {tag}
-
- )
- }
- return (
-
- {'All '}
- {'tags'}
-
- )
- }
+ if (tag || pathname.includes('/tags')) {
+ if (tag) {
+ return (
+
+ {'Tagged: '}
+ {tag}
+
+ )
+ }
+ return (
+
+ {'All '}
+ {'tags'}
+
+ )
+ }
- if (category) {
- return (
-
- {'Category: '}
- {newsroomCategoriesSlugToCategory(category)}
-
- )
- }
- return (
-
- {'ShapeShift'}
-
- {'Newsroom'}
- {'.'}
-
- )
+ if (category) {
+ return (
+
+ {'Category: '}
+ {newsroomCategoriesSlugToCategory(category)}
+
+ )
+ }
+ return (
+
+ {'ShapeShift'}
+
+ {'Newsroom'}
+ {'.'}
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/PostList.tsx b/app/[lang]/(resources)/_components/PostList.tsx
index 8a88090..b3b9ef7 100644
--- a/app/[lang]/(resources)/_components/PostList.tsx
+++ b/app/[lang]/(resources)/_components/PostList.tsx
@@ -18,131 +18,111 @@
** - Add custom empty state message if needed
************************************************************************************************/
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
import ReactPaginate from 'react-paginate'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {BlogPost} from '@/app/[lang]/_components/BlogPost'
-import {useFetchPosts} from '@/app/[lang]/_hooks/useFetchPosts'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { BlogPost } from '@/app/[lang]/_components/BlogPost'
+import { useFetchPosts } from '@/app/[lang]/_hooks/useFetchPosts'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { cl } from '@/app/[lang]/_utils/cl'
-import {DEFAULT_PAGINATION} from '../_utils/constants'
+import { DEFAULT_PAGINATION } from '../_utils/constants'
-import type {TBlogPost} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TBlogPost } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
type TPostListProps = {
- pageSize?: number;
- sort?: 'asc' | 'desc';
- initialPage?: number;
- populateContent?: boolean;
- cachePosts?: boolean;
- emptyMessage?: string;
- category?: string;
- tag?: string;
- gridClassName?: string;
-};
+ pageSize?: number
+ sort?: 'asc' | 'desc'
+ initialPage?: number
+ populateContent?: boolean
+ cachePosts?: boolean
+ emptyMessage?: string
+ category?: string
+ tag?: string
+ gridClassName?: string
+}
export function PostList({
- pageSize = DEFAULT_PAGINATION.PAGE_SIZE,
- sort = DEFAULT_PAGINATION.SORT,
- initialPage = DEFAULT_PAGINATION.INITIAL_PAGE,
- populateContent = true,
- cachePosts = true,
- emptyMessage = "We couldn't find any posts matching your criteria.",
- category,
- tag,
- gridClassName
+ pageSize = DEFAULT_PAGINATION.PAGE_SIZE,
+ sort = DEFAULT_PAGINATION.SORT,
+ initialPage = DEFAULT_PAGINATION.INITIAL_PAGE,
+ populateContent = true,
+ cachePosts = true,
+ emptyMessage = "We couldn't find any posts matching your criteria.",
+ category,
+ tag,
+ gridClassName,
}: TPostListProps): ReactNode {
- const [page, setPage] = useState(initialPage)
- const {posts, pagination, isLoading} = useFetchPosts({
- page,
- pageSize,
- sort,
- populateContent,
- cachePosts,
- type: category,
- tag
- })
+ const [page, setPage] = useState(initialPage)
+ const { posts, pagination, isLoading } = useFetchPosts({
+ page,
+ pageSize,
+ sort,
+ populateContent,
+ cachePosts,
+ type: category,
+ tag,
+ })
- // Loading skeleton
- if (isLoading) {
- return (
-
- {Array.from({length: pageSize}).map((_, i) => (
-
- ))}
-
+ {Array.from({ length: pageSize }).map((_, i) => (
+
+ ))}
+
- {/* Empty state */}
- {!posts || posts.length === 0 ? (
-
- {emptyMessage}
-
- ) : (
- /* Posts grid */
-
- {posts.map((post: TBlogPost) => (
-
- )}
+ return (
+
+ {/* Empty state */}
+ {!posts || posts.length === 0 ? (
+
+ {emptyMessage}
+
+ ) : (
+ /* Posts grid */
+
+ {posts.map((post: TBlogPost) => (
+
+ )}
- {/* Pagination controls */}
- {pagination && pagination.pageCount > 1 && (
- setPage(selected + 1)}
- containerClassName={'flex gap-2 items-center justify-center mb-12'}
- pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
- pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
- activeClassName={'!opacity-100'}
- previousClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === 1 ? 'opacity-20' : 'opacity-100'
- )}
- previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
- )}
- disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
- disabledLinkClassName={'cursor-not-allowed'}
- previousLabel={ setPage(selected + 1)}
+ containerClassName={'flex gap-2 items-center justify-center mb-12'}
+ pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+ pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ activeClassName={'!opacity-100'}
+ previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+ previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextClassName={cl(
+ 'hover:opacity-100 transition-opacity',
+ page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+ )}
+ disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+ disabledLinkClassName={'cursor-not-allowed'}
+ previousLabel={
-
-
- )
+ {/* Banner */}
+
+
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/ProtocolAbout.tsx b/app/[lang]/(resources)/_components/ProtocolAbout.tsx
index 18bf94b..07ee5e7 100644
--- a/app/[lang]/(resources)/_components/ProtocolAbout.tsx
+++ b/app/[lang]/(resources)/_components/ProtocolAbout.tsx
@@ -1,23 +1,22 @@
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
type THeaderData = {
- name: string;
- description: string;
-};
+ name: string
+ description: string
+}
export function ProtocolAbout(data: THeaderData): ReactNode {
- return (
-
-
-
- {`What is ${data.name}`}
-
-
-
-
+
+ {`What is ${data.name}`}
+
+
+
- {cards[0].title ? (
-
-
-
{cards[0]?.title}
-
{cards[0]?.description}
-
-
- ) : null}
- {cards[1].title ? (
-
-
-
{cards[1]?.title}
-
{cards[1]?.description}
-
-
- ) : null}
- {cards[2]?.title ? (
-
- ) : null}
-
+ {cards[0].title ? (
+
+
+
{cards[0]?.title}
+
{cards[0]?.description}
+
+
+ ) : null}
+ {cards[1].title ? (
+
+
+
{cards[1]?.title}
+
{cards[1]?.description}
+
+
+ ) : null}
+ {cards[2]?.title ? (
+
+ ) : null}
+
-
-
-
{'OG DeFi Platforms'}
-
{description}
-
-
-
-
-
-
+
+
+
{'OG DeFi Platforms'}
+
{description}
+
+
+
+
+
+
-
-
-
{'Shift to DeFi on the go'}
-
- {'Permissionlessly track, trade, shift, and earn with your favorite chains such as '}
-
- {'Bitcoin'}
-
- {', '}
-
- {'Dogecoin'}
-
- {', '}
-
- {'Ethereum'}
-
- {', '}
-
- {'Arbitrum'}
-
- {', '}
-
- {'AVAX'}
-
- {' and more.'}
-
-
- {'Do more with your crypto when you ShapeShift.'}
-
-
-
-
+function MobileAppFeature({ index }: { index: number }): ReactNode {
+ return (
+
+
+
+
{'Shift to DeFi on the go'}
+
+ {'Permissionlessly track, trade, shift, and earn with your favorite chains such as '}
+
+ {'Bitcoin'}
+
+ {', '}
+
+ {'Dogecoin'}
+
+ {', '}
+
+ {'Ethereum'}
+
+ {', '}
+
+ {'Arbitrum'}
+
+ {', '}
+
+ {'AVAX'}
+
+ {' and more.'}
+
+
+ {'Do more with your crypto when you ShapeShift.'}
+
+
+
+
-
-
-
-
-
-
-
-
- )
+
+
+
+
+
+
+
+
-
-
-
{'Get Paid to Trade'}
-
- {'Stake FOX into rFOX, get rewarded, and save when you trade.'}
-
-
{'The more you trade, the more you earn.'}
-
-
-
-
-
-
+
+
+
{'Get Paid to Trade'}
+
{'Stake FOX into rFOX, get rewarded, and save when you trade.'}
+
{'The more you trade, the more you earn.'}
+
+
+
+
+
+
-
-
-
{'Powered by Portals'}
-
{'Shifts are Powered by Portals!'}
-
- {
- 'When you Shift, you take advantage of Portals bespoke routing and optimizations to execute the best trades.'
- }
-
-
-
-
-
-
-
+
+
+
{'Powered by Portals'}
+
{'Shifts are Powered by Portals!'}
+
+ {
+ 'When you Shift, you take advantage of Portals bespoke routing and optimizations to execute the best trades.'
+ }
+
+
+
+
+
+
+
- {featuresComponents}
-
- )
+export function ProtocolFeatures({ description, features }: { description: string; features: string[] }): ReactNode {
+ const featuresComponents = useMemo(() => {
+ const allFeatures = []
+ if (features?.includes('OG DeFi Platforms')) {
+ allFeatures.push(
+ {featuresComponents}
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/ProtocolHeader.tsx b/app/[lang]/(resources)/_components/ProtocolHeader.tsx
index 05c8fb8..53064ee 100644
--- a/app/[lang]/(resources)/_components/ProtocolHeader.tsx
+++ b/app/[lang]/(resources)/_components/ProtocolHeader.tsx
@@ -1,70 +1,53 @@
import Image from 'next/image'
-import {Fragment} from 'react'
+import { Fragment } from 'react'
-import {Button} from '@/app/[lang]/_components/Button'
-import {IconCheck} from '@/app/[lang]/_icons/IconCheck'
+import { Button } from '@/app/[lang]/_components/Button'
+import { IconCheck } from '@/app/[lang]/_icons/IconCheck'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
type THeaderData = {
- description: string;
- items: string[];
- url: string;
- width: number;
- height: number;
- name: string;
-};
+ description: string
+ items: string[]
+ url: string
+ width: number
+ height: number
+ name: string
+}
export function ProtocolHeader(data: THeaderData): ReactNode {
- return (
-
-
-
- {data.items.map(item => (
-
- {item}
-
- ))}
-
-
- {`Shift into ${data.name}`}
-
-
- {
- 'Say goodbye to multiple interfaces and hello to ShapeShift.'
- }
-
-
-
-
- )
+ return (
+
+
+
+ {data.items.map((item) => (
+
+ {item}
+
+ ))}
+
+
{`Shift into ${data.name}`}
+
+ {'Say goodbye to multiple interfaces and hello to ShapeShift.'}
+
+
+
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/ProtocolList.tsx b/app/[lang]/(resources)/_components/ProtocolList.tsx
index c25f6a2..21f4035 100644
--- a/app/[lang]/(resources)/_components/ProtocolList.tsx
+++ b/app/[lang]/(resources)/_components/ProtocolList.tsx
@@ -16,42 +16,40 @@
** - Pass protocols data and optional loading state
************************************************************************************************/
-import {ResourceCard} from '@/app/[lang]/(resources)/_components/ResourceCard'
-import {ResourceGrid} from '@/app/[lang]/(resources)/_components/ResourceGrid'
+import { ResourceCard } from '@/app/[lang]/(resources)/_components/ResourceCard'
+import { ResourceGrid } from '@/app/[lang]/(resources)/_components/ResourceGrid'
-import type {TSupportedProtocolData} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TSupportedProtocolData } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
type TProtocolListProps = {
- protocols: TSupportedProtocolData[] | null;
- isLoading?: boolean;
- className?: string;
- isSearchQuery?: boolean;
-};
+ protocols: TSupportedProtocolData[] | null
+ isLoading?: boolean
+ className?: string
+ isSearchQuery?: boolean
+}
-export function ProtocolList({protocols, isLoading, className, isSearchQuery}: TProtocolListProps): ReactNode {
- return (
- (
- (
+
- {/* Card Image */}
-
- {/* Background Image */}
-
+ return (
+
+ {/* Card Image */}
+
+ {/* Background Image */}
+
- {/* Resource Image */}
- {imageUrl ? (
-
-
- ) : (
-
- )}
-
+
+ ) : (
+
+ )}
+
-
-
{title}
-
- {description}
-
-
-
- )
+ {/* Card Content */}
+
+
+
{title}
+
{description}
+
+
= {
- items: T[] | null | undefined;
- renderItem: (item: T, index: number) => ReactNode;
- isLoading?: boolean;
- emptyMessage?: string;
- className?: string;
-};
+ items: T[] | null | undefined
+ renderItem: (item: T, index: number) => ReactNode
+ isLoading?: boolean
+ emptyMessage?: string
+ className?: string
+}
export function ResourceGrid({
- items,
- renderItem,
- isLoading = false,
- emptyMessage = 'No items available yet.',
- className = ''
+ items,
+ renderItem,
+ isLoading = false,
+ emptyMessage = 'No items available yet.',
+ className = '',
}: TResourceGridProps): ReactNode {
- // Handle loading state
- if (isLoading) {
- return (
-
- )
- }
+ // Handle loading state
+ if (isLoading) {
+ return
+ }
- // Handle empty state
- if (!items || items.length === 0) {
- return (
-
- )
- }
+ // Handle empty state
+ if (!items || items.length === 0) {
+ return (
+
+ )
+ }
- // Render grid with items
- return (
-
-
-
- {items.map((item, index) => renderItem(item, index) as ReactElement)}
-
-
-
+
+
+ {items.map((item, index) => renderItem(item, index) as ReactElement)}
+
+
+
- {/* Feature badges - desktop only */}
-
- {items.map(item => (
-
- {item}
-
- ))}
-
+ {/* Feature badges - desktop only */}
+
+ {items.map((item) => (
+
+ {item}
+
+ ))}
+
-
- {titlePrefix ? `${titlePrefix} ${title}` : title}
-
-
- {description}
-
-
+
+ {titlePrefix ? `${titlePrefix} ${title}` : title}
+
+
{description}
+
-
- )}
-
- )
+ {/* Optional Logo display */}
+ {hasLogo && logoUrl && (
+
+
+ )}
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/ResourceHero.tsx b/app/[lang]/(resources)/_components/ResourceHero.tsx
index bd45721..af9829b 100644
--- a/app/[lang]/(resources)/_components/ResourceHero.tsx
+++ b/app/[lang]/(resources)/_components/ResourceHero.tsx
@@ -18,65 +18,65 @@
import Image from 'next/image'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { cl } from '@/app/[lang]/_utils/cl'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
type TResourceHeroProps = {
- imageSrc: string;
- imageAlt: string;
- className?: string;
- logoSrc?: string;
- logoAlt?: string;
- logoWidth?: number;
- logoHeight?: number;
- logoPosition?: 'left' | 'center' | 'right';
- priority?: boolean;
-};
+ imageSrc: string
+ imageAlt: string
+ className?: string
+ logoSrc?: string
+ logoAlt?: string
+ logoWidth?: number
+ logoHeight?: number
+ logoPosition?: 'left' | 'center' | 'right'
+ priority?: boolean
+}
export function ResourceHero({
- imageSrc,
- imageAlt,
- className,
- logoSrc,
- logoAlt,
- logoWidth = 256,
- logoHeight = 256,
- logoPosition = 'right',
- priority = true
+ imageSrc,
+ imageAlt,
+ className,
+ logoSrc,
+ logoAlt,
+ logoWidth = 256,
+ logoHeight = 256,
+ logoPosition = 'right',
+ priority = true,
}: TResourceHeroProps): ReactNode {
- // Calculate position classes for logo
- const logoPositionClasses = {
- left: 'justify-start pl-16',
- center: 'justify-center',
- right: 'justify-end pr-16'
- }
+ // Calculate position classes for logo
+ const logoPositionClasses = {
+ left: 'justify-start pl-16',
+ center: 'justify-center',
+ right: 'justify-end pr-16',
+ }
- return (
-
- {/* Hero background image */}
-
+ {/* Hero background image */}
+
-
- )}
-
- )
+ {/* Optional logo overlay */}
+ {logoSrc && (
+
+
+ )}
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/SupportArticleList.tsx b/app/[lang]/(resources)/_components/SupportArticleList.tsx
index ce9a4c9..8ca0300 100644
--- a/app/[lang]/(resources)/_components/SupportArticleList.tsx
+++ b/app/[lang]/(resources)/_components/SupportArticleList.tsx
@@ -18,129 +18,118 @@
** - Add custom empty state message if needed
************************************************************************************************/
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
import ReactPaginate from 'react-paginate'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {useFetchSupportArticles} from '@/app/[lang]/_hooks/useFetchSupportArticles'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {IconDocs} from '@/app/[lang]/_icons/IconDocs'
-import {cl} from '@/app/[lang]/_utils/cl'
-import {RESOURCES_DICT} from '@/app/[lang]/_utils/dictionary/resources'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { useFetchSupportArticles } from '@/app/[lang]/_hooks/useFetchSupportArticles'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { IconDocs } from '@/app/[lang]/_icons/IconDocs'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { RESOURCES_DICT } from '@/app/[lang]/_utils/dictionary/resources'
-import {SupportArticleListSkeleton} from './SupportArticleListSkeleton'
-import {DEFAULT_PAGINATION} from '../_utils/constants'
+import { SupportArticleListSkeleton } from './SupportArticleListSkeleton'
+import { DEFAULT_PAGINATION } from '../_utils/constants'
-import type {TSupportArticle} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TSupportArticle } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
type TSupportArticleListProps = {
- pageSize?: number;
- sort?: 'asc' | 'desc';
- initialPage?: number;
- populateContent?: boolean;
- cacheArticles?: boolean;
- emptyMessage?: string;
- gridClassName?: string;
-};
+ pageSize?: number
+ sort?: 'asc' | 'desc'
+ initialPage?: number
+ populateContent?: boolean
+ cacheArticles?: boolean
+ emptyMessage?: string
+ gridClassName?: string
+}
export function SupportArticleList({
- pageSize = DEFAULT_PAGINATION.PAGE_SIZE,
- sort = DEFAULT_PAGINATION.SORT,
- initialPage = DEFAULT_PAGINATION.INITIAL_PAGE,
- populateContent = true,
- cacheArticles = true,
- emptyMessage = RESOURCES_DICT.support.emptyMessage,
- gridClassName
+ pageSize = DEFAULT_PAGINATION.PAGE_SIZE,
+ sort = DEFAULT_PAGINATION.SORT,
+ initialPage = DEFAULT_PAGINATION.INITIAL_PAGE,
+ populateContent = true,
+ cacheArticles = true,
+ emptyMessage = RESOURCES_DICT.support.emptyMessage,
+ gridClassName,
}: TSupportArticleListProps): ReactNode {
- const [page, setPage] = useState(initialPage)
- const {articles, pagination, isLoading} = useFetchSupportArticles({
- page,
- pageSize,
- sort,
- populateContent,
- cacheArticles
- })
+ const [page, setPage] = useState(initialPage)
+ const { articles, pagination, isLoading } = useFetchSupportArticles({
+ page,
+ pageSize,
+ sort,
+ populateContent,
+ cacheArticles,
+ })
- // Loading skeleton
- if (isLoading) {
- return
-
-
-
{RESOURCES_DICT.support.title}
-
- {RESOURCES_DICT.support.description}
-
-
+ return (
+
+
+
+
{RESOURCES_DICT.support.title}
+
{RESOURCES_DICT.support.description}
+
- {/* Empty state */}
- {!articles || articles.length === 0 ? (
-
- {emptyMessage}
-
- ) : (
- /* Articles grid */
-
- {articles.map((article: TSupportArticle) => (
-
-
-
- {article.title}
-
- ))}
-
- )}
+ {/* Empty state */}
+ {!articles || articles.length === 0 ? (
+
+ {emptyMessage}
+
+ ) : (
+ /* Articles grid */
+
+ {articles.map((article: TSupportArticle) => (
+
+
+
+ {article.title}
+
+ ))}
+
+ )}
- {/* Pagination controls */}
- {pagination && pagination.pageCount > 1 && (
-
setPage(selected + 1)}
- containerClassName={'flex gap-2 items-center justify-center mb-12'}
- pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
- pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
- activeClassName={'!opacity-100'}
- previousClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === 1 ? 'opacity-20' : 'opacity-100'
- )}
- previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
- )}
- disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
- disabledLinkClassName={'cursor-not-allowed'}
- previousLabel={ setPage(selected + 1)}
+ containerClassName={'flex gap-2 items-center justify-center mb-12'}
+ pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+ pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ activeClassName={'!opacity-100'}
+ previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+ previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextClassName={cl(
+ 'hover:opacity-100 transition-opacity',
+ page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+ )}
+ disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+ disabledLinkClassName={'cursor-not-allowed'}
+ previousLabel={
-
-
- )
+ {/* Banner */}
+
+
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/SupportArticleListSkeleton.tsx b/app/[lang]/(resources)/_components/SupportArticleListSkeleton.tsx
index e8dbae5..650892a 100644
--- a/app/[lang]/(resources)/_components/SupportArticleListSkeleton.tsx
+++ b/app/[lang]/(resources)/_components/SupportArticleListSkeleton.tsx
@@ -1,51 +1,49 @@
-import {Fragment} from 'react'
+import { Fragment } from 'react'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {RESOURCES_DICT} from '@/app/[lang]/_utils/dictionary/resources'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { RESOURCES_DICT } from '@/app/[lang]/_utils/dictionary/resources'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
type TSupportArticleListSkeletonProps = {
- pageSize?: number;
-};
+ pageSize?: number
+}
-export function SupportArticleListSkeleton({pageSize = 6}: TSupportArticleListSkeletonProps): ReactNode {
- return (
-
-
- {/* Header */}
-
-
{RESOURCES_DICT.support.title}
-
{RESOURCES_DICT.support.description}
-
+export function SupportArticleListSkeleton({ pageSize = 6 }: TSupportArticleListSkeletonProps): ReactNode {
+ return (
+
+
+ {/* Header */}
+
+
{RESOURCES_DICT.support.title}
+
{RESOURCES_DICT.support.description}
+
- {/* Articles grid skeleton */}
-
- {Array.from({length: pageSize}).map((_, i) => (
-
- ))}
-
+ {/* Articles grid skeleton */}
+
+ {Array.from({ length: pageSize }).map((_, i) => (
+
+ ))}
+
- {/* Pagination skeleton */}
-
+ {/* Pagination skeleton */}
+
- {/* Banner */}
-
-
-
- )
+ {/* Banner */}
+
+
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/SupportedWalletAccelerate.tsx b/app/[lang]/(resources)/_components/SupportedWalletAccelerate.tsx
index 179b528..5f9f68e 100644
--- a/app/[lang]/(resources)/_components/SupportedWalletAccelerate.tsx
+++ b/app/[lang]/(resources)/_components/SupportedWalletAccelerate.tsx
@@ -1,74 +1,69 @@
-import {IconBorrow} from '@/app/[lang]/_icons/IconBorrow'
-import {IconEarn} from '@/app/[lang]/_icons/IconEarn'
-import {IconGlobe} from '@/app/[lang]/_icons/IconGlobe'
-import {IconKey} from '@/app/[lang]/_icons/IconKey'
-import {IconShield} from '@/app/[lang]/_icons/IconShield'
-import {IconTrade} from '@/app/[lang]/_icons/IconTrade'
+import { IconBorrow } from '@/app/[lang]/_icons/IconBorrow'
+import { IconEarn } from '@/app/[lang]/_icons/IconEarn'
+import { IconGlobe } from '@/app/[lang]/_icons/IconGlobe'
+import { IconKey } from '@/app/[lang]/_icons/IconKey'
+import { IconShield } from '@/app/[lang]/_icons/IconShield'
+import { IconTrade } from '@/app/[lang]/_icons/IconTrade'
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
const ACCELERATE_WITH_SHAPESHIFT_DATA = [
- {
- title: 'Trade',
- description:
- 'Swap 10,000+ EVM assets like ETH, stablecoins, and tokens on Arbitrum, Base, Polygon, and BNB Chain with the best rates through ShapeShift’s aggregator.',
- icon: (props: SVGProps) => ) => ) => ) => ) => ) => ) => ) => ) => ) => ) => ) =>
-
- {'Accelerate with ShapeShift'}
-
- {ACCELERATE_WITH_SHAPESHIFT_DATA.map(action => (
-
-
- {action.icon({className: 'size-5'})}
-
+ return (
+
+
+ {'Accelerate with ShapeShift'}
+
+ {ACCELERATE_WITH_SHAPESHIFT_DATA.map((action) => (
+
+
+ {action.icon({ className: 'size-5' })}
+
-
-
{action.title}
-
{action.description}
-
-
- ))}
-
-
- )
+
+
{action.title}
+
{action.description}
+
+
+ ))}
+
+
-
- {data.items.map(item => (
-
- {item}
-
- ))}
-
-
- {`ShapeShift supports ${data.title}`}
-
-
- {data.description}
-
-
- )
+ return (
+
+
+ {data.items.map((item) => (
+
+ {item}
+
+ ))}
+
+
{`ShapeShift supports ${data.title}`}
+
+ {data.description}
+
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/SupportedWalletHero.tsx b/app/[lang]/(resources)/_components/SupportedWalletHero.tsx
index 247a90e..994a0f7 100644
--- a/app/[lang]/(resources)/_components/SupportedWalletHero.tsx
+++ b/app/[lang]/(resources)/_components/SupportedWalletHero.tsx
@@ -1,27 +1,20 @@
import Image from 'next/image'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
-export function SupportedWalletHero(props: {url: string; width: number; height: number; name: string}): ReactNode {
- return (
-
- )
+export function SupportedWalletHero(props: { url: string; width: number; height: number; name: string }): ReactNode {
+ return (
+
+ )
}
diff --git a/app/[lang]/(resources)/_components/WalletList.tsx b/app/[lang]/(resources)/_components/WalletList.tsx
index 677fd32..dad1fca 100644
--- a/app/[lang]/(resources)/_components/WalletList.tsx
+++ b/app/[lang]/(resources)/_components/WalletList.tsx
@@ -16,41 +16,39 @@
** - Pass wallets data and optional loading state
************************************************************************************************/
-import {ResourceCard} from './ResourceCard'
-import {ResourceGrid} from './ResourceGrid'
+import { ResourceCard } from './ResourceCard'
+import { ResourceGrid } from './ResourceGrid'
-import type {TSupportedWalletData} from '@/app/[lang]/_components/strapi/types'
+import type { TSupportedWalletData } from '@/app/[lang]/_components/strapi/types'
type TWalletListProps = {
- wallets: TSupportedWalletData[] | null;
- isLoading?: boolean;
- className?: string;
- isSearchQuery?: boolean;
-};
+ wallets: TSupportedWalletData[] | null
+ isLoading?: boolean
+ className?: string
+ isSearchQuery?: boolean
+}
-export function WalletList({wallets, isLoading, className, isSearchQuery}: TWalletListProps): JSX.Element {
- return (
- (
- (
+ {
- try {
- const response = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-protocols?populate=*&pagination[page]=1&pagination[pageSize]=500`,
- apiConfig
- )
-
- if (!response.ok) {
- console.error(`Failed to fetch protocols: ${response.status}`)
- return null
- }
-
- const data = await response.json()
- return data.data || null
- } catch (error) {
- console.error('Error fetching protocols:', error instanceof Error ? error.message : String(error))
- return null
- }
+ try {
+ const response = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-protocols?populate=*&pagination[page]=1&pagination[pageSize]=500`,
+ apiConfig
+ )
+
+ if (!response.ok) {
+ console.error(`Failed to fetch protocols: ${response.status}`)
+ return null
+ }
+
+ const data = await response.json()
+ return data.data || null
+ } catch (error) {
+ console.error('Error fetching protocols:', error instanceof Error ? error.message : String(error))
+ return null
+ }
}
/************************************************************************************************
@@ -64,23 +64,23 @@ export async function fetchAllProtocols(): Promise {
- try {
- const response = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-chains?populate=*&pagination[page]=1&pagination[pageSize]=500`,
- apiConfig
- )
-
- if (!response.ok) {
- console.error(`Failed to fetch chains: ${response.status}`)
- return null
- }
-
- const data = await response.json()
- return data.data || null
- } catch (error) {
- console.error('Error fetching chains:', error instanceof Error ? error.message : String(error))
- return null
- }
+ try {
+ const response = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-chains?populate=*&pagination[page]=1&pagination[pageSize]=500`,
+ apiConfig
+ )
+
+ if (!response.ok) {
+ console.error(`Failed to fetch chains: ${response.status}`)
+ return null
+ }
+
+ const data = await response.json()
+ return data.data || null
+ } catch (error) {
+ console.error('Error fetching chains:', error instanceof Error ? error.message : String(error))
+ return null
+ }
}
/************************************************************************************************
@@ -89,23 +89,23 @@ export async function fetchAllChains(): Promise {
* @returns Promise resolving to array of wallet data or null if error
************************************************************************************************/
export async function fetchAllWallets(): Promise {
- try {
- const response = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-wallets?populate=*&pagination[page]=1&pagination[pageSize]=500`,
- apiConfig
- )
-
- if (!response.ok) {
- console.error(`Failed to fetch wallets: ${response.status}`)
- return null
- }
-
- const data = await response.json()
- return data.data || null
- } catch (error) {
- console.error('Error fetching wallets:', error instanceof Error ? error.message : String(error))
- return null
- }
+ try {
+ const response = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-wallets?populate=*&pagination[page]=1&pagination[pageSize]=500`,
+ apiConfig
+ )
+
+ if (!response.ok) {
+ console.error(`Failed to fetch wallets: ${response.status}`)
+ return null
+ }
+
+ const data = await response.json()
+ return data.data || null
+ } catch (error) {
+ console.error('Error fetching wallets:', error instanceof Error ? error.message : String(error))
+ return null
+ }
}
/************************************************************************************************
@@ -115,26 +115,26 @@ export async function fetchAllWallets(): Promise
* @returns Promise resolving to discover data or null if not found
************************************************************************************************/
export async function fetchDiscoverBySlug(slug: string): Promise {
- try {
- const response = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/discovers?filters[slug][$eq]=${slug}&populate[0]=features&fields[1]=title&fields[2]=description&populate[3]=featuredImg&populate[4]=features.image&fields[5]=tag&populate[6]=features.buttonCta&pagination[page]=1&pagination[pageSize]=500`,
- apiConfig
- )
-
- if (!response.ok) {
- console.error(`Failed to fetch discover data for slug "${slug}": ${response.status}`)
- return null
- }
-
- const data = await response.json()
- return data.data?.[0] || null
- } catch (error) {
- console.error(
- `Error fetching discover data for slug "${slug}":`,
- error instanceof Error ? error.message : String(error)
- )
- return null
- }
+ try {
+ const response = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/discovers?filters[slug][$eq]=${slug}&populate[0]=features&fields[1]=title&fields[2]=description&populate[3]=featuredImg&populate[4]=features.image&fields[5]=tag&populate[6]=features.buttonCta&pagination[page]=1&pagination[pageSize]=500`,
+ apiConfig
+ )
+
+ if (!response.ok) {
+ console.error(`Failed to fetch discover data for slug "${slug}": ${response.status}`)
+ return null
+ }
+
+ const data = await response.json()
+ return data.data?.[0] || null
+ } catch (error) {
+ console.error(
+ `Error fetching discover data for slug "${slug}":`,
+ error instanceof Error ? error.message : String(error)
+ )
+ return null
+ }
}
/************************************************************************************************
@@ -143,21 +143,21 @@ export async function fetchDiscoverBySlug(slug: string): Promise {
- try {
- const response = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/faq?populate[faqSection][populate][faqSectionItem][populate]=*&pagination[page]=1&pagination[pageSize]=500`,
- apiConfig
- )
-
- if (!response.ok) {
- console.error(`Failed to fetch FAQ data: ${response.status}`)
- return null
- }
-
- const data = await response.json()
- return data.data || null
- } catch (error) {
- console.error('Error fetching FAQ data:', error instanceof Error ? error.message : String(error))
- return null
- }
+ try {
+ const response = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/faq?populate[faqSection][populate][faqSectionItem][populate]=*&pagination[page]=1&pagination[pageSize]=500`,
+ apiConfig
+ )
+
+ if (!response.ok) {
+ console.error(`Failed to fetch FAQ data: ${response.status}`)
+ return null
+ }
+
+ const data = await response.json()
+ return data.data || null
+ } catch (error) {
+ console.error('Error fetching FAQ data:', error instanceof Error ? error.message : String(error))
+ return null
+ }
}
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/BlogBreadcrumb.tsx b/app/[lang]/(resources)/blog/(withNavigation)/BlogBreadcrumb.tsx
index bb072b7..d656ab8 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/BlogBreadcrumb.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/BlogBreadcrumb.tsx
@@ -1,10 +1,10 @@
'use client'
-import {usePathname} from 'next/navigation'
+import { usePathname } from 'next/navigation'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {IconBack} from '@/app/[lang]/_icons/IconBack'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { IconBack } from '@/app/[lang]/_icons/IconBack'
+import { cl } from '@/app/[lang]/_utils/cl'
/********************************************************************************************
* Blog Breadcrumb Navigation Component
@@ -13,17 +13,18 @@ import {cl} from '@/app/[lang]/_utils/cl'
* Automatically hides when on the main blog page.
********************************************************************************************/
export function BlogBreadcrumb(): React.ReactNode {
- const pathname = usePathname()
+ const pathname = usePathname()
- return (
-
- {'Back to blog'}
-
- )
+ return (
+
+ {'Back to blog'}
+
+ )
}
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/BlogNav.tsx b/app/[lang]/(resources)/blog/(withNavigation)/BlogNav.tsx
index b3d695e..55c3d77 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/BlogNav.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/BlogNav.tsx
@@ -1,40 +1,40 @@
'use client'
-import {useParams, usePathname} from 'next/navigation'
+import { useParams, usePathname } from 'next/navigation'
-import {TabItem} from '@/app/[lang]/_components/TabItem'
-import {blogTags, blogTypes} from '@/app/[lang]/_utils/constants'
+import { TabItem } from '@/app/[lang]/_components/TabItem'
+import { blogTags, blogTypes } from '@/app/[lang]/_utils/constants'
export function BlogNav(): React.ReactNode {
- const pathname = usePathname()
- const params = useParams()
- const category = (params.category as string) || ''
- const tag = (params.tag as string) || ''
+ const pathname = usePathname()
+ const params = useParams()
+ const category = (params.category as string) || ''
+ const tag = (params.tag as string) || ''
- if (tag || pathname.includes('/tags')) {
- return (
-
- {blogTags.map(tab => (
-
- )
- }
- return (
-
- {blogTypes.map(tab => (
-
- )
+ if (tag || pathname.includes('/tags')) {
+ return (
+
+ {blogTags.map((tab) => (
+
+ )
+ }
+ return (
+
+ {blogTypes.map((tab) => (
+
+ )
}
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/BlogTitle.tsx b/app/[lang]/(resources)/blog/(withNavigation)/BlogTitle.tsx
index 9b14707..3129225 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/BlogTitle.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/BlogTitle.tsx
@@ -1,46 +1,46 @@
'use client'
-import {useParams, usePathname} from 'next/navigation'
+import { useParams, usePathname } from 'next/navigation'
-import {blogTypesSlugToCategory} from '@/app/[lang]/_utils/constants'
+import { blogTypesSlugToCategory } from '@/app/[lang]/_utils/constants'
export function BlogTitle(): React.ReactNode {
- const pathname = usePathname()
- const params = useParams()
- const category = (params.category as string) || ''
- const tag = (params.tag as string) || ''
+ const pathname = usePathname()
+ const params = useParams()
+ const category = (params.category as string) || ''
+ const tag = (params.tag as string) || ''
- if (tag || pathname.includes('/tags')) {
- if (tag) {
- return (
-
- {'Tagged: '}
- {tag}
-
- )
- }
- return (
-
- {'All '}
- {'tags'}
-
- )
- }
+ if (tag || pathname.includes('/tags')) {
+ if (tag) {
+ return (
+
+ {'Tagged: '}
+ {tag}
+
+ )
+ }
+ return (
+
+ {'All '}
+ {'tags'}
+
+ )
+ }
- if (category) {
- return (
-
- {'Category: '}
- {blogTypesSlugToCategory(category)}
-
- )
- }
- return (
-
- {'ShapeShift'}
-
- {'Blog'}
- {'.'}
-
- )
+ if (category) {
+ return (
+
+ {'Category: '}
+ {blogTypesSlugToCategory(category)}
+
+ )
+ }
+ return (
+
+ {'ShapeShift'}
+
+ {'Blog'}
+ {'.'}
+
+ )
}
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts.tsx b/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts.tsx
index 045d044..a363d0d 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts.tsx
@@ -18,22 +18,16 @@
'use client'
-import {PostList} from '@/app/[lang]/(resources)/_components/PostList'
-import {blogTypesSlugToCategory} from '@/app/[lang]/_utils/constants'
+import { PostList } from '@/app/[lang]/(resources)/_components/PostList'
+import { blogTypesSlugToCategory } from '@/app/[lang]/_utils/constants'
-import type {ReactElement} from 'react'
+import type { ReactElement } from 'react'
-export function ListOfPosts({category}: {category: string}): ReactElement {
- // Convert URL slug to proper category type for the API
- const categoryType = blogTypesSlugToCategory(category)
+export function ListOfPosts({ category }: { category: string }): ReactElement {
+ // Convert URL slug to proper category type for the API
+ const categoryType = blogTypesSlugToCategory(category)
- // Format category name for display (capitalize first letter)
- const formattedCategory = category.charAt(0).toUpperCase() + category.slice(1)
-
- return (
- {
- const {category} = await props.params
- const data = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[type][$contains]=${category}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc&pagination[pageSize]=1`,
- {
- headers: {
- Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
- }
- }
- )
- const {data: posts} = await data.json()
+ const { category } = await props.params
- if (!posts) {
- return notFound()
- }
+ const data = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[type][$contains]=${category}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc&pagination[pageSize]=1`,
+ {
+ headers: {
+ Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+ },
+ }
+ )
- return {
- await props.params
+ await props.params
- return (
-
-
- )
+ return (
+
+
+ )
}
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/page.tsx b/app/[lang]/(resources)/blog/(withNavigation)/page.tsx
index 28891a3..dc62c87 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/page.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/page.tsx
@@ -18,10 +18,10 @@
'use client'
-import {PostList} from '@/app/[lang]/(resources)/_components/PostList'
+import { PostList } from '@/app/[lang]/(resources)/_components/PostList'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
export default function BlogListPage(): ReactNode {
- return
- {[...Array(PAGE_SIZE)].map((_, i) => (
-
- ))}
-
+ {[...Array(PAGE_SIZE)].map((_, i) => (
+
+ ))}
+
- {posts.length === 0 ? (
-
- {"We couldn't find any blog posts matching your criteria."}
-
- ) : (
-
- {posts.map((post: TBlogPost) => (
-
- )}
+ return (
+
+ {posts.length === 0 ? (
+
+ {"We couldn't find any blog posts matching your criteria."}
+
+ ) : (
+
+ {posts.map((post: TBlogPost) => (
+
+ )}
- setPage(selected + 1)}
- containerClassName={'flex gap-2 items-center justify-center mb-16'}
- pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
- pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
- activeClassName={'!opacity-100'}
- previousClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === 1 ? 'opacity-20' : 'opacity-100'
- )}
- previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
- )}
- disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
- disabledLinkClassName={'cursor-not-allowed'}
- previousLabel={ setPage(selected + 1)}
+ containerClassName={'flex gap-2 items-center justify-center mb-16'}
+ pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+ pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ activeClassName={'!opacity-100'}
+ previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+ previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextClassName={cl(
+ 'hover:opacity-100 transition-opacity',
+ page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+ )}
+ disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+ disabledLinkClassName={'cursor-not-allowed'}
+ previousLabel={
- )
+
+ )
}
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/page.tsx b/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/page.tsx
index 771a761..f6c3cc4 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/page.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/page.tsx
@@ -1,22 +1,22 @@
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
-import {ListOfPosts} from '@/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/ListOfPosts'
+import { ListOfPosts } from '@/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/ListOfPosts'
-export default async function BlogTagsPage(props: {params: Promise<{tag: string}>}): Promise {
- const {tag} = await props.params
- const data = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[tags][$contains]=${tag}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc`,
- {
- headers: {
- Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
- }
- }
- )
- const {data: posts} = await data.json()
+export default async function BlogTagsPage(props: { params: Promise<{ tag: string }> }): Promise {
+ const { tag } = await props.params
+ const data = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[tags][$contains]=${tag}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc`,
+ {
+ headers: {
+ Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+ },
+ }
+ )
+ const { data: posts } = await data.json()
- if (!posts) {
- return notFound()
- }
+ if (!posts) {
+ return notFound()
+ }
- return
- {[...Array(PAGE_SIZE)].map((_, i) => (
-
- ))}
-
+ {[...Array(PAGE_SIZE)].map((_, i) => (
+
+ ))}
+
- {posts.length === 0 ? (
-
- {"We couldn't find any blog posts matching your criteria."}
-
- ) : (
-
- {posts.map(post => (
-
- )}
- setPage(selected + 1)}
- containerClassName={'flex gap-2 items-center justify-center'}
- pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
- pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
- activeClassName={'!opacity-100'}
- previousClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === 1 ? 'opacity-20' : 'opacity-100'
- )}
- previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
- )}
- disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
- disabledLinkClassName={'cursor-not-allowed'}
- previousLabel={
- )
+ return (
+
+ {posts.length === 0 ? (
+
+ {"We couldn't find any blog posts matching your criteria."}
+
+ ) : (
+
+ {posts.map((post) => (
+
+ )}
+ setPage(selected + 1)}
+ containerClassName={'flex gap-2 items-center justify-center'}
+ pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+ pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ activeClassName={'!opacity-100'}
+ previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+ previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextClassName={cl(
+ 'hover:opacity-100 transition-opacity',
+ page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+ )}
+ disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+ disabledLinkClassName={'cursor-not-allowed'}
+ previousLabel={
+ )
}
diff --git a/app/[lang]/(resources)/blog/README.md b/app/[lang]/(resources)/blog/README.md
index 3607abc..9eb9600 100644
--- a/app/[lang]/(resources)/blog/README.md
+++ b/app/[lang]/(resources)/blog/README.md
@@ -5,20 +5,20 @@ This directory contains the blog section of the ShapeShift website, featuring bl
## Directory Structure
- **(withNavigation)/**: Blog pages that include navigation elements
- - **BlogBreadcrumb.tsx**: Breadcrumb navigation for blog
- - **BlogNav.tsx**: Main navigation for blog section
- - **BlogTitle.tsx**: Title component for blog section
- - **categories/**: Category-based blog post filtering
- - **[category]/**: Dynamic routes for individual categories
- - **tags/**: Tag-based blog post filtering
- - **[tag]/**: Dynamic routes for individual tags
- - **layout.tsx**: Layout for blog pages with navigation
- - **page.tsx**: Main blog landing page
+ - **BlogBreadcrumb.tsx**: Breadcrumb navigation for blog
+ - **BlogNav.tsx**: Main navigation for blog section
+ - **BlogTitle.tsx**: Title component for blog section
+ - **categories/**: Category-based blog post filtering
+ - **[category]/**: Dynamic routes for individual categories
+ - **tags/**: Tag-based blog post filtering
+ - **[tag]/**: Dynamic routes for individual tags
+ - **layout.tsx**: Layout for blog pages with navigation
+ - **page.tsx**: Main blog landing page
- **[slug]/**: Individual blog post pages
- - **BlogContent.tsx**: Component for rendering blog post content
- - **BlogSkeleton.tsx**: Loading skeleton for blog posts
- - **layout.tsx**: Layout for individual blog posts
- - **page.tsx**: Page component for individual blog posts
+ - **BlogContent.tsx**: Component for rendering blog post content
+ - **BlogSkeleton.tsx**: Loading skeleton for blog posts
+ - **layout.tsx**: Layout for individual blog posts
+ - **page.tsx**: Page component for individual blog posts
## Features
@@ -51,4 +51,4 @@ This directory contains the blog section of the ShapeShift website, featuring bl
- Test loading states and error handling
- Consider performance optimizations for image-heavy blog posts
- Ensure responsive design works across all device sizes
-- Preserve consistent typography and styling
\ No newline at end of file
+- Preserve consistent typography and styling
diff --git a/app/[lang]/(resources)/blog/[slug]/BlogContent.tsx b/app/[lang]/(resources)/blog/[slug]/BlogContent.tsx
index 17d52a3..1dc6c7e 100644
--- a/app/[lang]/(resources)/blog/[slug]/BlogContent.tsx
+++ b/app/[lang]/(resources)/blog/[slug]/BlogContent.tsx
@@ -5,215 +5,167 @@ import rehypeHighlight from 'rehype-highlight'
import remarkEmoji from 'remark-emoji' // For emoji support
import remarkGfm from 'remark-gfm'
-import {isHtml} from '@/app/[lang]/_utils/isHtml'
-
-import type {ReactNode} from 'react'
-
-export function BlogContent({content}: {content: string}): ReactNode {
- return (
-
- {isHtml(content) ? (
-
- ) : (
-
(
-
-
{match[1]}
-
-
- {children}
-
-
-
- {children}
-
- )
- },
-
- // Tables
- table: ({...props}) => (
-
- ),
- th: ({...props}) => (
-
- )
- }}>
- {content}
-
- )}
-
-
-
+ {isHtml(content) ? (
+
+ ) : (
+
+
{match[1]}
+
+
+ {children}
+
+
+
+ {children}
+
+ )
+ },
+
+ // Tables
+ table: ({ ...props }) => (
+
+ ),
+ th: ({ ...props }) =>
,
+ }}
+ >
+ {content}
+
+ )}
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
- const {slug} = await params
- const data = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[slug][$eq]=${slug}&fields[0]=summary&fields[2]=tags&fields[3]=title&fields[4]=publishedAt&populate[0]=featuredImg`,
- {
- headers: {
- Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
- }
- }
- ).then(async res => res.json())
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise {
+ const { slug } = await params
+ const data = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[slug][$eq]=${slug}&fields[0]=summary&fields[2]=tags&fields[3]=title&fields[4]=publishedAt&populate[0]=featuredImg`,
+ {
+ headers: {
+ Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+ },
+ }
+ ).then(async (res) => res.json())
- const post = data.data[0]
+ const post = data.data[0]
- if (!post) {
- return notFound()
- }
+ if (!post) {
+ return notFound()
+ }
- const imageUrl = post.featuredImg?.formats?.thumbnail?.url || post.featuredImg?.url
- const metadata: Metadata = {
- title: `${post.title} | ShapeShift Blog`,
- description: post.summary || `Read ${post.title} on ShapeShift Blog`,
- keywords: Array.isArray(post.tags) ? post.tags.join(', ') : post.tags,
- openGraph: {
- title: post.title,
- description: post.summary,
- type: 'article',
- publishedTime: post.publishedAt,
- authors: ['ShapeShift'],
- tags: Array.isArray(post.tags) ? post.tags : [post.tags]
- },
- twitter: {
- card: 'summary_large_image',
- title: post.title,
- description: post.summary || `Read ${post.title} on ShapeShift Blog`
- }
- }
+ const imageUrl = post.featuredImg?.formats?.thumbnail?.url || post.featuredImg?.url
+ const metadata: Metadata = {
+ title: `${post.title} | ShapeShift Blog`,
+ description: post.summary || `Read ${post.title} on ShapeShift Blog`,
+ keywords: Array.isArray(post.tags) ? post.tags.join(', ') : post.tags,
+ openGraph: {
+ title: post.title,
+ description: post.summary,
+ type: 'article',
+ publishedTime: post.publishedAt,
+ authors: ['ShapeShift'],
+ tags: Array.isArray(post.tags) ? post.tags : [post.tags],
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: post.title,
+ description: post.summary || `Read ${post.title} on ShapeShift Blog`,
+ },
+ }
- if (imageUrl) {
- metadata.openGraph!.images = [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
- }
- ]
- metadata.twitter!.images = [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
- }
- ]
- }
+ if (imageUrl) {
+ metadata.openGraph!.images = [
+ {
+ url: getStrapiImageUrl(imageUrl),
+ },
+ ]
+ metadata.twitter!.images = [
+ {
+ url: getStrapiImageUrl(imageUrl),
+ },
+ ]
+ }
- return metadata
+ return metadata
}
-export default function BlogPostLayout({children}: {children: React.ReactNode}): React.ReactNode {
- return children
+export default function BlogPostLayout({ children }: { children: React.ReactNode }): React.ReactNode {
+ return children
}
diff --git a/app/[lang]/(resources)/blog/[slug]/page.tsx b/app/[lang]/(resources)/blog/[slug]/page.tsx
index 588a90d..c5ca821 100644
--- a/app/[lang]/(resources)/blog/[slug]/page.tsx
+++ b/app/[lang]/(resources)/blog/[slug]/page.tsx
@@ -1,92 +1,88 @@
'use client'
import 'highlight.js/styles/github-dark.css'
-import {notFound, useParams, useRouter} from 'next/navigation'
+import { notFound, useParams, useRouter } from 'next/navigation'
import Script from 'next/script'
-import {BlogContent} from '@/app/[lang]/(resources)/blog/[slug]/BlogContent'
-import {BlogSkeleton} from '@/app/[lang]/(resources)/blog/[slug]/BlogSkeleton'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {useCachedPosts} from '@/app/[lang]/_contexts/CachedPostsContext'
-import {useFetchPosts} from '@/app/[lang]/_hooks/useFetchPosts'
-import {IconBack} from '@/app/[lang]/_icons/IconBack'
-import {generateBlogPostSchema} from '@/app/[lang]/_utils/schema'
+import { BlogContent } from '@/app/[lang]/(resources)/blog/[slug]/BlogContent'
+import { BlogSkeleton } from '@/app/[lang]/(resources)/blog/[slug]/BlogSkeleton'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { useCachedPosts } from '@/app/[lang]/_contexts/CachedPostsContext'
+import { useFetchPosts } from '@/app/[lang]/_hooks/useFetchPosts'
+import { IconBack } from '@/app/[lang]/_icons/IconBack'
+import { generateBlogPostSchema } from '@/app/[lang]/_utils/schema'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
export default function BlogPost(): ReactNode {
- const {slug} = useParams()
+ const { slug } = useParams()
- const {
- cachedResponse: {data: cachedPosts}
- } = useCachedPosts()
- const {posts, isLoading} = useFetchPosts({
- page: 1,
- pageSize: 1,
- sort: 'desc',
- populateContent: true,
- cachePosts: true,
- slug: slug as string,
- skip: !!cachedPosts.find(p => p.slug === slug)
- })
+ const {
+ cachedResponse: { data: cachedPosts },
+ } = useCachedPosts()
+ const { posts, isLoading } = useFetchPosts({
+ page: 1,
+ pageSize: 1,
+ sort: 'desc',
+ populateContent: true,
+ cachePosts: true,
+ slug: slug as string,
+ skip: !!cachedPosts.find((p) => p.slug === slug),
+ })
- const post = [...cachedPosts, ...posts].find(p => p.slug === slug)
- const router = useRouter()
+ const post = [...cachedPosts, ...posts].find((p) => p.slug === slug)
+ const router = useRouter()
- if (isLoading) {
- return
- router.back()}>
- {'Back'}
-
-
- {new Date(post.publishedAt).toLocaleDateString()}
-
+
+ router.back()}
+ >
+ {'Back'}
+
+ {new Date(post.publishedAt).toLocaleDateString()}
-
- {post.tags.map((tag: string, index: number) => (
-
- {`#${tag}`}
-
- ))}
-
-
- {post.title || post.slug.replace(/-/g, ' ')}
-
-
- {!isLoading && (
-
-
- )}
-
- )
+
+ {post.tags.map((tag: string, index: number) => (
+
+ {`#${tag}`}
+
+ ))}
+
+
+ {post.title || post.slug.replace(/-/g, ' ')}
+
+
+ {!isLoading && (
+
+
+ )}
+
+ )
}
diff --git a/app/[lang]/(resources)/chains/README.md b/app/[lang]/(resources)/chains/README.md
index 66be42a..82bdb86 100644
--- a/app/[lang]/(resources)/chains/README.md
+++ b/app/[lang]/(resources)/chains/README.md
@@ -5,7 +5,7 @@ This directory contains pages that showcase and document the blockchain networks
## Directory Structure
- **[slug]/**: Dynamic routes for individual chain pages
- - **page.tsx**: Page component for individual chain details
+ - **page.tsx**: Page component for individual chain details
- **layout.tsx**: Layout component for all supported chains pages
- **loading.tsx**: Loading state component for supported chains pages
- **page.tsx**: Main supported chains landing page
@@ -52,4 +52,4 @@ The chain pages utilize specialized components from the `_components` directory:
- Optimize for both technical and non-technical audiences
- Consider performance when loading chain-specific resources
- Ensure all chain information is properly categorized and searchable
-- Update content when chain support details change
\ No newline at end of file
+- Update content when chain support details change
diff --git a/app/[lang]/(resources)/chains/[slug]/page.tsx b/app/[lang]/(resources)/chains/[slug]/page.tsx
index 5feb84d..6b8cd18 100644
--- a/app/[lang]/(resources)/chains/[slug]/page.tsx
+++ b/app/[lang]/(resources)/chains/[slug]/page.tsx
@@ -1,125 +1,109 @@
import Image from 'next/image'
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {ChainActions} from '@/app/[lang]/_components/strapi/templates/ChainActions'
-import {ChainDescription} from '@/app/[lang]/_components/strapi/templates/ChainDescription'
-import {ChainFeatures} from '@/app/[lang]/_components/strapi/templates/ChainFeatures'
-import {ChainHeader} from '@/app/[lang]/_components/strapi/templates/ChainHeader'
-import {ChainHero} from '@/app/[lang]/_components/strapi/templates/ChainHero'
-import {getSupportedChain} from '@/app/[lang]/_utils/query'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { ChainActions } from '@/app/[lang]/_components/strapi/templates/ChainActions'
+import { ChainDescription } from '@/app/[lang]/_components/strapi/templates/ChainDescription'
+import { ChainFeatures } from '@/app/[lang]/_components/strapi/templates/ChainFeatures'
+import { ChainHeader } from '@/app/[lang]/_components/strapi/templates/ChainHeader'
+import { ChainHero } from '@/app/[lang]/_components/strapi/templates/ChainHero'
+import { getStrapiImageUrl, getSupportedChain } from '@/app/[lang]/_utils/query'
-import type {TSupportedChainData} from '@/app/[lang]/_components/strapi/types'
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { TSupportedChainData } from '@/app/[lang]/_components/strapi/types'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
-export async function generateMetadata({params}: {params: Promise<{slug: string}>}): Promise {
- const {slug} = await params
- if (!slug) {
- return notFound()
- }
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise {
+ const { slug } = await params
+ if (!slug) {
+ return notFound()
+ }
- const response = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-chains?filters[slug][$eq]=${slug}&populate=*`,
- {
- headers: {
- Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
- }
- }
- )
- const data = await response.json()
- const chain = data.data[0] as TSupportedChainData
- if (!chain) {
- return notFound()
- }
+ const response = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-chains?filters[slug][$eq]=${slug}&populate=*`,
+ {
+ headers: {
+ Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+ },
+ }
+ )
+ const data = await response.json()
+ const chain = data.data[0] as TSupportedChainData
+ if (!chain) {
+ return notFound()
+ }
- const imageUrl = chain.featuredImg?.formats?.thumbnail?.url || chain.featuredImg?.url
- const metadata: Metadata = {
- title: `${chain.name} | ShapeShift Chains`,
- description: `ShapeShift supports ${chain.name}! Use it now to buy, sell, and swap crypto.`,
- keywords: `${chain.name}, ShapeShift`,
- openGraph: {
- title: chain.name,
- description: `ShapeShift supports ${chain.name}! Use it now to buy, sell, and swap crypto.`,
- type: 'website'
- },
- twitter: {
- card: 'summary_large_image',
- title: chain.name,
- description: `ShapeShift supports ${chain.name}! Use it now to buy, sell, and swap crypto.`
- }
- }
+ const imageUrl = chain.featuredImg?.formats?.thumbnail?.url || chain.featuredImg?.url
+ const metadata: Metadata = {
+ title: `${chain.name} | ShapeShift Chains`,
+ description: `ShapeShift supports ${chain.name}! Use it now to buy, sell, and swap crypto.`,
+ keywords: `${chain.name}, ShapeShift`,
+ openGraph: {
+ title: chain.name,
+ description: `ShapeShift supports ${chain.name}! Use it now to buy, sell, and swap crypto.`,
+ type: 'website',
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: chain.name,
+ description: `ShapeShift supports ${chain.name}! Use it now to buy, sell, and swap crypto.`,
+ },
+ }
- if (imageUrl) {
- metadata.openGraph!.images = [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
- }
- ]
- metadata.twitter!.images = [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
- }
- ]
- }
+ if (imageUrl) {
+ metadata.openGraph!.images = [
+ {
+ url: getStrapiImageUrl(imageUrl),
+ },
+ ]
+ metadata.twitter!.images = [
+ {
+ url: getStrapiImageUrl(imageUrl),
+ },
+ ]
+ }
- return metadata
+ return metadata
}
-export default async function ChainPage({params}: {params: Promise<{slug: string}>}): Promise {
- const {slug} = await params
- const chain = await getSupportedChain(slug)
+export default async function ChainPage({ params }: { params: Promise<{ slug: string }> }): Promise {
+ const { slug } = await params
+ const chain = await getSupportedChain(slug)
- if (!chain) {
- return notFound()
- }
+ if (!chain) {
+ return notFound()
+ }
- return (
-
-
-
-
-
+ return (
+
+
+
+
+
-
-
-
+
+
+
-
-
+
+
-
-
+
+
-
-
-
-
- )
+
+
+
+
{
- return {
- title: 'Explore multiple chains with ShapeShift',
- description: 'Discover all the chains ShapeShift supports. Buy, sell, and swap crypto with ease.',
- keywords: 'ShapeShift, Supported Chains',
- openGraph: {
- title: 'Explore multiple chains with ShapeShift',
- description: 'Discover all the chains ShapeShift supports. Buy, sell, and swap crypto with ease.',
- type: 'website',
- images: [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
- }
- ]
- },
- twitter: {
- card: 'summary_large_image',
- title: 'Explore multiple chains with ShapeShift',
- description: 'Discover all the chains ShapeShift supports. Buy, sell, and swap crypto with ease.',
- images: [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
- }
- ]
- }
- }
+ return {
+ title: 'Explore multiple chains with ShapeShift',
+ description: 'Discover all the chains ShapeShift supports. Buy, sell, and swap crypto with ease.',
+ keywords: 'ShapeShift, Supported Chains',
+ openGraph: {
+ title: 'Explore multiple chains with ShapeShift',
+ description: 'Discover all the chains ShapeShift supports. Buy, sell, and swap crypto with ease.',
+ type: 'website',
+ images: [
+ {
+ url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+ },
+ ],
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: 'Explore multiple chains with ShapeShift',
+ description: 'Discover all the chains ShapeShift supports. Buy, sell, and swap crypto with ease.',
+ images: [
+ {
+ url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+ },
+ ],
+ },
+ }
}
-export default function Layout({children}: {children: ReactNode}): ReactNode {
- return children
+export default function Layout({ children }: { children: ReactNode }): ReactNode {
+ return children
}
diff --git a/app/[lang]/(resources)/chains/page.tsx b/app/[lang]/(resources)/chains/page.tsx
index bc3805c..41bc730 100644
--- a/app/[lang]/(resources)/chains/page.tsx
+++ b/app/[lang]/(resources)/chains/page.tsx
@@ -18,95 +18,92 @@
import Image from 'next/image'
-import {Button} from '@/app/[lang]/_components/Button'
-import {ChainsBanner} from '@/app/[lang]/_components/ChainsBanner'
-import {requestUrl} from '@/app/[lang]/_utils/constants'
+import { Button } from '@/app/[lang]/_components/Button'
+import { ChainsBanner } from '@/app/[lang]/_components/ChainsBanner'
+import { requestUrl } from '@/app/[lang]/_utils/constants'
-import {ResourceHeader} from '../_components/ResourceHeader'
-import {fetchAllChains} from '../_utils/fetchUtils'
-import {ChainSearchWrapper} from './_components/ChainSearchWrapper'
+import { ResourceHeader } from '../_components/ResourceHeader'
+import { fetchAllChains } from '../_utils/fetchUtils'
+import { ChainSearchWrapper } from './_components/ChainSearchWrapper'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
// Static content for the page
const pageContent = {
- title: 'Supported Chains',
- description:
- 'Explore all the blockchain networks integrated into the ShapeShift platform for seamless multi-chain access.',
- features: ['Multi-Chain Support', 'Self-Custody', 'Cross-Chain Trading'],
- ctaButton: {
- text: 'Get Started',
- url: 'https://app.shapeshift.com/'
- }
+ title: 'Supported Chains',
+ description:
+ 'Explore all the blockchain networks integrated into the ShapeShift platform for seamless multi-chain access.',
+ features: ['Multi-Chain Support', 'Self-Custody', 'Cross-Chain Trading'],
+ ctaButton: {
+ text: 'Get Started',
+ url: 'https://app.shapeshift.com/',
+ },
}
export default async function SupportedChainsPage(): Promise {
- // Fetch chains data
- const chains = await fetchAllChains()
+ // Fetch chains data
+ const chains = await fetchAllChains()
- // Handle loading and error states
- if (!chains) {
- return (
-
-
{'Unable to load chain data. Please try again later.'}
-
+
{'Unable to load chain data. Please try again later.'}
+
-
- {/* Reusable header component */}
-
+ return (
+
+
+ {/* Reusable header component */}
+
-
-
-
-
-
-
- {"Don't see your chain? Request it here"}
-
-
-
-
-
+
+
+
+
+
+
+ {"Don't see your chain? Request it here"}
+
+
+
+
+
- {/* Footer banner */}
-
-
-
-
- )
+ {/* Footer banner */}
+
+
+
+
{
- const {slug} = await params
- if (!slug) {
- return notFound()
- }
-
- // Fetch discover data
- const discover = await fetchDiscoverBySlug(slug)
- if (!discover) {
- return notFound()
- }
-
- // Get image URL for metadata
- const imageUrl = discover.featuredImg?.formats?.thumbnail?.url || discover.featuredImg?.url
-
- // Metadata with SEO optimization
- const metadata: Metadata = {
- title: `${discover.title} | Discover with ShapeShift`,
- description: `Discover ${discover.title} with ShapeShift!`,
- keywords: `${discover.title}, ShapeShift, discover, cryptocurrency`,
- openGraph: {
- title: discover.title,
- description: `Discover ${discover.title} with ShapeShift!`,
- type: 'website'
- },
- twitter: {
- card: 'summary_large_image',
- title: discover.title,
- description: `Discover ${discover.title} with ShapeShift!`
- }
- }
-
- if (imageUrl) {
- metadata.openGraph!.images = [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
- }
- ]
- metadata.twitter!.images = [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
- }
- ]
- }
-
- return metadata
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise {
+ const { slug } = await params
+ if (!slug) {
+ return notFound()
+ }
+
+ // Fetch discover data
+ const discover = await fetchDiscoverBySlug(slug)
+ if (!discover) {
+ return notFound()
+ }
+
+ // Get image URL for metadata
+ const imageUrl = discover.featuredImg?.formats?.thumbnail?.url || discover.featuredImg?.url
+
+ // Metadata with SEO optimization
+ const metadata: Metadata = {
+ title: `${discover.title} | Discover with ShapeShift`,
+ description: `Discover ${discover.title} with ShapeShift!`,
+ keywords: `${discover.title}, ShapeShift, discover, cryptocurrency`,
+ openGraph: {
+ title: discover.title,
+ description: `Discover ${discover.title} with ShapeShift!`,
+ type: 'website',
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: discover.title,
+ description: `Discover ${discover.title} with ShapeShift!`,
+ },
+ }
+
+ if (imageUrl) {
+ metadata.openGraph!.images = [
+ {
+ url: getStrapiImageUrl(imageUrl),
+ },
+ ]
+ metadata.twitter!.images = [
+ {
+ url: getStrapiImageUrl(imageUrl),
+ },
+ ]
+ }
+
+ return metadata
}
-export default async function DiscoverDetailPage({params}: {params: Promise<{slug: string}>}): Promise {
- // Extract slug from params
- const {slug} = await params
-
- // Fetch discover data using utility function
- const discover = await fetchDiscoverBySlug(slug)
-
- // Handle case when discover data is not found
- if (!discover) {
- console.error(`Discover page not found for slug: ${slug}`)
- return notFound()
- }
-
- // Map discover features to feature section format
- const features = discover.features.map(feature => ({
- id: feature.id,
- title: feature.title,
- description: feature.description,
- image: feature.image
- ? {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${feature.image.url}`,
- width: feature.image.width,
- height: feature.image.height,
- alt: feature.title
- }
- : undefined,
- buttonCta:
- feature.buttonCta &&
- typeof feature.buttonCta.url === 'string' &&
- /^(\/|https?:\/\/)/i.test(feature.buttonCta.url)
- ? {title: feature.buttonCta.title, url: feature.buttonCta.url}
- : undefined
- }))
-
- return (
-
-
- {/* Header section with feature badges */}
-
-
- {/* Hero banner with discover image */}
-
-
- {/* Features section */}
-
-
- {/* Footer banner */}
-
-
-
-
{
+ // Extract slug from params
+ const { slug } = await params
+
+ // Fetch discover data using utility function
+ const discover = await fetchDiscoverBySlug(slug)
+
+ // Handle case when discover data is not found
+ if (!discover) {
+ console.error(`Discover page not found for slug: ${slug}`)
+ return notFound()
+ }
+
+ // Map discover features to feature section format
+ const features = discover.features.map((feature) => ({
+ id: feature.id,
+ title: feature.title,
+ description: feature.description,
+ image: feature.image
+ ? {
+ url: getStrapiImageUrl(feature.image.url),
+ width: feature.image.width,
+ height: feature.image.height,
+ alt: feature.title,
+ }
+ : undefined,
+ buttonCta:
+ feature.buttonCta && typeof feature.buttonCta.url === 'string' && /^(\/|https?:\/\/)/i.test(feature.buttonCta.url)
+ ? { title: feature.buttonCta.title, url: feature.buttonCta.url }
+ : undefined,
+ }))
+
+ return (
+
+
+ {/* Header section with feature badges */}
+
+
+ {/* Hero banner with discover image */}
+
+
+ {/* Features section */}
+
+
+ {/* Footer banner */}
+
+
+
+
- )
+ /**********************************************************************************************
+ ** Group discover items by type for organized display
+ ** This reduces the array of discover items into an object where:
+ ** - Keys are the different types (categories) of discover items
+ ** - Values are arrays of items belonging to each type
+ *********************************************************************************************/
+ const groupedDiscover = filteredDiscover?.reduce(
+ (acc, item) => {
+ const type = item.type
+ if (!acc[type]) {
+ acc[type] = []
+ }
+ acc[type].push(item)
+ return acc
+ },
+ {} as Record
+ )
- return (
-
-
+ return (
+
+
- )
+ {groupedDiscover &&
+ Object.entries(groupedDiscover).map(([type, items]) => (
+
+ ))}
+
{
- return {
- title: 'Explore Web3 with ShapeShift',
- description: 'Discover the world of Web3 with ShapeShift.',
- keywords: 'ShapeShift, Explore Web3',
- openGraph: {
- title: 'Explore Web3 with ShapeShift',
- description: 'Discover the world of Web3 with ShapeShift.',
- type: 'website',
- images: [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
- }
- ]
- },
- twitter: {
- card: 'summary_large_image',
- title: 'Explore Web3 with ShapeShift',
- description: 'Discover the world of Web3 with ShapeShift.',
- images: [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
- }
- ]
- }
- }
+ return {
+ title: 'Explore Web3 with ShapeShift',
+ description: 'Discover the world of Web3 with ShapeShift.',
+ keywords: 'ShapeShift, Explore Web3',
+ openGraph: {
+ title: 'Explore Web3 with ShapeShift',
+ description: 'Discover the world of Web3 with ShapeShift.',
+ type: 'website',
+ images: [
+ {
+ url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+ },
+ ],
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: 'Explore Web3 with ShapeShift',
+ description: 'Discover the world of Web3 with ShapeShift.',
+ images: [
+ {
+ url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+ },
+ ],
+ },
+ }
}
-export default function Layout({children}: {children: ReactNode}): ReactNode {
- return children
+export default function Layout({ children }: { children: ReactNode }): ReactNode {
+ return children
}
diff --git a/app/[lang]/(resources)/discover/page.tsx b/app/[lang]/(resources)/discover/page.tsx
index c10214d..ce8f21b 100644
--- a/app/[lang]/(resources)/discover/page.tsx
+++ b/app/[lang]/(resources)/discover/page.tsx
@@ -1,35 +1,31 @@
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {Button} from '@/app/[lang]/_components/Button'
-import {RESOURCES_DICT} from '@/app/[lang]/_utils/dictionary/resources'
-import {getDiscovers} from '@/app/[lang]/_utils/query'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { Button } from '@/app/[lang]/_components/Button'
+import { RESOURCES_DICT } from '@/app/[lang]/_utils/dictionary/resources'
+import { getDiscovers } from '@/app/[lang]/_utils/query'
-import {DiscoverSearchWrapper} from './_components/DiscoverSearchWrapper'
+import { DiscoverSearchWrapper } from './_components/DiscoverSearchWrapper'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
export default async function DiscoverPage(): Promise {
- const discover = await getDiscovers()
+ const discover = await getDiscovers()
- return (
-
-
-
-
-
{RESOURCES_DICT.discover.title}
-
-
+ return (
+
+
+
+
+
{RESOURCES_DICT.discover.title}
+
+
-
+
-
-
-
-
- )
+
+
+
+
{
- // Fetch FAQ data using centralized utility
- const faqData = await fetchFaqData()
+ // Fetch FAQ data using centralized utility
+ const faqData = await fetchFaqData()
- // Handle missing data case
- if (!faqData) {
- console.error('Failed to load FAQ data')
- return notFound()
- }
+ // Handle missing data case
+ if (!faqData) {
+ console.error('Failed to load FAQ data')
+ return notFound()
+ }
- return (
- <>
- {/* FAQ content with navigation */}
-
- {[...Array(PAGE_SIZE)].map((_, i) => (
-
- ))}
-
+ {[...Array(PAGE_SIZE)].map((_, i) => (
+
+ ))}
+
- {posts.length === 0 ? (
-
- {"We couldn't find any blog posts matching your criteria."}
-
- ) : (
-
- {posts.map(post => (
-
- )}
+ return (
+
+ {posts.length === 0 ? (
+
+ {"We couldn't find any blog posts matching your criteria."}
+
+ ) : (
+
+ {posts.map((post) => (
+
+ )}
- setPage(selected + 1)}
- containerClassName={'flex gap-2 items-center justify-center mb-16'}
- pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
- pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
- activeClassName={'!opacity-100'}
- previousClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === 1 ? 'opacity-20' : 'opacity-100'
- )}
- previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
- )}
- disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
- disabledLinkClassName={'cursor-not-allowed'}
- previousLabel={ setPage(selected + 1)}
+ containerClassName={'flex gap-2 items-center justify-center mb-16'}
+ pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+ pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ activeClassName={'!opacity-100'}
+ previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+ previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextClassName={cl(
+ 'hover:opacity-100 transition-opacity',
+ page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+ )}
+ disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+ disabledLinkClassName={'cursor-not-allowed'}
+ previousLabel={
- )
+
+ )
}
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/page.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/page.tsx
index c5981b9..6a43939 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/page.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/page.tsx
@@ -1,24 +1,24 @@
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
-import {ListOfPosts} from '@/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/ListOfPosts'
+import { ListOfPosts } from '@/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/ListOfPosts'
export default async function BlogCategoriesPage(props: {
- params: Promise<{category: string}>;
+ params: Promise<{ category: string }>
}): Promise {
- const {category} = await props.params
- const data = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?filters[category][$contains]=${category}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc&pagination[pageSize]=1`,
- {
- headers: {
- Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
- }
- }
- )
- const {data: posts} = await data.json()
+ const { category } = await props.params
+ const data = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?filters[category][$contains]=${category}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc&pagination[pageSize]=1`,
+ {
+ headers: {
+ Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+ },
+ }
+ )
+ const { data: posts } = await data.json()
- if (!posts) {
- return notFound()
- }
+ if (!posts) {
+ return notFound()
+ }
- return
- {[...Array(PAGE_SIZE)].map((_, i) => (
-
- ))}
-
+ {[...Array(PAGE_SIZE)].map((_, i) => (
+
+ ))}
+
- {posts.length === 0 ? (
-
- {"We couldn't find any blog posts matching your criteria."}
-
- ) : (
-
- {posts.map(post => (
-
- )}
- setPage(selected + 1)}
- containerClassName={'flex gap-2 items-center justify-center'}
- pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
- pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
- activeClassName={'!opacity-100'}
- previousClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === 1 ? 'opacity-20' : 'opacity-100'
- )}
- previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
- )}
- disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
- disabledLinkClassName={'cursor-not-allowed'}
- previousLabel={
- )
+ return (
+
+ {posts.length === 0 ? (
+
+ {"We couldn't find any blog posts matching your criteria."}
+
+ ) : (
+
+ {posts.map((post) => (
+
+ )}
+ setPage(selected + 1)}
+ containerClassName={'flex gap-2 items-center justify-center'}
+ pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+ pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ activeClassName={'!opacity-100'}
+ previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+ previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextClassName={cl(
+ 'hover:opacity-100 transition-opacity',
+ page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+ )}
+ disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+ disabledLinkClassName={'cursor-not-allowed'}
+ previousLabel={
+ )
}
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/layout.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/layout.tsx
index 2491bbd..08e74c3 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/layout.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/layout.tsx
@@ -1,19 +1,19 @@
-import {NewsroomBreadcrumb} from '@/app/[lang]/(resources)/_components/NewsroomBreadcrumb'
-import {NewsroomNav} from '@/app/[lang]/(resources)/_components/NewsroomNav'
-import {NewsroomTitle} from '@/app/[lang]/(resources)/_components/NewsroomTitle'
+import { NewsroomBreadcrumb } from '@/app/[lang]/(resources)/_components/NewsroomBreadcrumb'
+import { NewsroomNav } from '@/app/[lang]/(resources)/_components/NewsroomNav'
+import { NewsroomTitle } from '@/app/[lang]/(resources)/_components/NewsroomTitle'
export default async function BlogPageLayout(props: {
- children: React.ReactNode;
- params: Promise<{category: string}>;
+ children: React.ReactNode
+ params: Promise<{ category: string }>
}): Promise {
- await props.params
+ await props.params
- return (
-
-
- )
+ return (
+
+
+ )
}
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/page.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/page.tsx
index fe86dd7..7d9e6e9 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/page.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/page.tsx
@@ -1,84 +1,74 @@
'use client'
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
import ReactPaginate from 'react-paginate'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {NewsPost} from '@/app/[lang]/_components/NewsPost'
-import {useFetchNewsroom} from '@/app/[lang]/_hooks/useFetchNewsroom'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { NewsPost } from '@/app/[lang]/_components/NewsPost'
+import { useFetchNewsroom } from '@/app/[lang]/_hooks/useFetchNewsroom'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { cl } from '@/app/[lang]/_utils/cl'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
const PAGE_SIZE = 12
const SORT = 'desc'
export default function BlogList(): ReactNode {
- const [page, setPage] = useState(1)
- const {posts, pagination, isLoading} = useFetchNewsroom({
- page,
- pageSize: PAGE_SIZE,
- sort: SORT,
- populateContent: true,
- cachePosts: true
- })
+ const [page, setPage] = useState(1)
+ const { posts, pagination, isLoading } = useFetchNewsroom({
+ page,
+ pageSize: PAGE_SIZE,
+ sort: SORT,
+ populateContent: true,
+ cachePosts: true,
+ })
- if (isLoading) {
- return (
-
- {[...Array(PAGE_SIZE)].map((_, i) => (
-
- ))}
-
+ {[...Array(PAGE_SIZE)].map((_, i) => (
+
+ ))}
+
- {posts.length === 0 ? (
-
- {"We couldn't find any blog posts matching your criteria."}
-
- ) : (
-
- {posts.map(post => (
-
- )}
- setPage(selected + 1)}
- containerClassName={'flex gap-2 items-center justify-center'}
- pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
- pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
- activeClassName={'!opacity-100'}
- previousClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === 1 ? 'opacity-20' : 'opacity-100'
- )}
- previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
- )}
- disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
- disabledLinkClassName={'cursor-not-allowed'}
- previousLabel={
- )
+ return (
+
+ {posts.length === 0 ? (
+
+ {"We couldn't find any blog posts matching your criteria."}
+
+ ) : (
+
+ {posts.map((post) => (
+
+ )}
+ setPage(selected + 1)}
+ containerClassName={'flex gap-2 items-center justify-center'}
+ pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+ pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ activeClassName={'!opacity-100'}
+ previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+ previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextClassName={cl(
+ 'hover:opacity-100 transition-opacity',
+ page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+ )}
+ disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+ disabledLinkClassName={'cursor-not-allowed'}
+ previousLabel={
+ )
}
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/ListOfPosts.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/ListOfPosts.tsx
index e383aea..5b6ac30 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/ListOfPosts.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/ListOfPosts.tsx
@@ -1,87 +1,77 @@
'use client'
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
import ReactPaginate from 'react-paginate'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {NewsPost} from '@/app/[lang]/_components/NewsPost'
-import {useFetchNewsroom} from '@/app/[lang]/_hooks/useFetchNewsroom'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { NewsPost } from '@/app/[lang]/_components/NewsPost'
+import { useFetchNewsroom } from '@/app/[lang]/_hooks/useFetchNewsroom'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { cl } from '@/app/[lang]/_utils/cl'
-import type {ReactElement} from 'react'
+import type { ReactElement } from 'react'
const PAGE_SIZE = 12
const SORT = 'desc'
-export function ListOfPosts(props: {tag: string}): ReactElement {
- const {tag} = props
- const [page, setPage] = useState(1)
- const {posts, pagination, isLoading} = useFetchNewsroom({
- page,
- pageSize: PAGE_SIZE,
- sort: SORT,
- tag,
- populateContent: true,
- cachePosts: true
- })
+export function ListOfPosts(props: { tag: string }): ReactElement {
+ const { tag } = props
+ const [page, setPage] = useState(1)
+ const { posts, pagination, isLoading } = useFetchNewsroom({
+ page,
+ pageSize: PAGE_SIZE,
+ sort: SORT,
+ tag,
+ populateContent: true,
+ cachePosts: true,
+ })
- if (isLoading) {
- return (
-
- {[...Array(PAGE_SIZE)].map((_, i) => (
-
- ))}
-
+ {[...Array(PAGE_SIZE)].map((_, i) => (
+
+ ))}
+
- {posts.length === 0 ? (
-
- {"We couldn't find any blog posts matching your criteria."}
-
- ) : (
-
- {posts.map(post => (
-
- )}
+ return (
+
+ {posts.length === 0 ? (
+
+ {"We couldn't find any blog posts matching your criteria."}
+
+ ) : (
+
+ {posts.map((post) => (
+
+ )}
- setPage(selected + 1)}
- containerClassName={'flex gap-2 items-center justify-center mb-16'}
- pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
- pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
- activeClassName={'!opacity-100'}
- previousClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === 1 ? 'opacity-20' : 'opacity-100'
- )}
- previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
- )}
- disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
- disabledLinkClassName={'cursor-not-allowed'}
- previousLabel={ setPage(selected + 1)}
+ containerClassName={'flex gap-2 items-center justify-center mb-16'}
+ pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+ pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ activeClassName={'!opacity-100'}
+ previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+ previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextClassName={cl(
+ 'hover:opacity-100 transition-opacity',
+ page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+ )}
+ disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+ disabledLinkClassName={'cursor-not-allowed'}
+ previousLabel={
- )
+
+ )
}
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/page.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/page.tsx
index 9166f48..a809d31 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/page.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/page.tsx
@@ -1,22 +1,22 @@
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
-import {ListOfPosts} from '@/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/ListOfPosts'
+import { ListOfPosts } from '@/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/ListOfPosts'
-export default async function NewsroomTagsPage(props: {params: Promise<{tag: string}>}): Promise {
- const {tag} = await props.params
- const data = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?filters[tags][$contains]=${tag}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc`,
- {
- headers: {
- Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
- }
- }
- )
- const {data: posts} = await data.json()
+export default async function NewsroomTagsPage(props: { params: Promise<{ tag: string }> }): Promise {
+ const { tag } = await props.params
+ const data = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?filters[tags][$contains]=${tag}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc`,
+ {
+ headers: {
+ Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+ },
+ }
+ )
+ const { data: posts } = await data.json()
- if (!posts) {
- return notFound()
- }
+ if (!posts) {
+ return notFound()
+ }
- return
- {[...Array(PAGE_SIZE)].map((_, i) => (
-
- ))}
-
+ {[...Array(PAGE_SIZE)].map((_, i) => (
+
+ ))}
+
- {posts.length === 0 ? (
-
- {"We couldn't find any blog posts matching your criteria."}
-
- ) : (
-
- {posts.map(post => (
-
- )}
- setPage(selected + 1)}
- containerClassName={'flex gap-2 items-center justify-center'}
- pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
- pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
- activeClassName={'!opacity-100'}
- previousClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === 1 ? 'opacity-20' : 'opacity-100'
- )}
- previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
- nextClassName={cl(
- 'hover:opacity-100 transition-opacity',
- page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
- )}
- disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
- disabledLinkClassName={'cursor-not-allowed'}
- previousLabel={
- )
+ return (
+
+ {posts.length === 0 ? (
+
+ {"We couldn't find any blog posts matching your criteria."}
+
+ ) : (
+
+ {posts.map((post) => (
+
+ )}
+ setPage(selected + 1)}
+ containerClassName={'flex gap-2 items-center justify-center'}
+ pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+ pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ activeClassName={'!opacity-100'}
+ previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+ previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+ nextClassName={cl(
+ 'hover:opacity-100 transition-opacity',
+ page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+ )}
+ disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+ disabledLinkClassName={'cursor-not-allowed'}
+ previousLabel={
+ )
}
diff --git a/app/[lang]/(resources)/newsroom/README.md b/app/[lang]/(resources)/newsroom/README.md
index 4e6220f..35b0228 100644
--- a/app/[lang]/(resources)/newsroom/README.md
+++ b/app/[lang]/(resources)/newsroom/README.md
@@ -5,15 +5,15 @@ This directory contains the newsroom section of the ShapeShift website, featurin
## Directory Structure
- **(withNavigation)/**: Newsroom pages that include navigation elements
- - **categories/**: Category-based news filtering
- - **[category]/**: Dynamic routes for news categories
- - **tags/**: Tag-based news filtering
- - **[tag]/**: Dynamic routes for news tags
- - **layout.tsx**: Layout for newsroom pages with navigation
- - **page.tsx**: Main newsroom landing page
+ - **categories/**: Category-based news filtering
+ - **[category]/**: Dynamic routes for news categories
+ - **tags/**: Tag-based news filtering
+ - **[tag]/**: Dynamic routes for news tags
+ - **layout.tsx**: Layout for newsroom pages with navigation
+ - **page.tsx**: Main newsroom landing page
- **[slug]/**: Individual news post pages
- - **layout.tsx**: Layout for individual news posts
- - **page.tsx**: Page component for individual news posts
+ - **layout.tsx**: Layout for individual news posts
+ - **page.tsx**: Page component for individual news posts
## Features
@@ -28,10 +28,10 @@ This directory contains the newsroom section of the ShapeShift website, featurin
- Uses Next.js dynamic routing for categories, tags, and post slugs
- Implements dedicated layout for consistent newsroom section UI
- Shares structure similar to the blog section but with news-specific content
-- Utilizes components from the _components directory:
- - **NewsroomBreadcrumb.tsx**: Breadcrumb navigation for newsroom
- - **NewsroomNav.tsx**: Main navigation for newsroom section
- - **NewsroomTitle.tsx**: Title component for newsroom content
+- Utilizes components from the \_components directory:
+ - **NewsroomBreadcrumb.tsx**: Breadcrumb navigation for newsroom
+ - **NewsroomNav.tsx**: Main navigation for newsroom section
+ - **NewsroomTitle.tsx**: Title component for newsroom content
## Content Types
@@ -61,4 +61,4 @@ The newsroom likely contains various types of content:
- Implement proper loading states for content fetching
- Optimize images for faster loading
- Maintain mobile-responsive design
-- Keep navigation intuitive for browsing news archives
\ No newline at end of file
+- Keep navigation intuitive for browsing news archives
diff --git a/app/[lang]/(resources)/newsroom/[slug]/layout.tsx b/app/[lang]/(resources)/newsroom/[slug]/layout.tsx
index 7ff220e..719ae4e 100644
--- a/app/[lang]/(resources)/newsroom/[slug]/layout.tsx
+++ b/app/[lang]/(resources)/newsroom/[slug]/layout.tsx
@@ -1,65 +1,67 @@
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
-import type {Metadata} from 'next'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+
+import type { Metadata } from 'next'
/************************************************************************************************
* Layout component for blog post pages
* Handles metadata generation for SEO and social sharing
* Uses Next.js 13+ Metadata API
************************************************************************************************/
-export async function generateMetadata({params}: {params: Promise<{slug: string}>}): Promise {
- const {slug} = await params
- const data = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?filters[slug][$eq]=${slug}&fields[0]=postSummary&fields[1]=tags&fields[2]=title&fields[3]=publishedAt&populate[0]=featuredImg`,
- {
- headers: {
- Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
- }
- }
- ).then(async res => res.json())
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise {
+ const { slug } = await params
+ const data = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?filters[slug][$eq]=${slug}&fields[0]=postSummary&fields[1]=tags&fields[2]=title&fields[3]=publishedAt&populate[0]=featuredImg`,
+ {
+ headers: {
+ Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+ },
+ }
+ ).then(async (res) => res.json())
- const post = data.data[0]
+ const post = data.data[0]
- if (!post) {
- return notFound()
- }
+ if (!post) {
+ return notFound()
+ }
- const imageUrl = post.featuredImg?.formats?.thumbnail?.url || post.featuredImg?.url
- const metadata: Metadata = {
- title: `${post.title} | ShapeShift Newsroom`,
- description: post.postSummary || `Read ${post.title} on ShapeShift Newsroom`,
- keywords: Array.isArray(post.tags) ? post.tags.join(', ') : post.tags,
- openGraph: {
- title: post.title,
- description: post.postSummary,
- type: 'article',
- publishedTime: post.publishedAt,
- authors: ['ShapeShift'],
- tags: Array.isArray(post.tags) ? post.tags : [post.tags]
- },
- twitter: {
- card: 'summary_large_image',
- title: post.title,
- description: post.postSummary || `Read ${post.title} on ShapeShift Newsroom`
- }
- }
+ const imageUrl = post.featuredImg?.formats?.thumbnail?.url || post.featuredImg?.url
+ const metadata: Metadata = {
+ title: `${post.title} | ShapeShift Newsroom`,
+ description: post.postSummary || `Read ${post.title} on ShapeShift Newsroom`,
+ keywords: Array.isArray(post.tags) ? post.tags.join(', ') : post.tags,
+ openGraph: {
+ title: post.title,
+ description: post.postSummary,
+ type: 'article',
+ publishedTime: post.publishedAt,
+ authors: ['ShapeShift'],
+ tags: Array.isArray(post.tags) ? post.tags : [post.tags],
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: post.title,
+ description: post.postSummary || `Read ${post.title} on ShapeShift Newsroom`,
+ },
+ }
- if (imageUrl) {
- metadata.openGraph!.images = [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
- }
- ]
- metadata.twitter!.images = [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
- }
- ]
- }
+ if (imageUrl) {
+ metadata.openGraph!.images = [
+ {
+ url: getStrapiImageUrl(imageUrl),
+ },
+ ]
+ metadata.twitter!.images = [
+ {
+ url: getStrapiImageUrl(imageUrl),
+ },
+ ]
+ }
- return metadata
+ return metadata
}
-export default function NewsroomPostLayout({children}: {children: React.ReactNode}): React.ReactNode {
- return children
+export default function NewsroomPostLayout({ children }: { children: React.ReactNode }): React.ReactNode {
+ return children
}
diff --git a/app/[lang]/(resources)/newsroom/[slug]/page.tsx b/app/[lang]/(resources)/newsroom/[slug]/page.tsx
index eda246d..8d7949d 100644
--- a/app/[lang]/(resources)/newsroom/[slug]/page.tsx
+++ b/app/[lang]/(resources)/newsroom/[slug]/page.tsx
@@ -2,314 +2,264 @@
import 'highlight.js/styles/github-dark.css'
import Image from 'next/image'
-import {notFound, useParams, useRouter} from 'next/navigation'
+import { notFound, useParams, useRouter } from 'next/navigation'
import ReactMarkdown from 'react-markdown'
import rehypeHighlight from 'rehype-highlight'
import remarkEmoji from 'remark-emoji' // For emoji support
import remarkGfm from 'remark-gfm'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {useCachedNews} from '@/app/[lang]/_contexts/CachedNewsContext'
-import {useFetchNewsroom} from '@/app/[lang]/_hooks/useFetchNewsroom'
-import {IconBack} from '@/app/[lang]/_icons/IconBack'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { useCachedNews } from '@/app/[lang]/_contexts/CachedNewsContext'
+import { useFetchNewsroom } from '@/app/[lang]/_hooks/useFetchNewsroom'
+import { IconBack } from '@/app/[lang]/_icons/IconBack'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
function LoadingSkeleton(): ReactNode {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {isHtml ? (
- // eslint-disable-next-line @typescript-eslint/naming-convention
-
- ) : (
-
(
-
+ {isHtml ? (
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+
+ ) : (
+
-
{match[1]}
-
-
- {children}
-
-
-
- {children}
-
- )
- },
+ // Code blocks
+ code: ({ className, children, ...props }) => {
+ const match = /language-(\w+)/.exec(className || '')
+ return match ? (
+
+
{match[1]}
+
+
+ {children}
+
+
+
+ {children}
+
+ )
+ },
- // Tables
- table: ({...props}) => (
-
- ),
- th: ({...props}) => (
-
- )}
+ // Links
+ a: ({ ...props }) => (
+
+ ),
+ }}
+ >
+ {content}
+
+ )}
-
-
- router.back()}>
- {'Back'}
-
-
- {new Date(post.publishedAt).toLocaleDateString()}
-
+ return (
+ <>
+
+ router.back()}
+ >
+ {'Back'}
+
+ {new Date(post.publishedAt).toLocaleDateString()}
-
- {post.tags.map((tag: string, index: number) => (
-
- {`#${tag}`}
-
- ))}
-
- {post.slug.replace(/-/g, ' ')}
-
- {!isLoading && (
-
-
- )}
-
- )
+
+ {post.tags.map((tag: string, index: number) => (
+
+ {`#${tag}`}
+
+ ))}
+
+ {post.slug.replace(/-/g, ' ')}
+
+ {!isLoading && (
+
+
+ )}
+
+ )
}
diff --git a/app/[lang]/(resources)/protocols/README.md b/app/[lang]/(resources)/protocols/README.md
index 9f98a10..005173f 100644
--- a/app/[lang]/(resources)/protocols/README.md
+++ b/app/[lang]/(resources)/protocols/README.md
@@ -5,7 +5,7 @@ This directory contains pages that showcase and document the DeFi protocols inte
## Directory Structure
- **[slug]/**: Dynamic routes for individual protocol pages
- - **page.tsx**: Page component for individual protocol details
+ - **page.tsx**: Page component for individual protocol details
- **layout.tsx**: Layout component for all supported protocols pages
- **loading.tsx**: Loading state component for supported protocols pages
- **page.tsx**: Main supported protocols landing page
@@ -59,4 +59,4 @@ The protocol pages utilize specialized components from the `_components` directo
- Ensure all protocol information is properly categorized and searchable
- Update content when protocol integrations change or are enhanced
- Coordinate with protocol teams for accurate representation
-- Include relevant risk disclosures where appropriate
\ No newline at end of file
+- Include relevant risk disclosures where appropriate
diff --git a/app/[lang]/(resources)/protocols/[slug]/page.tsx b/app/[lang]/(resources)/protocols/[slug]/page.tsx
index 9bfb712..92c71c2 100644
--- a/app/[lang]/(resources)/protocols/[slug]/page.tsx
+++ b/app/[lang]/(resources)/protocols/[slug]/page.tsx
@@ -1,113 +1,101 @@
import Image from 'next/image'
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
-import {ProtocolAbout} from '@/app/[lang]/(resources)/_components/ProtocolAbout'
-import {ProtocolEasier} from '@/app/[lang]/(resources)/_components/ProtocolEasier'
-import {ProtocolFeatures} from '@/app/[lang]/(resources)/_components/ProtocolFeatures'
-import {ProtocolHeader} from '@/app/[lang]/(resources)/_components/ProtocolHeader'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {getSupportedProtocol} from '@/app/[lang]/_utils/query'
+import { ProtocolAbout } from '@/app/[lang]/(resources)/_components/ProtocolAbout'
+import { ProtocolEasier } from '@/app/[lang]/(resources)/_components/ProtocolEasier'
+import { ProtocolFeatures } from '@/app/[lang]/(resources)/_components/ProtocolFeatures'
+import { ProtocolHeader } from '@/app/[lang]/(resources)/_components/ProtocolHeader'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { getStrapiImageUrl, getSupportedProtocol } from '@/app/[lang]/_utils/query'
-import type {TSupportedProtocolData} from '@/app/[lang]/_components/strapi/types'
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { TSupportedProtocolData } from '@/app/[lang]/_components/strapi/types'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
-export async function generateMetadata({params}: {params: Promise<{slug: string}>}): Promise {
- const {slug} = await params
- if (!slug) {
- return notFound()
- }
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise {
+ const { slug } = await params
+ if (!slug) {
+ return notFound()
+ }
- const response = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-protocols?filters[slug][$eq]=${slug}&populate=*`,
- {
- headers: {
- Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
- }
- }
- )
- const data = await response.json()
- const protocol = data.data[0] as TSupportedProtocolData
- if (!protocol) {
- return notFound()
- }
+ const response = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-protocols?filters[slug][$eq]=${slug}&populate=*`,
+ {
+ headers: {
+ Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+ },
+ }
+ )
+ const data = await response.json()
+ const protocol = data.data[0] as TSupportedProtocolData
+ if (!protocol) {
+ return notFound()
+ }
- const imageUrl = protocol.featuredImg?.formats?.thumbnail?.url || protocol.featuredImg?.url
+ const imageUrl = protocol.featuredImg?.formats?.thumbnail?.url || protocol.featuredImg?.url
- const metadata: Metadata = {
- title: `${protocol.name} | ShapeShift`,
- description: `Shift into ${protocol.name} with ShapeShift!`,
- keywords: `${protocol.name}, ShapeShift`,
- openGraph: {
- title: protocol.name,
- description: `Shift into ${protocol.name} with ShapeShift!`,
- type: 'website'
- },
- twitter: {
- card: 'summary_large_image',
- title: protocol.name,
- description: `Shift into ${protocol.name} with ShapeShift!`
- }
- }
+ const metadata: Metadata = {
+ title: `${protocol.name} | ShapeShift`,
+ description: `Shift into ${protocol.name} with ShapeShift!`,
+ keywords: `${protocol.name}, ShapeShift`,
+ openGraph: {
+ title: protocol.name,
+ description: `Shift into ${protocol.name} with ShapeShift!`,
+ type: 'website',
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: protocol.name,
+ description: `Shift into ${protocol.name} with ShapeShift!`,
+ },
+ }
- if (imageUrl) {
- metadata.openGraph!.images = [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
- }
- ]
- metadata.twitter!.images = [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
- }
- ]
- }
+ if (imageUrl) {
+ metadata.openGraph!.images = [
+ {
+ url: getStrapiImageUrl(imageUrl),
+ },
+ ]
+ metadata.twitter!.images = [
+ {
+ url: getStrapiImageUrl(imageUrl),
+ },
+ ]
+ }
- return metadata
+ return metadata
}
-export default async function ProtocolPage({params}: {params: Promise<{slug: string}>}): Promise {
- const {slug} = await params
- const protocol = await getSupportedProtocol(slug)
+export default async function ProtocolPage({ params }: { params: Promise<{ slug: string }> }): Promise {
+ const { slug } = await params
+ const protocol = await getSupportedProtocol(slug)
- if (!protocol) {
- return notFound()
- }
+ if (!protocol) {
+ return notFound()
+ }
- return (
-
-
-
-
-
-
-
-
+ return (
+
- )
+
+
+
+
-
{'Featured Protocols'}
-
-
+
{'Featured Protocols'}
+
+
- {'Choose your preferred protocol'}
-
-
- )
+ {/* Protocols grid section */}
+
+ {'Choose your preferred protocol'}
+
+
+ )
}
diff --git a/app/[lang]/(resources)/protocols/layout.tsx b/app/[lang]/(resources)/protocols/layout.tsx
index 80815d7..de80644 100644
--- a/app/[lang]/(resources)/protocols/layout.tsx
+++ b/app/[lang]/(resources)/protocols/layout.tsx
@@ -1,34 +1,34 @@
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
export async function generateMetadata(): Promise {
- return {
- title: 'Shift into DeFi with ShapeShift',
- description: 'Discover all the protocols ShapeShift supports. Buy, sell, and swap crypto with ease.',
- keywords: 'ShapeShift, Supported Protocols',
- openGraph: {
- title: 'Shift into DeFi with ShapeShift',
- description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
- type: 'website',
- images: [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
- }
- ]
- },
- twitter: {
- card: 'summary_large_image',
- title: 'Shift into DeFi with ShapeShift',
- description: 'Discover all the protocols ShapeShift supports. Buy, sell, and swap crypto with ease.',
- images: [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
- }
- ]
- }
- }
+ return {
+ title: 'Shift into DeFi with ShapeShift',
+ description: 'Discover all the protocols ShapeShift supports. Buy, sell, and swap crypto with ease.',
+ keywords: 'ShapeShift, Supported Protocols',
+ openGraph: {
+ title: 'Shift into DeFi with ShapeShift',
+ description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
+ type: 'website',
+ images: [
+ {
+ url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+ },
+ ],
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: 'Shift into DeFi with ShapeShift',
+ description: 'Discover all the protocols ShapeShift supports. Buy, sell, and swap crypto with ease.',
+ images: [
+ {
+ url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+ },
+ ],
+ },
+ }
}
-export default function Layout({children}: {children: ReactNode}): ReactNode {
- return children
+export default function Layout({ children }: { children: ReactNode }): ReactNode {
+ return children
}
diff --git a/app/[lang]/(resources)/protocols/page.tsx b/app/[lang]/(resources)/protocols/page.tsx
index 010c82b..4262dfe 100644
--- a/app/[lang]/(resources)/protocols/page.tsx
+++ b/app/[lang]/(resources)/protocols/page.tsx
@@ -15,57 +15,57 @@
** - Implements responsive design with Tailwind CSS
************************************************************************************************/
-import {Banner} from '@/app/[lang]/_components/Banner'
+import { Banner } from '@/app/[lang]/_components/Banner'
-import {ResourceHeader} from '../_components/ResourceHeader'
-import {fetchAllProtocols} from '../_utils/fetchUtils'
-import {ProtocolSearchWrapper} from './_components/ProtocolSearchWrapper'
+import { ResourceHeader } from '../_components/ResourceHeader'
+import { fetchAllProtocols } from '../_utils/fetchUtils'
+import { ProtocolSearchWrapper } from './_components/ProtocolSearchWrapper'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
// Static content for the page
const pageContent = {
- title: 'Shift into DeFi with ShapeShift',
- description: 'Enter and exit top DeFi protocols in one-click with ShapeShift',
- features: ['Multi-Chain Support', 'Non-Custodial', 'User-Friendly Interface'],
- ctaButton: {
- text: 'Get Started',
- url: 'https://app.shapeshift.com/'
- }
+ title: 'Shift into DeFi with ShapeShift',
+ description: 'Enter and exit top DeFi protocols in one-click with ShapeShift',
+ features: ['Multi-Chain Support', 'Non-Custodial', 'User-Friendly Interface'],
+ ctaButton: {
+ text: 'Get Started',
+ url: 'https://app.shapeshift.com/',
+ },
}
export default async function ProtocolsPage(): Promise {
- // Fetch protocols data
- const protocols = await fetchAllProtocols()
+ // Fetch protocols data
+ const protocols = await fetchAllProtocols()
- // Handle loading and error states
- if (!protocols) {
- return (
-
-
{'Unable to load protocols. Please try again later.'}
-
+
{'Unable to load protocols. Please try again later.'}
+
-
- {/* Reusable header component */}
-
+ return (
+
+
+ {/* Reusable header component */}
+
-
+
- {/* Footer banner */}
-
-
-
-
- )
+ {/* Footer banner */}
+
+
+
+
- {isHtml(content) ? (
- // eslint-disable-next-line @typescript-eslint/naming-convention
-
- ) : (
-
(
-
-
{match[1]}
-
-
- {children}
-
-
-
- {children}
-
- )
- },
-
- // Tables
- table: ({...props}) => (
-
- ),
- th: ({...props}) => (
-
- )
- }}>
- {content}
-
- )}
-
-
-
+ {isHtml(content) ? (
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+
+ ) : (
+
+
{match[1]}
+
+
+ {children}
+
+
+
+ {children}
+
+ )
+ },
+
+ // Tables
+ table: ({ ...props }) => (
+
+ ),
+ th: ({ ...props }) =>
,
+ }}
+ >
+ {content}
+
+ )}
+
+
+
- router.back()}>
- {'Back'}
-
-
- {new Date(article.publishedAt).toLocaleDateString()}
-
+
+ router.back()}
+ >
+ {'Back'}
+
+ {new Date(article.publishedAt).toLocaleDateString()}
- {article.title}
-
- {!isLoading && (
-
-
- )}
-
- )
+ {article.title}
+
+ {!isLoading && (
+
+
+ )}
+
+ )
}
diff --git a/app/[lang]/(resources)/wallets/README.md b/app/[lang]/(resources)/wallets/README.md
index 31f3473..b7496ed 100644
--- a/app/[lang]/(resources)/wallets/README.md
+++ b/app/[lang]/(resources)/wallets/README.md
@@ -5,7 +5,7 @@ This directory contains pages that showcase and document the cryptocurrency wall
## Directory Structure
- **[slug]/**: Dynamic routes for individual wallet pages
- - **page.tsx**: Page component for individual wallet details
+ - **page.tsx**: Page component for individual wallet details
- **layout.tsx**: Layout component for all supported wallets pages
- **loading.tsx**: Loading state component for supported wallets pages
- **page.tsx**: Main supported wallets landing page
@@ -59,4 +59,4 @@ The wallet pages utilize specialized components from the `_components` directory
- Ensure all wallet information is properly categorized and searchable
- Update content when wallet support changes or is enhanced
- Coordinate with wallet development teams for accurate representation
-- Include troubleshooting tips for common connection issues
\ No newline at end of file
+- Include troubleshooting tips for common connection issues
diff --git a/app/[lang]/(resources)/wallets/[slug]/page.tsx b/app/[lang]/(resources)/wallets/[slug]/page.tsx
index 23e1d9f..0da655b 100644
--- a/app/[lang]/(resources)/wallets/[slug]/page.tsx
+++ b/app/[lang]/(resources)/wallets/[slug]/page.tsx
@@ -1,102 +1,102 @@
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
-import {SupportedWalletAccelerate} from '@/app/[lang]/(resources)/_components/SupportedWalletAccelerate'
-import {SupportedWalletHeader} from '@/app/[lang]/(resources)/_components/SupportedWalletHeader'
-import {SupportedWalletHero} from '@/app/[lang]/(resources)/_components/SupportedWalletHero'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {StrapiFAQ} from '@/app/[lang]/_components/StrapiFAQ'
-import {getSupportedWallet} from '@/app/[lang]/_utils/query'
+import { SupportedWalletAccelerate } from '@/app/[lang]/(resources)/_components/SupportedWalletAccelerate'
+import { SupportedWalletHeader } from '@/app/[lang]/(resources)/_components/SupportedWalletHeader'
+import { SupportedWalletHero } from '@/app/[lang]/(resources)/_components/SupportedWalletHero'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { StrapiFAQ } from '@/app/[lang]/_components/StrapiFAQ'
+import { getStrapiImageUrl, getSupportedWallet } from '@/app/[lang]/_utils/query'
-import type {TSupportedWalletData} from '@/app/[lang]/_components/strapi/types'
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { TSupportedWalletData } from '@/app/[lang]/_components/strapi/types'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
-export async function generateMetadata({params}: {params: Promise<{slug: string}>}): Promise {
- const {slug} = await params
- if (!slug) {
- return notFound()
- }
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise {
+ const { slug } = await params
+ if (!slug) {
+ return notFound()
+ }
- const response = await fetch(
- `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-wallets?filters[slug][$eq]=${slug}&populate=*`,
- {
- headers: {
- Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
- }
- }
- )
- const data = await response.json()
- const wallet = data.data[0] as TSupportedWalletData
- if (!wallet) {
- return notFound()
- }
+ const response = await fetch(
+ `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-wallets?filters[slug][$eq]=${slug}&populate=*`,
+ {
+ headers: {
+ Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+ },
+ }
+ )
+ const data = await response.json()
+ const wallet = data.data[0] as TSupportedWalletData
+ if (!wallet) {
+ return notFound()
+ }
- const imageUrl = wallet.featuredImg?.formats?.thumbnail?.url || wallet.featuredImg?.url
- const metadata: Metadata = {
- title: `${wallet.name} | ShapeShift Wallets`,
- description: `ShapeShift supports ${wallet.name}! Use it now to buy, sell, and swap crypto.`,
- keywords: `${wallet.name}, ShapeShift`,
- openGraph: {
- title: wallet.name,
- description: `ShapeShift supports ${wallet.name}! Use it now to buy, sell, and swap crypto.`,
- type: 'website'
- },
- twitter: {
- card: 'summary_large_image',
- title: wallet.name,
- description: `ShapeShift supports ${wallet.name}! Use it now to buy, sell, and swap crypto.`
- }
- }
+ const imageUrl = wallet.featuredImg?.formats?.thumbnail?.url || wallet.featuredImg?.url
+ const metadata: Metadata = {
+ title: `${wallet.name} | ShapeShift Wallets`,
+ description: `ShapeShift supports ${wallet.name}! Use it now to buy, sell, and swap crypto.`,
+ keywords: `${wallet.name}, ShapeShift`,
+ openGraph: {
+ title: wallet.name,
+ description: `ShapeShift supports ${wallet.name}! Use it now to buy, sell, and swap crypto.`,
+ type: 'website',
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: wallet.name,
+ description: `ShapeShift supports ${wallet.name}! Use it now to buy, sell, and swap crypto.`,
+ },
+ }
- if (imageUrl) {
- metadata.openGraph!.images = [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
- }
- ]
- metadata.twitter!.images = [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
- }
- ]
- }
+ if (imageUrl) {
+ metadata.openGraph!.images = [
+ {
+ url: getStrapiImageUrl(imageUrl),
+ },
+ ]
+ metadata.twitter!.images = [
+ {
+ url: getStrapiImageUrl(imageUrl),
+ },
+ ]
+ }
- return metadata
+ return metadata
}
-export default async function WalletPage({params}: {params: Promise<{slug: string}>}): Promise {
- const {slug} = await params
- const wallet = await getSupportedWallet(slug)
+export default async function WalletPage({ params }: { params: Promise<{ slug: string }> }): Promise {
+ const { slug } = await params
+ const wallet = await getSupportedWallet(slug)
- if (!wallet) {
- return notFound()
- }
+ if (!wallet) {
+ return notFound()
+ }
- return (
-
-
-
-
-
+ return (
+
- )
+
+
+
+
-
{'Featured Wallets'}
-
- {'Choose your preferred wallet'}
-
-
- )
+ wallets: TSupportedWalletData[]
+}
+
+export function WalletSearchWrapper({ wallets }: TWalletSearchWrapperProps): ReactNode {
+ const [filteredWallets, setFilteredWallets] = useState(wallets)
+ const [searchQuery, setSearchQuery] = useState('')
+
+ const handleSearch = (query: string): void => {
+ setSearchQuery(query)
+ const filtered = wallets.filter((wallet) => wallet.name.toLowerCase().includes(query.toLowerCase()))
+ setFilteredWallets(filtered)
+ }
+
+ const featuredWallets = filteredWallets?.filter((wallet) => wallet.isFeatured)
+ const nonFeaturedWallets = filteredWallets?.filter((wallet) => !wallet.isFeatured)
+
+ return (
+ <>
+
+
{'Featured Wallets'}
+
+ {'Choose your preferred wallet'}
+
+
+ )
}
diff --git a/app/[lang]/(resources)/wallets/layout.tsx b/app/[lang]/(resources)/wallets/layout.tsx
index 557bbdd..6ec5802 100644
--- a/app/[lang]/(resources)/wallets/layout.tsx
+++ b/app/[lang]/(resources)/wallets/layout.tsx
@@ -1,34 +1,34 @@
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
export async function generateMetadata(): Promise {
- return {
- title: 'ShapeShift Supported Wallets',
- description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
- keywords: 'ShapeShift, Supported Wallets',
- openGraph: {
- title: 'ShapeShift Supported Wallets',
- description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
- type: 'website',
- images: [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
- }
- ]
- },
- twitter: {
- card: 'summary_large_image',
- title: 'ShapeShift Supported Wallets',
- description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
- images: [
- {
- url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
- }
- ]
- }
- }
+ return {
+ title: 'ShapeShift Supported Wallets',
+ description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
+ keywords: 'ShapeShift, Supported Wallets',
+ openGraph: {
+ title: 'ShapeShift Supported Wallets',
+ description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
+ type: 'website',
+ images: [
+ {
+ url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+ },
+ ],
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: 'ShapeShift Supported Wallets',
+ description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
+ images: [
+ {
+ url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+ },
+ ],
+ },
+ }
}
-export default function Layout({children}: {children: ReactNode}): ReactNode {
- return children
+export default function Layout({ children }: { children: ReactNode }): ReactNode {
+ return children
}
diff --git a/app/[lang]/(resources)/wallets/page.tsx b/app/[lang]/(resources)/wallets/page.tsx
index 9762ca8..d2de75c 100644
--- a/app/[lang]/(resources)/wallets/page.tsx
+++ b/app/[lang]/(resources)/wallets/page.tsx
@@ -16,79 +16,79 @@
** - Implements descriptive section headings for better accessibility
************************************************************************************************/
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {WalletRequestCard} from '@/app/[lang]/_components/WalletRequestCard'
-import {requestUrl} from '@/app/[lang]/_utils/constants'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { WalletRequestCard } from '@/app/[lang]/_components/WalletRequestCard'
+import { requestUrl } from '@/app/[lang]/_utils/constants'
-import {ResourceHeader} from '../_components/ResourceHeader'
-import {fetchAllWallets} from '../_utils/fetchUtils'
-import {WalletSearchWrapper} from './_components/WalletSearchWrapper'
+import { ResourceHeader } from '../_components/ResourceHeader'
+import { fetchAllWallets } from '../_utils/fetchUtils'
+import { WalletSearchWrapper } from './_components/WalletSearchWrapper'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
// Static content for the page
const pageContent = {
- title: 'Bring your own wallet',
- description:
- 'Connect your favorite self-custody wallet to access the full ShapeShift platform and all supported chains.',
- features: ['Non-Custodial', 'Multi-Provider Support', 'Enhanced Privacy'],
- ctaButton: {
- text: 'Get Started',
- url: 'https://app.shapeshift.com/'
- }
+ title: 'Bring your own wallet',
+ description:
+ 'Connect your favorite self-custody wallet to access the full ShapeShift platform and all supported chains.',
+ features: ['Non-Custodial', 'Multi-Provider Support', 'Enhanced Privacy'],
+ ctaButton: {
+ text: 'Get Started',
+ url: 'https://app.shapeshift.com/',
+ },
}
export default async function WalletPage(): Promise {
- // Fetch wallets data
- const wallets = await fetchAllWallets()
+ // Fetch wallets data
+ const wallets = await fetchAllWallets()
- // Handle loading and error states
- if (!wallets) {
- return (
-
-
{'Unable to load wallet data. Please try again later.'}
-
+
{'Unable to load wallet data. Please try again later.'}
+
-
- {/* Reusable header component */}
-
+ return (
+
+
+ {/* Reusable header component */}
+
-
+
-
- {/* Footer banner */}
-
-
-
-
- )
+ {/* Footer banner */}
+
+
+
+
) => {
- if (event.key === 'Enter' || event.key === ' ') {
- event.preventDefault()
- handleToggle()
- }
- },
- [handleToggle]
- )
+ const handleKeyDown = useCallback(
+ (event: KeyboardEvent) => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault()
+ handleToggle()
+ }
+ },
+ [handleToggle]
+ )
- return (
-
-
-
- {item.title}
-
- {new Date(item.date).toLocaleDateString(undefined, {
- year: 'numeric',
- month: 'long',
- day: 'numeric'
- })}
-
-
-
-
-
- {isOpen && (
-
-
-
-
- )}
-
-
+
+
+ {item.title}
+
+ {new Date(item.date).toLocaleDateString(undefined, {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ })}
+
+
+
+
+
+ {isOpen && (
+
+
+
+
+ )}
+
+
- }
-
- return (
- (
-
- )
- }}>
- {content}
-
- )
+function TermsMarkdown({ content }: TTermsMarkdownProps): ReactNode {
+ if (isHtmlContent(content)) {
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ return
+ }
+
+ return (
+
,
+ }}
+ >
+ {content}
+
+ )
}
/**************************************************************************************************
* CodeBlock component for rendering code with syntax highlighting
**************************************************************************************************/
-function CodeBlock({className, children, ...props}: ComponentProps<'code'>): ReactNode {
- const match = /language-(\w+)/.exec(className || '')
-
- if (match) {
- return (
-
-
- {match[1]}
-
-
-
- {children}
-
-
-
- {children}
-
- )
+function CodeBlock({ className, children, ...props }: ComponentProps<'code'>): ReactNode {
+ const match = /language-(\w+)/.exec(className || '')
+
+ if (match) {
+ return (
+
+
+ {match[1]}
+
+
+
+ {children}
+
+
+
+ {children}
+
+ )
}
export default memo(TermsMarkdown)
diff --git a/app/[lang]/(terms)/_components/TermsPage.tsx b/app/[lang]/(terms)/_components/TermsPage.tsx
index 6deab7a..136aede 100644
--- a/app/[lang]/(terms)/_components/TermsPage.tsx
+++ b/app/[lang]/(terms)/_components/TermsPage.tsx
@@ -7,92 +7,79 @@
** Implements loading state and error handling for better UX
**************************************************************************************************/
-import {Suspense} from 'react'
+import { Suspense } from 'react'
import styles from '@/app/[lang]/(terms)/_components/terms.module.css'
import TermsAccordion from '@/app/[lang]/(terms)/_components/TermsAccordion'
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
-import type {TTermsItemData} from '@/app/[lang]/(terms)/_components/TermsAccordion'
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { TTermsItemData } from '@/app/[lang]/(terms)/_components/TermsAccordion'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
type TTermsPageProps = {
- title: string;
- items: TTermsItemData[];
-};
+ title: string
+ items: TTermsItemData[]
+}
/**************************************************************************************************
* Helper function to create dynamic metadata based on title
**************************************************************************************************/
-export function generateMetadata({title}: {title: string}): Metadata {
- return {
- title: `${title} | ShapeShift`,
- description: `ShapeShift ${title.toLowerCase()} - legal information for users.`,
- openGraph: {
- title: `ShapeShift ${title}`,
- description: `View ShapeShift's ${title.toLowerCase()} and legal information.`
- }
- }
+export function generateMetadata({ title }: { title: string }): Metadata {
+ return {
+ title: `${title} | ShapeShift`,
+ description: `ShapeShift ${title.toLowerCase()} - legal information for users.`,
+ openGraph: {
+ title: `ShapeShift ${title}`,
+ description: `View ShapeShift's ${title.toLowerCase()} and legal information.`,
+ },
+ }
}
/**************************************************************************************************
* Terms content component
**************************************************************************************************/
-function TermsContent({items}: TTermsPageProps): ReactNode {
- return (
-
-
- {items.map(item => (
-
-
+
+ {items.map((item) => (
+
+
- {Array.from({length: 3}).map((_, index) => (
-
- ))}
-
+ {Array.from({ length: 3 }).map((_, index) => (
+
+ ))}
+
-
-
-
+export function TermsPage({ title, items }: TTermsPageProps): ReactNode {
+ return (
+
+
+
+
-
- )
+
+ )
}
diff --git a/app/[lang]/(terms)/_components/utils.ts b/app/[lang]/(terms)/_components/utils.ts
index 9798a8a..9404f5a 100644
--- a/app/[lang]/(terms)/_components/utils.ts
+++ b/app/[lang]/(terms)/_components/utils.ts
@@ -6,42 +6,42 @@
** Enforces consistent data structure between different terms pages
**************************************************************************************************/
-import {getPrivacyPolicy, getTermsOfService} from '@/app/[lang]/_utils/query'
+import { getPrivacyPolicy, getTermsOfService } from '@/app/[lang]/_utils/query'
-import type {TTermsItemData} from '@/app/[lang]/(terms)/_components/TermsAccordion'
+import type { TTermsItemData } from '@/app/[lang]/(terms)/_components/TermsAccordion'
/**************************************************************************************************
* Transforms privacy policy data from API format to component format
**************************************************************************************************/
export async function getPrivacyPolicyItems(): Promise {
- const data = await getPrivacyPolicy()
-
- if (!data) {
- return []
- }
-
- return data.policy.map(policy => ({
- id: policy.id,
- title: policy.title,
- date: policy.date,
- content: policy.policy
- }))
+ const data = await getPrivacyPolicy()
+
+ if (!data) {
+ return []
+ }
+
+ return data.policy.map((policy) => ({
+ id: policy.id,
+ title: policy.title,
+ date: policy.date,
+ content: policy.policy,
+ }))
}
/**************************************************************************************************
* Transforms terms of service data from API format to component format
**************************************************************************************************/
export async function getTermsOfServiceItems(): Promise {
- const data = await getTermsOfService()
-
- if (!data) {
- return []
- }
-
- return data.terms.map(term => ({
- id: term.id,
- title: term.title,
- date: term.date,
- content: term.policy
- }))
+ const data = await getTermsOfService()
+
+ if (!data) {
+ return []
+ }
+
+ return data.terms.map((term) => ({
+ id: term.id,
+ title: term.title,
+ date: term.date,
+ content: term.policy,
+ }))
}
diff --git a/app/[lang]/(terms)/error.tsx b/app/[lang]/(terms)/error.tsx
index 682a734..c689fc3 100644
--- a/app/[lang]/(terms)/error.tsx
+++ b/app/[lang]/(terms)/error.tsx
@@ -7,41 +7,33 @@
**************************************************************************************************/
'use client'
-import {useEffect} from 'react'
+import { useEffect } from 'react'
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
type TErrorProps = {
- error: Error & {digest?: string};
- reset: () => void;
-};
+ error: Error & { digest?: string }
+ reset: () => void
+}
-export default function TermsError({error, reset}: TErrorProps): ReactNode {
- useEffect(() => {
- // Log the error to console for debugging
- console.error('Terms page error:', error)
- }, [error])
+export default function TermsError({ error, reset }: TErrorProps): ReactNode {
+ useEffect(() => {
+ // Log the error to console for debugging
+ console.error('Terms page error:', error)
+ }, [error])
- return (
-
- {'Something went wrong'}
-
- {'We encountered an error while loading this page. Please try again later.'}
-
-
-
-
- )
+ return (
+
+ {'Something went wrong'}
+
+ {'We encountered an error while loading this page. Please try again later.'}
+
+
+
+
+ )
}
diff --git a/app/[lang]/(terms)/layout.tsx b/app/[lang]/(terms)/layout.tsx
index 1fe61e2..b30f6c9 100644
--- a/app/[lang]/(terms)/layout.tsx
+++ b/app/[lang]/(terms)/layout.tsx
@@ -6,35 +6,35 @@
** Sets up responsive container layout with consistent spacing
**************************************************************************************************/
-import {Banner} from '@/app/[lang]/_components/Banner'
+import { Banner } from '@/app/[lang]/_components/Banner'
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
export const metadata: Metadata = {
- title: 'Legal Documents | ShapeShift',
- description: 'ShapeShift privacy policy and terms of service documents.',
- openGraph: {
- title: 'ShapeShift Legal Documents',
- description: 'Privacy Policy and Terms of Service for ShapeShift',
- type: 'website',
- locale: 'en_US',
- url: 'https://shapeshift.com/terms',
- siteName: 'ShapeShift'
- }
+ title: 'Legal Documents | ShapeShift',
+ description: 'ShapeShift privacy policy and terms of service documents.',
+ openGraph: {
+ title: 'ShapeShift Legal Documents',
+ description: 'Privacy Policy and Terms of Service for ShapeShift',
+ type: 'website',
+ locale: 'en_US',
+ url: 'https://shapeshift.com/terms',
+ siteName: 'ShapeShift',
+ },
}
type TTermsLayoutProps = {
- children: ReactNode;
-};
+ children: ReactNode
+}
-export default function TermsLayout({children}: TTermsLayoutProps): ReactNode {
- return (
- <>
- {children}
-
-
-
- )
+export default function TermsLayout({ children }: TTermsLayoutProps): ReactNode {
+ return (
+ <>
+ {children}
+
+
+
+ )
}
diff --git a/app/[lang]/(terms)/privacy-policy/page.tsx b/app/[lang]/(terms)/privacy-policy/page.tsx
index 97a4496..74b8048 100644
--- a/app/[lang]/(terms)/privacy-policy/page.tsx
+++ b/app/[lang]/(terms)/privacy-policy/page.tsx
@@ -6,27 +6,22 @@
** Handles loading states and error cases gracefully
**************************************************************************************************/
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
-import {TermsPage, generateMetadata} from '@/app/[lang]/(terms)/_components/TermsPage'
-import {getPrivacyPolicyItems} from '@/app/[lang]/(terms)/_components/utils'
+import { TermsPage, generateMetadata } from '@/app/[lang]/(terms)/_components/TermsPage'
+import { getPrivacyPolicyItems } from '@/app/[lang]/(terms)/_components/utils'
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
-export const metadata: Metadata = generateMetadata({title: 'Privacy Policy'})
+export const metadata: Metadata = generateMetadata({ title: 'Privacy Policy' })
export default async function PrivacyPolicyPage(): Promise {
- const items = await getPrivacyPolicyItems()
+ const items = await getPrivacyPolicyItems()
- if (!items.length) {
- return notFound()
- }
+ if (!items.length) {
+ return notFound()
+ }
- return (
- {
- const items = await getTermsOfServiceItems()
+ const items = await getTermsOfServiceItems()
- if (!items.length) {
- return notFound()
- }
+ if (!items.length) {
+ return notFound()
+ }
- return (
- = ({children, className}) => {
- const containerRef = useRef(null)
- const [height, setHeight] = useState('auto')
-
- /********************************************************************************************
- * Effect: Sets up ResizeObserver to track content height changes
- * Deps: None - Observer is set up once on mount
- ********************************************************************************************/
- useEffect(() => {
- if (containerRef.current) {
- const resizeObserver = new ResizeObserver(entries => {
- // We only have one entry, so we can use entries[0].
- const observedHeight = entries[0].contentRect.height
- setHeight(observedHeight)
- })
-
- resizeObserver.observe(containerRef.current)
-
- return () => {
- // Cleanup the observer when the component is unmounted
- resizeObserver.disconnect()
- }
- }
- }, [])
-
- return (
-
- {children}
-
- )
+export const AnimateChangeInHeight: React.FC = ({ children, className }) => {
+ const containerRef = useRef(null)
+ const [height, setHeight] = useState('auto')
+
+ /********************************************************************************************
+ * Effect: Sets up ResizeObserver to track content height changes
+ * Deps: None - Observer is set up once on mount
+ ********************************************************************************************/
+ useEffect(() => {
+ if (containerRef.current) {
+ const resizeObserver = new ResizeObserver((entries) => {
+ // We only have one entry, so we can use entries[0].
+ const observedHeight = entries[0].contentRect.height
+ setHeight(observedHeight)
+ })
+
+ resizeObserver.observe(containerRef.current)
+
+ return () => {
+ // Cleanup the observer when the component is unmounted
+ resizeObserver.disconnect()
+ }
+ }
+ }, [])
+
+ return (
+
+ {children}
+
+ )
}
diff --git a/app/[lang]/_components/Banner.tsx b/app/[lang]/_components/Banner.tsx
index a3c8fca..6431333 100644
--- a/app/[lang]/_components/Banner.tsx
+++ b/app/[lang]/_components/Banner.tsx
@@ -1,84 +1,64 @@
import Image from 'next/image'
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
-import {LocalizedLink} from './LocalizedLink'
+import { LocalizedLink } from './LocalizedLink'
import {
- bannerLeftButtonTitle,
- bannerLeftTitle,
- bannerMobileSubtitle,
- bannerRightTitle,
- dAppUrl
+ bannerLeftButtonTitle,
+ bannerLeftTitle,
+ bannerMobileSubtitle,
+ bannerRightTitle,
+ dAppUrl,
} from '../_utils/constants'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
export function Banner(): ReactNode {
- return (
-
-
-
-
{bannerLeftTitle}
+ return (
+
+
+
+
{bannerLeftTitle}
-
-
-
-
{bannerMobileSubtitle}
+
+
+
+
{bannerMobileSubtitle}
-
+
+
- {isWithTitle && (
-
-
{'Read more about ShapeShift.'}
-
-
-
- )}
- {posts.map((post: TBlogPost) => (
-
- ))}
-
+ {isWithTitle && (
+
+
{'Read more about ShapeShift.'}
+
+
+
+ )}
+ {posts.map((post: TBlogPost) => (
+
+ ))}
+
-
- {post?.featuredImg?.url ? (
-
- ) : (
-
- )}
-
+
+ {post?.featuredImg?.url ? (
+
+ ) : (
+
+ )}
+
-
- {post.type?.length > 1 && (
-
{post?.type.join(', ')}
- )}
-
{formatDate(post.publishedAt)}
-
-
-
- )
+
+
+ {post.type?.length > 1 &&
{post?.type.join(', ')}
}
+
{formatDate(post.publishedAt)}
+
+
+
+ )
}
-function PostCard({post, className}: {post: TBlogPost; className?: string}): ReactNode {
- /********************************************************************************************
- * Memo: Creates a date formatting function
- * No dependencies as it's a static function
- ********************************************************************************************/
- const formatDate = useMemo(
- () =>
- (date: string): string => {
- return new Date(date).toLocaleDateString(undefined, {
- year: 'numeric',
- month: 'long',
- day: 'numeric'
- })
- },
- []
- )
+function PostCard({ post, className }: { post: TBlogPost; className?: string }): ReactNode {
+ /********************************************************************************************
+ * Memo: Creates a date formatting function
+ * No dependencies as it's a static function
+ ********************************************************************************************/
+ const formatDate = useMemo(
+ () =>
+ (date: string): string => {
+ return new Date(date).toLocaleDateString(undefined, {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ })
+ },
+ []
+ )
- return (
-
-
- {post?.featuredImg?.url ? (
-
- ) : (
-
- )}
-
+
+ {post?.featuredImg?.url ? (
+
+ ) : (
+
+ )}
+
-
- {post.type?.length > 1 && (
-
{post?.type.join(', ')}
- )}
-
{formatDate(post.publishedAt)}
-
-
-
- )
+
+
+ {post.type?.length > 1 &&
{post?.type.join(', ')}
}
+
{formatDate(post.publishedAt)}
+
+
+
+ )
}
diff --git a/app/[lang]/_components/Button.tsx b/app/[lang]/_components/Button.tsx
index e33e39d..131f882 100644
--- a/app/[lang]/_components/Button.tsx
+++ b/app/[lang]/_components/Button.tsx
@@ -1,55 +1,53 @@
-import {LocalizedLink} from './LocalizedLink'
-import {IconNext} from '../_icons/IconNext'
-import {cl} from '../_utils/cl'
+import { LocalizedLink } from './LocalizedLink'
+import { IconNext } from '../_icons/IconNext'
+import { cl } from '../_utils/cl'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
-type TButtonVariant = 'blue' | 'white';
+type TButtonVariant = 'blue' | 'white'
type TButtonProps = {
- title?: string;
- variant?: TButtonVariant;
- className?: string;
- onClick?: () => void;
- href?: string;
- hasArrow?: boolean;
-};
+ title?: string
+ variant?: TButtonVariant
+ className?: string
+ onClick?: () => void
+ href?: string
+ hasArrow?: boolean
+}
export function Button(props: TButtonProps): ReactNode {
- const {variant = 'blue', hasArrow = false, ...rest} = props
- return (
- <>
- {props.href ? (
-
- {props.title}
- {hasArrow ?
- ) : (
-
- {props.title}
- {hasArrow ?
- )}
-
- )
+ const { variant = 'blue', hasArrow = false, ...rest } = props
+ return (
+ <>
+ {props.href ? (
+
+ {props.title}
+ {hasArrow ?
+ ) : (
+
+ {props.title}
+ {hasArrow ?
+ )}
+
+ )
}
diff --git a/app/[lang]/_components/Carousel.tsx b/app/[lang]/_components/Carousel.tsx
index 8709ee5..cd15d0a 100644
--- a/app/[lang]/_components/Carousel.tsx
+++ b/app/[lang]/_components/Carousel.tsx
@@ -1,6 +1,6 @@
-import {cl} from '../_utils/cl'
+import { cl } from '../_utils/cl'
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
/**************************************************************************************************
* Carousel Component
@@ -32,42 +32,41 @@ import type {ReactNode} from 'react'
*************************************************************************************************/
type TCarouselProps = React.HTMLAttributes & {
- /** The content to be displayed in the carousel */
- children: React.ReactNode;
- /** Whether to pause the animation when hovering over the carousel */
- pauseOnHover?: boolean;
- /** The direction in which the carousel should scroll */
- direction?: 'left' | 'right';
- /** The speed of the carousel animation in seconds (lower = faster) */
- speed?: number;
-};
+ /** The content to be displayed in the carousel */
+ children: React.ReactNode
+ /** Whether to pause the animation when hovering over the carousel */
+ pauseOnHover?: boolean
+ /** The direction in which the carousel should scroll */
+ direction?: 'left' | 'right'
+ /** The speed of the carousel animation in seconds (lower = faster) */
+ speed?: number
+}
export function Carousel({
- children,
- pauseOnHover = false,
- direction = 'left',
- //The lower the number, the faster the carousel
- speed = 20,
- className,
- ...props
+ children,
+ pauseOnHover = false,
+ direction = 'left',
+ //The lower the number, the faster the carousel
+ speed = 20,
+ className,
+ ...props
}: TCarouselProps): ReactNode {
- return (
-
-
-
- {children}
- {children}
-
-
-
+
+
+ {children}
+ {children}
+
+
+
-
-
+ return (
+
+
+
-
-
{data.tag}
-
- {data.title}
-
-
-
-
- )
+
+
{data.tag}
+
+ {data.title}
+
+
+
+
+ )
}
diff --git a/app/[lang]/_components/ChatwootWidget.tsx b/app/[lang]/_components/ChatwootWidget.tsx
index de27468..b6bb4fc 100644
--- a/app/[lang]/_components/ChatwootWidget.tsx
+++ b/app/[lang]/_components/ChatwootWidget.tsx
@@ -2,30 +2,30 @@
'use client'
import Script from 'next/script'
-import {useEffect, useState} from 'react'
+import { useEffect, useState } from 'react'
-import type {ReactElement} from 'react'
+import type { ReactElement } from 'react'
type SecureMessageEvent = {
- data: {
- type?: string;
- eventName?: string;
- config?: Record;
- payload?: Record;
- };
-} & MessageEvent;
+ data: {
+ type?: string
+ eventName?: string
+ config?: Record
+ payload?: Record
+ }
+} & MessageEvent
declare global {
- // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
- interface Window {
- chatwootSDK?: {
- run: (config: {websiteToken: string; baseUrl: string}) => void;
- isLoaded?: boolean;
- };
- $chatwoot?: {
- reset?: () => void;
- };
- }
+ // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+ interface Window {
+ chatwootSDK?: {
+ run: (config: { websiteToken: string; baseUrl: string }) => void
+ isLoaded?: boolean
+ }
+ $chatwoot?: {
+ reset?: () => void
+ }
+ }
}
const ALLOWED_CHATWOOT_ORIGINS = ['https://app.chatwoot.com', 'https://widget.chatwoot.com']
@@ -37,241 +37,237 @@ const BLOCKED_MESSAGE_TYPES = ['popoutChatWindow', 'chatwoot:popout']
const ALLOWED_CHATWOOT_DOMAINS = ['app.chatwoot.com', 'widget.chatwoot.com']
function isValidUrl(urlString: string): boolean {
- try {
- const url = new URL(urlString)
-
- if (url.protocol !== 'https:') {
- return false
- }
-
- if (!ALLOWED_CHATWOOT_DOMAINS.includes(url.hostname)) {
- return false
- }
-
- if (
- url.pathname.includes('..') ||
- url.pathname.includes('%') ||
- url.search.includes('javascript') ||
- url.hash.includes('javascript')
- ) {
- return false
- }
-
- return true
- } catch {
- return false
- }
+ try {
+ const url = new URL(urlString)
+
+ if (url.protocol !== 'https:') {
+ return false
+ }
+
+ if (!ALLOWED_CHATWOOT_DOMAINS.includes(url.hostname)) {
+ return false
+ }
+
+ if (
+ url.pathname.includes('..') ||
+ url.pathname.includes('%') ||
+ url.search.includes('javascript') ||
+ url.hash.includes('javascript')
+ ) {
+ return false
+ }
+
+ return true
+ } catch {
+ return false
+ }
}
function sanitizeValue(value: unknown, isUrl = false): string | number | boolean | null {
- if (typeof value === 'string') {
- if (isUrl) {
- return isValidUrl(value) ? value : null
- }
-
- const sanitized = value
- .replace(/)<[^<]*)*<\/script>/gi, '')
- .replace(/javascript\s*:/gi, '')
- .replace(/data\s*:/gi, '')
- .replace(/vbscript\s*:/gi, '')
- .replace(/on\w+\s*=/gi, '')
- .replace(/eval\s*\(/gi, '')
- .replace(/Function\s*\(/gi, '')
- .replace(/setTimeout\s*\(/gi, '')
- .replace(/setInterval\s*\(/gi, '')
- .replace(/%0[ad]/gi, '')
- .replace(/%2[ef]/gi, '')
- .replace(/[\r\n\t]/g, '')
-
- return sanitized === value ? sanitized : null
- }
- if (typeof value === 'number' || typeof value === 'boolean') {
- return value
- }
- return null
+ if (typeof value === 'string') {
+ if (isUrl) {
+ return isValidUrl(value) ? value : null
+ }
+
+ const sanitized = value
+ .replace(/)<[^<]*)*<\/script>/gi, '')
+ .replace(/javascript\s*:/gi, '')
+ .replace(/data\s*:/gi, '')
+ .replace(/vbscript\s*:/gi, '')
+ .replace(/on\w+\s*=/gi, '')
+ .replace(/eval\s*\(/gi, '')
+ .replace(/Function\s*\(/gi, '')
+ .replace(/setTimeout\s*\(/gi, '')
+ .replace(/setInterval\s*\(/gi, '')
+ .replace(/%0[ad]/gi, '')
+ .replace(/%2[ef]/gi, '')
+ .replace(/[\r\n\t]/g, '')
+
+ return sanitized === value ? sanitized : null
+ }
+ if (typeof value === 'number' || typeof value === 'boolean') {
+ return value
+ }
+ return null
}
function validateMessageData(data: unknown): data is SecureMessageEvent['data'] {
- if (typeof data !== 'object' || data === null) {
- return false
- }
-
- const obj = data as Record
-
- if (obj.type && typeof obj.type !== 'string') {
- return false
- }
- if (obj.eventName && typeof obj.eventName !== 'string') {
- return false
- }
-
- if (obj.config && typeof obj.config === 'object' && obj.config !== null) {
- for (const [key, value] of Object.entries(obj.config)) {
- const isUrlField = key.toLowerCase().includes('url') || key.toLowerCase().includes('baseurl')
- if (typeof key !== 'string' || sanitizeValue(value, isUrlField) === null) {
- return false
- }
- }
- }
-
- if (obj.payload && typeof obj.payload === 'object' && obj.payload !== null) {
- for (const [key, value] of Object.entries(obj.payload)) {
- const isUrlField = key.toLowerCase().includes('url') || key.toLowerCase().includes('baseurl')
- if (typeof key !== 'string' || sanitizeValue(value, isUrlField) === null) {
- return false
- }
- }
- }
-
- return true
+ if (typeof data !== 'object' || data === null) {
+ return false
+ }
+
+ const obj = data as Record
+
+ if (obj.type && typeof obj.type !== 'string') {
+ return false
+ }
+ if (obj.eventName && typeof obj.eventName !== 'string') {
+ return false
+ }
+
+ if (obj.config && typeof obj.config === 'object' && obj.config !== null) {
+ for (const [key, value] of Object.entries(obj.config)) {
+ const isUrlField = key.toLowerCase().includes('url') || key.toLowerCase().includes('baseurl')
+ if (typeof key !== 'string' || sanitizeValue(value, isUrlField) === null) {
+ return false
+ }
+ }
+ }
+
+ if (obj.payload && typeof obj.payload === 'object' && obj.payload !== null) {
+ for (const [key, value] of Object.entries(obj.payload)) {
+ const isUrlField = key.toLowerCase().includes('url') || key.toLowerCase().includes('baseurl')
+ if (typeof key !== 'string' || sanitizeValue(value, isUrlField) === null) {
+ return false
+ }
+ }
+ }
+
+ return true
}
function createSecureMessageHandler(): (event: MessageEvent) => void {
- return (event: MessageEvent) => {
- if (!event.origin || !ALLOWED_CHATWOOT_ORIGINS.includes(event.origin)) {
- console.warn('[ChatwootWidget] Blocked message from unauthorized origin:', event.origin)
- return
- }
-
- if (!validateMessageData(event.data)) {
- console.warn('[ChatwootWidget] Blocked message with invalid or potentially malicious data')
- return
- }
-
- const data = event.data as SecureMessageEvent['data']
- const messageType = data.type || data.eventName
-
- if (
- !messageType ||
- !ALLOWED_MESSAGE_TYPES.includes(messageType) ||
- BLOCKED_MESSAGE_TYPES.includes(messageType)
- ) {
- console.warn('[ChatwootWidget] Blocked unauthorized message type:', messageType)
- return
- }
-
- const sanitizedData = {
- ...data,
- config: data.config
- ? Object.fromEntries(
- Object.entries(data.config).map(([k, v]) => {
- const isUrlField = k.toLowerCase().includes('url') || k.toLowerCase().includes('baseurl')
- return [k, sanitizeValue(v, isUrlField)]
- })
- )
- : undefined,
- payload: data.payload
- ? Object.fromEntries(
- Object.entries(data.payload).map(([k, v]) => {
- const isUrlField = k.toLowerCase().includes('url') || k.toLowerCase().includes('baseurl')
- return [k, sanitizeValue(v, isUrlField)]
- })
- )
- : undefined
- }
-
- if (process.env.NODE_ENV === 'development') {
- console.log('[ChatwootWidget] Authorized message received:', {
- origin: event.origin,
- type: messageType,
- data: sanitizedData
- })
- }
- }
+ return (event: MessageEvent) => {
+ if (!event.origin || !ALLOWED_CHATWOOT_ORIGINS.includes(event.origin)) {
+ console.warn('[ChatwootWidget] Blocked message from unauthorized origin:', event.origin)
+ return
+ }
+
+ if (!validateMessageData(event.data)) {
+ console.warn('[ChatwootWidget] Blocked message with invalid or potentially malicious data')
+ return
+ }
+
+ const data = event.data as SecureMessageEvent['data']
+ const messageType = data.type || data.eventName
+
+ if (!messageType || !ALLOWED_MESSAGE_TYPES.includes(messageType) || BLOCKED_MESSAGE_TYPES.includes(messageType)) {
+ console.warn('[ChatwootWidget] Blocked unauthorized message type:', messageType)
+ return
+ }
+
+ const sanitizedData = {
+ ...data,
+ config: data.config
+ ? Object.fromEntries(
+ Object.entries(data.config).map(([k, v]) => {
+ const isUrlField = k.toLowerCase().includes('url') || k.toLowerCase().includes('baseurl')
+ return [k, sanitizeValue(v, isUrlField)]
+ })
+ )
+ : undefined,
+ payload: data.payload
+ ? Object.fromEntries(
+ Object.entries(data.payload).map(([k, v]) => {
+ const isUrlField = k.toLowerCase().includes('url') || k.toLowerCase().includes('baseurl')
+ return [k, sanitizeValue(v, isUrlField)]
+ })
+ )
+ : undefined,
+ }
+
+ if (process.env.NODE_ENV === 'development') {
+ console.log('[ChatwootWidget] Authorized message received:', {
+ origin: event.origin,
+ type: messageType,
+ data: sanitizedData,
+ })
+ }
+ }
}
-export function ChatwootWidget({nonce}: {nonce?: string}): ReactElement {
- const [canInit, setCanInit] = useState(false)
- const [isInitialized, setIsInitialized] = useState(false)
- const [hasError, setHasError] = useState(false)
-
- useEffect(() => {
- if (!canInit || isInitialized || hasError) {
- return
- }
-
- if (!process.env.NEXT_PUBLIC_CHATWOOT_API_KEY) {
- console.error('[ChatwootWidget] NEXT_PUBLIC_CHATWOOT_API_KEY is not set')
- setHasError(true)
- return
- }
-
- const secureMessageHandler = createSecureMessageHandler()
- window.addEventListener('message', secureMessageHandler)
- console.log('[ChatwootWidget] Secure message handler registered')
-
- let retryCount = 0
- let retryTimeout: NodeJS.Timeout | undefined
- const maxRetries = 10
- const initialDelay = 100
-
- const initChatwoot = (): void => {
- try {
- if (!window.chatwootSDK) {
- if (retryCount < maxRetries) {
- retryCount++
- const delay = initialDelay * Math.pow(2, retryCount - 1)
- console.log(
- `[ChatwootWidget] Chatwoot SDK not found, retrying in ${delay}ms (attempt ${retryCount}/${maxRetries})`
- )
- retryTimeout = setTimeout(initChatwoot, delay)
- } else {
- console.warn('[ChatwootWidget] Chatwoot SDK not found after maximum retries')
- setHasError(true)
- }
- return
- }
-
- if (window.chatwootSDK.isLoaded) {
- console.log('[ChatwootWidget] Chatwoot SDK already initialized')
- setIsInitialized(true)
- return
- }
-
- console.log('[ChatwootWidget] Chatwoot SDK found, initializing')
- window.chatwootSDK.run({
- websiteToken: '', // Gets set by the backend proxy
- baseUrl: '/api/chatwoot'
- })
- window.chatwootSDK.isLoaded = true
- setIsInitialized(true)
- } catch (error) {
- console.error('[ChatwootWidget] Error initializing Chatwoot:', error)
- setHasError(true)
- }
- }
-
- if (window.chatwootSDK) {
- initChatwoot()
- } else {
- initChatwoot()
- }
-
- return () => {
- if (retryTimeout) {
- clearTimeout(retryTimeout)
- }
- window.removeEventListener('message', secureMessageHandler)
- console.log('[ChatwootWidget] Secure message handler removed')
- }
- }, [canInit, isInitialized, hasError])
-
- return (
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
- {children}
-
-
-
-
-
-
-
-
-