Merge pull request #346 from aura-nw/serenity

Serenity

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/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/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

@@ -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,6 +78,7 @@ export default function ReviewPopup({ open, setOpen, gasUsed, msg }) {
         manualGasLimit || '250000',
         sequence,
         undefined,
+        txMemo,
         () => {
           setDisabled(true)
         },
@@ -122,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,6 +75,7 @@ export default function ReviewPopup({ open, setOpen, gasUsed, data, contractData
         manualGasLimit || '250000',
         sequence,
         undefined,
+        txMemo,
         () => {
           setDisabled(true)
         },
@@ -116,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,6 +44,7 @@ export default function ClaimReward({ listReward, onClose, gasUsed }) {
         manualGasLimit || '250000',
         sequence,
         undefined,
+        txMemo,
         () => {
           setDisabled(true)
         },
@@ -79,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,6 +61,7 @@ export default function Delegate({ validator, amount, onClose, gasUsed }) {
         manualGasLimit || '250000',
         sequence,
         undefined,
+        txMemo,
         () => {
           setDisabled(true)
         },
@@ -100,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,6 +66,7 @@ export default function Redelegate({ validator, amount, onClose, dstValidator, g
         manualGasLimit || '250000',
         sequence,
         undefined,
+        txMemo,
         () => {
           setDisabled(true)
         },
@@ -106,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">