From f1a73d84ac2adfacd58fbc2be3c51f8abf3ac682 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Thu, 16 Nov 2023 12:57:39 -0300 Subject: [PATCH 1/3] Adding network validation --- src/constants/chains.ts | 2 +- src/hooks/useContractPromise.ts | 6 +-- .../ContractsTabInteraction.tsx | 39 ++++++++++++++++++- .../WalletConnectButton/NetworkSelect.tsx | 2 +- 4 files changed, 42 insertions(+), 7 deletions(-) diff --git a/src/constants/chains.ts b/src/constants/chains.ts index cef0d224..b7e38096 100755 --- 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 index f634c7c7..acb8d860 100644 --- 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/ContractsTabInteraction.tsx b/src/view/ContractDetailView/ContractsTabInteraction.tsx index 9faccc18..fd97da8f 100644 --- a/src/view/ContractDetailView/ContractsTabInteraction.tsx +++ b/src/view/ContractDetailView/ContractsTabInteraction.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from 'react' -import { Box, Typography } from '@mui/material' +import { Box, Stack, Typography } from '@mui/material' import { ContractTabType, UserContractDetailsWithAbi } from '@/domain' import BasicTabs from '@/components/Tabs' import SimpleAccordion from '@/components/Accordion' @@ -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 = { @@ -53,12 +56,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 +93,36 @@ export function ContractsTabInteraction({ userContract }: Props) { ) } + if (network !== userContract.network) { + return ( + + + Your contract is deployed + + on + + + + + You need to change the network in order to interact with this. 👆 + + + ) + } + return ( <> diff --git a/src/view/components/WalletConnectButton/NetworkSelect.tsx b/src/view/components/WalletConnectButton/NetworkSelect.tsx index 9ff6984d..dd40682f 100644 --- a/src/view/components/WalletConnectButton/NetworkSelect.tsx +++ b/src/view/components/WalletConnectButton/NetworkSelect.tsx @@ -242,7 +242,7 @@ export function NetworkSelect({ Date: Thu, 16 Nov 2023 13:20:49 -0300 Subject: [PATCH 2/3] Adding Explorer link --- .../ContractInteractionForm/ReadMethodsForm.tsx | 2 +- .../ContractInteractionForm/WriteMethodsForm.tsx | 15 +++++++++++++-- .../ContractInteractionForm/index.tsx | 7 +++++-- .../ContractsTabInteraction.tsx | 12 ++++++++---- 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/view/ContractDetailView/ContractInteractionForm/ReadMethodsForm.tsx b/src/view/ContractDetailView/ContractInteractionForm/ReadMethodsForm.tsx index f0adaf26..325f1732 100644 --- 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 & { + Omit & { abiParams: AbiParam[] inputData: unknown[] | undefined } diff --git a/src/view/ContractDetailView/ContractInteractionForm/WriteMethodsForm.tsx b/src/view/ContractDetailView/ContractInteractionForm/WriteMethodsForm.tsx index ec396567..b680dcd9 100644 --- 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 & { @@ -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} - Tx hash + + Tx hash + {outcome && ( + + )} + + {shouldDisable(tx) ? ( {tx.status} ) : ( diff --git a/src/view/ContractDetailView/ContractInteractionForm/index.tsx b/src/view/ContractDetailView/ContractInteractionForm/index.tsx index f6500b50..f90d4c2e 100644 --- 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,6 +16,7 @@ export type ContractInteractionProps = { contractPromise: ContractPromise expanded?: boolean type: ContractTabType + userContract: UserContractDetailsWithAbi } export function ContractInteractionForm({ @@ -23,7 +24,8 @@ export function ContractInteractionForm({ 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} > ), id: msg.identifier @@ -162,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 ) } /> From 0d637c3c9dc08cbe2072bcbcdd162e8aadd77163 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Thu, 16 Nov 2023 14:44:18 -0300 Subject: [PATCH 3/3] Update NetworkSelect.tsx --- src/view/components/WalletConnectButton/NetworkSelect.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/components/WalletConnectButton/NetworkSelect.tsx b/src/view/components/WalletConnectButton/NetworkSelect.tsx index dd40682f..2a6b5a84 100644 --- a/src/view/components/WalletConnectButton/NetworkSelect.tsx +++ b/src/view/components/WalletConnectButton/NetworkSelect.tsx @@ -242,7 +242,7 @@ export function NetworkSelect({