Add a "tweet it" and "cast it" button at the end of the flow

s0lness commented 3 months ago

We currently encourage users to tweet about their experience with the application. We should add a button to Tweet on X and Cast on Farcaster at the end of the user flow

"I got my vibes checked on Hylé ✅ vibe.hyle.eu" +With the final picture of the user

Add a copy button to copy the picture and the text to copy-paste it yourself on farcaster/twitter

alexture commented 3 months ago

Note: « cast it » rather than « Farcaster it ».

Otherwise: yep :)

alexture commented 2 months ago

merge with #27 : add a « copy to clipboard » button as well

armsves commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Old time web2 dev now into web3 for a bit more than 1 year

How I plan on tackling this issue

I have done the text tweet but never done the picture tweet and i would love to try to do it and implement it with the actual project, the url to post a text tweet is ready, passing an image should be possible as well i think the best way would be to have a button that would pass the image and a premade text to twitter/farcaster, if possible

NueloSE commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

A frontend developer with few years of experience using typescript and javascript.

How I plan on tackling this issue

steps to handle task

generate a shareable url for sharing tweet and message hold for the above text
set up the html structure
add eventlistener fot the button in step 2
implement copy logic both for text and image to clipboard
test my implementation
style the buttons for better appearance

petersdt commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

can i contribute to this

martinvibes commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

'm a fullstack dev and i have skills in react, typescript, next.js, tailwind, sass, boostrap etc. i would love to work on this i i'm giving the oppotunity

How I plan on tackling this issue

Add Social Sharing Buttons:

Placement: Locate a suitable spot at the end of the user flow to display the sharing buttons. This could be a dedicated "Share Your Vibe" section or a post-experience summary screen. Buttons: Insert two buttons - one for Twitter and one for Farcaster. You can use social media icons or text labels for these buttons.
Pre-fill Tweet Text:

Compose Text: Create a pre-filled tweet message that includes: "I got my vibes checked on Hylé ✅" Link to the Hylé website (vibe.hyle.eu) Image Handling: Integrate logic to automatically include the user's final picture within the tweet. You might need to provide a preview of the tweet with the included image.

Implement Farcaster Sharing:

Cast Option: Add a "Cast on Farcaster" button alongside the Tweet button. Functionality: Clicking the Farcaster button should ideally trigger a native sharing dialog or open the user's Farcaster app with the pre-filled text and image (if supported). Explore Farcaster's developer documentation for their recommended sharing methods.

Add Copy Button and Functionality:

Copy Button: Include a button labeled "Copy" next to the pre-filled tweet text and image. Copy Action: Clicking the "Copy" button should copy both the tweet text and a link to the user's final picture to the user's clipboard. Utilize JavaScript's navigator.clipboard API or similar methods to achieve this.

User Experience Considerations:

Clear Instructions: Provide clear instructions near the buttons explaining their functionality, especially for users unfamiliar with Farcaster. Accessibility: Ensure the buttons and text are visually distinct and accessible to users with different visual abilities. Testing: Thoroughly test the sharing buttons and copy functionality across various devices and browsers.

DiegoB1911 commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Full Stack Developer with two years of experience. I'm also a member of Dojo Coding, where I'm learning new things such as Cairo and Web3. This is my first time participating in an OD Hack, and I'm eager to learn and contribute to new projects.

How I plan on tackling this issue

To solve this problem I would do this: 1: Design the User Interface 2: Implement Social Media Integration 3: Implement the Copy Button 4: Test and Validate

EmmanuelAR commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Heyyy can i work on this? I Emmanuel Software dev from Costa Rica and Dojo Coding

How I plan on tackling this issue

1.  Add Buttons: At the end of the user flow, add two buttons: “Tweet on X” and “Cast on Farcaster.” These should pre-fill a message like “I got my vibes checked on Hylé ✅ vibe.hyle.eu” and include the user’s final picture.
2.  Add a Copy Button: Include a “Copy Text & Image” button that allows users to copy the message and image link to their clipboard for easy sharing.
3.  Test: Ensure both sharing buttons work correctly, pre-filling the message and attaching the image. Test the copy button to confirm it copies the correct text and link.
4.  Deploy: Once everything is working smoothly, deploy the changes and monitor user engagement.

Benjtalkshow commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I’m excited to work on the "Add 'Tweet it' and 'Cast it' Buttons" feature. My name is Benjamin, I have 3 years of experience in frontend developement using nextjs/tyepscript, react etc and I have experience in enhancing user flows with social sharing features to increase user engagement.

How I plan on tackling this issue

Implement "Tweet it" and "Cast it" Buttons

Button Addition: I will add a "Tweet it" button and a "Cast it" button at the end of the user flow.
Predefined Text: The tweet or cast text will include "I got my vibes checked on Hylé ✅ vibe.hyle.eu" and will automatically attach the final picture of the user.
API Integration: I will integrate the respective APIs to ensure smooth posting on X and Farcaster.

Add Copy Button for Manual Sharing

Copy Functionality: I will implement a button that allows users to copy the predefined text and final picture to their clipboard.
Clipboard Integration: The button will seamlessly copy the text and image for users to paste manually into X, Farcaster, or any other platform.

UI/UX Design

Button Design: I will ensure the "Tweet it," "Cast it," and "Copy" buttons are visually appealing and align with the existing UI/UX design.
Responsive Layout: The buttons will be responsive, ensuring they look good and function properly across various device sizes.

Testing

Functionality Testing: I will thoroughly test the new buttons to ensure they work as expected on X and Farcaster.

wraitii commented 2 months ago

Hey @armsves , assigned this one to you.

Please join our TG group for questions: t.me/hyle_org

Hyle-org / vibe-check