fix: catch instantiate reversion

src/helpers/hasRevertFlag.ts

@@ -0,0 +1,8 @@
+// Copyright 2022 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { ContractInstantiateResult } from 'types';
+
+export function hasRevertFlag(dryRunResult: ContractInstantiateResult | undefined) {
+  return dryRunResult?.result.isOk ? dryRunResult.result.asOk.result.flags.isRevert : false;
+}

src/ui/components/instantiate/DryRun.tsx

@@ -6,6 +6,7 @@ import { SidePanel } from '../common/SidePanel';
 import { Account } from '../account/Account';
 import { OutcomeItem } from '../contract/OutcomeItem';
 import { useApi, useInstantiate } from 'ui/contexts';
+import { hasRevertFlag } from 'helpers/hasRevertFlag';
 
 export function DryRun() {
   const {
@@ -18,6 +19,8 @@ export function DryRun() {
       ? api.registry.findMetaError(dryRunResult?.result.asErr.asModule)
       : null;
 
+  const isReverted = hasRevertFlag(dryRunResult);
+
   return (
     <SidePanel className="instantiate-outcome" header="Dry-run outcome">
       <div className="body" data-cy="dry-run-result">
@@ -96,12 +99,18 @@ export function DryRun() {
           </div>
         </div>
         <div>
-          {dryRunResult?.result.isOk && (
+          {dryRunResult?.result.isOk && !isReverted && (
             <div className="validation success font-bold">
               <CheckCircleIcon className="mr-3" />
               The instantiation will be successful.
             </div>
           )}
+          {isReverted && (
+            <div className="validation error font-bold">
+              <ExclamationCircleIcon className="mr-3" />
+              Contract reverted! The instantiation will not be successful.
+            </div>
+          )}
           {dryRunError && dryRunResult && (
             <>
               <div className="validation error text-mono items-start font-bold">

src/ui/components/instantiate/Step2.tsx

@@ -32,6 +32,7 @@ import {
   useBalance,
 } from 'ui/hooks';
 import { AbiMessage, Balance, OrFalsy } from 'types';
+import { hasRevertFlag } from 'helpers/hasRevertFlag';
 
 function validateSalt(value: OrFalsy<string>) {
   if (!!value && value.length === 66) {
@@ -60,6 +61,8 @@ export function Step2() {
   const { codeHash: codeHashUrlParam } = useParams<{ codeHash: string }>();
   const isCustom = refTime.mode === 'custom' || proofSize.mode === 'custom';
 
+  const isReverted = hasRevertFlag(dryRunResult);
+
   useEffect(() => {
     setConstructorIndex(0);
     metadata && setDeployConstructor(metadata.constructors[0]);
@@ -205,7 +208,8 @@ export function Step2() {
             !storageDepositLimit.isValid ||
             !deployConstructor?.method ||
             !!dryRunResult?.result.isErr ||
-            !dryRunResult
+            !dryRunResult ||
+            isReverted
           }
           onClick={onSubmit}
           variant="primary"