Adding network validation, explorer link (#283)

* Adding network validation * Adding Explorer link * Update NetworkSelect.tsx
protofire · Nov 16, 2023 · ffc21fd · ffc21fd
1 parent c2314b4
commit ffc21fd
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 14 deletions.
diff --git a/src/constants/chains.ts b/src/constants/chains.ts
@@ -53,7 +53,7 @@ export function createIChainWithRPCAndSave(
 ): ChainExtended {
   const customChain: ChainExtended = {
     id: OPTION_FOR_CUSTOM_NETWORK,
-    name: `Custom ${name}`,
+    name: `${name}`,
     account: '*25519',
     rpcs: [rpc],
     logo: {

diff --git a/src/hooks/useContractPromise.ts b/src/hooks/useContractPromise.ts
@@ -1,4 +1,4 @@
-import { Abi, ContractPromise } from '@/services/substrate/types'
+import { Abi, ApiPromise, ContractPromise } from '@/services/substrate/types'
 import { useEffect, useMemo, useState } from 'react'
 
 import { MetadataState, UserContractDetailsWithAbi } from '@/domain'
@@ -42,9 +42,9 @@ export function useContractPromise(
 const metadataManager = new MetadataManager()
 
 export function useContractPromiseFromSource(
-  userContract: UserContractDetailsWithAbi
+  userContract: UserContractDetailsWithAbi,
+  apiPromise: ApiPromise | undefined
 ) {
-  const { apiPromise } = useNetworkApi()
   const derivedMetadata = useMemo(
     () =>
       metadataManager.deriveFromJson(

diff --git a/src/view/ContractDetailView/ContractInteractionForm/ReadMethodsForm.tsx b/src/view/ContractDetailView/ContractInteractionForm/ReadMethodsForm.tsx
@@ -8,7 +8,7 @@ import { useContractCaller } from '@/hooks/useContractCaller'
 import { CopyToClipboardButton, StyledTextField } from '@/view/components'
 
 type Props = React.PropsWithChildren<
-  Omit<ContractInteractionProps, 'type'> & {
+  Omit<ContractInteractionProps, 'type' | 'userContract'> & {
     abiParams: AbiParam[]
     inputData: unknown[] | undefined
   }

diff --git a/src/view/ContractDetailView/ContractInteractionForm/WriteMethodsForm.tsx b/src/view/ContractDetailView/ContractInteractionForm/WriteMethodsForm.tsx
@@ -9,6 +9,7 @@ import { DryRunMessage } from './DryRunMessage'
 import { useContractTx } from '@/hooks/useContractTx'
 import { shouldDisable } from '@/services/useink/utils/txUtils'
 import { useRecentlyClicked } from '@/hooks/useRecentlyClicked'
+import { ExplorerLink } from '@/view/components/ExplorerLink'
 
 type Props = React.PropsWithChildren<
   Omit<ContractInteractionProps, 'type'> & {
@@ -26,7 +27,8 @@ export function WriteMethodsForm({
   inputData,
   expanded,
   onCallback,
-  substrateRegistry
+  substrateRegistry,
+  userContract
 }: Props) {
   const {
     outcome: outcomeDryRun = '',
@@ -62,7 +64,16 @@ export function WriteMethodsForm({
           {children}
         </>
         <Box display="flex" justifyContent="space-between">
-          <Typography variant="overline">Tx hash</Typography>
+          <Stack direction="row">
+            <Typography variant="overline">Tx hash</Typography>
+            {outcome && (
+              <ExplorerLink
+                blockchain={userContract.network}
+                txHash={outcome}
+              />
+            )}
+          </Stack>
+
           {shouldDisable(tx) ? (
             <Typography variant="caption">{tx.status}</Typography>
           ) : (

diff --git a/src/view/ContractDetailView/ContractInteractionForm/index.tsx b/src/view/ContractDetailView/ContractInteractionForm/index.tsx
@@ -7,7 +7,7 @@ import {
   Registry
 } from '@/services/substrate/types'
 import { ReadMethodsForm } from './ReadMethodsForm'
-import { ContractTabType } from '@/domain'
+import { ContractTabType, UserContractDetailsWithAbi } from '@/domain'
 import { WriteMethodsForm } from './WriteMethodsForm'
 
 export type ContractInteractionProps = {
@@ -16,14 +16,16 @@ export type ContractInteractionProps = {
   contractPromise: ContractPromise
   expanded?: boolean
   type: ContractTabType
+  userContract: UserContractDetailsWithAbi
 }
 
 export function ContractInteractionForm({
   abiMessage,
   substrateRegistry,
   contractPromise,
   type,
-  expanded
+  expanded,
+  userContract
 }: ContractInteractionProps) {
   const { argValues, setArgValues, inputData } = useArgValues(
     abiMessage,
@@ -57,6 +59,7 @@ export function ContractInteractionForm({
           inputData={inputData}
           substrateRegistry={substrateRegistry}
           expanded={expanded}
+          userContract={userContract}
         >
           <ArgumentsForm
             argValues={argValues}

diff --git a/src/view/ContractDetailView/ContractsTabInteraction.tsx b/src/view/ContractDetailView/ContractsTabInteraction.tsx
@@ -11,6 +11,9 @@ import { useContractPromiseFromSource } from '@/hooks/useContractPromise'
 import { FallbackSpinner } from '@/components/FallbackSpinner'
 import { ContractPromise, Registry } from '@/services/substrate/types'
 import { ContractInteractionForm } from '@/view/ContractDetailView/ContractInteractionForm'
+import { useNetworkApi } from '@/hooks/useNetworkApi'
+import NetworkBadge from '../components/NetworkBadge'
+import { getChain } from '@/constants/chains'
 
 const types: ContractTabType[] = ['Read Contract', 'Write Contract']
 const groupedIndex: Record<ContractTabType, keyof GroupedAbiMessages> = {
@@ -32,7 +35,8 @@ function getElements(
   abiMessages: GroupedAbiMessages,
   substrateRegistry: Registry,
   contractPromise: ContractPromise,
-  type: ContractTabType
+  type: ContractTabType,
+  userContract: UserContractDetailsWithAbi
 ): AccordionElement[] {
   const group = abiMessages[groupedIndex[type]]
 
@@ -44,6 +48,7 @@ function getElements(
         substrateRegistry={substrateRegistry}
         contractPromise={contractPromise}
         type={type}
+        userContract={userContract}
       />
     ),
     id: msg.identifier
@@ -53,12 +58,14 @@ function getElements(
 export function ContractsTabInteraction({ userContract }: Props) {
   const [type, setType] = React.useState(types[0])
   const isReadContract = type === 'Read Contract'
-  const contractPromise = useContractPromiseFromSource(userContract)
+  const { apiPromise, network } = useNetworkApi()
+  const contractPromise = useContractPromiseFromSource(userContract, apiPromise)
   const sortedAbiMessages = useMemo(
     () =>
       contractPromise && groupAndSortAbiMessages(contractPromise.abi.messages),
     [contractPromise]
   )
+  const { logo, name: networkName } = getChain(userContract.network)
 
   const handleChange = (newValue: number) => {
     setType(types[newValue])
@@ -88,6 +95,36 @@ export function ContractsTabInteraction({ userContract }: Props) {
     )
   }
 
+  if (network !== userContract.network) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        gap={6}
+        mt="3rem"
+        flexDirection="column"
+      >
+        <Box display="flex" alignItems="center" gap={1.25}>
+          <Typography variant="h3">Your contract is deployed</Typography>
+          <Typography variant="body1" component="p">
+            on
+          </Typography>
+          <NetworkBadge
+            name={networkName}
+            logo={logo.src}
+            logoSize={{ width: 20, height: 20 }}
+            description={logo.alt}
+            textTooltip="The network selected is different to this network."
+          />
+        </Box>
+        <Typography variant="body1">
+          You need to change the network in order to interact with this. 👆
+        </Typography>
+      </Box>
+    )
+  }
+
   return (
     <>
       <Box sx={{ width: '100%' }}>
@@ -127,13 +164,15 @@ export function ContractsTabInteraction({ userContract }: Props) {
                       sortedAbiMessages,
                       contractPromise.abi.registry,
                       contractPromise.contractPromise,
-                      types[0]
+                      types[0],
+                      userContract
                     )
                   : getElements(
                       sortedAbiMessages,
                       contractPromise.abi.registry,
                       contractPromise.contractPromise,
-                      types[1]
+                      types[1],
+                      userContract
                     )
               }
             />

diff --git a/src/view/components/WalletConnectButton/NetworkSelect.tsx b/src/view/components/WalletConnectButton/NetworkSelect.tsx
@@ -242,7 +242,7 @@ export function NetworkSelect({
           <StyledTextField
             sx={{ marginBottom: '2rem' }}
             label="Network Name"
-            placeholder="502d1..."
+            placeholder="Custom Chain"
             value={formData.name.value}
             onChange={formData.name.onChange}
             error={Boolean(formData.name.error)}