@orderly.network/react-app/dist/index.d.mts

Create React App with Orderly Network components

import react, { ReactNode, ComponentType, PropsWithChildren, Component, ErrorInfo } from 'react';
import { ExtensionPosition, OrderlyThemeProviderProps } from '@orderly.network/ui';
import { ConfigProviderProps, ExclusiveConfigProviderProps, Chains, WalletState, RestrictedInfoReturns, RestrictedInfoOptions, OrderValidationResult } from '@orderly.network/hooks';
import { Chain, NetworkId, AccountStatusEnum } from '@orderly.network/types';
import * as react_jsx_runtime from 'react/jsx-runtime';

type Logo = {
    img?: string;
    component?: ReactNode;
    className?: string;
};
type AppLogos = Partial<{
    main: Logo;
    secondary: Logo;
}>;
type OrderlyAppConfig = {
    appIcons?: AppLogos;
    dateFormatting?: string;
    components?: {
        [position in ExtensionPosition]: ComponentType;
    };
} & Partial<Omit<ConfigProviderProps, "brokerId" | "brokerName" | "configStore" | "networkId">> & ExclusiveConfigProviderProps;

type ReturnChain = Pick<Chain, "id"> & Partial<Omit<Chain, "id">>;
type DefaultChain = {
    mainnet?: ReturnChain;
    testnet?: ReturnChain;
} | ((networkId: NetworkId, chains: Chains) => ReturnChain) | undefined;

declare const useWalletStateHandle: (options: {
    currentChainId?: number;
}) => {
    connectWallet: () => Promise<{
        wallet?: WalletState;
        status?: AccountStatusEnum;
        wrongNetwork?: boolean;
    } | null>;
    wrongNetwork: boolean;
};

type RouteOption = {
    href: "/portfolio" | "/portfolio/history" | "/perp";
    name: string;
};
type WidgetConfigs = {
    scanQRCode?: {
        onSuccess?: (url: string) => void;
    };
    subAccount?: {
        /** @deprecated The number of custom sub-accounts needs to be configured in sync with the backend. If you’re not sure about it, please don’t set this value. */
        maxSubAccountCount: number;
    };
    withdraw?: {
        /**
         * Control the "withdraw to other wallet" feature.
         * - `true` / `undefined`: enable external wallet trigger & management.
         * - `false`: only show the connected wallet address without external
         *   wallet selector or add-wallet dialog.
         */
        enableWithdrawToExternalWallet?: boolean;
    };
};
type AppContextState = {
    connectWallet: ReturnType<typeof useWalletStateHandle>["connectWallet"];
    /**
     * Whether the current network is not supported
     */
    wrongNetwork: boolean;
    disabledConnect: boolean;
    currentChainId: number | undefined;
    setCurrentChainId: (chainId: number | undefined) => void;
    onChainChanged?: (chainId: number, state: {
        isTestnet: boolean;
        isWalletConnected: boolean;
    }) => void;
    restrictedInfo: RestrictedInfoReturns;
    showAnnouncement: boolean;
    setShowAnnouncement: (show: boolean) => void;
    onRouteChange?: (option: RouteOption) => void;
    widgetConfigs?: WidgetConfigs;
    initialized: boolean;
};
declare const useAppContext: () => AppContextState;

type AppStateProviderProps = {
    defaultChain?: DefaultChain;
    restrictedInfo?: RestrictedInfoOptions;
} & Pick<AppContextState, "onChainChanged" | "onRouteChange" | "widgetConfigs">;

type OrderlyAppProviderProps = PropsWithChildren<OrderlyAppConfig & AppStateProviderProps & OrderlyThemeProviderProps>;
declare const OrderlyAppProvider: react.FC<OrderlyAppProviderProps>;

type ThemeContextState = {
    appIcons?: AppLogos;
    brokerName: string;
};
declare const useAppConfig: () => ThemeContextState;

declare const useDataTap: <T = any>(data: T, options?: {
    skip?: false;
    fallbackData?: T;
    accountStatus?: AccountStatusEnum;
}) => T | null;

type Keys = keyof OrderValidationResult;
declare function useOrderEntryFormErrorMsg(errors: OrderValidationResult | null): {
    getErrorMsg: (key: Keys, customValue?: string) => string;
};

type ErrorBoundaryState = {
    hasError: boolean;
    error?: Error;
    errorInfo?: ErrorInfo;
};
type ErrorBoundaryProps = PropsWithChildren<{
    className?: string;
    onError?: (error: Error, errorInfo: ErrorInfo) => void;
    icon?: ReactNode;
    title?: string;
    description?: string;
    refreshButtonText?: string;
    onRefresh?: () => void;
}>;
declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
    constructor(props: ErrorBoundaryProps);
    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
    render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | null | undefined;
}

declare function useCanTrade(): boolean;

export { type AppLogos, type AppStateProviderProps, ErrorBoundary, OrderlyAppProvider, type OrderlyAppProviderProps, useAppConfig, useAppContext, useCanTrade, useDataTap, useOrderEntryFormErrorMsg };