Vanilla JS Integration Guide

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

Prerequisites

Before you begin, ensure that:

You have a basic HTML/JavaScript project set up.
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

For a Vanilla JS project, you can include the Wallet SDK via a CDN. Add the following script tag to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/@frak-labs/core-sdk@latest/cdn/bundle.js"></script>

Step 2: Set Up the Frak Client

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

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

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

  return client;
}

// Export the setup function and config for use in other files
window.FrakSetup = { setupFrakClient, frakConfig };

For more detailed configuration options, see FrakWalletSdkConfig.

Include this script in your HTML file:

<script src="frak-setup.js"></script>

Step 3: Check Wallet Status

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

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

  const statusElement = document.getElementById('wallet-status');
  statusElement.textContent = 'Checking wallet status...';

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

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

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

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

  const loginButton = document.getElementById('login-button');
  loginButton.disabled = true;
  loginButton.textContent = 'Logging in...';

  try {
    await FrakSDK.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

Update your HTML file to include all the necessary elements and scripts:

<!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>
    <script src="https://cdn.jsdelivr.net/npm/@frak-labs/core-sdk@latest/cdn/bundle.js"></script>
    <script src="frak-setup.js"></script>
    <script src="wallet-status.js"></script>
    <script src="login-button.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>

Next Steps

With this setup, you have a basic Vanilla JavaScript 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 in a Vanilla JS environment.