# Installation via Package Manager

# Installation via Package Manager

This guide will walk you through the process of integrating the Wallet SDK into your JavaScript / Typescript application.
By the end, you'll have a basic setup that allows users to connect their Frak Wallet and perform interactions.

## Prerequisites

Before you begin, ensure that:

1. You have a package manager set up on your project (npm / bun / pnpm or yarn).
2. You have a merchant account on the [Frak business dashboard](https://business.frak.id/) with your storefront's domain registered. The main domain is registered automatically at sign-up; for subdomains, add them under **Allowed Domains** on the dashboard.

If you haven't completed these steps, please refer to the [Getting Started](/guides) guide.

## Step 1: Install Dependencies

```bash
npm install @frak-labs/core-sdk
```

```bash
yarn install @frak-labs/core-sdk
```

```bash
pnpm install @frak-labs/core-sdk
```

```bash
bun install @frak-labs/core-sdk
```

## Step 2: Set Up the Frak Client

Create a new TypeScript file (e.g., `frak-setup.ts`) to set up the Frak client:

```typescript
import { setupClient, type FrakWalletSdkConfig } from '@frak-labs/core-sdk';

const frakConfig: FrakWalletSdkConfig = {
  metadata: {
    name: 'Your App Name',
  },
};

export async function setupFrakClient() {
  const client = await setupClient({ config: frakConfig });
  if (!client) {
    console.error('Failed to create Frak client');
    return null;
  }

  return client;
}

export { frakConfig };
```

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

## Step 3: Check Wallet Status

Create a function to check and display the wallet status, using the [`watchWalletStatus`](/developers/references/core-sdk/actions/functions/watchwalletstatus/) action:

```typescript
import { watchWalletStatus } from '@frak-labs/core-sdk/actions';
import { setupFrakClient } from './frak-setup';

export async function displayWalletStatus() {
  const client = await setupFrakClient();
  if (!client) {
    console.error('Frak client not initialized');
    return;
  }

  const statusElement = document.getElementById('wallet-status');
  if (!statusElement) return;

  statusElement.textContent = 'Checking wallet status...';

  try {
    await watchWalletStatus(client, (status) => {
      if (!statusElement) return;
      statusElement.textContent = `Wallet status: ${status.key === 'connected' ? 'Connected' : 'Not connected'}`;
    });
  } catch (error) {
    statusElement.textContent = `Error: ${error instanceof Error ? error.message : 'Unknown error'}`;
  }
}

// Call this function when the page loads
window.addEventListener('load', displayWalletStatus);
```

## Step 4: Implement Login Modal

Create a function to handle the login process, using the [`displayModal`](/developers/references/core-sdk/actions/functions/displaymodal/) action:

```typescript
import { displayModal } from '@frak-labs/core-sdk/actions';
import { setupFrakClient } from './frak-setup';

export async function handleLogin() {
  const client = await setupFrakClient();
  if (!client) {
    console.error('Frak client not initialized');
    return;
  }

  const loginButton = document.getElementById('login-button') as HTMLButtonElement | null;
  if (!loginButton) return;

  loginButton.disabled = true;
  loginButton.textContent = 'Logging in...';

  try {
    await displayModal(client, {
      steps: {
        login: {},
        final: {
          action: { key: "sharing" },
        }
      }
    });
    loginButton.textContent = 'Logged In';
  } catch (error) {
    console.error('Login error:', error);
    loginButton.textContent = 'Login Failed';
  } finally {
    loginButton.disabled = false;
  }
}

// Attach the login handler to the button
window.addEventListener('load', () => {
  const loginButton = document.getElementById('login-button');
  loginButton?.addEventListener('click', handleLogin);
});
```

## Step 5: Put It All Together

Create an HTML file that includes your bundled JavaScript:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Frak-Enabled App</title>
    <!-- Your bundled JS file -->
    <script src="dist/bundle.js"></script>
</head>
<body>
    <h1>My Frak-Enabled App</h1>
    <div id="wallet-status">Initializing...</div>
    <button id="login-button">Login with Frak</button>
</body>
</html>
```

Note: Make sure your bundler (webpack, vite, etc.) is properly configured to handle TypeScript files and generate the bundle.js file.

## Next Steps

With this setup, you have a basic TypeScript application integrated with the Wallet SDK. Users can now connect their Frak Wallet and log in. From here, you can start implementing more advanced features such as:

- Sending interactions
- Implementing referral systems
- Creating reward campaigns

Refer to the specific action documentation for details on implementing these features using the SDK's TypeScript interfaces and types.