add tx memo

src/components/JsonschemaForm/Field.tsx

@@ -1,7 +1,5 @@
-import styled from 'styled-components'
 import TextField from '../Input/TextField'
 
-const Wrap = styled.div``
 export default function Field({ fieldSchema, value, onChange, errorMsg }) {
   if (
     fieldSchema.type == 'integer' ||

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

@@ -1,6 +1,7 @@
 import BigNumber from 'bignumber.js'
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import AlertIcon from 'src/assets/icons/alert.svg'
 import AddressInfo from 'src/components/AddressInfo'
 import { FilledButton, OutlinedNeutralButton } from 'src/components/Button'
 import { Message } from 'src/components/CustomTransactionMessage/SmallMsg'
@@ -10,16 +11,17 @@ 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 { getChainDefaultGasPrice, getChainInfo, getCoinDecimal, getNativeCurrency } from 'src/config'
+import { getChainDefaultGasPrice, getCoinDecimal, getNativeCurrency } from 'src/config'
 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 { userAccountSelector } from 'src/logic/wallets/store/selectors'
 import { extractSafeAddress } from 'src/routes/routes'
 import { formatNativeCurrency, formatNumber } from 'src/utils'
 import { signAndCreateTransaction } from 'src/utils/signer'
+import TxMemo from 'src/components/Input/TxMemo'
 import { Wrap } from './styles'
-import AlertIcon from 'src/assets/icons/alert.svg'
+import Gap from 'src/components/Gap'
+
 export default function ReviewPopup({ open, setOpen, gasUsed, msg }) {
   const safeAddress = extractSafeAddress()
   const dispatch = useDispatch()
@@ -39,8 +41,7 @@ export default function ReviewPopup({ open, setOpen, gasUsed, msg }) {
   const [sequence, setSequence] = useState('0')
   const [isDisabled, setDisabled] = useState(false)
   const [amount, setAmount] = useState('0')
-  const userWalletAddress = useSelector(userAccountSelector)
-  const chainInfo = getChainInfo()
+  const [txMemo, setTxMemo] = useState<string>('')
 
   useEffect(() => {
     if (gasUsed) {
@@ -77,7 +78,7 @@ export default function ReviewPopup({ open, setOpen, gasUsed, msg }) {
         manualGasLimit || '250000',
         sequence,
         undefined,
-        undefined,
+        txMemo,
         () => {
           setDisabled(true)
         },
@@ -123,6 +124,8 @@ export default function ReviewPopup({ open, setOpen, gasUsed, msg }) {
           sequence={sequence}
           setSequence={setSequence}
         />
+        <Gap height={24} />
+        <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
         <Divider />
         <Amount
           amount={formatNativeCurrency(

src/pages/SmartContract/ContractInteraction/ReviewPopup.tsx

@@ -17,6 +17,8 @@ import { convertAmount, formatNativeCurrency } from 'src/utils'
 import { signAndCreateTransaction } from 'src/utils/signer'
 import { Wrap } from './styles'
 import { IFund } from 'src/components/JsonschemaForm/FundForm'
+import Gap from 'src/components/Gap'
+import TxMemo from 'src/components/Input/TxMemo'
 
 export default function ReviewPopup({ open, setOpen, gasUsed, data, contractData }) {
   const safeAddress = extractSafeAddress()
@@ -35,6 +37,7 @@ export default function ReviewPopup({ open, setOpen, gasUsed, data, contractData
   const [openGasInput, setOpenGasInput] = useState<boolean>(false)
   const [sequence, setSequence] = useState('0')
   const [isDisabled, setDisabled] = useState(false)
+  const [txMemo, setTxMemo] = useState<string>('')
 
   useEffect(() => {
     if (gasUsed) {
@@ -72,7 +75,7 @@ export default function ReviewPopup({ open, setOpen, gasUsed, data, contractData
         manualGasLimit || '250000',
         sequence,
         undefined,
-        undefined,
+        txMemo,
         () => {
           setDisabled(true)
         },
@@ -117,6 +120,8 @@ export default function ReviewPopup({ open, setOpen, gasUsed, data, contractData
           sequence={sequence}
           setSequence={setSequence}
         />
+        <Gap height={24} />
+        <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
         <Divider />
         <Amount
           listTokens={contractData.funds}

src/pages/Staking/TxActionModal/ClaimReward.tsx

@@ -12,6 +12,7 @@ import calculateGasFee from 'src/logic/providers/utils/fee'
 import { formatNativeCurrency } from 'src/utils'
 import { signAndCreateTransaction } from 'src/utils/signer'
 import { Wrapper } from './style'
+import TxMemo from 'src/components/Input/TxMemo'
 
 export default function ClaimReward({ listReward, onClose, gasUsed }) {
   const dispatch = useDispatch()
@@ -27,6 +28,7 @@ export default function ClaimReward({ listReward, onClose, gasUsed }) {
   const [openGasInput, setOpenGasInput] = useState<boolean>(false)
   const [isDisabled, setDisabled] = useState(false)
   const [sequence, setSequence] = useState('0')
+  const [txMemo, setTxMemo] = useState<string>('')
 
   const signTransaction = async () => {
     const msgs: any[] = listReward.map((item) => ({
@@ -42,7 +44,7 @@ export default function ClaimReward({ listReward, onClose, gasUsed }) {
         manualGasLimit || '250000',
         sequence,
         undefined,
-        undefined,
+        txMemo,
         () => {
           setDisabled(true)
         },
@@ -80,6 +82,8 @@ export default function ClaimReward({ listReward, onClose, gasUsed }) {
           setSequence={setSequence}
         />
         <Gap height={16} />
+        <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
+        <Gap height={16} />
         <Amount amount={formatNativeCurrency(+gasPriceFormatted)} label="Total Allocation Amount" />
         <div className="notice">
           You’re about to create a transaction and will have to confirm it with your currently connected wallet.

src/pages/Staking/TxActionModal/Delegate.tsx

@@ -18,6 +18,7 @@ import { convertAmount, formatNativeCurrency, formatNativeToken } from 'src/util
 import { signAndCreateTransaction } from 'src/utils/signer'
 import { Wrapper } from './style'
 import { DEFAULT_GAS_LIMIT } from 'src/services/constant/common'
+import TxMemo from 'src/components/Input/TxMemo'
 
 export default function Delegate({ validator, amount, onClose, gasUsed }) {
   const safeAddress = extractSafeAddress()
@@ -41,6 +42,7 @@ export default function Delegate({ validator, amount, onClose, gasUsed }) {
   const [openGasInput, setOpenGasInput] = useState<boolean>(false)
   const [isDisabled, setDisabled] = useState(false)
   const [sequence, setSequence] = useState('0')
+  const [txMemo, setTxMemo] = useState<string>('')
 
   const signTransaction = async () => {
     const msgs = [
@@ -59,7 +61,7 @@ export default function Delegate({ validator, amount, onClose, gasUsed }) {
         manualGasLimit || '250000',
         sequence,
         undefined,
-        undefined,
+        txMemo,
         () => {
           setDisabled(true)
         },
@@ -101,6 +103,8 @@ export default function Delegate({ validator, amount, onClose, gasUsed }) {
           sequence={sequence}
           setSequence={setSequence}
         />
+        <Gap height={24} />
+        <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
         <Divider />
         <Amount amount={formatNativeCurrency(+gasPriceFormatted)} label="Total Allocation Amount" />
         <div className="notice">

src/pages/Staking/TxActionModal/Redelegate.tsx

@@ -17,6 +17,7 @@ import { DEFAULT_GAS_LIMIT } from 'src/services/constant/common'
 import { convertAmount, formatNativeCurrency, formatNativeToken } from 'src/utils'
 import { signAndCreateTransaction } from 'src/utils/signer'
 import { Wrapper } from './style'
+import TxMemo from 'src/components/Input/TxMemo'
 
 export default function Redelegate({ validator, amount, onClose, dstValidator, gasUsed }) {
   const safeAddress = extractSafeAddress()
@@ -45,6 +46,7 @@ export default function Redelegate({ validator, amount, onClose, dstValidator, g
   const [openGasInput, setOpenGasInput] = useState<boolean>(false)
   const [isDisabled, setDisabled] = useState(false)
   const [sequence, setSequence] = useState('0')
+  const [txMemo, setTxMemo] = useState<string>('')
 
   const signTransaction = async () => {
     const msgs = [
@@ -64,7 +66,7 @@ export default function Redelegate({ validator, amount, onClose, dstValidator, g
         manualGasLimit || '250000',
         sequence,
         undefined,
-        undefined,
+        txMemo,
         () => {
           setDisabled(true)
         },
@@ -107,6 +109,8 @@ export default function Redelegate({ validator, amount, onClose, dstValidator, g
           sequence={sequence}
           setSequence={setSequence}
         />
+        <Gap height={24} />
+        <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
         <Divider />
         <Amount amount={formatNativeCurrency(+gasPriceFormatted)} label="Total Allocation Amount" />
         <div className="notice">

src/pages/Staking/TxActionModal/Undelegate.tsx

@@ -6,15 +6,10 @@ 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 Footer from 'src/components/Popup/Footer'
 import Amount from 'src/components/TxComponents/Amount'
-import {
-  getChainDefaultGas,
-  getChainDefaultGasPrice,
-  getCoinDecimal,
-  getCoinMinimalDenom,
-  getNativeCurrency,
-} from 'src/config'
+import { getChainDefaultGas, getChainDefaultGasPrice, getCoinDecimal, getCoinMinimalDenom } from 'src/config'
 import { allDelegation } from 'src/logic/delegation/store/selectors'
 import { MsgTypeUrl } from 'src/logic/providers/constants/constant'
 import calculateGasFee from 'src/logic/providers/utils/fee'
@@ -33,7 +28,6 @@ export default function Undelegate({ validator, amount, onClose, gasUsed }) {
   const stakedAmount = delegations?.find(
     (delegation: any) => delegation.operatorAddress == validator.safeStaking,
   )?.staked
-  const nativeCurrency = getNativeCurrency()
   const denom = getCoinMinimalDenom()
   const chainDefaultGas = getChainDefaultGas()
   const chainDefaultGasPrice = getChainDefaultGasPrice()
@@ -51,6 +45,8 @@ export default function Undelegate({ validator, amount, onClose, gasUsed }) {
   const [openGasInput, setOpenGasInput] = useState<boolean>(false)
   const [isDisabled, setDisabled] = useState(false)
   const [sequence, setSequence] = useState('0')
+  const [txMemo, setTxMemo] = useState<string>('')
+
   const signTransaction = async () => {
     const msgs = [
       {
@@ -68,7 +64,7 @@ export default function Undelegate({ validator, amount, onClose, gasUsed }) {
         manualGasLimit || '250000',
         sequence,
         undefined,
-        undefined,
+        txMemo,
         () => {
           setDisabled(true)
         },
@@ -110,6 +106,8 @@ export default function Undelegate({ validator, amount, onClose, gasUsed }) {
           sequence={sequence}
           setSequence={setSequence}
         />
+        <Gap height={24} />
+        <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
         <Divider />
         <Amount amount={formatNativeCurrency(gasPriceFormatted)} label="Total Allocation Amount" />
         <div className="notice">

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

@@ -7,35 +7,25 @@ import { Popup } from 'src/components/Popup'
 import Footer from 'src/components/Popup/Footer'
 import Header from 'src/components/Popup/Header'
 import { getCoinMinimalDenom } from 'src/config'
-import { userAccountSelector } from 'src/logic/wallets/store/selectors'
-
 import AddressInfo from 'src/components/AddressInfo'
 import Amount from 'src/components/TxComponents/Amount'
 import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
 import { formatNativeToken } from 'src/utils'
 import { signAndChangeTransactionSequence, signAndConfirmTransaction } from 'src/utils/signer'
 import { getNotice, getTitle } from '..'
+import TxMemo from 'src/components/Input/TxMemo'
 import { TxSignModalContext } from '../../Queue'
 import { ReviewTxPopupWrapper } from '../../styled'
 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 { action } = useContext(TxSignModalContext)
-  const userWalletAddress = useSelector(userAccountSelector)
   const dispatch = useDispatch()
   const [sequence, setSequence] = useState(data?.txSequence)
-  const { nativeBalance: balance, nextQueueSeq, sequence: currentSequence } = useSelector(currentSafeWithNames)
+  const [txMemo, setTxMemo] = useState(data?.txDetails?.txMemo)
+
+  const { sequence: currentSequence } = useSelector(currentSafeWithNames)
   const txHandler = async (type) => {
     if (type == 'confirm') {
       dispatch(
@@ -47,7 +37,7 @@ export default function Execute({
             gas: data?.txDetails?.gas.toString(),
           },
           sequence,
-          undefined,
+          txMemo,
           () => {
             setDisabled(true)
           },
@@ -70,7 +60,7 @@ export default function Execute({
             gas: data?.txDetails?.gas.toString(),
           },
           sequence,
-          undefined,
+          txMemo,
           () => {
             setDisabled(true)
           },
@@ -126,6 +116,8 @@ export default function Execute({
                   <Gap height={24} />
                 </>
               )}
+              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
+              <Gap height={24} />
               <Amount label="Total Allocation Amount" amount={formatNativeToken(+data.txDetails?.fee || 0)} />
             </>
           )}

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

@@ -19,11 +19,14 @@ import { signAndChangeTransactionSequence, signAndConfirmTransaction } from 'src
 import { getNotice, getTitle } from '..'
 import EditSequence from '../EditSequence'
 import { DeleteButton, TxContent } from '../styles'
+import TxMemo from '../../../../components/Input/TxMemo'
+
 export default function Execute({ open, onClose, data, sendTx, rejectTx, disabled, setDisabled, deleteTx }) {
-  const { nativeBalance: balance, nextQueueSeq, sequence: currentSequence } = useSelector(currentSafeWithNames)
+  const { nativeBalance: balance, sequence: currentSequence } = useSelector(currentSafeWithNames)
   const { action } = useContext(TxSignModalContext)
   const dispatch = useDispatch()
   const [sequence, setSequence] = useState(data?.txSequence)
+  const [txMemo, setTxMemo] = useState(data?.txDetails?.txMemo)
 
   const txHandler = async (type) => {
     if (type == 'confirm') {
@@ -36,7 +39,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
             gas: data?.txDetails?.gas.toString(),
           },
           sequence,
-          undefined,
+          txMemo,
           () => {
             setDisabled(true)
           },
@@ -59,7 +62,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
             gas: data?.txDetails?.gas.toString(),
           },
           sequence,
-          undefined,
+          txMemo,
           () => {
             setDisabled(true)
           },
@@ -122,6 +125,8 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
                   <Gap height={24} />
                 </>
               )}
+              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
+              <Gap height={24} />
               <Divider />
               <Amount label="Total Allocation Amount" amount={formatNativeToken(+data.txDetails?.fee || 0)} />
             </>