Merge pull request #436 from HausDAO/feature/decoded-layout

Feature/decoded layout
HausDAO · Oct 24, 2023 · d75b2fb · d75b2fb
2 parents cf79844 + 8edbb87
commit d75b2fb
Show file tree

Hide file tree

Showing 8 changed files with 296 additions and 388 deletions.
diff --git a/libs/moloch-v3-macro-ui/src/components/ProposalActionData/ProposalActionData.styles.ts b/libs/moloch-v3-macro-ui/src/components/ProposalActionData/ProposalActionData.styles.ts
@@ -19,6 +19,7 @@ export const TitleContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 1rem;
 `;
 
 export const DisplayContainer = styled.div`
@@ -27,6 +28,7 @@ export const DisplayContainer = styled.div`
   .display-segment {
     display: flex;
     flex-direction: column;
+    padding-bottom: 1.5rem;
   }
 
   .data {
@@ -40,6 +42,9 @@ export const DisplayContainer = styled.div`
   .value-box {
     display: flex;
   }
+  .spaced-divider {
+    margin-bottom: 2rem;
+  }
 `;
 
 export const AlertContainer = styled.div`

diff --git a/libs/moloch-v3-macro-ui/src/components/ProposalActionData/ProposalActionData.tsx b/libs/moloch-v3-macro-ui/src/components/ProposalActionData/ProposalActionData.tsx
@@ -1,8 +1,10 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { isValidNetwork } from '@daohaus/keychain-utils';
 import { MolochV3Proposal } from '@daohaus/moloch-v3-data';
 import {
+  ActionError,
   DeepDecodedMultiTX as DecodedMultiTX,
+  DeepDecodedAction,
   isActionError,
 } from '@daohaus/tx-builder';
 import {
@@ -15,6 +17,7 @@ import {
   Loading,
   useBreakpoint,
   widthQuery,
+  ParLg,
 } from '@daohaus/ui';
 import {
   DAO_METHOD_TO_PROPOSAL_TYPE,
@@ -63,125 +66,45 @@ export const ProposalActionData = ({
   actionData,
   decodeError = false,
 }: ProposalActionDataProps) => {
-  const [open, setOpen] = useState<boolean>(false);
-
-  const network = isValidNetwork(daoChain) ? daoChain : undefined;
-  const isMobile = useBreakpoint(widthQuery.sm);
-
-  const handleToggle = () => {
-    setOpen((prevState) => !prevState);
-  };
-
   return (
     <MainContainer>
       <DisplayContainer>
         <TitleContainer>
-          <ParMd>Decoded Transaction Data</ParMd>
+          <ParMd>
+            <Bold>All Actions</Bold>
+          </ParMd>
 
           {!actionData && (
             <LoadingContainer>
               <Loading size={20} />
             </LoadingContainer>
           )}
+        </TitleContainer>
+        {actionData?.map((action, index) => {
+          return (
+            <div key={index}>
+              <ActionSection
+                index={index}
+                action={action}
+                daoId={daoId}
+                daoChain={daoChain}
+                proposal={proposal}
+                proposalActionConfig={proposalActionConfig}
+                actionHeader={`${index + 1}.`}
+              />
 
-          {actionData && open && (
-            <div onClick={handleToggle}>
-              <StyledUpArrow />
-            </div>
-          )}
-          {actionData && !open && (
-            <div onClick={handleToggle}>
-              <StyledDownArrow />
+              <SubActions
+                daoChain={daoChain}
+                daoId={daoId}
+                proposal={proposal}
+                proposalActionConfig={proposalActionConfig}
+                action={action}
+                index={index}
+                actionHeader={`-`}
+              />
             </div>
-          )}
-        </TitleContainer>
-        {open &&
-          actionData?.map((action, index) => {
-            if (isActionError(action)) {
-              return (
-                <div
-                  className="display-segment data"
-                  key={`${action.message}-${index}`}
-                >
-                  <H4 className="space">Action {index + 1}: Error</H4>
-                  <DataSm className="space">{action.message}</DataSm>
-                  <Divider className="space" />
-                  <DataSm className="space">
-                    <Bold>HEX DATA:</Bold>
-                  </DataSm>
-                  <DataSm className="space">{action.data}</DataSm>
-                </div>
-              );
-            }
-            return (
-              <div className="display-segment" key={`action_${index}`}>
-                <div className="data">
-                  <H4 className="space">
-                    Action {index + 1}: {action.name}
-                  </H4>
-                  <ActionAlert
-                    action={action}
-                    daoId={daoId}
-                    daoChain={daoChain}
-                    proposalType={proposal.proposalType}
-                    proposalActionConfig={proposalActionConfig}
-                  />
-                  <DataSm className="space">
-                    <Bold>TARGET</Bold>
-                  </DataSm>
-                  <AddressDisplay
-                    className="space"
-                    address={action.to}
-                    copy
-                    explorerNetworkId={network}
-                    truncate={isMobile}
-                  />
-                  <DataSm className="space">
-                    <Bold>VALUE</Bold>
-                  </DataSm>
-                  <DataSm className="space">{action.value}</DataSm>
-                  <Divider className="spaced-divider" />
-                </div>
-                {action.params?.map((arg, index) => {
-                  return (
-                    <div className="data" key={`${arg.name}-${index}`}>
-                      <DataSm className="space">
-                        <Bold>
-                          PARAM
-                          {index + 1}:{' '}
-                        </Bold>
-                        {arg.name}
-                      </DataSm>
-                      <DataSm className="space">
-                        <Bold>TYPE: </Bold>
-                        {arg.type}
-                      </DataSm>
-                      <DataSm className="space">
-                        <Bold>VALUE: </Bold>
-                      </DataSm>
-                      <ValueDisplay
-                        argValue={arg.value}
-                        argType={arg.type}
-                        network={network}
-                        isMobile={isMobile}
-                      />
-                      <Divider />
-                    </div>
-                  );
-                })}
-                {action.decodedActions?.length ? (
-                  <ProposalActionData
-                    daoChain={daoChain}
-                    daoId={daoId}
-                    proposal={proposal}
-                    proposalActionConfig={proposalActionConfig}
-                    actionData={action.decodedActions}
-                    decodeError={decodeError}
-                  />
-                ) : null}
-              </div>
-            );
-          })}
+          );
+        })}
       </DisplayContainer>
       {decodeError && (
         <ProposalWarning
@@ -195,3 +118,195 @@ export const ProposalActionData = ({
     </MainContainer>
   );
 };
+
+const SubActions = ({
+  action,
+  index,
+  actionHeader,
+  daoChain,
+  daoId,
+  proposal,
+  proposalActionConfig,
+}: {
+  action: DeepDecodedAction | ActionError;
+  index: number;
+  actionHeader: string;
+  daoChain: string;
+  daoId: string;
+  proposal: MolochV3Proposal;
+  proposalActionConfig?: ProposalActionConfig;
+}) => {
+  if (
+    isActionError(action) ||
+    !action.decodedActions ||
+    action.decodedActions.length === 0
+  ) {
+    return null;
+  }
+
+  return (
+    <>
+      {action.decodedActions.map((subAction, i) => (
+        <div key={i}>
+          <ActionSection
+            daoChain={daoChain}
+            daoId={daoId}
+            proposal={proposal}
+            proposalActionConfig={proposalActionConfig}
+            action={subAction}
+            index={index}
+            actionHeader={`-`}
+          />
+
+          <SubActions
+            daoChain={daoChain}
+            daoId={daoId}
+            proposal={proposal}
+            proposalActionConfig={proposalActionConfig}
+            action={subAction}
+            index={index}
+            actionHeader={actionHeader}
+          />
+        </div>
+      ))}
+    </>
+  );
+};
+
+const ActionToggle = ({
+  action,
+  actionHeader,
+  children,
+}: {
+  action: DeepDecodedAction | ActionError;
+  actionHeader: string;
+  children: ReactNode;
+}) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const handleToggle = () => {
+    setOpen((prevState) => !prevState);
+  };
+  return (
+    <>
+      <TitleContainer>
+        <ParLg className="space">
+          {actionHeader} {'name' in action ? action.name : 'Decoding Error'}
+        </ParLg>
+        {open && (
+          <div onClick={handleToggle}>
+            <StyledUpArrow />
+          </div>
+        )}
+        {!open && (
+          <div onClick={handleToggle}>
+            <StyledDownArrow />
+          </div>
+        )}
+      </TitleContainer>
+      {open && <div className="data">{children}</div>}
+    </>
+  );
+};
+
+const ActionSectionError = ({
+  action,
+  index,
+}: {
+  action: ActionError;
+  index: number;
+}) => {
+  return (
+    <div className="display-segment data" key={`${action.message}-${index}`}>
+      <H4 className="space">Action {index + 1}: Error</H4>
+      <DataSm className="space">{action.message}</DataSm>
+      <Divider className="space" />
+      <DataSm className="space">
+        <Bold>HEX DATA:</Bold>
+      </DataSm>
+      <DataSm className="space">{action.data}</DataSm>
+    </div>
+  );
+};
+
+const ActionSection = ({
+  action,
+  index,
+  actionHeader,
+  daoChain,
+  daoId,
+  proposal,
+  proposalActionConfig,
+}: {
+  action: DeepDecodedAction | ActionError;
+  index: number;
+  actionHeader: string;
+  daoChain: string;
+  daoId: string;
+  proposal: MolochV3Proposal;
+  proposalActionConfig?: ProposalActionConfig;
+}) => {
+  const network = isValidNetwork(daoChain) ? daoChain : undefined;
+  const isMobile = useBreakpoint(widthQuery.sm);
+
+  if (isActionError(action)) {
+    return <ActionSectionError index={index} action={action} />;
+  }
+
+  return (
+    <div className="display-segment" key={`action_${index}`}>
+      <ActionToggle actionHeader={actionHeader} action={action}>
+        <>
+          <ActionAlert
+            action={action}
+            daoId={daoId}
+            daoChain={daoChain}
+            proposalType={proposal.proposalType}
+            proposalActionConfig={proposalActionConfig}
+          />
+          <DataSm className="space">
+            <Bold>TARGET</Bold>
+          </DataSm>
+          <AddressDisplay
+            className="space"
+            address={action.to}
+            copy
+            explorerNetworkId={network}
+            truncate={isMobile}
+          />
+          <DataSm className="space">
+            <Bold>VALUE</Bold>
+          </DataSm>
+          <DataSm className="space">{action.value}</DataSm>
+          <Divider className="spaced-divider" />
+          {action.params?.map((arg, index) => {
+            return (
+              <div className="data" key={`${arg.name}-${index}`}>
+                <DataSm className="space">
+                  <Bold>
+                    PARAM
+                    {index + 1}:{' '}
+                  </Bold>
+                  {arg.name}
+                </DataSm>
+                <DataSm className="space">
+                  <Bold>TYPE: </Bold>
+                  {arg.type}
+                </DataSm>
+                <DataSm className="space">
+                  <Bold>VALUE: </Bold>
+                </DataSm>
+                <ValueDisplay
+                  argValue={arg.value}
+                  argType={arg.type}
+                  network={network}
+                  isMobile={isMobile}
+                />
+                <Divider />
+              </div>
+            );
+          })}
+        </>
+      </ActionToggle>
+    </div>
+  );
+};