Stellar Tip - Tipping for content creators and developers

marceloneil

Image header:
Project title: Stellar Tip
Summary: Stellar tipping for content creators and developers

HackNYU Winner (Devpost: https://devpost.com/software/stellar-tip)
Fully Working End to End Demo: https://youtu.be/nLblFEO7jxo

Category: Applications, tools, infrastructure
Goals: Goals after we receive funding:

Add more security to the backend endpoints and databases

Support more creative platforms, such as Code Pen, Stack Overflow

Escrow system so users can tip creators that aren’t’ currently accepting Stellar (like Brave)

Keybase integration

We would use part of the funding to market Stellar Tip to popular creators to reach out to a wider audience and provide exposure to the Stellar Network

Ideally, we would also collaborate with projects within the Stellar ecosystem. This would help kickstart the user base of Stellar Tip

Timeline:

Over the next month: Develop a production ready app and have the extension available on different browser extension stores. Have a tighter integration with content websites, and provide an escrow service so that users can tip those without stellar accounts (like brave). Incorporate community feedback.
Over the next month: Develop a better brand (probably changing the name). Incorporate community feedback.
After one month: begin bringing users onto the platform by a) tipping creators and b) encouraging creators to support and advertise stellar tip as a way to donate. In this stage, funding from the SCF would be particularly helpful with hosting costs + as capital to fund these tips (where the money would go to content creators, many in the stellar community). Hopefully this proves the utility of our extension and allows us to battletest the app with actual users.
After 1.5 months: promote the extension/service through social media channels
After 1.5 months: pursue business development opportunities with content creators to incorporate stellar tip
After 2 months: continue improving and refining the product based on user feedback
After 2 months: consider new integrations and features such as twitch splash notifications, a leaderboard, rewards, etc.

Description:

Stellar Tip is a chrome extension that enables users to tip both crypto and fiat currency to content creators and developers on platforms like Youtube, Twitch, and Github. Utilizing Stellar's powerful decentralized platform, Stellar Tip enables users to instantly send transactions to their favorite creators/developers without being limited to currency or fees.
On these supported platforms, creators and developers will simply specify their Stellar public key in their profile. For these people, Stellar Tip generates a custom tip button that fits the design of each respective platform on each of their pages. When a user clicks the tip button, a popup will appear, prompting the user with additional options such as asset selection and a sender alias name. Furthermore, Stellar Tip enables users to view their previous tips on the Stellar blockchain with links redirecting to the content that they tipped for.
Creators and developers can also download the Stellar Tip chrome extension to view the tips made to them through the Stellar Tip service.
In the backend of our service, we utilize Stellar's SDK to query previous transactions for a user on the Stellar blockchain and generate a URI following the SEP 7 protocol to open the user's favorite Stellar wallet with the transaction information preloaded. At the same time, we store additional metadata about the content creator's information on our own servers. This way, users can look back into their transaction history in the chrome extension and see the specific creator/developer's name, the platform, and an embedded link to look back on their content.

How we built it

To build the chrome extension, we used Google Chrome Extension SDK, HTML, JS, CSS, and jquery to build the custom tip buttons, popups, and transaction history window.
To embed our UI/UX and retrieve the creator/developer's public Stellar key in the various platforms, we implemented web scrapers for Youtube, Twitch, and Github. We also used Google Cloud's Youtube API to easily retrieve the public Stellar key from Youtuber's profiles.
Our backend technologies consisted of MongoDB, Node.js, Express.js, and Stellar SDK. We integrated our own caching mechanism to reduce load and improve speed of retrieving metadata of the creator/developer that the user was tipping.
We integrated Stellar's SDK and URI SDK to generate the transaction operations to be processed in the Stellar network and the corresponding SEP 7 URI. Furthermore, we used Stellar's SDK to retrieve a user's previous transactions on the Stellar blockchain. In order to store additional metadata such as the creator/developer's names and URL to their page, we generate a unique ID for each transaction and store them on the blockchain in the memo field. This enables us to retrieve additional information that we store in our MongoDB database to provide a smooth UI/UX for user's looking back on their transaction histories.

How we help Stellar

By targeting a wide range of creative and open source platforms, we provide a lot of new exposure to Stellar and the community. Hopefully, this will help bring in new users to not only Stellar Tip, but also the Stellar network. Stellar Tip will continue to support more and more platforms. As a result, the Stellar network will reach more users across a variety of platforms. Once those initial seeds of users are planted in each platform, awareness of Stellar Tip will grow, and ideally, the Stellar network will grow with it.

Tipping on Github:

Tipping on Twitch:
Tipping on Youtube:

Try it out:

You can install the extension here: https://chrome.google.com/webstore/detail/stellar-tip/nofpjgocmncmlacjfnniilnckjbhmgdh

Currently it is chrome only and is on the live stellar network. I wish we could offer a testnet version, but there doesn't seem to be any wallets that have testnet and sep7 support. There are a lot of things that we are actively polishing so getting started might be unclear. I think the main thing that is super unclear is the textbox when you open the extension should be filled with you stellar public address that you will be using for tipping (this is to view tipping history, you can still tip without filling this in).

You can only tip users that have a stellar address in their profile bio (we're hoping to change this in the future by adding an escrow service, see our proposal). Here are some example links with people that have tipping enabled to look at:

https://github.com/MichaelxhJiang/stellar-tip/pull/2
https://www.youtube.com/watch?v=nLblFEO7jxo
https://www.twitch.tv/xxravagegunxx

DISCLAIMER: Use at your own risk. This is a proof of concept and has not been audited for any security or privacy flaws. We will never ask for secret keys.

Links:

Fully Working End to End Demo: https://youtu.be/nLblFEO7jxo
Featured on Stellar Podcast: https://podcast.stellar.org/episodes/stellar-news-recap-hacknyu-2020
Mentioned by the Stellar Org: https://twitter.com/StellarOrg/status/1237052546923053058
Devpost: https://devpost.com/software/stellar-tip
Tags: “stellar, tip, rewards, github, youtube, twitch, chrome, web, extension, sep 7”

John

please share installation link I want to install and review it

marceloneil

John You can install the extension here: https://chrome.google.com/webstore/detail/stellar-tip/nofpjgocmncmlacjfnniilnckjbhmgdh

https://github.com/MichaelxhJiang/stellar-tip/pull/2
https://www.youtube.com/watch?v=nLblFEO7jxo
https://www.twitch.tv/xxravagegunxx

DISCLAIMER: Use at your own risk. This is a proof of concept and has not been audited for any security or privacy flaws. We will never ask for secret keys.

John

marceloneil
Only Keybase should be used for payment?
This will limit the users because only Keybase community can be used that I think you need to inject one wallet into your extension.

marceloneil

John Any wallet that supports SEP7 can be used. Adding transaction details for users without SEP7 & QR codes might be a way to let more users in.

I'm not sure what you are suggesting, having the extension itself contain a wallet?

John

marceloneil
if a user must add public key in bio why should I use your program I use my own volts to send assets.
Please take more time and make a better app.
Also, don't use the Stellar logo for branding.

marceloneil

Thanks for your feedback John!

if a user must add public key in bio why should I use your program I use my own volts to send assets.

We wanted to make tipping a much more seamless and simple process. People who aren’t as educated about stellar are able to make tips without having to go through too many steps. Even for an advanced user such as yourself, the extension makes it much easier to a) know if a user is accepting stellar tips (the button will show up) and b) tip them in the fewest number of clicks we could get it down to.

Please take more time and make a better app.

Don't worry, we're still actively developing and improving the extension. We're hoping to get some feedback from the community to better shape our goals, so if you have any concrete suggestions on things you would want to see please let us know!

Also, don't use the Stellar logo for branding.

Thanks for pointing this out! It was an oversight on our part, and it will be fixed very soon.

tyvdh

I love this idea so much, really solid concept! Excited to see this progress.

@John You need to relax and be more positive if you're going to aggressively review submissions. Asking hard questions is great but please be kind. "Please take more time and make a better app." isn't helpful feedback so please refrain from such comments.

nandit123

this is a good idea. About building it, is there some permission you have to take from YouTube so that the top button is available or does it all gets done by the extension?

mufeez-amjad

nandit123 Thank you for your question! We've actually already built it out - the extension doesn't require permission from YouTube, it embeds the button directly on their website.

In the future, we're considering making a button element that you can embed yourself, into your own site for example.