Offchain profile creation flow

[exezbcz]

here we go, issue 2/3

Design

• updated in figma handoff, profile page https://www.figma.com/file/JXNtryaNYhY0XJNArzvPQx/Handoff?type=design&node-id=2116-13786&mode=design&t=6RceWyPJQXvtFsvj-11
• all modals have same modal structure as we already have
  • top part with heading and close
  • bottom part with action buttons - buttons used are in the component page in figma
    
• this flow will be displayed for a first time visit on the new profile
• then it will be only hidden under the "create profile" or "edit profile" (only the modal where you specify name etc will be displayed)
• I'm unsure if signing is needed here; if yes, replace the loading modal with signing one.
• modals are slightly wider than our usual ones, if the screen width becomes less than 448 (modal width) + side margins -> modal becomes full width

let's have a look on the flow:

Flow

• see the flow chart

Starting modal

here you are presented with the announcement that a new profile is here and you can set it up

• will display only on the first visit of the new profile page and when you will click "create profile" (you did not create it yet)
  

Choose setup

after you click create profile, you will be presented with two options

• Farcaster quick import
• Edit existing profile (changed it to "start fresh" now)
  

clicking farcaster will probably redirect you to warpcast auth, from there you can be redirected back to our profile creation

• meanwhile, add loader to the farcaster button

Clicking Start Fresh will get you to the fill info modal directly

Setting profile

• Important is the address on top, as we would have more accounts from more chains, which will become more occupied.
• for now, only "substrate account" is there

Depending on flow you selected on the modal before:

farcaster import:

• The modal is almost filled. Depends on what you have on the farcaster
• at most, banner will be missing
• and message on top if it was successful or not
  

starting fresh:

• empty inputs

after you fill out everything you want, click cta button "finish customization". This will get you to next modal

Loading

• as mentioned before, if signature is needed here, replace the modal with the signing type.

Success

• after it was successful, modal is displayed
  
• since no onchain transaction was made, in the top part there is no transaction id nor copy the link of transaction

---

other:
dark mode modals if they are unusual, they are on top in figma

thanks!

[Temidayo32]

This is an interesting feature. I will like to work on it.

[Temidayo32]

Then, also I would think this issue is awaiting this: #9873

[exezbcz]

@Temidayo32 Hello, I appreciate your interest, I prefer to keep this issue reserved for internal dev

[kodabot]

ASSIGNED - @daiagi 🔒 LOCKED -> Thursday, April 18th 2024, 20:05:03 UTC -> 36 hours

[kodabot]

ASSIGNMENT EXPIRED - @daiagi has been unassigned.