Skip to content

Installation via Package Manager

Section titled “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

Section titled “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 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 guide.

Step 1: Install Dependencies

Section titled “Step 1: Install Dependencies”
Terminal window
npm install @frak-labs/core-sdk

Step 2: Set Up the Frak Client

Section titled “Step 2: Set Up the Frak Client”

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

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.

Step 3: Check Wallet Status

Section titled “Step 3: Check Wallet Status”

Create a function to check and display the wallet status, using the watchWalletStatus action:

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

Section titled “Step 4: Implement Login Modal”

Create a function to handle the login process, using the displayModal action:

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

Section titled “Step 5: Put It All Together”

Create an HTML file that includes your bundled JavaScript:

<!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

Section titled “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.