Finish Screen for Payment Link Sharing

[MPSxDev]

Finish Screen for Payment Link Sharing

Description

The screen for sharing payment links needs to be completed. This screen should include options for users to share the payment link via social media, a button to copy the link address, and a code snippet for embedding the link into HTML.

Requirements

• Social Sharing Links: Provide buttons for users to share the payment link on popular social media platforms (e.g., Facebook, WhatsApp, etc).
• Copy Address Button: Include a button that allows users to easily copy the payment link address to their clipboard.
• Embed Code: Display a code snippet that users can copy and paste into their HTML to embed the payment link on their website or blog.

Tasks

1. Design the layout of the sharing screen with appropriate buttons and input fields.
2. Implement functionality for social sharing buttons.
3. Create a copy-to-clipboard function for the address button. (Only Mockup)
4. Generate an HTML embed code snippet that users can easily copy. (Only Mockup)

Figma Reference

You can use the Figma design linked here as a reference, but feel free to use the previously mentioned components as a guide.

Notes

This screen will enhance user experience by making it easy to share payment links across multiple platforms and integrate them into other web content. This is just design, use a fake link and fake code segment.

[Jemiiah]

Hello I'm a frontend developer in web3 I have contributed in previous OD Hacks i have made over 70+ contribution in past OD Hacks I intend in solving this issue with the following approach :

[mimisavage]

I'd love to work on this!

[myspace20]

Can I start working on this?

[Kingsuite]

Is it okay if I take this?

[martinvibes]

Can I take care of this issue? i'm a frontend dev and a blockchain dev please kindly assign :)

[Jemiiah]

Hello I'm a frontend developer in web3 I have contributed in previous OD Hacks i have made over 70+ contribution in past OD Hacks I intend in solving this issue with the following approach :

Step 1: Understand the Screen's Context I will refer to the provided Figma design for consistency in UI/UX elements like colors, fonts, and spacing. The design must align with the platform's visual language while being intuitive for users.

Step 2: Layout Design I will design the screen to include the following sections:

Header:

Title: "Your Payment Link is Ready!" Subtitle: Brief instructions on how to use the sharing options. Payment Link Preview:

Display the link (e.g., https://example.com/payment/12345) in a non-editable text field. Include a copy button next to the link. Social Sharing Section:

Buttons for popular social media platforms like: Facebook Twitter WhatsApp LinkedIn Add icons and labels for easy identification. Embed Code Section:

Show an HTML code snippet in a styled code block. Provide a "Copy Embed Code" button for easy copying.

Step 3: Create Mockups I will design the screen using tools like Figma or Adobe XD. Key elements:

Copy Link Button: A button that aligns next to the payment link preview field. Social Buttons: Circular or rounded buttons with platform-specific colors and icons. Embed Code Box: A scrollable code box styled to look clean and modern.

Step 4: Functionality Mockup Copy-to-Clipboard (Mockup): Include a tooltip that says "Copied!" when the user clicks the copy button. Social Sharing Buttons (Mockup): Design the buttons to visually simulate a share action. Embed Code (Mockup): Display a static HTML snippet (e.g., ).

Step 5: Accessibility Keyboard Navigation: Ensure all buttons are tabbable. Screen Readers: Add descriptive labels for sharing options. Responsive Design: Make the layout adaptable for mobile, tablet, and desktop views.

[Unickhub]

Can I take this issue?

[Benjtalkshow]

Can I start working on this?

[ShantelPeters]

Can I start working on this?

[Michaelkingsdev]

May I pick this up?

[stephanniegb]

I would like to work on this. I’m an experienced frontend developer with a strong background in building pixel-perfect, secure, and responsive web pages. I have worked with various frontend tools and can quickly adapt to new ones. Here are some of my recent projects for your reference: - https://tba-frontend-eta.vercel.app

• https://scroll-transform-recreate.vercel.app
• https://three-js-galaxy-silk.vercel.app/

[MullerTheScientist]

I am a full-stack developer with experience in QA testing and languages like Python, Cairo, Solidity, React, and JavaScript. can i address this task

[chibokaxavier]

Hi, i am Chiboka Emmanuel a full-stack web developer who enjoys creating solutions and applications that look great and work smoothly. I would really love to be assigned this issue and work on this project.

[Yunusabdul38]

I’d like to work on this, and make sure it meets the requirements

[salazarsebas]

My background

As a member of the Dojo Coding community, I have experience in web2 and traditional technologies, as for web3 I have only been working for a few months and I have managed to make a few contributions, however, it is not an impediment for me to do my best in this issue, I will dedicate the necessary effort to contribute to the OSS.

How I plan on tackling this issue

To solve this issue, I will perform the following steps:

• Make the payment link sharing screen.
• Make the screen easy and friendly for users.
• Attach the links so that they can be shared in different social networks.
• Add a button where the address can be copied to the clipboard (only in mockup as indicated).
• Make a section so that the html code can be copied and only need to embed the code.
• Consult the mainteiner for feedback and desired changes.
• Make changes if necessary.

[vestor-dev]

hey sir I'd like to handle this task. i'm a frontend developer with experience i would really love to contribute to your project kindly assign :)

[Kaminar-i]

Mind if I take this issue? i'm new and would love to work on this please assign me

[KevinLatino]

Hello My name is Kevin Latino, and I'm a Frontend Developer and active open-source contributor. I'm a member of Dojo Coding, a thriving Web3 community in Costa Rica. I have experience with React, Next.js, and TypeScript, also I have experience in data fetching and API integrations and I recently won the LATAM Hackathon hosted by Base. I've also contributed to projects in ecosystems like Starknet and Stellar.

I will finalize the payment link sharing screen with a design that includes social sharing buttons for platforms like Facebook and WhatsApp, a copy-to-clipboard button for the payment link, and a mock HTML embed code snippet. This layout will enhance user convenience while maintaining consistency with the Figma design and leveraging TailwindCSS, ShadCN UI, and Radix UI components.

[CtpN3m01]

Can I start working on this?

[Psalmuel01]

I'm Samuel, a proficient web3 frontend developer with experience in ui design. I am that developer that totally obsesses over delivering pixel perfect screens.

I am meticulous about it, and I work very fast as well. My frontend skills are also excellent, and my codes super clean.

I have taken a look at the project, and this is a task I can very well handle. I would maintain styling consistency and accurately deliver all milestones excellently.

I would love to contribute my expertise to this project. Kindly let me.