feat: disable buttons on send, add result dialog (#813)

Description --- Disable buttons in send dialog when you press send. Add result dialog to the ui. This dialog can be used from anywhere for any purpose not just sending result. **The transaction is successful even when only fees are accepted !** Motivation and Context --- It was very annoying not knowing if you pressed the button to send or not. Closes #814 How Has This Been Tested? --- Manually. What process can a PR reviewer use to test or verify this change? --- Send some funds and see the result or fail, depending on what you enter. Breaking Changes --- - [x] None - [ ] Requires data directory to be deleted - [ ] Other - Please specify --------- Co-authored-by: stringhandler <[email protected]>
tari-project · Dec 8, 2023 · 1d146b8 · 1d146b8
1 parent e6a1082
commit 1d146b8
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/applications/tari_dan_wallet_web_ui/src/App.tsx b/applications/tari_dan_wallet_web_ui/src/App.tsx
@@ -23,6 +23,8 @@
 import { Routes, Route } from 'react-router-dom';
 import Accounts from './routes/Accounts/Accounts';
 import AccountDetails from './routes/AccountDetails/AccountDetails';
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
 import Keys from './routes/Keys/Keys';
 import ErrorPage from './routes/ErrorPage';
 import Wallet from './routes/Wallet/Wallet';
@@ -32,6 +34,8 @@ import Transactions from './routes/Transactions/TransactionsLayout';
 import TransactionDetails from './routes/Transactions/TransactionDetails';
 import AssetVault from './routes/AssetVault/AssetVault';
 import SettingsPage from './routes/Settings/Settings';
+import { Dialog } from '@mui/material';
+import useAccountStore from './store/accountStore';
 
 export const breadcrumbRoutes = [
   {
@@ -82,6 +86,10 @@ export const breadcrumbRoutes = [
 ];
 
 function App() {
+  const { popup, setPopup } = useAccountStore();
+  const handleClose = () => {
+    setPopup({ visible: false });
+  }
   return (
     <div>
       <Routes>
@@ -98,6 +106,14 @@ function App() {
           <Route path="*" element={<ErrorPage />} />
         </Route>
       </Routes>
+      <Dialog open={popup.visible} onClose={handleClose}>
+        <DialogTitle>
+          {(popup?.error ? <div style={{ color: "red" }}>{popup?.title}</div> : <div>{popup?.title}</div>)}
+        </DialogTitle>
+        <DialogContent className="dialog-content">
+          {popup?.message}
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

diff --git a/applications/tari_dan_wallet_web_ui/src/routes/AssetVault/Components/SendMoney.tsx b/applications/tari_dan_wallet_web_ui/src/routes/AssetVault/Components/SendMoney.tsx
@@ -36,19 +36,18 @@ import useAccountStore from "../../../store/accountStore";
 
 export default function SendMoney() {
   const [open, setOpen] = useState(false);
+  const [disabled, setDisabled] = useState(false);
   const [transferFormState, setTransferFormState] = useState({
     publicKey: "",
     confidential: false,
     amount: "",
     fee: "",
   });
 
-  const { accountName } = useAccountStore();
+  const { accountName, setPopup } = useAccountStore();
 
   const theme = useTheme();
 
-  console.log(accountName, transferFormState.amount, transferFormState.publicKey, transferFormState.fee);
-
   const { mutateAsync: sendIt } = useAccountsTransfer(
     accountName,
     parseInt(transferFormState.amount),
@@ -85,9 +84,16 @@ export default function SendMoney() {
 
   const onTransfer = async () => {
     if (accountName) {
-      await sendIt();
-      setTransferFormState({ publicKey: "", confidential: false, amount: "", fee: "" });
-      setOpen(false);
+      setDisabled(true);
+      sendIt().then(() => {
+        setTransferFormState({ publicKey: "", confidential: false, amount: "", fee: "" });
+        setOpen(false);
+        setPopup({ title: "Send successful", error: false });
+      }).catch((e) => {
+        setPopup({ title: "Send failed", error: true, message: e.message });
+      }).finally(() => {
+        setDisabled(false);
+      });
     }
   };
 
@@ -114,13 +120,15 @@ export default function SendMoney() {
               value={transferFormState.publicKey}
               onChange={onPublicKeyChange}
               style={{ flexGrow: 1 }}
+              disabled={disabled}
             />
             <FormControlLabel
               control={
                 <CheckBox
                   name="confidential"
                   checked={transferFormState.confidential}
                   onChange={onConfidentialChange}
+                  disabled={disabled}
                 />
               }
               label="Confidential"
@@ -131,24 +139,26 @@ export default function SendMoney() {
               value={transferFormState.amount}
               onChange={onNumberChange}
               style={{ flexGrow: 1 }}
+              disabled={disabled}
             />
             <TextField
               name="fee"
               label="Fee"
               value={transferFormState.fee}
               onChange={onNumberChange}
               style={{ flexGrow: 1 }}
+              disabled={disabled}
             />
             <Box
               className="flex-container"
               style={{
                 justifyContent: "flex-end",
               }}
             >
-              <Button variant="outlined" onClick={handleClose}>
+              <Button variant="outlined" onClick={handleClose} disabled={disabled}>
                 Cancel
               </Button>
-              <Button variant="contained" type="submit">
+              <Button variant="contained" type="submit" disabled={disabled}>
                 Send Tari
               </Button>
             </Box>

diff --git a/applications/tari_dan_wallet_web_ui/src/store/accountStore.ts b/applications/tari_dan_wallet_web_ui/src/store/accountStore.ts
@@ -28,6 +28,10 @@ interface Store {
   setShowBalance: (show: boolean) => void;
   accountName: string;
   setAccountName: (name: string) => void;
+  indexer: string;
+  setIndexer: (indexer: string) => void;
+  popup: any;
+  setPopup: (popup: any) => void;
 }
 
 const useAccountStore = create<Store>()(
@@ -37,6 +41,10 @@ const useAccountStore = create<Store>()(
       setShowBalance: (show) => set({ showBalance: show }),
       accountName: '',
       setAccountName: (name) => set({ accountName: name }),
+      indexer: '',
+      setIndexer: (indexer) => set({ indexer: indexer }),
+      popup: {},
+      setPopup: (popup) => set({ popup: { visible: true, ...popup } }),
     }),
     {
       name: 'account-store',