Merge pull request #1316 from DA0-DA0/development

Deploy Cosmos Kit

apps/dapp/next.config.js

@@ -25,11 +25,15 @@ const config = {
     '@dao-dao/stateful',
     '@dao-dao/i18n',
     '@dao-dao/types',
-    '@noahsaso/cosmodal',
+    '@cosmos-kit/web3auth',
   ],
+  // Because @cosmos-kit/web3auth uses a Worker ESM import.
+  experimental: {
+    esmExternals: 'loose',
+  },
   webpack: (config) => {
-    // @noahsaso/cosmodal uses @toruslabs/eccrypto, which uses `stream`. This
-    // needs to be polyfilled.
+    // @cosmos-kit/web3auth uses eccrypto, which uses `stream`. This needs to be
+    // polyfilled.
     config.resolve.alias['stream'] = 'stream-browserify'
     return config
   },

apps/dapp/package.json

@@ -16,7 +16,6 @@
     "ts:watch": "ts --watch"
   },
   "dependencies": {
-    "@cosmjs/encoding": "^0.30.1",
     "@dao-dao/i18n": "2.2.0",
     "@dao-dao/state": "2.2.0",
     "@dao-dao/stateful": "2.2.0",
@@ -31,7 +30,6 @@
     "@keplr-wallet/stores": "^0.11.49",
     "@keplr-wallet/types": "^0.11.49",
     "@mui/icons-material": "^5.10.3",
-    "@noahsaso/cosmodal": "0.11.4",
     "@sentry/nextjs": "^7.7.0",
     "@types/formidable": "^2.0.5",
     "cors": "^2.8.5",

apps/dapp/pages/_app.tsx

@@ -17,6 +17,7 @@ import {
   activeThemeAtom,
   mountedInBrowserAtom,
   navigatingToHrefAtom,
+  web3AuthPromptAtom,
 } from '@dao-dao/state'
 import {
   AppContextProvider,
@@ -29,7 +30,7 @@ import {
   ThemeProvider,
   ToastNotifications,
 } from '@dao-dao/stateless'
-import { DaoPageMode, Web3AuthPrompt } from '@dao-dao/types'
+import { DaoPageMode } from '@dao-dao/types'
 import { SITE_IMAGE, SITE_URL } from '@dao-dao/utils'
 
 const InnerApp = ({ Component, pageProps }: AppProps) => {
@@ -43,9 +44,7 @@ const InnerApp = ({ Component, pageProps }: AppProps) => {
   const [theme, setTheme] = useRecoilState(activeThemeAtom)
   const [themeChangeCount, setThemeChangeCount] = useState(0)
 
-  const [web3AuthPrompt, setWeb3AuthPrompt] = useState<
-    Web3AuthPrompt | undefined
-  >()
+  const setWeb3AuthPrompt = useSetRecoilState(web3AuthPromptAtom)
 
   // Indicate that we are mounted.
   useEffect(() => setMountedInBrowser(true), [setMountedInBrowser])
@@ -82,11 +81,8 @@ const InnerApp = ({ Component, pageProps }: AppProps) => {
         <PageLoader />
       ) : (
         <WalletProvider setWeb3AuthPrompt={setWeb3AuthPrompt}>
-          {/* AppContextProvider uses wallet context. */}
-          <AppContextProvider
-            mode={DaoPageMode.Dapp}
-            web3AuthPrompt={web3AuthPrompt}
-          >
+          {/* AppContextProvider uses wallet context via the inbox. */}
+          <AppContextProvider mode={DaoPageMode.Dapp}>
             <DappLayout>
               <Component {...pageProps} />
             </DappLayout>

apps/dapp/pages/index.tsx

@@ -1,7 +1,6 @@
 // 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 { useWallet } from '@noahsaso/cosmodal'
 import { GetStaticProps, NextPage } from 'next'
 import { useSetRecoilState } from 'recoil'
 
@@ -13,11 +12,12 @@ import {
   ProfileHomeCard,
   useLoadingFeaturedDaoCardInfos,
   useLoadingFollowingDaoCardInfos,
+  useWallet,
 } from '@dao-dao/stateful'
 import { Home } from '@dao-dao/stateless'
 
 const HomePage: NextPage = () => {
-  const { connected } = useWallet()
+  const { isWalletConnected } = useWallet()
 
   const setCommandModalVisible = useSetRecoilState(commandModalVisibleAtom)
 
@@ -26,7 +26,7 @@ const HomePage: NextPage = () => {
 
   return (
     <Home
-      connected={connected}
+      connected={isWalletConnected}
       featuredDaosProps={{
         Component: DaoCard,
         items: featuredDaosLoading,
@@ -37,7 +37,7 @@ const HomePage: NextPage = () => {
         followingDaos: followingDaosLoading,
       }}
       rightSidebarContent={
-        connected ? <ProfileHomeCard /> : <ProfileDisconnectedCard />
+        isWalletConnected ? <ProfileHomeCard /> : <ProfileDisconnectedCard />
       }
     />
   )

apps/sda/next.config.js

@@ -25,11 +25,15 @@ const config = {
     '@dao-dao/stateful',
     '@dao-dao/i18n',
     '@dao-dao/types',
-    '@noahsaso/cosmodal',
+    '@cosmos-kit/web3auth',
   ],
+  // Because @cosmos-kit/web3auth uses a Worker ESM import.
+  experimental: {
+    esmExternals: 'loose',
+  },
   webpack: (config) => {
-    // @noahsaso/cosmodal uses @toruslabs/eccrypto, which uses `stream`. This
-    // needs to be polyfilled.
+    // @cosmos-kit/web3auth uses eccrypto, which uses `stream`. This needs to be
+    // polyfilled.
     config.resolve.alias['stream'] = 'stream-browserify'
     return config
   },

apps/sda/package.json

@@ -30,7 +30,6 @@
     "@keplr-wallet/stores": "^0.11.49",
     "@keplr-wallet/types": "^0.11.49",
     "@mui/icons-material": "^5.10.3",
-    "@noahsaso/cosmodal": "0.11.4",
     "@sentry/nextjs": "^7.7.0",
     "@types/formidable": "^2.0.5",
     "cors": "^2.8.5",

apps/sda/pages/_app.tsx

@@ -17,6 +17,7 @@ import {
   activeThemeAtom,
   mountedInBrowserAtom,
   navigatingToHrefAtom,
+  web3AuthPromptAtom,
 } from '@dao-dao/state'
 import {
   AppContextProvider,
@@ -31,7 +32,7 @@ import {
   ThemeProvider,
   ToastNotifications,
 } from '@dao-dao/stateless'
-import { DaoPageMode, Web3AuthPrompt } from '@dao-dao/types'
+import { DaoPageMode } from '@dao-dao/types'
 import { SITE_IMAGE, SITE_URL } from '@dao-dao/utils'
 
 const InnerApp = ({
@@ -51,9 +52,7 @@ const InnerApp = ({
   const [theme, setTheme] = useRecoilState(activeThemeAtom)
   const [themeChangeCount, setThemeChangeCount] = useState(0)
 
-  const [web3AuthPrompt, setWeb3AuthPrompt] = useState<
-    Web3AuthPrompt | undefined
-  >()
+  const setWeb3AuthPrompt = useSetRecoilState(web3AuthPromptAtom)
 
   // Indicate that we are mounted.
   useEffect(() => setMountedInBrowser(true), [setMountedInBrowser])
@@ -95,11 +94,8 @@ const InnerApp = ({
         <Component {...pageProps} />
       ) : (
         <WalletProvider setWeb3AuthPrompt={setWeb3AuthPrompt}>
-          {/* AppContextProvider uses wallet context. */}
-          <AppContextProvider
-            mode={DaoPageMode.Sda}
-            web3AuthPrompt={web3AuthPrompt}
-          >
+          {/* AppContextProvider uses wallet context via the inbox. */}
+          <AppContextProvider mode={DaoPageMode.Sda}>
             {/* All non-error/discord redirect SDA pages are a DAO page. */}
             <DaoPageWrapper setIcon={setIcon} {...pageProps}>
               {/* SdaLayout needs DaoPageWrapper for navigation tabs. */}

packages/config/ts/nextjs.json

@@ -14,6 +14,6 @@
     "resolveJsonModule": true,
     "strict": false,
     "strictNullChecks": true,
-    "target": "es5"
+    "target": "es2020"
   }
 }

packages/config/ts/react-library.json

@@ -6,7 +6,7 @@
     "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
-    "target": "es6",
+    "target": "es2020",
     "allowJs": true,
     "noEmit": true
   }

packages/email/tsconfig.json

@@ -5,7 +5,7 @@
     "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "CommonJS",
-    "target": "es6",
+    "target": "es2020",
     "allowJs": true,
     "noEmit": true
   }

packages/i18n/locales/en/translation.json

@@ -166,6 +166,7 @@
       "stake": "Stake",
       "unstake": "Unstake"
     },
+    "stopConnecting": "Stop connecting",
     "stopFollowing": "Stop following",
     "submit": "Submit",
     "toggleTheme": "Toggle theme",
@@ -667,7 +668,7 @@
     "compensationCycleClosedAwaitingCompletion": "Contributions and ratings have been submitted. Review the results and create a proposal to complete the cycle.",
     "completeRelayOrLoseFunds": "Make sure you have completed the relaying process, or you may lose the tokens you sent to the relayers to pay fees.",
     "completed": "Completed",
-    "configureWalletModalExplanation": "You have Keplr installed, but it doesn't seem like you've set up a wallet. To continue, open the Keplr extension and set up a wallet.\nTo open the Keplr extension, press the puzzle icon in the top right of your browser and then press the Keplr button. Once you've done that, a new page will open where you'll be able to create a new account. Configure your wallet to continue.",
+    "configureWalletModalExplanation": "You have a wallet extension installed, but it doesn't seem like you've set up a wallet. Create a wallet to continue.",
     "connectedTo": "Connected to {{name}}",
     "copiedAddressToClipboard": "Copy address to clipboard",
     "copiedDaoAddress": "Copied DAO address",
@@ -1143,6 +1144,7 @@
     "executeSmartContract": "Execute Smart Contract",
     "existingToken": "Existing token",
     "expires": "Expires",
+    "extension": "Extension",
     "factoryToken": "Factory token",
     "featuredDaos": "Featured DAOs",
     "feeShare": "Fee share",
@@ -1167,6 +1169,7 @@
     "initialTokenDistribution": "Initial Token Distribution",
     "instantiateSmartContract": "Instantiate Smart Contract",
     "lastUpdated": "Last updated",
+    "ledger": "Ledger",
     "logInWith": "Log in with...",
     "loggedIn": "Logged in",
     "loggedOut": "Logged out",
@@ -1354,6 +1357,7 @@
     "votingProgress": "Voting Progress",
     "votingWeight": "Voting weight",
     "wallet": "Wallet",
+    "walletConnect": "WalletConnect",
     "watchOut": "Watch out!",
     "website": "Website",
     "when": "When",

packages/state/package.json

@@ -25,7 +25,6 @@
   "devDependencies": {
     "@dao-dao/config": "2.2.0",
     "@dao-dao/types": "2.2.0",
-    "@noahsaso/cosmodal": "0.11.4",
     "typescript": "^4.8.3"
   },
   "prettier": "@dao-dao/config/prettier"

packages/state/recoil/atoms/chain.ts

@@ -3,6 +3,8 @@ import { atom, atomFamily } from 'recoil'
 
 import { DEFAULT_CHAIN_ID } from '@dao-dao/utils'
 
+import { localStorageEffectJSON } from '../effects'
+
 export const signingCosmWasmClientAtom = atomFamily<
   SigningCosmWasmClient | undefined,
   { chainId: string }
@@ -14,4 +16,5 @@ export const signingCosmWasmClientAtom = atomFamily<
 export const walletChainIdAtom = atom<string>({
   key: 'walletChainId',
   default: DEFAULT_CHAIN_ID,
+  effects: [localStorageEffectJSON],
 })

packages/state/recoil/atoms/misc.ts

@@ -1,5 +1,7 @@
 import { atom } from 'recoil'
 
+import { Web3AuthPrompt } from '@dao-dao/types'
+
 import { localStorageEffectJSON } from '../effects'
 
 // Utility atom to store if the app is running in the browser
@@ -28,21 +30,12 @@ export const betaWarningAcceptedAtom = atom<boolean>({
   effects: [localStorageEffectJSON],
 })
 
-export const installWarningVisibleAtom = atom<boolean>({
-  key: 'installWarningVisible',
+export const updateProfileNftVisibleAtom = atom<boolean>({
+  key: 'updateProfileNftVisible',
   default: false,
 })
 
-export const noKeplrAccountAtom = atom<boolean>({
-  key: 'noKeplrAccountAtom',
-  default: false,
-})
-
-// If true, will display wallet modal. The wallet modal will always be visible
-// when connecting to a wallet. This atom is used to display the wallet modal
-// when not actively connecting to a wallet, likely to display the connected
-// wallet or switch to another one.
-export const walletModalVisibleAtom = atom<boolean>({
-  key: 'walletModalVisible',
-  default: false,
+export const web3AuthPromptAtom = atom<Web3AuthPrompt | undefined>({
+  key: 'web3AuthPrompt',
+  default: undefined,
 })

packages/stateful/actions/core/nfts/MintNft/InstantiateNftCollection.tsx

@@ -1,4 +1,3 @@
-import { useWallet } from '@noahsaso/cosmodal'
 import { useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import toast from 'react-hot-toast'
@@ -8,6 +7,7 @@ import { ActionComponent, ActionContextType, ActionKey } from '@dao-dao/types'
 import { CHAIN_GAS_MULTIPLIER, processError } from '@dao-dao/utils'
 
 import { AddressInput } from '../../../../components'
+import { useWallet } from '../../../../hooks'
 import { useActionOptions } from '../../../react'
 import { InstantiateNftCollection as StatelessInstantiateNftCollection } from './stateless/InstantiateNftCollection'
 
@@ -17,11 +17,10 @@ export const InstantiateNftCollection: ActionComponent = (props) => {
   const {
     context,
     chainContext: {
-      chainId,
       config: { codeIds },
     },
   } = useActionOptions()
-  const { address: walletAddress, signingCosmWasmClient } = useWallet(chainId)
+  const { address: walletAddress, getSigningCosmWasmClient } = useWallet()
 
   const [instantiating, setInstantiating] = useState(false)
 
@@ -33,11 +32,13 @@ export const InstantiateNftCollection: ActionComponent = (props) => {
       return
     }
 
-    if (!signingCosmWasmClient || !walletAddress) {
+    if (!walletAddress) {
       toast.error(t('error.logInToContinue'))
       return
     }
 
+    const signingCosmWasmClient = await getSigningCosmWasmClient()
+
     setInstantiating(true)
     try {
       const { contractAddress } = await signingCosmWasmClient.instantiate(

packages/stateful/actions/core/nfts/TransferNft/index.tsx

@@ -1,5 +1,4 @@
 import { toBase64, toUtf8 } from '@cosmjs/encoding'
-import { useWallet } from '@noahsaso/cosmodal'
 import { useCallback } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { constSelector, useRecoilValue } from 'recoil'
@@ -21,6 +20,7 @@ import {
 } from '@dao-dao/utils'
 
 import { AddressInput } from '../../../../components'
+import { useWallet } from '../../../../hooks'
 import {
   nftCardInfoSelector,
   nftCardInfosForDaoSelector,
@@ -41,8 +41,7 @@ export type TransferNftData = {
 }
 
 const useDefaults: UseDefaults<TransferNftData> = () => {
-  const { chain_id } = useActionOptions().chain
-  const { address: walletAddress = '' } = useWallet(chain_id)
+  const { address: walletAddress = '' } = useWallet()
 
   return {
     collection: '',

packages/stateful/actions/core/treasury/Spend/index.tsx

@@ -1,5 +1,4 @@
 import { coin } from '@cosmjs/amino'
-import { useWallet } from '@noahsaso/cosmodal'
 import { MsgTransfer } from 'cosmjs-types/ibc/applications/transfer/v1/tx'
 import Long from 'long'
 import { useCallback, useEffect, useState } from 'react'
@@ -41,6 +40,7 @@ import {
 } from '@dao-dao/utils'
 
 import { AddressInput } from '../../../../components'
+import { useWallet } from '../../../../hooks/useWallet'
 import { entitySelector } from '../../../../recoil'
 import { useTokenBalances } from '../../../hooks/useTokenBalances'
 import { useActionOptions } from '../../../react'
@@ -55,7 +55,7 @@ const useDefaults: UseDefaults<SpendData> = () => {
   const {
     chain: { chain_id: chainId },
   } = useActionOptions()
-  const { address: walletAddress = '' } = useWallet(chainId)
+  const { address: walletAddress = '' } = useWallet()
 
   return {
     chainId,