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

Create React App with Orderly Network components

import react, { ReactNode, ComponentType, PropsWithChildren } from 'react';
import { ExtensionPosition, OrderlyThemeProviderProps } from '@orderly.network/ui';
import { ConfigProviderProps, ExclusiveConfigProviderProps, Chains, WalletState, RestrictedInfoOptions, RestrictedInfoReturns, OrderValidationResult } from '@orderly.network/hooks';
import { Chain, NetworkId, AccountStatusEnum } from '@orderly.network/types';

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";
    name: string;
};
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;
};
declare const useAppContext: () => AppContextState;
type AppStateProviderProps = {
    defaultChain?: DefaultChain;
    restrictedInfo?: RestrictedInfoOptions;
} & Pick<AppContextState, "onChainChanged" | "onRouteChange">;

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): {
    parseErrorMsg: (key: Keys) => string;
};

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