Advanced configuration

The MarketProvider component can be configured with a variety of options to customize the behavior and appearance of the market. The MarketProvider component accepts the following props:

interface MarketProviderProps {
    children: React.ReactNode;
    initializationConfig: InitializationConfig;
    initialState?: MarketInitialState;
    themeOverride?: Theme;
    configOverride?: Config;
}

​

initializationConfig

The initializationConfig prop is required and contains the following properties:

interface InitializationConfig {
    partnerId: string;
    alwaysOpen?: boolean;
    fullscreenMobile?: boolean;
    flat?: boolean;
}

• partnerId (required): The partner ID.
• alwaysOpen (optional): If set to true, the market will always be open and the isOpen state will be ignored.
• fullscreenMobile (optional): If set to true, the market will be displayed in fullscreen mode on mobile devices.
• flat (optional): If set to true, the market will be displayed in flat mode. It will not float over the page content.

​

initialState

The initialState prop is optional and contains the following properties:

interface MarketInitialState {
    isOpen?: boolean;
    pageNumber?: number;
    height?: number;
    searchQuery?: string;
    marketListings?: MarketListing[];
    basket?: MarketBasketItem | null;
    orderId?: string | null;
    currencyEstimates?: CurrencyEstimate[];
    selectedCurrency?: string;
    pages?: ReactElement[];
    seconds?: number;
    isMobile?: boolean;
    opacity?: number;
    transitionSpeed?: number;
}

• isOpen (optional): If set to true, the market will be open by default.
• pageNumber (optional): The page number to display when the market is opened.
• height (optional): The height of the market when it is open.
• searchQuery (optional): The search query to display when the market is opened.
• marketListings (optional): The market listings to display when the market is opened.
• basket (optional): The basket to display in checkout when the market is opened.
• orderId (optional): The order ID when the market is opened.
• currencyEstimates (optional): The currency estimates to display when the market is opened.
• selectedCurrency (optional): The selected currency to display when the market is opened.
• pages (optional): The pages of the modal when the market is opened.
• seconds (optional): The seconds to display on the currency estimation timer when the market is opened.
• isMobile (optional): If set to true, the market will be displayed in mobile mode.
• opacity (optional): The opacity of the market when it is open.
• transitionSpeed (optional): The transition speed of the market when it is open.

​

themeOverride

The themeOverride prop is optional and can be used to override the theme. It contains the following properties:

interface Theme {
    primaryColor?: string;
    secondaryColor?: string;
    backgroundColor?: string;
    overlayBackgroundColor?: string;
    textColor?: string;
    backgroundColorSecondary?: string;
    inputBorderColor?: string;
    inputBorderColorFocus?: string;
    inputFontFamily?: string;
    inputFontColor?: string;
    inputPlaceholder?: string;
    darkTheme: boolean;
}

• primaryColor (optional): The primary color of the theme.
• secondaryColor (optional): The secondary color of the theme.
• backgroundColor (optional): The background color of the theme.
• overlayBackgroundColor (optional): The overlay background color of the theme.
• textColor (optional): The text color of the theme.
• backgroundColorSecondary (optional): The secondary background color of the theme.
• inputBorderColor (optional): The input border color of the theme.
• inputBorderColorFocus (optional): The input border color when focused of the theme.
• inputFontFamily (optional): The input font family of the theme.
• inputFontColor (optional): The input font color of the theme.
• inputPlaceholder (optional): The input placeholder of the theme.
• darkTheme (required): If set to true, the dark theme will be used.

​

configOverride

The configOverride prop is optional and can be used to override the configuration. It contains the following properties:

interface Config {
    apiUrl?: string;
    markets: string[];
    fiat?: boolean;
    cryptocurrencies: string[];
    stripe: {
        connectedAccountId: string;
    };
    skipPayment: boolean;
}

• apiUrl (optional): The API URL of the marketplace.
• markets (required): The domain markets of the marketplace.
• fiat (optional): If set to true, fiat currency will be available.
• cryptocurrencies (required): The cryptocurrencies of the marketplace.
• stripe (required): The Stripe configuration of the marketplace.
  • connectedAccountId (required): The Stripe connected account ID of the partner.
• skipPayment (optional): If set to true, payment will be skipped.