chore: meeting coderabbit suggestions

Author: thesmithdao

app/[lang]/_components/LocalizedLink.tsx

@@ -12,31 +12,77 @@ import type {UrlObject} from 'url'
 
 /* eslint-disable @typescript-eslint/naming-convention */
 declare const __adrsbl: {run: (event: string, conversion: boolean) => void} | undefined
-/* eslint-enable @typescript-eslint/naming-convention */
 
 type TLocalizedLinkProps = LinkProps &
 	AnchorHTMLAttributes<HTMLAnchorElement> & {
 		children: ReactNode
 	}
 
+/**
+ * A localized version of Next.js Link that automatically prepends the current language
+ */
 export const LocalizedLink = forwardRef<HTMLAnchorElement, TLocalizedLinkProps>(
 	({href, children, onClick, ...props}, ref) => {
 		const pathname = usePathname()
 		const currentLanguage = getLanguageFromPath(pathname) || DEFAULT_LANGUAGE
 
-		// Convert href to string for processing
-		const hrefString =
-			typeof href === 'string'
-				? href
-				: typeof href === 'object' &&
-					  href !== null &&
-					  'pathname' in href &&
-					  typeof (href as UrlObject).pathname === 'string'
-					? (href as UrlObject).pathname
-					: ''
+		// Preserve UrlObject hrefs (pathname + query + hash) when provided
+		const hrefObj = typeof href === 'object' && href !== null ? (href as UrlObject) : undefined
 
-		// External app.shapeshift.com link detection
-		const isAppLink = typeof hrefString === 'string' && /^https?:\/\/app\.shapeshift\.com(\/|$)/i.test(hrefString)
+		// Convert href to string for pathname-based processing when needed
+		const hrefString = typeof href === 'string' ? href : (hrefObj?.pathname ?? '')
+
+		// Helper to build a full absolute URL string from a UrlObject when it has host/protocol
+		const fullUrlFromObj = (obj: UrlObject) => {
+			if (!obj) {
+				return ''
+			}
+			const protocol = (obj.protocol as string) ?? ''
+			const host = (obj.host as string) ?? (obj.hostname as string) ?? ''
+			const pathname = (obj.pathname as string) ?? ''
+			const hash = (obj.hash as string) ?? ''
+			let query = ''
+			// Support both string-form and object-form queries.
+			if (obj.query) {
+				if (typeof obj.query === 'string') {
+					// Use provided string query, ensure it starts with '?'
+					const raw = obj.query as string
+					query = raw.startsWith('?') ? raw : `?${raw}`
+				} else if (typeof obj.query === 'object') {
+					// obj.query can be Record<string, string | string[]>.
+					const params = new URLSearchParams()
+					for (const [k, v] of Object.entries(obj.query as Record<string, string | string[]>)) {
+						if (Array.isArray(v)) {
+							for (const item of v) {
+								params.append(k, String(item))
+							}
+						} else if (v !== undefined && v !== null) {
+							params.append(k, String(v))
+						} else {
+							params.append(k, '')
+						}
+					}
+					const qs = params.toString()
+					query = qs ? `?${qs}` : ''
+				}
+			}
+			if (host) {
+				return `${protocol || 'https:'}//${host}${pathname}${query}${hash}`
+			}
+			return `${pathname}${query}${hash}`
+		}
+
+		// External app.shapeshift.com link detection (works for string hrefs and UrlObject with host)
+		const isAppLink = (() => {
+			if (typeof href === 'string') {
+				return /^https?:\/\/app\.shapeshift\.com(\/|$)/i.test(href)
+			}
+			if (hrefObj) {
+				const full = fullUrlFromObj(hrefObj)
+				return /^https?:\/\/app\.shapeshift\.com(\/|$)/i.test(full)
+			}
+			return false
+		})()
 
 		// Compose click handler for external app links
 		const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
@@ -50,10 +96,14 @@ export const LocalizedLink = forwardRef<HTMLAnchorElement, TLocalizedLinkProps>(
 				}
 				e.preventDefault()
 				try {
-					window.open(hrefString || (typeof href === 'string' ? href : ''), '_blank', 'noopener,noreferrer')
+					const absolute = hrefObj
+						? fullUrlFromObj(hrefObj)
+						: hrefString || (typeof href === 'string' ? href : '')
+					window.open(absolute, '_blank', 'noopener,noreferrer')
 				} catch {
-					if (hrefString) {
-						window.location.assign(hrefString)
+					const absolute = hrefObj ? fullUrlFromObj(hrefObj) : hrefString
+					if (absolute) {
+						window.location.assign(absolute)
 					}
 				}
 			}
@@ -63,12 +113,16 @@ export const LocalizedLink = forwardRef<HTMLAnchorElement, TLocalizedLinkProps>(
 		}
 
 		// Don't modify external links, anchors, or already localized paths
+		const isExternalObject = !!hrefObj && !!(hrefObj.host || hrefObj.hostname || hrefObj.protocol)
 		if (
-			hrefString?.startsWith('http') ||
-			hrefString?.startsWith('#') ||
-			hrefString?.startsWith('mailto:') ||
-			hrefString?.startsWith('tel:') ||
-			!hrefString?.startsWith('/')
+			typeof href === 'string'
+				? hrefString.startsWith('http') ||
+					hrefString.startsWith('#') ||
+					hrefString.startsWith('mailto:') ||
+					hrefString.startsWith('tel:') ||
+					!hrefString.startsWith('/')
+				: // href is an object
+					isExternalObject
 		) {
 			return (
 				<Link
@@ -84,12 +138,18 @@ export const LocalizedLink = forwardRef<HTMLAnchorElement, TLocalizedLinkProps>(
 		// Check if the href already has a language prefix
 		const hasLanguagePrefix = hrefString.match(/^\/([a-z]{2})(\/|$)/)
 
-		// Build the localized href
-		let localizedHref = hrefString
+		// Build the localized href. Preserve query/hash by returning a UrlObject when the original
+		// href was a UrlObject, otherwise return a string.
+		let localizedPathname = hrefString
 		if (!hasLanguagePrefix && currentLanguage !== DEFAULT_LANGUAGE) {
-			localizedHref = `/${currentLanguage}${hrefString}`
+			localizedPathname = `/${currentLanguage}${hrefString}`
 		}
 
+		const localizedHref = hrefObj
+			? // copy the original UrlObject but replace/normalize pathname
+				({...hrefObj, pathname: localizedPathname} as UrlObject)
+			: localizedPathname
+
 		return (
 			<Link
 				href={localizedHref}