defi-ticker

1'use client';
2 
3import type { HTMLAttributes, ReactNode } from 'react';
4import { createContext, memo, useContext, useMemo } from 'react';
5import { Avatar, AvatarFallback, AvatarImage } from '@repo/shadcn-ui/components/ui/avatar';
6import { cn } from '@repo/shadcn-ui/lib/utils';
7 
8type DeFiTickerContextValue = {
9    formatter: Intl.NumberFormat;
10};
11 
12const DEFAULT_CURRENCY = 'USD';
13const DEFAULT_LOCALE = 'en-US';
14 
15const defaultFormatter = new Intl.NumberFormat(DEFAULT_LOCALE, {
16    style: 'currency',
17    currency: DEFAULT_CURRENCY,
18    minimumFractionDigits: 2,
19    maximumFractionDigits: 2,
20});
21 
22const DeFiTickerContext = createContext<DeFiTickerContextValue>({
23    formatter: defaultFormatter,
24});
25 
26export const useDeFiTickerContext = () => useContext(DeFiTickerContext);
27 
28export type DeFiTickerProps = HTMLAttributes<HTMLButtonElement> & {
29    currency?: string;
30    locale?: string;
31};
32 
33export const DeFiTicker = memo(
34    ({
35        children,
36        className,
37        currency = DEFAULT_CURRENCY,
38        locale = DEFAULT_LOCALE,
39        ...props
40    }: DeFiTickerProps & { children: ReactNode }) => {
41        const formatter = useMemo(() => {
42            try {
43                return new Intl.NumberFormat(locale, {
44                    style: 'currency',
45                    currency: currency.toUpperCase(),
46                    minimumFractionDigits: 2,
47                    maximumFractionDigits: 2,
48                });
49            } catch {
50                return defaultFormatter;
51            }
52        }, [currency, locale]);
53 
54        return (
55            <DeFiTickerContext.Provider value={{ formatter }}>
56                <button
57                    className={cn(
58                        'inline-flex items-center gap-1.5 whitespace-nowrap align-middle',
59                        className
60                    )}
61                    type="button"
62                    {...props}
63                >
64                    {children}
65                </button>
66            </DeFiTickerContext.Provider>
67        );
68    }
69);
70DeFiTicker.displayName = 'DeFiTicker';
71 
72export type DeFiTickerIconProps = HTMLAttributes<HTMLImageElement> & {
73    src: string;
74    symbol: string;
75};
76 
77export const DeFiTickerIcon = memo(
78    ({ src, symbol, className, ...props }: DeFiTickerIconProps) => {
79        if (!src) {
80            return null;
81        }
82        return (
83            <Avatar
84                className={cn('size-7 border border-border bg-muted p-1', className)}
85            >
86// … truncated