Skip to content

Commit

Permalink
dynamic asset data
Browse files Browse the repository at this point in the history
  • Loading branch information
@ankushKun
ankushKun committed Aug 21, 2024
1 parent 2b983f4 commit 068cbe6
Show file tree
Hide file tree
Showing 3 changed files with 159 additions and 12 deletions.
131 changes: 121 additions & 10 deletions next_app/src/components/views/components/marketplace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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<TemplateAsset & { creator: string }>(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<AOProfileType>({
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)
Expand All @@ -43,21 +152,23 @@ function Template({ pid }: { pid: string }) {

<div className="grid grid-cols-5 items-start justify-between mb-5">
<div className="flex flex-col col-span-3">
<div className="text-lg font-semibold">Llama world: AI agent</div>
<div className="text-sm text-gray-500">Useful template to create agents. asdjadhjasdjh asjhdjasdj jhasdhjajhdajhd hdhadguwfiwbfib bsa bhabsfha fh</div>
<div className="text-lg font-semibold">{assetTags['Title']}</div>
<div className="text-sm text-gray-500">{assetTags['Description']}</div>
</div>
<div data-hovered={hovered} className="text-sm transition-all duration-200 col-span-2 flex flex-col gap-1.5 justify-start items-end text-muted-foreground">
<div className="flex items-center gap-1">5 Files <Files size={18} className="inline-block" /></div>
<div className="flex items-center gap-1">10 Handlers <SquareFunction size={18} className="inline-block" /></div>
<div className="flex items-center gap-1">{fileCount || "NA"} Files <Files size={18} className="inline-block" /></div>
<div className="flex items-center gap-1">{handlerCount || "NA"} Handlers <SquareFunction size={18} className="inline-block" /></div>
</div>

</div>
<div data-hovered={hovered} className="flex text-sm gap-5 items-center transition-all duration-200">
<div className="flex items-center gap-1"><CircleUserRound size={18} /> <Link href={`https://ao-bazar.arweave.net/#profile/${"#"}`} target="_blank" className="font-semibold text-primary hover:underline underline-offset-4"
<Link href={`https://ao-bazar.arweave.net/#/profile/${profile ? profile.id : "#"}`} target="_blank" className="font-semibold text-primary hover:underline underline-offset-4 flex items-center gap-1"
onClick={(e) => { e.stopPropagation() }}
>ankushKun</Link></div>
>
{profile?.avatar ? <Image src={`https://arweave.net/${profile.avatar}`} width={22} height={22} alt="profile-picture" className="rounded-full" /> : <CircleUserRound size={18} />}
{profile.displayName || profile.username}</Link>
<div className="grow"></div>
<div className="flex gap-2 items-center font-semibold">$0.1 <WarpedAR /></div>
{/* <div className="flex gap-2 items-center font-semibold">$0.1 <WarpedAR /></div> */}
<Link href={`https://ao-bazar.arweave.net/#/asset/${pid}`} target="_blank" className="text-primary hover:underline underline-offset-4 flex items-center gap-1.5"
onClick={(e) => { e.stopPropagation() }}
>View on bazar <BazarIcon /></Link>
Expand All @@ -66,14 +177,14 @@ function Template({ pid }: { pid: string }) {

</div>
</DialogTrigger>
<DialogContent className="max-h-[90vh]">
<DialogContent className="max-h-[90vh] h-full min-w-[80vw] flex flex-col">
<DialogHeader>
<DialogTitle>Llama world: AI agent</DialogTitle>
<DialogDescription>
Useful template to create agents. asdjadhjasdjh asjhdjasdj jhasdhjajhdajhd hdhadguwfiwbfib bsa bhabsfha fh
</DialogDescription>
</DialogHeader>
<iframe src={`/renderer?tx=${pid}`} className="border aspect-square w-full rounded"></iframe>
<iframe src={`/renderer?tx=${pid}`} className="border w-full grow rounded"></iframe>
<DialogFooter className="flex items-center !justify-between">
{/* view on bazar */}
<Link href={`https://ao-bazar.arweave.net/#/asset/${pid}`} target="_blank" className="text-primary hover:underline underline-offset-4 flex items-center gap-1.5"
Expand Down
38 changes: 37 additions & 1 deletion next_app/src/lib/bazar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,4 +67,40 @@ export async function getProfileByWalletAddress(args: { address: string }): Prom
} catch (e: any) {
throw new Error(e);
}
}
}

export async function getProfileById(args: { profileId: string }): Promise<ProfileHeaderType | null> {
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);
}
}
2 changes: 1 addition & 1 deletion next_app/src/pages/renderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export default function TxRenderer({ id_ }: { id_: string }) {
return <CodeCell key={_} code={code} appName="BetterIDEa-Renderer" cellId={_.toString()} nowallet={!!window.arweaveWallet} height="200px" />
})}</div>
}
</div> : <div className="text-center ring-1">Select a file to view its contents</div>
</div> : <div className="text-center">Select a file to view its contents</div>
}
</div>
</div>
Expand Down

0 comments on commit 068cbe6

Please sign in to comment.