made predicted address stand out more in instantiate2 action

packages/i18n/locales/en/translation.json

@@ -1286,6 +1286,7 @@
     "percentagesRepresentVotingPower": "Percentages represent voting power.",
     "postedOnDate": "Posted on {{date}}",
     "preReleaseExplanation": "This is a pre-release version of DAO DAO running on the {{chain}} chain.",
+    "predictedAddress": "Predicted address",
     "pressDescriptionTooltip": "This description will be included with the post's NFT metadata and may show up in wallets or other places. Think of it as a brief description of the post.",
     "priceHistoryRange_day": "Every 5 minutes for the past day",
     "priceHistoryRange_hour": "Every 5 minutes for the past hour",

packages/state/recoil/selectors/contract.ts

@@ -1,4 +1,4 @@
-import { CodeDetails, Contract } from '@cosmjs/cosmwasm-stargate'
+import { Contract } from '@cosmjs/cosmwasm-stargate'
 import { fromUtf8, toUtf8 } from '@cosmjs/encoding'
 import { selectorFamily } from 'recoil'
 
@@ -85,19 +85,6 @@ export const contractAdminSelector = selectorFamily<
       get(contractDetailsSelector(params))?.admin,
 })
 
-export const codeDetailsSelector = selectorFamily<
-  CodeDetails,
-  WithChainId<{ codeId: number }>
->({
-  key: 'contractAdmin',
-  get:
-    ({ codeId, chainId }) =>
-    async ({ get }) => {
-      const client = get(cosmWasmClientForChainSelector(chainId))
-      return await client.getCodeDetails(codeId)
-    },
-})
-
 export const contractVersionSelector = selectorFamily<
   ContractVersion,
   WithChainId<{ contractAddress: string }>

packages/stateful/actions/core/actions/Instantiate2/Component.stories.tsx

@@ -52,6 +52,10 @@ Default.args = {
         },
       ],
     },
-    instantiatedAddress: '',
+    predictedAddress: {
+      loading: false,
+      errored: false,
+      data: 'contractAddress',
+    },
   },
 }

packages/stateful/actions/core/actions/Instantiate2/Component.tsx

@@ -1,4 +1,4 @@
-import { Check, Close } from '@mui/icons-material'
+import { Check, Close, Tag } from '@mui/icons-material'
 import JSON5 from 'json5'
 import { useFieldArray, useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
@@ -9,6 +9,7 @@ import {
   Button,
   CodeMirrorInput,
   CopyToClipboard,
+  ErrorPage,
   InputErrorMessage,
   InputLabel,
   NativeCoinSelector,
@@ -17,7 +18,11 @@ import {
   useActionOptions,
   useChain,
 } from '@dao-dao/stateless'
-import { GenericTokenBalance, LoadingData } from '@dao-dao/types'
+import {
+  GenericTokenBalance,
+  LoadingData,
+  LoadingDataWithError,
+} from '@dao-dao/types'
 import { ActionComponent, ActionContextType } from '@dao-dao/types/actions'
 import {
   getNativeTokenForChainId,
@@ -46,14 +51,14 @@ export type Instantiate2Data = {
 
 export type Instantiate2Options = {
   nativeBalances: LoadingData<GenericTokenBalance[]>
-  instantiatedAddress?: string
+  predictedAddress: LoadingDataWithError<string>
 }
 
 export const Instantiate2Component: ActionComponent<Instantiate2Options> = ({
   fieldNamePrefix,
   errors,
   isCreating,
-  options: { instantiatedAddress, nativeBalances },
+  options: { predictedAddress, nativeBalances },
 }) => {
   const { t } = useTranslation()
   const { context } = useActionOptions()
@@ -69,6 +74,8 @@ export const Instantiate2Component: ActionComponent<Instantiate2Options> = ({
     name: fieldNamePrefix + 'funds',
   })
 
+  const codeId = watch((fieldNamePrefix + 'codeId') as 'codeId')
+
   const nativeToken = getNativeTokenForChainId(chainId)
 
   const sender = watch((fieldNamePrefix + 'sender') as 'sender')
@@ -108,19 +115,6 @@ export const Instantiate2Component: ActionComponent<Instantiate2Options> = ({
         </div>
       )}
 
-      <div className="flex flex-row items-center gap-6 text-text-primary">
-        <InputLabel name={t('form.instantiatedAddress') + ':'} />
-
-        {instantiatedAddress ? (
-          <CopyToClipboard
-            takeStartEnd={{ start: instantiatedAddress.length, end: 0 }}
-            value={instantiatedAddress}
-          />
-        ) : (
-          <p className="caption-text">...</p>
-        )}
-      </div>
-
       <div className="flex flex-row items-center gap-2">
         <div className="flex flex-col items-stretch gap-1">
           <InputLabel name={t('form.codeId')} />
@@ -260,6 +254,31 @@ export const Instantiate2Component: ActionComponent<Instantiate2Options> = ({
         />
         <InputErrorMessage error={errors?.admin} />
       </div>
+
+      {!!codeId && !isNaN(codeId) && codeId > 0 && (
+        <div className="flex flex-row flex-wrap items-center justify-between gap-x-4 gap-y-2 rounded-md bg-background-tertiary border border-border-interactive-hover p-4 mt-1">
+          <div className="flex flex-row gap-1.5 items-center">
+            <Tag className="!h-6 !w-6" />
+
+            <p className="primary-text text-base shrink-0">
+              {t('info.predictedAddress')}
+            </p>
+          </div>
+
+          {predictedAddress.loading ? (
+            <p className="secondary-text">{t('info.loading')}</p>
+          ) : predictedAddress.errored ? (
+            <ErrorPage error={predictedAddress.error} />
+          ) : (
+            <CopyToClipboard
+              className="min-w-0"
+              takeAll
+              tooltip={t('button.clickToCopyAddress')}
+              value={predictedAddress.data}
+            />
+          )}
+        </div>
+      )}
     </>
   )
 }

packages/stateful/actions/core/actions/Instantiate2/index.tsx

@@ -1,14 +1,11 @@
-import { instantiate2Address } from '@cosmjs/cosmwasm-stargate'
-import { fromHex, fromUtf8, toBase64, toUtf8 } from '@cosmjs/encoding'
+import { fromUtf8, toBase64, toUtf8 } from '@cosmjs/encoding'
 import { Coin } from '@cosmjs/stargate'
 import JSON5 from 'json5'
 import { nanoid } from 'nanoid'
 import { useEffect } from 'react'
 import { useFormContext } from 'react-hook-form'
-import { constSelector, useRecoilValueLoadable } from 'recoil'
 
 import { tokenQueries } from '@dao-dao/state/query'
-import { codeDetailsSelector } from '@dao-dao/state/recoil'
 import {
   ActionBase,
   BabyAngelEmoji,
@@ -38,12 +35,12 @@ import {
   getAccountAddress,
   isDecodedStargateMsg,
   isSecretNetwork,
-  maybeGetChainForChainId,
   maybeMakeIcaExecuteMessages,
   maybeMakePolytoneExecuteMessages,
   objectMatchesStructure,
 } from '@dao-dao/utils'
 
+import { useGenerateInstantiate2 } from '../../../../hooks'
 import { useTokenBalances } from '../../../hooks'
 import {
   Instantiate2Data,
@@ -58,7 +55,7 @@ const ALLOWED_ACCOUNT_TYPES: readonly AccountType[] = [
 ]
 
 const Component: ActionComponent = (props) => {
-  const { context, address } = useActionOptions()
+  const { context } = useActionOptions()
 
   const { watch, setValue } = useFormContext<Instantiate2Data>()
   const chainId = watch((props.fieldNamePrefix + 'chainId') as 'chainId')
@@ -87,16 +84,6 @@ const Component: ActionComponent = (props) => {
     }
   }, [chainId, context.accounts, props.fieldNamePrefix, sender, setValue])
 
-  // Load checksum of the contract code.
-  const codeDetailsLoadable = useRecoilValueLoadable(
-    chainId && codeId && !isNaN(codeId)
-      ? codeDetailsSelector({
-          chainId,
-          codeId,
-        })
-      : constSelector(undefined)
-  )
-
   const nativeBalances = useTokenBalances({
     filter: TokenType.Native,
     // Load selected tokens when not creating in case they are no longer
@@ -111,19 +98,12 @@ const Component: ActionComponent = (props) => {
         })),
   })
 
-  const chain = maybeGetChainForChainId(chainId)
-
-  const instantiatedAddress =
-    codeDetailsLoadable.state === 'hasValue' &&
-    codeDetailsLoadable.contents &&
-    chain
-      ? instantiate2Address(
-          fromHex(codeDetailsLoadable.contents.checksum),
-          address,
-          toUtf8(salt),
-          chain.bech32_prefix
-        )
-      : undefined
+  const predictedAddress = useGenerateInstantiate2({
+    chainId,
+    creator: sender,
+    codeId,
+    salt,
+  })
 
   return (
     <>
@@ -163,7 +143,7 @@ const Component: ActionComponent = (props) => {
                       token.chainId === chainId && owner.address === sender
                   ),
                 },
-            instantiatedAddress,
+            predictedAddress,
           }}
         />
       </ChainProvider>

packages/stateful/hooks/useGenerateInstantiate2.ts

@@ -27,6 +27,8 @@ export const useGenerateInstantiate2 = ({
     chainId &&
       creator &&
       codeId &&
+      !isNaN(codeId) &&
+      codeId > 0 &&
       // Instantiate2 not supported on Secret Network, so just don't load.
       !isSecretNetwork(chainId)
       ? contractQueries.instantiate2Address(queryClient, {

packages/stateful/hooks/useInstantiateAndExecute.ts

@@ -2,20 +2,20 @@ import {
   DeliverTxResponse,
   instantiate2Address,
 } from '@cosmjs/cosmwasm-stargate'
-import { fromHex, toUtf8 } from '@cosmjs/encoding'
+import { toUtf8 } from '@cosmjs/encoding'
 import { nanoid } from 'nanoid'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { codeDetailsSelector } from '@dao-dao/state/recoil'
-import { useCachedLoadingWithError } from '@dao-dao/stateless'
+import { contractQueries } from '@dao-dao/state/query'
 import { Coin, UnifiedCosmosMsg, cwMsgToEncodeObject } from '@dao-dao/types'
 import {
   CHAIN_GAS_MULTIPLIER,
   isSecretNetwork,
   makeWasmMessage,
 } from '@dao-dao/utils'
 
+import { useQueryLoadingDataWithError } from './query'
 import { useWallet } from './useWallet'
 
 export type InstantiateAndExecuteOptions = {
@@ -61,14 +61,14 @@ export const useInstantiateAndExecute = (
   })
 
   // Load checksum of the contract code.
-  const checksum = useCachedLoadingWithError(
+  const checksum = useQueryLoadingDataWithError(
     chainId
-      ? codeDetailsSelector({
+      ? contractQueries.codeInfo({
           chainId,
           codeId,
         })
       : undefined,
-    (data) => fromHex(data.checksum)
+    ({ dataHash }) => dataHash
   )
 
   const instantiateAndExecute: InstantiateAndExecute = useCallback(