> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superlink.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Advanced configuration

> The MarketProvider component can be configured with a variety of options to customize the behavior and appearance of the market.

<Warning>**Proceed with caution**<br /><br />Supplying configuration other than the `initializationConfig` is not recommended for regular use of the marketplace. Proceed with caution!</Warning>

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:

```typescript theme={null}
interface MarketProviderProps {
    children: React.ReactNode;
    initializationConfig: InitializationConfig;
    initialState?: MarketInitialState;
    themeOverride?: Theme;
    configOverride?: Config;
}
```

### initializationConfig

The `initializationConfig` prop is required and contains the following properties:

```typescript theme={null}
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:

```typescript theme={null}
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:

```typescript theme={null}
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:

```typescript theme={null}
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.