feat: add item column and relative time to history

[kkukelka]

Thank you for your contribution to the KodaDot NFT gallery.
👇 _ Let's make a quick check before the contribution.

history.mov

PR type

• Bugfix
• Feature
• Refactoring

What's new?

• PR closes Rework feed for collection bit #2547
• Added column which shows item id and links to gallery page (name is not available so we take id for now), added relative time and tooltip with exact stamp on hover

Before submitting Pull Request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Optional

• I've tested it at </rmrk/collection/26902bc2f7c20c546a-1FVG7>
• I've tested PR on mobile and everything seems works
• I found edge cases
• I've written some unit tests 🧪

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot

• My fix has changed something on UI; a screenshot is best to understand changes for others.

[netlify]

✔️ Deploy Preview for koda-nuxt ready!

🔨 Explore the source changes: 04376c7

🔍 Inspect the deploy log: https://app.netlify.com/sites/koda-nuxt/deploys/623209806a85e70008ad395a

😎 Browse the preview: https://deploy-preview-2552--koda-nuxt.netlify.app

[yangwao]

Probably #2545 broke something here 👀

[yangwao]

Probably we need to strip/cut at From and To identities as well as it's pushes other columns. Probably same as at Item filter?

[vikiival]

My mac has frozen.
@yangwao said that there is a pagination for the history component

[vikiival]

@kkukelka may update your PR with the latest main?

[yangwao]

@kkukelka may update your PR with the latest main?

Maybe you drank too much club mate?

[kkukelka]

@kkukelka may update your PR with the latest main?

done

[kkukelka]

looks normal here or am i missing something?

[yangwao]

here https://deploy-preview-2552--koda-nuxt.netlify.app/rmrk/collection/2644199cf3652aaa78-KK01?tab=history

[yangwao]

I sense that pagination doesn't work here?
edit, yes doesn't work :)

almost frozen my stuff https://deploy-preview-2552--koda-nuxt.netlify.app/rmrk/collection/b45071647155359951-SUBSTRA?tab=history&page=5

yup this how it should look like
https://beta.kodadot.xyz/rmrk/collection/b45071647155359951-SUBSTRA?tab=history&page=8

[yangwao]

clicked update branch, let's see?

[yangwao]

Schumacher, seems lots of caffeine today lol

otherwise, it's working?

Screen.Recording.2022-03-16.at.14.54.07.mov

[vikiival]

[yangwao]

oh found bug, link to item doesn't work
leads to non-existing nft https://deploy-preview-2552--koda-nuxt.netlify.app/rmrk/gallery/9181565-dac5c7f54029d0e73c-HXAI8-E_V_EM-0000000000000052-BUYg54M6_EPLgXDtmfTDP663

[vikiival]

Good eye!

{
  "id": "9181565-dac5c7f54029d0e73c-HXAI8-E_V_EM-0000000000000052",
  "events": [
    {
      "id": "9181565-dac5c7f54029d0e73c-HXAI8-E_V_EM-0000000000000052-MINTNFTKZ6hxTeIVTR8CKEx1UGac"
    },
    {
      "id": "9181565-dac5c7f54029d0e73c-HXAI8-E_V_EM-0000000000000052-LISTVg-SA9ZqfMYVyNOq0TRRy"
    },
    {
      "id": "9181565-dac5c7f54029d0e73c-HXAI8-E_V_EM-0000000000000052-BUYpfpKvJxNHW2JrskhHZoDM"
    },
    {
      "id": "9181565-dac5c7f54029d0e73c-HXAI8-E_V_EM-0000000000000052-LISTQDPhuXFgDiG2C42oehjeQ"
    },
    {
      "id": "9181565-dac5c7f54029d0e73c-HXAI8-E_V_EM-0000000000000052-BUYLSmNCpMZBeiwl2CHMj7Uu"
    },
    {
      "id": "9181565-dac5c7f54029d0e73c-HXAI8-E_V_EM-0000000000000052-LISTRWcsa83ZhcXY3dTLX81su"
    },
    {
      "id": "9181565-dac5c7f54029d0e73c-HXAI8-E_V_EM-0000000000000052-LISTXXxJ1lYPxRa8uf7uTg4m2"
    },
    {
      "id": "9181565-dac5c7f54029d0e73c-HXAI8-E_V_EM-0000000000000052-LISTeBoxa_zCzB9uig5eWfKif"
    },
    {
      "id": "9181565-dac5c7f54029d0e73c-HXAI8-E_V_EM-0000000000000052-LISTwINca_XiQf6yN1mMZJwRB"
    },
    {
      "id": "9181565-dac5c7f54029d0e73c-HXAI8-E_V_EM-0000000000000052-LISTSC43fZxm5Mg1XE4_Eyduh"
    }
  ]
}

@kkukelka fast fix is to remove everything after the last dash

const reg = /-[a-zA-Z0-9_]+$/

id.replace(reg, '')

[vikiival]

Better approach is to select name and id from NFT :)

[kkukelka]

@kkukelka fast fix is to remove everything after the last dash

const reg = /-[a-zA-Z0-9_]+$/

id.replace(reg, '')

gonna opt for regex as i dont have time update graphql query

event['Item'] = newEvent['id']?.replace(
          /-(BUY|CONSUME|LIST|MINT|MINFNFT|SEND).+$/,
          ''
        )

also made sure not to show item column on NFT Detail page

[yangwao]

Add the name of the item to the history, once it would be available.
Right now making this issue name was not available.

[yangwao]

pay 100 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $100 @ 127.69 USD/KSM ~ 0.783 $KSM
🧗 EqdyzrzVmeHwMdMwvPeCMnNdbuQDbD3YrjY93xq9Ln3jUGW
🔗 0x3fcf2251085ddd7b1c2e202aec1b33fd8b5b84a6c9ff8925374a1e55f9ffe8ca

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues