# FrakSetup object

# `FrakSetup` object

The `FrakSetup` object is used to configure the Frak Components library in your project. It allows you to set up metadata and other configuration options for your application.

It is required to initialize the Frak Components library and should be passed as a global variable in your project.

You can generate a config object using the [Frak SDK Builder](https://showcase.frak.id/configuration).

## `config` object

The `config` object is used to configure the Frak Components library. It allows you to set up metadata about your application, such as the name and CSS styles.

```ts twoslash title="TypeScript"
// @noErrors
// [!include ~/snippets/types/FrakWalletSdkConfig.ts]

window.FrakSetup = {
    config: FrakWalletSdkConfig;
}
```

### Example

```js twoslash title="JavaScript"
window.FrakSetup = {
    config: {
        walletUrl: "https://wallet.frak.id",
        metadata: {
            name: "My Awesome dApp",
            merchantId: "550e8400-e29b-41d4-a716-446655440000",
            lang: "fr",
            currency: "eur"
        },
        customizations: {
            css: "https://my-app.com/frak-styles.css",
        },
        domain: "my-app.com"
    },
};
```

For more detailed `config` options, see our [FrakWalletSdkConfig](/developers/references/core-sdk/index/type-aliases/frakwalletsdkconfig/).

## `modalWalletConfig` object

The `modalWalletConfig` object is used to configure the embedded wallet displayed by the Frak Components. It allows you to customize the wallet appearance, sharing behavior, and logged-out state.

```ts twoslash title="TypeScript"
// @noErrors
import type { DisplayEmbeddedWalletParamsType } from '@frak-labs/core-sdk'; // [!code focus]

window.FrakSetup = { // [!code focus]
    config: { /* ... */ },
    modalWalletConfig: DisplayEmbeddedWalletParamsType; // [!code focus]
} // [!code focus]
```

The `DisplayEmbeddedWalletParamsType` has the following properties:

| Parameter | Type | Description |
| --------- | ---- | ----------- |
| `loggedIn` | `object` | Configuration for the wallet view when user is logged in |
| `loggedIn.action` | `object` | The main action to display. Set `key: "sharing"` for a share button, or `key: "referred"` for a referred state |
| `loggedIn.action.options.link` | `string` | The link to be shared (suffixed with Frak sharing context). Only for `key: "sharing"` |
| `loggedOut` | `object` | Configuration for the wallet view when user is logged out |
| `metadata` | `object` | Metadata to customize the embedded wallet |
| `metadata.logo` | `string` | Logo URL displayed on the embedded wallet |
| `metadata.homepageLink` | `string` | Link to the homepage of the calling website |
| `metadata.targetInteraction` | `string` | The target interaction behind this modal |
| `metadata.position` | `"left" \| "right"` | Position of the wallet component |
| `metadata.i18n` | `I18nConfig` | i18n overrides for the embedded wallet text |

### Example

```js twoslash title="JavaScript"
window.FrakSetup = {
    config: {
        metadata: {
            name: "My Awesome dApp",
        },
    },
    modalWalletConfig: { // [!code focus]
        loggedIn: { // [!code focus]
            action: { // [!code focus]
                key: "sharing", // [!code focus]
                options: { // [!code focus]
                    link: "https://my-app.com", // [!code focus]
                }, // [!code focus]
            }, // [!code focus]
        }, // [!code focus]
        metadata: { // [!code focus]
            logo: "https://my-app.com/logo.png", // [!code focus]
            homepageLink: "https://my-app.com", // [!code focus]
            position: "right", // [!code focus]
            i18n: { // [!code focus]
                "sharing.text": "Check out my app!", // [!code focus]
            }, // [!code focus]
        }, // [!code focus]
    }, // [!code focus]
};