# Ranger Portal

This portal template is populated from `.env.local`. OK

The automation works like this:

1. Google form - https://forms.gle/kFYjiegnsRDNscja6

Submission triggers the code to run in this GAS app

2. Google Apps Script - https://script.google.com/u/3/home/projects/18VXOKc_7bvOCCUoif6LMt5tQj7NLqwdmn75eXVc0YxUsYXQ1u3KjR9SA

Running this script hits `http://143.198.37.25:3000/deploy` with the relevant data

3. Ranger Backend - https://github.com/mito-systems/ranger-backend

Has two endpoints: 

  * `/deploy`, used above, which publishes the relevant AppRecords to the Laconic Registry to trigger an app deployment
  * `/publishRecord`, used by this portal app to publish PhotoRecords to the Laconic Registry: https://github.com/mito-systems/ranger-app/blob/main/src/services/laconicService.ts#L42

## User types

### Portal Creator

Anyone who wants a custom portal can use the Google form and receive an e-mail with a link to share as far and wide as they'd like.

### End users

Receive links to custom portals and are invited to add data by uploading photographs

### Data consumers

Query a data set from any custom portal.

## Social Login Setup

This application supports social login with Google and GitHub. To set up social login, follow these steps:

1. **Set up environment variables**:
   Update the following variables in your `.env.local` file:
   ```
   # Authentication
   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=your-nextauth-secret-key-at-least-32-chars
   
   # OAuth Providers
   GOOGLE_CLIENT_ID=your-google-client-id
   GOOGLE_CLIENT_SECRET=your-google-client-secret
   
   GITHUB_CLIENT_ID=your-github-client-id
   GITHUB_CLIENT_SECRET=your-github-client-secret
   ```

2. **Create OAuth applications**:

   **For Google**:
   - Go to [Google Cloud Console](https://console.cloud.google.com/)
   - Create a new project or select an existing one
   - Navigate to "APIs & Services" > "Credentials"
   - Click "Create Credentials" > "OAuth client ID"
   - Select "Web application" as the application type
   - Add your app's URL to the authorized JavaScript origins (e.g., `http://localhost:3000`)
   - Add your app's callback URL to the authorized redirect URIs (e.g., `http://localhost:3000/api/auth/callback/google`)
   - Copy the Client ID and Client Secret to your `.env.local` file

   **For GitHub**:
   - Go to [GitHub Developer Settings](https://github.com/settings/developers)
   - Click on "New OAuth App"
   - Fill in the application details
   - Set the Authorization callback URL to your app's callback URL (e.g., `http://localhost:3000/api/auth/callback/github`)
   - Copy the Client ID and Client Secret to your `.env.local` file

3. **Generate a secure NEXTAUTH_SECRET**:
   Run the following command to generate a secure secret:
   ```bash
   openssl rand -base64 32
   ```
   Copy the output to your `.env.local` file as the NEXTAUTH_SECRET value.

4. **Install required packages**:
   ```bash
   npm install next-auth@4.22.1
   ```

5. **Restart your application**:
   ```bash
   npm run dev
   ```

## Points System Setup with Supabase

This application uses Supabase to track user points for contributing wildlife images.

### Setup Instructions

1. Create a Supabase account at [https://supabase.com](https://supabase.com)
2. Create a new project
3. Go to the SQL Editor and execute the SQL in `supabase-schema.sql` to create the necessary tables and functions
4. Get your project URL and anon key from Settings > API
5. Add these values to your `.env.local` file:

```
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
```

### Points System Features

- Users earn 1 point for each successful wildlife image upload
- Points are displayed on the "My Points" page which shows:
  - Total points accumulated
  - A history of all contributions with images
  - Details about each uploaded image
- The system prevents duplicate image uploads and point awards
- Only authenticated users can earn and view points

## WILD Token Integration with Sei Blockchain

This application rewards users with WILD tokens on the Sei blockchain when they identify wildlife images. The token distribution is handled by a secure backend service.

### User Flow

1. Users upload wildlife images and earn points in Supabase
2. Users who connect a wallet (Keplr or Leap) also receive WILD tokens automatically
3. Tokens are awarded based on the species identified (rare species earn more tokens)

### Backend Service Setup

The token distribution backend is located in the `sei-backend-src` directory.

#### Setup Steps

1. Navigate to the backend directory:
   ```bash
   cd sei-backend-src
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

3. Build the service:
   ```bash
   npm run build
   ```

4. Configure the service by creating a `.env` file (copy from `.env.example`):
   ```bash
   cp .env.example .env
   ```

5. Edit the `.env` file with your actual configuration:
   - `SEI_TOKEN_CONTRACT_ADDRESS`: Your WILD token contract address
   - `DISTRIBUTOR_MNEMONIC`: The mnemonic phrase for your distributor wallet
   - `API_KEY`: A secure API key for authentication

6. Start the service:
   ```bash
   ./start.sh
   ```

### Frontend Configuration

Configure the following environment variables in your frontend's `.env.local`:

```
# Token Backend Service
NEXT_PUBLIC_TOKEN_BACKEND_URL=http://localhost:3001
NEXT_PUBLIC_TOKEN_API_KEY=your-api-key-here
```