@ton/appkit-react 0.0.6-alpha.3 → 1.0.0-alpha.0

package/src/components/ui/select/select.tsx

@@ -0,0 +1,274 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import type { ComponentPropsWithoutRef, ComponentRef, FC, ReactNode } from 'react';
+import clsx from 'clsx';
+
+import { Button } from '../button';
+import type { ButtonProps } from '../button';
+import styles from './select.module.css';
+import { SelectContext, useSelectContext } from './use-select-context';
+
+export interface SelectRootProps {
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial value when uncontrolled. */
+    defaultValue?: string;
+    /** Called whenever the selected value changes. */
+    onValueChange?: (value: string) => void;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called whenever the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** When true, the trigger is non-interactive. */
+    disabled?: boolean;
+    children: ReactNode;
+}
+
+const SelectRoot: FC<SelectRootProps> = ({
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    disabled,
+    children,
+}) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState<string | undefined>(defaultValue);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+
+    const isValueControlled = controlledValue !== undefined;
+    const isOpenControlled = controlledOpen !== undefined;
+    const value = isValueControlled ? controlledValue : uncontrolledValue;
+    const open = isOpenControlled ? controlledOpen : uncontrolledOpen;
+
+    const triggerRef = useRef<HTMLButtonElement | null>(null);
+    const contentRef = useRef<HTMLDivElement | null>(null);
+
+    const setOpen = useCallback(
+        (next: boolean) => {
+            if (!isOpenControlled) setUncontrolledOpen(next);
+            onOpenChange?.(next);
+        },
+        [isOpenControlled, onOpenChange],
+    );
+
+    const handleValueChange = useCallback(
+        (next: string) => {
+            if (!isValueControlled) setUncontrolledValue(next);
+            onValueChange?.(next);
+        },
+        [isValueControlled, onValueChange],
+    );
+
+    const ctx = useMemo(
+        () => ({
+            value,
+            onValueChange: handleValueChange,
+            open,
+            setOpen,
+            disabled,
+            triggerRef,
+            contentRef,
+        }),
+        [value, handleValueChange, open, setOpen, disabled],
+    );
+
+    return <SelectContext.Provider value={ctx}>{children}</SelectContext.Provider>;
+};
+
+export type SelectTriggerProps = ButtonProps;
+
+const SelectTrigger = forwardRef<ComponentRef<'button'>, SelectTriggerProps>(
+    ({ children, onClick, disabled, ...props }, forwardedRef) => {
+        const ctx = useSelectContext();
+        const isDisabled = disabled || ctx.disabled;
+
+        const setRefs = useCallback(
+            (node: HTMLButtonElement | null) => {
+                ctx.triggerRef.current = node;
+                if (typeof forwardedRef === 'function') forwardedRef(node);
+                else if (forwardedRef) forwardedRef.current = node;
+            },
+            [ctx.triggerRef, forwardedRef],
+        );
+
+        return (
+            <Button
+                ref={setRefs}
+                type="button"
+                aria-haspopup="listbox"
+                aria-expanded={ctx.open}
+                data-state={ctx.open ? 'open' : 'closed'}
+                disabled={isDisabled}
+                onClick={(event) => {
+                    onClick?.(event);
+                    if (!event.defaultPrevented) ctx.setOpen(!ctx.open);
+                }}
+                {...props}
+            >
+                {children}
+            </Button>
+        );
+    },
+);
+
+SelectTrigger.displayName = 'SelectTrigger';
+
+export interface SelectContentProps extends ComponentPropsWithoutRef<'div'> {
+    /** Horizontal alignment relative to the trigger. */
+    align?: 'start' | 'end';
+    /** Gap between trigger and content in pixels. */
+    sideOffset?: number;
+}
+
+interface ContentPosition {
+    top: number;
+    left?: number;
+    right?: number;
+    minWidth: number;
+}
+
+const SelectContent: FC<SelectContentProps> = ({
+    children,
+    className,
+    align = 'start',
+    sideOffset = 4,
+    style,
+    ...props
+}) => {
+    const ctx = useSelectContext();
+    const { open, setOpen, contentRef, triggerRef } = ctx;
+    const [position, setPosition] = useState<ContentPosition | null>(null);
+
+    const updatePosition = useCallback(() => {
+        const trigger = triggerRef.current;
+        if (!trigger) return;
+        const rect = trigger.getBoundingClientRect();
+        setPosition({
+            top: rect.bottom + sideOffset,
+            left: align === 'end' ? undefined : rect.left,
+            right: align === 'end' ? window.innerWidth - rect.right : undefined,
+            minWidth: rect.width,
+        });
+    }, [align, sideOffset, triggerRef]);
+
+    useEffect(() => {
+        if (!open) {
+            setPosition(null);
+            return;
+        }
+
+        updatePosition();
+
+        const handler = () => updatePosition();
+        // capture: true so we react to scroll events from inner scrollable containers
+        // (e.g. the Modal body) — not just the window.
+        window.addEventListener('scroll', handler, true);
+        window.addEventListener('resize', handler);
+        return () => {
+            window.removeEventListener('scroll', handler, true);
+            window.removeEventListener('resize', handler);
+        };
+    }, [open, updatePosition]);
+
+    useEffect(() => {
+        if (!open) return;
+
+        const handlePointerDown = (event: MouseEvent) => {
+            const target = event.target as Node | null;
+            if (!target) return;
+            if (contentRef.current?.contains(target)) return;
+            if (triggerRef.current?.contains(target)) return;
+            setOpen(false);
+        };
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') setOpen(false);
+        };
+
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [open, setOpen, contentRef, triggerRef]);
+
+    if (!open || !position || typeof document === 'undefined') return null;
+
+    return createPortal(
+        <div
+            ref={contentRef}
+            role="listbox"
+            data-state="open"
+            data-align={align}
+            className={clsx(styles.content, className)}
+            style={{
+                position: 'fixed',
+                top: position.top,
+                left: position.left,
+                right: position.right,
+                minWidth: position.minWidth,
+                ...style,
+            }}
+            {...props}
+        >
+            {children}
+        </div>,
+        document.body,
+    );
+};
+
+export interface SelectItemProps extends ComponentPropsWithoutRef<'div'> {
+    value: string;
+    disabled?: boolean;
+}
+
+const SelectItem = forwardRef<ComponentRef<'div'>, SelectItemProps>(
+    ({ value, disabled, children, className, onClick, ...props }, ref) => {
+        const ctx = useSelectContext();
+        const isSelected = ctx.value === value;
+
+        return (
+            <div
+                ref={ref}
+                role="option"
+                aria-selected={isSelected}
+                aria-disabled={disabled || undefined}
+                data-state={isSelected ? 'checked' : 'unchecked'}
+                data-disabled={disabled || undefined}
+                tabIndex={disabled ? -1 : 0}
+                className={clsx(styles.item, className)}
+                onClick={(event) => {
+                    onClick?.(event);
+                    if (event.defaultPrevented || disabled) return;
+                    ctx.onValueChange(value);
+                    ctx.setOpen(false);
+                }}
+                {...props}
+            >
+                {children}
+            </div>
+        );
+    },
+);
+
+SelectItem.displayName = 'SelectItem';
+
+export const Select = {
+    Root: SelectRoot,
+    Trigger: SelectTrigger,
+    Content: SelectContent,
+    Item: SelectItem,
+};

package/src/components/ui/select/use-select-context.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { createContext, useContext } from 'react';
+import type { RefObject } from 'react';
+
+export interface SelectContextValue {
+    value: string | undefined;
+    onValueChange: (value: string) => void;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    disabled: boolean | undefined;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    contentRef: RefObject<HTMLDivElement | null>;
+}
+
+export const SelectContext = createContext<SelectContextValue | null>(null);
+
+export const useSelectContext = (): SelectContextValue => {
+    const ctx = useContext(SelectContext);
+    if (!ctx) throw new Error('Select compound components must be used within Select.Root');
+    return ctx;
+};

package/src/components/ui/skeleton/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export { Skeleton } from './skeleton';
+export type { SkeletonProps } from './skeleton';

package/src/components/ui/skeleton/skeleton.tsx

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { forwardRef } from 'react';
+import type { ComponentProps } from 'react';
+import clsx from 'clsx';
+
+import styles from './skeleton.module.css';
+
+export interface SkeletonProps extends ComponentProps<'div'> {
+    width?: string | number;
+    height?: string | number;
+}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+    ({ className, width, height, style, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={clsx(styles.skeleton, className)}
+                style={{ width, height, ...style }}
+                {...props}
+            />
+        );
+    },
+);
+
+Skeleton.displayName = 'Skeleton';

package/src/components/ui/tabs/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './tabs';

package/src/components/ui/tabs/tabs.tsx

@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { createContext, useCallback, useContext, useState } from 'react';
+import type { ComponentProps, FC, ReactNode } from 'react';
+import clsx from 'clsx';
+
+import styles from './tabs.module.css';
+
+interface TabsContextValue {
+    value: string;
+    onValueChange: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue>({
+    value: '',
+    onValueChange: () => {},
+});
+
+export interface TabsProps extends ComponentProps<'div'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+}
+
+export const Tabs: FC<TabsProps> = ({
+    value: controlledValue,
+    defaultValue = '',
+    onValueChange,
+    children,
+    className,
+    ...props
+}) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : uncontrolledValue;
+
+    const handleValueChange = useCallback(
+        (newValue: string) => {
+            if (!isControlled) {
+                setUncontrolledValue(newValue);
+            }
+            onValueChange?.(newValue);
+        },
+        [isControlled, onValueChange],
+    );
+
+    return (
+        <TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
+            <div className={clsx(styles.root, className)} {...props}>
+                {children}
+            </div>
+        </TabsContext.Provider>
+    );
+};
+
+export interface TabsListProps extends ComponentProps<'div'> {
+    children: ReactNode;
+}
+
+export const TabsList: FC<TabsListProps> = ({ children, className, ...props }) => {
+    return (
+        <div role="tablist" className={clsx(styles.list, className)} {...props}>
+            {children}
+        </div>
+    );
+};
+
+export interface TabsTriggerProps extends ComponentProps<'button'> {
+    value: string;
+    children: ReactNode;
+}
+
+export const TabsTrigger: FC<TabsTriggerProps> = ({ value, children, className, ...props }) => {
+    const ctx = useContext(TabsContext);
+    const isActive = ctx.value === value;
+
+    return (
+        <button
+            role="tab"
+            type="button"
+            aria-selected={isActive}
+            data-state={isActive ? 'active' : 'inactive'}
+            className={clsx(styles.trigger, className)}
+            onClick={() => ctx.onValueChange(value)}
+            {...props}
+        >
+            {children}
+        </button>
+    );
+};
+
+export interface TabsContentProps extends ComponentProps<'div'> {
+    value: string;
+    children: ReactNode;
+}
+
+export const TabsContent: FC<TabsContentProps> = ({ value, children, className, ...props }) => {
+    const ctx = useContext(TabsContext);
+    const isActive = ctx.value === value;
+
+    if (!isActive) return null;
+
+    return (
+        <div role="tabpanel" data-state={isActive ? 'active' : 'inactive'} className={className} {...props}>
+            {children}
+        </div>
+    );
+};

package/src/features/balances/components/balance-badge/balance-badge.tsx

@@ -10,9 +10,9 @@ import { formatUnits } from '@ton/appkit';
 import type { FC, ComponentProps } from 'react';
 import clsx from 'clsx';
 
-import { Block } from '../../../../components/block';
+import { Block } from '../../../../components/ui/block';
 import styles from './balance-badge.module.css';
-import { CircleIcon } from '../../../../components/circle-icon';
+import { Logo } from '../../../../components/ui/logo';
 
 const BalanceBadgeContainer: FC<ComponentProps<'div'>> = ({ className, ...props }) => {
     return <Block direction="row" className={clsx(styles.balance, className)} {...props} />;
@@ -40,7 +40,7 @@ const BalanceSymbol: FC<ComponentProps<'span'> & { symbol: string }> = ({ classN
 
 export const BalanceBadge = {
     Container: BalanceBadgeContainer,
-    Icon: CircleIcon,
+    Icon: Logo,
     BalanceBlock: BalanceBlock,
     Symbol: BalanceSymbol,
     Balance: Balance,

package/src/features/balances/components/currency-item/currency-item.tsx

@@ -9,7 +9,8 @@
 import type { FC, ComponentProps } from 'react';
 import clsx from 'clsx';
 
-import { CircleIcon } from '../../../../components/circle-icon';
+import { Logo } from '../../../../components/ui/logo';
+import { VerifiedIcon } from '../../../../components/ui/icons';
 import styles from './currency-item.module.css';
 
 export interface CurrencyItemProps extends ComponentProps<'button'> {
@@ -31,29 +32,25 @@ export const CurrencyItem: FC<CurrencyItemProps> = ({
 }) => {
     return (
         <button className={clsx(styles.currencyItem, className)} {...props}>
-            <CircleIcon className={styles.icon} size={40} src={icon} fallback={ticker[0]} alt={ticker} />
+            <Logo className={styles.icon} size={40} src={icon} fallback={ticker[0]} alt={ticker} />
 
             <div className={styles.info}>
                 <div className={styles.header}>
                     <h4 className={styles.name}>{name || ticker}</h4>
 
-                    {isVerified && (
-                        <svg className={styles.verified} fill="currentColor" viewBox="0 0 20 20">
-                            <path
-                                fillRule="evenodd"
-                                d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                                clipRule="evenodd"
-                            />
-                        </svg>
-                    )}
+                    {isVerified && <VerifiedIcon className={styles.verified} />}
                 </div>
 
-                <p className={styles.ticker}>{ticker}</p>
+                <p className={styles.ticker}>
+                    {ticker} • {name}
+                </p>
             </div>
 
-            <div className={styles.balance}>
-                <p>{balance ?? '0'}</p>
-            </div>
+            {balance && (
+                <div className={styles.balance}>
+                    <p>{balance ?? '0'}</p>
+                </div>
+            )}
         </button>
     );
 };

package/src/features/balances/components/send-jetton-button/send-jetton-button.tsx

@@ -10,8 +10,7 @@ import { useCallback, useMemo } from 'react';
 import type { FC } from 'react';
 import { createTransferJettonTransaction, formatUnits, parseUnits } from '@ton/appkit';
 
-import { useI18n } from '../../../../hooks/use-i18n';
-import { useAppKit } from '../../../../hooks/use-app-kit';
+import { useI18n, useAppKit } from '../../../settings';
 import type { SendProps } from '../../../transaction';
 import { Send } from '../../../transaction';
 

package/src/features/balances/components/send-ton-button/send-ton-button.tsx

@@ -10,8 +10,7 @@ import { useCallback } from 'react';
 import type { FC } from 'react';
 import { createTransferTonTransaction } from '@ton/appkit';
 
-import { useI18n } from '../../../../hooks/use-i18n';
-import { useAppKit } from '../../../../hooks/use-app-kit';
+import { useI18n, useAppKit } from '../../../settings';
 import type { SendProps } from '../../../transaction';
 import { Send } from '../../../transaction';
 

package/src/features/balances/hooks/use-balance-by-address.ts

@@ -9,9 +9,10 @@
 import { getBalanceByAddressQueryOptions } from '@ton/appkit/queries';
 import type { GetBalanceByAddressData, GetBalanceErrorType, GetBalanceByAddressQueryConfig } from '@ton/appkit/queries';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 import { useQuery } from '../../../libs/query';
 import type { UseQueryReturnType } from '../../../libs/query';
+import { useNetwork } from '../../network';
 
 export type UseBalanceByAddressParameters<selectData = GetBalanceByAddressData> =
     GetBalanceByAddressQueryConfig<selectData>;
@@ -28,6 +29,9 @@ export const useBalanceByAddress = <selectData = GetBalanceByAddressData>(
     parameters: UseBalanceByAddressParameters<selectData> = {},
 ): UseBalanceByAddressReturnType<selectData> => {
     const appKit = useAppKit();
+    const walletNetwork = useNetwork();
 
-    return useQuery(getBalanceByAddressQueryOptions(appKit, parameters));
+    return useQuery(
+        getBalanceByAddressQueryOptions(appKit, { ...parameters, network: parameters.network ?? walletNetwork }),
+    );
 };

package/src/features/balances/hooks/use-watch-balance-by-address.ts

@@ -12,7 +12,7 @@ import { watchBalanceByAddress, hasStreamingProvider, resolveNetwork } from '@to
 import type { WatchBalanceByAddressOptions } from '@ton/appkit';
 import { handleBalanceUpdate } from '@ton/appkit/queries';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 
 export type UseWatchBalanceByAddressParameters = Partial<WatchBalanceByAddressOptions>;
 

package/src/features/jettons/hooks/use-jetton-balance-by-address.ts

@@ -13,9 +13,10 @@ import type {
     GetJettonBalanceByAddressQueryConfig,
 } from '@ton/appkit/queries';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 import { useQuery } from '../../../libs/query';
 import type { UseQueryReturnType } from '../../../libs/query';
+import { useNetwork } from '../../network';
 
 export type UseJettonBalanceByAddressParameters<selectData = GetJettonBalanceByAddressData> =
     GetJettonBalanceByAddressQueryConfig<selectData>;
@@ -32,6 +33,9 @@ export const useJettonBalanceByAddress = <selectData = GetJettonBalanceByAddress
     parameters: UseJettonBalanceByAddressParameters<selectData> = {},
 ): UseJettonBalanceByAddressReturnType<selectData> => {
     const appKit = useAppKit();
+    const walletNetwork = useNetwork();
 
-    return useQuery(getJettonBalanceByAddressQueryOptions(appKit, parameters));
+    return useQuery(
+        getJettonBalanceByAddressQueryOptions(appKit, { ...parameters, network: parameters.network ?? walletNetwork }),
+    );
 };

package/src/features/jettons/hooks/use-jetton-info.ts

@@ -9,9 +9,10 @@
 import { getJettonInfoQueryOptions } from '@ton/appkit/queries';
 import type { GetJettonInfoData, GetJettonInfoErrorType, GetJettonInfoQueryConfig } from '@ton/appkit/queries';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 import { useQuery } from '../../../libs/query';
 import type { UseQueryReturnType } from '../../../libs/query';
+import { useNetwork } from '../../network';
 
 export type UseJettonInfoParameters<selectData = GetJettonInfoData> = GetJettonInfoQueryConfig<selectData>;
 
@@ -27,6 +28,7 @@ export const useJettonInfo = <selectData = GetJettonInfoData>(
     parameters: UseJettonInfoParameters<selectData> = {},
 ): UseJettonInfoReturnType<selectData> => {
     const appKit = useAppKit();
+    const walletNetwork = useNetwork();
 
-    return useQuery(getJettonInfoQueryOptions(appKit, parameters));
+    return useQuery(getJettonInfoQueryOptions(appKit, { ...parameters, network: parameters.network ?? walletNetwork }));
 };

package/src/features/jettons/hooks/use-jetton-wallet-address.ts

@@ -13,9 +13,10 @@ import type {
     GetJettonWalletAddressQueryConfig,
 } from '@ton/appkit/queries';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 import { useQuery } from '../../../libs/query';
 import type { UseQueryReturnType } from '../../../libs/query';
+import { useNetwork } from '../../network';
 
 export type UseJettonWalletAddressParameters<selectData = GetJettonWalletAddressData> =
     GetJettonWalletAddressQueryConfig<selectData>;
@@ -32,6 +33,9 @@ export const useJettonWalletAddress = <selectData = GetJettonWalletAddressData>(
     parameters: UseJettonWalletAddressParameters<selectData> = {},
 ) => {
     const appKit = useAppKit();
+    const walletNetwork = useNetwork();
 
-    return useQuery(getJettonWalletAddressQueryOptions(appKit, parameters));
+    return useQuery(
+        getJettonWalletAddressQueryOptions(appKit, { ...parameters, network: parameters.network ?? walletNetwork }),
+    );
 };