Replace native alerts

components/AlertDialog/index.tsx

@@ -16,7 +16,8 @@ export interface AlertState {
   title?: string;
   body?: ReactNode;
   cancelText?: string;
-  confirmNode?: ReactNode;
+  confirmText?: string;
+  confirmPrefix?: ReactNode;
   onConfirm?: () => any;
   onCancel?: () => any;
 }
@@ -31,7 +32,8 @@ const Alert: FC = () => {
     isOpen,
     body,
     cancelText,
-    confirmNode = "Ok",
+    confirmText = "Ok",
+    confirmPrefix,
     onCancel,
     onConfirm,
   } = useSnapshot(alertState);
@@ -44,10 +46,10 @@ const Alert: FC = () => {
         <AlertDialogTitle>{title}</AlertDialogTitle>
         <AlertDialogDescription>{body}</AlertDialogDescription>
         <Flex css={{ justifyContent: "flex-end", gap: "$3" }}>
-          {cancelText && (
+          {(cancelText || onCancel) && (
             <AlertDialogCancel asChild>
               <Button css={{ minWidth: "$16" }} outline onClick={onCancel}>
-                {cancelText}
+                {cancelText || "Cancel"}
               </Button>
             </AlertDialogCancel>
           )}
@@ -60,7 +62,8 @@ const Alert: FC = () => {
                 alertState.isOpen = false;
               }}
             >
-              {confirmNode}
+              {confirmPrefix}
+              {confirmText}
             </Button>
           </AlertDialogAction>
         </Flex>

components/AlertDialog/primitive.tsx

@@ -75,7 +75,7 @@ const StyledDescription = styled(AlertDialogPrimitive.Description, {
   marginBottom: 20,
   color: "$mauve11",
   lineHeight: 1.5,
-  fontSize: "$sm",
+  fontSize: "$md",
 });
 
 // Exports

components/EditorNavigation.tsx

@@ -89,11 +89,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
         </>
       ),
       cancelText: "Cancel",
-      confirmNode: (
-        <>
-          <FilePlus size="15px" /> Create new Gist
-        </>
-      ),
+      confirmText: "Create new Gist",
+      confirmPrefix: <FilePlus size="15px" />,
       onConfirm: () => syncToGist(session, true),
     });
   };

components/Transaction/json.tsx

@@ -9,6 +9,7 @@ import state, { parseJSON, prepareState, TransactionState } from "../../state";
 import Text from "../Text";
 import Flex from "../Flex";
 import { Link } from "..";
+import { showAlert } from "../../state/actions/showAlert";
 
 loader.config({
   paths: {
@@ -50,10 +51,11 @@ export const TxJson: FC<JsonProps> = ({
   };
 
   const discardChanges = () => {
-    let discard = confirm("Are you sure to discard these changes");
-    if (discard) {
-      setState({ editorValue: value });
-    }
+    showAlert("Confirm", {
+      body: "Are you sure to discard these changes?",
+      confirmText: "Yes",
+      onConfirm: () => setState({ editorValue: value }),
+    });
   };
 
   const onExit = (value: string) => {
@@ -62,14 +64,12 @@ export const TxJson: FC<JsonProps> = ({
       saveState(value);
       return;
     }
-    const discard = confirm(
-      `Malformed Transaction in ${header}, would you like to discard these changes?`
-    );
-    if (!discard) {
-      setState({ viewType: "json", editorSavedValue: value });
-    } else {
-      setState({ editorValue: value });
-    }
+    showAlert("Error!", {
+      body: `Malformed Transaction in ${header}, would you like to discard these changes?`,
+      confirmText: "Discard",
+      onConfirm: () => setState({ editorValue: value }),
+      onCancel: () => setState({ viewType: "json", editorSavedValue: value }),
+    });
   };
 
   const path = `file:///${header}`;