diff --git a/packages/website/components/BlogSection.tsx b/packages/website/components/BlogSection.tsx index e7d4e92af59..1f2bce4d975 100644 --- a/packages/website/components/BlogSection.tsx +++ b/packages/website/components/BlogSection.tsx @@ -1,56 +1,161 @@ -const posts = [ - { - title: "Taiko Ambassador Program", - href: "https://mirror.xyz/labs.taiko.eth/BvcEyYeVIiHnjc-i5qf3zR4s67Jc6nz_R6OSGj5rzOE", - description: - "Ethereum has come a long way in its seven-year life — changing the world, in our opinion — but it is only just getting started.", - date: "Jan 04, 2023", - datetime: "2023-01-04", - imageUrl: - "https://mirror-media.imgix.net/publication-images/5Ed-TXJIB3LTC2HJdPuEN.png?height=512&width=1024&h=512&w=1024&auto=compress", - readingTime: "2 min", - author: { - name: "finestone", - imageUrl: "https://avatars.githubusercontent.com/u/36642873?v=4", - }, - }, - { - title: "Taiko Alpha-1 Testnet is Live", - href: "https://mirror.xyz/labs.taiko.eth/-lahy4KbGkeAcqhs0ETG3Up3oTVzZ0wLoE1eK_ao5h4", - description: - "Today, the Taiko Alpha-1 testnet (a1) is live - our first public testnet! We’ve codenamed this testnet, Snæfellsjökull.", - date: "Dec 27, 2022", - datetime: "2022-12-27", - imageUrl: - "https://mirror-media.imgix.net/publication-images/4qVW-dWhNmMQr61g91hGt.png?height=512&width=1024&h=512&w=1024&auto=compress", - readingTime: "4 min", - author: { - name: "finestone", - imageUrl: "https://avatars.githubusercontent.com/u/36642873?v=4", - }, - }, - { - title: "Rollup Decentralization", - href: "https://mirror.xyz/labs.taiko.eth/sxR3iKyD-GvTuyI9moCg4_ggDI4E4CqnvhdwRq5yL0A", - description: - "This post explores definitions and high-level ideas of rollup decentralization. It does not cover deep technical detail about decentralizing rollup implementations.", - date: "Dec 20, 2022", - datetime: "2022-12-20", - imageUrl: - "https://mirror-media.imgix.net/publication-images/NTeYUqYqHo4NqrRGJHvfO.png?height=512&width=1024&h=512&w=1024&auto=compress", - readingTime: "9 min", - author: { - name: "finestone", - imageUrl: "https://avatars.githubusercontent.com/u/36642873?v=4", - }, - }, -]; +import React, { useEffect, useState } from "react"; +import { getPosts } from "./getPosts"; + +interface Content { + body: string; + timestamp: number; + title: string; +} + +interface Authorship { + contributor: string; + signingKey: { + crv: string; + ext: boolean; + key_ops: string[]; + kty: string; + x: string; + y: string; + }; + signature: string; + signingKeySignature: string; + signingKeyMessage: string; + algorithm: { + name: string; + hash: string; + }; +} + +interface Wnft { + chainId: number; + description: string; + fee: number; + fundingRecipient: string; + imageURI: string; + mediaAssetId: number; + name: string; + nonce: number; + owner: string; + price: number; + proxyAddress: string; + renderer: string; + supply: number; + symbol: string; +} + +interface Post { + OriginalDigest: string; + content: Content; + authorship: Authorship; + digest: string; + version: string; + wnft: Wnft; +} + +function getReadingTime(text) { + const wordsPerMinute = 200; + const wordCount = text.split(" ").length; + const readingTime = Math.round(wordCount / wordsPerMinute); + return readingTime; +} + +function getDate(timestamp: string): string { + let date = new Date(Number(timestamp) * 1000); + return date.toLocaleDateString("en-US", { + year: "numeric", + month: "short", + day: "numeric", + }); +} + +function getDateTime(timestamp: string): string { + let date = new Date(parseInt(timestamp) * 1000); + return `${date.getFullYear()}-${(date.getMonth() + 1) + .toString() + .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`; +} + +function checkIfPostAreSet(posts) { + if (posts.length > 0) { + return posts.map((post: Post) => ( +
+
+ + + +
+
+
+ +
+ {post.content.title} +
+
+ {post.wnft.description} +
+ +
+
+
+
+ + + {getReadingTime(post.content.body) + " min read"} +
+
+
+
+
+ )); + } else { + const amountOfPostsToDisplay = 3; + return [...Array(amountOfPostsToDisplay)].map((v, i) => ( +
+
+
+
+
+ )); + } +} + +export default function BlogSection(): JSX.Element { + const [posts, setPosts] = useState([]); + + useEffect(() => { + getPosts.then((result : Post[]) => { + // only use the last three + result = result.sort((a, b) => b.content.timestamp - a.content.timestamp); + result = result.slice(0, 3); + + setPosts(result); + }); + // getting the information of the post via the arweave GraphQL and SDK + }); -export default function BlogSection() { return ( -
+
-
+
@@ -64,55 +169,9 @@ export default function BlogSection() {
+
- {posts.map((post) => ( -
-
- - - -
-
- -
-
- {post.author.name} - -
-
-
- {post.author.name} -
-
- - - {post.readingTime} read -
-
-
-
-
- ))} + {checkIfPostAreSet(posts)}
diff --git a/packages/website/components/getPosts.ts b/packages/website/components/getPosts.ts new file mode 100644 index 00000000000..2ad504671da --- /dev/null +++ b/packages/website/components/getPosts.ts @@ -0,0 +1,73 @@ +import Arweave from "arweave"; + +const arweave = Arweave.init({ + host: "arweave.net", + port: 443, + protocol: "https", +}); + +export const getPosts = new Promise>((resolve, reject) => { + async function getTransanctionIds() { + await fetch('https://arweave.net/graphql', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + query: ` + query { + transactions( + first: 100 + sort: HEIGHT_DESC + tags: [ + { + name: "Contributor" + values: ["0x5b796c4B197B6DfD413f177059C27963EB80af0F","0x2b1F13149C7F89622BBfB46Ae1e3ECc573Bb9331","0x381636D0E4eD0fa6aCF07D8fd821909Fb63c0d10"] + }, + { + name: "App-Name" + values: "MirrorXYZ" + } + ] + ) { + edges { + node { + id + tags { + name + value + } + } + + } + } + } + `}) + }).then((res) => res.json()) + .then((response) => { + getPosts(response); + }) + .catch(); + } + + async function getPosts(response) { + const posts = [] + Promise.all(response.data.transactions.edges.map((edge) => { + const transactionId = edge.node.id; + arweave.transactions + .getData(`${transactionId}`, { decode: true, string: true }).then((response: string) => JSON.parse(response)) + .then((data) => { + // Check if the posts have the required keys + if (data.hasOwnProperty('wnft')) { + + // add the original digest + data["OriginalDigest"] = edge.node.tags[4].value; + posts.push(data); + } + + }).catch(); + })) + resolve(posts); + } + getTransanctionIds(); +}) \ No newline at end of file diff --git a/packages/website/package.json b/packages/website/package.json index c08cbc3604b..eabfbba2def 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -8,6 +8,7 @@ "start": "pnpm next start" }, "dependencies": { + "arweave": "^1.12.6", "next": "^13.1.6", "next-themes": "^0.2.1", "nextra": "^2.2.14", diff --git a/packages/website/pnpm-lock.yaml b/packages/website/pnpm-lock.yaml index 25239d09b03..e1674a592a5 100644 --- a/packages/website/pnpm-lock.yaml +++ b/packages/website/pnpm-lock.yaml @@ -60,7 +60,7 @@ packages: unist-util-position-from-estree: 1.1.1 unist-util-stringify-position: 3.0.2 unist-util-visit: 4.1.1 - vfile: 5.3.6 + vfile: 5.3.7 transitivePeerDependencies: - supports-color dev: false diff --git a/packages/website/styles.css b/packages/website/styles.css index b5c61c95671..bd6213e1dfe 100644 --- a/packages/website/styles.css +++ b/packages/website/styles.css @@ -1,3 +1,3 @@ @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 44eb98b05ee..34fbfa74517 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -330,6 +330,7 @@ importers: '@next/font': ^13.1.6 '@types/node': ^18.13.0 '@types/react': ^18.0.27 + arweave: ^1.12.6 autoprefixer: ^10.4.13 next: ^13.1.6 next-themes: ^0.2.1 @@ -342,6 +343,7 @@ importers: tailwindcss: ^3.2.6 typescript: ^4.9.5 dependencies: + arweave: 1.12.6 next: 13.1.6_biqbaboplfbrettd7655fr4n2y next-themes: 0.2.1_3vryta7zmbcsw4rrqf4axjqggm nextra: 2.2.14_3vryta7zmbcsw4rrqf4axjqggm @@ -4970,6 +4972,12 @@ packages: resolution: {integrity: sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==} dev: false + /arconnect/0.4.2: + resolution: {integrity: sha512-Jkpd4QL3TVqnd3U683gzXmZUVqBUy17DdJDuL/3D9rkysLgX6ymJ2e+sR+xyZF5Rh42CBqDXWNMmCjBXeP7Gbw==} + dependencies: + arweave: 1.12.6 + dev: false + /are-we-there-yet/2.0.0: resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==} engines: {node: '>=10'} @@ -5097,6 +5105,16 @@ packages: engines: {node: '>=0.10.0'} dev: true + /arweave/1.12.6: + resolution: {integrity: sha512-OglStwi/79e69XO42DbaqoOBNC9CZS+EupusYawRLMj0V2/zRlhrJi0WDuy4IaqY9LQYv8dHD9iyThvRUl9mqw==} + engines: {node: '>=16.15.0'} + dependencies: + arconnect: 0.4.2 + asn1.js: 5.4.1 + base64-js: 1.5.1 + bignumber.js: 9.1.0 + dev: false + /asap/2.0.6: resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==} dev: true @@ -20265,4 +20283,4 @@ packages: version: 0.6.8 dependencies: bn.js: 4.12.0 - ethereumjs-util: 6.2.1 + ethereumjs-util: 6.2.1 \ No newline at end of file