Social Logins FFs: Replace wallet tags with social login tags

[zakhap]

Description

Using Magic Link for social logins on Common make it so Magic creates a "read-only" ethereum address for each social login (based on their email). To avoid adding complex business logic to our user experience, we don't want to display an address that has little to zero use minus as a means of recognizing a user.

Scenario 1: User logging in with a social login that is linked (same email match) The display name should default to their Common display name if they have one, if they don't, we will make their default display name their social login username in the universal top nav.

Thread post listing and Thread post page

• When a user joins a community after logging in through social, we will display a userLoginTag in the place of where we typically show the wallet address tag they interact (create a post, comment, and/or reply to a comment).
• If a user uses another address tied to a community they're a part of, we should move them to that new address and display the same wallet address tag (not the user login tag).

Edit profile

• Add to the current helper copy (see designs): Learn more about how Common handles social logins with "Learn more" linked to a wiki page explaining Magic Link.
• In Edit profile, we will display the rightful addressTag depending on the way the user logged in.

Scenario 2: User logging in with a social login that is not linked (no email match) This is equivalent to user creation—and we will automatically make the user's display name the one in their Discord, Twitter, GitHub, and/or email address.

Thread post listing and Thread post page

• If this user joins a community, it will be tied to the social login (Magic address). If they interact (create a post, comment, and/or reply to a comment), we will displace the social userLoginTag in the place of where we typically show the wallet address tag.

Edit profile

• Add to the current helper copy (see designs): Learn more about how Common handles social logins with "Learn more" linked to a wiki page explaining Magic Link.
• In Edit profile, we will display the rightful social addressTag.

Designs

userLoginTag

These tags appear next to display names in thread posts and thread post listings, replacing showing Magic-generated "read-only" addresses.

Thread feed

Thread post page

addressTag

These tags appear in the Edit profile page where we show all the linked addresses a user has. Instead of showing an address, we will show the same tag with the community icon, their social login username, and the addition of social icons from Phosphor (Twitter/Filled, GitHub/Filled, Discord/Filled, EnvelopeSimple/Regular, and Wallet/Regular).

Figma designs: Components and Patterns / Tags

Engineering Requirements

• The Widget route should return a TODO response.

Acceptance Criteria

[meeshlin]

Ticket description added!

@jnaviask @MuonShot @zakhap @dillchen

[zakhap]

This has been bounced bc we don't have verified socials.

Blocked on: Magic Signatures from FE