Search userContract when is unknown (#278)

* Search userContract when is unknown

* Removing duplicated ContractDetailsInteraction

src/domain/UserContractDetails.ts

@@ -16,7 +16,8 @@ export interface UserContractDetails {
   date: string
   type: ContractType
   abi?: Record<string, unknown>
-  external: boolean // Contracts not deployed by PCW are custom and external
+  // TODO
+  external: boolean // Represents a contract that has not been aggregated by the connected wallet accounts.
   hidden: boolean
 }
 

src/domain/repositories/DeploymentRepository.ts

@@ -1,12 +1,16 @@
 import { ChainId } from '@/services/useink/chains'
 import { TokenType } from '../TokenType'
-import { UserContractDetailsDraft } from '../UserContractDetails'
+import {
+  UserContractDetails,
+  UserContractDetailsDraft
+} from '../UserContractDetails'
 
-export type ContractType = TokenType | 'custom'
+export type ContractType = TokenType | 'custom' // custom contracts are generally deployed outside the PCW
 export type UpdateDeployment = Partial<UserContractDetailsDraft>
 
 export interface IDeploymentsRepository<A, B> {
   add: (deployment: UserContractDetailsDraft) => Promise<A>
   findBy: (userAddress: string, network?: ChainId) => Promise<B>
   updateBy: (deployment: UpdateDeployment) => Promise<A>
+  get(uuid: string): Promise<UserContractDetails | undefined>
 }

src/hooks/userContracts/useFindUserContract.ts

@@ -1,6 +1,6 @@
 import { useLocalDbContext } from '@/context/LocalDbContext'
 import { UserContractDetails } from '@/domain'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 interface UseFindUserContract {
   userContract: UserContractDetails | undefined
@@ -14,15 +14,30 @@ export function useFindUserContract(uuid: string): UseFindUserContract {
   >()
   const [isLoading, setIsLoading] = useState(false)
   const [requested, setRequested] = useState(false)
-  const { userContractsRepository, apiCompileContractRepository } =
-    useLocalDbContext()
+  const {
+    userContractsRepository,
+    apiCompileContractRepository,
+    apiDeploymentsRepository
+  } = useLocalDbContext()
+
+  const getUserContract = useCallback(
+    async (uuid: UserContractDetails['uuid']) => {
+      let knownUserContract = await userContractsRepository.get(uuid)
+
+      if (!knownUserContract) {
+        knownUserContract = await apiDeploymentsRepository.get(uuid)
+      }
+
+      return knownUserContract
+    },
+    [apiDeploymentsRepository, userContractsRepository]
+  )
 
   useEffect(() => {
     if (!uuid) return
 
     setIsLoading(true)
-    userContractsRepository
-      .get(uuid)
+    getUserContract(uuid)
       .then(async response => {
         if (response && !response?.abi) {
           const compiled = await apiCompileContractRepository.search(
@@ -36,7 +51,12 @@ export function useFindUserContract(uuid: string): UseFindUserContract {
         setRequested(true)
       })
       .finally(() => setIsLoading(false))
-  }, [apiCompileContractRepository, userContractsRepository, uuid])
+  }, [
+    apiCompileContractRepository,
+    getUserContract,
+    userContractsRepository,
+    uuid
+  ])
 
   return { userContract, isLoading, requested }
 }

src/pages/contract-detail/index.tsx

@@ -1,20 +1,16 @@
 import { ContractDetailSkeleton } from '@/view/CustomContracts/detail/SkeletonContractDetail'
 import MainContainer from '@/view/layout/MainContainer'
 import ContractDetail from '@/view/ContractDetailView'
-import { useModalBehaviour } from '@/hooks/useModalBehaviour'
 import { useRouter } from 'next/router'
 import { useFindUserContract } from '@/hooks/userContracts/useFindUserContract'
 import { useHasMounted } from '@/hooks/useHasMounted'
-import { useDownloadMetadata } from '@/view/components/ContractsTable/useDownloadMetadata'
 
 export default function CustomContractDetailPage() {
   const router = useRouter()
   const { uuid } = router.query
   const { userContract, requested, isLoading } = useFindUserContract(
     uuid as string
   )
-  const { onDownloadSource } = useDownloadMetadata(userContract)
-  const modalBehaviour = useModalBehaviour()
   const hasMounted = useHasMounted()
 
   if (!userContract || !hasMounted || isLoading) {
@@ -28,13 +24,7 @@ export default function CustomContractDetailPage() {
 
   return (
     <MainContainer>
-      {userContract && (
-        <ContractDetail
-          modalBehaviour={modalBehaviour}
-          onDownloadSource={onDownloadSource}
-          userContract={userContract}
-        />
-      )}
+      {userContract && <ContractDetail userContract={userContract} />}
     </MainContainer>
   )
 }

src/view/ContractDetailView/ContractInteractionForm./ReadMethodsForm.tsx → src/view/ContractDetailView/ContractInteractionForm/ReadMethodsForm.tsx

@@ -28,9 +28,10 @@ export function ReadMethodsForm({
   const [outcome, setOutcome] = useState<string>('')
 
   useEffect(() => {
+    if (!expanded) return
     caller.send(inputData)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputData])
+  }, [inputData, expanded])
 
   useEffect(() => {
     if (caller.result?.ok) {

src/view/ContractDetailView/ContractsTabInteraction.tsx

@@ -10,7 +10,7 @@ import {
 import { useContractPromiseFromSource } from '@/hooks/useContractPromise'
 import { FallbackSpinner } from '@/components/FallbackSpinner'
 import { ContractPromise, Registry } from '@/services/substrate/types'
-import { ContractInteractionForm } from './ContractInteractionForm.'
+import { ContractInteractionForm } from './ContractInteractionForm'
 
 const types: ContractTabType[] = ['Read Contract', 'Write Contract']
 const groupedIndex: Record<ContractTabType, keyof GroupedAbiMessages> = {

src/view/ContractDetailView/index.tsx

@@ -8,7 +8,6 @@ import ShareIcon from '@mui/icons-material/Share'
 import DownloadIcon from '@mui/icons-material/Download'
 import { getChain } from '@/constants/chains'
 import NetworkBadge from '@/view/components/NetworkBadge'
-import { UseModalBehaviour } from '@/hooks/useModalBehaviour'
 import { UserContractDetails, UserContractDetailsWithAbi } from '@/domain'
 import {
   isoDate,
@@ -31,19 +30,15 @@ import CancelIcon from '@mui/icons-material/Cancel'
 
 import { UpdateDeployment } from '@/domain/repositories/DeploymentRepository'
 import { useUpdateUserContracts } from '@/hooks/userContracts/useUpdateUserContracts'
-import { UserContractTableItem } from '@/domain/wizard/ContractTableItem'
+import { useDownloadMetadata } from '@/components/ContractsTable/useDownloadMetadata'
+
 interface Props {
-  modalBehaviour: UseModalBehaviour
   userContract: UserContractDetails
-  onDownloadSource: (contract: UserContractTableItem) => void
 }
 interface AbiSource {
   source: { language: string }
 }
-export default function ContractDetail({
-  userContract,
-  onDownloadSource
-}: Props): JSX.Element {
+export default function ContractDetail({ userContract }: Props): JSX.Element {
   const [openShareModal, setOpenShareModal] = React.useState(false)
   const url = getUserContractUrl(userContract)
   const { accountConnected } = useNetworkAccountsContext()
@@ -57,6 +52,7 @@ export default function ContractDetail({
   const anyInvalidField: boolean = Object.values(formData).some(
     field => (field.required && !field.value) || field.error !== null
   )
+  const { onDownloadSource } = useDownloadMetadata(userContract)
 
   const handleUpdateContractName = () => {
     const updatedContract: UpdateDeployment = {
@@ -253,7 +249,7 @@ export default function ContractDetail({
             </Tooltip>
           </Typography>
           <Stack direction="row" alignItems="center">
-            <Typography variant="caption">Deployed by</Typography>
+            <Typography variant="caption">Added by</Typography>
             {''}
             <MonoTypography sx={{ fontSize: '0.8rem' }}>
               {truncateAddress(userContract.userAddress, 4)}