dev-protocol / stakes.social Goto Github PK

🥨 Stakes.social

License: MIT License

TypeScript 99.30% JavaScript 0.35% Dockerfile 0.02% Less 0.19% CSS 0.13% Shell 0.01%

stakes.social's Introduction

Stakes.social is the first official Dapp built on the Dev Protocol, released in June 2020. Stakes.social is a new sponsor platform where both developers and sponsors are rewarded with tokens if they support their favorite projects by staking DEV tokens.

Live View

Contributing guidelines

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Be sure to check our contributing guidelines

Installation / Requirements

# install npm packages
$ yarn

# build deps
$ yarn build

# web run
$ yarn workspace @dev/web start:dev

License

stakes.social's People

Contributors

Stargazers

Watchers

stakes.social's Issues

Landing Page for creators

How to join and create a property on stakes.social for creators

Design has completed:
https://www.figma.com/file/faebF8woADWlvHf62xPD0d/stakes.social-LP?node-id=0%3A1

Mobile support: WithdrawCard

On a mobile device, it would be a good look if it looked like this:

Hosting configuration

This project needs hosting configuration (i.g., with zeit/now), so I will create it.

Mobile support: PropertyCard

It would be nice to look like this on a mobile device:

Progress feedback

To better UX, it needs progress feedback when clicking the "Stake", each "Withdraw", "Cancel" and "Mining now" button on a Property page, "Create" and "Authenticate" button on an Auth page.

I thinking that's like ant.d's message.loading.

Automate.io Test

Testing 1,2,3

New header design

Implement the new header design.

The number of Average Interest Rate isn't match

There is a page that the Average Interest Rate is incorrect.

For example, the Average Interest Rate of 0xFcA9b9b3fdC7C809FcF9f6620Bb39D19abC8BA8f is 0.22757155663023132%.

Main page:

Property page:

The source of `0.22757155663023132%`

Query the Metrics addresses from the Property address:

{
  property_authentication(where: {property: {_eq: "0xFcA9b9b3fdC7C809FcF9f6620Bb39D19abC8BA8f"}}) {
    metrics
  }
}

The response:

{
  "data": {
    "property_authentication": [
      {
        "metrics": "0x1dc0DAd66474f5D551170910db47e4AB5801Fcf2"
      }
    ]
  }
}

Query the sum of Staking Rewards and Locked Up amount from the Metrics addresses:

{
  reward_calculation_result_aggregate(where: {block_number: {_gt: 9600000}, metrics: {_in: ["0x1dc0DAd66474f5D551170910db47e4AB5801Fcf2"]}}) {
    aggregate {
      sum {
        staking_reward
        lockup
      }
    }
  }
}

The response:

{
  "data": {
    "reward_calculation_result_aggregate": {
      "aggregate": {
        "sum": {
          "staking_reward": 113785778315115660,
          "lockup": 50000000000000000000
        }
      }
    }
  }
}

Calculate the rate:

113785778315115660 / 50000000000000000000 * 100 = 0.22757155663023132

https://www.wolframalpha.com/input/?i=113785778315115660%2F50000000000000000000*100+

CORS errors occur on Trust Wallet

When browsing with TrustWallet, I get a CORS error.

I inspected the APK with Android Studio. Then, I noticed that the response of https://ethereum-rpc.trustwalletapp.com/ has not sometimes added Access-Control-Allow-Origin header.

This is mostly a TrustWallet issue, but I'm happy to report it here.

For example, Uniswap does not have this problem. Is it due to too many connections?

-- screenshots --

When Access-Control-Allow-Origin header is missed:

When Access-Control-Allow-Origin header is added:

Mobile support: PropertyHeader

It would be nice to look like this on a mobile device:

New asset card design

Implement the new asset card design.

Including:

Asset cover image
Pool name
Asset description
Author information
Staking information
Stake button
Withdraw button

A layout may sometimes break

The layout of the SupplySummaly component sometimes breaks.

<div class="sc-Axmtr hvJMgY">
    <div class="sc-AxmLO gmtmqV">
        <span>APY for Stakers:</span><span class="sc-fzozJi dteCCc"><span class="sc-AxmLO gmtmqV">65</span><span class="sc-fzozJi dteCCc">.67948%</span></span>
    </div>
    <div class="sc-AxmLO gmtmqV">
        <span>APY for Creators:</span><span class="sc-fzozJi dteCCc"><span class="sc-AxmLO gmtmqV">68</span><span class="sc-fzozJi dteCCc">.36028%</span></span>
    </div>
    <div class="sc-AxmLO gmtmqV">
        <span>Annual Supply Growth:</span><span class="sc-fzozJi dteCCc"><span class="sc-AxmLO gmtmqV">2</span><span class="sc-fzozJi dteCCc">.72371%</span></span>
    </div>
</div>

Automate.io Test

Testing 1,2,3

Uniswap Analytics

Implement the Uniswap analytics on the dashboard page.

New govern page design

Implement the new govern page design.

Anchor links for creator profile

Implement the anchor links for the creator profile.

Including:

Link to About section
Link to Pools section
Link to Top supporters section
Link to Supporting section

Numbers don't match up

Numbers may don't match up on the root(/) and property(/0x...) pages.

Here're screenshots:

https://stakes.social/0x33D36A508e8624409c79C089Dd363fE8cAdea32a

Want to show authentication results

Dev Kit returns a new Metrics address when Promise in "Market. Authenticate" resolves.

To better UX, replace the AuthForm by the Result component, once Promise is resolved.

For example:

  <Result
    status="success"
    title="Successfully Authenticated Your Asset!"
    subTitle="Viewing a new asset will take dozens of minutes, but you can also check it out right away on Etherscan."
    extra={[
      <Button href={`https://etherscan.io/address/${THE_NEW_METRICS_ADDRESS}`}>
        Etherscan
      </Button>,
      <Button href={`/${THE_PROPERTY_ADDRESS}`} type="primary">
        Go the Property
      </Button>
    ]}
  />

IDEA: Stakers Dashboard

I am thinking of needing a feature like a "Stakers Dashboard" to more useful staking.

It features the following UI. (I think that design will use this component)

My Staking Properties

Property	Staking amount	Staked day	Elapsed days	Withdrawable rewards	Total earned	Cancel
@devprtcl/dev-kit-js	4000DEV	6/20/2020	48 days 12h 42 min xx	25 DEV [withdraw]	124.48 DEV	[Cancel] [withdraw]
vue-i18n	2100DEV	7/4/2020	28 days 3h 19 min xx	11 DEV [withdraw]	52.1 DEV	[Cancel] [withdraw]

Summary

My Staking Properties: 5 | Total Staking Amount: 203K DEV | Total Earned: 483 DEV

I want to discuss it together here.

Are there unnecessary or more needed pieces of information?

Indicates current staking rewards

Implement the new indicator design.

The number of Total Rewards isn't match

The number of Total Rewards is correct on the main page but incorrect on the property page.

For example, the Total Rewards of 0xcEBD1BF31DF3E3697Ea26e2F94F9E3644C809F46 is 66914.121880264639851616.

Main page:

Property page:

New create page design

Implement the new create page design.

There is a don't work Property page.

i.g., https://stakes.social/0xaCe8ac433B44081Cfc7761E3e138A0868812aCA0

In those pages are getting an error the following:

TypeError: Cannot read property 'block_number' of undefined

Sort by

Implement multiple sorting conditions and their switching.

Error: 未知の引数です: config

description

I get an error when I run a command.

% yarn build
yarn run v1.22.4
$ lerna run build --include-dependencies
lerna notice cli v3.22.1
lerna notice filter including dependencies
lerna info Executing command in 2 packages: "yarn run build"
lerna ERR! yarn run build exited 1 in '@dev/graphql'
lerna ERR! yarn run build stdout:
$ yarn clean
$ rimraf esm cjs
$ graphql-codegen --config codegen.yml && run-p -l build:* && yarn format
Error: 未知の引数です: config
    at Array.<anonymous> (/Users/narita/github/stakes.social/node_modules/graphql-codegen/lib/cli.js:142:31)
    at Object.self.fail (/Users/narita/github/stakes.social/node_modules/yargs/lib/usage.js:35:17)
    at Object.self.unknownArguments (/Users/narita/github/stakes.social/node_modules/yargs/lib/validation.js:139:13)
    at parseArgs (/Users/narita/github/stakes.social/node_modules/yargs/yargs.js:811:32)
    at Object.get [as argv] (/Users/narita/github/stakes.social/node_modules/yargs/yargs.js:668:16)
    at Object.<anonymous> (/Users/narita/github/stakes.social/node_modules/graphql-codegen/lib/cli.js:143:19)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run build stderr:
error Command failed with exit code 1.

lerna ERR! yarn run build exited 1 in '@dev/graphql'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
%

Featured tags

Implement the featured tags.

change withdraw label

description

Changing the display label for withdrawals

Why

Keep it simple and easy to understand.

Search for asset pool or creator

Implement the search feature for an asset pool or creator.

Your Pools section on the Portfolio page

Implement the Your Pool section on the Portfolio page.

Including:

Staking pool icon
Your rewards amount
Total staking amount
Withdraw button

Mobile support: AssetOutline

On a mobile device, it would be a good look if it looked like this:

Footer logo isn't displayed

The "Dev" logo image in the footer isn't displayed.

New asset profile design

Implement the new asset profile design.

Including:

Asset description
Included assets
Author profile
Top 5 stakers

New asset main area design

Implement the new asset main area design.

Including:

Cover image
Staking information
Staking form
Withdrawal form

We can use Hasura's built-in pagination in GraphQL:

{
  property_factory_create(limit: 10, offset: 0) {
    property
  }
}

IDEA: filter properties by portofolio

Provide a checkbox to filter properties based on where the current account has stake in

IDEA: Creators Dashboard

As well as #369, I am thinking of needing a feature like a "Creators Dashboard."

It features the following UI. (I think that design will use this component)

Own Properties

Property	Staked amount	Stakers	First staked day	Latest staked day	Withdrawable rewards	Total earned
Music A	200DEV	10	2020/7/9	2020/8/12	4 DEV [withdraw]	11.8 DEV
Music B	694DEV	42	2020/7/11	2020/9/23	9.2 DEV [withdraw]	43.7 DEV

Summary

My Properties: 24 | Staked Properties: 6 | Total Earned: 350DEV

I want to discuss it together here.

Are there unnecessary or more needed pieces of information?

i.g.,
https://stakes.social/dev-protocol__deck--how-it-works.png

Property shareholders information

Enhancements to enumerate the shareholders of a Property on each Property page.

UI design is as follows( Mobile support will be later ):

The data source can be fetched by the following REST API:
https://programmable-proxy.azureedge.net/?s=https://api.ethplorer.io/getTopTokenHolders/<PROPERTY_ADDRESS>?limit=10

Check out the response example:
https://programmable-proxy.azureedge.net/?s=https://api.ethplorer.io/getTopTokenHolders/0x68c824db5A1634940BB838468Ff2aee2bDa5794B?limit=10

The "Transfer the share of the Property" button triggers information modal's open, like #93.