Adjust buttons based on ABI availability (#3839)

* Adjust buttons based on ABI availability

* Sorting

packages/page-contracts/src/Codes/Code.tsx

@@ -104,11 +104,13 @@ function Code ({ className, code, onShowDeploy }: Props): React.ReactElement<Pro
           icon='trash'
           onClick={toggleIsForgetOpen}
         />
-        <Button
-          icon='upload'
-          label={t('deploy')}
-          onClick={_onShowDeploy}
-        />
+        {!contractAbi && (
+          <Button
+            icon='upload'
+            label={t('deploy')}
+            onClick={_onShowDeploy}
+          />
+        )}
       </td>
     </tr>
   );

packages/page-contracts/src/Contracts/Contract.tsx

@@ -80,11 +80,13 @@ function Contract ({ className, contract, onCall }: Props): React.ReactElement<P
           icon='trash'
           onClick={toggleIsForgetOpen}
         />
-        <Button
-          icon='play'
-          label={t<string>('exec')}
-          onClick={onCall}
-        />
+        {!contract.abi && (
+          <Button
+            icon='play'
+            label={t<string>('exec')}
+            onClick={onCall}
+          />
+        )}
       </td>
     </tr>
   );

packages/page-contracts/src/shared/ABI.tsx

@@ -74,6 +74,7 @@ function ABI (props: Props): React.ReactElement<Props> {
               help={help}
               isDisabled={isDisabled}
               isError={isError}
+              isFull
               label={label}
               onChange={onChange}
               placeholder={

packages/page-contracts/src/shared/Message.tsx

@@ -46,8 +46,6 @@ function Message ({ className = '', index, lastResult, message, onSelect }: Prop
     [index, onSelect]
   );
 
-  console.log(lastResult, lastResult?.output, lastResult?.output?.toHuman());
-
   return (
     <div
       className={`${className} ${!onSelect ? 'exempt-hover' : ''} ${message.isConstructor ? 'constructor' : ''}`}
@@ -67,6 +65,7 @@ function Message ({ className = '', index, lastResult, message, onSelect }: Prop
             <Button
               className='accessory'
               icon='play'
+              isDisabled={lastResult?.isSuccess}
               label={message.isMutating ? t<string>('exec') : t<string>('read')}
               onClick={_onSelect}
             />
@@ -87,7 +86,7 @@ function Message ({ className = '', index, lastResult, message, onSelect }: Prop
           }
         </div>
       </div>
-      {lastResult && lastResult.output && (
+      {lastResult && lastResult.isSuccess && lastResult.output && (
         <Output
           className='result'
           isFull

packages/page-contracts/src/shared/Messages.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { ContractCallOutcome } from '@polkadot/api-contract/types';
+import { AbiMessage, ContractCallOutcome } from '@polkadot/api-contract/types';
 
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
@@ -30,6 +30,18 @@ export interface Props {
 const NOOP = (): void => undefined;
 const READ_ADDR = '0x'.padEnd(66, '0');
 
+function sortMessages (messages: AbiMessage[]): [AbiMessage, number][] {
+  return messages
+    .map((m, index): [AbiMessage, number] => [m, index])
+    .sort((a, b) => a[0].identifier.localeCompare(b[0].identifier))
+    .sort((a, b) => a[0].isMutating === b[0].isMutating
+      ? 0
+      : a[0].isMutating
+        ? -1
+        : 1
+    );
+}
+
 function Messages ({ className = '', contract, contractAbi: { constructors, messages }, isLabelled, isRemovable, isWatching, onRemove = NOOP, onSelect, onSelectConstructor, withConstructors, withMessages } : Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
@@ -61,7 +73,7 @@ function Messages ({ className = '', contract, contractAbi: { constructors, mess
     <div className={`ui--Messages ${className} ${isLabelled ? 'labelled' : ''}`}>
       {withConstructors && (
         <Expander summary={t<string>('Constructors ({{count}})', { replace: { count: constructors.length } })}>
-          {constructors.map((message, index) => (
+          {sortMessages(constructors).map(([message, index]) => (
             <Message
               index={index}
               key={index}
@@ -74,9 +86,9 @@ function Messages ({ className = '', contract, contractAbi: { constructors, mess
       {withMessages && (
         <Expander
           onClick={_onExpander}
-          summary={t<string>('Messages ({{count}})', { replace: { count: constructors.length } })}
+          summary={t<string>('Messages ({{count}})', { replace: { count: messages.length } })}
         >
-          {messages.map((message, index) => (
+          {sortMessages(messages).map(([message, index]) => (
             <Message
               index={index}
               key={index}

packages/react-components/src/InputFile.tsx

@@ -8,7 +8,6 @@ import Dropzone, { DropzoneRef } from 'react-dropzone';
 import styled from 'styled-components';
 import { formatNumber, isHex, u8aToString, hexToU8a } from '@polkadot/util';
 
-import { classes } from './util';
 import Labelled from './Labelled';
 import { useTranslation } from './translate';
 
@@ -21,6 +20,7 @@ export interface InputFileProps {
   help?: React.ReactNode;
   isDisabled?: boolean;
   isError?: boolean;
+  isFull?: boolean;
   label: React.ReactNode;
   onChange?: (contents: Uint8Array, name: string) => void;
   placeholder?: React.ReactNode | null;
@@ -57,7 +57,7 @@ function convertResult (result: ArrayBuffer): Uint8Array {
   return data;
 }
 
-function InputFile ({ accept, className = '', clearContent, help, isDisabled, isError = false, label, onChange, placeholder, withEllipsis, withLabel }: InputFileProps): React.ReactElement<InputFileProps> {
+function InputFile ({ accept, className = '', clearContent, help, isDisabled, isError = false, isFull, label, onChange, placeholder, withEllipsis, withLabel }: InputFileProps): React.ReactElement<InputFileProps> {
   const { t } = useTranslation();
   const dropRef = createRef<DropzoneRef>();
   const [file, setFile] = useState<FileState | undefined>();
@@ -98,7 +98,7 @@ function InputFile ({ accept, className = '', clearContent, help, isDisabled, is
       ref={dropRef}
     >
       {({ getInputProps, getRootProps }): JSX.Element => (
-        <div {...getRootProps({ className: classes('ui--InputFile', isError ? 'error' : '', className) })} >
+        <div {...getRootProps({ className: `ui--InputFile${isError ? ' error' : ''} ${className}` })} >
           <input {...getInputProps()} />
           <em className='label' >
             {
@@ -121,6 +121,7 @@ function InputFile ({ accept, className = '', clearContent, help, isDisabled, is
     ? (
       <Labelled
         help={help}
+        isFull={isFull}
         label={label}
         withEllipsis={withEllipsis}
         withLabel={withLabel}