Cleanup older queries

packages/ui/src/components/CallInfo.tsx

@@ -148,11 +148,18 @@ const eachFieldRendered = (value: Record<string, any>, chainInfo: ChainInfoHuman
   return <li key={`not-pretty-decoded-${id}`}>{JSONprint(value)} </li>
 }
 
-const preparedCall = (
-  decodedCall: CreateTreeParams['decodedCall'],
-  chainInfo: ChainInfoHuman,
-  isBatch = false
-) => {
+interface PreparedCallParams {
+  decodedCall: CreateTreeParams['decodedCall']
+  chainInfo: ChainInfoHuman
+  isBatch?: boolean
+  isFirstCall?: boolean
+}
+const preparedCall = ({
+  decodedCall,
+  chainInfo,
+  isBatch = false,
+  isFirstCall = false
+}: PreparedCallParams) => {
   if (!decodedCall) return
 
   if (isBatchedCall(decodedCall.type, decodedCall.value.type)) {
@@ -161,7 +168,11 @@ const preparedCall = (
     return lowerLevelCalls.map((call, index) => {
       return (
         <BatchCallStyled key={`${call.type}-${index}`}>
-          {preparedCall(call as CreateTreeParams['decodedCall'], chainInfo, true)}
+          {preparedCall({
+            decodedCall: call as CreateTreeParams['decodedCall'],
+            chainInfo,
+            isBatch: true
+          })}
         </BatchCallStyled>
       )
     })
@@ -189,6 +200,10 @@ const preparedCall = (
     }
   }
 
+  if (isFirstCall) {
+    return <PreStyled>{JSONprint(decodedCall.value.value)}</PreStyled>
+  }
+
   return <PreStyled>{JSONprint(decodedCall)}</PreStyled>
 }
 
@@ -197,7 +212,7 @@ const createUlTree = ({ name, decodedCall, chainInfo }: CreateTreeParams) => {
   if (!name) return
   if (!chainInfo) return
 
-  return preparedCall(decodedCall, chainInfo)
+  return preparedCall({ decodedCall, chainInfo, isFirstCall: true })
 }
 
 const filterProxyProxy = (agg: Props['aggregatedData']): Props['aggregatedData'] => {
@@ -299,6 +314,7 @@ const LinkStyled = styled(Link)`
 `
 
 const PreStyled = styled('pre')`
+  margin-top: 0;
   overflow: auto;
 `
 

packages/ui/src/components/Transactions/TransactionList.tsx

@@ -7,7 +7,6 @@ import { useAccounts } from '../../contexts/AccountsContext'
 import { MdOutlineFlare as FlareIcon } from 'react-icons/md'
 import Transaction from './Transaction'
 import { useMemo } from 'react'
-import { DeepTxAlert } from '../DeepTxAlert'
 
 interface Props {
   className?: string
@@ -25,18 +24,9 @@ const TransactionList = ({ className }: Props) => {
     refresh
   } = usePendingTx(multisigAddresses)
   const { ownAddressList } = useAccounts()
-  const pendingTxCallData = useMemo(() => {
-    return Object.values(txWithCallDataByDate)
-      .reduce((acc, curr) => {
-        return [...acc, ...curr]
-      }, [])
-      .map(({ callData }) => callData)
-      .filter((a) => !!a) as string[]
-  }, [txWithCallDataByDate])
 
   return (
     <Box className={className}>
-      <DeepTxAlert pendingTxCallData={pendingTxCallData} />
       <h3>Transactions</h3>
       {isLoadingPendingTxs && (
         <LoaderStyled>

packages/ui/src/components/layout/Center.tsx

@@ -15,6 +15,6 @@ export const Center = ({ children, className }: Props) => (
     justifyContent="center"
     style={{ height: '100%' }}
   >
-    <Grid size={{ xs: 3 }}>{children}</Grid>
+    <Grid size={{ xs: 12, md: 10, lg: 8 }}>{children}</Grid>
   </Grid>
 )