Proceed with caution

Supplying configuration other than the initializationConfig is not recommended for regular use of the marketplace. Proceed with caution!
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.