From ff992d18f165d1fe424a7f2166bee6acf909d638 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Fri, 7 Jul 2023 21:51:10 +0200
Subject: [PATCH] Store only id, timestamp and txDetails

---
 src/components/common/BatchSidebar/index.tsx  | 28 +++++++++++--------
 .../DecodedData/SingleTxDecoded/index.tsx     |  2 +-
 src/components/tx/SignOrExecuteForm/hooks.ts  |  3 +-
 src/hooks/useDraftBatch.ts                    | 13 +--------
 src/store/batchSlice.ts                       |  3 --
 5 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/components/common/BatchSidebar/index.tsx b/src/components/common/BatchSidebar/index.tsx
index 10e7587dab..c54e000390 100644
--- a/src/components/common/BatchSidebar/index.tsx
+++ b/src/components/common/BatchSidebar/index.tsx
@@ -1,4 +1,6 @@
 import type { SyntheticEvent } from 'react'
+import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
+import { type MetaTransactionData, OperationType } from '@safe-global/safe-core-sdk-types'
 import { useCallback, useContext } from 'react'
 import { Button, Divider, Drawer, SvgIcon, Typography } from '@mui/material'
 import { useDraftBatch, useUpdateBatch } from '@/hooks/useDraftBatch'
@@ -9,6 +11,15 @@ import BatchTxItem from './BatchTxItem'
 import ConfirmBatchFlow from '@/components/tx-flow/flows/ConfirmBatch'
 import PlusIcon from '@/public/images/common/plus.svg'
 
+const getData = (txDetails: TransactionDetails): MetaTransactionData => {
+  return {
+    to: txDetails.txData?.to.value ?? '',
+    value: txDetails.txData?.value ?? '0',
+    data: txDetails.txData?.hexData ?? '0x',
+    operation: OperationType.Call, // only calls can be batched
+  }
+}
+
 const BatchSidebar = ({ isOpen, onToggle }: { isOpen: boolean; onToggle: (open: boolean) => void }) => {
   const { setTxFlow } = useContext(TxModalContext)
   const batchTxs = useDraftBatch()
@@ -29,7 +40,7 @@ const BatchSidebar = ({ isOpen, onToggle }: { isOpen: boolean; onToggle: (open:
       e.preventDefault()
       if (!batchTxs.length) return
       closeSidebar()
-      setTxFlow(<ConfirmBatchFlow calls={batchTxs.map((item) => item.txData)} />)
+      setTxFlow(<ConfirmBatchFlow calls={batchTxs.map((item) => getData(item.txDetails))} />)
     },
     [setTxFlow, batchTxs, closeSidebar],
   )
@@ -48,16 +59,11 @@ const BatchSidebar = ({ isOpen, onToggle }: { isOpen: boolean; onToggle: (open:
         <Divider />
 
         <div className={css.txs}>
-          {batchTxs.length
-            ? batchTxs.map((item, index) => (
-                <BatchTxItem
-                  key={index}
-                  count={index + 1}
-                  {...item}
-                  onDelete={() => onDeleteClick(item.txDetails.txId)}
-                />
-              ))
-            : 'No transactions added yet'}
+          {!batchTxs.length && 'No transactions added yet'}
+
+          {batchTxs.map((item, index) => (
+            <BatchTxItem key={index} count={index + 1} {...item} onDelete={() => onDeleteClick(item.txDetails.txId)} />
+          ))}
         </div>
 
         <Button onClick={onAddClick}>
diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx b/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx
index 2f2b0eafde..1d9368252d 100644
--- a/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx
@@ -60,7 +60,7 @@ export const SingleTxDecoded = ({
           <CodeIcon color="border" fontSize="small" />
           <Typography>{actionTitle}</Typography>
           <Typography ml="8px">
-            <b>{method}</b>
+            <b>{method || 'native transfer'}</b>
           </Typography>
         </div>
       </AccordionSummary>
diff --git a/src/components/tx/SignOrExecuteForm/hooks.ts b/src/components/tx/SignOrExecuteForm/hooks.ts
index 5a84f3ae5e..af6579d3a3 100644
--- a/src/components/tx/SignOrExecuteForm/hooks.ts
+++ b/src/components/tx/SignOrExecuteForm/hooks.ts
@@ -66,10 +66,9 @@ export const useTxActions = (): TxActions => {
     const addToBatch: TxActions['addToBatch'] = async (safeTx, origin) => {
       assertTx(safeTx)
       assertWallet(wallet)
-      assertOnboard(onboard)
 
       const id = await proposeTx(wallet.address, safeTx, undefined, origin)
-      addTxToBatch(safeTx, id)
+      addTxToBatch(id)
       return id
     }
 
diff --git a/src/hooks/useDraftBatch.ts b/src/hooks/useDraftBatch.ts
index ca044ee321..0777d038d7 100644
--- a/src/hooks/useDraftBatch.ts
+++ b/src/hooks/useDraftBatch.ts
@@ -1,5 +1,4 @@
 import { useCallback } from 'react'
-import type { MetaTransactionData, SafeTransaction } from '@safe-global/safe-core-sdk-types'
 import { useAppDispatch, useAppSelector } from '@/store'
 import useChainId from './useChainId'
 import useSafeAddress from './useSafeAddress'
@@ -7,29 +6,19 @@ import type { DraftBatchItem } from '@/store/batchSlice'
 import { selectBatchBySafe, addTx, removeTx } from '@/store/batchSlice'
 import { getTransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 
-const getMetaData = (safeTx: SafeTransaction): MetaTransactionData => {
-  return {
-    to: safeTx.data.to,
-    value: safeTx.data.value,
-    data: safeTx.data.data,
-    operation: safeTx.data.operation,
-  }
-}
-
 export const useUpdateBatch = () => {
   const chainId = useChainId()
   const safeAddress = useSafeAddress()
   const dispatch = useAppDispatch()
 
   const onAdd = useCallback(
-    (safeTx: SafeTransaction, id: string) => {
+    (id: string) => {
       getTransactionDetails(chainId, id).then((tx) => {
         dispatch(
           addTx({
             chainId,
             safeAddress,
             timestamp: Date.now(),
-            txData: getMetaData(safeTx),
             txDetails: tx,
           }),
         )
diff --git a/src/store/batchSlice.ts b/src/store/batchSlice.ts
index 207da5716c..f2683c30b2 100644
--- a/src/store/batchSlice.ts
+++ b/src/store/batchSlice.ts
@@ -1,11 +1,9 @@
 import { createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import type { MetaTransactionData } from '@safe-global/safe-core-sdk-types'
 import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 import type { RootState } from '.'
 
 export type DraftBatchItem = {
   timestamp: number
-  txData: MetaTransactionData
   txDetails: TransactionDetails
 }
 
@@ -28,7 +26,6 @@ export const batchSlice = createSlice({
         chainId: string
         safeAddress: string
         timestamp: number
-        txData: MetaTransactionData
         txDetails: TransactionDetails
       }>,
     ) => {