Feat/holographic consensus

[dcrescimbeni]

Description

https://www.loom.com/share/e8ca35fc435e4dea87cbd3ca8a67f9ea

Holographic consensus

Added a sidebar component, modal, and logic to stake tokens, that will be shown on an active proposal on Gov 1.5 DAOs. The option to stake tokens will only show if the user has a balance on the staking token.

The component shows a speedometer to reflect the token amount staked on either option.

Clicking on the stake amounts or the expand button on the card header will toggle the stake details. Each new stake is shown in a new line, so if a user stakes multiple times, it will show multiple stakes (not just one staked with the total stakes of the user).

If the user hasn't already staked on the proposal, it must choose an option and an amount. The amount varies between 0 and the user token balance. To set the amount, either use the slider, or click on the "Max" button to set it to all the available balance.

If the user already staked in the proposal, it won't be able to change its option, just increasing the stakes.

While staking, it will calculate the potential reward, assuming that the user-selected option will win (if it loses, it will lose all the staked tokens).

The "Lock" button will show an "Approve" text if the selected staking amount exceeds the current token allowance. If the user needs to approve, an approve transaction will be created with the required amount by default.

Notes

• When creating a proposal, it automatically stakes in the "NO" option an amount equal to daoBounty.
• After staking, refresh the page to see the impact on the stake details

Pending things:

• Enable/disable staking in the proposal if the state doesn't allow it (like a finished proposal)
• Unlock time detail: the staking modal will show a hardcoded unlock time. This is not implemented since it will depend on the useTimeDetail hook and the state

Subgraph

• Fixed bug where stakes and votes were not updated
• Added staking token address to VotingMachine
• After proposal creation, it automatically adds a stake for the amount stated in the DAO bounty

Hooks

• Added useStakeOnProposal to 1.5 hook store. It is not supported in guilds.
• Added useApproveTokens to 1.5 hook store
• You can now pass a schemeId to useGetSubDAOs to fetch data of only one scheme. If that's null, then it will fetch all schemes
• The useProposal hook will also return the stakes on the proposal

Types

• Added subDao, totalStaked, stakes details, daoBounty, and holographicConsensusState to the proposal typings.
• A note about holographicConsensusState: this is a state that reflects only the voting machine state, not the complete state of the proposal, meaning it might or might not be the same as the proposal state as the useProposalState hook returns. In my opinion, this is a temporary state and should be replaced once we implement the useProposalState hook.
• Added ID and stakingTokenAddress to the votingMachine property of the SubDAO interface

General stuff

• Fixed bug in tokenInfo where it returned no data
• Extracted chevron icon (show/hide details) button to component
• The medium font weight defined in the theme was bold, so I renamed it
• Added scrollbar styling to <SidebarCard/>
• Added a new <Slider/> component
• Added fullWidth and gap properties to <Flex/> component
• Added a new <Text/> typography component. This is meant to be used to style body text according to what's defined in the theme
• Added non-hook versions of useBigNumberToNumber and useBigNumberToString. The hook version memoizes the values, but the drawback is that we lose flexibility on where to call them. If deemed beneficial, we can replace hook versions with non-hook ones to avoid duplication. I also added tests.
• Added a transfer token function to the scripts executed after the DAO is set up to facilitate token staking (dev-scripts/src/development.js)

Closes #16 (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

I extracted functions that deal with numbers into utils, and added unit tests.

Setup to test the staking functionality:

1. Go to packages/dxdao-contracts/deploy/avatarScheme.js and set this default parameters (they increase the time to interact with the proposal):

  const defaultParameters = {
    queuedVoteRequiredPercentage: 5000,
    queuedVotePeriodLimit: 60000000,
    boostedVotePeriodLimit: 60000000,
    preBoostedVotePeriodLimit: 10000000,
    thresholdConst: 2000,
    quietEndingPeriod: 10000000,
    daoBounty: web3.utils.toWei("0.1"),
    boostedVoteRequiredPercentage: 100,
  };

2. Run the whole app (hardhat, subgraph and front end)
3. Go to the DAO URL: http://localhost:3000/#/localhost/0x77f7df7de7ab705eb54982a12d8e1ac65bfa05d3
4. Click on the proposal
5. You will see the "Predictions" sidebar card
6. Switch to either Address Implement subgraph #1, Vesting contract factory subgraph #2 or White screen opening a proposal with a raw transaction  #3 (check hardhat.config.js) since those are the ones with DXD token balance and thus can stake
7. Click on the thumbs-up or thumbs-down buttons to open the staking modal
8. Select the staking option (if you haven't already staked), move the slider to increase the staking amount, and then lock/approve tokens
9. After confirming the stake, reload the page (this is only needed in localhost)

Currently, there's no way to redeem or finish the proposal.

Checklist:

• My code follows the existing style of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any UI changes have been tested and made responsive for mobile views

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
davi	❌ Failed (Inspect)			Mar 30, 2023 at 0:38AM (UTC)

[AugustoL]

IMO using "predictions" as a name for the action is wrong, it is a stake or a bet where you PAY for a specific outcome. There is no money in predictions, I can predict that tomorrow will rain for free, but on stakes and bets there is money involved, like here.

[rossneilson]

Seeing this in vercel build

[dcrescimbeni]

Seeing this in vercel build

Does the repo redeploy a subgraph? Because stakingTokenAddress is a new parameter, and if it tries to get it from an old subgraph deploy, it won't find it.

[rulfo71]

Looks good to me, great job!!

Some comments regarding my UX impression:

• When i'm approving amount to stake i receive this alert from metamask:

here i can put a different amount from the one i put before on the slider. Afterwards the app uses the one from metamask which sounds fair, but i don't know if maybe we can send the amount to the approval transaction so that the user doesn't have to insert it twice.

• On my first impression it was weird to have to click twice the thumbs up (or thumbs down). Once on the proposal page and another on the modal. Maybe the first time could be just a stake button and afterwards which staking option you want...
• Once i already staked that the previous staked selection is 'clicked' maybe we can disable the other option?

Anyway, just opinions here, you can try them and see how they look or maybe a designer can have a better opinion

[dcrescimbeni]

Looks good to me, great job!!

Some comments regarding my UX impression:

• When i'm approving amount to stake i receive this alert from metamask:

here i can put a different amount from the one i put before on the slider. Afterwards the app uses the one from metamask which sounds fair, but i don't know if maybe we can send the amount to the approval transaction so that the user doesn't have to insert it twice.

• On my first impression it was weird to have to click twice the thumbs up (or thumbs down). Once on the proposal page and another on the modal. Maybe the first time could be just a stake button and afterwards which staking option you want...
• Once i already staked that the previous staked selection is 'clicked' maybe we can disable the other option?

Anyway, just opinions here, you can try them and see how they look or maybe a designer can have a better opinion

About the approval window MetaMask shows, you need to click "use default" to auto-populate the amount we send (in this case, the amount needed approval), it won't fill it automatically. That's a choice on their end.

Yes... about the staking button, that makes sense. I don't have a strong opinion on either of the options.