From 5e02f5a19c2a73977b61e368bf59c607f6513dd6 Mon Sep 17 00:00:00 2001
From: peetzweg/ <phil.czek@gmail.com>
Date: Tue, 9 Apr 2024 10:35:29 +0200
Subject: [PATCH 1/3] requires selected account for contract deployment and
 calling to be available in the current keyring

---
 src/ui/components/contract/Interact.tsx | 35 ++++++++++++++-----------
 src/ui/components/instantiate/Step1.tsx | 17 +++++++++---
 src/ui/hooks/useAccountAvailable.ts     | 16 +++++++++++
 3 files changed, 49 insertions(+), 19 deletions(-)
 create mode 100644 src/ui/hooks/useAccountAvailable.ts

diff --git a/src/ui/components/contract/Interact.tsx b/src/ui/components/contract/Interact.tsx
index f0813e1b..05d88bc6 100644
--- a/src/ui/components/contract/Interact.tsx
+++ b/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"
diff --git a/src/ui/components/instantiate/Step1.tsx b/src/ui/components/instantiate/Step1.tsx
index 3dbaf13e..ed52ac5c 100644
--- a/src/ui/components/instantiate/Step1.tsx
+++ b/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 {
@@ -94,6 +96,8 @@ export function Step1() {
           <AccountSelect
             className="mb-2"
             id="accountId"
+            isError={isAccountAvailable === false}
+            message="Selected Account is not available to sign extrinsics."
             onChange={setAccountId}
             value={accountId}
           />
@@ -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"
         >
diff --git a/src/ui/hooks/useAccountAvailable.ts b/src/ui/hooks/useAccountAvailable.ts
new file mode 100644
index 00000000..b1b3cc1a
--- /dev/null
+++ b/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]);

From 4aa060ed75f432084544c89723a7cf8650b82978 Mon Sep 17 00:00:00 2001
From: peetzweg/ <phil.czek@gmail.com>
Date: Tue, 9 Apr 2024 10:50:57 +0200
Subject: [PATCH 2/3] moves the error to the correct component

---
 src/ui/components/instantiate/Step1.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/components/instantiate/Step1.tsx b/src/ui/components/instantiate/Step1.tsx
index ed52ac5c..9babd338 100644
--- a/src/ui/components/instantiate/Step1.tsx
+++ b/src/ui/components/instantiate/Step1.tsx
@@ -92,12 +92,12 @@ 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"
             id="accountId"
-            isError={isAccountAvailable === false}
-            message="Selected Account is not available to sign extrinsics."
             onChange={setAccountId}
             value={accountId}
           />

From 29a52a1906819d78dc0bf9bd028bdce2da95adcf Mon Sep 17 00:00:00 2001
From: peetzweg/ <phil.czek@gmail.com>
Date: Thu, 11 Apr 2024 15:25:51 +0200
Subject: [PATCH 3/3] allow optional account id

---
 src/ui/hooks/useAccountAvailable.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/hooks/useAccountAvailable.ts b/src/ui/hooks/useAccountAvailable.ts
index b1b3cc1a..521869eb 100644
--- a/src/ui/hooks/useAccountAvailable.ts
+++ b/src/ui/hooks/useAccountAvailable.ts
@@ -4,7 +4,7 @@
 import { keyring } from '@polkadot/ui-keyring';
 import { useMemo } from 'react';
 
-export const useAccountAvailable = (accountId: string): boolean | undefined =>
+export const useAccountAvailable = (accountId?: string): boolean | undefined =>
   useMemo(() => {
     if (accountId === '' || accountId === undefined) return undefined;
     try {