initial commit

.env.local

@@ -0,0 +1,10 @@
+# These can be obtained from the Twitter Developer dashboard under your project
+TWITTER_AUTH_CLIENT_ID="enter_your_client_id_here"
+TWITTER_AUTH_CLIENT_SECRET="enter_your_client_secret_here"
+TWITTER_CALLBACK_URL="http://localhost:3000/twitter-callback"
+
+# These are custom defined
+TWITTER_AUTH_CHALLENGE="1a5489693c94ff27e998"
+TWITTER_AUTH_STATE="4d97327ce8d64acfa53f"
+
+# These are deprecated

README.md

@@ -0,0 +1,28 @@
+# LUKSO Twitter UP dApp
+
+Based on [**nextjs-twitter-starter**](https://github.com/Dineshs91/nextjs-twitter-starter)
+
+## Setup
+
+1. Install the dependencies
+
+```
+yarn install
+```
+
+2. in the Twitter Developer dashboard, create a project with Twitter API v2 and save the credentials of the projects under the `.env.local` file as shown below:
+
+```
+TWITTER_AUTH_CLIENT_ID="..."
+TWITTER_AUTH_CLIENT_SECRET="..."
+```
+
+3. add the callback url of the project as `http://localhost:3000/twitter-callback` in the Twitter Developer dashboard.
+
+## Running the dApp
+
+```
+yarn dev
+```
+
+Navigate to [localhost:3000](https://localhost:3000) and follow the steps.

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  reactStrictMode: true,
+  async rewrites() {
+    return [
+      // Rewrite everything else to use `pages/index`
+      {
+        source: '/:path*',
+        destination: '/',
+      },
+    ];
+  },
+}

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "nextjs-twitter-starter",
+  "version": "0.1.0",
+  "private": false,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/server": "^11.11.0",
+    "@erc725/erc725.js": "^0.17.2",
+    "@lukso/lsp-factory.js": "^2.5.1",
+    "@lukso/lsp-smart-contracts": "^0.8.2",
+    "@lukso/web-components": "^1.21.0",
+    "@mantine/core": "^6.0.10",
+    "@mantine/hooks": "^6.0.10",
+    "@mantine/next": "^6.0.10",
+    "@mantine/prism": "^6.0.10",
+    "autoprefixer": "^10.3.7",
+    "bulma": "^0.9.4",
+    "ethers": "~5.7.0",
+    "next": "^13.4.0",
+    "node-sass": "~7.0.0",
+    "postcss": "^8.4.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.1",
+    "tailwindcss": "^3.0.1",
+    "twitter-api-sdk": "^1.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^17.0.0",
+    "typescript": "^5.0.4"
+  }
+}

pages/LSP3Profile-template.json

@@ -0,0 +1,11 @@
+{
+    "LSP3Profile": {
+        "name": "",
+        "description": "",
+        "links": [
+            { "title": "Twitter", "url": "" }
+        ],
+        "tags": ["public profile", "Twitter"],
+        "profileImage": []
+    }
+}

pages/LSP3Profile.json

@@ -0,0 +1,49 @@
+{
+    "LSP3Profile": {
+      "name": "frozeman",
+      "description": "The inventor of ERC725 and ERC20...",
+      "links": [
+        { "title": "Twitter", "url": "https://twitter.com/feindura" },
+        { "title": "lukso.network", "url": "https://lukso.network" }
+      ],
+      "tags": ["brand", "public profile"],
+      "avatar": [
+        {
+          "hashFunction": "keccak256(bytes)",
+          "hash": "0x98fe032f81c43426fbcfb21c780c879667a08e2a65e8ae38027d4d61cdfe6f55",
+          "url": "ifps://QmPJESHbVkPtSaHntNVY5F6JDLW8v69M2d6khXEYGUMn7N",
+          "fileType": "fbx"
+        }
+      ],
+      "profileImage": [
+        {
+          "width": 1800,
+          "height": 1013,
+          "hashFunction": "keccak256(bytes)",
+          "hash": "0x98fe032f81c43426fbcfb21c780c879667a08e2a65e8ae38027d4d61cdfe6f55",
+          "url": "ifps://QmPJESHbVkPtSaHntNVY5F6JDLW8v69M2d6khXEYGUMn7N"
+        },
+        {
+          "address": "0x1231c7436a77a009a97e48e4e10c92e89fd95fe15",
+          "tokenId": "0xdde1c7436a77a009a97e48e4e10c92e89fd95fe1556fc5c62ecef57cea51aa37"
+        }
+      ],
+      "backgroundImage": [
+        {
+          "width": 1800,
+          "height": 1013,
+          "hashFunction": "keccak256(bytes)",
+          "hash": "0x98fe032f81c43426fbcfb21c780c879667a08e2a65e8ae38027d4d61cdfe6f55",
+          "url": "ifps://QmPJESHbVkPtSaHntNVY5F6JDLW8v69M2d6khXEYGUMn7N"
+        },
+        {
+          "width": 1024,
+          "height": 576,
+          "hashFunction": "keccak256(bytes)",
+          "hash": "0xfce1c7436a77a009a97e48e4e10c92e89fd95fe1556fc5c62ecef57cea51aa37",
+          "url": "ifps://QmZc9uMJxyUeUpuowJ7AD6MKoNTaWdVNcBj72iisRyM9Su"
+        }
+      ]
+    }
+  }
+

pages/_app.tsx

@@ -0,0 +1,9 @@
+import '../styles/globals.css'
+
+import { AppProps } from 'next/app';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps}/>
+}
+
+export default MyApp

pages/api/twitter-banner.ts

@@ -0,0 +1,23 @@
+import Client from "twitter-api-sdk";
+import {
+  createTwitterOAuthUser,
+  getTwitterAuthURL,
+} from "../../services/twitter";
+
+export default async (req: any, res: any) => {
+  const authClient = createTwitterOAuthUser();
+  getTwitterAuthURL(authClient);
+
+  const token = await authClient.requestAccessToken(req.body.authCode);
+
+    // TODO: check that we have received a token
+    const twitterApi = new Client(authClient);
+
+    const result = await twitterApi.users.
+
+  try {
+  } catch (error) {
+    console.error(error);
+    res.status(500).json("error occurred when fetching twitter banner image");
+  }
+};

pages/api/twitter-user.ts

@@ -0,0 +1,78 @@
+import Client from "twitter-api-sdk";
+import {
+  createTwitterOAuthUser,
+  getTwitterAuthURL,
+} from "../../services/twitter";
+
+export default async (req: any, res: any) => {
+  const authClient = createTwitterOAuthUser();
+  getTwitterAuthURL(authClient);
+
+  if (!req.body) {
+    res.status(400).json({ message: "invalid request body" });
+  }
+
+  // 5. use the `code` to get the access token
+  try {
+    const token = await authClient.requestAccessToken(req.body.authCode);
+
+    // TODO: check that we have received a token
+    const twitterApi = new Client(authClient);
+
+    const userInfos = await twitterApi.users.findMyUser({
+      // A comma separated list of User fields to display
+      "user.fields": [
+        "created_at",
+        "description",
+        "entities",
+        "id",
+        "location",
+        "name",
+        "pinned_tweet_id",
+        "profile_image_url",
+        "protected",
+        "public_metrics",
+        "url",
+        "username",
+        "verified",
+        "withheld",
+      ],
+
+      // A comma separated list of Tweet fields to display.
+      "tweet.fields": [
+        "attachments",
+        "author_id",
+        "context_annotations",
+        "conversation_id",
+        "created_at",
+        "edit_controls",
+        "entities",
+        "geo",
+        "id",
+        "in_reply_to_user_id",
+        "lang",
+        "non_public_metrics",
+        "public_metrics",
+        "organic_metrics",
+        "promoted_metrics",
+        "possibly_sensitive",
+        "referenced_tweets",
+        "reply_settings",
+        "source",
+        "text",
+        "withheld",
+      ],
+
+      // A comma separated list of fields to expand
+      expansions: ["pinned_tweet_id"],
+    });
+
+    console.log(userInfos);
+    console.log(userInfos.data?.entities?.url?.urls);
+    console.log(userInfos.data?.entities?.description);
+    res.status(200).json(userInfos);
+  } catch (error) {
+    console.error(error);
+    res.status(500).json("error occurred when fetching twitter user data");
+  }
+};

pages/index.tsx

@@ -0,0 +1,86 @@
+import Head from 'next/head'
+
+export default function Home() {
+  return (
+    <div className="mt-4 max-w-xs p-4 md:max-w-md lg:max-w-2xl xl:max-w-4xl mx-auto">
+      <Head>
+        <title>Import your Twitter Profile on your UP</title>
+        <meta name="description" content="Next Twitter Starter" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className="mt-10">
+        <h1 className="text-3xl font-bold">
+          Import your Twitter Profile on your UP.
+        </h1>
+
+        <a href="/twitter" className="flex items-center p-8 mt-8 border rounded-md space-x-4 hover:bg-gray-100">
+          <p className="font-semibold text-lg">Let's get Started &rarr;</p>
+        </a>
+{/* 
+        <div className="p-8 mt-8 border rounded-md space-y-4">
+        <div>
+            <p className="font-semibold text-lg">LSP3 Profile Metadata</p>
+            <p>
+              This is what the JSON under your 
+              <code className="">LSP3Profile</code> 
+              metadata looks like now
+            </p>
+          </div>
+          <pre>
+            "some text"
+          </pre>
+        </div> */}
+
+        {/* <div className="p-8 mt-8 border rounded-md space-y-4">
+          <div>
+            <p className="font-semibold text-lg">Pages</p>
+            <p>
+              Get started by editing{' '}
+              <code className="">pages/index.js</code>
+            </p>
+          </div>
+          <div>
+            <p className="font-semibold text-lg">API</p>
+            <p>
+              Get started with Twitter API by looking at{' '}
+              <code className="">pages/api/twitter-user.js</code>
+            </p>
+          </div>
+        </div> */}
+
+        {/* <div className="flex mt-8 flex-wrap gap-4">
+          <a href="https://nextjs.org/docs" className="flex-auto border rounded-md px-4 py-6 hover:bg-gray-100">
+            <h2 className="font-semibold text-lg">Next.js Documentation &rarr;</h2>
+            <p>Find in-depth information about Next.js features and API.</p>
+          </a>
+
+          <a href="https://github.com/draftbit/twitter-lite" className="flex-auto border rounded-md px-4 py-6 hover:bg-gray-100">
+            <h2 className="font-semibold text-lg">Twitter-lite Documentation &rarr;</h2>
+            <p>Find Twitter-lite documentation.</p>
+          </a>
+
+          <a href="https://tailwindcss.com/docs" className="flex-auto border rounded-md px-4 py-6 hover:bg-gray-100">
+            <h2 className="font-semibold text-lg">Tailwindcss Documentation &rarr;</h2>
+            <p>Find in-depth information about Tailwindcss features.</p>
+          </a>
+
+          <a href="https://developer.twitter.com/en/docs/twitter-api/v1" className="flex-auto border rounded-md px-4 py-6 hover:bg-gray-100">
+            <h2 className="font-semibold text-lg">Twitter API Documentation &rarr;</h2>
+            <p>Checkout Twitter API documentation.</p>
+          </a>
+
+          <a
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className="flex-auto border rounded-md px-4 py-6 hover:bg-gray-100"
+          >
+            <h2 className="font-semibold text-lg">Deploy &rarr;</h2>
+            <p>
+              Instantly deploy your Next.js site to a public URL with Vercel.
+            </p>
+          </a>
+        </div> */}
+      </main>
+    </div>
+  )
+}