fix: requires selected account for interaction to be available (#552)

Author: peetzweg

src/ui/components/contract/Interact.tsx

@@ -1,33 +1,34 @@
 // Copyright 2022-2024 @paritytech/contracts-ui authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { useEffect, useState, useRef, useMemo } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { ResultsOutput } from './ResultsOutput';
+import { BN_ZERO } from 'lib/bn';
+import {
+  decodeStorageDeposit,
+  getGasLimit,
+  getStorageDepositLimit,
+  transformUserInput,
+} from 'lib/callOptions';
+import { getDecodedOutput } from 'lib/output';
 import {
   AbiMessage,
+  Balance,
+  CallResult,
   ContractExecResult,
+  ContractOptions,
   ContractSubmittableResult,
-  CallResult,
   SubmittableResult,
-  ContractOptions,
-  Balance,
   UIContract,
 } from 'types';
 import { AccountSelect } from 'ui/components/account';
-import { Dropdown, Button, Buttons } from 'ui/components/common';
+import { Button, Buttons, Dropdown } from 'ui/components/common';
 import { ArgumentForm, Form, FormField, OptionsForm } from 'ui/components/form';
-import { BN_ZERO } from 'lib/bn';
 import { useApi, useTransactions } from 'ui/contexts';
-import { useWeight, useBalance, useArgValues } from 'ui/hooks';
+import { useArgValues, useBalance, useWeight } from 'ui/hooks';
+import { useAccountAvailable } from 'ui/hooks/useAccountAvailable';
 import { useStorageDepositLimit } from 'ui/hooks/useStorageDepositLimit';
 import { createMessageOptions } from 'ui/util/dropdown';
-import {
-  decodeStorageDeposit,
-  getGasLimit,
-  getStorageDepositLimit,
-  transformUserInput,
-} from 'lib/callOptions';
-import { getDecodedOutput } from 'lib/output';
 
 interface Props {
   contract: UIContract;
@@ -57,6 +58,7 @@ export const InteractTab = ({
   const proofSize = useWeight(outcome?.gasRequired.proofSize.toBn());
   const timeoutId = useRef<NodeJS.Timeout | null>(null);
   const isCustom = refTime.mode === 'custom' || proofSize.mode === 'custom';
+  const isAccountAvailable = useAccountAvailable(accountId);
 
   useEffect((): void => {
     if (!accounts || accounts.length === 0) return;
@@ -181,7 +183,8 @@ export const InteractTab = ({
     !proofSize.isValid ||
     txs[txId]?.status === 'processing' ||
     !!outcome?.result.isErr ||
-    !!decodedOutput?.isError;
+    !!decodedOutput?.isError ||
+    isAccountAvailable === false;
 
   const isDispatchable = message?.isMutating || message?.isPayable;
 
@@ -193,7 +196,9 @@ export const InteractTab = ({
             className="caller mb-8"
             help="The sending account for this interaction. Any transaction fees will be deducted from this account."
             id="accountId"
+            isError={isAccountAvailable === false}
             label="Caller"
+            message="Selected Account is not available to sign extrinsics."
           >
             <AccountSelect
               className="mb-2"

src/ui/components/instantiate/Step1.tsx

@@ -3,19 +3,20 @@
 
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router';
+import { AccountSelect } from '../account';
 import { Button, Buttons } from '../common/Button';
-import { Input, InputFile, Form, FormField, useMetadataField, getValidation } from '../form';
 import { Loader } from '../common/Loader';
-import { AccountSelect } from '../account';
+import { Form, FormField, Input, InputFile, getValidation, useMetadataField } from '../form';
 import { MessageDocs } from '../message';
 import { Metadata } from '../metadata';
 import { CodeHash } from './CodeHash';
-import { useNonEmptyString } from 'ui/hooks/useNonEmptyString';
 import { useApi, useDatabase, useInstantiate } from 'ui/contexts';
 import { useDbQuery } from 'ui/hooks';
+import { useNonEmptyString } from 'ui/hooks/useNonEmptyString';
 
 import { fileToFileState } from 'lib/fileToFileState';
 import { getContractFromPatron } from 'lib/getContractFromPatron';
+import { useAccountAvailable } from 'ui/hooks/useAccountAvailable';
 
 export function Step1() {
   const { codeHash: codeHashUrlParam } = useParams<{ codeHash: string }>();
@@ -29,6 +30,7 @@ export function Step1() {
   const { setStep, setData, data, step } = useInstantiate();
 
   const [accountId, setAccountId] = useState('');
+  const isAccountAvailable = useAccountAvailable(accountId);
   const { value: name, onChange: setName, ...nameValidation } = useNonEmptyString();
 
   const {
@@ -90,6 +92,8 @@ export function Step1() {
           help="The account to use for this instantiation. The fees and storage deposit will be deducted from this account."
           id="accountId"
           label="Account"
+          isError={isAccountAvailable === false}
+          message="Selected Account is not available to sign extrinsics."
         >
           <AccountSelect
             className="mb-2"
@@ -185,7 +189,12 @@ export function Step1() {
       <Buttons>
         <Button
           data-cy="next-btn"
-          isDisabled={!metadata || !nameValidation.isValid || !metadataValidation.isValid}
+          isDisabled={
+            !metadata ||
+            !nameValidation.isValid ||
+            !metadataValidation.isValid ||
+            isAccountAvailable === false
+          }
           onClick={submitStep1}
           variant="primary"
         >

src/ui/hooks/useAccountAvailable.ts

@@ -0,0 +1,16 @@
+// Copyright 2022-2024 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { keyring } from '@polkadot/ui-keyring';
+import { useMemo } from 'react';
+
+export const useAccountAvailable = (accountId?: string): boolean | undefined =>
+  useMemo(() => {
+    if (accountId === '' || accountId === undefined) return undefined;
+    try {
+      keyring.getPair(accountId);
+      return true;
+    } catch {
+      return false;
+    }
+  }, [accountId]);