React Query! (#1783)

.vscode/launch.json

@@ -5,10 +5,21 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Next.js: debug server-side",
-      "type": "node-terminal",
+      "type": "node",
       "request": "launch",
-      "command": "yarn dapp dev"
+      "name": "Next.js: debug server-side",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
+      "env": {
+        "NODE_OPTIONS": "--inspect"
+      },
+      "cwd": "${workspaceFolder}/apps/dapp",
+      "console": "integratedTerminal",
+      "sourceMaps": true,
+      "sourceMapPathOverrides": {
+        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
+        "webpack:///./*": "${workspaceRoot}/apps/dapp/*",
+        "webpack://?:*/*": "${workspaceFolder}/apps/dapp/*"
+      }
     },
     {
       "name": "Next.js: debug client-side",

apps/dapp/next.config.js

@@ -32,6 +32,8 @@ const config = {
   // Because @cosmos-kit/web3auth uses a Worker ESM import.
   experimental: {
     esmExternals: 'loose',
+    // Increase (to 1 MB) to allow for react-query pre-fetched hydration.
+    largePageDataBytes: 1 * 1024 * 1024,
   },
   webpack: (config) => {
     // @cosmos-kit/web3auth uses eccrypto, which uses `stream`. This needs to be

apps/dapp/package.json

@@ -33,6 +33,7 @@
     "@keplr-wallet/types": "^0.11.49",
     "@mui/icons-material": "^5.10.3",
     "@sentry/nextjs": "^7.80.0",
+    "@tanstack/react-query": "^5.40.0",
     "@types/formidable": "^2.0.5",
     "cors": "^2.8.5",
     "formidable": "^2.0.1",

apps/dapp/pages/[[...tab]].tsx

@@ -4,8 +4,17 @@
 import { GetStaticPaths, GetStaticProps } from 'next'
 
 import { serverSideTranslations } from '@dao-dao/i18n/serverSideTranslations'
-import { querySnapper } from '@dao-dao/state'
-import { Home, StatefulHomeProps } from '@dao-dao/stateful'
+import {
+  daoQueries,
+  dehydrateSerializable,
+  makeReactQueryClient,
+  querySnapper,
+} from '@dao-dao/state'
+import {
+  Home,
+  StatefulHomeProps,
+  daoQueries as statefulDaoQueries,
+} from '@dao-dao/stateful'
 import { AccountTabId, ChainId, DaoDaoIndexerChainStats } from '@dao-dao/types'
 import {
   MAINNET,
@@ -54,8 +63,13 @@ export const getStaticProps: GetStaticProps<StatefulHomeProps> = async ({
           : []),
       ].map((chainId) => getDaoInfoForChainId(chainId, []))
 
-  // Get all or chain-specific stats and TVL.
-  const [tvl, allStats, monthStats, weekStats] = await Promise.all([
+  const queryClient = makeReactQueryClient()
+
+  const [i18nProps, tvl, allStats, monthStats, weekStats] = await Promise.all([
+    // Get i18n translations props.
+    serverSideTranslations(locale, ['translation']),
+
+    // Get all or chain-specific stats and TVL.
     querySnapper<number>({
       query: chainId ? 'daodao-chain-tvl' : 'daodao-all-tvl',
       parameters: chainId ? { chainId } : undefined,
@@ -78,6 +92,17 @@ export const getStaticProps: GetStaticProps<StatefulHomeProps> = async ({
         daysAgo: 7,
       },
     }),
+
+    // Pre-fetch featured DAOs.
+    queryClient
+      .fetchQuery(daoQueries.listFeatured())
+      .then((featured) =>
+        Promise.all(
+          featured?.map((dao) =>
+            queryClient.fetchQuery(statefulDaoQueries.info(queryClient, dao))
+          ) || []
+        )
+      ),
   ])
 
   const validTvl = typeof tvl === 'number'
@@ -111,7 +136,7 @@ export const getStaticProps: GetStaticProps<StatefulHomeProps> = async ({
 
   return {
     props: {
-      ...(await serverSideTranslations(locale, ['translation'])),
+      ...i18nProps,
       // Chain-specific home page.
       ...(chainId && { chainId }),
       // All or chain-specific stats.
@@ -125,6 +150,8 @@ export const getStaticProps: GetStaticProps<StatefulHomeProps> = async ({
       },
       // Chain x/gov DAOs.
       ...(chainGovDaos && { chainGovDaos }),
+      // Dehydrate react-query state with featured DAOs preloaded.
+      reactQueryDehydratedState: dehydrateSerializable(queryClient),
     },
     // Revalidate every day.
     revalidate: 24 * 60 * 60,

apps/dapp/pages/_app.tsx

@@ -11,7 +11,7 @@ import { DefaultSeo } from 'next-seo'
 import type { AppProps } from 'next/app'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import { RecoilRoot, useRecoilState, useSetRecoilState } from 'recoil'
+import { useRecoilState, useSetRecoilState } from 'recoil'
 
 import {
   activeThemeAtom,
@@ -21,6 +21,7 @@ import {
 import {
   AppContextProvider,
   DappLayout,
+  StateProvider,
   WalletProvider,
 } from '@dao-dao/stateful'
 import {
@@ -167,9 +168,9 @@ const DApp = (props: AppProps) => (
       }}
     />
 
-    <RecoilRoot>
+    <StateProvider dehyratedState={props.pageProps.reactQueryDehydratedState}>
       <InnerApp {...props} />
-    </RecoilRoot>
+    </StateProvider>
   </>
 )
 

apps/dapp/pages/dao/[address]/[[...slug]].tsx

@@ -37,7 +37,7 @@ export const getStaticPaths: GetStaticPaths = () => ({
 
 export const getStaticProps: GetStaticProps = makeGetDaoStaticProps({
   appMode: DaoPageMode.Dapp,
-  getProps: async ({ coreAddress }) => ({
+  getProps: async ({ daoInfo: { coreAddress } }) => ({
     url: SITE_URL + getDaoPath(DaoPageMode.Dapp, coreAddress),
   }),
 })

apps/dapp/pages/dao/[address]/create.tsx

@@ -31,7 +31,7 @@ export const getStaticPaths: GetStaticPaths = () => ({
 
 export const getStaticProps: GetStaticProps = makeGetDaoStaticProps({
   appMode: DaoPageMode.Dapp,
-  getProps: async ({ t, coreAddress }) => ({
+  getProps: async ({ t, daoInfo: { coreAddress } }) => ({
     url: SITE_URL + getDaoPath(DaoPageMode.Dapp, coreAddress, 'create'),
     followingTitle: t('title.createASubDao'),
   }),

apps/dapp/pages/dao/[address]/proposals/create.tsx

@@ -39,7 +39,7 @@ export const getStaticPaths: GetStaticPaths = () => ({
 
 export const getStaticProps: GetStaticProps = makeGetDaoStaticProps({
   appMode: DaoPageMode.Dapp,
-  getProps: ({ t, coreAddress }) => ({
+  getProps: ({ t, daoInfo: { coreAddress } }) => ({
     url: SITE_URL + getDaoProposalPath(DaoPageMode.Dapp, coreAddress, 'create'),
     followingTitle: t('title.createAProposal'),
   }),

apps/sda/pages/[address]/[[...slug]].tsx

@@ -18,7 +18,7 @@ export const getStaticPaths: GetStaticPaths = () => ({
 
 export const getStaticProps: GetStaticProps = makeGetDaoStaticProps({
   appMode: DaoPageMode.Sda,
-  getProps: async ({ coreAddress }) => ({
+  getProps: async ({ daoInfo: { coreAddress } }) => ({
     url: SITE_URL + getDaoPath(DaoPageMode.Sda, coreAddress),
   }),
 })

apps/sda/pages/[address]/create.tsx

@@ -18,7 +18,7 @@ export const getStaticPaths: GetStaticPaths = () => ({
 
 export const getStaticProps: GetStaticProps = makeGetDaoStaticProps({
   appMode: DaoPageMode.Sda,
-  getProps: async ({ t, coreAddress }) => ({
+  getProps: async ({ t, daoInfo: { coreAddress } }) => ({
     url: SITE_URL + getDaoPath(DaoPageMode.Sda, coreAddress, 'create'),
     followingTitle: t('title.createASubDao'),
   }),

apps/sda/pages/[address]/proposals/create.tsx

@@ -19,7 +19,7 @@ export const getStaticPaths: GetStaticPaths = () => ({
 
 export const getStaticProps: GetStaticProps = makeGetDaoStaticProps({
   appMode: DaoPageMode.Sda,
-  getProps: ({ t, coreAddress }) => ({
+  getProps: ({ t, daoInfo: { coreAddress } }) => ({
     url: SITE_URL + getDaoProposalPath(DaoPageMode.Sda, coreAddress, 'create'),
     followingTitle: t('title.createAProposal'),
   }),

apps/sda/pages/_app.tsx

@@ -10,8 +10,8 @@ import PlausibleProvider from 'next-plausible'
 import { DefaultSeo } from 'next-seo'
 import type { AppProps } from 'next/app'
 import { useRouter } from 'next/router'
-import { Fragment, useEffect, useState } from 'react'
-import { RecoilRoot, useRecoilState, useSetRecoilState } from 'recoil'
+import { useEffect, useState } from 'react'
+import { useRecoilState, useSetRecoilState } from 'recoil'
 
 import {
   activeThemeAtom,
@@ -23,6 +23,7 @@ import {
   DaoPageWrapper,
   DaoPageWrapperProps,
   SdaLayout,
+  StateProvider,
   WalletProvider,
 } from '@dao-dao/stateful'
 import {
@@ -181,9 +182,9 @@ const Sda = (props: AppProps<DaoPageWrapperProps>) => {
         }}
       />
 
-      <RecoilRoot>
+      <StateProvider dehyratedState={props.pageProps.reactQueryDehydratedState}>
         <InnerApp setIcon={setIcon} {...props} />
-      </RecoilRoot>
+      </StateProvider>
     </>
   )
 }

packages/state/README.md

@@ -7,5 +7,7 @@ State retrieval and management for the DAO DAO UI.
 | Location                   | Summary                                                                                                                                  |
 | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | [`contracts`](./contracts) | Smart contract query and execute clients auto-generated with [@cosmwasm/ts-codegen](https://www.npmjs.com/package/@cosmwasm/ts-codegen). |
+| [`graphql`](./graphql)     | GraphQL-related state, such as the Stargaze API.                                                                                         |
 | [`indexer`](./indexer)     | Functions for accessing the DAO DAO indexer.                                                                                             |
+| [`query`](./query)         | [React Query](https://tanstack.com/query/latest/docs/framework/react/overview)-related client and queries.                               |
 | [`recoil`](./recoil)       | [Recoil](https://recoiljs.org/) atoms and selectors for loading and caching state.                                                       |

packages/state/contracts/PolytoneVoice.ts

@@ -0,0 +1,107 @@
+/**
+ * This file was automatically generated by @cosmwasm/[email protected].
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { Coin, StdFee } from '@cosmjs/amino'
+import {
+  CosmWasmClient,
+  ExecuteResult,
+  SigningCosmWasmClient,
+} from '@cosmjs/cosmwasm-stargate'
+
+import { Binary, SenderInfo } from '@dao-dao/types/contracts/PolytoneVoice'
+
+export interface PolytoneVoiceReadOnlyInterface {
+  contractAddress: string
+  senderInfoForProxy: ({ proxy }: { proxy: string }) => Promise<SenderInfo>
+}
+export class PolytoneVoiceQueryClient
+  implements PolytoneVoiceReadOnlyInterface
+{
+  client: CosmWasmClient
+  contractAddress: string
+  constructor(client: CosmWasmClient, contractAddress: string) {
+    this.client = client
+    this.contractAddress = contractAddress
+    this.senderInfoForProxy = this.senderInfoForProxy.bind(this)
+  }
+  senderInfoForProxy = async ({
+    proxy,
+  }: {
+    proxy: string
+  }): Promise<SenderInfo> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      sender_info_for_proxy: {
+        proxy,
+      },
+    })
+  }
+}
+export interface PolytoneVoiceInterface extends PolytoneVoiceReadOnlyInterface {
+  contractAddress: string
+  sender: string
+  rx: (
+    {
+      connectionId,
+      counterpartyPort,
+      data,
+    }: {
+      connectionId: string
+      counterpartyPort: string
+      data: Binary
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    _funds?: Coin[]
+  ) => Promise<ExecuteResult>
+}
+export class PolytoneVoiceClient
+  extends PolytoneVoiceQueryClient
+  implements PolytoneVoiceInterface
+{
+  client: SigningCosmWasmClient
+  sender: string
+  contractAddress: string
+  constructor(
+    client: SigningCosmWasmClient,
+    sender: string,
+    contractAddress: string
+  ) {
+    super(client, contractAddress)
+    this.client = client
+    this.sender = sender
+    this.contractAddress = contractAddress
+    this.rx = this.rx.bind(this)
+  }
+  rx = async (
+    {
+      connectionId,
+      counterpartyPort,
+      data,
+    }: {
+      connectionId: string
+      counterpartyPort: string
+      data: Binary
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    _funds?: Coin[]
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        rx: {
+          connection_id: connectionId,
+          counterparty_port: counterpartyPort,
+          data,
+        },
+      },
+      fee,
+      memo,
+      _funds
+    )
+  }
+}

packages/state/contracts/index.ts

@@ -92,4 +92,5 @@ export {
 } from './PolytoneListener'
 export { PolytoneNoteClient, PolytoneNoteQueryClient } from './PolytoneNote'
 export { PolytoneProxyClient, PolytoneProxyQueryClient } from './PolytoneProxy'
+export { PolytoneVoiceClient, PolytoneVoiceQueryClient } from './PolytoneVoice'
 export { Sg721BaseClient, Sg721BaseQueryClient } from './Sg721Base'

packages/state/index.ts

@@ -3,3 +3,4 @@ export * from './graphql'
 export * from './indexer'
 export * from './recoil'
 export * from './utils'
+export * from './query'

packages/state/indexer/query.ts

@@ -69,22 +69,19 @@ export const queryIndexer = async <T = any>({
     }),
   })
 
-  const response = await fetch(
-    INDEXER_URL +
-      `/${chainId}/${type}/${address}/${formula}?${params.toString()}`,
-    {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    }
-  )
+  const path = `/${chainId}/${type}/${address}/${formula}?${params.toString()}`
+  const response = await fetch(INDEXER_URL + path, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
 
   const body = await response.text()
 
   if (response.status >= 300) {
     throw new Error(
-      `Error querying indexer for ${type}/${address}/${formula}: ${response.status} ${body}`.trim()
+      `Error querying indexer for ${path}: ${response.status} ${body}`.trim()
     )
   }
 

packages/state/package.json

@@ -17,6 +17,7 @@
     "@cosmjs/proto-signing": "^0.32.3",
     "@cosmjs/stargate": "^0.32.3",
     "@dao-dao/utils": "2.4.0-rc.8",
+    "@tanstack/react-query": "^5.40.0",
     "graphql": "^16.8.1",
     "json5": "^2.2.0",
     "lodash.uniq": "^4.5.0",