From ce89d7e92d471cd57c08830ec5bb7e1d02694624 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 5 Dec 2019 19:50:12 +0100
Subject: [PATCH] Revert "Remove contracts call functionality (not working)
 (#1999)" (#2004)

This reverts commit 0aacf3a09d060ceb4ba76135e166e4c8f81f18f9.
---
 .../app-contracts/src/Contracts/Contract.tsx  | 20 ++--
 .../app-contracts/src/Contracts/index.tsx     | 93 ++++++++++---------
 2 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/packages/app-contracts/src/Contracts/Contract.tsx b/packages/app-contracts/src/Contracts/Contract.tsx
index dfd4105226b..8cdfba65b43 100644
--- a/packages/app-contracts/src/Contracts/Contract.tsx
+++ b/packages/app-contracts/src/Contracts/Contract.tsx
@@ -18,7 +18,7 @@ import translate from '../translate';
 interface Props extends I18nProps, RouteComponentProps {
   basePath: string;
   contract: ApiContract;
-  onCall?: (_?: number) => () => void;
+  onCall: (_?: number) => () => void;
 }
 
 const ContractCard = styled(Card)`
@@ -82,16 +82,14 @@ function Contract (props: Props): React.ReactElement<Props> | null {
               size='small'
               tooltip={t('Forget this contract')}
             />
-            {onCall && (
-              <Button
-                icon='play'
-                isPrimary
-                label={t('execute')}
-                onClick={onCall()}
-                size='small'
-                tooltip={t('Call a method on this contract')}
-              />
-            )}
+            <Button
+              icon='play'
+              isPrimary
+              label={t('execute')}
+              onClick={onCall()}
+              size='small'
+              tooltip={t('Call a method on this contract')}
+            />
           </div>
         }
         isContract
diff --git a/packages/app-contracts/src/Contracts/index.tsx b/packages/app-contracts/src/Contracts/index.tsx
index 22a45c92baa..a83c2dbf619 100644
--- a/packages/app-contracts/src/Contracts/index.tsx
+++ b/packages/app-contracts/src/Contracts/index.tsx
@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
+import { I18nProps, StringOrNull } from '@polkadot/react-components/types';
 import { ComponentProps } from '../types';
 
 import React, { useState, useEffect } from 'react';
@@ -14,7 +14,7 @@ import { Button, CardGrid } from '@polkadot/react-components';
 import translate from '../translate';
 import Add from './Add';
 import ContractCard from './Contract';
-// import Call from './Call';
+import Call from './Call';
 import { getContractForAddress } from './util';
 
 interface Props extends ComponentProps, I18nProps, ApiProps {}
@@ -27,47 +27,49 @@ function filterContracts ({ api, accounts, contracts: keyringContracts }: Props)
 
 function Contracts (props: Props): React.ReactElement<Props> {
   const { accounts, basePath, contracts: keyringContracts, hasCode, showDeploy, t } = props;
+  // const { callAddress, callMessage, isAddOpen, isCallOpen } = this.state;
+
   const [contracts, setContracts] = useState<ApiContract[]>(filterContracts(props));
+  const [callContractIndex, setCallContractIndex] = useState<number>(0);
+  const [callMessageIndex, setCallMessageIndex] = useState<number>(0);
   const [isAddOpen, setIsAddOpen] = useState(false);
-  // const [isCallOpen, setIsCallOpen] = useState(false);
-  // const [callContractIndex, setCallContractIndex] = useState<number>(0);
-  // const [callMessageIndex, setCallMessageIndex] = useState<number>(0);
+  const [isCallOpen, setIsCallOpen] = useState(false);
 
   useEffect((): void => {
     setContracts(filterContracts(props));
   }, [accounts, keyringContracts]);
 
-  // let callContract = contracts[callContractIndex] || null;
+  let callContract = contracts[callContractIndex] || null;
 
-  // useEffect((): void => {
-  //   callContract = contracts[callContractIndex];
-  // }, [callContractIndex]);
+  useEffect((): void => {
+    callContract = contracts[callContractIndex];
+  }, [callContractIndex]);
 
   const _toggleAdd = (): void => setIsAddOpen(!isAddOpen);
-  // const _toggleCall = (): void => setIsCallOpen(!isCallOpen);
-
-  // const _onChangeCallContractAddress = (newCallContractAddress: StringOrNull): void => {
-  //   const index = contracts.findIndex(({ address }: ApiContract): boolean => newCallContractAddress === address.toString());
-
-  //   if (index > -1) {
-  //     index !== callContractIndex && setCallMessageIndex(0);
-  //     setCallContractIndex(index);
-  //   }
-  // };
-
-  // const _onChangeCallMessageIndex = (callMessageIndex: number): void => {
-  //   !!callContract && setCallMessageIndex(callMessageIndex);
-  // };
-
-  // const _onCall = (callContractIndex: number): (_?: number) => () => void => {
-  //   return function (callMessageIndex?: number): () => void {
-  //     return function (): void {
-  //       setCallContractIndex(callContractIndex);
-  //       setCallMessageIndex(callMessageIndex || 0);
-  //       setIsCallOpen(true);
-  //     };
-  //   };
-  // };
+  const _toggleCall = (): void => setIsCallOpen(!isCallOpen);
+
+  const _onChangeCallContractAddress = (newCallContractAddress: StringOrNull): void => {
+    const index = contracts.findIndex(({ address }: ApiContract): boolean => newCallContractAddress === address.toString());
+
+    if (index > -1) {
+      index !== callContractIndex && setCallMessageIndex(0);
+      setCallContractIndex(index);
+    }
+  };
+
+  const _onChangeCallMessageIndex = (callMessageIndex: number): void => {
+    !!callContract && setCallMessageIndex(callMessageIndex);
+  };
+
+  const _onCall = (callContractIndex: number): (_?: number) => () => void => {
+    return function (callMessageIndex?: number): () => void {
+      return function (): void {
+        setCallContractIndex(callContractIndex);
+        setCallMessageIndex(callMessageIndex || 0);
+        setIsCallOpen(true);
+      };
+    };
+  };
 
   return (
     <>
@@ -95,30 +97,31 @@ function Contracts (props: Props): React.ReactElement<Props> {
           </Button.Group>
         }
       >
-        {contracts.map((contract: ApiContract): React.ReactNode => {
-          return (
-            <ContractCard
-              basePath={basePath}
-              contract={contract}
-              key={contract.address.toString()}
-              // onCall={_onCall(index)}
-            />
-          );
-        })}
+        {contracts
+          .map((contract: ApiContract, index): React.ReactNode => {
+            return (
+              <ContractCard
+                basePath={basePath}
+                contract={contract}
+                key={contract.address.toString()}
+                onCall={_onCall(index)}
+              />
+            );
+          })}
       </CardGrid>
       <Add
         basePath={basePath}
         isOpen={isAddOpen}
         onClose={_toggleAdd}
       />
-      {/* <Call
+      <Call
         callContract={callContract}
         callMessageIndex={callMessageIndex}
         isOpen={isCallOpen}
         onChangeCallContractAddress={_onChangeCallContractAddress}
         onChangeCallMessageIndex={_onChangeCallMessageIndex}
         onClose={_toggleCall}
-      /> */}
+      />
     </>
   );
 }