Submarine UI

.eslintrc.json

@@ -1,3 +1,18 @@
 {
-  "extends": "next/core-web-vitals"
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "simple-import-sort", "react-hooks"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "error",
+    "simple-import-sort/imports": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/rules-of-hooks": "error"
+  }
 }

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

dev/supabase/README.md

@@ -0,0 +1,15 @@
+# Supabase
+
+## TL;DR:
+
+- LoopGate stores Unlockables in a Supabase instance. The data inside can be created/read/updated/deleted with the Supabase JS SDK: a PostgREST client. Ex => `const { data } = await Supabase.from("unlockables_with_criteria").select(`\*`)`
+- **Row Level Security (RLS)** applies: only those with the correct credentials should be able to access these methods. Read access for most `tables` and `views` is public, which means the data can be queried from the client using the `anon` key. The other operations require the `service key` or a JWT. These operations are done server-side.
+
+## Managing tables
+
+- New tables cannot be instantiated with the Supabase JS SDK. Instead, they need to be configured from within the supabase web client. The visual builder may be used, but using the SQL editor with documented queries may be more suitable.
+- See `/dev/supabase/sql/*` for the SQL used to create/update/delete/test these tables and views.
+
+## Updating types
+
+Use `npm run supabase:types` to update the types in `src/services/supabase/types.ts` 🚀

src/utils/supabase/sql/roles.sql → dev/supabase/sql/tables/roles.sql

@@ -1,3 +1,5 @@
+-- 🦻 NOTE: Currently not in use
+
 -- Create and fill a table with the available user roles
 
 CREATE TABLE roles (

src/utils/supabase/sql/unlockables.sql → dev/supabase/sql/tables/unlockables.sql

@@ -4,30 +4,32 @@
 -- create extension 'uuid-ossp' with schema extensions;
 
 CREATE TABLE unlockables (
-  id uuid default uuid_generate_v4(), 
-  name text,
-  description text,
-  owner VARCHAR(42) NOT NULL,
-  content_type_id int NOT NULL,
-  content_url VARCHAR(200) NOT NULL,
-  criteria_unlock_amount int NOT NULL,
-  updated_at timestamp default current_timestamp,
+  id uuid not null default uuid_generate_v4(), 
+  name text null,
+  description text null,
+  owner VARCHAR(42) not null,
+  unlisted boolean not null default true,
+  content_type_id int not null,
+  content_url VARCHAR(200) not null,
+  criteria_unlock_amount int not null,
+  updated_at timestamp without time zone default not null current_timestamp default current_timestamp,
+  created_at timestamp without time zone default not null default now(),
   --
   PRIMARY KEY (id),
   FOREIGN KEY (owner) REFERENCES users(eth_address),
   FOREIGN KEY (content_type_id) REFERENCES content_types(content_type_id),
   --
-  constraint unlock_amount_nonnegative check (criteria_unlock_amount > 0)
+  constraint unlock_amount_nonnegative check (criteria_unlock_amount > -2)
 );
 
 -- Unlockable #1: HTML Blog Example
-INSERT INTO unlockables (name, description, owner, content_type_id, content_url, criteria_unlock_amount) 
-VALUES ('Token Gating with NFTs: Unlocking New Ways to Bring Value', 'This exclusive article contains a primer on what Token Gating is, and provides four actionable prompts on how to implement it to bring value to members of your community.', '0x1337cc354aeaf15b0e98a609cd348df171174e14', 1, 'bafybeiehgpaip4f7jafzf7imgannx3nnv3ubaiwp6ph56mlyzijpqxi45m', 1);
+INSERT INTO unlockables (name, description, owner, content_type_id, content_url, criteria_unlock_amount, unlisted) 
+VALUES ('Token Gating with NFTs: Unlocking New Ways to Bring Value', 'This exclusive article contains a primer on what Token Gating is, and provides four actionable prompts on how to implement it to bring value to members of your community.', '0x1337cc354aeaf15b0e98a609cd348df171174e14', 1, 'bafybeiehgpaip4f7jafzf7imgannx3nnv3ubaiwp6ph56mlyzijpqxi45m', 1, false);
 
 -- Unlockable #2: MP4 Video Example
-INSERT INTO unlockables (name, description, owner, content_type_id, content_url, criteria_unlock_amount) 
-VALUES ('0x1337cc354aeaf15b0e98a609cd348df171174e14', 1, 'bafybeihx5eacyxeydcpvudwxa242rnjhn67femy46gzas5d2djb24ti5mi', 1);
+INSERT INTO unlockables (name, description, owner, content_type_id, content_url, criteria_unlock_amount, unlisted) 
+VALUES ('0x1337cc354aeaf15b0e98a609cd348df171174e14', 1, 'bafybeihx5eacyxeydcpvudwxa242rnjhn67femy46gzas5d2djb24ti5mi', 1, false);
 
 -- Unlockable #3: Web Game Example
-INSERT INTO unlockables (name, description, owner, content_type_id, content_url, criteria_unlock_amount) 
-VALUES ('Flappy Bird: Origins', 'An incredibly exclusive web game built in Godot 3, optimized for browsers. Dodge the obstacles, and fly for your life...', '0x1337cc354aeaf15b0e98a609cd348df171174e14', 1, 'bafybeihhx5v3saq3b7n55ub5q3atuw2udbqc5ictkv2ih7vd3hxptu22nu', 2);
+INSERT INTO unlockables (name, description, owner, content_type_id, content_url, criteria_unlock_amount, unlisted) 
+VALUES ('Flappy Bird: Origins', 'An incredibly exclusive web game built in Godot 3, optimized for browsers. Dodge the obstacles, and fly for your life...', '0x1337cc354aeaf15b0e98a609cd348df171174e14', 1, 'bafybeihhx5v3saq3b7n55ub5q3atuw2udbqc5ictkv2ih7vd3hxptu22nu', 2, false);

src/utils/supabase/sql/users.sql → dev/supabase/sql/tables/users.sql

@@ -1,3 +1,5 @@
+-- 🦻 NOTE: Currently not in use
+
 -- Create and fill a table with users
 
 CREATE TABLE users (

dev/supabase/sql/view/unlockables_with_criteria.sql

@@ -0,0 +1,15 @@
+----- Code to create the view
+-- CREATE VIEW unlockables_with_criteria_v2 AS
+--     SELECT u.id, u.name, u.description, u.unlisted, u.owner, u.content_url, u.criteria_unlock_amount, u.updated_at, STRING_AGG(c.nft_id, ', ') AS nft_ids
+--     FROM unlockables u
+--     LEFT JOIN unlock_criteria c ON u.id = c.unlockable_id
+--     GROUP BY u.id, u.name, u.description, u.owner, u.content_url, u.criteria_unlock_amount, u.updated_at
+
+----- Test if it works
+-- select * from unlockables_with_criteria_v2 
+
+-- ALTER VIEW unlockables_with_criteria RENAME TO unlockables_with_criteria_backup
+-- ALTER VIEW unlockables_with_criteria_v2 RENAME TO unlockables_with_criteria
+
+----- Delete a previous one
+-- DROP VIEW IF EXISTS unlockables_with_criteria_v2

docs/setup/4-RUNNING.md

@@ -21,7 +21,7 @@ You can access it by opening a browser and going to the following URL: \
 
 Now your LoopGate is running on your local machine, it's time to check the `.env` file.
 
-- Go to the following url: [http://localhost:3000/api/helpers/checkEnvStatus](http://localhost:3000/api/helpers/checkEnvStatus).
+- Go to the following url: [http://localhost:3000/api/helpers/check-env-status](http://localhost:3000/api/helpers/checkEnvStatus).
 
 This checks the secrets in your `.env` file: if these are misconfigured, LoopGate will not work.
 

docs/setup/5-NETLIFY.md

@@ -30,7 +30,7 @@ However, there is still one important step: adding the environment secrets to Ne
 1. Go to your project's the 'env' settings of your project's Netlify page: [https://app.netlify.com/sites/YOUR_PROJECT_NAME/settings/env](https://app.netlify.com/sites/YOUR_PROJECT_NAME/settings/env)
 2. Click on 'Add a variable', then 'import from a .env file'.
 3. Copy the contents of your `.env` file, and paste them in the input field. Click on 'Import variables'.
-4. Once more, check the `/api/helpers/checkEnvStatus` endpoint to see if all secrets are defined. Your site should be live soon at [https://YOUR_PROJECT_NAME.netlify.app/api/helpers/checkEnvStatus](https://YOUR_PROJECT_NAME.netlify.app/api/helpers/checkEnvStatus)
+4. Once more, check the `/api/helpers/checkEnvStatus` endpoint to see if all secrets are defined. Your site should be live soon at [https://YOUR_PROJECT_NAME.netlify.app/api/helpers/checkEnvStatus](https://YOUR_PROJECT_NAME.netlify.app/api/helpers/check-env-status)
 
 {% hint style="info" %}
 Your Netlify website will most likely have an auto-generated name like '[https://adjective-noun-12345.netlify.app](https://adjective-noun-12345.netlify.app)'. You can easily change the domain name in Netlify!

env.d.ts

@@ -6,7 +6,10 @@ namespace NodeJS {
     SESSION_SECRET: string;
     NEXT_PUBLIC_SUPABASE_ANON: string;
     NEXT_PUBLIC_SUPABASE_URL: string;
+    SUPABASE_SERVICE_ROLE: string;
     NEXT_PUBLIC_LOGFLARE_API_KEY: string;
     NEXT_PUBLIC_LOGFLARE_SOURCE_TOKEN: string;
+    LOOPGATE_API_KEY: string;
+    LOOPGATE_CC_THRESHOLD: string;
   }
 }