Aller au contenu

Ce contenu n’est pas encore disponible dans votre langue.

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.