Profile v3 - main UI

[exezbcz]

going offchain - partially

Design

• updated in Figma, page profile v3 : https://www.figma.com/file/JXNtryaNYhY0XJNArzvPQx/Handoff?type=design&node-id=2116-13786&mode=design&t=3ECZpbp3kGl9oWOO-11
• main difference is the top part, bottom one (nft previews) stays the same
• extended with profile picture, banner, follow function, bio, different stats
• Introduced 14px font size—finally, the time came to use this size—sometimes 16px is just too big, and 12px is just too small.
• look for font sizes - for example in the stats section, different sizes than we are used to are used

letsgo

Banner and profile picture

• there is banner of size 1440x360 - i guess 360px will be the maximum height
• on top of the banner, there is 144x144px big profile picture (padding is 10px - the actually img is only 124px big)

the rest is underneath

Top part

• lets start with artist name - this will be the offchain name, if the offchain name is not set, it will show the address

under are buttons

• follow - states of the follow button are in the component section
• wallet and links - new one, it consists of wallet address and links the user predefined
  
  • copy button, transfer (redirect to our transfer page with prefilled address, subscan, subID)
• share button
  

Bio

• limited to 200 characters (in the edit profile modal - issue will be linked in the tracking issue)
• 14px font size

Followed by

• this will show people that follow the account, and you follow them - same as Twitter, Instagram, etc.

Stats

• bigger this time, bigger font size, different data

then divider and the rest stays the same, now for different states

Different views

Visitor

• visitor will see follow button and the things you defined in the profile creation
  this is how empty profile looks like (user did not created the offchain profile yet)
  
• placeholder banner, placeholder profile picture, no bio

Owner

this is how the owner will see the empty account

• instead of the follow function, there is "create profile"

if the profile is already created, there is edit profile

Mobile

stacks up the components

Dark mode

• following the rules of our color system and color pairs
  

Components section

all useful components found here

issue 1/3

[kodabot]

ASSIGNED - @daiagi 🔒 LOCKED -> Wednesday, March 27th 2024, 19:44:52 UTC -> 36 hours

[kodabot]

ASSIGNMENT EXPIRED - @daiagi has been unassigned.

[exezbcz]

@daiagi few things i realized now

as the default (empty) profile picture, we can use this from from polkadot address
this type:

and here is the follow button prototype. I had issues recording

Screen.Recording.2024-03-28.at.19.00.36.mov

[daiagi]

OK @exezbcz

Thanks for the update , will make the needed changes

[daiagi]

hi @exezbcz

almost done
but font-awesome doesn't have farcaster icon
where did you get it from?

[exezbcz]

@daiagi we use one in success modal - afaik its imported from somewhere

[yangwao]

Profile off-chain worker implementation

• banner
• avatar
• profile links