ranger-app/README.md

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
   • 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
   • 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:

   openssl rand -base64 32
   

   Copy the output to your .env.local file as the NEXTAUTH_SECRET value.

4. Install required packages:

   npm install next-auth@4.22.1
   

5. Restart your application:

   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
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:

   cd sei-backend-src
   

2. Install dependencies:

   npm install
   

3. Build the service:

   npm run build
   

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

   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:

   ./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