Add nested delegate call warnings (#3122)

* feat: Add nested delegate call warnings * chore: Refactor delegate call warnings * chore: Remove padding
5afe · Dec 8, 2021 · f7af433 · f7af433
1 parent 6f937cb
commit f7af433
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 21 deletions.
diff --git a/src/routes/safe/components/Transactions/TxList/DelegateCallWarning.tsx b/src/routes/safe/components/Transactions/TxList/DelegateCallWarning.tsx
@@ -0,0 +1,19 @@
+import { Text } from '@gnosis.pm/safe-react-components'
+import { ReactElement } from 'react'
+
+const DelegateCallWarning = ({ isKnown }: { isKnown: boolean }): ReactElement => {
+  if (!isKnown) {
+    return (
+      <Text size="xl" strong as="span" color="error">
+        ⚠️ Unexpected Delegate Call
+      </Text>
+    )
+  }
+  return (
+    <Text size="xl" strong as="span">
+      Delegate Call
+    </Text>
+  )
+}
+
+export default DelegateCallWarning
diff --git a/src/routes/safe/components/Transactions/TxList/MultiSendDetails.tsx b/src/routes/safe/components/Transactions/TxList/MultiSendDetails.tsx
@@ -1,9 +1,10 @@
 import { AccordionSummary, IconText } from '@gnosis.pm/safe-react-components'
-import { DataDecoded, TransactionData } from '@gnosis.pm/safe-react-gateway-sdk'
+import { DataDecoded, Operation, TransactionData } from '@gnosis.pm/safe-react-gateway-sdk'
 import { ReactElement, ReactNode } from 'react'
 
 import { getNativeCurrency } from 'src/config'
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import DelegateCallWarning from './DelegateCallWarning'
 import { HexEncodedData } from './HexEncodedData'
 import { MethodDetails } from './MethodDetails'
 import { isSpendingLimitMethod } from './SpendingLimitDetails'
@@ -19,16 +20,19 @@ type MultiSendTxGroupProps = {
     name?: string | undefined
     avatarUrl?: string | undefined
     dataDecoded: DataDecoded | null
+    operation: Operation
   }
 }
 
 const MultiSendTxGroup = ({ actionTitle, children, txDetails }: MultiSendTxGroupProps): ReactElement => {
+  const isDelegateCall = txDetails.operation === Operation.DELEGATE
   return (
     <ActionAccordion>
       <AccordionSummary>
         <IconText iconSize="sm" iconType="code" text={actionTitle} textSize="xl" />
       </AccordionSummary>
       <ColumnDisplayAccordionDetails>
+        {isDelegateCall && <DelegateCallWarning isKnown={!!txDetails.name} />}
         {!isSpendingLimitMethod(txDetails.dataDecoded?.method) && (
           <TxInfoDetails
             title={txDetails.title}
@@ -60,7 +64,8 @@ export const MultiSendDetails = ({ txData }: { txData: TransactionData }): React
     <>
       {txData.dataDecoded.parameters[0].valueDecoded?.map(({ dataDecoded }, index, valuesDecoded) => {
         let details
-        const { data, value, to } = valuesDecoded[index]
+        const { data, value, to, operation } = valuesDecoded[index]
+
         const actionTitle = `Action ${index + 1} ${dataDecoded ? `(${dataDecoded.method})` : ''}`
         const amount = value ? fromTokenUnit(value, nativeCurrency.decimals) : 0
         const title = `Send ${amount} ${nativeCurrency.name} to:`
@@ -81,7 +86,7 @@ export const MultiSendDetails = ({ txData }: { txData: TransactionData }): React
           <MultiSendTxGroup
             key={`${data ?? to}-${index}`}
             actionTitle={actionTitle}
-            txDetails={{ title, address: to, dataDecoded, name, avatarUrl }}
+            txDetails={{ title, address: to, dataDecoded, name, avatarUrl, operation }}
           >
             {details}
           </MultiSendTxGroup>

diff --git a/src/routes/safe/components/Transactions/TxList/TxSummary.tsx b/src/routes/safe/components/Transactions/TxList/TxSummary.tsx
@@ -15,6 +15,7 @@ import { NOT_AVAILABLE } from './utils'
 import TxShareButton from './TxShareButton'
 import { IS_PRODUCTION } from 'src/utils/constants'
 import TxInfoMultiSend from './TxInfoMultiSend'
+import DelegateCallWarning from './DelegateCallWarning'
 
 type Props = { txDetails: ExpandedTxDetails }
 
@@ -82,22 +83,10 @@ export const TxSummary = ({ txDetails }: Props): ReactElement => {
       </div>
       {txData?.operation === Operation.DELEGATE && (
         <div className="tx-operation">
-          {isCustomTxInfo(txInfo) && !!txInfo?.to?.name ? (
-            <Text size="xl" strong as="span">
-              Delegate Call
-            </Text>
-          ) : (
-            <Text size="xl" strong as="span" color="error">
-              ⚠️ Unexpected Delegate Call
-            </Text>
-          )}
-        </div>
-      )}
-      {isMultiSendTxInfo(txInfo) && (
-        <div className="tx-ms-contract">
-          <TxInfoMultiSend txInfo={txInfo} />
+          <DelegateCallWarning isKnown={isCustomTxInfo(txInfo) && !!txInfo?.to?.name} />
         </div>
       )}
+      {isMultiSendTxInfo(txInfo) && <TxInfoMultiSend txInfo={txInfo} />}
     </>
   )
 }
diff --git a/src/routes/safe/components/Transactions/TxList/styled.tsx b/src/routes/safe/components/Transactions/TxList/styled.tsx
@@ -387,10 +387,6 @@ export const TxDetailsContainer = styled.div`
     }
   }
 
-  .tx-ms-contract {
-    padding-top: 40px;
-  }
-
   .tx-details-actions {
     align-items: center;
     display: flex;