diff --git a/src/components/sendTx/ExportSuccessModal.tsx b/src/components/sendTx/ExportSuccessModal.tsx new file mode 100644 index 0000000..79d8d67 --- /dev/null +++ b/src/components/sendTx/ExportSuccessModal.tsx @@ -0,0 +1,85 @@ +import { + Button, + List, + ListItem, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Text, +} from '@chakra-ui/react'; +import { StdPublicKeys, StdTemplateKeys } from '@spacemesh/sm-codec'; + +type Props = { + templateAddress: StdTemplateKeys; + isSigned: boolean; + isOpen: boolean; + onClose: () => void; +}; + +function ExportSuccessModal({ + templateAddress, + isSigned, + isOpen, + onClose, +}: Props) { + return ( + + + + + + Transaction + {isSigned ? ' signed and ' : ' '} + exported successfully + + + To complete the transaction, follow these steps: + + {templateAddress === StdPublicKeys.MultiSig || + templateAddress === StdPublicKeys.Vesting ? ( + <> + + + If you own one of the required keys — import the transaction + and sign it + {isSigned ? ' again.' : ' .'}, + + + Send the exported file to other parties if needed. + + + Collect all the signatures, then import them, and publish the + transaction. + + + + Signatures can be collected either synchronously or + asynchronously. This means you can send the signed transaction + to all other parties and request their signatures. Once you have + gathered enough signatures, you can import them all at once, and + they will be combined automatically. + + + ) : ( + + Import this transaction file. + {!isSigned && Sign it.} + Publish the signed transaction. + + )} + + + + + + + ); +} + +export default ExportSuccessModal; diff --git a/src/components/sendTx/SendTxModal.tsx b/src/components/sendTx/SendTxModal.tsx index 2582e5e..1fa6bd8 100644 --- a/src/components/sendTx/SendTxModal.tsx +++ b/src/components/sendTx/SendTxModal.tsx @@ -91,6 +91,7 @@ import TxFileReader from '../TxFileReader'; import ConfirmationModal, { ConfirmationData } from './ConfirmationModal'; import Drain from './Drain'; +import ExportSuccessModal from './ExportSuccessModal'; import MultiSigSpawn from './MultiSigSpawn'; import { DrainPayload, @@ -175,6 +176,8 @@ function SendTxModal({ isOpen, onClose }: SendTxModalProps): JSX.Element { const estimateGas = useEstimateGas(); const { setTransactions } = useAccountData(); + const exportSuccessModal = useDisclosure(); + const [isExportedSigned, setIsExportedSigned] = useState(false); const confirmationModal = useDisclosure(); const [txData, setTxData] = useState(null); const [estimatedGas, setEstimatedGas] = useState(null); @@ -287,6 +290,7 @@ function SendTxModal({ isOpen, onClose }: SendTxModalProps): JSX.Element { setTxData(null); setImportErrors(''); setIsLedgerRejected(false); + setIsExportedSigned(false); clearErrors(); onClose(); }; @@ -755,6 +759,9 @@ function SendTxModal({ isOpen, onClose }: SendTxModalProps): JSX.Element { `tx-${signWith ? 'signed' : 'unsigned'}-${hex.slice(-6)}.hex`, 'text/plain' ); + confirmationModal.onClose(); + setIsExportedSigned(!!signWith); + exportSuccessModal.onOpen(); return true; } return false; @@ -1176,6 +1183,7 @@ function SendTxModal({ isOpen, onClose }: SendTxModalProps): JSX.Element { as="u" color="brand.lightGray" size="xs" + cursor="pointer" p={1} isDisabled={ !!(currerntAccount && isVaultAccount(currerntAccount)) @@ -1319,6 +1327,14 @@ function SendTxModal({ isOpen, onClose }: SendTxModalProps): JSX.Element { insufficientFunds={insufficientFunds} /> )} + {txData && ( + + )}