feat add holdings by user #2751

Jarsen136 · 2022-04-03T09:58:26Z

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

PR type

Bugfix
Feature
Refactoring

What's new?

PR closes Holdings by User #2739
<brief_description_of_what_I've_added>

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 · 2022-04-03T09:58:30Z

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	`099c904`
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/624da6dc23e01d0008a78e2c
😎 Deploy Preview	https://deploy-preview-2751--koda-nuxt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

yangwao · 2022-04-03T10:53:08Z

can't see https://deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/FXUxw9Xp98gTzrU2z63D2G92kcx1oznd6xYa8WdqRgTcEDo it redirect me to collected...

same for https://deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/JCHzJjQAbgk96DsGq69JgwPLXnc3Ab6UfGjtxYZ5eLV2vFW?tab=collected

I bet it has something to do if the user who did not create, won't see holdings?

here it works tho
https://deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/Cp9r5r9StL5VWQpqKXZiiWJQyPsehPjnkcdA1h2ewrSCbwo?tab=collected

but maybe it's fixed in #2725 ?

yangwao · 2022-04-03T11:17:26Z

can't see deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/FXUxw9Xp98gTzrU2z63D2G92kcx1oznd6xYa8WdqRgTcEDo it redirect me to collected...

same for deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/JCHzJjQAbgk96DsGq69JgwPLXnc3Ab6UfGjtxYZ5eLV2vFW?tab=collected

I bet it has something to do if the user who did not create, won't see holdings?

here it works tho deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/Cp9r5r9StL5VWQpqKXZiiWJQyPsehPjnkcdA1h2ewrSCbwo?tab=collected

but maybe it's fixed in #2725 ?

Merged main and #2725
Seems doesn't work 🥹

https://deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/FXUxw9Xp98gTzrU2z63D2G92kcx1oznd6xYa8WdqRgTcEDo?tab=holdings

yangwao · 2022-04-03T11:22:51Z

Otherwise is seems works nice https://deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/FAZBj1G1H1Ls4nKn8ru7F31qku4Fhgzcce3D56hgTfJAj4Q?tab=holdings

just wanted inspect on some collectors tho!
:)

Jarsen136 · 2022-04-03T12:11:22Z

can't see https://deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/FXUxw9Xp98gTzrU2z63D2G92kcx1oznd6xYa8WdqRgTcEDo it redirect me to collected...

same for https://deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/JCHzJjQAbgk96DsGq69JgwPLXnc3Ab6UfGjtxYZ5eLV2vFW?tab=collected

I bet it has something to do if the user who did not create, won't see holdings?

I've also encountered several addresses where this is the case. I'm not sure if it's because the user is set to not allow access to the profile page. The interface for requesting collections list returned empty. And it works well for other addresses.

but maybe it's fixed in #2725 ?

#2725 solves the occasional problem of displaying empty lists for every address. Not the same problem as mentioned above

…sue-2739

yangwao · 2022-04-03T16:52:05Z

I'm not sure if it's because the user is set to not allow access to the profile page.

I guess we don't have any setting like that 🤔

yangwao · 2022-04-03T18:58:17Z

wait https://deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/CuHWHNcBt3ASMVSJmcJyiBWGxxiWLyjYoYbGjfhL4ovoeSd?tab=holdings&page=1

just noticed it shows only NFTs which were minted by my address?

Jarsen136 · 2022-04-04T02:48:21Z

wait https://deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/CuHWHNcBt3ASMVSJmcJyiBWGxxiWLyjYoYbGjfhL4ovoeSd?tab=holdings&page=1

just noticed it shows only NFTs which were minted by my address?

Yup, now I have fixed it and it can show all nfts owned by users.

Jarsen136 · 2022-04-04T03:03:26Z

However, I have to use two queries including nftListOwned(just added) and allCollectionSaleEvents, to get all holding information. On addresses with a large number of NFTs, performance will be poor and it may cause a server-side error.

The best solution is to combine them into one request.
Specifically, it is to enable the nftListOwned interface to return the result of the allCollectionSaleEvents interface.
Maybe need some help from @vikiival @roiLeo

query nftListOwned(
  $account: String!,
  $first: Int,
  $offset: Int,
  $orderBy: NftEntitiesOrderBy = BLOCK_NUMBER_DESC
) {
  nFTEntities(
    filter: {
      currentOwner: { equalTo: $account }
      name: { notLike: "%Kanaria%" }
      burned: { distinctFrom: true }
    }
    orderBy: [$orderBy, BLOCK_NUMBER_DESC]
    first: $first
    offset: $offset
  ) {
    totalCount
    nodes {
      ...nft
    }
  }
}

query allCollectionSaleEvents($ids: [ID!], $and: [EventWhereInput!]) {
  events(where: { nft: { collection: { id_in: $ids } }, AND: $and }) {
    meta
    interaction
    blockNumber
    timestamp
    caller
    id
    nft {
      id
      name
      collection {
        id
        name
      }
    }
  }
}

components/rmrk/Gallery/Holder/Holder.vue

components/rmrk/Gallery/Holding.vue

yangwao · 2022-04-04T09:04:44Z

However, I have to use two queries including nftListOwned(just added) and allCollectionSaleEvents, to get all holding information. On addresses with a large number of NFTs, performance will be poor and it may cause a server-side error.

We can do special magic and cache some queries which loads superior fast, same technique we are using in spotlight and series-insight iirc, as it's huge query.

yangwao · 2022-04-04T09:07:14Z

Testcase

https://deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/FXUxw9Xp98gTzrU2z63D2G92kcx1oznd6xYa8WdqRgTcEDo?tab=holdings

Oh, I see an issue with big queries now. Seems giving me 504 which is gateway timeout, I'll ping the Subsquid squad so let's see how they can help us on this track

Jarsen136 · 2022-04-04T09:13:01Z

We can do special magic and cache some queries which loads superior fast, same technique we are using in spotlight and series-insight iirc, as it's huge query.

Yes, you are right. And I think the quickest solution is to enable the nftListOwned interface to return events for specific nfts. It can obviously solve the problem of too large response data.

vikiival · 2022-04-04T09:22:01Z

Specifically, it is to enable the nftListOwned interface to return the result of the allCollectionSaleEvents interface.

Not sure what do you mean.

Jarsen136 · 2022-04-04T09:29:56Z

Specifically, it is to enable the nftListOwned interface to return the result of the allCollectionSaleEvents interface.

Not sure what do you mean.

Hey, @vikiival Let me expand more:

Current process:
nftListOwned -> receive specific nfts list-> generate collectionId list -> allCollectionSaleEvents -> receive all events list of specific collections

What process I expected:
nftListOwned -> receive the events list of specific nfts
And the structure of events should be the same as what allCollectionSaleEvents return : )

    meta
    interaction
    blockNumber
    timestamp
    caller
    id
    nft {
      id
      name
    }

vikiival · 2022-04-04T09:46:05Z

#2739 (comment)

vikiival · 2022-04-04T09:59:16Z

Here you go sir

query collectionHoldingsByAccount($id: String!) {
  collectionEntities(where: {nfts_some: {currentOwner_eq: $id}}) {
    id
    name
    nfts(where: {currentOwner_eq: $id}) {
      id
      price
      updatedAt
      bought: events(where: {caller_eq: $id, interaction_eq: BUY}, orderBy: timestamp_DESC, limit: 1) {
        id
        meta
      }
    }
  }
}

vikiival · 2022-04-04T10:01:37Z

feel free to test here

query variables:

{
  "id": "Fksmad33PFxhrQXNYPPJozgWrv82zuFLvXK7Rh8m1xQhe98"
}

In case of last actitivity you can extend the query with

      lastUpdate: events(orderBy: timestamp_DESC, limit: 1) {
        id
        interaction
        blockNumber
        timestamp
        meta
      }
    }

Jarsen136 · 2022-04-06T10:04:23Z

A hovercard could be added as well as now it doesn't work :|

Can make a separate issue or make it here with extra bounty, up to you.

okey, i will make it here.

yangwao · 2022-04-06T10:06:18Z

Oh, I've just noticed by using it,
would be nice if when I

go from collection holders tab
Click on the user in the table
would redirect me to the holdings tab of the user directly

Small tweak which makes contextual sense :)

Jarsen136 · 2022-04-06T12:20:51Z

A hovercard could be added as well as now it doesn't work :|

Can make a separate issue or make it here with extra bounty, up to you.

I'm not sure what kind of card do you would like to add : ) as we only have the user card component. Could you give me an example? @yangwao

Or we can make a separate issue to make it and build a new card component? Would be great if assign me.

Jarsen136 · 2022-04-06T12:34:23Z

Oh, I've just noticed by using it,
would be nice if when I

go from collection holders tab
Click on the user in the table
would redirect me to the holdings tab of the user directly
Small tweak which makes contextual sense :)

I have finished it.
And I also fix the bug mentioned at #2753, so that it can directly jump to the holdings tab when clicking on the user name.

components/rmrk/Profile/ProfileDetail.vue

yangwao · 2022-04-06T13:42:43Z

Can we cut long name 👀

https://deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/GAYBQX5f7NXS4dv5EnL7NRSGLnAQmoDqajx998nYLv8QoJT?tab=holdings&page=3

🥹

Jarsen136 · 2022-04-06T13:55:18Z

Can we cut long name 👀

https://deploy-preview-2751--koda-nuxt.netlify.app/rmrk/u/GAYBQX5f7NXS4dv5EnL7NRSGLnAQmoDqajx998nYLv8QoJT?tab=holdings&page=3

🥹

Sure, a piece of cake.

…sue-2739

yangwao · 2022-04-06T14:43:49Z

Once @roiLeo has no objections, let's merge it!

roiLeo

code is error free, we might need to replace all any type later

Jarsen136 · 2022-04-06T14:53:24Z

code is error free, we might need to replace all any type later

Ok, I will replace these 'any' type later in this issue #2785

yangwao · 2022-04-06T14:57:42Z

pay 300 usd

yangwao · 2022-04-06T15:04:57Z

interesting lol

yangwao · 2022-04-06T15:05:03Z

pay 300 usd

yangwao · 2022-04-06T15:05:09Z

😍 Perfect, I’ve sent the payout
💵 $300 @ 174.83 USD/KSM ~ 1.716 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0xe7d1ae5e9be3a1a257fbc19c2f3fd346a70c26f9e64fb2e6b853b4cd935d161f

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

Jarsen136 added 2 commits April 3, 2022 17:48

feat: add holdings by user

aec4615

custom label name

18a1a8d

yangwao mentioned this pull request Apr 3, 2022

Rework tabs in user profile #2753

Closed

Merge branch 'main' into issue-2739

45fe4b3

Jarsen136 added 2 commits April 3, 2022 20:41

fix checkbox selector

0b1c955

Merge branch 'issue-2739' of github.com:Jarsen136/nft-gallery into is…

aad15e8

…sue-2739

yangwao requested a review from roiLeo April 3, 2022 17:48

Jarsen136 added 3 commits April 4, 2022 10:35

add collections collected and created by user

dd1054c

tooltip rename

dda3381

display holding tab forever

6cfa42d

style remove scoped

c8fae5a

roiLeo reviewed Apr 4, 2022

View reviewed changes

add types

51ec5ea

refactor code

ab703fb

feat link holder user to hodings tab

cf28742

Jarsen136 requested a review from roiLeo April 6, 2022 12:37

roiLeo reviewed Apr 6, 2022

View reviewed changes

components/rmrk/Profile/ProfileDetail.vue Outdated Show resolved Hide resolved

Jarsen136 added 5 commits April 6, 2022 20:43

fix incorrect route

ecece61

fix tab from url

5dd010e

fix typeScript warning

7376463

code refactor

c18733d

fix query error

1dfcc03

Merge branch 'main' into issue-2739

63386da

yangwao mentioned this pull request Apr 6, 2022

Add hover card to holdings by user #2785

Closed

Jarsen136 added 3 commits April 6, 2022 22:17

cut long name

25440dc

Merge branch 'issue-2739' of github.com:Jarsen136/nft-gallery into is…

3f58b9d

…sue-2739

hotfix ts error

099c904

roiLeo self-requested a review April 6, 2022 14:44

roiLeo approved these changes Apr 6, 2022

View reviewed changes

yangwao merged commit cdc0f68 into kodadot:main Apr 6, 2022

yangwao added the paid pull-request has been paid label Apr 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat add holdings by user #2751

feat add holdings by user #2751

Jarsen136 commented Apr 3, 2022

netlify bot commented Apr 3, 2022 •

edited

Loading

yangwao commented Apr 3, 2022 •

edited

Loading

yangwao commented Apr 3, 2022 •

edited

Loading

yangwao commented Apr 3, 2022

Jarsen136 commented Apr 3, 2022 •

edited

Loading

yangwao commented Apr 3, 2022

yangwao commented Apr 3, 2022

Jarsen136 commented Apr 4, 2022

Jarsen136 commented Apr 4, 2022 •

edited

Loading

yangwao commented Apr 4, 2022

yangwao commented Apr 4, 2022 •

edited

Loading

Jarsen136 commented Apr 4, 2022

vikiival commented Apr 4, 2022

Jarsen136 commented Apr 4, 2022 •

edited

Loading

vikiival commented Apr 4, 2022

vikiival commented Apr 4, 2022

vikiival commented Apr 4, 2022

Jarsen136 commented Apr 6, 2022

yangwao commented Apr 6, 2022

Jarsen136 commented Apr 6, 2022 •

edited

Loading

Jarsen136 commented Apr 6, 2022 •

edited

Loading

yangwao commented Apr 6, 2022

Jarsen136 commented Apr 6, 2022

yangwao commented Apr 6, 2022

roiLeo left a comment

Jarsen136 commented Apr 6, 2022

yangwao commented Apr 6, 2022

yangwao commented Apr 6, 2022

yangwao commented Apr 6, 2022

yangwao commented Apr 6, 2022

feat add holdings by user #2751

feat add holdings by user #2751

Conversation

Jarsen136 commented Apr 3, 2022

PR type

What's new?

Before submitting Pull Request, please make sure:

Optional

Had issue bounty label?

Community participation

Screenshot

netlify bot commented Apr 3, 2022 • edited Loading

✅ Deploy Preview for koda-nuxt ready!

yangwao commented Apr 3, 2022 • edited Loading

yangwao commented Apr 3, 2022 • edited Loading

yangwao commented Apr 3, 2022

Jarsen136 commented Apr 3, 2022 • edited Loading

yangwao commented Apr 3, 2022

yangwao commented Apr 3, 2022

Jarsen136 commented Apr 4, 2022

Jarsen136 commented Apr 4, 2022 • edited Loading

yangwao commented Apr 4, 2022

yangwao commented Apr 4, 2022 • edited Loading

Testcase

Jarsen136 commented Apr 4, 2022

vikiival commented Apr 4, 2022

Jarsen136 commented Apr 4, 2022 • edited Loading

vikiival commented Apr 4, 2022

vikiival commented Apr 4, 2022

vikiival commented Apr 4, 2022

Jarsen136 commented Apr 6, 2022

yangwao commented Apr 6, 2022

Jarsen136 commented Apr 6, 2022 • edited Loading

Jarsen136 commented Apr 6, 2022 • edited Loading

yangwao commented Apr 6, 2022

Jarsen136 commented Apr 6, 2022

yangwao commented Apr 6, 2022

roiLeo left a comment

Choose a reason for hiding this comment

Jarsen136 commented Apr 6, 2022

yangwao commented Apr 6, 2022

yangwao commented Apr 6, 2022

yangwao commented Apr 6, 2022

yangwao commented Apr 6, 2022

netlify bot commented Apr 3, 2022 •

edited

Loading

yangwao commented Apr 3, 2022 •

edited

Loading

yangwao commented Apr 3, 2022 •

edited

Loading

Jarsen136 commented Apr 3, 2022 •

edited

Loading

Jarsen136 commented Apr 4, 2022 •

edited

Loading

yangwao commented Apr 4, 2022 •

edited

Loading

Jarsen136 commented Apr 4, 2022 •

edited

Loading

Jarsen136 commented Apr 6, 2022 •

edited

Loading

Jarsen136 commented Apr 6, 2022 •

edited

Loading