2 |
GateRepo
3 | 4 |5 | About 6 | | 7 | Implementation 8 | | 9 | License 10 |
11 | 12 | # About 13 | 14 | Simple implementation of ERC20 [token-gating](https://coinmetro.com/blog/what-is-token-gating/) GitHub repositories. 15 | 16 | Fueled by [Mike's tweet](https://twitter.com/mikedemarais/status/1511116843557306373?s=20&t=2LQ3BchO9bKAWVQsvphJbw). 17 | 18 | # Implementation 19 | 20 | 1. Users login with [GitHub OAuth](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app), we store their `access token` to take actions on their behalf. 21 | 2. Users can create new Gates for their repositories, specifying contract address, number of tokens needed, and number of invites to open. In the back-end, token name + decimals, and current latest block number is stored. 22 | 3. Users can share links to Gates. 23 | 4. Upon accessing a Gate invitation, users can sign-in with GitHub (again giving us their `access token`). Then, they connect their wallet and sign a message to verify ownership for our back-end. 24 | 5. Finally, in `/api/gates/access` we run a multi-step process: 25 | 1. Check that requesting user is authenticated 26 | 2. Check that all parameters have been posted (address, signature, gated repo ID) 27 | 3. Verify address ownership by matching address to signature 28 | 4. Check if gated repo by ID exists 29 | 5. Check if gated repo has available open invitations 30 | 6. Check if address held necessary balance at block number 31 | 7. Check if we have access token for requesting user 32 | 8. Check if requesting user is not already a collaborator on private repo 33 | 9. Check if we have access token for private repo owner 34 | 10. Send invite from owner to requesting user to join private repo 35 | 11. Accept invite from owner via requesting user to join private repo 36 | 12. Increment number of used invites (decreasing available slots) 37 | 38 | # Build and run locally 39 | 40 | ```bash 41 | # Collect repo 42 | git clone https://github.com/anish-agnihotri/GateRepo 43 | cd GateRepo 44 | 45 | # Install dependencies 46 | npm install 47 | 48 | # Update environment variables 49 | cp .env.sample .env 50 | vim .env 51 | 52 | # Run application 53 | npm run dev 54 | ``` 55 | 56 | ## Environment variables 57 | 58 | 1. `NEXTAUTH_URL`: Site link, `http://localhost:3000` if developing locally, `https://gaterepo.com` for this deployed instance 59 | 2. `NEXTAUTH_SECRET`: Any randomly generated string as a secret, e.g.: `NpUFdWakhCjbuIIogCvj` 60 | 3. `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET`: Follow the instructions [here](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app) for spinning up a new GitHub OAuth application. When asked, the authorization callback URL is `http://localhost:3000/api/auth/callback/github` (local) or `https://your_domain.com/api/auth/callback/github` (deployed). Once setup, your OAuth applications `Client ID` is your `GITHUB_CLIENT_ID` and your `Client Secret` is your `GITHUB_CLIENT_SECRET` 61 | 4. `DATABASE_URL`: Postgres database connection URL 62 | 5. `RPC_API`: Any Ethereum Mainnet JSON-RPC endpoint 63 | 64 | # Limitations 65 | 66 | 1. GitHub API has a rate-limit of sending a maximum of [50 invitations](https://octokit.github.io/rest.js/v18#repos-add-collaborator) for a repository per 24 hour period. 67 | 2. Application does not run a scheduled job to check continuing token ownership (to remove users who transfer their tokens). This is deferred to the user if desired functionality. 68 | 3. Application currently only supports [ERC20 tokens](https://ethereum.org/en/developers/docs/standards/tokens/erc-20/) but is easily extensible to other token formats by updating the snapshot strategy in `/pages/api/gates/access.ts`. 69 | 4. Allows a single address to verify token ownership on behalf of multiple GitHub users (not a one-to-one between GitHub users and addresses). Easily changeable should user require uniqueness by tracking address-to-gateId in database in `/pages/api/gates/access.ts`. 70 | 5. GitHub OAuth scopes are fairly invasive (`repo,read:user,user:email`). If you are privacy-aware, I'd recommended running your own fork or migrating to an app-based system? 71 | 72 | # License 73 | 74 | [GNU Affero GPL v3.0](https://github.com/Anish-Agnihotri/GateRepo/blob/master/LICENSE) 75 | -------------------------------------------------------------------------------- /auth.d.ts: -------------------------------------------------------------------------------- 1 | import "next-auth"; 2 | 3 | declare module "next-auth" { 4 | interface User { 5 | id: string; 6 | } 7 | 8 | interface Session { 9 | user: User; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /components/Layout.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; // Routing 2 | import Meta from "components/Meta"; // Meta tags 3 | import styles from "styles/components/Layout.module.scss"; // Component styles 4 | import { useSession, signIn, signOut } from "next-auth/react"; // Auth 5 | 6 | // Types 7 | import type { Session } from "next-auth"; 8 | import type { ReactElement } from "react"; 9 | 10 | // Layout wrapper 11 | export default function Layout({ 12 | children, 13 | }: { 14 | children: ReactElement | ReactElement[]; 15 | }) { 16 | // Collect authenticated session 17 | const { data: session } = useSession(); 18 | 19 | return ( 20 |
21 | {/* Meta tags */}
22 |
23 |
24 | {/* Logo */}
25 |
26 |
27 | 
28 |
29 |
30 |
31 | {!session ? (
32 | // If unauthenticated, display unauthenticated
33 |
47 | );
48 | }
49 |
50 | // Sign in state
51 | export function Unauthenticated() {
52 | return (
53 |
28 |
29 |
30 |
31 | {!session ? (
32 | // If unauthenticated, display unauthenticated
33 |
37 | {/* Render children */}
38 |
43 | )}
44 |
45 | {children}
39 |
40 | {/* Auth status */}
41 |
54 |
60 | );
61 | }
62 |
63 | // Authenticated state
64 | export function Authenticated({ session }: { session: Session }) {
65 | return (
66 | 55 | GateRepo is a simple way to token gate access to 56 | private GitHub repositories. 57 |
58 | 59 |
67 |
84 | );
85 | }
86 |
87 | // Credits
88 | export function Credits() {
89 | return (
90 |
68 | 
76 |
78 |
79 | {/* Name + Sign out */}
80 | {session.user.name}
77 |
81 |
82 |
83 |
91 |
111 | );
112 | }
113 |
--------------------------------------------------------------------------------
/components/Meta.tsx:
--------------------------------------------------------------------------------
1 | import Head from "next/head"; // HTML Head
2 |
3 | // Meta (w/ optional custom overrides)
4 | export default function Meta({
5 | title,
6 | description,
7 | url,
8 | }: {
9 | title?: string;
10 | description?: string;
11 | url?: string;
12 | }) {
13 | // Custom overrides from page
14 | const siteTitle: string =
15 | title ?? "GateRepo - Token-gated GitHub Repositories";
16 | const siteDescription: string =
17 | description ??
18 | "GateRepo is a simple way to token gate access to private GitHub repositories.";
19 | const siteUrl: string = url ?? "https://gaterepo.com/";
20 |
21 | return (
22 |
23 | {/* Primary Meta Tags */}
24 | 92 | A quick{" "} 93 | 98 | hack 99 | {" "} 100 | by{" "} 101 | 106 | Anish Agnihotri 107 | 108 | . 109 |
110 |
78 | {/* All private repos */}
79 |
128 | All Repos
80 |Private repos you have admin access to:
81 |
82 | {repoLoading ? (
83 | // Loading state
84 |
110 |
111 | {/* Existing gated repos */}
112 |
90 | {/* Repo name + link */}
91 |
96 | {repo.fullName}
97 |
98 |
99 | {/* Create gated repo */}
100 |
103 |
104 | );
105 | })
106 | ) : (
107 | Gated Repos
113 |Active gates with unused invites:
114 |
115 | {gateLoading ? (
116 | // Loading state
117 |
127 |
136 |
138 | );
139 | }
140 |
141 | // Empty placeholder
142 | function Empty() {
143 | return (
144 |
145 |
147 | );
148 | }
149 |
150 | // Individual gate
151 | function IndividualGate({
152 | gate,
153 | getGates,
154 | }: {
155 | gate: Gate;
156 | getGates: () => void;
157 | }) {
158 | const [copyText, setCopyText] = useStateNo repos found
146 |
210 | {/* Repository */}
211 |
258 | );
259 | }
260 |
261 | export async function getServerSideProps(context: any) {
262 | // Collect session, check auth
263 | const session = await getSession(context);
264 |
265 | return {
266 | props: {
267 | session,
268 | userId: session?.user.id ?? null,
269 | },
270 | };
271 | }
272 |
--------------------------------------------------------------------------------
/pages/repo/create/[owner]/[repo].tsx:
--------------------------------------------------------------------------------
1 | import axios from "axios"; // Requests
2 | import { ethers } from "ethers"; // Ethers
3 | import { useState } from "react"; // State management
4 | import { toast } from "react-toastify"; // Toast notifications
5 | import Layout from "components/Layout"; // Layout wrapper
6 | import { useRouter } from "next/router"; // Navigation
7 | import { getSession } from "next-auth/react"; // Auth
8 | import { getRepo } from "pages/api/github/repo"; // Repo details
9 | import styles from "styles/pages/Create.module.scss"; // Page styles
10 |
11 | // Types
12 | import type { Repo } from "pages/api/github/repos";
13 |
14 | /**
15 | * Check if a provided address is valid
16 | * @param {string} address to check
17 | * @returns {boolean} validity
18 | */
19 | export function isValidAddress(address: string): boolean {
20 | try {
21 | // Check if address is valid + checksum match
22 | ethers.utils.getAddress(address);
23 | } catch {
24 | // If not, return false
25 | return false;
26 | }
27 |
28 | // Else, return true
29 | return true;
30 | }
31 |
32 | export default function Create({
33 | owner,
34 | repository,
35 | repo,
36 | }: {
37 | owner: string;
38 | repository: string;
39 | repo: Repo;
40 | }) {
41 | // Routing
42 | const { push } = useRouter();
43 |
44 | const [address, setAddress] = useState
212 |
217 | @{gate.repoOwner}/{gate.repoName}
218 |
219 |
220 |
221 | {/* Invite status */}
222 |
223 |
249 |
250 | {/* Actions */}
251 | 224 | Unused Invites: 225 | {formatNumber(numUnusedInvites)} 226 |
227 |228 | Tokens Required: {formatNumber(gate.numTokens)}{" "} 229 | 234 | {gate.contractName} 235 | {" "} 236 | token{gate.numTokens == 1 ? "" : "s"} 237 |
238 |239 | Token Check Block Number:{" "} 240 | 245 | #{formatNumber(gate.blockNumber)} 246 | 247 |
248 |
252 |
253 |
256 |
257 |
87 | {/* Description */}
88 |
146 | Token Gate
89 |90 | Restricting access to{" "} 91 | 92 | @{repo.fullName} 93 | 94 | . 95 |
96 | 97 | {/* Input menu */} 98 |
99 | {/* Contract */}
100 |
101 | setAddress(e.target.value)}
107 | />
108 |
109 | {/* Number of required tokens */}
110 |
111 | setNumTokens(Number(e.target.value))}
118 | />
119 |
120 | {/* Max invite count */}
121 |
122 | setNumParticipants(Number(e.target.value))}
129 | />
130 |
131 | {/* Create gated repository */}
132 |
144 |
145 |
133 | {/* Meta tags */}
134 |
139 |
140 | {/* Logo */}
141 |
142 |
143 |
144 |
145 |
146 |
147 |
223 | );
224 | }
225 |
226 | export async function getServerSideProps(context: any) {
227 | // Collect session
228 | const session = await getSession(context);
229 | // Collect gate id from URL
230 | const { id }: { id: string } = context.query;
231 |
232 | try {
233 | // Throw if params not present
234 | if (!id) throw new Error();
235 |
236 | // Collect gate or throw
237 | const gate: GateExtended | null = await getGate(id);
238 | if (!gate) throw new Error();
239 |
240 | // Validation
241 | const hasEmptyInvites: boolean = gate.numInvites - gate.usedInvites > 0;
242 | if (!hasEmptyInvites) throw new Error();
243 |
244 | return {
245 | props: {
246 | gate,
247 | session,
248 | },
249 | };
250 | } catch {
251 | // On error, redirect
252 | return {
253 | redirect: {
254 | destination: "/",
255 | permanent: false,
256 | },
257 | };
258 | }
259 | }
260 |
--------------------------------------------------------------------------------
/prisma/db.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from "@prisma/client"; // Prisma
2 |
3 | // Export Prisma
4 | const db = new PrismaClient();
5 | export default db;
6 |
--------------------------------------------------------------------------------
/prisma/migrations/20220405100937_initialize/migration.sql:
--------------------------------------------------------------------------------
1 | -- CreateTable
2 | CREATE TABLE "Account" (
3 | "id" TEXT NOT NULL,
4 | "userId" TEXT NOT NULL,
5 | "type" TEXT NOT NULL,
6 | "provider" TEXT NOT NULL,
7 | "providerAccountId" TEXT NOT NULL,
8 | "refresh_token" TEXT,
9 | "access_token" TEXT,
10 | "expires_at" INTEGER,
11 | "token_type" TEXT,
12 | "scope" TEXT,
13 | "id_token" TEXT,
14 | "session_state" TEXT,
15 |
16 | CONSTRAINT "Account_pkey" PRIMARY KEY ("id")
17 | );
18 |
19 | -- CreateTable
20 | CREATE TABLE "Session" (
21 | "id" TEXT NOT NULL,
22 | "sessionToken" TEXT NOT NULL,
23 | "userId" TEXT NOT NULL,
24 | "expires" TIMESTAMP(3) NOT NULL,
25 |
26 | CONSTRAINT "Session_pkey" PRIMARY KEY ("id")
27 | );
28 |
29 | -- CreateTable
30 | CREATE TABLE "User" (
31 | "id" TEXT NOT NULL,
32 | "name" TEXT,
33 | "email" TEXT,
34 | "emailVerified" TIMESTAMP(3),
35 | "image" TEXT,
36 |
37 | CONSTRAINT "User_pkey" PRIMARY KEY ("id")
38 | );
39 |
40 | -- CreateTable
41 | CREATE TABLE "VerificationToken" (
42 | "identifier" TEXT NOT NULL,
43 | "token" TEXT NOT NULL,
44 | "expires" TIMESTAMP(3) NOT NULL
45 | );
46 |
47 | -- CreateTable
48 | CREATE TABLE "Gate" (
49 | "id" TEXT NOT NULL,
50 | "creatorId" TEXT NOT NULL,
51 | "repoOwner" TEXT NOT NULL,
52 | "repoName" TEXT NOT NULL,
53 | "blockNumber" INTEGER NOT NULL,
54 | "contract" TEXT NOT NULL,
55 | "contractName" TEXT NOT NULL,
56 | "contractDecimals" INTEGER NOT NULL,
57 | "numTokens" DOUBLE PRECISION NOT NULL,
58 | "numInvites" INTEGER NOT NULL,
59 | "usedInvites" INTEGER NOT NULL DEFAULT 0,
60 |
61 | CONSTRAINT "Gate_pkey" PRIMARY KEY ("id")
62 | );
63 |
64 | -- CreateIndex
65 | CREATE UNIQUE INDEX "Account_provider_providerAccountId_key" ON "Account"("provider", "providerAccountId");
66 |
67 | -- CreateIndex
68 | CREATE UNIQUE INDEX "Session_sessionToken_key" ON "Session"("sessionToken");
69 |
70 | -- CreateIndex
71 | CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
72 |
73 | -- CreateIndex
74 | CREATE UNIQUE INDEX "VerificationToken_token_key" ON "VerificationToken"("token");
75 |
76 | -- CreateIndex
77 | CREATE UNIQUE INDEX "VerificationToken_identifier_token_key" ON "VerificationToken"("identifier", "token");
78 |
79 | -- AddForeignKey
80 | ALTER TABLE "Account" ADD CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
81 |
82 | -- AddForeignKey
83 | ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
84 |
85 | -- AddForeignKey
86 | ALTER TABLE "Gate" ADD CONSTRAINT "Gate_creatorId_fkey" FOREIGN KEY ("creatorId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
87 |
--------------------------------------------------------------------------------
/prisma/migrations/migration_lock.toml:
--------------------------------------------------------------------------------
1 | # Please do not edit this file manually
2 | # It should be added in your version-control system (i.e. Git)
3 | provider = "postgresql"
--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
1 | // This is your Prisma schema file,
2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
3 |
4 | generator client {
5 | provider = "prisma-client-js"
6 | }
7 |
8 | datasource db {
9 | provider = "postgresql"
10 | url = env("DATABASE_URL")
11 | }
12 |
13 | model Account {
14 | id String @id @default(cuid())
15 | userId String
16 | type String
17 | provider String
18 | providerAccountId String
19 | refresh_token String? @db.Text
20 | access_token String? @db.Text
21 | expires_at Int?
22 | token_type String?
23 | scope String?
24 | id_token String? @db.Text
25 | session_state String?
26 |
27 | user User @relation(fields: [userId], references: [id], onDelete: Cascade)
28 |
29 | @@unique([provider, providerAccountId])
30 | }
31 |
32 | model Session {
33 | id String @id @default(cuid())
34 | sessionToken String @unique
35 | userId String
36 | expires DateTime
37 | user User @relation(fields: [userId], references: [id], onDelete: Cascade)
38 | }
39 |
40 | model User {
41 | id String @id @default(cuid())
42 | name String?
43 | email String? @unique
44 | emailVerified DateTime?
45 | image String?
46 | accounts Account[]
47 | sessions Session[]
48 | gates Gate[]
49 | }
50 |
51 | model VerificationToken {
52 | identifier String
53 | token String @unique
54 | expires DateTime
55 |
56 | @@unique([identifier, token])
57 | }
58 |
59 | model Gate {
60 | id String @id @default(cuid())
61 | creatorId String
62 | repoOwner String
63 | repoName String
64 | blockNumber Int
65 | contract String
66 | contractName String
67 | contractDecimals Int
68 | numTokens Float
69 | numInvites Int
70 | usedInvites Int @default(0)
71 | creator User @relation(fields: [creatorId], references: [id])
72 | }
73 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Anish-Agnihotri/GateRepo/d430483629d1ec59d78297f527ba0b62d08c6aff/public/favicon.ico
--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/public/meta.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Anish-Agnihotri/GateRepo/d430483629d1ec59d78297f527ba0b62d08c6aff/public/meta.png
--------------------------------------------------------------------------------
/styles/components/Layout.module.scss:
--------------------------------------------------------------------------------
1 | // Layout wrapper
2 | .layout {
3 | min-width: 100vw;
4 | min-height: calc(100vh - 50px);
5 | display: flex;
6 | padding-top: 50px;
7 |
8 | flex-direction: column;
9 | align-items: center;
10 |
11 | // Logo
12 | > a {
13 | margin-bottom: 30px;
14 |
15 | > img {
16 | width: 250px;
17 | transition: 100ms ease-in-out;
18 | }
19 |
20 | &:hover {
21 | > img {
22 | opacity: 0.8;
23 | }
24 | }
25 | }
26 |
27 | h2 {
28 | color: var(--color-dark);
29 | margin: 0px;
30 | font-size: 14px;
31 | font-weight: 600;
32 | }
33 | }
34 |
35 | // Sizing
36 | .layout__main {
37 | display: flex;
38 | flex-direction: column;
39 | width: calc(100% - 32px);
40 | max-width: 432px;
41 | }
42 |
43 | // Authenticated
44 | .layout__main_auth {
45 | background-color: white;
46 | border: 1px solid var(--color-border);
47 | border-radius: 10px;
48 | display: flex;
49 | align-items: center;
50 | justify-content: space-between;
51 | text-align: right;
52 | padding: 10px;
53 |
54 | img {
55 | height: 30px;
56 | width: 30px;
57 | border-radius: 50%;
58 | }
59 |
60 | > div {
61 | display: flex;
62 | align-items: center;
63 | }
64 |
65 | h3 {
66 | margin: 0px;
67 | font-size: 14px;
68 | font-weight: 600;
69 | padding-left: 10px;
70 | }
71 |
72 | button {
73 | background-color: transparent;
74 | border: none;
75 | padding: 0px;
76 | text-decoration: underline;
77 |
78 | &:hover {
79 | opacity: 0.8;
80 | }
81 | }
82 | }
83 |
84 | // Unauthenticated
85 | .layout__unauthenticated {
86 | max-width: 432px;
87 | background-color: white;
88 | border: 1px solid var(--color-border);
89 | border-radius: 10px;
90 | padding: 20px;
91 | margin: 0px 16px;
92 | text-align: center;
93 |
94 | > p {
95 | color: var(--color-text-secondary);
96 | line-height: 1.5;
97 | margin-top: 0px;
98 | }
99 |
100 | > button {
101 | padding: 5px 12px;
102 | width: 100%;
103 | font-size: 12px;
104 | line-height: 20px;
105 | background-color: var(--color-button);
106 | border: 1px solid var(--color-border);
107 | border-radius: 6px;
108 | box-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
109 | transition: 100ms ease;
110 |
111 | &:hover {
112 | border-color: rgba(27, 31, 36, 0.15);
113 | background-color: var(--color-button-hover);
114 | }
115 | }
116 | }
117 |
118 | // Credits
119 | .layout__credit {
120 | margin-top: 20px;
121 | font-size: 14px;
122 | font-weight: 400;
123 | color: var(--color-text-secondary);
124 |
125 | a {
126 | text-decoration: underline;
127 |
128 | &:hover {
129 | opacity: 0.8;
130 | }
131 | }
132 | }
133 |
--------------------------------------------------------------------------------
/styles/global.scss:
--------------------------------------------------------------------------------
1 | * {
2 | --color-dark: #24292f;
3 | --color-canvas: #f6f8fa;
4 | --color-border: #d0d7de;
5 | --color-button: #f4f5f7;
6 | --color-button-hover: #f3f4f6;
7 | --color-button-border: #1b1f2426;
8 | --color-text-invert: #ffffffb3;
9 | --color-text-primary: #24292f;
10 | --color-text-secondary: #57606a;
11 |
12 | // Green button
13 | --color-button-green: #2da44e;
14 | --color-button-green-hover: #2c974b;
15 | --color-button-green-disabled: #ffffffcc;
16 | --color-button-green-disabled-bg: #94d3a2;
17 |
18 | // Input
19 | --color-canvas-inset: #f6f8fa;
20 | }
21 |
22 | html,
23 | body {
24 | padding: 0;
25 | margin: 0;
26 | color: var(--color-text-primary);
27 | background-color: var(--color-canvas);
28 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
29 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
30 | }
31 |
32 | a {
33 | color: inherit;
34 | text-decoration: none;
35 | }
36 |
37 | * {
38 | box-sizing: border-box;
39 | }
40 |
41 | button {
42 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
43 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
44 | cursor: pointer;
45 | }
46 |
47 | input {
48 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
49 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
50 | }
51 |
--------------------------------------------------------------------------------
/styles/pages/Create.module.scss:
--------------------------------------------------------------------------------
1 | // Sizing
2 | .create {
3 | > p {
4 | font-size: 15px;
5 | margin: 5px 0px 20px 0px;
6 | }
7 |
8 | > div {
9 | background-color: white;
10 | border: 1px solid var(--color-border);
11 | border-radius: 10px;
12 | margin-bottom: 30px;
13 | }
14 | }
15 |
16 | // Menu
17 | .create__menu {
18 | display: flex;
19 | flex-direction: column;
20 |
21 | label {
22 | font-size: 14px;
23 | font-weight: 600;
24 | margin: 10px 10px 5px 10px;
25 | }
26 |
27 | input {
28 | padding: 8px;
29 | font-size: 14px;
30 | background-color: var(--color-canvas-inset);
31 | border: 1px solid var(--color-button-border);
32 | border-radius: 5px;
33 |
34 | &:focus {
35 | background-color: white;
36 | }
37 | }
38 |
39 | input,
40 | button {
41 | margin: 0px 10px 0px 10px;
42 | }
43 |
44 | button {
45 | margin-top: 15px;
46 | margin-bottom: 10px;
47 | padding: 8px 10px;
48 | font-size: 14px;
49 | font-weight: 500;
50 | color: white;
51 | background-color: var(--color-button-green);
52 | border: 1px solid var(--color-button-border);
53 | border-radius: 6px;
54 | transition: 100ms ease;
55 | box-shadow: rgba(27, 31, 36, 0.1) 0px 1px 0px 0;
56 |
57 | &:hover {
58 | color: var(--color-button-hover);
59 | background-color: var(--color-button-green-hover);
60 | }
61 |
62 | &:disabled {
63 | cursor: not-allowed;
64 | color: var(--color-button-green-disabled);
65 | background-color: var(--color-button-green-disabled-bg);
66 | }
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/styles/pages/Home.module.scss:
--------------------------------------------------------------------------------
1 | // Sizing
2 | .home {
3 | > p {
4 | font-size: 15px;
5 | margin: 5px 0px 10px 0px;
6 | }
7 |
8 | > div {
9 | background-color: white;
10 | border: 1px solid var(--color-border);
11 | border-radius: 10px;
12 | margin-bottom: 30px;
13 | }
14 | }
15 |
16 | // Private repos
17 | .home__repo {
18 | max-height: 240px;
19 | overflow-y: scroll;
20 | }
21 |
22 | // Individual repo items
23 | .home__repo_item {
24 | margin: 10px;
25 | padding: 5px 10px;
26 | border-radius: 6px;
27 | background-color: var(--color-button-hover);
28 | display: flex;
29 | align-items: center;
30 | justify-content: space-between;
31 | border: 1px solid var(--color-border);
32 |
33 | a {
34 | font-size: 14px;
35 | font-weight: 600;
36 | max-width: 250px;
37 | white-space: nowrap;
38 | overflow: hidden;
39 | text-overflow: ellipsis;
40 |
41 | &:hover {
42 | opacity: 0.8;
43 | }
44 | }
45 |
46 | button {
47 | padding: 5px 10px;
48 | font-size: 14px;
49 | font-weight: 500;
50 | color: white;
51 | background-color: var(--color-button-green);
52 | border: 1px solid var(--color-button-border);
53 | border-radius: 6px;
54 | transition: 100ms ease;
55 | box-shadow: rgba(27, 31, 36, 0.1) 0px 1px 0px 0;
56 |
57 | &:hover {
58 | color: var(--color-button-hover);
59 | background-color: var(--color-button-green-hover);
60 | }
61 |
62 | &:disabled {
63 | cursor: not-allowed;
64 | color: var(--color-button-green-disabled);
65 | background-color: var(--color-button-green-disabled-bg);
66 | }
67 | }
68 | }
69 |
70 | // Loading state
71 | .home__loading {
72 | display: flex;
73 | flex-direction: column;
74 | align-items: center;
75 |
76 | > svg {
77 | transform: translateY(5px);
78 | }
79 | }
80 |
81 | // Empty state
82 | .home__empty {
83 | h3 {
84 | text-align: center;
85 | margin: 20px;
86 | font-size: 14px;
87 | font-weight: 500;
88 | color: var(--color-text-secondary);
89 | }
90 | }
91 |
92 | // Gates
93 | .home__gates {
94 | max-height: 240px;
95 | overflow-y: scroll;
96 | }
97 |
98 | // Gate item
99 | .home__gates_item {
100 | margin: 10px;
101 | border-radius: 6px;
102 | background-color: var(--color-button-hover);
103 | display: flex;
104 | flex-direction: column;
105 | align-items: center;
106 | border: 1px solid var(--color-border);
107 |
108 | > div:nth-of-type(1) {
109 | width: 100%;
110 | padding: 10px;
111 | border-bottom: 1px solid var(--color-border);
112 |
113 | > a {
114 | font-size: 14px;
115 | font-weight: 600;
116 | color: var(--color-dark);
117 | display: block;
118 | }
119 | }
120 |
121 | > div:nth-of-type(2) {
122 | width: 100%;
123 | padding: 10px;
124 | border-bottom: 1px solid var(--color-border);
125 |
126 | > p {
127 | margin: 3px 0px;
128 | font-size: 14px;
129 | color: var(--color-text-secondary);
130 |
131 | a {
132 | text-decoration: underline;
133 |
134 | &:hover {
135 | opacity: 0.8;
136 | }
137 | }
138 | }
139 | }
140 |
141 | > div:nth-of-type(3) {
142 | width: 100%;
143 | padding: 10px;
144 | display: flex;
145 | justify-content: space-between;
146 |
147 | button {
148 | width: 48%;
149 | padding: 7px 12px;
150 | border-radius: 6px;
151 | background-color: var(--color-button);
152 | border: 1px solid var(--color-border);
153 | box-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
154 | transition: 50ms ease-in-out;
155 |
156 | &:hover {
157 | opacity: 0.8;
158 | }
159 |
160 | &:disabled {
161 | cursor: not-allowed;
162 | }
163 |
164 | &:nth-of-type(2) {
165 | color: #cf222e;
166 |
167 | &:hover {
168 | opacity: 1;
169 | background-color: #cf222e;
170 | color: white;
171 | border-color: #cf222e;
172 | }
173 |
174 | &:disabled {
175 | opacity: 1;
176 | background-color: #cf222e;
177 | color: white;
178 | border-color: #cf222e;
179 | }
180 | }
181 | }
182 | }
183 | }
184 |
--------------------------------------------------------------------------------
/styles/pages/Join.module.scss:
--------------------------------------------------------------------------------
1 | // Sizing
2 | .join {
3 | display: flex;
4 | flex-direction: column;
5 | width: calc(100% - 32px);
6 | max-width: 432px;
7 |
8 | > h2 {
9 | text-align: center;
10 | font-size: 22px !important;
11 | }
12 |
13 | > p {
14 | font-size: 15px;
15 | text-align: center;
16 | margin: 5px 0px 20px 0px;
17 | line-height: 20px;
18 | }
19 |
20 | > div {
21 | background-color: white;
22 | border: 1px solid var(--color-border);
23 | border-radius: 10px;
24 | margin-bottom: 30px;
25 | }
26 |
27 | h3 {
28 | margin: 0px 10px 0px 0px;
29 | font-size: 14px;
30 | font-weight: 600;
31 | }
32 | }
33 |
34 | // Wallet
35 | .join__wallet {
36 | padding: 20px;
37 |
38 | h3 {
39 | text-align: center;
40 | font-size: 16px;
41 | font-weight: 600;
42 | }
43 |
44 | p {
45 | text-align: center;
46 | font-size: 14px;
47 | color: var(--color-text-secondary);
48 | line-height: 20px;
49 | margin-top: 5px;
50 |
51 | a {
52 | text-decoration: underline;
53 |
54 | &:hover {
55 | opacity: 0.8;
56 | }
57 | }
58 | }
59 |
60 | > div {
61 | display: flex;
62 | flex-direction: column;
63 | justify-content: space-between;
64 | height: 82px;
65 | padding-top: 10px;
66 | }
67 | }
68 |
69 | // Buttons
70 | .join__buttons_inactive {
71 | button {
72 | padding: 5px 12px;
73 | width: 100%;
74 | font-size: 14px;
75 | line-height: 20px;
76 | background-color: var(--color-button);
77 | border: 1px solid var(--color-border);
78 | border-radius: 6px;
79 | box-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
80 | transition: 100ms ease;
81 |
82 | &:hover {
83 | border-color: rgba(27, 31, 36, 0.15);
84 | background-color: var(--color-button-hover);
85 | }
86 | }
87 | }
88 |
89 | // Buttons - Active
90 | .join__buttons_active {
91 | height: 68px !important;
92 |
93 | button:nth-of-type(1) {
94 | padding: 5px 12px;
95 | font-size: 14px;
96 | font-weight: 500;
97 | color: white;
98 | line-height: 20px;
99 | background-color: var(--color-button-green);
100 | border: 1px solid var(--color-button-border);
101 | border-radius: 6px;
102 | transition: 100ms ease;
103 | box-shadow: rgba(27, 31, 36, 0.1) 0px 1px 0px 0;
104 |
105 | &:hover {
106 | color: var(--color-button-hover);
107 | background-color: var(--color-button-green-hover);
108 | }
109 |
110 | &:disabled {
111 | cursor: not-allowed;
112 | color: var(--color-button-green-disabled);
113 | background-color: var(--color-button-green-disabled-bg);
114 | }
115 | }
116 |
117 | button:nth-of-type(2) {
118 | background-color: transparent;
119 | border: none;
120 | font-size: 12px;
121 | text-decoration: underline;
122 | color: var(--color-text-secondary);
123 |
124 | &:hover {
125 | opacity: 0.8;
126 | }
127 | }
128 | }
129 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "baseUrl": "./"
18 | },
19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
20 | "exclude": ["node_modules"]
21 | }
22 |
--------------------------------------------------------------------------------
144 |
145 |
146 |
147 |
148 | {/* Description */}
149 |
222 | Private Repo Invitation
150 |{templateDescription}
151 | 152 | {session && session.user.id && ( 153 | // If authenticated, allow connecting wallet 154 |
155 |
211 | )}
212 |
213 | {/* GitHub Authentication state */}
214 | {!session || !session.user.id ? (
215 | // Unauthenticated
216 | {!active ? "Connect Wallet" : "Join Repository"}
156 |157 | Accessing this repository requires having held{" "} 158 | {formatNumber(gate.numTokens)}{" "} 159 | 164 | {gate.contractName} 165 | {" "} 166 | token{gate.numTokens == 1 ? "" : "s"} at block{" "} 167 | 172 | #{formatNumber(gate.blockNumber)} 173 | 174 | . 175 |
176 | 177 | {/* Connect wallet */} 178 | {!active ? ( 179 | // Not active 180 |
181 |
187 |
193 |
194 | ) : (
195 | // Connected
196 |
197 |
202 |
208 |
209 | )}
210 |