From a72ecb6f8ac295b9a898a4994610756e1e892a07 Mon Sep 17 00:00:00 2001 From: 3scava1i3r Date: Fri, 1 Sep 2023 15:14:51 +0530 Subject: [PATCH 01/11] feat(core): add new Helia integrations --- app/(general)/integration/ipfs/layout.tsx | 65 + app/(general)/integration/ipfs/node/page.tsx | 7 + .../integration/ipfs/opengraph-image.tsx | 9 + app/(general)/integration/ipfs/page.tsx | 11 + app/(general)/integration/ipfs/sidebar.tsx | 67 + .../integration/ipfs/twitter-image.tsx | 9 + .../integration/ipfs/upload/page.tsx | 6 + app/(general)/page.tsx | 15 + data/turbo-integrations.ts | 9 + integrations/ipfs/README.md | 4 + integrations/ipfs/components/node.tsx | 19 + integrations/ipfs/components/upload.tsx | 104 + integrations/ipfs/hooks/use-ipfs-node.ts | 34 + integrations/ipfs/hooks/use-upload-ipfs.ts | 104 + integrations/ipfs/index.tsx | 5 + lib/generated/blockchain.ts | 2 +- package.json | 2 + pnpm-lock.yaml | 2187 +++++++++++++++-- public/integrations/ipfs-logo.svg | 1 + 19 files changed, 2473 insertions(+), 187 deletions(-) create mode 100644 app/(general)/integration/ipfs/layout.tsx create mode 100644 app/(general)/integration/ipfs/node/page.tsx create mode 100644 app/(general)/integration/ipfs/opengraph-image.tsx create mode 100644 app/(general)/integration/ipfs/page.tsx create mode 100644 app/(general)/integration/ipfs/sidebar.tsx create mode 100644 app/(general)/integration/ipfs/twitter-image.tsx create mode 100644 app/(general)/integration/ipfs/upload/page.tsx create mode 100644 integrations/ipfs/README.md create mode 100644 integrations/ipfs/components/node.tsx create mode 100644 integrations/ipfs/components/upload.tsx create mode 100644 integrations/ipfs/hooks/use-ipfs-node.ts create mode 100644 integrations/ipfs/hooks/use-upload-ipfs.ts create mode 100644 integrations/ipfs/index.tsx create mode 100644 public/integrations/ipfs-logo.svg diff --git a/app/(general)/integration/ipfs/layout.tsx b/app/(general)/integration/ipfs/layout.tsx new file mode 100644 index 00000000..121b6654 --- /dev/null +++ b/app/(general)/integration/ipfs/layout.tsx @@ -0,0 +1,65 @@ +'use client' +import { ReactNode } from 'react' + +import { motion } from 'framer-motion' +import Image from 'next/image' +import Balancer from 'react-wrap-balancer' + +import { IsDarkTheme } from '@/components/shared/is-dark-theme' +import { IsLightTheme } from '@/components/shared/is-light-theme' +import { LinkComponent } from '@/components/shared/link-component' +import { FADE_DOWN_ANIMATION_VARIANTS } from '@/config/design' +import { turboIntegrations } from '@/data/turbo-integrations' + +import { SideBar } from './sidebar' + +const integrationData = turboIntegrations.ipfs + +export default function LayoutIntegration({ children }: { children: ReactNode }) { + return ( + <> +
+ + + Starter logo + + + Starter logo + + + {integrationData.name} + + + {integrationData.description} + + + + Documentation + + + + +
+ +
{children}
+
+ +
+ + ) +} diff --git a/app/(general)/integration/ipfs/node/page.tsx b/app/(general)/integration/ipfs/node/page.tsx new file mode 100644 index 00000000..348a629a --- /dev/null +++ b/app/(general)/integration/ipfs/node/page.tsx @@ -0,0 +1,7 @@ +'use client' + +import IpfsNode from '@/integrations/ipfs/components/node' + +export default function IpfsNodePage() { + return +} diff --git a/app/(general)/integration/ipfs/opengraph-image.tsx b/app/(general)/integration/ipfs/opengraph-image.tsx new file mode 100644 index 00000000..f9433812 --- /dev/null +++ b/app/(general)/integration/ipfs/opengraph-image.tsx @@ -0,0 +1,9 @@ +import { IntegrationOgImage } from '@/components/ui/social/og-image-integrations' + +export const runtime = 'edge' +export const size = { + width: 1200, + height: 630, +} + +export default IntegrationOgImage('starter') diff --git a/app/(general)/integration/ipfs/page.tsx b/app/(general)/integration/ipfs/page.tsx new file mode 100644 index 00000000..1a64983b --- /dev/null +++ b/app/(general)/integration/ipfs/page.tsx @@ -0,0 +1,11 @@ +import { Ipfs } from '@/integrations/ipfs' + +export default function PageIntegration() { + return ( +
+
+ +
+
+ ) +} diff --git a/app/(general)/integration/ipfs/sidebar.tsx b/app/(general)/integration/ipfs/sidebar.tsx new file mode 100644 index 00000000..4beeb14d --- /dev/null +++ b/app/(general)/integration/ipfs/sidebar.tsx @@ -0,0 +1,67 @@ +import { LinkComponent } from '@/components/shared/link-component' +import { turboIntegrations } from '@/data/turbo-integrations' +import { ArweaveAccountPreview } from '@/integrations/arweave/components/arweave-account/sidebar-preview' + +export const SideBar = () => { + const ipfsBaseUrl = turboIntegrations.ipfs.href + return ( + + ) +} diff --git a/app/(general)/integration/ipfs/twitter-image.tsx b/app/(general)/integration/ipfs/twitter-image.tsx new file mode 100644 index 00000000..dbca541e --- /dev/null +++ b/app/(general)/integration/ipfs/twitter-image.tsx @@ -0,0 +1,9 @@ +import Image from './opengraph-image' + +export const runtime = 'edge' +export const size = { + width: 1200, + height: 630, +} + +export default Image diff --git a/app/(general)/integration/ipfs/upload/page.tsx b/app/(general)/integration/ipfs/upload/page.tsx new file mode 100644 index 00000000..27f52c49 --- /dev/null +++ b/app/(general)/integration/ipfs/upload/page.tsx @@ -0,0 +1,6 @@ +'use client' + +import Upload from '@/integrations/ipfs/components/upload' +export default function IpfsUpload() { + return +} diff --git a/app/(general)/page.tsx b/app/(general)/page.tsx index d60128b7..4faa03d0 100644 --- a/app/(general)/page.tsx +++ b/app/(general)/page.tsx @@ -409,6 +409,21 @@ const features = [ ), }, + { + title: turboIntegrations.ipfs.name, + description: turboIntegrations.ipfs.description, + href: turboIntegrations.ipfs.href, + demo: ( +
+ + Starter logo + + + Starter logo + +
+ ), + }, { title: turboIntegrations.starter.name, description: turboIntegrations.starter.description, diff --git a/data/turbo-integrations.ts b/data/turbo-integrations.ts index 05734496..a0aba3bc 100644 --- a/data/turbo-integrations.ts +++ b/data/turbo-integrations.ts @@ -137,4 +137,13 @@ export const turboIntegrations = { imgLight: '/logo-gradient.png', imgDark: '/logo-dark.png', }, + ipfs: { + name: 'IPFS', + href: '/integration/ipfs', + url: 'https://ipfs.io', + description: + 'IPFS (InterPlanetary File System) is a peer-to-peer hypermedia protocol designed to make the web faster, safer, and more open. It enables the creation of distributed applications and the permanent, decentralized storage and sharing of data.', + imgLight: '/integrations/ipfs-logo.svg', + imgDark: '/integrations/ipfs-logo.svg', + }, } diff --git a/integrations/ipfs/README.md b/integrations/ipfs/README.md new file mode 100644 index 00000000..27ae066b --- /dev/null +++ b/integrations/ipfs/README.md @@ -0,0 +1,4 @@ +# Ipfs Integration in TurboETH + +This document describes how to integrate Ipfs with TurboETH. + diff --git a/integrations/ipfs/components/node.tsx b/integrations/ipfs/components/node.tsx new file mode 100644 index 00000000..3332fefc --- /dev/null +++ b/integrations/ipfs/components/node.tsx @@ -0,0 +1,19 @@ +'use client' + +import { useIpfsNode } from '../hooks/use-ipfs-node' + +const IpfsNode: React.FC = () => { + const { helia, isOnline, id } = useIpfsNode() + if (!helia || !id) { + return

Connecting to IPFS...

+ } + + return ( +
+

ID: {id.toString()}

+

Status: {isOnline ? 'Online' : 'Offline'}

+
+ ) +} + +export default IpfsNode diff --git a/integrations/ipfs/components/upload.tsx b/integrations/ipfs/components/upload.tsx new file mode 100644 index 00000000..412b80de --- /dev/null +++ b/integrations/ipfs/components/upload.tsx @@ -0,0 +1,104 @@ +import { useRef } from 'react' + +import { Form, FormControl, FormField, FormLabel, FormMessage } from '@/components/ui/form' +import { FormItem } from '@/components/ui/form' +import { Input } from '@/components/ui/input' +import { Textarea } from '@/components/ui/textarea' +import { truncateString } from '@/integrations/arweave/utils' + +import { useUploadIpfs } from '../hooks/use-upload-ipfs' + +export default function Upload() { + const fileInputRef = useRef(null) + + const { form, onSubmit, isLoading, isError, data } = useUploadIpfs() + + const { control, handleSubmit, register, getValues, setValue } = form + + const values = getValues() + + return ( + <> +
+

Upload New File

+
+ + {!values.file && ( + ( + + Data to be stored + +