Scan: add fade out animation on modal

CHANGELOG_UNRELEASED.md

@@ -28,11 +28,11 @@
 - (bugs) [\#1996](https://github.com/bandprotocol/bandchain/pull/1996) Fix id bug on `RequestSub.re`
 - (chore) [\#1987](https://github.com/bandprotocol/bandchain/pull/1987) Remove `request_tab_t` in `Route.re`
 - (impv) [\#1986](https://github.com/bandprotocol/bandchain/pull/1986) Add autofocus input on submittx modal
-- (impv) [\#1970](https://github.com/bandprotocol/bandchain/pull/1970) Update oracle script bridge code generator to use Obi standard
 - (feat) [\#1985](https://github.com/bandprotocol/bandchain/pull/1985) Add redelegate button and submit transaction modal
 - (chore) [\#1982](https://github.com/bandprotocol/bandchain/pull/1982) Update network on `ChainIDBadge.re`
 - (impv) [\#1970](https://github.com/bandprotocol/bandchain/pull/1970) Update oracle script bridge code generator to use Obi standard
 - (impv) [\#1958](https://github.com/bandprotocol/bandchain/pull/1958) Add human-readable error when broadcast tx, fix withdraw reward msg on guanyu
+- (impv) [\#1947](https://github.com/bandprotocol/bandchain/pull/1947) Fix fade out on modal
 - (impv) [\#1940](https://github.com/bandprotocol/bandchain/pull/1940) Trim Address input, remind user when sending token to themself
 - (impv) [\#1939](https://github.com/bandprotocol/bandchain/pull/1939) Use Format.re on user balance
 - (feat) [\#1938](https://github.com/bandprotocol/bandchain/pull/1938) Add validator's image from identity

scan/src/components/Modal.re

@@ -1,7 +1,7 @@
 module Styles = {
   open Css;
 
-  let overlay =
+  let overlay = isFadeOut =>
     style([
       display(`flex),
       justifyContent(`center),
@@ -15,23 +15,40 @@ module Styles = {
       zIndex(10),
       backgroundColor(`rgba((0, 0, 0, 0.5))),
       position(`fixed),
+      animation(
+        ~duration=Config.modalFadingDutation,
+        ~timingFunction=`cubicBezier((0.25, 0.46, 0.45, 0.94)),
+        ~fillMode=`forwards,
+        keyframes(
+          isFadeOut
+            ? [(0, [opacity(1.)]), (100, [opacity(0.)])]
+            : [(0, [opacity(0.)]), (100, [opacity(1.)])],
+        ),
+      ),
     ]);
 
-  let content =
+  let content = isFadeOut =>
     style([
       display(`table),
       marginTop(`vw(10.)),
       backgroundColor(Css_Colors.white),
       borderRadius(`px(5)),
       boxShadow(Shadow.box(~x=`zero, ~y=`px(8), ~blur=`px(32), Css.rgba(0, 0, 0, 0.5))),
       animation(
-        ~duration=500,
+        ~duration=Config.modalFadingDutation,
         ~timingFunction=`cubicBezier((0.25, 0.46, 0.45, 0.94)),
         ~fillMode=`forwards,
-        keyframes([
-          (0, [transform(translateY(`zero)), opacity(0.)]),
-          (100, [transform(translateY(`px(-30))), opacity(1.)]),
-        ]),
+        keyframes(
+          isFadeOut
+            ? [
+              (0, [transform(translateY(`px(-30))), opacity(1.)]),
+              (100, [transform(translateY(`zero)), opacity(0.)]),
+            ]
+            : [
+              (0, [transform(translateY(`zero)), opacity(0.)]),
+              (100, [transform(translateY(`px(-30))), opacity(1.)]),
+            ],
+        ),
       ),
     ]);
 
@@ -50,23 +67,26 @@ module Styles = {
 let make = () => {
   let (modalStateOpt, dispatchModal) = React.useContext(ModalContext.context);
 
+  let closeModal = () => {
+    dispatchModal(CloseModal);
+  };
+
   switch (modalStateOpt) {
   | None => React.null
-  | Some({modal, canExit}) =>
-    let body =
-      switch (modal) {
-      | Connect(chainID) => <ConnectModal chainID />
-      | SubmitTx(msg) => <SubmitTxModal msg />
-      };
-    <div className=Styles.overlay onClick={_ => {canExit ? dispatchModal(CloseModal) : ()}}>
-      <div className=Styles.content onClick={e => ReactEvent.Mouse.stopPropagation(e)}>
+  | Some({modal, canExit, closing}) =>
+    <div className={Styles.overlay(closing)} onClick={_ => {canExit ? closeModal() : ()}}>
+      <div
+        className={Styles.content(closing)} onClick={e => ReactEvent.Mouse.stopPropagation(e)}>
         <img
           src=Images.closeButton
-          onClick={_ => {canExit ? dispatchModal(CloseModal) : ()}}
+          onClick={_ => {canExit ? closeModal() : ()}}
           className=Styles.closeButton
         />
-        body
+        {switch (modal) {
+         | Connect(chainID) => <ConnectModal chainID />
+         | SubmitTx(msg) => <SubmitTxModal msg />
+         }}
       </div>
-    </div>;
+    </div>
   };
 };

scan/src/contexts/ModalContext.re

@@ -4,28 +4,36 @@ type modal_t =
 
 type t = {
   canExit: bool,
+  closing: bool,
   modal: modal_t,
 };
 
 type a =
   | OpenModal(modal_t)
   | CloseModal
+  | KillModal
   | EnableExit
   | DisableExit;
 
 let reducer = state =>
   fun
-  | OpenModal(m) => Some({canExit: true, modal: m})
-  | CloseModal => None
+  | OpenModal(m) => Some({canExit: true, closing: false, modal: m})
+  | CloseModal => {
+      switch (state) {
+      | Some({modal}) => Some({canExit: true, closing: true, modal})
+      | None => None
+      };
+    }
+  | KillModal => None
   | EnableExit => {
       switch (state) {
-      | Some({modal}) => Some({canExit: true, modal})
+      | Some({modal}) => Some({canExit: true, closing: false, modal})
       | None => None
       };
     }
   | DisableExit => {
       switch (state) {
-      | Some({modal}) => Some({canExit: false, modal})
+      | Some({modal}) => Some({canExit: false, closing: false, modal})
       | None => None
       };
     };
@@ -34,8 +42,21 @@ let context = React.createContext(ContextHelper.default: (option(t), a => unit))
 
 [@react.component]
 let make = (~children) => {
+  let (state, dispatch) = React.useReducer(reducer, None);
+  let isClosing = state->Belt_Option.mapWithDefault(false, ({closing}) => closing);
+  React.useEffect1(
+    () => {
+      if (isClosing) {
+        let _ = Js.Global.setTimeout(() => {dispatch(KillModal)}, Config.modalFadingDutation);
+        ();
+      };
+      None;
+    },
+    [|isClosing|],
+  );
+
   React.createElement(
     React.Context.provider(context),
-    {"value": React.useReducer(reducer, None), "children": children},
+    {"value": (state, dispatch), "children": children},
   );
 };

scan/src/utils/Config.re

@@ -1 +1,2 @@
 let doNotModify = "[do-not-modify]";
+let modalFadingDutation = 250;