Collection View on Warpcast

vikiival commented 8 months ago

Context

During ETHDenver, I hacked something called uniframe and we would like to use that in prod now.

This is what the frame looks like; it has next/prev button, random and visit link

frame

Tasks

fork uniframe or spin-up new frog project
in route /gallery add parameters chain and id - /gallery/:chain/:id
based on those fields, edit code so it takes that params into account
in route /gallery/view check why max does not work
in route /gallery/view check why link to the correct nft does not works

If there is something we should change design-wise - @exezbcz is your guy

Definition of done

Proof that it works - scr
merged, deployed of CF

vikiival commented 8 months ago

cc @kodadot/internal-dev who wants to hack ?

yangwao commented 8 months ago

Raised bounty for that at /bounties

https://warpcast.com/yangwao/0xe87e6ce2

Complexlity commented 8 months ago

WIP: https://kodadot-collections.complexlity.workers.dev/gallery/ahp/106 https://kodadot-collections.complexlity.workers.dev/gallery/ahk/403

Paste any of the links above here: https://warpcast.com/~/developers/frames

I have added the functionality to enter a koda chain and the id and return as expected. Also the random button now returns the a random collection item within the max.

However, I notice some issues with the uiniquery client. If the random item number is low (say 10) it returns the item, but if it's high, it sometimes returns null (not sure why that happens but Investigating. Will update this when It's fixed)

Update: for some reason , 34 is the highest item number than can be fetched consistently by the uniquery client beyond the 34th item, the client returns null many times when I tested . Manually set the highest max can be to 34

Asides that, it works as it should

Update: @yangwao I made a site as you mentioned where user's can input the collection and id and get back the link they can copy and paste into warpcast. Here: https://kodadot.vercel.app/

yangwao commented 8 months ago

Thanks @Complexlity will check!

Update: for some reason , 34 is the highest item number than can be fetched consistently by the uniquery client beyond the 34th item, the client returns null many times when I tested .\nManually set the highest max can be to 34

cc @vikiival

vikiival commented 8 months ago

34 is the highest item number than can be fetched consistently by the uniquery client

@Complexlity which collection?

Complexlity commented 8 months ago

During initiial testing it was this: https://kodadot-collections.complexlity.workers.dev/gallery/ahp/106

However, after testing with the other one, (https://kodadot-collections.complexlity.workers.dev/gallery/ahk/403) I noticed the same issue but this time the fail number was not 34. So It ended up making the random button return the right item is some cases and returning null (error frame in others). It's still hardcoded to have the highest value to 34 but I'll change it now and test again.

Update: I can confirm it still has the same effect

vikiival commented 8 months ago

Hello,

I have fixed your error :) Collection has only 34 items :)

max will tell you about max items that could be minted

https://kodadot.xyz/ahp/collection/106

to fetch the supply you should extend the call with supply

export async function getCollection(chain: string, id: string) {
  const client = getClient(chain as any)
  const withImage = extendFields(['image', 'max' as any, 'supply'])
  const query = client.collectionById(id, withImage)

  console.log(JSON.stringify(query, null, 2))

  try {
    const result = await client.fetch<any>(query)
    return result.data?.collection
  } catch (error) {
    console.error(error)
    return null
  }
}

 {
  "id": "106",
  "createdAt": "2024-02-26T17:35:12.000000Z",
  "name": "Refraction",
  "image": "ipfs://bafybeiajfm5gii2ai32at7zaqysyjb6ipux5fjx7dw3ndmyzajug4v4q4e",
  "metadata": "ipfs://bafkreibc7n4wym2nxoh33vyjjxldaxzwliyvbplgp3zbkwfnfzblisp2sa",
  "currentOwner": "15CoYMEnJhhWHvdEPXDuTBnZKXwrJzMQdcMwcHGsVx5kXYvW",
  "issuer": "15CoYMEnJhhWHvdEPXDuTBnZKXwrJzMQdcMwcHGsVx5kXYvW",
  "max": 256,
  "supply": 34
}

So please consult with the https://kodadot.xyz ;)

Complexlity commented 8 months ago

Oh wow!. Thank you. I will update the code

Update: Done. It should work well now.

Enter chain and id here: https://kodadot.vercel.app/
Copy the generated link
Paste here: https://warpcast.com/~/developers/frames (or on warpcast itself)

yangwao commented 8 months ago

Evaluating, asked to make it square as art is mostly square. ✅

Any changes we should do @vikiival @kodadot/internal ?

Codebase at

https://github.com/Complexlity/uniframe Eventually, this codebase can be part workers, I guess, as sharing natively URL for collection can show users this preview which is native for farcaster
https://github.com/kodadot/nft-gallery/issues/9839

Oui, some conflict happened

https://warpcast.com/complexlity/0xdbe8a9e1

vikiival commented 8 months ago

Any changes we should do @vikiival ?

Can you rephrase your question please?

yangwao commented 8 months ago

Clicking on frame takes me to a blank screen

https://warpcast.com/yangwao/0x84b4d7c9

Can we make it take me on item best, or collection at least and no blank page? cc @Complexlity

Inspiration https://warpcast.com/fiveoutofnine.eth/0x6e9ce1c3

Buttons change

Replace arrows with ←, → and dice with ↻, an external link View.

vikiival commented 8 months ago

Clicking on frame takes me to a blank screen

This is expected as the url returns only OG tags needed for the fram

<head>
    <meta property="fc:frame" content="vNext" />
    <meta property="fc:frame:image:aspect_ratio" content="1:1" />
    <meta
        property="fc:frame:image"
        content="https://image-beta.w.kodadot.xyz/ipfs/bafybeidowsbofhozb232atazfwkkfe6bpmguxnqwgrmlg4sqwl4ptlhi2a"
    />
    <meta
        property="og:image"
        content="https://image-beta.w.kodadot.xyz/ipfs/bafybeidowsbofhozb232atazfwkkfe6bpmguxnqwgrmlg4sqwl4ptlhi2a"
    />
    <meta property="og:title" content="Convergente" />
    <meta
        property="fc:frame:post_url"
        content="https://kodadot-collections.complexlity.workers.dev/gallery/ahp/112?initialPath=%252Fgallery%252Fahp%252F112&amp;previousButtonValues=%2523A_155"
    />
    <meta property="fc:frame:button:1" content="Browse:Convergente[256]" data-value="155" />
    <meta property="fc:frame:button:1:action" content="post" />
    <meta
        property="fc:frame:button:1:target"
        content="https://kodadot-collections.complexlity.workers.dev/gallery/view/ahp/112/1?initialPath=%252Fgallery%252Fahp%252F112&amp;previousButtonValues=%2523A_155"
    />
    <meta property="frog:version" content="0.6.5" />
</head>

Complexlity commented 8 months ago

Clicking on frame takes me to a blank screen

https://warpcast.com/yangwao/0x84b4d7c9

Can we make it take me on item best, or collection at least and no blank page? cc @Complexlity

Inspiration https://warpcast.com/fiveoutofnine.eth/0x6e9ce1c3

Buttons change

Replace arrows with ←, → and dice with ↻, an external link View.

Here you go:

https://kodadot-collections.complexlity.workers.dev/gallery/ahp/112

It now opens the collection in the browser. Also, the buttons have been changed as expected

yangwao commented 8 months ago

works ✅

yangwao commented 8 months ago

Done. https://warpcast.com/yangwao/0xcc329216

kodadot / frames