The problem Dropfish solves

Giving out web3 rewards, such as tokens or NFTs, for activities done on web2 platforms like social media can be tough. This is because it involves creating wallets, verifying users, confirming reward conditions, and delivering the rewards. Even with a system that doesn't require a wallet and uses an email based walletless onboarding mechanism, it's still tricky because verifying user actions on platforms like GitHub, YouTube, Twitter, Instagram, and TikTok often involves double authentication (Email+OAuth) or manually submitting proof.

To simplify this, we've created a new method using Walletless Onboarding with OAuth Scopes. This makes it much easier to verify and authenticate users, smoothens the shift from traditional web (web2) to blockchain-based systems (web3), and enhances user experience.

Let's take an example. If I'm a YouTuber wanting to give my fans a unique NFT for watching my video, this would usually involve around eight steps on Ethereum/Solana. These steps include downloading a wallet provider like Metamask, creating a wallet, connecting my YouTube account, checking if you're eligible for the NFT, and then authorizing a transaction to mint and transfer the NFT. But, with our new system, we can directly connect with YouTube and verify user actions in a single click.

Behind the scenes, we automatically create a custodial wallet, check your YouTube data via your OAuth login, confirm your eligibility, and then smoothly create and deliver the NFT without you needing to do anything more.

To demonstrate this, we've made a simple no-code tool called Drop.fish. It's an easy-to-use platform that lets creators give rewards to users with just one click, using any third-party login system.

Challenges we ran into

We faced many challenges, such as restrictions in OAuth scopes, slow blockchain finality affecting user experience, and language support limitations. Here's an interesting issue we tackled:

Our project required us to put watermarks on NFT images, but we couldn't save CSS-styled sections of HTML5 canvas as a picture. To solve this, we used Puppeteer, a tool in Node.js. Puppeteer lets us control a headless Chrome browser, load the HTML and CSS, and then take a screenshot. This process effectively turns the styled HTML into an image. We then uploaded this image to an AWS S3 bucket so that it can be embedded into the NFT or shared on social media when the NFT was transferred.

To make our solution work more efficiently and on a larger scale, we used AWS Lambda in Python. This allowed us to perform tasks in a serverless environment, simplifying our work and optimizing resources.

Thanks to Node.js, Puppeteer, and AWS Lambda, we were able to successfully capture CSS-styled HTML as an image, ensuring a watermark on all NFT images and maintaining a smooth and scalable process.