> ## Documentation Index
> Fetch the complete documentation index at: https://lemoncash.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CodeGroup>
  ```bash npm theme={null}
  npm install @lemoncash/mini-app-sdk
  ```

  ```bash yarn theme={null}
  yarn add @lemoncash/mini-app-sdk
  ```
</CodeGroup>

### Step 2: Add authentication

Add authentication to your mini app using the [authenticate](/functions/authenticate) function. This must be the first SDK method you call — see the [important guidelines](/functions/authenticate#important-guidelines) for details.

```typescript focus={8-12} theme={null}
import { useState, useEffect } from 'react';
import { authenticate, ChainId, TransactionResult } from '@lemoncash/mini-app-sdk';

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

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

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

### Step 3: Add deposit functionality

Include [deposit](/functions/deposit) functionality in your mini app:

```typescript focus={7-10} theme={null}
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](/functions/is-webview) to provide clear feedback when the Mini App is not running inside the Lemon Cash app.

```typescript focus={4-6} theme={null}
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:

```typescript theme={null}
import React, { useEffect, useState } from 'react';
import { authenticate, deposit, isWebView, ChainId, TransactionResult } from '@lemoncash/mini-app-sdk';

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

  const handleAuthentication = async () => {
    const result = await authenticate({
      chainId: ChainId.POLYGON_AMOY,
    });
    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>
  );
};
```