Merge pull request #105 from spacemeshos/feat-74-multisig-instructions

Show further instructions after exporting transaction

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 (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalCloseButton />
+        <ModalHeader textAlign="center">
+          Transaction
+          {isSigned ? ' signed and ' : ' '}
+          exported successfully
+        </ModalHeader>
+        <ModalBody pb={6}>
+          <Text mb={2}>To complete the transaction, follow these steps:</Text>
+
+          {templateAddress === StdPublicKeys.MultiSig ||
+          templateAddress === StdPublicKeys.Vesting ? (
+            <>
+              <List styleType="auto" stylePosition="inside">
+                <ListItem>
+                  If you own one of the required keys — import the transaction
+                  and sign it
+                  {isSigned ? ' again.' : ' .'},
+                </ListItem>
+                <ListItem>
+                  Send the exported file to other parties if needed.
+                </ListItem>
+                <ListItem>
+                  Collect all the signatures, then import them, and publish the
+                  transaction.
+                </ListItem>
+              </List>
+              <Text mt={2}>
+                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.
+              </Text>
+            </>
+          ) : (
+            <List styleType="auto" stylePosition="inside">
+              <ListItem>Import this transaction file.</ListItem>
+              {!isSigned && <ListItem>Sign it.</ListItem>}
+              <ListItem>Publish the signed transaction.</ListItem>
+            </List>
+          )}
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="whiteModal" onClick={onClose}>
+            OK
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export default ExportSuccessModal;

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 | TxData>(null);
   const [estimatedGas, setEstimatedGas] = useState<null | bigint>(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 && (
+              <ExportSuccessModal
+                templateAddress={txData?.form.templateAddress}
+                isSigned={isExportedSigned}
+                isOpen={exportSuccessModal.isOpen}
+                onClose={exportSuccessModal.onClose}
+              />
+            )}
           </ModalBody>
           <ModalFooter justifyContent="center">
             <Button