da0-da0/dao-dao-ui

InterChain DAO tooling UI.

dao-dao-ui's Issues

Display list of Voters on a proposal

As an observer, I would like to see how people are voting on a proposal.

Add a hook to get the list of voters for a proposal, then display that in a list at the bottom of a proposal page. It should paginate.

Expires_at not working

This may be an issue with how we instantiate the contract... we might need to handle proposals without an expiration set.

Mint transaction template

SImilar to the spend template, it would be nice to have a template for a mint transaction.

DAOs now instantiate their own governance token and have complete control over the supply, so this proposal is basically a vote to print money.

Similar to spend, it takes an amount and a recipient.

Errors submitting proposals

This is with the update_local.sh running; both on the main branch and in proposals-display. I created a second account and sent it some stake from the initial account thinking it was the account 0 issue we were talking about last week.

Error when broadcasting tx E63AABBA1D654D4A98FD2E50D6B8EBD94F8D815BBAB47EACC8C22D0160BF64BC at height 12786. Code: 5; Raw log: github.com/CosmWasm/wasmd/x/wasm/keeper.Keeper.execute github.com/CosmWasm/wasmd/x/wasm/keeper/keeper.go:354 github.com/CosmWasm/wasmd/x/wasm/keeper.PermissionedKeeper.Execute github.com/CosmWasm/wasmd/x/wasm/keeper/contract_keeper.go:48 github.com/CosmWasm/wasmd/x/wasm/keeper.msgServer.ExecuteContract github.com/CosmWasm/wasmd/x/wasm/keeper/msg_server.go:91 github.com/CosmWasm/wasmd/x/wasm.NewHandler.func1 github.com/CosmWasm/wasmd/x/wasm/handler.go:31 github.com/cosmos/cosmos-sdk/baseapp.(*BaseApp).runMsgs github.com/cosmos/[email protected]/baseapp/baseapp.go:724 github.com/cosmos/cosmos-sdk/baseapp.(*BaseApp).runTx github.com/cosmos/[email protected]/baseapp/baseapp.go:669 github.com/cosmos/cosmos-sdk/baseapp.(*BaseApp).DeliverTx github.com/cosmos/[email protected]/baseapp/abci.go:273 github.com/tendermint/tendermint/abci/client.(*localClient).DeliverTxAsync github.com/tendermint/[email protected]/abci/client/local_client.go:95 github.com/tendermint/tendermint/proxy.(*appConnConsensus).DeliverTxAsync github.com/tendermint/[email protected]/proxy/app_conn.go:85 github.com/tendermint/tendermint/state.execBlockOnProxyApp github.com/tendermint/[email protected]/state/execution.go:320 github.com/tendermint/tendermint/state.(*BlockExecutor).ApplyBlock github.com/tendermint/[email protected]/state/execution.go:140 github.com/tendermint/tendermint/consensus.(*State).finalizeCommit github.com/tendermint/[email protected]/consensus/state.go:1635 github.com/tendermint/tendermint/consensus.(*State).tryFinalizeCommit github.com/tendermint/[email protected]/consensus/state.go:1546 github.com/tendermint/tendermint/consensus.(*State).enterCommit.func1 github.com/tendermint/[email protected]/consensus/state.go:1481 github.com/tendermint/tendermint/consensus.(*State).enterCommit github.com/tendermint/[email protected]/consensus/state.go:1519 github.com/tendermint/tendermint/consensus.(*State).addVote github.com/tendermint/[email protected]/consensus/state.go:2132 github.com/tendermint/tendermint/consensus.(*State).tryAddVote github.com/tendermint/[email protected]/consensus/state.go:1930 github.com/tendermint/tendermint/consensus.(*State).handleMsg github.com/tendermint/[email protected]/consensus/state.go:838 github.com/tendermint/tendermint/consensus.(*State).receiveRoutine github.com/tendermint/[email protected]/consensus/state.go:782 failed to execute message; message index: 0: Unauthorized: execute wasm contract failed

i18n

We have a lot of hard-coded English language strings. Move to something like https://react.i18next.com/

Show connected wallet Gov Token amount

We should show the connect wallet's DAO Gov token amount somewhere in the UI.

Integrate Junoblocks components

Integrate https://github.com/sashimi36/junoblocks components into the daodao dapp via github package link

Unit tests for validation

There should be some unit tests to validate JSON messages. Ideally, it would be great to piggy back off of any validation methods in @cosmosjs/cosmwasm-stargaze.

Re-add multisig contract support

Multisigs are a fundamental part of DAO tooling and they should be first class citizens in our tooling alongside gov-token based DAOs.

We should re-add the multisig contract support that @ebaker did earlier. This will involve slightly re-organizing things a bit.

Routes might look roughly like this:

- /: Overview, connect wallet to create a DAO or Multisig
- /multisig/create: Create a new multisig
- /dao/create: Create a new DAO with a Gov Token (handled in #42)
- /multisig/<contract-address>: An Multisig overview page
- /multisig/<contract-address>/treasury: Multisig treasury page
- /multisig/<contract-address>/proposals: Multisig proposal list page
- /multisig/<contract-address>/proposals/create: Create a new multisig proposal
- /dao/<contract-address>: An DAO overview page
- /dao/<contract-address>/treasury: DAO treasury page
- /dao/<contract-address>/proposals: DAO proposal list page
- /dao/<contract-address>/proposals/create: Create a new DAO proposal

Add help tooltips on creation pages

On creation pages, add ? buttons with tooltips to describe config options like threshold, max voting period, etc.

Don't show JSON on text proposal voting page

Save draft proposals

As a user, I don't want to loose all my work if I have to reload the page for some reason.

Would be nice to save a proposal's state in local storage and add a cancel button that would clear the form.

It's really annoying to loose work and at the moment it isn't super easy to construct all the needed messages.

Proposal Section's Description toggled dark by default on light setting

Bug description

When creating a proposal there is a black box on the description section of the proposal.

Steps to reproduce

CMD-SHIFT-R. Have light mode set by system. Go to website and click on proposals.

Note if I toggle on and off the dark/light mode it fixes the issue.

Expected behavior

Should at start all by one theme (light, or dark) for all fields.

Update font

Designs use SF Pro, so let's use that. https://developer.apple.com/fonts/

Unusable on mobile

In addition to a UI that's very desktop centric (for example, mobile has no hover states to speak of), how does one even use a wallet?

Is there a standard "mobile dapp" idiom? I fear it might be "wallet with integrated web view" especially on iOS.

List views should have loading spinners.

List views should include loading spinners. For example, navigating to DAOs > Explore DAOs will at first show "No DAOs :(" After a moment, DAO DAO appears. I would expect to see a loading spinner before concluding that the list is, in fact, empty.

Proposals failing

In the frontend-for-messages branch, creating this (I believe valid) proposal:

[{"bank":{"send":{"@type":"/cosmos.bank.v1beta1.MsgSend","from_address":"wasm1nc5tatafv6eyq7llkr2gv50ff9e22mnfhap4vz","to_address":"wasm19mfj3r5g5yqsjcxk5ey76mfm9ed6x8a333lxzr","amount":[{"amount":"666","denom":"ustake"}]}}}]

Throws this error in the frontend:

Error when broadcasting tx B6A3EEF7003B58F5B53BE0B5C062FA4D5DA26D0C6A04EEF32A92D4B2CAC3DD56 at height 2676. Code: 5; Raw log: github.com/CosmWasm/wasmd/x/wasm/keeper.Keeper.execute [...]
(*State).tryAddVote github.com/tendermint/[email protected]/consensus/state.go:1930 github.com/tendermint/tendermint/consensus.(*State).handleMsg github.com/tendermint/[email protected]/consensus/state.go:838 github.com/tendermint/tendermint/consensus.(*State).receiveRoutine github.com/tendermint/[email protected]/consensus/state.go:782 failed to execute message; message index: 0: Error parsing into type cw20_gov::msg::ExecuteMsg: unknown variant `propose`, expected one of `transfer`, `burn`, `send`, `increase_allowance`, `decrease_allowance`, `transfer_from`, `send_from`, `burn_from`, `mint`, `update_marketing`, `upload_logo`, `delegate_votes`: execute wasm contract failed

Where is this broadcasting error coming from?

Strangely, I don't see any errors in docker logs cosmwasm (i.e., the locally-running chain).

12:05AM INF indexed block height=2732 module=txindex
12:06AM INF Timed out dur=4978.599865 height=2733 module=consensus round=0 step=1
12:06AM INF received proposal module=consensus proposal={"Type":32,"block_id":{"hash":"2D3DEB4D4E34064B977F08B60F4E7036526330437CE9632BCAA71890DF054327","parts":{"hash":"0D61646CD669A3846DE789F3367C7C4EC2F787CEF389C09A5BF0E6F4E6E62B0D","total":1}},"height":2733,"pol_round":-1,"round":0,"signature":"nyvRmFbwZ7ksMEzXBi8h/dH8aooxqQjhKVWl0CcFLwtXHj9zyLcfNmwGbQD/U2D/KZGD1IX/yRB4JmduU2NLCg==","timestamp":"2021-10-18T00:06:04.460371077Z"}
12:06AM INF received complete proposal block hash=2D3DEB4D4E34064B977F08B60F4E7036526330437CE9632BCAA71890DF054327 height=2733 module=consensus
12:06AM INF finalizing commit of block hash=2D3DEB4D4E34064B977F08B60F4E7036526330437CE9632BCAA71890DF054327 height=2733 module=consensus num_txs=0 root=AE5D3E85ECDE7643AC16B94B07897109D6467C8918A9445C9B4AC12A1A85F8CF
12:06AM INF minted coins from module account amount=41ustake from=mint module=x/bank
12:06AM INF executed block height=2733 module=state num_invalid_txs=0 num_valid_txs=0
12:06AM INF commit synced commit=436F6D6D697449447B5B32333520363220313920323039203131302031343720323133203234382031352032342032343720313130203120313832203331203133382032343420313038203231203232312032333720313231203820323135203436203137312031303820313420302032313820313934203133335D3A4141447D
12:06AM INF committed state app_hash=EB3E13D16E93D5F80F18F76E01B61F8AF46C15DDED7908D72EAB6C0E00DAC285 height=2733 module=state num_txs=0
12:06AM INF indexed block height=2733 module=txindex

Initial load JS much too large

The current first load JS payload for prod builds is over 600K before we've really developed much functionality. This is going to make the app sucky, especially on mobile. Look into using the next/bundle-analyzer and codesplitting/dynamic loading.

Add social links in footer

Twitter and GitHub for now:

• https://twitter.com/da0_da0
• https://github.com/DA0-DA0

UI for Staking DAO tokens

We're making a crucial change to the way DAO voting works: DA0-DA0/dao-contracts#93

In order to vote you'll need to stake your tokens.

We'll need UI for this...

#83 is related.

Document local dev setup

Set default gas higher

Had transactions fail on the testnet.

Update Color theme to match designs

https://discord.com/channels/895922260047720449/895926429039075328/907264041200803870

Ledger doesn't work

Need to upgrade CosmJS I believe.

Better Wallet Modal

If the user doesn't have Keplr wallet installed, show a nice modal with a link of where to get it.

Create Proposal JSON msg should be optional

Text only proposals are fine.

JSON Editor loses context

https://photos.app.goo.gl/r7S7EifoxgsNdU3Y6

Syntax errors kick the user out of the editor component and the state updates are out of sync

Show errors if create proposal transaction fails

Currently, just redirects to the proposal list page.

Create Multisig validation

We have some very basic validation on the multisig create page, but more is needed.

File: pages/multisig/create.tsx

"Label" should be at top of multisig creation UI

Since “label” effectively the human-readable name of the multisig, it should be at the top of the multisig creation page, above the wallet addresses.

Show proposal status on proposal detail page

We're not showing the status on the detail page.

Initial Wallet connection hangs

When first prompted to connect your Keplr wallet, the wallet dismisses after entering your password but the UI never updates. Reloading the browser and connecting your wallet a second time works as expected.

Use flex multisig rather than fixed multisig contract in UI

It's basically the same, but a bit more flexible. Also works with the new registry contract @orkunkl created.

Signing and rejecting proposals fails

"Cannot read properties of undefined (reading 'gas')"

Probably a bad/incomplete message.

SVG Logo

Show more voting info

As a user, I would like to know what the current vote tally is and how close a proposal is to passing.

Blocked until Tally Query is implemented: DA0-DA0/dao-contracts#90

Create Proposal validation

We're not doing much validation of the create proposal page. Notably, title and description are required fields, but we don't show an error until the transaction fails.

Let's add a bit more validation to the proposal creation page.

File: components/ProposalEditor.tsx

Keep wallet connected across page reloads

Not sure if we can or should handle this, but maybe for page reloads within a certain time window we can keep the wallet connected?

Create DAO validation

The create DAO form has basically zero validation. 😂

Let's change that. Could be a good chance to refactor a bit as well.

File pages/dao/create.tsx.

Spend proposal templates should use human readable amounts

Going through things, really think we should just use human readable amounts everywhere. Otherwise it's confusing to explain to a user that 1 ujunox is equal to 0.0000001 JUNOX.

DAO creator page

Add a form / page to create a new DAO.

Unhandled Runtime Error: Query failed with (18): not found: invalid request

Happens on connect wallet.

Replace proposal status icons and colors

Proposal status icons and colors aren't great, see this issue in design repo: https://github.com/DA0-DA0/design/issues/1

@modern-edamame made some new ones and colors, let's use these!
Status-Icons.zip

Show contract config info somewhere

It's important to be able to see info about DAO and Multisig contracts. Here's what I'm thinking...

Show contract info on /dao:

• Name
• DAO Contract Address
• Description
• Threshold info
• Max voting period
• Proposal deposit required
• Token Name
• Token Contract Address
• Total Supply

Show contract info on /multisig

• Name
• Contract Address
• Threshold info
• Max voting period
• List of member addresses and weights

Add Toasts

Really like https://react-hot-toast.com/

Clearly show whether or not someone is a DAO / Multisig member

As a user, it should be clear to me whether I am part of a DAO or Multisig. Currently, it's not.

DAO DAO Branding

Let's customize the branding a bit:

• Update logo (Yin Yang?)
• Title should be DAO DAO
• Custom light / dark color theme? (optional)
• Customize welcome screen "Welcome to DAO DAO"?

Makes it a little more fun for the V1.

Handle proposal deposits

The UI currently doesn't handle deposits when creating a proposal. If the DAO contract has proposal deposits enabled the front end needs to call a multi msg transaction. The first message is to the CW20-Gov token and sets an allowance for the contract to transfer the deposit amount. The second is the create proposal message to the DAO contract.

An example of a similar multi-msg transaction can be seen in the wasmswap repo. https://github.com/Wasmswap/wasmswap-interface/blob/042ce341e8c832f0ce3279b0f973e5dc0846f720/services/swap.ts#L56

MVP Treasury Page

• Show all native token balances (use getAllBalances
• Show all cw20 token balances (use Cw20Balances contract query)
• Show transaction history for the DAO (use searchTx)

Proposal validation messages should reset after success

After a failed vote (e.g., insufficient fees), the UI displays an error message. If the user re-submits the transaction and it succeeds, the error message persists. It should disappear.

Steps to reproduce.

• Vote on a proposal, providing insufficient fees.
• Confirm that an error message appears under the vote buttons.
• Vote again, this time providing sufficient fees.
• Confirm that the vote succeeds.

Observed behavior: Original error message persists.

Expected behavior: Error message should disappear after successful vote.