Reuse @cosmjs clients (#480)

* ChainClientRouter and its integration

* upd comment

* pr feedback

apps/dapp/pages/dao/[contractAddress]/index.tsx

@@ -5,7 +5,6 @@ import { useRouter } from 'next/router'
 
 import { useRecoilState, useRecoilValue } from 'recoil'
 
-import { CosmWasmClient } from '@cosmjs/cosmwasm-stargate'
 import { LibraryIcon, PlusSmIcon, UsersIcon } from '@heroicons/react/outline'
 import { useThemeContext } from 'ui'
 
@@ -43,6 +42,7 @@ import {
   walletTokenBalanceLoading,
 } from 'selectors/treasury'
 import { addToken } from 'util/addToken'
+import { cosmWasmClientRouter } from 'util/chainClientRouter'
 import { getFastAverageColor } from 'util/colors'
 import { convertMicroDenomToDenomWithDecimals } from 'util/conversion'
 
@@ -324,7 +324,7 @@ export const getStaticProps: GetStaticProps<StaticProps> = async ({
   }
 
   try {
-    const client = await CosmWasmClient.connect(CHAIN_RPC_ENDPOINT)
+    const client = await cosmWasmClientRouter.connect(CHAIN_RPC_ENDPOINT)
     const daoInfo = await client.queryContractSmart(contractAddress, {
       get_config: {},
     })

apps/dapp/pages/multisig/[contractAddress]/index.tsx

@@ -5,7 +5,6 @@ import { useRouter } from 'next/router'
 
 import { useRecoilState, useRecoilValue } from 'recoil'
 
-import { CosmWasmClient } from '@cosmjs/cosmwasm-stargate'
 import { Threshold } from '@dao-dao/types/contracts/cw3-multisig'
 import {
   ScaleIcon,
@@ -35,6 +34,7 @@ import {
   sigSelector,
   totalWeight,
 } from 'selectors/multisigs'
+import { cosmWasmClientRouter } from 'util/chainClientRouter'
 import { getFastAverageColor } from 'util/colors'
 
 const thresholdString = (t: Threshold) => {
@@ -232,7 +232,7 @@ export const getStaticProps: GetStaticProps<StaticProps> = async ({
   }
 
   try {
-    const client = await CosmWasmClient.connect(CHAIN_RPC_ENDPOINT)
+    const client = await cosmWasmClientRouter.connect(CHAIN_RPC_ENDPOINT)
     const sigInfo = await client.queryContractSmart(contractAddress, {
       get_config: {},
     })

apps/dapp/selectors/cosm.ts

@@ -1,13 +1,17 @@
 import { selector, selectorFamily, atom } from 'recoil'
-import { GasPrice, StargateClient } from '@cosmjs/stargate'
+
+import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+import { GasPrice } from '@cosmjs/stargate'
+
 import {
-  CosmWasmClient,
-  SigningCosmWasmClient,
-} from '@cosmjs/cosmwasm-stargate'
+  cosmWasmClientRouter,
+  stargateClientRouter,
+} from 'util/chainClientRouter'
+import { NATIVE_DENOM, GAS_PRICE } from 'util/constants'
+
+import { localStorageEffect } from '../atoms/localStorageEffect'
 import { connectKeplrWithoutAlerts } from '../services/keplr'
 import { walletTokenBalanceUpdateCountAtom } from './treasury'
-import { localStorageEffect } from '../atoms/localStorageEffect'
-import { NATIVE_DENOM, GAS_PRICE } from 'util/constants'
 
 export type WalletConnection = 'keplr' | ''
 
@@ -18,14 +22,14 @@ const CHAIN_ID = process.env.NEXT_PUBLIC_CHAIN_ID
 export const stargateClient = selector({
   key: 'stargateClient',
   get: () => {
-    return StargateClient.connect(CHAIN_RPC_ENDPOINT)
+    return stargateClientRouter.connect(CHAIN_RPC_ENDPOINT)
   },
 })
 
 export const cosmWasmClient = selector({
   key: 'cosmWasmClient',
   get: () => {
-    return CosmWasmClient.connect(CHAIN_RPC_ENDPOINT)
+    return cosmWasmClientRouter.connect(CHAIN_RPC_ENDPOINT)
   },
 })
 

apps/dapp/util/chainClientRouter.ts

@@ -0,0 +1,64 @@
+import { CosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+import { StargateClient } from '@cosmjs/stargate'
+
+type ChainClientRoutes<T> = {
+  [rpcEndpoint: string]: T
+}
+
+type HandleConnect<T> = (rpcEndpoint: string) => Promise<T>
+
+/*
+ * This is a workaround for `@cosmjs` clients to avoid connecting to the chain more than once.
+ *
+ * @example
+ * export const stargateClientRouter = new ChainClientRouter({
+ *   handleConnect: (rpcEndpoint: string) => StargateClient.connect(rpcEndpoint),
+ * })
+ *
+ * const client = await stargateClientRouter.connect(RPC_ENDPOINT);
+ *
+ * const queryResponse = await client.queryContractSmart(...);
+ *  */
+class ChainClientRouter<T> {
+  private readonly handleConnect: HandleConnect<T>
+  private instances: ChainClientRoutes<T> = {}
+
+  constructor({ handleConnect }: { handleConnect: HandleConnect<T> }) {
+    this.handleConnect = handleConnect
+  }
+
+  /*
+   * Connect to the chain and return the client
+   * or return an existing instance of the client.
+   *  */
+  async connect(rpcEndpoint: string) {
+    if (!this.getClientInstance(rpcEndpoint)) {
+      const instance = await this.handleConnect(rpcEndpoint)
+      this.setClientInstance(rpcEndpoint, instance)
+    }
+
+    return this.getClientInstance(rpcEndpoint)
+  }
+
+  private getClientInstance(rpcEndpoint: string) {
+    return this.instances[rpcEndpoint]
+  }
+
+  private setClientInstance(rpcEndpoint: string, client: T) {
+    this.instances[rpcEndpoint] = client
+  }
+}
+
+/*
+ * Router for connecting to `CosmWasmClient`.
+ *  */
+export const cosmWasmClientRouter = new ChainClientRouter({
+  handleConnect: (rpcEndpoint: string) => CosmWasmClient.connect(rpcEndpoint),
+})
+
+/*
+ * Router for connecting to `StargateClient`.
+ *  */
+export const stargateClientRouter = new ChainClientRouter({
+  handleConnect: (rpcEndpoint: string) => StargateClient.connect(rpcEndpoint),
+})