LFG

Irys-xyz · May 23, 2024 · aafd1ae · aafd1ae
commit aafd1ae
Show file tree

Hide file tree

Showing 178 changed files with 17,381 additions and 0 deletions.
diff --git a/, b/,
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/README.md b/README.md
@@ -0,0 +1,11 @@
+## Getting Started
+
+```console
+npm install
+```
+
+## Running
+
+```console
+npm run dev
+```
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+	title: "Irys Docs",
+	description: "Build the Dataverse",
+};
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return (
+		<html lang="en">
+			<body className={inter.className}>{children}</body>
+		</html>
+	);
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,21 @@
+import Image from "next/image";
+import Hero from "@/components/Hero";
+import Footer from "@/components/Footer";
+import Info from "@/components/Info";
+import "./style.css";
+
+export default function Home() {
+	return (
+		<div className="flex flex-col min-h-screen">
+			<div className="main"></div>
+
+			<main className="flex flex-1 flex-col items-center justify-center p-24">
+				<div className="flex flex-col w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
+					<Hero />
+					<Info />
+				</div>
+			</main>
+			<Footer />
+		</div>
+	);
+}
diff --git a/app/style.css b/app/style.css
@@ -0,0 +1,44 @@
+body {
+	background-color: #000;
+}
+
+.main {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	height: 1px;
+	width: 1px;
+	background-color: #fff;
+	border-radius: 50%;
+	box-shadow: -42vw -4vh 0px 0px #fff, 25vw -41vh 0px 0px #fff, -20vw 49vh 0px 1px #fff, 5vw 40vh 1px 1px #fff,
+		29vw 19vh 1px 0px #fff, -44vw -13vh 0px 0px #fff, 46vw 41vh 0px 1px #fff, -3vw -45vh 0px 1px #fff,
+		47vw 35vh 1px 0px #fff, 12vw -8vh 1px 0px #fff, -34vw 48vh 1px 1px #fff, 32vw 26vh 1px 1px #fff,
+		32vw -41vh 1px 1px #fff, 0vw 37vh 1px 1px #fff, 34vw -26vh 1px 0px #fff, -14vw -49vh 1px 0px #fff,
+		-12vw 45vh 0px 1px #fff, -44vw -33vh 0px 1px #fff, -13vw 41vh 0px 0px #fff, -36vw -11vh 0px 1px #fff,
+		-23vw -24vh 1px 0px #fff, -38vw -27vh 0px 1px #fff, 16vw -19vh 0px 0px #fff, 28vw 33vh 1px 0px #fff,
+		-49vw -4vh 0px 0px #fff, 16vw 32vh 0px 1px #fff, 36vw -18vh 1px 0px #fff, -25vw -30vh 1px 0px #fff,
+		-23vw 24vh 0px 1px #fff, -2vw -35vh 1px 1px #fff, -25vw 9vh 0px 0px #fff, -15vw -34vh 0px 0px #fff,
+		-8vw -19vh 1px 0px #fff, -20vw -20vh 1px 1px #fff, 42vw 50vh 0px 1px #fff, -32vw 10vh 1px 0px #fff,
+		-23vw -17vh 0px 0px #fff, 44vw 15vh 1px 0px #fff, -40vw 33vh 1px 1px #fff, -43vw 8vh 0px 0px #fff,
+		-48vw -15vh 1px 1px #fff, -24vw 17vh 0px 0px #fff, -31vw 50vh 1px 0px #fff, 36vw -38vh 0px 1px #fff,
+		-7vw 48vh 0px 0px #fff, 15vw -32vh 0px 0px #fff, 29vw -41vh 0px 0px #fff, 2vw 37vh 1px 0px #fff,
+		7vw -40vh 1px 1px #fff, 15vw 18vh 0px 0px #fff, 25vw -13vh 1px 1px #fff, -46vw -12vh 1px 1px #fff,
+		-18vw 22vh 0px 0px #fff, 23vw -9vh 1px 0px #fff, 50vw 12vh 0px 1px #fff, 45vw 2vh 0px 0px #fff,
+		14vw -48vh 1px 0px #fff, 23vw 43vh 0px 1px #fff, -40vw 16vh 1px 1px #fff, 20vw -31vh 0px 1px #fff,
+		-17vw 44vh 1px 1px #fff, 18vw -45vh 0px 0px #fff, 33vw -6vh 0px 0px #fff, 0vw 7vh 0px 1px #fff,
+		-10vw -18vh 0px 1px #fff, -19vw 5vh 1px 0px #fff, 1vw 42vh 0px 0px #fff, 22vw 48vh 0px 1px #fff,
+		39vw -8vh 1px 1px #fff, -6vw -42vh 1px 0px #fff, -47vw 34vh 0px 0px #fff, -46vw 19vh 0px 1px #fff,
+		-12vw -32vh 0px 0px #fff, -45vw -38vh 0px 1px #fff, -28vw 18vh 1px 0px #fff, -38vw -46vh 1px 1px #fff,
+		49vw -6vh 1px 1px #fff, -28vw 18vh 1px 1px #fff, 10vw -24vh 0px 1px #fff, -5vw -11vh 1px 1px #fff,
+		33vw -8vh 1px 0px #fff, -16vw 17vh 0px 0px #fff, 18vw 27vh 0px 1px #fff, -8vw -10vh 1px 1px #fff;
+	animation: zoom 16s alternate infinite;
+}
+
+@keyframes zoom {
+	0% {
+		transform: scale(1);
+	}
+	100% {
+		transform: scale(1.5);
+	}
+}
diff --git a/components/Analytics/Analytics.tsx b/components/Analytics/Analytics.tsx
@@ -0,0 +1,27 @@
+import { GA_TRACKING_ID } from '../../lib/gtag'
+import Script from 'next/script'
+
+const Analytics = () => (
+  <>
+    <Script
+      strategy="afterInteractive"
+      src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+    />
+    <Script
+      strategy="afterInteractive"
+      id="analytics-page-identifier"
+      dangerouslySetInnerHTML={{
+        __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${GA_TRACKING_ID}', {
+              page_path: window.location.pathname,
+            });
+          `
+      }}
+    />
+  </>
+)
+
+export default Analytics
diff --git a/components/Analytics/index.ts b/components/Analytics/index.ts
@@ -0,0 +1 @@
+export { default } from './Analytics'
diff --git a/components/BannerContainer/BannerContainer.tsx b/components/BannerContainer/BannerContainer.tsx
@@ -0,0 +1,79 @@
+import Link from "next/link";
+
+interface BannerProps {
+	href: string;
+	backgroundImage: string;
+	title: string;
+	sub: string;
+	backgroundPosition: string;
+}
+
+const Banner: React.FC<BannerProps> = ({ href, backgroundImage, title, sub, backgroundPosition }) => {
+	return (
+		<Link href={href}>
+			<div
+				className="bg-black h-[244px] rounded-2xl overflow-hidden bannerHover pt-10 pl-10 text-2xl hover:scale-[99%] cursor-pointer transition-all font-semibold"
+				style={{
+					backgroundImage: `linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%), url('${backgroundImage}')`,
+					backgroundSize: "140%",
+					backgroundRepeat: "no-repeat",
+					backgroundPosition,
+					backdropFilter: "blur(10px)",
+				}}
+			>
+				{title}
+				<p className="text-base font-light pt-4">{sub}</p>
+			</div>
+		</Link>
+	);
+};
+
+const banners = [
+	{
+		href: "/overview/about",
+		backgroundImage: "./img/data-donuts.webp",
+		title: "About Irys",
+		sub: "Dive in and learn about Irys",
+		backgroundPosition: "-40% -10%",
+	},
+	{
+		href: "/developer-docs/querying/query-package",
+		backgroundImage: "./img/dots-cloud.png",
+		title: "Query package",
+		sub: "Easily search Irys & Arweave",
+		backgroundPosition: "40% -20%",
+	},
+	{
+		href: "/developer-docs/irys-sdk",
+		backgroundImage: "./img/data-exponential.webp",
+		title: "Irys SDK",
+		sub: "Frictionless integration with 3 lines of code",
+		backgroundPosition: "-80% 100%",
+	},
+	{
+		href: "/developer-docs/provenance-toolkit",
+		backgroundImage: "./img/data-spiral.webp",
+		title: "Provenance Toolkit",
+		sub: "UI components to kickstart your project",
+		backgroundPosition: "40% -10%",
+	},
+];
+
+const BannerContainer: React.FC = () => {
+	return (
+		<div className="flex flex-col md:flex-row w-full gap-4 items-stretch px-4 lg:px-[79px]">
+			<div className="flex flex-col w-full md:w-1/2 gap-4">
+				{banners.slice(0, 2).map((banner, index) => (
+					<Banner key={index} {...banner} />
+				))}
+			</div>
+			<div className="flex flex-col w-full md:w-1/2 gap-4">
+				{banners.slice(2).map((banner, index) => (
+					<Banner key={index} {...banner} />
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default BannerContainer;
diff --git a/components/BannerContainer/index.ts b/components/BannerContainer/index.ts
@@ -0,0 +1 @@
+export { default } from './BannerContainer'
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
@@ -0,0 +1,41 @@
+import { ReactNode, useEffect, useState } from 'react'
+
+const useButton = () => {
+	return {}
+}
+
+export enum ButtonScheme {
+	black = 'black',
+	white = 'white'
+}
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	scheme?: ButtonScheme
+	children: ReactNode
+}
+
+const Button = ({
+	scheme = ButtonScheme.black,
+	children,
+	className,
+	...props
+}: ButtonProps) => {
+	const { } = useButton()
+
+	return (
+		<>
+			<button
+				className={`text-md z-50 flex items-center gap-2 rounded-full px-4 py-3 font-backup font-satoshi uppercase font-semibold hover:scale-[98%] active:scale-95 transition-all lg:px-6 lg:py-5 ${{
+					[ButtonScheme.black]: 'bg-black text-white',
+					[ButtonScheme.white]: 'bg-white text-black'
+				}[scheme]
+					} ${className}}`}
+				{...props}
+			>
+				{children}
+			</button>
+		</>
+	)
+}
+
+export default Button
diff --git a/components/Button/index.ts b/components/Button/index.ts
@@ -0,0 +1 @@
+export { default } from './Button'
diff --git a/components/ButtonBar/ButtonBar.tsx b/components/ButtonBar/ButtonBar.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+
+import Button from "../Button";
+import ConfettiExplosion from "react-confetti-explosion";
+// import { Web3Button } from "@thirdweb-dev/react";
+
+interface ButtonBarProps {
+	submitUrl: string;
+	contractAddress: string;
+	tokenId: number;
+}
+
+const ButtonBar: React.FC<ButtonBarProps> = ({ submitUrl, contractAddress, tokenId }) => {
+	const successMessage = `Congratulations on finishing the quest! Your NFT has been claimed, you can view it on <a class="underline decoration-white" href="https://opensea.io/assets/matic/0x1c8f5f29d1498474844d6a5160b640c674276dba/1" target="_blank">Opensea</a>`;
+	const errorMessage = `Your address is not currently whitelisted, if you believe this is an error, please reach out to us on <a class="underline decoration-white" href="https://discord.irys.xyz" target="_blank">Discord.</a>`;
+
+	const [message, setMessage] = useState<string>("");
+	const [claimButtonText, setClaimButtonText] = useState<string>("Claim NFT!");
+	const [isExploding, setIsExploding] = React.useState(false);
+
+	return (
+		<div className="flex flex-col">
+			{isExploding && <ConfettiExplosion />}
+			<div className="flex flex-row gap-4 mt-2">
+				{submitUrl && <Button onClick={() => window.open(submitUrl)}>Submit Quest</Button>}
+				{/* <Web3Button
+					theme="dark"
+					contractAddress={contractAddress}
+					action={(contract) => contract.erc1155.claim(tokenId, 1)}
+					className="bundlr-web3-button"
+					onSuccess={() => {
+						setMessage(successMessage);
+						setIsExploding(true);
+					}}
+					onError={(error) => {
+						setMessage(errorMessage);
+					}}
+				>
+					{claimButtonText}
+				</Web3Button> */}
+			</div>
+			<div className="mt-5 text-left" dangerouslySetInnerHTML={{ __html: message }} />
+		</div>
+	);
+};
+
+export default ButtonBar;
diff --git a/components/ButtonBar/index.ts b/components/ButtonBar/index.ts
@@ -0,0 +1 @@
+export { default } from "./ButtonBar";