Create DApp "Cheer for you"

[kazu80]

Title of DApp

Cheer for you

Description

"Cheer for you" is a DApp that can stake DEV to author

Glossary

Word	Mean
Author	Property owner
Staking	Investing a DEV in a property

How to create

The specifications when Stakes.social was created will be helpful.

STEP	DESC	DETAIL
✔️	Connect with the user's Metamask	#20 (comment)
2	Get and display the user's DEV balance
✔️	Get a list of authors from GraphQL	#20 (comment)
✔️	Create a form to input the author and staking amount for the user to stake
5	Confirm the user has a staking amount
✔️	Get a list of author properties	#20 (comment)
✔️	Calculate the staking amount per property	#20 (comment)
8	Send to smart contract	#20 (comment)
9	Develop smart contracts. Receive the properties submitted from step 8
10	Steak to the target property
11	Tell the front side the completion	#20 (comment)
12	Tell the user completion

Points confused in developing

Question	Answer
I don't understand the term (I don't know what to use）	Prepare a glossary as a document
I don't know how to get DEV	Document that the exchange can be returned from Eth and converted to DEV (note the content)
I don't understand the role and usage of the wallet	Prepare a document about the introduction and usage of the wallet
I don't know how to use DevProtocol	Prepare the document
How to prepare DEV in local environment	We recommend using Ropsten in the test environment
I don't know how to use dev-kit-js	Prepare the document

[kazu80]

Connect with the user's Metamask

Metamask official reference
https://docs.metamask.io/guide/ethereum-provider.html#ethereum-request-args

Wallet connection request

ethereum.request({ method: 'eth_requestAccounts' })
非推奨: ethereum.enable()

STEP

1. We need to create a function to see if the MetaMask Chrome extension is installed
2. If MetaMask is not installed we:
3. Change our connectButton to Click here to install MetaMask
4. When clicking that button it should take us to a page that will allow us to install the extension
5. Disable the button
6. If MetaMask is installed we:
7. Change our connectButton to Connect
8. When clicking that button it should allow us to connect to our MetaMask wallet
9. Disable the button

[kazu80]

Get a list of authors from GraphQL

Devprotocol does not provide an interface to get a list of authors.
It is prepared in GraphQL below, so use this
https://explorer.graphql.devprotocol.xyz/

And, additional information (icons, etc.) is prepared below, so use it.
https://github.com/dev-protocol/dev-for-apps

[kazu80]

Get a list of author properties

Process on the front side to minimize contract processing

It is prepared in GraphQL below, so use this
https://explorer.graphql.devprotocol.xyz/

[kazu80]

Calculate the staking amount per property

Process on the front side to minimize contract processing

Staking Price / Total properties of designated Author = Staking amount per property

Give the remainder to the first property

[kazu80]

Send to smart contract

The parameters to be sent are as follows

1. User's address
2. Array of "address of property to be given and staking amount of it"

[kazu80]

Tell the front side the completion

Use it because you can notify the completion after the block is imported by dev-kit-js.

• Regardless of contract

You can find out dev-kit-js from the contract.ts below.
https://github.com/dev-protocol/dev-kit-js/blob/main/lib/contract.ts