add: sybil check with nextid

web/.env.example

@@ -3,4 +3,5 @@ NEXT_PUBLIC_WALLET_CONNECT_PROJECT=
 TABLELAND_WRITER_SK=
 TABLELAND_RPC_URL=
 # something like projects2_314159_599
-TABLELAND_PROJECTS_TABLE=
+TABLELAND_PROJECTS_TABLE=
+NEXTID_API_KEY=""

web/app/[projectId]/NextidBadges.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Data, IdentityRecord, IdentityWithSource, DataSource, Platform } from '../types/nextid';
+import Link from 'next/link';
+import Image from 'next/image';
+import { unknown, lens, github, ethereum, nextid, space_id, twitter, keybase, reddit, farcaster, sybil, notSybil } from "./imports";
+
+
+export default function NextidBadges() {
+  const [identities, setIdentities] = useState<IdentityWithSource[]>([]);
+  const walletAddress = "0x934b510d4c9103e6a87aef13b816fb080286d649";
+
+  const convertToVar = (name:string) => {
+
+    if (name == "twitter") return twitter;
+    else if (name == "farcaster") return farcaster;
+    else if (name == "lens") return lens;
+    else if (name == "keybase") return keybase;
+    else if (name == "reddit") return reddit;
+    else if (name == "github") return github;
+    else if (name == "ethereum") return ethereum;
+    else if (name == "space_id") return space_id;
+    else if (name == "nextid") return nextid;
+    else return unknown;
+
+  }
+
+  const convertToUrl = (name:string) => {
+
+    if (name == "twitter") return "https://twitter.com/";
+    else if (name == "farcaster") return "https://warpcast.com/";
+    else if (name == "lens") return "https://hey.xyz/u/";
+    else if (name == "reddit") return "https://www.reddit.com/user/";
+    else if (name == "github") return "https://github.com/";
+    else if (name == "space_id") return "https://space.id/search?query=";
+    // ethereum with displayName https://web3.bio/sujiyan.eth
+    // keybase with displayName https://keybase.io/sujiyan
+    else return "https://www.example.com/";
+
+  }
+
+  const sybilCheck = () => {
+    let isSybil = 0;
+    identities.forEach(identity => {
+      identity.sources?.forEach(syb => {
+        if (syb === "sybil") {isSybil = 1;}
+      })
+    });
+    return isSybil == 1 ? sybil : notSybil;
+  }
+
+  useEffect(() => {
+
+    // make an api request to /api/nextid to fetch the userdata
+    const getIdentities = async () => {
+
+      const customerdata = await fetch('/api/nextid', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ address: walletAddress }),
+      });
+
+      const identities: IdentityWithSource[] = await customerdata.json();
+      setIdentities(identities);
+      console.log("fetched identities");
+      // console.log(identities);
+
+    }
+    getIdentities();
+  }, []);
+
+  return (
+  <div className="p-2 my-2 text-center">
+    <div className="flex">
+      Sybil:
+      <div className="py-0 px-1"><Image src= { sybilCheck() } height={30} width={30} alt="sybil check" /></div>
+    </div>
+    <div className="flex py-2">
+      <div>Platforms:</div>
+      <div className="flex">
+        {
+        identities.map((ele: IdentityWithSource) => 
+
+          <div key={ele?.identity.uuid} className="mx-2 px-2">
+            {
+            ele?.identity?.displayName !== "" &&
+            <Link href={convertToUrl(ele?.identity?.platform) + ele?.identity?.identity} target="blank">    
+              <div><Image src= { convertToVar(ele?.identity?.platform) } height={24} width={24} alt="nextIimge" /></div>
+              <div>
+                {
+                (ele?.identity?.platform === "keybase" || ele?.identity?.platform === "ethereum") &&
+                `@${ele?.identity?.displayName}`
+                }
+                {
+                ele?.identity?.platform !== "nextid" && 
+                ele?.identity?.platform !== "keybase" && 
+                ele?.identity?.platform !== "ethereum" && 
+                `@${ele?.identity?.identity}`
+                }
+              </div>
+              {/* <div>{ele?.identity?.platform}</div> */}
+            </Link>}
+          </div>
+
+        )
+        }
+      </div>
+
+    </div>
+  </div>
+  );
+}

web/app/[projectId]/imports.ts

@@ -0,0 +1,28 @@
+import unknown from "../../public/unknown.svg";
+import lens from "../../public/lens-favicon.ico";
+import github from "../../public/github-142-svgrepo-com.svg";
+import ethereum from "../../public/ethereum-svgrepo-com.svg";
+import nextid from "../../public/nextid-favicon.ico";
+import space_id from "../../public/space_id-favicon.ico";
+import twitter from "../../public/twitter-favicon.ico";
+import keybase from "../../public/keybase-favicon.ico";
+import reddit from "../../public/reddit-favicon.ico";
+import farcaster from "../../public/farcaster.svg";
+import sybil from "../../public/verified-48.png";
+import notSybil from "../../public/cross-mark-svgrepo-com.svg";
+
+export {
+    unknown,
+    lens,
+    github,
+    ethereum,
+    nextid,
+    space_id,
+    twitter,
+    keybase,
+    reddit,
+    farcaster,
+    sybil,
+    notSybil,
+  };
+

web/app/[projectId]/page.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { getDeployTx, getDeployedAddress, getGasEstimate } from "../deploy";
+import NextidBadges from "./NextidBadges";
+
 
 export default function Create() {
   const [salt, setSalt] = useState(0);
@@ -17,7 +19,7 @@ export default function Create() {
   //     address: import.meta.env.VITE_CONTRACT_DEPLOYER_MUMBAI,
   //     args: [0, bytecode],
   // })
-
+  
   const onFileChanged = (event: any) => {
     const file = event.target.files[0];
 
@@ -47,11 +49,16 @@ export default function Create() {
     switch (step) {
       case 2:
         return (
+        <div>
           <div className="space-y-12">
             <p className="text-xl">
               Contract will be deployed to: {targetAddress}
             </p>
           </div>
+          <div>
+          <NextidBadges />
+          </div>
+        </div>
         );
       default:
         return (

web/app/api/nextid/route.ts

@@ -0,0 +1,48 @@
+import { Data } from '@/app/types/nextid';
+import { request as requestGQL, gql } from 'graphql-request';
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request, response: Response) {
+
+    // console.log(request.body);
+
+    const getUserData = async (userAddress : string) => {
+
+        const document = gql`
+        {
+          identity(platform: "ethereum", identity: "${userAddress}") {
+            platform
+            identity
+            displayName
+            # Here we perform a 3-depth deep search for this identity's "neighbor".
+            neighbor(depth: 3) {
+              sources # Which upstreams provide these connection infos.
+              identity {
+                platform
+                identity
+                displayName
+              }
+            }
+          }
+        }
+        `;
+
+        const requestHeaders = {
+          'x-api-key': process.env.NEXTID_API_KEY!
+        };
+
+        const badgeData : Data = await requestGQL('https://relation-service.next.id/graphql/', document, requestHeaders);
+
+        return badgeData.identity.neighbor;
+
+      }
+
+      // const address = request.body.address;
+
+      // using this as a sample. we can use deployer's account once we have a next.id enabled account for testing
+      const returndata = await getUserData("0x934b510d4c9103e6a87aef13b816fb080286d649");
+      console.log("returning [] from api");
+      // console.log(returndata);
+
+    return NextResponse.json(returndata);
+}

web/app/types/nextid.ts

@@ -0,0 +1,56 @@
+export interface Data {
+  identity: {
+    platform: Platform;
+    identity: string;
+    displayName: string | null;
+    neighbor: IdentityWithSource[];
+  };
+}
+
+export interface IdentityRecord {
+  uuid: string;
+  platform: Platform;
+  identity: string;
+  displayName?: string | null;
+  neighbor?: IdentityWithSource[] | null;
+}
+
+export interface IdentityWithSource {
+  sources: DataSource[] | undefined;
+  identity: IdentityRecord;
+}
+
+export enum DataSource {
+  Sybil = "sybil",
+  Keybase = "keybase",
+  NextID = "nextid",
+  RSS3 = "rss3",
+  KNN3 = "knn3",
+  CyberConnect = "cyberconnect",
+  EthLeaderboard = "ethLeaderboard",
+  TheGraph = "the_graph",
+  RpcServer = "rpc_server",
+  DotBit = "dotbit",
+  UnstoppableDomains = "unstoppabledomains",
+  Lens = "lens",
+  Farcaster = "farcaster",
+  SpaceID = "space_id",
+  Unknown = "unknown",
+}
+
+export enum Platform {
+  Twitter = "twitter",
+  Ethereum = "ethereum",
+  NextID = "nextid",
+  Keybase = "keybase",
+  Github = "github",
+  Reddit = "reddit",
+  Lens = "lens",
+  DotBit = "dotbit",
+  DNS = "dns",
+  Minds = "minds",
+  UnstoppableDomains = "unstoppabledomains",
+  Farcaster = "farcaster",
+  SpaceId = "space_id",
+  Unknown = "unknown"
+}