From 068cbe6a8b241116a17d43424bb33dbf142a0ad7 Mon Sep 17 00:00:00 2001 From: ankushKun Date: Thu, 22 Aug 2024 02:37:18 +0530 Subject: [PATCH] dynamic asset data --- .../views/components/marketplace.tsx | 131 ++++++++++++++++-- next_app/src/lib/bazar.ts | 38 ++++- next_app/src/pages/renderer.tsx | 2 +- 3 files changed, 159 insertions(+), 12 deletions(-) diff --git a/next_app/src/components/views/components/marketplace.tsx b/next_app/src/components/views/components/marketplace.tsx index 20488df..2cecf82 100644 --- a/next_app/src/components/views/components/marketplace.tsx +++ b/next_app/src/components/views/components/marketplace.tsx @@ -6,7 +6,7 @@ import { useGlobalState } from "@/hooks"; import WarpedAR from "@/components/ui/icons/war"; import Link from "next/link"; import BazarIcon from "@/components/ui/icons/bazar"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { Label } from "@/components/ui/label"; import { Dialog, @@ -17,9 +17,118 @@ import { DialogTitle, DialogTrigger, } from "@/components/ui/dialog" +import { gql, GraphQLClient } from "graphql-request"; +import { toast } from "sonner"; +import { TemplateAsset } from "@/components/menubar/components/publish-template"; +import { Tag } from "@/lib/ao-vars"; +import { extractHandlerNames } from "@/lib/utils"; +import { AOProfileType, getProfileById } from "@/lib/bazar"; +import Image from "next/image"; function Template({ pid }: { pid: string }) { const [hovered, setHovered] = useState(false) + const [txData, setTxData] = useState(null) + const [assetTags, setAssetTags] = useState<{ [name: string]: string }>({ + 'Title': "", + 'Description': "", + 'Creator': "", + 'Template-Files': "" + }) + const [fileCount, setFileCount] = useState(0) + const [handlerCount, setHandlerCount] = useState(0) + const [profile, setProfile] = useState({ + id: null, + walletAddress: null, + displayName: null, + username: null, + bio: null, + avatar: null, + banner: null, + version: null, + }) + + useEffect(() => { + if (!pid) return + + const gqlQuery = gql`query { + transactions( + ids:["${pid}"] + ) { + edges { + node { + id + tags { + name + value + } + } + } + } +} +` + + const client = new GraphQLClient("https://arweave.net/graphql") + client.request(gqlQuery).then((data) => { + const dataTags: Tag[] = (data as any).transactions.edges[0].node.tags + const tags = dataTags.reduce((acc, tag) => { + acc[tag.name] = tag.value + return acc + }) + console.log(tags) + setAssetTags(tags) + const filesTxId = tags["Template-Files"] + + console.log("fetching tx data", filesTxId) + fetch(`https://arweave.net/${filesTxId}`) + .then(res => res.json()) + .then((res) => { + console.log(res) + setTxData({ + name: tags['Title'], + description: tags['Description'], + creator: tags['Creator'], + files: res + }) + }) + }).catch((e) => { + console.error(e) + toast.error("Error fetching transaction data") + }) + }, [pid]) + + useEffect(() => { + if (!txData) return + + const fileNames = Object.keys(txData.files); + const sourceSummed = fileNames.map(fileName => { + const file = txData.files[fileName]; + if (file.type == "NORMAL") + return file.content.cells[0].code; + else { + const cells = []; + for (const cellId of file.content.cellOrder) { + cells.push(file.content.cells[cellId].code); + } + return cells.join("\n"); + } + }).join("\n"); + const handlers = extractHandlerNames(sourceSummed); + console.log("files:", fileNames.length, " handlers:", handlers.length); + setFileCount(fileNames.length); + setHandlerCount(handlers.length); + + }, [txData]) + + useEffect(() => { + console.log("assetTags", assetTags) + const creator = assetTags['Creator'] + if (!creator) return + + getProfileById({ profileId: creator }).then((profile) => { + console.log("profile", profile) + setProfile(profile) + }) + }, [assetTags]) function handleMouseEnter() { setHovered(true) @@ -43,21 +152,23 @@ function Template({ pid }: { pid: string }) {
-
Llama world: AI agent
-
Useful template to create agents. asdjadhjasdjh asjhdjasdj jhasdhjajhdajhd hdhadguwfiwbfib bsa bhabsfha fh
+
{assetTags['Title']}
+
{assetTags['Description']}
-
5 Files
-
10 Handlers
+
{fileCount || "NA"} Files
+
{handlerCount || "NA"} Handlers
-
{ e.stopPropagation() }} - >ankushKun
+ > + {profile?.avatar ? profile-picture : } + {profile.displayName || profile.username}
-
$0.1
+ {/*
$0.1
*/} { e.stopPropagation() }} >View on bazar @@ -66,14 +177,14 @@ function Template({ pid }: { pid: string }) {
- + Llama world: AI agent Useful template to create agents. asdjadhjasdjh asjhdjasdj jhasdhjajhdajhd hdhadguwfiwbfib bsa bhabsfha fh - + {/* view on bazar */} { + const emptyProfile = { + id: args.profileId, + walletAddress: null, + displayName: null, + username: null, + bio: null, + avatar: null, + banner: null, + version: null, + }; + + try { + const fetchedProfile = await readHandler({ + processId: args.profileId, + action: 'Info', + data: null, + }); + + if (fetchedProfile) { + return { + id: args.profileId, + walletAddress: fetchedProfile.Owner || null, + displayName: fetchedProfile.Profile.DisplayName || null, + username: fetchedProfile.Profile.UserName || null, + bio: fetchedProfile.Profile.Description || null, + avatar: fetchedProfile.Profile.ProfileImage || null, + banner: fetchedProfile.Profile.CoverImage || null, + version: fetchedProfile.Profile.Version || null, + }; + } else return emptyProfile; + } catch (e: any) { + throw new Error(e); + } +} diff --git a/next_app/src/pages/renderer.tsx b/next_app/src/pages/renderer.tsx index 4d93513..adc894e 100644 --- a/next_app/src/pages/renderer.tsx +++ b/next_app/src/pages/renderer.tsx @@ -125,7 +125,7 @@ export default function TxRenderer({ id_ }: { id_: string }) { return })} } - :
Select a file to view its contents
+ :
Select a file to view its contents
}