feat: Follow up for success drop notification #6256

Jarsen136 · 2023-06-16T17:06:16Z

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

Bugfix
Feature
Refactoring

Needs Design check

@exezbcz please review

Context

Closes Follow up for success drop notif #6252
Requires deployment <snek/rubick/worker>

Did your issue had any of the "$" label on it?

My DOT address: Payout

Screenshot 📸

My fix has changed UI

tested on /stmn/unlockable?redesign=true

twitter

Copilot Summary

`🤖 Generated by Copilot at f4f1c7b`

Added feature flag and mock code for unlockable NFTs and improved UX for minting and sharing them. The changes affect the UnlockableContainer and UnlockableLoader components in components/collection/unlockable.

`🤖 Generated by Copilot at f4f1c7b`

Sing, O Muse, of the skillful code that changed the face of NFTs
How the clever developers added a feature flag and mock code
To test the new design of the UnlockableContainer component
And make it easier to mint and share the hidden treasures of art

kodabot · 2023-06-16T17:06:20Z

SUCCESS @Jarsen136 PR for issue #6252 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

netlify · 2023-06-16T17:06:21Z

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	`57fcaee`
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64902eaaa977cf0008308f93
😎 Deploy Preview	https://deploy-preview-6256--koda-canary.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.

reviewpad · 2023-06-16T17:06:33Z

AI-Generated Summary: This pull request introduces a feature for displaying a success notification upon successfully dropping an NFT. It modifies two components, UnlockableContainer.vue and UnlockableLoader.vue, to handle the new functionality. The changes include adding a countdown timer, updating the UI text and layout, and providing a Twitter sharing link for users to share their success.

Jarsen136 · 2023-06-16T17:50:58Z

Interesting, the build always failed.

I guess it's related to this Merge #6201
There is the same error https://github.com/kodadot/nft-gallery/actions/runs/5281682251/jobs/9555596775

Jarsen136 · 2023-06-17T17:58:15Z

I guess the failed error is related to some wired build cache because it builds successfully on my self-deploy env.

Preview env:
https://issue-6252--thriving-bunny-03a5e8.netlify.app/stmn/unlockable?redesign=true

preschian · 2023-06-18T07:50:31Z

I guess the failed error is related to some wired build cache because it builds successfully on my self-deploy env.

on cypress/e2e should be fixed with this #6265
on netlify, I think error on their side at that time. seems like fixed for now

roiLeo

i18n
redesign

✅ otherwise lgtm

components/collection/unlockable/UnlockableLoader.vue

exezbcz · 2023-06-18T09:42:02Z

Hey, hey, I have a few changes.

First, I would change the copy; the first one I gave you must be corrected.
Before: "Get ready for the big reveal! Your NFT will be visible in 30 seconds."
After: "Get ready for the big reveal! Your NFT is visible now."

bold: 30 seconds, visible now

let's make the counter dynamic so that it will change every second. 29,28,....
It will be good if you can share your success on Twitter in the waiting time - that means the share link will be visible even if you are waiting for the nft to be ready. @vikiival said it is possible to display the image you have selected in the tweet. The link in the tweet will redirect to the unlockable page. Please let me know if I am wrong.

Thanks!

Jarsen136 · 2023-06-18T13:27:28Z

It will be good if you can share your success on Twitter in the waiting time - that means the share link will be visible even if you are waiting for the nft to be ready. @vikiival said it is possible to display the image you have selected in the tweet. The link in the tweet will redirect to the unlockable page. Please let me know if I am wrong.

Thanks!

I have explained the reason why we could not attach the image auto on this comment #6252 (comment)
You could also check this answer https://stackoverflow.com/questions/18321649/twitter-web-intent-to-post-image. We could not display the image auto by the redirect link, except the user attaches it manually.

Except for the changes in the image display, the rest has been completed ✅

exezbcz · 2023-06-18T14:09:11Z

@Jarsen136 ah oki, nevermind, my bad :D

Could you please make the countdown dynamic so that every second it lowers and lowers? It will give the user a more interactive feeling.

I think that the cross has disappeared

or is it just me? I am opening it through the link
issue-6252--thriving-bunny-03a5e8.netlify.app/stmn/unlockable?redesign=true

I believe that is the last thing.

Jarsen136 · 2023-06-18T14:32:43Z

Could you please make the countdown dynamic so that every second it lowers and lowers? It will give the user a more interactive feeling.

The minting time is estimated, which means it's not equal to 30 seconds or a specific number.

I think that the cross has disappeared

It's related to the icon display on the self-deploy preview env. After merging this PR, I bet the cross icon will be back as usual.
I have tested it on my local env.

exezbcz · 2023-06-18T15:59:20Z

The minting time is estimated, which means it's not equal to 30 seconds or a specific number.

Yes :D I wanted to make it an actual countdown, not a still number. It's better for the user. I know it stays the same for the minting time etc.

It's related to the icon display on the self-deploy preview env. After merging this PR, I bet the cross icon will be back as usual.
I have tested it on my local env.

oki nice!

Jarsen136 · 2023-06-18T16:29:47Z

The minting time is estimated, which means it's not equal to 30 seconds or a specific number.

Yes :D I wanted to make it an actual countdown, not a still number. It's better for the user. I know it stays the same for the minting time etc.

Sorry, but I do not think it's a good idea to make it a countdown. For example, if we set the estimated time to 30s, the minting may be finished in a time longer than 30s, in this case, the number would change from 30 to 0 seconds and stay at zero, then the user may feel more confused. WDYT?

exezbcz · 2023-06-18T16:32:16Z

@Jarsen136 yes, agree, but we set the 30s, so there is a really high probability that it's going to be finalized.

Jarsen136 · 2023-06-18T16:34:21Z

@Jarsen136 yes, agree, but we set the 30s, so there is a really high probability that it's going to be finalized.

Alright, let me make a countdown for it.

exezbcz · 2023-06-18T16:36:12Z

@Jarsen136 Yes, if it wont work well in the future :D my fault

Thanks, sir!

Jarsen136 · 2023-06-18T17:08:51Z

@Jarsen136 Yes, if it wont work well in the future :D my fault

Thanks, sir!

You're welcome. The countdown should work now. Please check it.

vikiival

translations otherwise oki

components/collection/unlockable/UnlockableContainer.vue

components/collection/unlockable/UnlockableLoader.vue

codeclimate · 2023-06-19T10:32:36Z

Code Climate has analyzed commit 57fcaee and detected 0 issues on this pull request.

View more on Code Climate.

prury · 2023-06-22T12:33:25Z

I'm not testing this one since the redesign variable already got removed and @exezbcz has thoroughly tested

feat: Follow up for success drop notification

f4f1c7b

Jarsen136 requested a review from a team as a code owner June 16, 2023 17:06

Jarsen136 requested review from preschian and roiLeo and removed request for a team June 16, 2023 17:06

reviewpad bot added small Pull request is small waiting-for-review labels Jun 16, 2023

Jarsen136 added 3 commits June 17, 2023 01:12

fix: trigger redeploy

19640f5

trigger deploy

b0e4153

deploy

2e1e740

fix: twitter text

f7d5fa6

Jarsen136 requested a review from exezbcz June 17, 2023 18:00

preschian approved these changes Jun 18, 2023

View reviewed changes

roiLeo approved these changes Jun 18, 2023

View reviewed changes

components/collection/unlockable/UnlockableLoader.vue Outdated Show resolved Hide resolved

components/collection/unlockable/UnlockableLoader.vue Outdated Show resolved Hide resolved

fix: i18n

684993f

fix: twitter url

bb9175e

Jarsen136 and others added 5 commits June 19, 2023 00:42

feat: 30 seconds countdown while minting

c6869aa

Merge branch 'main' into issue-6252

a7dc209

fix: eslint

ece15fc

fix: countdown gap

f14982b

fix: eslint

21f543a

exezbcz added the S-visual-ok-✅ label Jun 18, 2023

vikiival requested changes Jun 18, 2023

View reviewed changes

components/collection/unlockable/UnlockableContainer.vue Outdated Show resolved Hide resolved

fix: translation

98951dd

Jarsen136 requested a review from vikiival June 19, 2023 02:01

vikiival reviewed Jun 19, 2023

View reviewed changes

components/collection/unlockable/UnlockableLoader.vue Outdated Show resolved Hide resolved

fix: single quotation

57fcaee

vikiival approved these changes Jun 23, 2023

View reviewed changes

vikiival merged commit c6e2b82 into kodadot:main Jun 23, 2023

This was referenced Jun 28, 2023

beta update #6350

Merged

release update #6351

Merged

beta update #6357

Merged

release update #6358

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Follow up for success drop notification #6256

feat: Follow up for success drop notification #6256

Jarsen136 commented Jun 16, 2023 •

edited

Loading

kodabot commented Jun 16, 2023

netlify bot commented Jun 16, 2023 •

edited

Loading

reviewpad bot commented Jun 16, 2023

Jarsen136 commented Jun 16, 2023 •

edited

Loading

Jarsen136 commented Jun 17, 2023 •

edited

Loading

preschian commented Jun 18, 2023

roiLeo left a comment

exezbcz commented Jun 18, 2023

Jarsen136 commented Jun 18, 2023

exezbcz commented Jun 18, 2023 •

edited

Loading

Jarsen136 commented Jun 18, 2023

exezbcz commented Jun 18, 2023

Jarsen136 commented Jun 18, 2023 •

edited

Loading

exezbcz commented Jun 18, 2023

Jarsen136 commented Jun 18, 2023

exezbcz commented Jun 18, 2023

Jarsen136 commented Jun 18, 2023

vikiival left a comment

codeclimate bot commented Jun 19, 2023

prury commented Jun 22, 2023

feat: Follow up for success drop notification #6256

feat: Follow up for success drop notification #6256

Conversation

Jarsen136 commented Jun 16, 2023 • edited Loading

PR Type

Needs Design check

Context

Did your issue had any of the "$" label on it?

Screenshot 📸

Copilot Summary

🤖 Generated by Copilot at f4f1c7b

🤖 Generated by Copilot at f4f1c7b

kodabot commented Jun 16, 2023

netlify bot commented Jun 16, 2023 • edited Loading

✅ Deploy Preview for koda-canary ready!

reviewpad bot commented Jun 16, 2023

Jarsen136 commented Jun 16, 2023 • edited Loading

Jarsen136 commented Jun 17, 2023 • edited Loading

preschian commented Jun 18, 2023

roiLeo left a comment

Choose a reason for hiding this comment

exezbcz commented Jun 18, 2023

Jarsen136 commented Jun 18, 2023

exezbcz commented Jun 18, 2023 • edited Loading

Jarsen136 commented Jun 18, 2023

exezbcz commented Jun 18, 2023

Jarsen136 commented Jun 18, 2023 • edited Loading

exezbcz commented Jun 18, 2023

Jarsen136 commented Jun 18, 2023

exezbcz commented Jun 18, 2023

Jarsen136 commented Jun 18, 2023

vikiival left a comment

Choose a reason for hiding this comment

codeclimate bot commented Jun 19, 2023

prury commented Jun 22, 2023

Jarsen136 commented Jun 16, 2023 •

edited

Loading

`🤖 Generated by Copilot at f4f1c7b`

`🤖 Generated by Copilot at f4f1c7b`

netlify bot commented Jun 16, 2023 •

edited

Loading

Jarsen136 commented Jun 16, 2023 •

edited

Loading

Jarsen136 commented Jun 17, 2023 •

edited

Loading

exezbcz commented Jun 18, 2023 •

edited

Loading

Jarsen136 commented Jun 18, 2023 •

edited

Loading