분산형 소셜 네트워크, 하위 그래프, IPFS - 다각형 4주차

Polygon Fellowship 2022의 일부입니다.

GM

미친 한 주였습니다. 사실 지난 주에 비해 가장 미쳤습니다. 이번 주에는 IPFS, Alchemy, Pinata, TheGraph Protocol 등을 사용하여 web3 인프라 및 스토리지를 탐색하는 것이 전부였습니다.

소셜 미디어 Dapp

헤비 타자부터 시작합시다.
이번 주 가장 큰 과제는 우리만의 독창성을 가지고 풀스택 분산형 소셜 미디어 앱을 구축하는 것이었습니다.

Polygon Academy에 대한 과제는 다음과 같습니다. https://academy.polygon.technology/module-8-wizard-challenge/final-asssignment

성명서는 다음과 같이 말합니다.

Submit a full stack social media dapp as your final assignment.
The dapp lets a user post and receive images to an anonymous network of contributors. There will be a feed of all images.
No need to add extra functionality like likes and comments, just basic push-pull data submission. Use ethereum to point to images and store them on IPFS. Use polygon as an L2 for this. Submit your assignment below.

일반적인 접근 방식은 다음과 같습니다.

이미지, 제목, 설명 등을 수락하고 이 메타데이터를 IPFS에 저장합니다

.

게시물의 IPFS URL을 사용자별 스마트 계약에 저장하거나 배열로 저장할 수 있습니다

.

이 URL 배열을 쿼리하여 사용자의 게시물을 가져옵니다

.

(선택 사항) Subgraphs 또는 Moralis를 사용하여 이러한 게시물의 색인을 생성합니다

.

작동합니다. 그러나 나는 Lens Protocol에 대한 글을 읽고 영감을 얻어 어떤 식으로든 게시물을 NFT로 만드는 것에 대해 생각하고 있었습니다.

그래서 여기 제 기발한 접근법이 있습니다!

ERC1155 ProfileHub는 사용자를 위한 ProfileNFT를 생성합니다(토큰 + 다른 ERC1155 계약)

사용자의 게시물 이미지를 IPFS에 저장

이전 단계의 이미지 URL을 사용하여 사용자의 게시물 메타데이터를 IPFS에 저장합니다. 메타데이터는 OpenSea 표준을 따릅니다.

ERC1155 ProfileNFT의 Mint 기능은 NFT의 IPFS URL을 인수로 사용자가 호출할 수 있습니다.

많은 서비스가 이미 OpenSea에서 NFT를 인덱싱하므로 인덱싱이 직접적으로 필요하지 않습니다! 🌊

따라서 이 접근 방식에는 프로필 토큰을 생성하고 각 사용자에 대해 ProfileNFT라는 또 다른 컬렉션을 생성하는 중앙 ProfileHub 컬렉션이 있습니다.

흐름:
ProfileHub 수집 => ProfileNFT 토큰 + ProfileNFT 계약
ProfileNFT 계약 = 특성이 있는 토큰으로 사용자의 게시물

이 접근 방식의 이점은 OpenSea에서도 게시물을 볼 수 있다는 것입니다! 일반 NFT의 모든 장점이 있습니다.

IPFS

IPFS에 이미지를 업로드하는 방법에는 여러 가지가 있습니다. 수동으로 또는 프로그래밍 방식으로 수행할 수 있습니다.
Pinata의 Node SDK를 사용하여 사용자의 이미지를 받아 IPFS에 업로드하는 API를 NodeJS와 Fastify를 사용하여 만들기로 했습니다.
약간 과한 것 같지만 어쨌든 지금 재사용할 수 있도록 내 소셜 미디어 Dapp용으로 만들어야 했습니다.

내가 가진 주요 문제는 사용자의 이미지를 가져오는 것이었습니다. 일반적으로 멀티파트 이미지는 Express 및 Fastify와 같은 프레임워크에서 작동하지만 여기서 문제는 이미지를 가져온 후에도 Pinata의 SDK가 파일 버퍼를 허용하지 않는다는 것입니다 😵‍💫
온/오프 디버깅에 많은 시간을 보낸 후 파일의 스트림Readable에 Pinata와 함께 작동하도록 하기 위해 필요한 작은 해킹이 있음을 알게 되었습니다.
왜 아무도 이것을 전혀 다루지 않았는지 궁금합니다. 나는 내 문제와 그다지 관련이없는 stackoverflow 질문에서만 이것을 발견했습니다.

전체 코드(나중에 내 소셜 dapp용 NFT 생성 도구로 전환됨)는 이미지를 IPFS에 업로드한 다음 이미지 URL이 포함된 메타데이터를 IPFS에 업로드하여 NFT 역할을 합니다.

    const image = await (req.body as any).image
    if (!image) reply.send({ error: "No image file" })
    if (!(req.body as any).name.value || !(req.body as any).description.value) reply.send({ error: "Missing name or description fields" })

    const readableStream = Readable.from(await image.toBuffer())

    // IMPORTANT: This is the only fix for Pinata to work. It needs a 'path' property in the Readable Stream
    // @ts-ignore
    readableStream.path = image.filename

    try {
        const imageResult = await pinata.pinFileToIPFS(readableStream)
        const imageURL = BASE_GATEWAY + imageResult.IpfsHash
        const data = {
            name: (req.body as any).name.value,
            description: (req.body as any).description.value,
            image: imageURL,
            external_url: "https://github.com/neelansh15",
            attributes: [
                {
                    trait_type: "Likes",
                    value: 0
                },
                {
                    display_type: "date",
                    trait_type: "Posted on",
                    value: +new Date / 1000
                }
            ]
        }
        const result = await pinata.pinJSONToIPFS(data)
        const nftURL = BASE_GATEWAY + result.IpfsHash

        reply.send({ ...result, url: nftURL })
    }
    catch (e) {
        console.error(e)
        reply.send({
            error: e
        })
    }

여기서 BASE_GATEWAY는 https://gateway.pinata.cloud/ipfs/입니다.

Welp, 더 많은 것들이 올 것입니다. 특히 소셜 미디어 Dapp, 앞으로 확장할 아이디어입니다.

gn