Serenity

src/App/index.tsx

@@ -31,6 +31,7 @@ import TermModal from './TermModal'
 
 import TermContext from 'src/logic/TermContext'
 import { fetchAllValidator } from 'src/logic/validator/store/actions'
+import ReceiveModal from './ReceiveModal'
 
 const notificationStyles = {
   success: {
@@ -76,7 +77,7 @@ const App: React.FC = ({ children }) => {
   const { name: safeName, totalFiatBalance: currentSafeBalance } = useSelector(currentSafeWithNames)
   const safeAddress = extractSafeAddress()
   const safeId = extractSafeId()
-  const { onShow, showSendFunds } = useSafeActions()
+  const { onShow, onHide, showSendFunds, safeActionsState } = useSafeActions()
   const { connectWalletState, onConnectWalletShow, onConnectWalletHide } = useConnectWallet()
   const currentCurrency = useSelector(currentCurrencySelector)
   const granted = useSelector(grantedSelector)
@@ -91,6 +92,7 @@ const App: React.FC = ({ children }) => {
     !!formattedTotalBalance && !!currentCurrency ? `${formattedTotalBalance} ${currentCurrency}` : undefined
 
   const onReceiveShow = () => onShow('Receive')
+  const onReceiveHide = () => onHide('Receive')
 
   const onTermHide = () => {
     termContext?.SetTerm(false)
@@ -139,6 +141,18 @@ const App: React.FC = ({ children }) => {
             onClose={onConnectWalletHide}
           ></ConnectWalletModal>
 
+          {safeAddress && (
+            <Modal
+              description="Receive Tokens Form"
+              handleClose={onReceiveHide}
+              open={safeActionsState.showReceive}
+              paperClassName="receive-modal"
+              title="Receive Tokens"
+            >
+              <ReceiveModal onClose={onReceiveHide} safeAddress={safeAddress} safeName={safeName} />
+            </Modal>
+          )}
+
           <Modal description="Term Tokens Form" handleClose={onTermHide} open={TermState} title="Term Tokens">
             <TermModal onClose={onTermHide} valueTerm={termContext?.valueTerm} />
           </Modal>

src/components/FeeAndSequence/index.tsx

@@ -31,6 +31,7 @@ export default function FeeAndSequence({
   useEffect(() => {
     setSequence(nextQueueSeq)
   }, [nextQueueSeq])
+
   useEffect(() => {
     recalculateFee()
   }, [manualGasLimit])

src/components/Input/TxMemo/index.tsx

@@ -3,10 +3,11 @@ import TextField from '../TextField'
 type Props = {
   txMemo: string
   setTxMemo: React.Dispatch<React.SetStateAction<string>>
+  disabled?: boolean
 }
-const TxMemo = ({ txMemo, setTxMemo }: Props) => {
+const TxMemo = ({ txMemo, setTxMemo, disabled }: Props) => {
   return (
-    <TextField placeholder="Transaction memo (optional)" label="Transaction memo" value={txMemo} onChange={setTxMemo} />
+    <TextField disabled={disabled} placeholder="Transaction memo (optional)" label="Transaction memo" value={txMemo} onChange={setTxMemo} />
   )
 }
 

src/layout/Sidebar/index.tsx

@@ -1,6 +1,3 @@
-import styled from 'styled-components'
-import { Divider } from '@aura/safe-react-components'
-
 import List, { ListItemType } from 'src/components/List'
 import SafeHeader from './SafeHeader'
 

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

@@ -13,7 +13,7 @@ import { SafeRecordProps } from 'src/logic/safe/store/models/safe'
 import { getLocalSafe } from 'src/logic/safe/utils'
 import { getSafeInfo } from 'src/logic/safe/utils/safeInformation'
 import { fetchMSafeTokens } from 'src/logic/tokens/store/actions/fetchSafeTokens'
-import { fetchAccountInfo, getAccountAsset, getMSafeInfo } from 'src/services'
+import { fetchAccountInfo, getAccountAsset, getMSafeInfo, getMSafeNextSeq } from 'src/services'
 import { IMSafeInfo } from 'src/types/safe'
 import { humanReadableValue } from 'src/utils'
 import { checksumAddress } from 'src/utils/checksumAddress'
@@ -143,9 +143,10 @@ export const fetchMSafe =
     let mSafeInfo: IMSafeInfo | null = null
     let accountInfo: SequenceResponse | null = null
     let isSafeLoaded = false
+    let nextQueueSeq = ''
 
     try {
-      ;[mSafeInfo, remoteSafeInfo, accountInfo, isSafeLoaded] = await _getSafeInfo(safeAddress, safeId)
+      ;[mSafeInfo, remoteSafeInfo, accountInfo, isSafeLoaded, nextQueueSeq] = await _getSafeInfo(safeAddress, safeId)
     } catch (err) {
       console.error(err)
     }
@@ -164,7 +165,7 @@ export const fetchMSafe =
       safeInfo = await extractRemoteSafeInfo(remoteSafeInfo)
       const onlineData: SequenceResponse | null = accountInfo
 
-      safeInfo.nextQueueSeq = mSafeInfo?.nextQueueSeq || onlineData?.sequence?.toString()
+      safeInfo.nextQueueSeq = nextQueueSeq || onlineData?.sequence?.toString()
       safeInfo.sequence = mSafeInfo?.sequence || onlineData?.sequence?.toString()
       const coinDecimal = getCoinDecimal()
       const { txQueuedTag, txHistoryTag, balances } = currentSafeWithNames(state)
@@ -217,18 +218,25 @@ export const fetchMSafe =
 async function _getSafeInfo(
   safeAddress: string,
   safeId: number,
-): Promise<[IMSafeInfo, SafeInfo, SequenceResponse, boolean]> {
+): Promise<[IMSafeInfo, SafeInfo, SequenceResponse, boolean, string]> {
   const getAccountAssetPromise = getAccountAsset(safeAddress)
   const getMSafeInfoPromise = getMSafeInfo(safeId)
   const getAccountInfoPromise = fetchAccountInfo(safeAddress)
+  const getMSafeNextSeqPromise = getMSafeNextSeq(safeId)
 
-  const results = await Promise.allSettled([getAccountAssetPromise, getMSafeInfoPromise, getAccountInfoPromise])
+  const results = await Promise.allSettled([
+    getAccountAssetPromise,
+    getMSafeInfoPromise,
+    getAccountInfoPromise,
+    getMSafeNextSeqPromise,
+  ])
 
-  const [accountAssetDataResult, mSafeInfotDataResult, accountInfoDataResult] = results
+  const [accountAssetDataResult, mSafeInfotDataResult, accountInfoDataResult, nextQueueSeqResult] = results
 
   const accountAssetData = accountAssetDataResult.status === 'fulfilled' ? accountAssetDataResult.value : null
   const mSafeInfotData = mSafeInfotDataResult.status === 'fulfilled' ? mSafeInfotDataResult.value : null
   const accountInfoData = accountInfoDataResult.status === 'fulfilled' ? accountInfoDataResult.value : null
+  const nextQueueSeq = nextQueueSeqResult.status === 'fulfilled' ? nextQueueSeqResult.value : ''
 
   if (!mSafeInfotData) {
     throw new Error('Get Safe Info failed')
@@ -316,5 +324,5 @@ async function _getSafeInfo(
     txHistoryTag: mSafeInfotData.txHistoryTag,
   }
 
-  return [formatMSafeInfotData, safeInfoData, accountInfoData, isSafeLoaded]
+  return [formatMSafeInfotData, safeInfoData, accountInfoData, isSafeLoaded, nextQueueSeq]
 }

src/pages/Assets/Tokens/index.tsx

@@ -16,6 +16,10 @@ import Checkbox from 'src/components/Input/Checkbox'
 import { updateSafe } from 'src/logic/safe/store/actions/updateSafe'
 import { loadFromLocalStorage } from 'src/utils/storage/local'
 import { LS_TOKEN_CONFIG } from 'src/utils/constants'
+import useSafeActions from 'src/logic/safe/hooks/useSafeActions'
+import Modal from 'src/components/Modal'
+import { extractSafeAddress } from 'src/routes/routes'
+import ReceiveModal from 'src/App/ReceiveModal'
 
 const Wrap = styled.div`
   background: ${(props) => props.theme.backgroundPrimary};
@@ -86,9 +90,14 @@ function Tokens(props): ReactElement {
   const [selectedToken, setSelectedToken] = useState<string>('')
   const [search, setSearch] = useState<string>('')
   const safeTokens: any = useSelector(extendedSafeTokensSelector)
-  const { address, isHideZeroBalance } = useSelector(currentSafeWithNames)
+  const { name: safeName, address, isHideZeroBalance, coinConfig: coinConfigState } = useSelector(currentSafeWithNames)
   const [hideZeroBalance, setHideZeroBalance] = useState(isHideZeroBalance)
   const coinConfig = loadFromLocalStorage(LS_TOKEN_CONFIG) as any[]
+  const { onShow, onHide, safeActionsState } = useSafeActions()
+  const safeAddress = extractSafeAddress()
+
+  const onReceiveShow = () => onShow('Receive')
+  const onReceiveHide = () => onHide('Receive')
 
   const getDefaultTokenConfig = (token) => ({
     address: token.address,
@@ -112,10 +121,7 @@ function Tokens(props): ReactElement {
     )
     .map((token) => getDefaultTokenConfig(token))
 
-  const getTokenConfig = (token) =>
-    token.type === 'native' || coinConfig?.find((coin) => coin.address === token.address)?.enable
-
-  const tokenConfig = [...safeTokens, ...(filteredTokens ?? [])].filter(getTokenConfig)
+  const tokenConfig = [...safeTokens, ...(filteredTokens ?? [])].filter((token) => token.type === 'native' || coinConfig?.find((coin) => coin.address === token.address)?.enable)
 
   const [listToken, setListToken] = useState(
     isHideZeroBalance ? tokenConfig.filter((token) => token.balance.tokenBalance > 0) : tokenConfig,
@@ -128,7 +134,7 @@ function Tokens(props): ReactElement {
         return token?.name?.toLowerCase().includes(search) || token?.address?.toLowerCase().includes(search)
       }),
     )
-  }, [safeTokens, hideZeroBalance])
+  }, [safeTokens, hideZeroBalance, coinConfigState])
 
   const handleSearch = (event: ChangeEvent<HTMLInputElement>) => {
     const searchTerm = event.target.value.toLowerCase()
@@ -200,7 +206,7 @@ function Tokens(props): ReactElement {
                     <img src={sendIcon} alt="" />
                     Send
                   </OutlinedNeutralButton>
-                  <OutlinedNeutralButton className="small" style={{ marginLeft: 8 }}>
+                  <OutlinedNeutralButton className="small" style={{ marginLeft: 8 }} onClick={onReceiveShow}>
                     <img style={{ transform: 'rotate(180deg)' }} src={sendIcon} alt="" />
                     Receive
                   </OutlinedNeutralButton>
@@ -210,7 +216,7 @@ function Tokens(props): ReactElement {
           )
         })}
       </DenseTable>
-      <SendingPopup defaultToken={selectedToken} open={open} onOpen={() => {}} onClose={() => setOpen(false)} />
+      <SendingPopup defaultToken={selectedToken} open={open} onOpen={() => { }} onClose={() => setOpen(false)} />
       {keepMountedManagePopup && (
         <ManageTokenPopup
           open={manageTokenPopupOpen}
@@ -236,6 +242,15 @@ function Tokens(props): ReactElement {
           setKeepMoutedManagePopup(false)
         }}
       />
+      <Modal
+        description="Receive Tokens Form"
+        handleClose={onReceiveHide}
+        open={safeActionsState.showReceive}
+        paperClassName="receive-modal"
+        title="Receive Tokens"
+      >
+        <ReceiveModal onClose={onReceiveHide} safeAddress={safeAddress} safeName={safeName} />
+      </Modal>
     </Wrap>
   )
 }

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

@@ -116,7 +116,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
                   <Gap height={24} />
                 </>
               )}
-              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
+              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} disabled={action === 'execute'} />
               <Gap height={24} />
               <Amount label="Total Allocation Amount" amount={formatNativeToken(+data.txDetails?.fee || 0)} />
             </>

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

@@ -125,7 +125,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
                   <Gap height={24} />
                 </>
               )}
-              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
+              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} disabled={action === 'execute'} />
               <Gap height={24} />
               <Divider />
               <Amount label="Total Allocation Amount" amount={formatNativeToken(+data.txDetails?.fee || 0)} />

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

@@ -147,7 +147,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
                   <Gap height={16} />
                 </>
               )}
-              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
+              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} disabled={action === 'execute'} />
               <Gap height={16} />
               <Divider />
               <Amount

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

@@ -128,7 +128,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
                   <Gap height={24} />
                 </>
               )}
-              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
+              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} disabled={action === 'execute'} />
               <Gap height={24} />
               <Amount amount={formatNativeToken(data?.txDetails?.txMessage[0]?.amount)} />
               <Divider />

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

@@ -133,7 +133,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
                   <Gap height={16} />
                 </>
               )}
-              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
+              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} disabled={action === 'execute'} />
               <Gap height={16} />
               <Amount label="Total Amount" amount={formatNativeToken(totalAmount)} />
               <Divider />

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

@@ -135,7 +135,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
                   <Gap height={24} />
                 </>
               )}
-              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
+              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} disabled={action === 'execute'} />
               <Gap height={24} />
               <Amount amount={formatNativeToken(data?.txDetails?.txMessage[0]?.amount)} />
               <Divider />

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

@@ -123,7 +123,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
                 </>
               )}
               <Gap height={16} />
-              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
+              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} disabled={action === 'execute'} />
               <Divider />
               <Amount label="Total Allocation Amount" amount={totalAllocationAmount} />
               <Divider />

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

@@ -131,7 +131,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
                   <Gap height={24} />
                 </>
               )}
-              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
+              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} disabled={action === 'execute'} />
               <Gap height={24} />
               <Amount amount={formatNativeToken(data?.txDetails?.txMessage[0]?.amount)} />
               <Divider />

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

@@ -130,7 +130,7 @@ export default function Execute({ open, onClose, data, sendTx, rejectTx, disable
                   <Gap height={16} />
                 </>
               )}
-              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} />
+              <TxMemo txMemo={txMemo} setTxMemo={setTxMemo} disabled={action === 'execute'} />
               <Gap height={16} />
               <Amount label="Total Allocation Amount" amount={formatNativeToken(+data.txDetails?.fee || 0)} />
             </>

src/services/index.ts

@@ -161,6 +161,10 @@ export async function getMSafeInfo(safeId: number): Promise<IMSafeInfo> {
   return axios.get(`${baseUrl}/multisigwallet/${safeId}`).then((res) => res.data.Data)
 }
 
+export async function getMSafeNextSeq(safeId: number): Promise<string> {
+  return axios.get(`${baseUrl}/transaction/next-seq?safeId=${safeId}`).then((res) => res.data.nextSequence)
+}
+
 export async function getAccountAsset(safeAddress: string): Promise<any> {
   const chainInfo = getChainInfo() as any
   return axios