exezbcz commented 1 year ago

Tasks:

Abstract

design available in handoff file: https://www.figma.com/file/JXNtryaNYhY0XJNArzvPQx/Handoff?type=design&node-id=4218%3A2062&mode=design&t=VM0ypGEgcdUaSoT1-1
this ui should enable migration capabalities
consists of 4 pages - home page, overview, signing, congratulations message
many parts similar to the admin panel, signing modals, modals in general, drop page (cards).
as in the admin panel issue, it's quite big, please use the developer option in Figma - you easily see the padding etc.

Tasks:

Now for the design:

Home page

Top part

introduces into migration, shows important parts - like the route etc.

source and destination

same as in teleport v2 (#7363)
gives the option to choose whether migrating from Polkadot assethub or Kusama asset hub. The default is polkadot.
The source is Kusama, or if its more clearer maybe rmrk2, It is up to the devs

Faq

I have decided to put faq on the top there
migration is pretty hard to understand for new users. This will hopefully ensure the users are not confused about what is happening.
states are on the left:
please note that the height will be taken from the card with the most text - other cards will inherit the height (that means cards are consistent and won't jump around)
if you would like to add anything as an explainer to the cards, feel free to comment.

Selection

under the full-width divider, there is a contextual message with the account you are connected with, and then there is a little tooltip section.
there is also a state for when you are not connected.
tooltip copy for that as well.
the selection is filled with drop landing page-like cards.
cards have a hover effect, and the migrate button itself has one as well.
you can try it yourself in the prototype next to the card component.

Ready for Migration

Here, you will be able to view collections that you own.
As the creator or owner of a collection, you can initiate migration here. Keep in mind only items owned by you can be migrated at this stage. You'll need to pre-sign items owned by others to allow individual migrations.
if there is no collection to be migrated from this part, this part is simply hidden.

Waiting for your action

here are items from collections you don't own, but the collection was migrated and initiated - giving you the option to migrate as well.
Displayed here are individual items that you own from collections that have been migrated. Ensure you're up-to-date by migrating these pieces right away. Please note you can only start the migration once the collection owner initiates it.

migration not possible

pretty sure there will be some collections that you won't be able to migrate. For this we have the last part under divider.

small divider 🍡

Review

you will get there by clicking any button with label "migrate...." on the cards
the UI divides here to migration of the mentioned collection or only the items inside.

Migrate collection

top part review - sign (same as in the admin panel)
contextual message ( connected with)
then there is migrate collection
there is picture of the collection, name and message that the name will stay the same.
divider, and now for the harder part.
there is row that shows "items available for migration"
little message:
- Please note that at this stage, only items you own can be migrated. For other items, you will need to pre-sign them to allow others to follow your migration initiative.
If I understand correctly, you cannot migrate items you don't own. Therefore, you pre-sign for others and give them access to follow your migration once they decide to do so.
is that correct @vikiival ?
then there is route explained
divider and then costs, those are also similar to the #7241
collapsable fee breakdown, divided into network fee and then existential deposit, and then kodadot fee (if there will be any..)
then a row of estimated total fees.

bottom part

here is acknowledgment before you proceed, its irreversible and you should know it.
disabled button till you don't check the checkbox

Migrate items

missing available items and the info part.
only 2 items max are shown and then there is text of how many items are left.
- 10 more items from the same collection

Signing 🚥

new part, will be the same as with auto teleport (but in modal)
the reason everything is on its own page and not in the small modal is simply the space and no way of accidentally closing it and losing the progress. It's quite a lot of transactions if you decide to migrate 1k collection.
it's a step signing.
here are possible events of the small sub-part
the parent section changes based on whether its in progress, its done, or inactive, changes between three states.
the grey 1/4 circle is a loading wheel, please match the style as much as possible.
The same icons are used for the subsections. Every step is in this case one signed transaction.
let me give an example.
the contextual message is in this case what is changing.
when you cancel signing, you have the option to retry (it could say failed or canceled)
after you finish all of this long signing, you can click on the button to finish (it's not automatic because in this signing there are also transaction links (as you can see above)

Congratulations

not only you have made it to the end of this issue, but the user successfully signed all the transactions and migrated.

graphics, copy, and buttons to view the collection and to share on Twitter. Copy for the tweet can be done ad hoc.
I will create the graphics for dark mode as well, don't worry!

End

if you have any questions, feel free to ask

exezbcz commented 1 year ago

I will probably divide it into smaller tasks later today.

vikiival commented 1 year ago

If I understand correctly, you cannot migrate items you don't own. Therefore, you pre-sign for others and give them access to follow your migration once they decide to do so. is that correct @vikiival ?

Yup just checking with @jsidorenko if pre-signatures can be made in batch or you need to click 200 times sign. In the later option I would opt in for other solution

Link to migrator

exezbcz commented 1 year ago

ready guys 👀 cc @kodadot/internal-dev

Tasks:

STUDIOUS-WOLF commented 1 year ago

is this issue in hacktober fest if yes I would like to complete some tasks?

exezbcz commented 1 year ago

@STUDIOUS-WOLF Hi! Unfortunately, no. However, you could check for other issues in the repository. The frontend for this issue is mostly finished. We are now waiting for the backend afaik

vikiival commented 1 year ago

We are now waiting for the backend afaik

Backend is done sir 🥹. Everything tested on friday. Cc @preschian

exezbcz commented 1 year ago

Backend is done sir 🥹.

letsgoooo yeah, that is why i put the "afaik" :D

yangwao commented 1 year ago

so meanwhile done 👀

preschian commented 1 year ago

so meanwhile done 👀

oh, small things, there is no menu/button to migrate page

yangwao commented 12 months ago

7560 done as well?

preschian commented 11 months ago

Migration UI - 1 - Home page #7560 done as well?

oh, leftover related to #8197. I will pick that up

preschian commented 11 months ago

followup issue: https://github.com/kodadot/nft-gallery/issues/8206

prury commented 11 months ago

I think once we have the public working version of migration, we should ask everyone on the team to test it at least once, I'm specially concerned about the possibility of someone burning their NFTs on the source chain and not being able to mint them on the destination chain, and also because we can find some yet to be discovered bugs along the runway.

preschian commented 11 months ago

I'm specially concerned about the possibility of someone burning their NFTs on the source chain

good point, should we disable auto burn? because once burned we can revert that right? to reduce the risk

replace burn section with info that tell the user don't forget to burn the old collections?

prury commented 11 months ago

I'm specially concerned about the possibility of someone burning their NFTs on the source chain

good point, should we disable auto burn? because once burned we can revert that right? to reduce the risk

replace burn section with info that tell the user don't forget to burn the old collections?

this or a button somewhere after they had minted the new items, but with disclaimer asking user to verify if new collection have been properly minted on new chain

or make burning items the last step, with link to the new collection asking user to verify if items were properly minted

vikiival commented 11 months ago

or make burning items the last step, with link to the new collection asking user to verify if items were properly minted

Yup burning should be the last step. It should verify that it was minted on the destination chain.

preschian commented 11 months ago

this or a button somewhere after they had minted the new items, but with disclaimer asking user to verify if new collection have been properly minted on new chain

or make burning items the last step, with link to the new collection asking user to verify if items were properly minted

@exezbcz @prury just want to make sure. Regarding this, we need to adjust some UI, right? On Canary, I already put the burn on the last step before going to the congrats page. The easiest solution is to put the button link to the old collection on the congrats page. And user can burn on that page, since we had this button on collection page

roiLeo commented 11 months ago

I think burn/destroy collection for rmrk2 is not yet implemented

vikiival commented 11 months ago

I think burn/destroy collection for rmrk2 is not yet implemented

Any blocker there?

roiLeo commented 11 months ago

I think burn/destroy collection for rmrk2 is not yet implemented

Any blocker there?

I think I'm missing a release on minimark for types https://github.com/kodadot/packages/commit/aecaacfada03f9797036cc07a159eabd2e39e38d

cf https://github.com/kodadot/nft-gallery/issues/8002#issuecomment-1816528008

vikiival commented 11 months ago

Minimark was released 12 days ago.

https://www.npmjs.com/package/@kodadot1/minimark

roiLeo commented 11 months ago

Minimark was released 12 days ago.

https://www.npmjs.com/package/@kodadot1/minimark

yup but without this https://github.com/kodadot/packages/commit/aecaacfada03f9797036cc07a159eabd2e39e38d

yangwao commented 11 months ago

Regarding this, what is outstanding for final burn?

https://github.com/kodadot/nft-gallery/pull/8280#issuecomment-1835985956

preschian commented 11 months ago

Regarding this, what is outstanding for final burn?

#8280 (comment)

round of team testing

need help everyone to test the features on Canary https://canary.kodadot.xyz/migrate. don't forget to open the console while testing cc @kodadot/internal @kodadot/internal-dev

open design issue to define final burning phase where the user verifies if content was burned PR for burning

Can we put this on the congratulations page? So it won't block the testing. on the first phase of testing, save URL on the congrats page, once PR for burning is merged, visit the congrats URL again to test the burning parts

prury commented 11 months ago

Regarding this, what is outstanding for final burn?

#8280 (comment)

i think @exezbcz and @vikiival were discussing the final burning part

vikiival commented 11 months ago

Regarding this, what is outstanding for final burn?

With @exezbcz we iterated to the point that we can leverage the beauty of immutable data -> Therefore:

We fetch nfts from both chains. Check if metadata hashes are matching -> as they should because it is migration. for those who match we can safely burn them .

exezbcz commented 11 months ago

@vikiival so far like this

its updated in the figma file https://www.figma.com/file/JXNtryaNYhY0XJNArzvPQx/Handoff?type=design&node-id=4669-6559&mode=design&t=4aU3fi9XZLeGOpWb-11

will write better description tomorrow

preschian commented 11 months ago

will write better description tomorrow

@exezbcz any updates on this?

exezbcz commented 11 months ago

@exezbcz, any updates on this?

Sorry for the delay! I jIt's for the burning part, so it's not critical. :D

exezbcz commented 10 months ago

continue to ->

https://github.com/kodadot/nft-gallery/issues/8293

kodadot / nft-gallery

Migration UI #7552

Tasks:

Abstract

Tasks:

Home page

Top part

source and destination

Faq

Selection

Ready for Migration

Waiting for your action

migration not possible

Review

Migrate collection

bottom part

Migrate items

Signing 🚥

Congratulations

End

Tasks:

7560 done as well?