Improved READMEs and reorganized some code.

DA0-DA0 · Nov 3, 2022 · ba96734 · ba96734
1 parent 7c6e701
commit ba96734
Show file tree

Hide file tree

Showing 91 changed files with 306 additions and 324 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -9,44 +9,47 @@ Contributions will fall under varying open-source license agreements depending
 on package. Most of our packages use [BSD 3-Clause Clear
 License](https://choosealicense.com/licenses/bsd-3-clause-clear), while our main
 `dapp` uses [GNU Affero General Public License v3.0
-](https://choosealicense.com/licenses/agpl-3.0). `LICENSE.md` files exist in
-each package describing the license that applies to them.
+](https://choosealicense.com/licenses/agpl-3.0). `LICENSE` files exist in each
+package describing the license that applies to them.
 
 In this guide you will get an overview of the contribution workflow from opening
 an issue, creating a PR, reviewing, and merging the PR.
 
 ## New contributor guide
 
-Look at [our wiki](https://github.com/DA0-DA0/dao-dao-ui/wiki/) for the most up-to-date information on how to contribute to the DAO DAO UI.
+Look at [our wiki](https://github.com/DA0-DA0/dao-dao-ui/wiki/) for the most
+up-to-date information on how to contribute to the DAO DAO UI.
 
-In general, you'll want to either (1) create issues for bugs or (2) create pull requests that close open issues. Find some information on what those terms mean below.
+In general, you'll want to either (1) create issues for bugs or (2) create pull
+requests that close open issues. Find some information on what those terms mean
+below.
 
 ### Issues
 
 #### Create a new issue
 
-If you spot a problem, [search if an issue already
-exists](https://docs.github.com/en/github/searching-for-information-on-github/searching-on-github/searching-issues-and-pull-requests#search-by-the-title-body-or-comments).
-If a related issue doesn't exist, you can open a new issue using a relevant
-[issue form](https://github.com/DA0-DA0/dao-dao-ui/issues/new/choose).
+If you spot a problem, [search for an already existing
+issue](https://docs.github.com/en/github/searching-for-information-on-github/searching-on-github/searching-issues-and-pull-requests#search-by-the-title-body-or-comments).
+If a related issue doesn't exist, you can open a [new
+issue](https://github.com/DA0-DA0/dao-dao-ui/issues/new).
 
 #### Solve an issue
 
-Scan through our [existing issues](https://github.com/DA0-DA0/dao-dao-ui/issues) to
-find one that interests you. You can narrow down the search using `labels` as
-filters. As a general rule, we don't assign issues to anyone. If you find an
-issue to work on, you are welcome to open a PR with a fix.
+Scan through our [existing issues](https://github.com/DA0-DA0/dao-dao-ui/issues)
+to find one that interests you. You can narrow down the search using `labels` as
+filters. If you find an issue to work on, you are welcome to open a PR with a
+fix.
 
 ### Make Changes
 
-#### Make changes in the UI
+### Fork the codebase
 
-1. [Install Git
-   LFS](https://docs.github.com/en/github/managing-large-files/versioning-large-files/installing-git-large-file-storage).
+You must first [install Git](https://github.com/git-guides/install-git) to work
+with the codebase.
 
-2. Fork the repository.
-
-3. Create a working branch and start with your changes!
+Follow this guide on [contributing to projects through
+forks](https://docs.github.com/en/get-started/quickstart/contributing-to-projects)
+to start.
 
 ### Commit your update
 
@@ -60,7 +63,7 @@ PR.
 - Don't forget to [link the PR to an
   issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue)
   if you are solving one. Once you submit your PR, a team member will review
-  your proposal. We may ask questions or request for additional information.
+  your proposal. We may ask questions or request additional information.
 - We may ask for changes to be made before a PR can be merged, either using
   [suggested
   changes](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/incorporating-feedback-in-your-pull-request)
@@ -71,7 +74,9 @@ PR.
   [resolved](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/commenting-on-a-pull-request#resolving-conversations).
 - If you run into any merge issues, checkout this [git
   tutorial](https://lab.github.com/githubtraining/managing-merge-conflicts) to
-  help you resolve merge conflicts and other issues.
+  help you resolve merge conflicts and other issues. Feel free to ask for help
+  resolving merge conflicts if needed; it can get confusing, and you don't want
+  to accidentally erase any of your hard work.
 
 ### Your PR is merged!
 

diff --git a/README.md b/README.md
@@ -1,15 +1,18 @@
 ## DAO DAO UI
 
-This project creates a web UI around the [DAO DAO V1 smart contracts](https://github.com/DA0-DA0/dao-contracts). Enabling users to:
+This project creates a web UI for the [DAO DAO smart
+contracts](https://github.com/DA0-DA0/dao-contracts), enabling users to:
 
-- Create a governance token based DAO or multisig
-- View proposals and treasury info
-- Easily create proposals
-- Vote on proposals
+- create a governance token-based DAO, membership-based DAO (multisig), or other
+  type of DAO.
+- create and vote on proposals.
+- view the treasury and manage it democratically.
 
 All without having to code!
 
-You can find more info in our [documentation](https://docs.daodao.zone). Join the [DAO DAO Discord](https://discord.gg/sAaGuyW3D2) if you're interested in becoming a contributor.
+You can find more info in our [documentation](https://docs.daodao.zone). Join
+the [DAO DAO Discord](https://discord.gg/sAaGuyW3D2) if you're interested in
+becoming a contributor.
 
 ## Development
 
@@ -21,38 +24,61 @@ cd dao-dao-ui
 yarn
 ```
 
-If you're here to work on UI components in isolation:
+If you're here to work on UI components in isolation, you will likely want to
+run the [Storybook](https://storybook.js.org/) server to mock up components and
+iterate quickly without having to access live chain data. Check out the
+[storybook package README](./packages/storybook/README.md) for usage
+instructions.
+
+To start the Storybook server, run this command from the root of this monorepo:
 
 ```bash
 yarn storybook start
 ```
 
-If you're here to work on app-wide stuff, run the `yarn dev` script (equivalent to running `yarn dev` from the `apps/dapp` folder) to run the main app in development mode.
+If you're here to work on any other part of the app, likely accessing live chain
+data, run the `yarn dev` script (equivalent to running `yarn dev` from the
+[`./apps/dapp`](./apps/dapp) package) to run the main app in development mode.
 
 ```bash
 yarn dev
 ```
 
-Learn more about [Turborepo](https://turborepo.org/docs).
+If something is misconfigured, check out the docs for
+[Turborepo](https://turborepo.org/docs), the monorepo build system we use.
 
 ## Packages
 
 #### `apps/`
 
-- [`dapp`](./apps/dapp/README.md)
+| App                             | Summary     |
+| ------------------------------- | ----------- |
+| [`dapp`](./apps/dapp/README.md) | DAO DAO UI. |
 
 #### `packages/`
 
-- [(wip)](https://github.com/DA0-DA0/dao-dao-ui/issues/368)
-
-### Learn More
-
-This project was bootstrapped with [`npx create-turbo@latest`](https://turborepo.org/docs/getting-started).
+| Package                                       | Summary                                                                                               |
+| --------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| [`config`](./packages/config/README.md)       | Configurations for various dev tools.                                                                 |
+| [`i18n`](./packages/i18n/README.md)           | Translation system.                                                                                   |
+| [`state`](./packages/state/README.md)         | State retrieval and management for the DAO DAO UI.                                                    |
+| [`stateful`](./packages/stateful/README.md)   | Stateful components, hooks, and systems that access and manipulate live data.                         |
+| [`stateless`](./packages/stateless/README.md) | React components, React hooks, and other stateless rendering utilities which do not access live data. |
+| [`storybook`](./packages/storybook/README.md) | [Storybook](https://storybook.js.org/) server configuration.                                          |
+| [`types`](./packages/types/README.md)         | Types used across packages.                                                                           |
+| [`utils`](./packages/utils/README.md)         | Utility functions used across packages.                                                               |
 
 ## Contributing
 
-Interested in contributing to DAO DAO? Check out [CONTRIBUTING.md](./CONTRIBUTING.md).
+Interested in contributing to DAO DAO? Check out
+[CONTRIBUTING.md](./CONTRIBUTING.md).
 
 ## Disclaimer
 
-DAO DAO TOOLING IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND. No developer or entity involved in creating the DAO DAO UI or smart contracts will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of DAO DAO tooling, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value.
+DAO DAO TOOLING IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF
+ANY KIND. No developer or entity involved in creating the DAO DAO UI or smart
+contracts will be liable for any claims or damages whatsoever associated with
+your use, inability to use, or your interaction with other users of DAO DAO
+tooling, including any direct, indirect, incidental, special, exemplary,
+punitive or consequential damages, or loss of profits, cryptocurrencies, tokens,
+or anything else of value.
diff --git a/apps/dapp/README.md b/apps/dapp/README.md
@@ -1,80 +1,108 @@
 # dao-dao-dapp
 
-Web application for creating and managing multiple DAOs. Live in production at [daodao.zone](https://daodao.zone).
+Web application for creating and managing multiple DAOs. Live in production at
+[daodao.zone](https://daodao.zone).
 
 ## Development
 
-See [development](../README.md) for working with Turborepo.
+```bash
+yarn dev
+# or
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page
+auto-updates as you edit the file.
 
 ## Environments
 
-You can choose which environment you want to connect to. The default development environment is [Juno Testnet](#testnet).
+You can choose which environment you want to connect to. The default development
+environment is [Juno Testnet](#testnet).
 
 ### Testnet
 
-Note: you can get Juno Testnet tokens ($JUNOX) from the #faucet channel in the main [Juno Discord](https://discord.com/invite/QcWPfK4gJ2). Testnet environment variables are in `.env.development` and available by default when running `yarn dev` command.
+Note: you can get Juno Testnet tokens ($JUNOX) from the #faucet channel in the
+main [Juno Discord](https://discord.com/invite/QcWPfK4gJ2). Testnet environment
+variables are in `.env.development` and available by default when running the
+`yarn dev` command.
 
 ```bash
 yarn dev # starts nextjs dev server
 ```
 
 ### Advanced: Other environments
 
-By default `yarn dev` connects to the testnet. For developing against localhost or mainnet, copy the appropriate `.env` file to `.env.local`. Having a `.env.local` file will override the default `.env.development` file when running `yarn dev`.
-
-#### Localhost
-
-This will be using a local development instance in Docker. See the [dao-contracts repo](https://github.com/DA0-DA0/dao-contracts#deploying-in-a-development-environment) for instructions on running a local development environment.
-
-```bash
-cp .env.localhost .env.local
-```
+By default `yarn dev` connects to the testnet. For developing against localhost
+or mainnet, copy the appropriate `.env` file to `.env.local`. Having a
+`.env.local` file will override the default `.env.development` file when running
+`yarn dev`.
 
 #### Mainnet
 
-NOTE: this will be using the real Juno network and real $JUNO tokens. Use with caution. We highly recommend using the [Juno Testnet .env config](#testnet) for local development.
+NOTE: this will be using the real Juno network and real $JUNO tokens. Use with
+caution. We highly recommend using the [Juno Testnet .env config](#testnet) for
+local development.
 
 ```bash
 cp .env.mainnet .env.local
 ```
 
-Then, run the development server:
+#### Localhost
+
+This will be using a local development instance in Docker. See the
+[dao-contracts
+repo](https://github.com/DA0-DA0/dao-contracts#deploying-in-a-development-environment)
+for instructions on running a local development environment.
 
 ```bash
-npm run dev
-# or
-yarn dev
+cp .env.localhost .env.local
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-Note: If you change `.env.local`, you'll sometimes need to re-add the chain to Keplr. If you [select a different chain](https://highlander-nodes.medium.com/junoswap-how-to-reset-chain-config-3e2470a9c1e1) in Keplr (like Cosmos), you can scroll down and remove the "Wasmd Test" chain, then you can re-add it by connecting your wallet.
-
 ## Requirements
 
-Please ensure you have the [Keplr wallet extension](https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap) installed in your Chrome based browser (Chrome, Brave, etc).
+Please ensure you have the [Keplr wallet
+extension](https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap)
+installed in your Chrome-based browser (Chrome, Brave, etc).
 
 ## Learn More
 
-This project was bootstrapped with [`next-cosmwasm-keplr-starter`](https://github.com/ebaker/next-cosmwasm-keplr-starter).
+This project was bootstrapped with
+[`next-cosmwasm-keplr-starter`](https://github.com/ebaker/next-cosmwasm-keplr-starter).
 
-To learn more about Next.js, CosmJS, Keplr, and Tailwind CSS - take a look at the following resources:
+To learn more about Next.js, CosmJS, Keplr, and Tailwind CSS, take a look at the
+following resources:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-- [CosmJS Repository](https://github.com/cosmos/cosmjs) -JavaScript library for Cosmos ecosystem.
-- [@cosmjs/cosmwasm-stargate Documentation](https://cosmos.github.io/cosmjs/latest/cosmwasm-stargate/modules.html) - CosmJS CosmWasm Stargate module documentation.
-- [Keplr Wallet Documentation](https://docs.keplr.app/api/cosmjs.html) - using Keplr wallet with CosmJS.
-- [Tailwind CSS Documentation](https://tailwindcss.com/docs) - utility-first CSS framework.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+- [CosmJS Repository](https://github.com/cosmos/cosmjs) -JavaScript library for
+  Cosmos ecosystem.
+- [@cosmjs/cosmwasm-stargate
+  Documentation](https://cosmos.github.io/cosmjs/latest/cosmwasm-stargate/modules.html)
+  - CosmJS CosmWasm Stargate module documentation.
+- [Keplr Wallet Documentation](https://docs.keplr.app/api/cosmjs.html) - using
+  Keplr wallet with CosmJS.
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs) - utility-first CSS
+  framework.
+
+You can check out [the Next.js GitHub
+repository](https://github.com/vercel/next.js/) - your feedback and
+contributions are welcome!
 
 ## Contributing
 
-Interested in contributing to DAO DAO? Check out [CONTRIBUTING.md](../CONTRIBUTING.md).
+Interested in contributing to DAO DAO? Check out
+[CONTRIBUTING.md](../CONTRIBUTING.md).
 
 ## Disclaimer
 
-DAO DAO TOOLING IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND. No developer or entity involved in creating the DAO DAO UI or smart contracts will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of DAO DAO tooling, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value.
+DAO DAO TOOLING IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF
+ANY KIND. No developer or entity involved in creating the DAO DAO UI or smart
+contracts will be liable for any claims or damages whatsoever associated with
+your use, inability to use, or your interaction with other users of DAO DAO
+tooling, including any direct, indirect, incidental, special, exemplary,
+punitive or consequential damages, or loss of profits, cryptocurrencies, tokens,
+or anything else of value.
diff --git a/apps/dapp/components/AppLayout.tsx b/apps/dapp/components/AppLayout.tsx
@@ -21,15 +21,15 @@ import {
   proposalCreatedCardPropsAtom,
   refreshBlockHeightAtom,
   refreshTokenUsdcPriceAtom,
-  usePinnedDaos,
-  useWalletProfile,
 } from '@dao-dao/state'
 import {
   LinkWrapper,
   PfpkNftSelectionModal,
   SidebarWallet,
   daoCreatedCardPropsAtom,
   pinnedDaoDropdownInfosSelector,
+  usePinnedDaos,
+  useWalletProfile,
 } from '@dao-dao/stateful'
 import { CommandModal, makeGenericContext } from '@dao-dao/stateful/command'
 import {

diff --git a/apps/dapp/components/dao/DaoCard.tsx b/apps/dapp/components/dao/DaoCard.tsx
@@ -4,8 +4,11 @@
 import { useWallet } from '@noahsaso/cosmodal'
 import { useEffect } from 'react'
 
-import { usePinnedDaos } from '@dao-dao/state'
-import { LinkWrapper, daoCardInfoLazyDataSelector } from '@dao-dao/stateful'
+import {
+  LinkWrapper,
+  daoCardInfoLazyDataSelector,
+  usePinnedDaos,
+} from '@dao-dao/stateful'
 import {
   DaoCard as StatelessDaoCard,
   useCachedLoadable,

diff --git a/apps/dapp/components/dao/tabs/ProposalsTab.tsx b/apps/dapp/components/dao/tabs/ProposalsTab.tsx
@@ -1,8 +1,7 @@
 // GNU AFFERO GENERAL PUBLIC LICENSE Version 3. Copyright (C) 2022 DAO DAO Contributors.
 // See the "LICENSE" file in the root directory of this package for more copyright information.
 
-import { useVotingModule } from '@dao-dao/state'
-import { ButtonLink, ProposalList } from '@dao-dao/stateful'
+import { ButtonLink, ProposalList, useVotingModule } from '@dao-dao/stateful'
 import {
   ProposalsTab as StatelessProposalsTab,
   useDaoInfoContext,

diff --git a/apps/dapp/components/dao/tabs/SubDaosTab.tsx b/apps/dapp/components/dao/tabs/SubDaosTab.tsx
@@ -3,10 +3,11 @@
 import { useEffect } from 'react'
 import { constSelector, useRecoilValueLoadable } from 'recoil'
 
-import { subDaoCardInfosSelector, useVotingModule } from '@dao-dao/state'
+import { subDaoCardInfosSelector } from '@dao-dao/state'
 import {
   ButtonLink,
   useEncodedCwdProposalSinglePrefill,
+  useVotingModule,
 } from '@dao-dao/stateful'
 import {
   SubDaosTab as StatelessSubDaosTab,

diff --git a/apps/dapp/components/dao/tabs/TreasuryAndNftsTab.tsx b/apps/dapp/components/dao/tabs/TreasuryAndNftsTab.tsx
@@ -5,11 +5,11 @@ import { useEffect } from 'react'
 import {
   nftCardInfosSelector,
   treasuryTokenCardInfosSelector,
-  useVotingModule,
 } from '@dao-dao/state'
 import {
   StargazeNftImportModal,
   useEncodedCwdProposalSinglePrefill,
+  useVotingModule,
 } from '@dao-dao/stateful'
 import { useActionForKey } from '@dao-dao/stateful/actions'
 import {