X delegators

app/allocation/page.tsx

@@ -29,7 +29,7 @@ import { useCategories } from '../comparison/utils/data-fetching/categories';
 import WorldIdSignInSuccessModal from './components/WorldIdSignInSuccessModal';
 import FarcasterModal from './components/FarcasterModal';
 import DelegateModal from '../delegation/DelegationModal';
-import { FarcasterLookup } from '../delegation/farcaster/FarcasterLookup';
+import { SocialLookup } from '../delegation/farcaster/FarcasterLookup';
 import FarcasterSuccess from '../delegation/farcaster/FarcasterSuccess';
 import { axiosInstance } from '../utils/axiosInstance';
 import { TargetDelegate } from '../delegation/farcaster/types';
@@ -66,8 +66,10 @@ const budgetCategory: BudgetCategory = {
 enum DelegationState {
   Initial,
   DelegationMethod,
-  Lookup,
-  Success,
+  FarcasterLookup,
+  XLookup,
+  WarpcastSuccess,
+  XSuccess,
 }
 
 const AllocationPage = () => {
@@ -150,14 +152,16 @@ const AllocationPage = () => {
     });
   };
 
-  const handleDelegate = async (username: string, target: TargetDelegate) => {
+  const handleDelegate = async (username: string, target: TargetDelegate, isX?: boolean) => {
     if (!categoryToDelegate) return;
 
     posthog.capture('Delegating vote power');
-    await axiosInstance.post('flow/delegate/farcaster', {
-      collectionId: categoryToDelegate.id,
-      targetUsername: username,
-    });
+    if (!isX) {
+      await axiosInstance.post('flow/delegate/farcaster', {
+        collectionId: categoryToDelegate.id,
+        targetUsername: username,
+      });
+    }
 
     queryClient.refetchQueries({
       queryKey: ['fetch-delegates'],
@@ -169,7 +173,12 @@ const AllocationPage = () => {
       queryKey: ['categories'],
     });
     setTargetDelegate(target);
-    setDelegationState(DelegationState.Success);
+    if (isX) {
+      setDelegationState(DelegationState.XSuccess);
+    }
+    else {
+      setDelegationState(DelegationState.WarpcastSuccess);
+    }
   };
 
   const handleAttestationModalClose = () => {
@@ -408,25 +417,46 @@ const AllocationPage = () => {
               posthog.capture('Find delegate on Farcaster', {
                 category: categoryToDelegate!.name,
               });
-              setDelegationState(DelegationState.Lookup);
+              setDelegationState(DelegationState.FarcasterLookup);
             }}
-            onFindDelegatesTwitter={() => {}}
+            onFindDelegatesTwitter={() => {
+              posthog.capture('Find delegate on Farcaster', {
+                category: categoryToDelegate!.name,
+              });
+              setDelegationState(DelegationState.XLookup);
+            }}
+          />
+        )}
+
+        {delegationState === DelegationState.FarcasterLookup && (
+          <SocialLookup
+            handleDelegate={handleDelegate}
+            categoryName={categoryToDelegate!.name}
           />
         )}
 
-        {delegationState === DelegationState.Lookup && (
-          <FarcasterLookup
+        {delegationState === DelegationState.XLookup && (
+          <SocialLookup
             handleDelegate={handleDelegate}
             categoryName={categoryToDelegate!.name}
+            isX
+          />
+        )}
+        {delegationState === DelegationState.WarpcastSuccess && targetDelegate && (
+          <FarcasterSuccess
+            categoryName={categoryToDelegate!.name}
+            displayName={targetDelegate.displayName!}
+            username={targetDelegate.username}
+            profilePicture={targetDelegate.profilePicture!}
+            onClose={resetDelegateState}
           />
         )}
-        {delegationState === DelegationState.Success && targetDelegate && (
+        {delegationState === DelegationState.XSuccess && targetDelegate && (
           <FarcasterSuccess
             categoryName={categoryToDelegate!.name}
-            displayName={targetDelegate.displayName}
             username={targetDelegate.username}
-            profilePicture={targetDelegate.profilePicture}
             onClose={resetDelegateState}
+            isX
           />
         )}
       </Modal>

app/api/checkTwitterUser/route.ts

@@ -0,0 +1,88 @@
+import { NextRequest, NextResponse } from 'next/server';
+import puppeteerCore from 'puppeteer-core';
+import chromium from '@sparticuz/chromium';
+import puppeteer from 'puppeteer';
+
+interface IRequestBody {
+  url: string
+}
+export async function POST(req: NextRequest) {
+  const body: IRequestBody = await req.json();
+  let url: URL;
+  try {
+    url = new URL(body.url);
+  }
+  catch (error) {
+    return NextResponse.json(
+      { error: 'Invalid URL provided.' },
+      { status: 400 }
+    );
+  }
+  if (url.host !== 'x.com' && url.host !== 'twitter.com') {
+    return NextResponse.json(
+      { error: 'URL provided doesn\'t belong to X(Twitter)' },
+      { status: 400 }
+    );
+  }
+  const regex = /^https?:\/\/(www\.)?(?:x\.com|twitter\.com)\/[A-Za-z0-9_]{1,15}$/;
+  if (!regex.test(url.toString())) {
+    return NextResponse.json(
+      { error: 'URL isn\'t valid' },
+      { status: 400 }
+    );
+  }
+  const paramsArray = url.pathname.split('/');
+  if (paramsArray.length !== 2) {
+    /* most probably wont happen because of regex */
+    return NextResponse.json(
+      { error: 'URL isn\'t a valid' },
+      { status: 400 }
+    );
+  }
+  const userhandle = paramsArray[1];
+
+  console.log(process.env.NODE_ENV, await chromium.executablePath());
+  let browser = null;
+  if (process.env.NODE_ENV === 'development') {
+    browser = await puppeteer.launch({ headless: true });
+  }
+  else {
+    browser = await puppeteerCore.launch({
+      headless: chromium.headless,
+      args: [
+        ...chromium.args,
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+        '--disable-dev-shm-usage',
+        '--single-process',
+        '--disable-gpu',
+      ],
+      defaultViewport: chromium.defaultViewport,
+      executablePath: await chromium.executablePath(),
+    });
+  }
+
+  const page = await browser.newPage();
+  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36');
+  await page.goto(url.toString(), { waitUntil: 'networkidle2' });
+  const html = await page.content();
+
+  const doesntExist = html.includes('This account doesn’t exist');
+
+  if (doesntExist) {
+    await browser.close();
+    return NextResponse.json(
+      { error: 'Account doesn\'t exists' },
+      { status: 400 }
+    );
+  }
+
+  return NextResponse.json(
+    {
+      data: {
+        username: userhandle,
+      },
+    },
+    { status: 200 }
+  );
+}

app/delegation/DelegationModal.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import React from 'react';
 import { WarpcastIcon } from '@/public/assets/icon-components/WarpcastIcon';
+import { XIcon } from '@/public/assets/icon-components/XIcon';
 
 interface Props {
   categoryName: string
@@ -11,6 +12,7 @@ interface Props {
 const DelegateModal: React.FC<Props> = ({
   categoryName,
   onFindDelegatesFarcaster,
+  onFindDelegatesTwitter,
 }) => {
   return (
     <div className="mx-auto max-w-[500px] rounded-lg bg-white px-6 py-8 shadow-lg">
@@ -45,7 +47,16 @@ const DelegateModal: React.FC<Props> = ({
         heard by delegating your voting power to a delegate.
       </p>
 
-      <div className="space-y-4">
+      <div className="mt-4">
+        <button
+          onClick={onFindDelegatesTwitter}
+          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2  py-3 text-white hover:bg-gray-100"
+        >
+          <XIcon />
+          <span className="text-black">Find delegates on Twitter</span>
+        </button>
+      </div>
+      <div className="mt-4">
         <button
           onClick={onFindDelegatesFarcaster}
           className="flex w-full items-center justify-center space-x-2 rounded-lg border-2  py-3 text-white hover:bg-gray-100"