Quickstart

Build your first Mini App integrated with Lemon Cash

Create a simple Mini App that authenticates users, triggers deposits and calls smart contract functions in just a few steps.

Step 1: Install

npm

npm install @lemoncash/mini-app-sdk

Step 2: Add authentication

Add authentication to your mini app using the authenticate function:

import { useState, useEffect } from 'react';
import { authenticate, TransactionResult } from '@lemoncash/mini-app-sdk';

export const MiniApp = () => {
  const [wallet, setWallet] = useState<string | undefined>(undefined);

  const handleAuthentication = async () => {
    const result = await authenticate();
    if (result.result === TransactionResult.SUCCESS) {
      setWallet(result.data.wallet);
    }
  };

  useEffect(() => {
    handleAuthentication();
  }, []);
};

Step 3: Add deposit functionality

Include deposit functionality in your mini app:

import React from 'react';
import { deposit } from '@lemoncash/mini-app-sdk';

export const MiniApp = () => {  
  const handleDeposit = async () => {
    try {
      const result = await deposit({
        amount: '100',
        tokenName: 'USDC',
      });
      
      console.log('Deposit successful:', result.txHash);
    } catch (error) {
      console.error('Deposit failed:', error);
      throw error;
    }
  };

  return (
    <button onClick={handleDeposit}>
      Send 100 USDC
    </button>
  );
};

Step 4: Check environment with isWebView (recommended)

Use isWebView to provide clear feedback when the Mini App is not running inside the Lemon Cash app.

import { isWebView } from '@lemoncash/mini-app-sdk';

export const MiniApp = () => {
  if (!isWebView()) {
    return <div>Please open this app in Lemon Cash</div>;
  }
};

Full Example Implementation

Here’s a complete example showing WebView communication:

import React, { useEffect, useState } from 'react';
import { authenticate, deposit, isWebView, TransactionResult } from '@lemoncash/mini-app-sdk';

export const MiniApp = () => {
  const [wallet, setWallet] = useState<string | undefined>(undefined);

  const handleAuthentication = async () => {
    const result = await authenticate();
    if (result.result === TransactionResult.SUCCESS) {
      setWallet(result.data.wallet);
    }
  };

  useEffect(() => {
    handleAuthentication();
  }, []);

  const handleDeposit = async () => {
    try {
      const result = await deposit({
        amount: '100',
        tokenName: 'USDC',
      });
      
      console.log('Deposit successful:', result.txHash);
    } catch (error) {
      console.error('Deposit failed:', error);
      throw error;
    }
  };

  if (!isWebView()) {
    return <div>Please open this app in Lemon Cash</div>;
  } 

  return (
    <div>
      <span>
        {wallet
          ? `${wallet.slice(0, 8)}...${wallet.slice(-8)}`
          : 'Authenticating...'
        }
      </span>
      <button onClick={handleDeposit} disabled={!wallet}>
        {wallet ? 'Send 100 USDC' : 'Authenticating...'}
      </button>
    </div>
  );
};