feat: added loading logic to multi-transaction modal

solartown · Apr 13, 2022 · 26a5080 · 26a5080
1 parent 0264ac5
commit 26a5080
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/common/components/elements/Modal.tsx b/src/common/components/elements/Modal.tsx
@@ -17,7 +17,7 @@ type ModalProps = {
 
 export const Modal: FC<ModalProps> = ({ open, setOpen, children, title, priority = false }) => {
   const modalRef = useRef<HTMLDivElement>(null!);
-  useOutsideAlerter(modalRef, () => setOpen(false));
+  useOutsideAlerter(modalRef, () => setOpen(priority)); // disable outside alerter if priority (require clicking close)
 
   if (!open) {
     return null;

diff --git a/src/common/context/MultiTransaction.tsx b/src/common/context/MultiTransaction.tsx
@@ -75,7 +75,6 @@ export const MultiTransactionProvider: FC = ({ children }) => {
           setActions(filtered);
         }
         setHasRemainingActions(false);
-        setHasRemainingActions(false);
       } catch (err: any) {
         const errorMsg: string = err.message;
         if (errorMsg.includes(`User rejected the request`)) {
@@ -115,6 +114,7 @@ export const MultiTransactionProvider: FC = ({ children }) => {
         setHasActionPending(true);
         let filtered = newActionsWithIds;
         for (const action of newActionsWithIds) {
+          setMessage(action.name);
           await action.action(action.param);
           settings?.onActionSuccess?.(action.id);
           // clear action
@@ -140,7 +140,9 @@ export const MultiTransactionProvider: FC = ({ children }) => {
 
   const completedActions = numActions - actions.length;
   const percentage =
-    completedActions > 0 && numActions > 0 ? (completedActions / numActions) * 100 : 0;
+    numActions > 0 && completedActions < numActions
+      ? ((completedActions + 1) / numActions) * 100
+      : 0;
 
   return (
     <MultiTransactionContext.Provider
@@ -169,7 +171,7 @@ export const MultiTransactionProvider: FC = ({ children }) => {
               style={{ width: `${percentage}%` }}
             >
               <div
-                className={`relative flex h-full animate-loading rounded-full bg-gray-300`}
+                className={`relative flex h-full w-full animate-loading rounded-full bg-gray-300`}
               ></div>
             </div>
           </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -29,7 +29,7 @@ module.exports = {
       },
       keyframes: {
         loadingbar: {
-          '0%': { left: 0, width: 0 },
+          '0%': { left: 0, width: 0, opacity: 0.5 },
           '50%': { left: 0, width: '100%' },
           '100%': { left: '100%', width: 0 },
         },