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}`;

pages/test/[[...slug]].tsx

@@ -6,8 +6,6 @@ import Transaction from "../../components/Transaction";
 import state from "../../state";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
 import { transactionsState, modifyTransaction } from "../../state";
-import { useEffect } from 'react';
-import { showAlert } from '../../state/actions/showAlert';
 
 const DebugStream = dynamic(() => import("../../components/DebugStream"), {
   ssr: false,

state/actions/showAlert.ts

@@ -1,17 +1,21 @@
 import { ref } from 'valtio';
 import { AlertState, alertState } from "../../components/AlertDialog";
 
-export const showAlert = (title: string, opts: Partial<AlertState> = {}) => {
-    const { body: _body, confirmNode: _confirmNode, ...rest } = opts
+export const showAlert = (title: string, opts: Omit<Partial<AlertState>, 'title' | 'isOpen'> = {}) => {
+    const { body: _body, confirmPrefix: _confirmPrefix, ...rest } = opts
     const body = (_body && typeof _body === 'object') ? ref(_body) : _body
-    const confirmNode = (_confirmNode && typeof _confirmNode === 'object') ? ref(_confirmNode) : _confirmNode
+    const confirmPrefix = (_confirmPrefix && typeof _confirmPrefix === 'object') ? ref(_confirmPrefix) : _confirmPrefix
 
-    const nwState = {
+    const nwState: AlertState = {
         isOpen: true,
         title,
         body,
-        confirmNode,
-        ...rest
+        confirmPrefix,
+        cancelText: undefined,
+        confirmText: undefined,
+        onCancel: undefined,
+        onConfirm: undefined,
+        ...rest,
     }
     Object.entries(nwState).forEach(([key, value]) => {
         (alertState as any)[key] = value

state/transactions.ts

@@ -2,6 +2,7 @@ import { proxy } from 'valtio';
 import { deepEqual } from '../utils/object';
 import transactionsData from "../content/transactions.json";
 import state from '.';
+import { showAlert } from "../state/actions/showAlert";
 
 export type SelectOption = {
     value: string;
@@ -143,7 +144,12 @@ export const prepareTransaction = (data: any) => {
 // editor value to state
 export const prepareState = (value?: string) => {
     const options = parseJSON(value);
-    if (!options) return alert("Cannot save dirty editor");
+    if (!options) {
+        showAlert("Error!", {
+            body: "Cannot save editor with malformed transaction."
+        })
+        return
+    };
 
     const { Account, TransactionType, Destination, ...rest } = options;
     let tx: Partial<TransactionState> = {};