rmx-party/choodle

a simple mobile-first doodling app that publishes to the blockchain

Choodle

Draw onchain!

Choodle is a simple mobile-first doodling app that publishes to the blockchain. By enabling creative expression and ownership, Choodle seeks to bring the advantages of web3 technologies to typical users without friction.

Table of Contents

• Features
• Architecture overview
• Developer workflow
• Deployment
• Contributing
• License
• Links

Features

Interactive canvas

• Optimized for drawing on mobile touchscreens
• "Undo" functionality to remove last line stroke from canvas
• Text-based prompt for drawing, updatable via CMS (Sanity)

Image saving

• Ability to save a black-and-white, aliased image with a 3:4 aspect ratio
• Image saved with unique browser ID

Image sharing

• Native sharing via "share" button allows user to save image, share via messaging application of choice, etc.

Architecture overview

Choodle consists of three main parts: the progressive web app client, a Sanity Studio instance, and the smart contract for holding a collection of Choodles as on-chain ERC721 tokens.

• frontend: built with SvelteKit.
• choodle-cms: a Sanity Studio application for viewing stored choodles, and static content for the interface.
• contracts: the smart contract that holds the collection of choodles.

Developer workflow

frontend

To use the web client, run pnpm dev in the frontend/ directory, and connect to it on [http://localhost:5173/]

choodle-cms

To use Sanity Studio, run pnpm dev in the choodle-cms/ directory, and connect to it on [http://localhost:3333/]

contracts

We use Hardhat for building and testing smart contract code, and OpenZeppelin

Deployment

Use hardhat tasks to deploy smart contracts to local / testnet / mainnet as needed. We host the PWA and sanity client on Vercel, which has an easy configuration for automatically deploying Sveltekit based on repo updates.

Contributing

If you'd like to contribute to this project, please follow the steps below.

1. Fork the repository
2. Create a new branch: git checkout -b feature-name
3. Make your changes and commit them: git commit -am 'Add some feature'
4. Push to the branch: git push origin feature-name
5. Submit a pull request

License

This project is licensed under the MIT License.

Links

Contact

• Email: [email protected]
• Website: choodle.xyz
• Twitter: @choodlexyz
• Instagram: @choodlexyz

Friends

• RMX
• FWB FEST 2023

choodle's Issues

Remove grayscale & appearance of blur while drawing

Criteria

When user is drawing on the canvas, the lines should not appear blurry or gray. Remove or minimize grayscale on the lines. Drawing should reflect minted output with highest fidelity possible.

Tasks

• to check first: can we remove grayscale altogether (browser might be automatically doing it)
• refresh canvas drawing right after user lifts finger
• implement blitting to reduce flicker (might be that we don't have to do it)

[UI] Keep placeholder buttons within 2 rows max

Criteria

This seems to be the case when I test mobile viewports on my desktop, but on mobile the canvas buttons are filling up 3 rows. As a rule, let's maintain the placeholder buttons within 2 row, max. We can bring down the font size if needed.

Tasks

• if needed, bring font size down to 1rem (16px)
• limit button layout to no more than 2 rows

Visual Reference

what it looks like on iPhone safari
iPhone Xs
iOS 16.5
Browser: Safari

preferred layout - as seen via desktop with mobile viewport

idea: chatbot for smart contract ops

set up a chatbot / chat app for dev/security team to monitor sensitive wallet accounts and smart contract related activities. should be useful for debugging, catching and mitigating security incidents, moderating user content, etc.

As a PM, I want to see specific analytics, so I can track KPIs

Criteria

Set up basic Vercel analytics package to enable standard usage data.

Tasks

• Set up vercel analytics
• Set up Google Analytics: https://tagmanager.google.com/#/container/accounts/6139134545/containers/136998705/workspaces/2
  • Log into GA: http://analytics.google.com/analytics/web/
  • See Google Tag scripts in the comments below
• Comment here what the basic package includes
  • If needed, pair with product team to determine which items to enable
• Assess and identify additional features required for MVP analytics

Notes on measurements to start:

source of truth: tracking via Choodle Product in Notion

• wallet address account
• wallet balance
• what they used to login (email, google, etc.)
• device?
• browser?
• count daily active users
  • over time
  • how many are returning users
• run timers: track time inside workflow
  • end-to-end
  • in canvas only
  • in mint flow
• count button clicks
• real-time user stats (tbd what that would inform)
• count link shares
• count external link clinks (how many accessed via a shared link)
• count mint %: how many mint/draw
• did users abandon?
  • where did they drop off (in canvas, before/during mint)
• size of choodles
  • minted vs. non-minted

[Bug] Dots gesture does not work consistently

When drawing a dot (tapping canvas area once), a dot only appears about 60% of the time.

[Function] User selects redo button to restore the most recently removed change

Criteria

Given that User has selected the undo button to remove a drawing action, they can select the redo button to restore that most recently removed change. User can continue to select redo from the most recently removed to the last removed action.

Tasks

• selecting redo restores most recently removed
• continues to restore up to the last removed action
• ensure it behaves well on mobile

Fix full canvas and show all buttons on screen

Describe the bug

When revisiting the canvas on safari browser, the top buttons are cut off and I am not able to view or select them. Canvas appears to be longer than my viewport. Maybe my screen height (812px) or the safari address bar is related.

To reproduce

1. Open choodle.xyz on mobile safari.
2. while keeping the choodle tab open, close the safari app session via swiping up
3. Re-open safari and view the choodle tab

Note: reproduced on iPhone by Paige, Steven, and Emmett

Context

Video

RPReplay_Final1687476897.MP4

Screenshots

Smartphone (please complete the following information):

• Device: iPhone XS
• OS: 16.5
• Browser safari

chatbot

set up a slack chatbot/app to show us all the new (and updated) NFTs from our contracts. might be nice to make this generic and configurable for re-use across multiple projects. there might already be an implementation available for use but if. not it should be a small project to scaffold together and beneficial to the product team and/or community.

Automate sending users MATIC

Feature request

Can we sponsor or automate sending MATIC to new wallets?

Details

Is your feature request related to a problem? Please describe.
To refine the ux flow of user needing MATIC to complete their mint. User should have MATIC once their account is spun up via Magic, so they can immediately start minting on testnet.
We should assume users will not have MATIC.

Describe possible solutions
- set up a link (button) that automatically sends MATIC to wallets
- utilize white label magic to sponsor transactions for testnet

[tbd] Set up white label Magic

Criteria

If we go with white label magic, we will need to implement a new SDK

[Bug] Canvas buttons shifted down approx 40px from top of screen

Canvas menu buttons seemed to have shifted after latest deployment.

smart contract metadata rendering

the token level metadata should be rendered from the smart contract code, including at minimum the token name, description, and external url, as supported by opensea in addition to the image data itself. ideally these values will be individually editable by the contract admin. include all the default/static info in the smart contract deployment where applicable and attempt to optimize the relevant deployment and minting costs, without adding excessive manual admin chores to the process.

[Pair] Implement post-mint NFT page

Criteria

Add a simple, markdown (no ui-stylization) page for post-mint experience.

Tasks

Page should include:

• link to view minted Choodle NFT on Opensea
• link to return to Choodle canvas
• link to magic wallet
• image render of the minted Choodle (resized in container to fit reasonably on the page) (center-aligned)
• remove Choodle canvas menu buttons (Undo, Redo, etc) from this page\
• include permalink URL Also see #6

[Bug] Fix jagged line showing up while drawing

Was less noticeable with higher resolution; while drawing (particularly from bottom left – to upper right) a jagged line appears to shoot out beyond the contact area (or mouse point).

Seems the mouse point jumps without user input. (Are we using the wrong touch event?)

Build single-page landing with email capture for choodle.xyz

Criteria

choodle.xyz • View design in Figma

A simple, single-page landing with an link out to Google Form email capture will serve as a marketing stop-gap and funnel for collecting potential beta testers and interested users.

The design consists of an image, hyperlinks, and footer copyright. All page elements are centered and asset dimensions should not change based on screen resolution or viewport size.

Tasks

• Implement Choodle logotype and mascot (single image) Choodle–Logo.svg
• AddJoin Waitlist with linkout to https://forms.gle/P6mHbxCyzvieE7gY8 (opens in new tab)
• Add footer copyright with linkout to rmx.party (no hyperlink styling)
• Ensure design remains centered, dimensions preserved

Assets

Storage of minted choodle is 100% on-chain

Criteria

Given a choodle is minted, it should be completely stored on the blockchain with no dependencies. This should be implemented along with minting functionality #3

Note: Cost optimization is out of MVP scope. Also, optimizing image quality/detail/size constraints TBD / out of scope for now.

Tasks

• 100% on-chain storage
• validate files size and potential cost of permanent storage
  - [ ] confirm optimized output, bitmap (likely) v. vector
• placeholder metadata

[Function] User can download image to their device

Criteria

Given has completed a choodle and wants to download the image to their device, so they can share it. A download button on the canvas should trigger the image download

Tasks

• download button on the canvas screen (use same placeholder UI)
  • top row - left: download, right: clear
  • bottom row - left: undo, right: redo
• user can download image to their device
• determine file name for the download. 'choodle' to start

As a user, I want to scroll, so that I can minimize the native browser

Criteria

Add minimum PWA support to have control over native search bar

Currently on Android / Chrome, iPhone / Chrome, and iPhone, Safari browser UI (search bars) do not minimize while choodle canvas is open.

Ideal behavior: first interaction with canvass should trigger native browser UI (search bars) to scroll states where UI disappears or is minimized.

Examples of current states

[Pair] Add loader to log-in screen before Magic UI

Criteria

Add a simple loading ring as a stop-gap between the log-in and magic user interface to prevent user confusion and error.

Task

• Implement loader (Something like this)

Set fixed pixels for canvas

Criteria

Set the constraint of fixed pixels with a 9:16 ratio.

Tasks

• set pixels to start
• reference largest iPhone
  • iPhone 14 Pro Max: 430x932 pt (1290x2796 px @3x)
• set to 9:16 ratio of minimal pixel size
• assess possible adjustments
• review image quality
• remove anti-aliasing from canvas

Set up analytics package

Criteria

To enable basic analytics of the choodle web app to start.

Note: Specific requirements are to be provided and parsed out in separate tickets as needed.

Tasks

• set up basic google analytics package
• set up vercel analytics

Investigate image compression techniques

Criteria

Optimistically, we're looking to reduce image sizes by 80%-90% in order to reduce gas prices and preserve image quality as much as possible.

Techniques to explore

• JPG lossy compression (scale up to retina and the render lossy)
• Turn line-drawing into SVG and specify background as a separate asset
• Explore Moonbirds on-chain compression algorithm
• Gain understanding of different line thicknesses' affects on compression, from thinnest to thickest
• Reduce amount of PNG data required to render (background transparency — erase white pixels and specify color)
• Check alternative formats (besides .png, .svg, .jpg) such as webp and jpg2000 → are these compatible with Opensea
• Experiment with GIFs (2-color palette)
• PNG has its own compression algo; we could alternatively get raw pixel data and pre-compress with a better algo and store that as a PNG (may have to decompress on its way out)
• Send batch transaction of multiple chunked blobs of data (like ETH-FS) to let us avoid having a size limit (may affect cost or speed) → Does magic link support batch transactions?

Deliverables

To be ready for Weekly Team Meeting on Friday, July 7

Goal: Make it easy for product team to make a judgement call on what output gives the best look and feel.

Different line widths and canvas resolutions as benchmark images and run them through different compression approaches to compare image quality of each output.

Numbers are arbitrary, in terms of example sketches, we just need to be able to see variance in output.

Edit Less, Present More

• Pick 3 line widths and canvas sizes (current size, double current resolution, quadruple current resolution)
• Show 3 - 6 example sketches to plug into techniques as stable reference points
• Prepare list of sizes and costs for product team to compare
• Ideally, we'd see bitmap, JPG, PNG, SVG options for same input, respectively (its about the fixed input, variable output for each compression)
• Show cost for Ethereum, Polygon, and any other L2 that may be relevant
• Share visual examples

User sends their choodle to a friend after minting

Criteria

Given User has minted their choodle, they can share the image with a friend via social sharing. This should be enabled through User's native sharing functionality.

Tasks

• unique link per minted choodle (#6)
• button to share: opens native sharing options

Design Reference

[add image, video, or link when applicable]

Loader screen before post-mint page

Criteria

After user confirms mint and is awaiting the mint to complete, they should see a loader screen before the post-mint page. The post-mint page should only load once with no content loading delays.

Tasks

• add loader screen
• trigger screen after user selects confirm on magic
• load post-mint page only when all content is ready (clean transition)

Design Reference

loader screen design to be provided

Track finger position accurately

Criteria

Set tracking of finger position more accurately: sustainable solution

As an eng, I want to configure bugsnag so I can track bugs and errors

implement at the same time as error pages

• #52
• #85
• #53
• #84

Add a share button to the viewChoodle page.

plug in the opengraph image first, then add mobile native "share" button to send the permalink url to frens.

When a user selects share, they should see the image and option to input copy with the permalink URL.

User can send a choodle to their friend directly from the canvas (without mint)

Criteria

Given User has completed a choodle and wants to send it to a friend, User can select send and it will directly open native options to send an image of the choodle. User should then receive it.

Notes:

• this feature does not require minting capabilities
• prioritize enabling native functionality as much as possible
• at first pass, hide the share button for browsers that do not support native sharing API
• start with iPhone os behavior models as a north star

Tasks

• send button on the canvas screen
• enable native sharing functionality
• validate receipt of share
• placeholder title/description for the share

Design Reference

examples of iPhone native sharing ui

Gesturing dots should reflect dots on the canvas

Criteria

Given User is pressing down on the canvas gesturing dots, then a dot should appear on the canvas.

To replicate error
When doodling words, for example, the word 'write,' dot the letter 'i'. It does not immediately appear.

Tasks

• recognize the gesture of a dot and reflect it on the canvas

Additional context

emmett had trouble putting a dot above an i, since it doesn't start drawing on a touch, only on drag. maybe opportunity to micro-refine that with a long press or apple's deep touch stuff or whatever

Design Reference

example of trying to gesture dots on the current canvas

RPReplay_Final1687292893.MP4

Write smart contract

Criteria

Write the smart contract.

Note: This is required to test storing the image on-chain. We are starting with a dummy transaction first, then implementing the smart contract.

Tasks

• write the contract
• include required metadata (tbd)

Design Reference

[add image, video, or link when applicable]

[Function] User can mint their choodle

Criteria

Given User is connected and has a doodle (not a clear canvas), they can mint their doodle. User must select mint button on the canvas to prompt this mint flow.

Note: This would be an immediate prompt after #2 :
user doodles > selects mint > connects wallet > mints doodle

Tasks

• after magic connect, user is prompted to mint, "save permanently"
• user sees transaction cost, fees, and total
• user confirms the transaction
• user sees confirmation screen
• user sees screen of transaction in process
• user goes back to choodle interface

Design Reference

• https://cent.co/ — on mobile
• as a starting point: set up minting as we did for hello world hack
  video: 00:45s - 01:17s

RMXhacks.001-MagicSDK-AA-Test.mov

Decrease line weight for drawing

Criteria

When user is drawing, the user
it should feel similarity to drawing with pen on paper.

Tasks

• 1 or 2 px
• pair with a designer to confirm width

Design Reference

figma

make smart contract upgradeable

context

before we set out to release a customer facing product we want to build in some flexibility for future decisions to be made rather than force ourselves to lock down arbitrary alpha/beta testing choices into the product at the smart contract level. openzeppelin libraries provide a couple options for deploying upgradeable contracts using proxies, which are probably the most straightforward step forward in this direction. there is also a smart contract architecture pattern called diamonds which promises some other advantages in terms of modularity, scaling code beyond the 24KB deployment limit, etc. and might be worthwhile to go ahead and get prepared for.

acceptance

minimum:
our testnet-facing product should use one of the available methods of deploying upgradeable smart contract code so that we can commit at launch time to a fixed contract address while still evolving the implementation over time, and so we can start gaining the relevant devops experience with upgrading smart contracts.

bonus:
we should also establish and document some initial dev and deployment patterns for iterative smart contract development, including auditable team level key handling, policies for how to perform contract admin operations safely (2-person rule etc), principle of least privilege, automating CI/CD, etc.

Launch checklist: final pre-production smart contract review/audit

before we deploy anything to a mainnet we should re check all the smart contract code, key handling, metadata, etc. to make sure we haven't left anything unfinished, incorrect, insecure, un-audited, etc.

this is written as a placeholder for remembering to discuss and specify all those chores before public product release

Set up Magic Connect: User logs in via Magic

Criteria

Given User selects mint, they are directed to connect a wallet address via Magic.

https://magic.link/docs/connect/overview

Tasks

• user sees page to "log in"
• user can log in with email
• user connects via magic link
• user returns to choodle.xyz connected via wallet

Reference

starting point: implement magic connect as we did for hello world hack
video: 00:00s - 00:40s
https://github.com/rmx-party/choodle/assets/71292601/2a05112f-396f-4fc5-84b1-956e720920bb

[Bug] NFT page load failure

Criteria

post-mint NFT page can fail to load NFT data from alchemy - should have error handling and retry logic

Tasks

• implement error handling
• implement retry logic
• loader screen #44 should be a buffer for the user experience while page & data are loading

[Bug] App load failure

Criteria

Initial page/app load fails and requires a manual reload pretty often. this should also have error catching and retry logic

Tasks

first try after-page-load event.

• implement auto reload till the app fully loads
• add error-catching
• add retry logic
• determine if this requires a loader screen for smoother ux

Fix finger-tracking

Criteria

finger-tracking should reflect on canvas more accurately

Choodle name: custom input

Criteria

When user is going to mint on the blockchain, they can first input a custom name for their choodle. Naming is optional and it should have a character limit.

Tasks

• custom input (not required)
• character limit: 20
• default name: "Untitled" — Use this if they do not add a name

Design Reference

To be provided

Investigate Magic Link wallet customization

• Can we reorder the collectibles list to show "Newest first"?
• Can we abstract the wallet collectibles page and turn it into a "My Choodles" gallery?

Hook up magic connect to web app

Criteria

To complete set up of Wallet Connect: log in functionality works, it now needs to be hooked up to the choodle web app.

Tasks

• hook up wallet connect to web app
• validate that log in works

Design Reference

[Bug] Unique URL for post-mint page doesn't load unless user hits refresh

Mint failure user feedback

Criteria

If a mint is failing due to cost overrun, there should be user feedback.

Solution options

a. feedback message to the user
b. automate retry loop while it hangs onto the magic UI
c. automate retry loop while it hands onto a custom loader screen

Design Reference

design will be provided depending on the solution

Remove anti-aliasing

Criteria

lines on the canvas should be aliased. Not blurs, only steps.

Tasks

• remove anti-alias

smart contract role based authorization

in our testnet smart contract(s), we should allow admin access to perform any necessary content moderation and/or correct corrupted data. it is important to apply principle of least privilege when designing smart contract role based access, in particular to segregate the role of the contract deployer from subsequent admin operations, and to minimize the damage that could be done by a rogue operator with any given access level. e.g. a team member should be allowed to fix corrupted NFT data but not burn tokens, upgrade the contract to a new implementation, steal tokens, or update roles / ownership. each level of operational responsibility should be constrained, clearly documented, and revocable. the code should have full test coverage for how these roles are enforced by code and should demonstrate all of the super-admin role administration operations that are present.

see
https://docs.openzeppelin.com/contracts/4.x/access-control
and use the openzeppelin libraries where applicable.

Adjust canvas size

Criteria

Given .5 pixel ratio, adjust the canvas size to fit more accurately within the viewport

Tasks

• does this solve finger-tracking?

Answer questions about gas limits and calculation

Criteria

Open questions transferred from Issue #9

Storage currently works but data is being lost on the way to transaction. In order to address the problem, further investigation is required.

Tasks

Find actionable answers to the following questions. If investigations exceed any reasonable amount of time, abandon and return to team to find a more efficient path forward.

• What is the upper limit on data storage size?
• Whats the max. transaction size or gas limit?
• How is gas estimation system working?

smart contract on chain licensing

smart contracts deployed to public networks (including testnets) should specify source code licenses using the standard comment annotation format

smart contracts deployed to public networks (including testnets) should also specify the product usage and NFT content licenses that are relevant. see https://github.com/a16z/a16z-contracts

refer to product decisions for the specific licenses to specify

Each minted choodle has a unique, shareable link

Criteria

Given a choodle is minted, the NFT has a unique link. This is to allow for sharing of individual NFTs (#5). They should have proper metadata (share card) showing when when shared.

Tasks

• unique URL per NFT
• validate metadata / share cards work -> see #20

Design Reference

[add image, video, or link when applicable]

Implement sharecard Open Graph metadata for all marketing pages including landing

Criteria

Utilizing Open Graph / Twitter Card sharecard standards, ensure any sharecard linked from choodle.xyz is ready for public-viewing

Ideally implemented in tandem with #19.

---

Updated tag info (July 21, 2023) by page:

• Landing page
  Title: Choodle
  Link name: Welcome!
  Image name: no name (hide)

• Canvas
  Title: Choodle
  Link name: Choodle a doodle?
  Image name: no name (hide)

• viewChoodle page
  Title: Choodle
  Link name: Look, it’s a choodle
  Image name: Choodle (but hide the name)

Tasks

metadata for landing sharecard:

• images: view in Notion
• Title: Choodle
• Description: Draw something that lasts forever. Express yourself with lo-fi doodles that are yours to keep, sell, or share.
• url: choodle.xyz
• type: website
• test appearance in different chat apps (twitter, discord, slack, signal, SMS)

Design notes

• being able to share a link associated with their choodle image builds-in an opportunity for the receiver to then choodle themselves.