Cross-Platform Support

Using the SDK in browser and Node.js environments

Cross-Platform Support

The Cilantro Smart SDK works seamlessly in both browser and Node.js environments, automatically detecting the platform and using the appropriate implementations.

Platform Detection

The SDK automatically detects the environment:

Browser: Uses Web Crypto API and localStorage
Node.js: Uses Node.js crypto module and filesystem

Storage Adapters

Storage adapters automatically select the appropriate implementation:

Browser (Automatic)

import { getDefaultStorageAdapter } from 'cilantro-sdk/helpers';

// Automatically uses localStorage in browser
const storage = getDefaultStorageAdapter();

Node.js (Automatic)

import { getDefaultStorageAdapter } from 'cilantro-sdk/helpers';

// Automatically uses filesystem in Node.js
const storage = getDefaultStorageAdapter();

Manual Selection

You can also manually select a storage adapter:

Browser: LocalStorage

import { createLocalStorageAdapter } from 'cilantro-sdk/helpers';

const storage = createLocalStorageAdapter();

Node.js: FileSystem

import { createFileSystemAdapter } from 'cilantro-sdk/helpers';

const storage = createFileSystemAdapter({
  basePath: './device-keys'
});

Testing: Memory

import { createMemoryAdapter } from 'cilantro-sdk/helpers';

const storage = createMemoryAdapter();

Browser Usage

React Example

import { useEffect, useState } from 'react';
import { configure } from 'cilantro-sdk';
import { findAll } from 'cilantro-sdk/wallet';
import { createLocalStorageAdapter } from 'cilantro-sdk/helpers';

function WalletList() {
  const [wallets, setWallets] = useState([]);
  const storage = createLocalStorageAdapter();

  useEffect(() => {
    async function loadWallets() {
      configure({ apiKey: process.env.NEXT_PUBLIC_API_KEY });
      const walletList = await findAll();
      setWallets(walletList);
    }
    loadWallets();
  }, []);

  return (
    <div>
      {wallets.map(wallet => (
        <div key={wallet.id}>{wallet.label}</div>
      ))}
    </div>
  );
}

Vanilla JavaScript Example

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/cilantro-sdk/dist/index.js"></script>
</head>
<body>
  <script>
    const { configure, findAll } = cilantroSDK;
    const { createLocalStorageAdapter } = cilantroSDK.helpers;

    const storage = createLocalStorageAdapter();
    
    configure({ apiKey: 'your-api-key' });
    
    async function loadWallets() {
      const wallets = await findAll();
      console.log('Wallets:', wallets);
    }
    
    loadWallets();
  </script>
</body>
</html>

Node.js Usage

Express Example

import express from 'express';
import { configure } from 'cilantro-sdk';
import { findAll } from 'cilantro-sdk/wallet';
import { createFileSystemAdapter } from 'cilantro-sdk/helpers';

const app = express();
const storage = createFileSystemAdapter({
  basePath: './device-keys'
});

configure({ 
  apiKey: process.env.CILANTRO_API_KEY 
});

app.get('/wallets', async (req, res) => {
  try {
    const wallets = await findAll();
    res.json(wallets);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000);

CLI Example

#!/usr/bin/env node
import { configure } from 'cilantro-sdk';
import { create } from 'cilantro-sdk/wallet';
import { createFileSystemAdapter } from 'cilantro-sdk/helpers';

const storage = createFileSystemAdapter({
  basePath: process.env.HOME + '/.cilantro/device-keys'
});

configure({ 
  apiKey: process.env.CILANTRO_API_KEY 
});

async function main() {
  const wallet = await create({
    label: 'cli-wallet',
    tags: ['cli']
  });
  console.log('Wallet created:', wallet.id);
}

main();

Environment-Specific Considerations

Browser

Node.js

Testing

Use the memory adapter for testing:

import { createMemoryAdapter } from 'cilantro-sdk/helpers';

describe('Wallet Operations', () => {
  let storage: DeviceKeyStorage;

  beforeEach(() => {
    storage = createMemoryAdapter();
  });

  it('should create a wallet', async () => {
    const wallet = await create({ label: 'test-wallet' });
    expect(wallet).toBeDefined();
  });
});