From cb528c350c2a677afe1affcb4ce3b86e662162b8 Mon Sep 17 00:00:00 2001
From: brusher_ru <brusher.designer@gmail.com>
Date: Mon, 14 Oct 2024 16:08:41 -0300
Subject: [PATCH 1/2] tweak: show instructions after exporting tx

---
 src/components/sendTx/ExportSuccessModal.tsx | 82 ++++++++++++++++++++
 src/components/sendTx/SendTxModal.tsx        | 16 ++++
 2 files changed, 98 insertions(+)
 create mode 100644 src/components/sendTx/ExportSuccessModal.tsx

diff --git a/src/components/sendTx/ExportSuccessModal.tsx b/src/components/sendTx/ExportSuccessModal.tsx
new file mode 100644
index 0000000..ac4ae9b
--- /dev/null
+++ b/src/components/sendTx/ExportSuccessModal.tsx
@@ -0,0 +1,82 @@
+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, you need to:</Text>
+
+          {templateAddress === StdPublicKeys.MultiSig ||
+          templateAddress === StdPublicKeys.Vesting ? (
+            <>
+              <List styleType="auto" stylePosition="inside">
+                <ListItem>
+                  if you own one of required keys — import the transaction and
+                  sign
+                  {isSigned ? ' again' : ' it'},
+                </ListItem>
+                <ListItem>send the exported file to other parties,</ListItem>
+                <ListItem>
+                  collect all the signatures, import them and publish,
+                </ListItem>
+              </List>
+              <Text mt={2}>
+                Signatures might be collected in sync or async way, so you can
+                end the signed transaction to all other parties and ask them to
+                sign it. Once you have collect enough signatures, you can import
+                all of them at once, the signatures will be combined
+                automatically.
+              </Text>
+            </>
+          ) : (
+            <List styleType="auto" stylePosition="inside">
+              <ListItem>import the transaction,</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;
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 | 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

From 5e51b8004802bfb7c4c7d2f4f80635cc52b01ed6 Mon Sep 17 00:00:00 2001
From: Kirill Shumilov <brusher.designer@gmail.com>
Date: Fri, 18 Oct 2024 14:40:52 -0300
Subject: [PATCH 2/2] chore: update wording

Co-authored-by: Monika <89876259+monikasmolarek@users.noreply.github.com>
---
 src/components/sendTx/ExportSuccessModal.tsx | 31 +++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/sendTx/ExportSuccessModal.tsx b/src/components/sendTx/ExportSuccessModal.tsx
index ac4ae9b..79d8d67 100644
--- a/src/components/sendTx/ExportSuccessModal.tsx
+++ b/src/components/sendTx/ExportSuccessModal.tsx
@@ -37,35 +37,38 @@ function ExportSuccessModal({
           exported successfully
         </ModalHeader>
         <ModalBody pb={6}>
-          <Text mb={2}>To complete the transaction, you need to:</Text>
+          <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 required keys — import the transaction and
-                  sign
-                  {isSigned ? ' again' : ' it'},
+                  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,</ListItem>
                 <ListItem>
-                  collect all the signatures, import them and publish,
+                  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 might be collected in sync or async way, so you can
-                end the signed transaction to all other parties and ask them to
-                sign it. Once you have collect enough signatures, you can import
-                all of them at once, the signatures will be combined
-                automatically.
+                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 the transaction,</ListItem>
-              {!isSigned && <ListItem>sign it,</ListItem>}
-              <ListItem>publish the signed transaction.</ListItem>
+              <ListItem>Import this transaction file.</ListItem>
+              {!isSigned && <ListItem>Sign it.</ListItem>}
+              <ListItem>Publish the signed transaction.</ListItem>
             </List>
           )}
         </ModalBody>