Dev

src/components/Input/TxMemo/index.tsx

@@ -0,0 +1,13 @@
+import TextField from '../TextField'
+
+type Props = {
+  txMemo: string
+  setTxMemo: React.Dispatch<React.SetStateAction<string>>
+}
+const TxMemo = ({ txMemo, setTxMemo }: Props) => {
+  return (
+    <TextField placeholder="Transaction memo (optional)" label="Transaction memo" value={txMemo} onChange={setTxMemo} />
+  )
+}
+
+export default TxMemo

src/components/Popup/MultiSendPopup/CreateTxPopup.tsx

@@ -21,6 +21,7 @@ import { RecipientProps } from '.'
 import { Popup } from '..'
 import Header from '../Header'
 import { Footer, Wrapper } from './styles'
+import TxMemo from 'src/components/Input/TxMemo'
 
 export default function CreateTxPopup({
   open,
@@ -48,6 +49,7 @@ export default function CreateTxPopup({
   const [openGasInput, setOpenGasInput] = useState<boolean>(false)
   const [totalAmount, setTotalAmount] = useState('0')
   const [sequence, setSequence] = useState(nextQueueSeq)
+  const [txMemo, setTxMemo] = useState<string>('')
 
   useEffect(() => {
     if (gasUsed != '0') {
@@ -87,12 +89,14 @@ export default function CreateTxPopup({
         manualGasLimit || '250000',
         sequence,
         undefined,
+        txMemo,
         () => {
           setDisabled(true)
         },
         () => {
           setDisabled(false)
           handleClose()
+          setTxMemo('')
         },
         () => {
           setDisabled(false)
@@ -109,6 +113,7 @@ export default function CreateTxPopup({
         onClose={() => {
           setDisabled(false)
           handleClose()
+          setTxMemo('')
         }}
       />
       <Wrapper>
@@ -142,6 +147,8 @@ export default function CreateTxPopup({
           sequence={sequence}
           setSequence={setSequence}
         />
+        <Gap height={24} />
+        <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
         <Divider />
 
         <Amount

src/components/Popup/SendingPopup/CreateTxPopup.tsx

@@ -1,19 +1,19 @@
 import { coins } from '@cosmjs/stargate'
 import BigNumber from 'bignumber.js'
 import { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import AddressInfo from 'src/components/AddressInfo'
 import { FilledButton, OutlinedNeutralButton } from 'src/components/Button'
 import Divider from 'src/components/Divider'
 import FeeAndSequence from 'src/components/FeeAndSequence'
 import Gap from 'src/components/Gap'
+import TxMemo from 'src/components/Input/TxMemo'
 import Loader from 'src/components/Loader'
 import Amount from 'src/components/TxComponents/Amount'
-import { getChainDefaultGasPrice, getCoinDecimal, getCoinMinimalDenom, getNativeCurrency } from 'src/config'
+import { getChainDefaultGasPrice, getCoinDecimal, getCoinMinimalDenom } from 'src/config'
 import { AddressBookEntry } from 'src/logic/addressBook/model/addressBook'
 import { MsgTypeUrl } from 'src/logic/providers/constants/constant'
 import calculateGasFee from 'src/logic/providers/utils/fee'
-import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
 import { Token } from 'src/logic/tokens/store/model/token'
 import { extractSafeAddress } from 'src/routes/routes'
 import { convertAmount, formatNativeCurrency, formatWithComma } from 'src/utils'
@@ -38,8 +38,6 @@ export default function CreateTxPopup({
   gasUsed: string
 }) {
   const safeAddress = extractSafeAddress()
-  const nativeCurrency = getNativeCurrency()
-  const { nativeBalance: balance } = useSelector(currentSafeWithNames)
   const dispatch = useDispatch()
   const denom = getCoinMinimalDenom()
   const chainDefaultGasPrice = getChainDefaultGasPrice()
@@ -49,6 +47,7 @@ export default function CreateTxPopup({
   const [gasPriceFormatted, setGasPriceFormatted] = useState(gasFee)
   const [openGasInput, setOpenGasInput] = useState<boolean>(false)
   const [isDisabled, setDisabled] = useState(false)
+  const [txMemo, setTxMemo] = useState<string>('')
 
   const [sequence, setSequence] = useState('1')
 
@@ -95,12 +94,14 @@ export default function CreateTxPopup({
         manualGasLimit,
         sequence,
         recipient?.address,
+        txMemo,
         () => {
           setDisabled(true)
         },
         () => {
           setDisabled(false)
           handleClose()
+          setTxMemo('')
         },
         () => {
           setDisabled(false)
@@ -110,8 +111,22 @@ export default function CreateTxPopup({
   }
 
   return (
-    <Popup open={open} handleClose={() => handleClose()} title="">
-      <Header subTitle="Step 2 of 2" title="Send funds" onClose={() => handleClose()} />
+    <Popup
+      open={open}
+      handleClose={() => {
+        handleClose()
+        setTxMemo('')
+      }}
+      title=""
+    >
+      <Header
+        subTitle="Step 2 of 2"
+        title="Send funds"
+        onClose={() => {
+          handleClose()
+          setTxMemo('')
+        }}
+      />
       <Wrapper>
         <AddressInfo address={safeAddress} />
         <div className="balance">
@@ -135,6 +150,8 @@ export default function CreateTxPopup({
           sequence={sequence}
           setSequence={setSequence}
         />
+        <Gap height={24} />
+        <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
         <Divider />
 
         <Amount

src/components/ReviewInfoText/index.tsx

@@ -1,13 +1,13 @@
-import styled from 'styled-components'
 import { Text } from '@aura/safe-react-components'
 import { useSelector } from 'react-redux'
+import styled from 'styled-components'
 
+import { useState } from 'react'
 import Paragraph from 'src/components/layout/Paragraph'
+import { EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
 import { currentSafe } from 'src/logic/safe/store/selectors'
 import { getLastTxNonce } from 'src/logic/safe/store/selectors/gatewayTransactions'
 import { TransactionFees } from '../TransactionsFees'
-import { useState } from 'react'
-import { EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
 
 type CustomReviewInfoTextProps = {
   safeNonce?: string

src/logic/safe/store/actions/fetchTransactionDetails.ts

@@ -90,6 +90,7 @@ export const fetchTransactionDetailsById =
         autoClaimAmount: Data?.AutoClaimAmount,
         sequence: Data?.Sequence,
         logs: Data?.Logs,
+        txMemo: Data?.Memo,
       }
 
       dispatch(

src/pages/Avanced/Custom Transaction/ReviewPopup.tsx

@@ -77,6 +77,7 @@ export default function ReviewPopup({ open, setOpen, gasUsed, msg }) {
         manualGasLimit || '250000',
         sequence,
         undefined,
+        undefined,
         () => {
           setDisabled(true)
         },

src/pages/SmartContract/ContractInteraction/ReviewPopup.tsx

@@ -72,6 +72,7 @@ export default function ReviewPopup({ open, setOpen, gasUsed, data, contractData
         manualGasLimit || '250000',
         sequence,
         undefined,
+        undefined,
         () => {
           setDisabled(true)
         },

src/pages/Staking/TxActionModal/ClaimReward.tsx

@@ -42,6 +42,7 @@ export default function ClaimReward({ listReward, onClose, gasUsed }) {
         manualGasLimit || '250000',
         sequence,
         undefined,
+        undefined,
         () => {
           setDisabled(true)
         },

src/pages/Staking/TxActionModal/Delegate.tsx

@@ -59,6 +59,7 @@ export default function Delegate({ validator, amount, onClose, gasUsed }) {
         manualGasLimit || '250000',
         sequence,
         undefined,
+        undefined,
         () => {
           setDisabled(true)
         },

src/pages/Staking/TxActionModal/Redelegate.tsx

@@ -64,6 +64,7 @@ export default function Redelegate({ validator, amount, onClose, dstValidator, g
         manualGasLimit || '250000',
         sequence,
         undefined,
+        undefined,
         () => {
           setDisabled(true)
         },

src/pages/Staking/TxActionModal/Undelegate.tsx

@@ -68,6 +68,7 @@ export default function Undelegate({ validator, amount, onClose, gasUsed }) {
         manualGasLimit || '250000',
         sequence,
         undefined,
+        undefined,
         () => {
           setDisabled(true)
         },

src/pages/Transactions/TxActionModal/ClaimReward/index.tsx

@@ -47,6 +47,7 @@ export default function Execute({
             gas: data?.txDetails?.gas.toString(),
           },
           sequence,
+          undefined,
           () => {
             setDisabled(true)
           },
@@ -69,6 +70,7 @@ export default function Execute({
             gas: data?.txDetails?.gas.toString(),
           },
           sequence,
+          undefined,
           () => {
             setDisabled(true)
           },

src/pages/Transactions/TxActionModal/ContractInteraction/index.tsx

@@ -11,26 +11,21 @@ import Header from 'src/components/Popup/Header'
 import Amount from 'src/components/TxComponents/Amount'
 import { getCoinMinimalDenom } from 'src/config'
 import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
-import { extractSafeAddress } from 'src/routes/routes'
 import { formatNativeCurrency, formatNativeToken } from 'src/utils'
 import { TxSignModalContext } from '../../Queue'
 import { ReviewTxPopupWrapper } from '../../styled'
 
-import { MsgTypeUrl } from 'src/logic/providers/constants/constant'
-import { userAccountSelector } from 'src/logic/wallets/store/selectors'
 import { signAndChangeTransactionSequence, signAndConfirmTransaction } from 'src/utils/signer'
 import { getNotice, getTitle } from '..'
 import EditSequence from '../EditSequence'
 import { DeleteButton, TxContent } from '../styles'
 export default function Execute({ open, onClose, data, sendTx, rejectTx, disabled, setDisabled, deleteTx }) {
   const { nativeBalance: balance, nextQueueSeq, sequence: currentSequence } = useSelector(currentSafeWithNames)
   const { action } = useContext(TxSignModalContext)
-  const userWalletAddress = useSelector(userAccountSelector)
   const dispatch = useDispatch()
   const [sequence, setSequence] = useState(data?.txSequence)
 
   const txHandler = async (type) => {
-    const safeAddress = extractSafeAddress()
     if (type == 'confirm') {
       dispatch(
         signAndConfirmTransaction(
@@ -41,6 +36,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
             gas: data?.txDetails?.gas.toString(),
           },
           sequence,
+          undefined,
           () => {
             setDisabled(true)
           },
@@ -63,6 +59,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
             gas: data?.txDetails?.gas.toString(),
           },
           sequence,
+          undefined,
           () => {
             setDisabled(true)
           },

src/pages/Transactions/TxActionModal/CustomTransaction/index.tsx

@@ -9,7 +9,7 @@ import { Popup } from 'src/components/Popup'
 import Footer from 'src/components/Popup/Footer'
 import Header from 'src/components/Popup/Header'
 import Amount from 'src/components/TxComponents/Amount'
-import { getCoinMinimalDenom, getNativeCurrency } from 'src/config'
+import { getCoinMinimalDenom } from 'src/config'
 import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
 import { extractSafeAddress } from 'src/routes/routes'
 import { formatNativeCurrency, formatNativeToken, formatNumber } from 'src/utils'
@@ -19,30 +19,18 @@ import { ReviewTxPopupWrapper } from '../../styled'
 import BigNumber from 'bignumber.js'
 import { Message } from 'src/components/CustomTransactionMessage/SmallMsg'
 import { MsgTypeUrl } from 'src/logic/providers/constants/constant'
-import { userAccountSelector } from 'src/logic/wallets/store/selectors'
 import { signAndChangeTransactionSequence, signAndConfirmTransaction } from 'src/utils/signer'
 import { getNotice, getTitle } from '..'
 import EditSequence from '../EditSequence'
 import { DeleteButton, TxContent } from '../styles'
-export default function Execute({
-  open,
-  onClose,
-  data,
-  sendTx,
-  rejectTx,
-  disabled,
-  setDisabled,
 
-  deleteTx,
-}) {
+export default function Execute({ open, onClose, data, sendTx, rejectTx, disabled, setDisabled, deleteTx }) {
   const { nativeBalance: balance, nextQueueSeq, sequence: currentSequence } = useSelector(currentSafeWithNames)
   const { action } = useContext(TxSignModalContext)
-  const userWalletAddress = useSelector(userAccountSelector)
   const [sequence, setSequence] = useState(data?.txSequence)
   const safeAddress = extractSafeAddress()
   const dispatch = useDispatch()
   const [amount, setAmount] = useState('0')
-  const nativeCurrency = getNativeCurrency()
 
   useEffect(() => {
     let newTotalAmount = new BigNumber(0)
@@ -71,6 +59,7 @@ export default function Execute({
             gas: data?.txDetails?.gas.toString(),
           },
           sequence,
+          undefined,
           () => {
             setDisabled(true)
           },
@@ -93,6 +82,7 @@ export default function Execute({
             gas: data?.txDetails?.gas.toString(),
           },
           sequence,
+          undefined,
           () => {
             setDisabled(true)
           },

src/pages/Transactions/TxActionModal/Delegate/index.tsx

@@ -21,17 +21,8 @@ import { signAndChangeTransactionSequence, signAndConfirmTransaction } from 'src
 import { getNotice, getTitle } from '..'
 import EditSequence from '../EditSequence'
 import { DeleteButton, TxContent } from '../styles'
-export default function Execute({
-  open,
-  onClose,
-  data,
-  sendTx,
-  rejectTx,
-  disabled,
-  setDisabled,
 
-  deleteTx,
-}) {
+export default function Execute({ open, onClose, data, sendTx, rejectTx, disabled, setDisabled, deleteTx }) {
   const { nativeBalance: balance, nextQueueSeq, sequence: currentSequence } = useSelector(currentSafeWithNames)
   const { action } = useContext(TxSignModalContext)
   const delegations = useSelector(allDelegation)
@@ -53,6 +44,7 @@ export default function Execute({
             gas: data?.txDetails?.gas.toString(),
           },
           sequence,
+          undefined,
           () => {
             setDisabled(true)
           },
@@ -75,6 +67,7 @@ export default function Execute({
             gas: data?.txDetails?.gas.toString(),
           },
           sequence,
+          undefined,
           () => {
             setDisabled(true)
           },