Guide to the DAO DAO UI patterns

We made a variety of philosophical decisions and use common patterns throughout the development of the UI. Procedurally, we ask that contributors discuss them in Discord channels, and adhere to them during PRs.

Miscellaneous design decisions

• We pass the exact numbers we are going to display to stateless components. We do not convert microdenom->denom (e.g. ujuno to JUNO) in stateless components—i.e. components are merely responsible for formatting and rendering, not converting. All of that gets handled in selectors, hooks, or other state-retrieval mechanisms before being passed to a component. Components should never format tokens on their own, instead using the TokenAmountDisplay component.

Navigation

The URL path to a DAO or one of its proposals varies depending on if the user is inside the dapp or the sdp. The dapp uses /dao/ADDRESS, whereas the sdp uses /ADDRESS. Due to this discrepancy, there are a couple helper functions in @dao-dao/utils's url.ts and a useful React hook in @dao-dao/stateless called useNavHelpers. Inside any React component, simply use the hook to generate URLs or navigate. The useNavHelpers hook wraps the helper functions in the utils package and automatically chooses the appropriate DaoPageMode enum (dapp or sdp), so you don't have to worry about that. When not in a React component, you will have to use one of the helper functions and explicitly specify which DaoPageMode is being used; that is not a very common scenario as it only happens in getStaticProps right now.

Code

const { getDaoPath, goToDao, getDaoProposalPath, goToDaoProposal, router } = useNavHelpers()

getDaoPath('junoCoreAddress')
// Returns `/dao/junoCoreAddress` in the DApp, and `/junoCoreAddress` in the SDP

goToDao('junoCoreAddress')
// Navigates to `/dao/junoCoreAddress` in the DApp, and `/junoCoreAddress` in the SDP, using `router.push`

getDaoProposalPath('junoCoreAddress', 'A2')
// Returns `/dao/junoCoreAddress/proposals/A2` in the DApp, and `/junoCoreAddress/proposals/A2` in the SDP

goToDaoProposal('junoCoreAddress', 'A2')
// Navigates to `/dao/junoCoreAddress/proposals/A2` in the DApp, and `/junoCoreAddress/proposals/A2` in the SDP, using `router.push`

Missing?

See a common pattern missing from this list? Make a suggestion in the #frontend channel in our Discord. This list is most likely incomplete.