feat: Build Public UPA (Universal Profile Address) Page

[uchibeke]

This is mostly a frontend task because we noticed we had mostly backend tasks.

Description

We are introducing a new feature, the Universal Profile Address (UPA) page, which serves as a personal hub for users to share their contact information, social profiles, and receive payments. This issue is open to contributions and is worth 2 Hacktoberfest Chimoney Issue points.

Features

• Copy-able Payment Pointer: Users should be able to easily copy the payment pointer. See sample at
• Bank Details: Display user's bank details with a lock icon to toggle visibility (this would be hidden by default and toggling show should require a passcode)
• Social Media Profile Links: Optional fields for linking to popular social media profiles. See sample data
• Portfolio Link: Field for users to add a link to their portfolio.
• Bio Section: A section for users to write a short bio.
• Professional Title: Field for users to add their professional title.
• QR Code: Show a QR code that links to the user's UPA page (current page)
• Contact Form: Click to popup form for visitors to send a direct message to the user. Requires message and Email address of sender.
• Privacy and Other Policies: Links to privacy and other policies. Bottom of page
• Verification Badge: Display verification badge for verified profiles.
• Activity Feed: A section showing user highlights like travel, speaking engagements, etc.
• Theme Switch: Allow users to switch between dark and light themes.
• Pay Now Button: Button to open a payment modal where visitors can enter the payment amount and their email, which will then direct to an external payment page.

Technical Requirements

• Build using Next.js and Material-UI (mui) for a modern, responsive design.
• Ensure the page is SEO-friendly and performant.
• Follow best practices for accessibility and user experience.

Acceptance Criteria:

• All listed features are implemented and functional.
• Responsive design ensuring the UPA page is accessible on various devices.
• Proper error handling and validation where necessary.
• Adequate test coverage.

Contribution Guidelines

• Fork this repository and create a new branch for your work.
• Make sure to follow the established coding standards and practices.
• Create a pull request with your changes and provide a detailed description of the implementation and any additional notes.
• Tag the maintainers for review.

Sample/Mock Data format for the user Profile is:

const user = {
      "meta": {
        "name": "John Doe",
        "email": "[email protected]",
        // ... other existing user meta data
      },
      "upa": {
        "profile": {
          "professionalTitle": "Software Developer",
          "bio": "Passionate developer with a love for open source.",
          "portfolioLink": "https://portfolio.example.com",
          "socialLinks": {
            "linkedin": "https://linkedin.com/in/johndoe",
            "github": "https://github.com/johndoe",
            "twitter": "https://twitter.com/johndoe",
            // ... other social platforms
          },
          "verificationBadge": true,
          "activityFeed": [
            {
              "type": "travel",
              "description": "Traveled to San Francisco for a tech conference.",
              "date": "2023-10-20"
            },
            // ... other activities
          ]
        },
        "payment": {
          "paymentPointer": "$wallet.example.com/johndoe",
          "bankDetails": {
            "iban": "GB33BUKB20201555555555",
            "bic": "BUKBGB22",
            "bankName": "Bank UK",
            "accountName": "John Doe",
            "accountNumber": "12345678",
            "sortCode": "20-20-15"
          },
          "mobileMoney": {
            "provider": "M-Pesa",
            "accountNumber": "0712345678"
          },
          "crypto": {
            "bitcoin": "1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa",
            "ethereum": "0xAb5801a7D398351b8bE11C439e05C5B3259aeC9B",
            // ... other cryptocurrencies
          }
        }
      }
    }

The standard format above can be used by Data Providers to power UPA pages.

For inspiration, see sample profile pages:

• https://link.mobilocard.com/social_profile/Pdx4hPL9RVScNO3UUYpp1TZ75bK2
• https://fynbos.me/adrian
• https://sitch.cards/

Looking forward to your contributions!

Screenshots

No response

Ready to Work?

• I want to work on this issue

[vinfinity7]

assign me this @uchibeke

[uchibeke]

assign me this @uchibeke

Done

[Danimoz]

I want to work on this @uchibeke

[uchibeke]

I want to work on this @uchibeke

Done

[Gudnessuche]

This is cool

[Dejare]

hello ser ✋🏾

[Babsmutini]

Can i also work on this, i have a nice idea on how it should be implemented

[uchibeke]

Can i also work on this, i have a nice idea on how it should be implemented

Yes please. Go for it. Make it modular and the profile data portable because the Frontend should be able to plug into 3rd party user profile/payment info providers and potentially also hosted by users

Happy to provide feedback on your approach, if needed

[uchibeke]

@Danimoz @Babsmutini @Dejare and @vinfinity7

how’s this going?

[Babsmutini]

still on it, I had some bit of unclarity regarding what it meant to do.
Can I relate it to how Linktree is? whereby a user has a profile with all their profile accounts in one place

[uchibeke]

still on it, I had some bit of unclarity regarding what it meant to do.
Can I relate it to how Linktree is? whereby a user has a profile with all their profile accounts in one place

Yes. Like the examples I shared. What is the purpose of this page?

• an easy page that has my payment info
• and also has some of my social info but priority should be payment info

Also, read through each of the lines in the issue. There’s additional insight about what this is and it’s more than just a linktree page since it’s open source, data can be pulled from multiple providers (you don’t have to worry about this) and had payment and KYC built in.

[Danimoz]

Still on it too

[Danimoz]

Please can I use tailwind instead of MUI

[uchibeke]

Please can I use tailwind instead of MUI

Yes. You can use tailwind. Good choice!