Feature/action builder style updates

src/components/Guilds/ActionsBuilder/Action/EditMode.tsx

@@ -1,25 +1,13 @@
-import { getEditor } from '../SupportedActions';
-import { DecodedAction, DecodedCall } from '../types';
+import { DecodedAction } from '../types';
+import ActionView from './ViewMode';
 
 interface ActionEditorProps {
   action: DecodedAction;
   onChange: (updatedCall: DecodedAction) => void;
 }
 
-const ActionEditor: React.FC<ActionEditorProps> = ({ action, onChange }) => {
-  const Editor = getEditor(action?.decodedCall?.callType);
-
-  const updateCall = (updatedCall: DecodedCall) => {
-    onChange({ ...action, decodedCall: updatedCall });
-  };
-
-  return (
-    <Editor
-      contract={action.contract}
-      call={action.decodedCall}
-      updateCall={updateCall}
-    />
-  );
+const ActionEditor: React.FC<ActionEditorProps> = ({ action }) => {
+  return <ActionView isEditable={true} decodedCall={action?.decodedCall} />;
 };
 
 export default ActionEditor;

src/components/Guilds/ActionsBuilder/Action/ViewMode.tsx

@@ -7,7 +7,9 @@ import { Button } from 'components/Guilds/common/Button';
 import { useDecodedCall } from 'hooks/Guilds/contracts/useDecodedCall';
 import { getInfoLineView, getSummaryView } from '../SupportedActions';
 import CallDetails from '../CallDetails';
-import { Call } from '../types';
+import { Call, DecodedCall } from '../types';
+import Grip from '../common/Grip';
+import EditButton from '../common/EditButton';
 
 const CardWrapperWithMargin = styled(CardWrapper)`
   margin-top: 0.8rem;
@@ -29,10 +31,10 @@ const CardLabel = styled(Box)`
 
 const ChevronIcon = styled.span`
   cursor: pointer;
-  height: 1.25rem;
-  width: 1.25rem;
+  height: 1.4rem;
+  width: 1.4rem;
   border-radius: 50%;
-  border: 1px solid ${({ theme }) => theme.colors.proposalText.grey};
+  border: 1px solid ${({ theme }) => theme.colors.muted};
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -64,12 +66,35 @@ const TabButton = styled(Button)`
     `}
 `;
 
+const GripWithMargin = styled(Grip)`
+  margin-right: 1rem;
+`;
+
+const EditButtonWithMargin = styled(EditButton)`
+  margin-right: 0.625rem;
+`;
+
+const CardActions = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 interface ActionViewProps {
-  call: Call;
+  call?: Call;
+  decodedCall?: DecodedCall;
+  isEditable?: boolean;
+  onEdit?: () => void;
 }
 
-const ActionView: React.FC<ActionViewProps> = ({ call }) => {
-  const { decodedCall } = useDecodedCall(call);
+const ActionView: React.FC<ActionViewProps> = ({
+  call,
+  decodedCall: decodedCallFromProps,
+  isEditable,
+}) => {
+  const { decodedCall: decodedCallFromCall } = useDecodedCall(call);
+
+  const decodedCall = decodedCallFromCall || decodedCallFromProps;
 
   const [expanded, setExpanded] = useState(false);
   const [activeTab, setActiveTab] = useState(0);
@@ -82,15 +107,20 @@ const ActionView: React.FC<ActionViewProps> = ({ call }) => {
     <CardWrapperWithMargin>
       <CardHeader>
         <CardLabel>
-          {InfoLine && <InfoLine call={call} decodedCall={decodedCall} />}
+          {isEditable && <GripWithMargin />}
+
+          {InfoLine && <InfoLine decodedCall={decodedCall} />}
         </CardLabel>
-        <ChevronIcon onClick={() => setExpanded(!expanded)}>
-          {expanded ? (
-            <FiChevronUp height={16} />
-          ) : (
-            <FiChevronDown height={16} />
-          )}
-        </ChevronIcon>
+        <CardActions>
+          {isEditable && <EditButtonWithMargin>Edit</EditButtonWithMargin>}
+          <ChevronIcon onClick={() => setExpanded(!expanded)}>
+            {expanded ? (
+              <FiChevronUp height={16} />
+            ) : (
+              <FiChevronDown height={16} />
+            )}
+          </ChevronIcon>
+        </CardActions>
       </CardHeader>
 
       {expanded && (
@@ -115,13 +145,13 @@ const ActionView: React.FC<ActionViewProps> = ({ call }) => {
 
           {ActionSummary && activeTab === 0 && (
             <DetailWrapper>
-              <ActionSummary call={call} decodedCall={decodedCall} />
+              <ActionSummary decodedCall={decodedCall} />
             </DetailWrapper>
           )}
 
           {(!ActionSummary || activeTab === 1) && (
             <DetailWrapper>
-              <CallDetails call={call} decodedCall={decodedCall} />
+              <CallDetails decodedCall={decodedCall} />
             </DetailWrapper>
           )}
         </>

src/components/Guilds/ActionsBuilder/Option.tsx

@@ -0,0 +1,122 @@
+import styled from 'styled-components';
+import { ProposalOptionTag } from './common/ProposalOptionTag';
+import AddButton from './common/AddButton';
+import ActionEditor from './Action/EditMode';
+import { DecodedAction, Option } from './types';
+import { useState } from 'react';
+import ActionModal from 'components/Guilds/ActionsModal';
+import Grip from './common/Grip';
+import DataTag from './common/DataTag';
+import EditButton from './common/EditButton';
+import ActionView from './Action/ViewMode';
+import { Box } from 'components/Guilds/common/Layout';
+
+export const OptionWrapper = styled(Box)`
+  padding: 1rem;
+`;
+
+export const DetailWrapper = styled(Box)`
+  padding: 0.5rem 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const Detail = styled(Box)`
+  display: inline-flex;
+  margin-right: 0.75rem;
+`;
+
+const ActionsWrapper = styled.div`
+  margin-left: ${({ indented }) => (indented ? '1.75rem' : '0')};
+`;
+
+interface OptionRowProps {
+  option: Option;
+  isEditable?: boolean;
+  onChange?: (updatedOption: Option) => void;
+}
+
+const OptionRow: React.FC<OptionRowProps> = ({
+  isEditable,
+  option,
+  onChange,
+}) => {
+  const [isActionsModalOpen, setIsActionsModalOpen] = useState(false);
+
+  function addAction(action: DecodedAction) {
+    onChange({
+      ...option,
+      decodedActions: [...option.decodedActions, action],
+    });
+  }
+
+  function updateAction(index: number, action: DecodedAction) {
+    const updatedActions = option?.decodedActions.map((a, i) =>
+      index === i ? action : a
+    );
+    onChange({ ...option, decodedActions: updatedActions });
+  }
+
+  return (
+    <OptionWrapper>
+      <DetailWrapper>
+        <div>
+          {isEditable && (
+            <Detail>
+              <Grip />
+            </Detail>
+          )}
+          <Detail>
+            <ProposalOptionTag option={option} />
+          </Detail>
+          <Detail>
+            <DataTag>
+              {option?.actions?.length || 'No'} on-chain{' '}
+              {option?.actions?.length >= 2 ? 'actions' : 'action'}
+            </DataTag>
+          </Detail>
+        </div>
+        {isEditable && (
+          <div>
+            <EditButton>Edit</EditButton>
+          </div>
+        )}
+      </DetailWrapper>
+
+      <ActionsWrapper indented={isEditable}>
+        {!isEditable &&
+          option?.actions?.map((action, index) => (
+            <ActionView key={index} call={action} isEditable={isEditable} />
+          ))}
+
+        {isEditable &&
+          option?.decodedActions?.map((action, index) => (
+            <ActionEditor
+              key={index}
+              action={action}
+              onChange={updatedAction => updateAction(index, updatedAction)}
+            />
+          ))}
+
+        {isEditable && (
+          <AddButton
+            label="Add Action"
+            onClick={() => setIsActionsModalOpen(true)}
+          />
+        )}
+      </ActionsWrapper>
+
+      <ActionModal
+        isOpen={isActionsModalOpen}
+        setIsOpen={setIsActionsModalOpen}
+        onAddAction={action => {
+          addAction(action);
+          setIsActionsModalOpen(false);
+        }}
+      />
+    </OptionWrapper>
+  );
+};
+
+export default OptionRow;