Dapp implementation sticker market submission

hesterbruikman commented 4 years ago

Assignment

Develop a dapp that allows creators to submit stickers that Status users can purchase and install for use in Status chat. Design for the dapp is available on Figma.

Stickers are submitted by writing to the contract, details for the contract can be found here

A sample implementation for reference can be found here: https://github.com/status-im/sticker-packs-publisher

Implementation guidance

Please use your own judgement on the best approach. We ask that you consider these guidelines to ease handover upon delivery and any future maintenance needed

Use Javascript and a commonly used framework such as React to implement the UI of the stickermarket submission dapp
Use UI components and components to connect to web3 from open and libraries where possible
Sticker packs can be uploaded to IPFS using Infura
Use a common drag and drop library for file upload to limit file selection to those that meet size, dimension and file type (format) requirements ( e.g. https://www.dropzonejs.com/)
Use a common list drag and drop library to allow changing the order of stickers (it's how they will appear in the market and there is currently no way to change this after submission) (e.g. https://github.com/atlassian/react-beautiful-dnd)
We'll create a separate repo for this work in the status organization when you're ready to start the work

Background

The Status app supports sending and receiving stickers in chat. Users can purchase and install various stickerpacks in what is called the Sticker Market. Creators can offer stickerpacks on this market at their own price, and earn Status Network Token (SNT) whenever a user purchases their pack.

The creator can decide to set a % of their proceeds to go to Status Network. This make it attractive compared to sticker markets provided by other messengers that charge a revenue share up to 50%.

Currently, creators can submit their stickerpack through a Google form. Upon submission a core contributor of Status uploads the submitted images to IPFS and signs a transaction to add a link to the files to the 'registry contract'. The dapp is intended to make this process of submitting stickers permissionless and scalable.

gitcoinbot commented 4 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 725.0 DAI (725.0 USD @ $1.0/DAI) attached to it as part of the Status fund.

If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
- Want to chip in? Add your own contribution here.
- Questions? Checkout Gitcoin Help or the Gitcoin Chat
- $737,954.48 more funded OSS Work available on the Gitcoin Issue Explorer

gitcoinbot commented 4 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work has been started.

These users each claimed they can complete the work by 266 years, 1 month from now. Please review their action plans below:

1) zoek1 has applied to start work _(Funders only: approve worker | reject worker)_.

I've implemented many apps using react and ipfs for gitcoin hackathons, also i worked with other great developer personal tokens that soon will debut on gitcoin. I like to implement the provided design and update frequently my status. I love stickers and i would like help to improve the stickers flow 2) peeohpee has applied to start work _(Funders only: approve worker | reject worker)_.

Hi Status Team,

I am interested in implementing the proposed sticker dapp and would like to request approval for this work. Although my Github account is new (I mainly use Gitlab), I have some experience working with React and would like to take this opportunity to learn more about web3 development with this project.

Action plan:

Implement empty state designs (Disconnected wallet, Connected wallet - empty state, New sticker form - empty state)
Implement modals and form value verification
Implement DnD (arrangement and deletion)
Implement review modal
Using personal ETH address, verify that IPFS file upload logic works
Test multiple packs can be uploaded
Implement multiple sticker pack uploaded state (sold,earning,contribution)

Questions:

Seems like the link that details the contract is incorrect, currently points to DnD library (second link in description)
Is there a readily available set of images that meet the expected size, dimension, and file type that I can use to implement the sticker upload flow?
Where could I ask questions if I get stuck in the process of implementation (contract-related/Status specific)?

Thanks for your time 3) ilanolkies has applied to start work _(Funders only: approve worker | reject worker)_.

Hi, I’m working on blockchain and dapp space for three years and I like to work on the project. It is one of my firsts bounties. My plan is:

Implement basic layout and buttons to reach upload flow
Complete UI information Fetch via call
Implement enhancements (close account, forms stateless popups)
Support multiple images
Improve stickers UI concept including previews and delete buttons 4) tbenr has been approved to start work.

I go for it! I'd like to use https://github.com/akropolisio/web3-wallets-kit as wallet lib. i'll integrate the modules you suggested. don't know yet if i'll fork the Julien's repo or another react starter repo. 5) elegant651 has applied to start work _(Funders only: approve worker | reject worker)_.

I'm a contributor for Status before, and want to be part of this task as well. Because I have many experience with building DApp, It is likely to be easier to access. I think it will be possible to apply to the DApp that is currently working with Embark.

Learn more on the Gitcoin Issue Details page.

hesterbruikman commented 4 years ago

@tbenr You're approved on Gitcoin to start the work 💪. Happy to see you're available to work on this! Please meet @gulyasbence who delivered the designs (and vice versa 😊). I'd like to set up a call with you both to introduce and hand off the design for implementation. Unfortunately, I will be out for 2 weeks and I suspect scheduling will be tricky given time zones and office hours.

Do you think you can manage connecting here and on Figma and I set up a call for the week of Oct 19?

cc @errorists @ferossgp

gulyasbence commented 4 years ago

Hi @tbenr, let me know here or tag me in a Figma comment if you have any questions about the design. Happy to help!

@hesterbruikman, a call on the week of Oct 19 sounds good from my side. If we can schedule it sometime between 3-6 pm CET I would appreciate it. If it doesn't work for any of you I'll make it happen anyways.

tbenr commented 4 years ago

@gulyasbence hi!! nice to work with you. I already had a look to figma, looks good at a first view. I'll ping you there when required.

@hesterbruikman @gulyasbence 19 Oct is ok for me but i prefer at 18:00 (6pm) CET.

tbenr commented 4 years ago

forgot a question for @hesterbruikman : should i consider this https://ropsten.etherscan.io/address/0x6CC7274aF9cE9572d22DFD8545Fb8c9C9Bcb48AD#code as the reference SC?

hesterbruikman commented 4 years ago

forgot a question for @hesterbruikman : should i consider this https://ropsten.etherscan.io/address/0x6CC7274aF9cE9572d22DFD8545Fb8c9C9Bcb48AD#code as the reference SC?

@tbenr the addresses should be captured here, at the bottom of the doc: https://notes.status.im/Q-sQmQbpTOOWCQcYiXtf5g#

If that's not what you're looking for, hopefully @3esmit can point you in the right direction

tbenr commented 4 years ago

@hesterbruikman I haven't noticed you fixed the link issue on the description :). Thanks, this is what I need!

gitcoinbot commented 4 years ago

@tbenr Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

gitcoinbot commented 4 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

@tbenr due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

[x] reminder (3 days)
[x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

tbenr commented 4 years ago

@gitcoinbot going to publish a repo soon

gitcoinbot commented 4 years ago

@tbenr Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

gitcoinbot commented 4 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

@tbenr due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

[x] reminder (3 days)
[x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

hesterbruikman commented 4 years ago

Hi @tbenr ! How are you getting on with this issue? I feel like my last message may not have arrived :/

tbenr commented 4 years ago

Hi @hesterbruikman I'm progressing but slower than expected. No last message is not arrived, was on Status?

hesterbruikman commented 4 years ago

I believe it was on Status, yes. But I also have bad memory and when multitasking may have not hit send. Definitely a possibility.

Would a call help in any way? Any questions or issues you're running into?

tbenr commented 4 years ago

@hesterbruikman I'd like to have a quick one yes, i have a couple of things to discuss while I can share with you current progress. Tomorrow afternoon (from 18 CET)?

hesterbruikman commented 4 years ago

Great! Sent you an invite just now for 18 CET

gulyasbence commented 4 years ago

@tbenr @hesterbruikman if there's any question about the design, I'm around and can hop on the call if needed.

hesterbruikman commented 4 years ago

Thank you @gulyasbence! Added you to the invite as optional

gulyasbence commented 4 years ago

@tbenr I updated the UIs in Figma with the following:

Category select

I used this component: https://material-ui.com/components/selects/#multiple-select
This input should be default empty with a placeholder: uncategorized; the form can be submitted without selecting a category
For now, we agreed that it's gonna be a predefined list; the user can't add new categories

Error states

Wallet connect error state
Invalid pack / Failed loading

Loading state/Skeleton

When the sticker packs are loading in the dashboard we can use a skeleton UI; I used this component: https://material-ui.com/components/skeleton/

Wallet select dialog

I designed a dialog in case there's gonna be other wallet options later

Drag and drop interaction

Dashboard without the analytics data bar

Let me know if you have any questions or if you need designs for other states.

hesterbruikman commented 4 years ago

Dapp is developed with a combination of Typescript + web3-react
UI is is build with a somewhat customized Material UI style (to confirm to the design)
Dapp can functionally, interact with contract on Mainnet and testnet (Goerli), wallet connection tested in Status and MetaMask
Analytics bar on Dashboard is not feasible at this time. Nr of StickerPacks sold, Total earnings, Total contribution to Status, requires logic in the contract to keep count with every transaction. This would increase gas costs when buying stickers. Analytics bar will be left out for now, replacement is the 'regular' topbar showing connect wallet and 'add new sticker pack' button * (updated by @gulyasbence)
Updated and added designs by @gulyasbence above:
- pack loading and invalid pack error
- wallet connection error state
- category multiselect
- drag and drop interaction. Drop on top of existing thumbnail
@hesterbruikman to provide list of valid categories (@hesterbruikman ). Categories will need to be mapped so that hash can be used and UI can still know what tags are used
Limit installs is to be added as feature to contract (this introduces exclusive stickerpacks); will become expensive to introduce later and feature can be included in dapp now
This updates one part of the contract, status-react would need to call a new contract, which can cause backwards compatibility issues. Check with Cammellos how to handle this. Ideally, contracts are called through ENS name
ENS name needs to be registered and ownership should fall under multisig

-* Should be ok if StickerPack contract would be on xDAI. Could use TheGraph, but expectation is that eventually they'll move to a payment model

hesterbruikman commented 4 years ago

@tbenr here's a list of categories. Assuming that the list can be edited as long as the hash mapping stays the same for existing categories:

adult
animals
cartoons
crypto
events
food
love
sport
travel
other

hesterbruikman commented 3 years ago

@tbenr how is this going? Is a call helpful for you at this point?

tbenr commented 3 years ago

Hi @hesterbruikman ! I'm progressing slowly TBH, I really would like to close it during December \ Christmas-holidays. I'll keep you informed once it makes sense to setup a call. Let me know if its becoming too late for your planning.

hesterbruikman commented 3 years ago

A friendly check in :) How are things going on your end with the stickermarket dapp @tbenr (cc @guylouis)

tbenr commented 3 years ago

@hesterbruikman my plan is to finish it this weekend! I'll ping you tomorrow on the repo (ATM is private)

tbenr commented 3 years ago

@hesterbruikman checkout https://github.com/tbenr/sticker-packs-publisher there are still things to do

[x] edit
[x] confirm dialog with decoded categories (now you will see '0x00001' and similar)
[x] ens resolution
[x] nav bar back button
[x] show example dialogs
[ ] link to terms & conditions?

but for sure you can start testing around

tbenr commented 3 years ago

@hesterbruikman added ens resolution and backbutton :)

tbenr commented 3 years ago

@hesterbruikman @gulyasbence dapp is complete

gitcoinbot commented 3 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 725.0 DAI (725.0 USD @ $1.0/DAI) has been submitted by:

Learn more on the Gitcoin Issue Details page
Want to chip in? Add your own contribution here.
Questions? Checkout Gitcoin Help or the Gitcoin's Discord
$1,169,864.57 more funded OSS Work available on the Gitcoin Issue Explorer

hesterbruikman commented 3 years ago

@tbenr 🙌 Great! Sorry for the slow response on my part. I'll try and get set up to review today and will loop in someone on the engineering side

tbenr commented 3 years ago

Hi @hesterbruikman ping me if i can help out on the review. Feel free to engage me when someone from the eng team will look into the dapp.

hesterbruikman commented 3 years ago

Setting up to pay out the bounty @tbenr, so we don't keep you waiting on that again. Fantastic contribution as always!

Both @flexsurfer and I had a look. I found two minor issues, other than that everything looks great. Can you please take a look if these can be resolved?:

[ ] Bleep of sticker banner in top left corner when loading the dapp
[ ] Typo Status Sitckers in the bottom left of the start screen

Some other items we discussed before, but don't require action for now:

[ ] Link to Terms and conditions will need to be added later
[ ] Introducing limited edition needs to be decided upon
[ ] Deploy, register and link to ENS name

I asked @3esmit to take a look at the contract interaction just in case. If anything new comes up that results in a significant amount of work, we'll create a new bounty.

cc @cammellos

tbenr commented 3 years ago

@hesterbruikman great! I pushed a fix for the two minor issues

status-im / design