feat: Populate permits from metadata

static/index.html

@@ -49,6 +49,7 @@
           </div>
         </a>
       </header>
+      <div id="authentication"></div>
       <div class="receipt-container">
         <table class="receipt" data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false" data-make-claim="error">
           <thead>

static/scripts/rewards/from-metadata.ts

@@ -0,0 +1,55 @@
+import { createClient } from "@supabase/supabase-js";
+import { AppState } from "./app-state";
+import { getGitHubAccessToken, renderGitHubLoginButton } from "../shared/auth/github";
+
+declare const SUPABASE_URL: string;
+declare const SUPABASE_ANON_KEY: string;
+
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+export async function readClaimDataFromMetadata(app: AppState) {
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  const accessToken = await getGitHubAccessToken();
+  if (!accessToken) {
+    // import the "login with github" button from work.ubq.fi
+    renderGitHubLoginButton();
+  }
+
+  let githubId;
+  if (user?.identities) {
+    githubId = user?.identities[0].id;
+  } else {
+    return;
+  }
+
+  // Using our metadata system we can easily GraphQL query for permits.
+  const permits = (await supabase.from("permits").select("*").eq("beneficiary_id", githubId)).data;
+
+  // GraphQL query with authentication for private repos.
+  if (!permits || !permits.length) {
+    return false;
+  }
+
+  const userData = (await supabase.from("users").select("*").eq("id", githubId)).data;
+  if (!userData) return;
+  const walletData = (await supabase.from("wallets").select("*").eq("id", userData[0]['wallet_id'])).data;
+  if (!walletData) return;
+  app.claims.push(...(permits.map(permit => {
+    return {
+      ...permit,
+      beneficiary: walletData[0].address,
+      networkId: 31337,
+      // TODO
+      owner: "0x70997970C51812dc3A010C7d01b50e0d17dc79C8",
+      // TODO
+      tokenAddres: "0xe91D153E0b41518A2Ce8Dd3D7944Fa863463a97d",
+      tokenType: "ERC20"
+    } 
+  })));
+
+  // limit to previous 100 results or whatever is the max that GraphQL can return in a single shot
+  // check if they have already been claimed, if so, discard
+  // if unclaimed permits are found, import into the UI (we should already support multiple permits to be loaded in the UI)
+}

static/scripts/rewards/init.ts

@@ -1,12 +1,15 @@
 import { app } from "./app-state";
+import { readClaimDataFromMetadata } from "./from-metadata";
 import { initClaimGiftCard } from "./gift-cards/index";
 import { displayCommitHash } from "./render-transaction/display-commit-hash";
 import { readClaimDataFromUrl } from "./render-transaction/read-claim-data-from-url";
 import { grid } from "./the-grid";
 
 displayCommitHash();
 grid(document.getElementById("grid") as HTMLElement, gridLoadedCallback); // @DEV: display grid background
-readClaimDataFromUrl(app).catch(console.error); // @DEV: read claim data from URL
+readClaimDataFromMetadata(app).then(() => {
+  readClaimDataFromUrl(app).catch(console.error); // @DEV: read claim data from URL
+}).catch(console.error);
 
 const footer = document.querySelector(".footer") as Element;
 footer.classList.add("ready");

static/scripts/rewards/render-transaction/read-claim-data-from-url.ts

@@ -29,10 +29,15 @@ export async function readClaimDataFromUrl(app: AppState) {
     // No claim data found
     setClaimMessage({ type: "Notice", message: `No claim data found.` });
     table.setAttribute(`data-make-claim`, "error");
+  } else {
+    app.claims.push(...decodeClaimData(base64encodedTxData));
+  }
+
+  // If no claim data from url or metadata quit
+  if (!app.claims) {
     return;
   }
 
-  app.claims = decodeClaimData(base64encodedTxData);
   app.claimTxs = await getClaimedTxs(app);
 
   try {

static/scripts/shared/auth/github.ts

@@ -0,0 +1,68 @@
+import { createClient } from "@supabase/supabase-js";
+
+declare const SUPABASE_URL: string;
+declare const SUPABASE_ANON_KEY: string;
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+async function gitHubLoginButtonHandler(scopes = "public_repo read:org") {
+  const redirectTo = window.location.href;
+  const { error } = await supabase.auth.signInWithOAuth({
+    provider: "github",
+    options: {
+      scopes,
+      redirectTo,
+    },
+  });
+  if (error) {
+    console.log(error);
+    // renderErrorInModal(error, "Error logging in");
+  }
+}
+
+async function checkSupabaseSession() {
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+
+  return session;
+}
+
+const augmentAccessButton = document.createElement("button");
+export function renderAugmentAccessButton() {
+  augmentAccessButton.id = "augment-access-button";
+  augmentAccessButton.innerHTML = `<span title="Allow access to private repositories"><svg viewBox="0 0 24 24" class="svg-icon"><path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2m0 12H6V10h12z"></path></svg><span/>`;
+  augmentAccessButton.addEventListener("click", () => gitHubLoginButtonHandler("repo read:org"));
+  return augmentAccessButton;
+}
+
+const gitHubLoginButton = document.createElement("button");
+export const authenticationElement = document.getElementById("authentication") as HTMLDivElement;
+export function renderGitHubLoginButton() {
+  gitHubLoginButton.id = "github-login-button";
+  gitHubLoginButton.innerHTML = "<span>Login</span><span class='full'>&nbsp;With GitHub</span>";
+  gitHubLoginButton.addEventListener("click", () => gitHubLoginButtonHandler());
+  if (authenticationElement) {
+    authenticationElement.appendChild(gitHubLoginButton);
+    authenticationElement.classList.add("ready");
+  }
+}
+
+export async function getGitHubAccessToken(): Promise<string | null> {
+  // better to use official function, looking up localstorage has flaws
+  const oauthToken = await checkSupabaseSession();
+
+  const expiresAt = oauthToken?.expires_at;
+  if (expiresAt) {
+    if (expiresAt < Date.now() / 1000) {
+      localStorage.removeItem(`sb-${"SUPABASE_STORAGE_KEY"}-auth-token`);
+      return null;
+    }
+  }
+
+  const accessToken = oauthToken?.provider_token;
+  if (accessToken) {
+    return accessToken;
+  }
+
+  return null;
+}