feat: async masp params loading (anoma#305)

apps/extension/src/App/App.components.ts

@@ -1,11 +1,34 @@
-import styled, { createGlobalStyle } from "styled-components";
+import styled, { createGlobalStyle, css } from "styled-components";
 
 export const GlobalStyles = createGlobalStyle`
   html, body {
     background-color: #000;
   }
 `;
 
+export const Spinner = css`
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-top-color: ${(props) => props.theme.colors.primary.main};
+    border-radius: 50%;
+    animation: button-loading-spinner 1s ease infinite;
+
+    @keyframes button-loading-spinner {
+      from {
+        transform: rotate(0turn);
+      }
+
+      to {
+        transform: rotate(1turn);
+      }
+    }
+  }
+`;
+
 export const AppContainer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -42,6 +65,19 @@ export const Heading = styled.h1`
   padding-left: 12px;
 `;
 
+export const HeadingLoader = styled.div`
+  position: relative;
+  width: 20px;
+  height: 20px;
+
+  &.is-loading::after {
+    width: 16px;
+    height: 16px;
+    border: 2px solid transparent;
+    ${Spinner}
+  }
+`;
+
 export const HeadingButtons = styled.div`
   display: flex;
   justify-content: flex-end;

apps/extension/src/App/App.tsx

@@ -9,7 +9,7 @@ import { useUntil } from "@anoma/hooks";
 
 import { Ports } from "router";
 import {
-  LoadMaspParamsMsg,
+  FetchAndStoreMaspParamsMsg,
   HasMaspParamsMsg,
   QueryAccountsMsg,
 } from "provider/messages";
@@ -24,6 +24,7 @@ import {
   Heading,
   HeadingButtons,
   SettingsButton,
+  HeadingLoader,
 } from "./App.components";
 import { TopLevelRoute } from "./types";
 import { LockWrapper } from "./LockWrapper";
@@ -47,10 +48,13 @@ export const App: React.FC = () => {
   const navigate = useNavigate();
   const [isLocked, setIsLocked] = useState(true);
   const [status, setStatus] = useState<Status>();
+  const [maspStatus, setMaspStatus] = useState<{
+    status: Status;
+    info: string;
+  }>({ status: Status.Completed, info: "" });
   const [accounts, setAccounts] = useState<DerivedAccount[]>([]);
   const [parentAccount, setParentAccount] = useState<DerivedAccount>();
   const [error, setError] = useState("");
-  const [statusInfo, setStatusInfo] = useState("");
   const requester = useRequester();
 
   const fetchAccounts = async (): Promise<void> => {
@@ -94,26 +98,11 @@ export const App: React.FC = () => {
       predFn: async () => {
         setStatus(Status.Pending);
         try {
-          setStatusInfo("Fetching accounts...");
           const accounts = await requester.sendMessage(
             Ports.Background,
             new QueryAccountsMsg()
           );
 
-          setStatusInfo("Checking MASP parameters...");
-          const hasMaspParams = await requester.sendMessage(
-            Ports.Background,
-            new HasMaspParamsMsg()
-          );
-
-          if (!hasMaspParams) {
-            setStatusInfo("Fetching MASP parameters...");
-            await requester.sendMessage(
-              Ports.Background,
-              new LoadMaspParamsMsg()
-            );
-          }
-
           setAccounts(accounts);
           return true;
         } catch (e) {
@@ -122,7 +111,6 @@ export const App: React.FC = () => {
         }
       },
       onSuccess: () => {
-        setStatusInfo("");
         setStatus(Status.Completed);
       },
       onFail: () => {
@@ -134,6 +122,43 @@ export const App: React.FC = () => {
     []
   );
 
+  // Fetch Masp params if they don't exist
+  useEffect(() => {
+    if (status === Status.Completed) {
+      (async () => {
+        const hasMaspParams = await requester.sendMessage(
+          Ports.Background,
+          new HasMaspParamsMsg()
+        );
+
+        if (!hasMaspParams) {
+          setMaspStatus({
+            status: Status.Pending,
+            info: "Fetching MASP parameters...",
+          });
+          try {
+            await requester.sendMessage(
+              Ports.Background,
+              new FetchAndStoreMaspParamsMsg()
+            );
+
+            setMaspStatus({
+              status: Status.Completed,
+              info: "",
+            });
+          } catch (e) {
+            setMaspStatus({
+              status: Status.Failed,
+              info: `Fetching MASP parameters failed: ${e}`,
+            });
+            //TODO: Notify user in a better way
+            console.error(e);
+          }
+        }
+      })();
+    }
+  }, [status]);
+
   useEffect(() => {
     if (redirect) {
       // Provide a redirect in the case of transaction/connection approvals
@@ -164,6 +189,12 @@ export const App: React.FC = () => {
         <ContentContainer>
           <TopSection>
             <Heading>Anoma Browser Extension</Heading>
+            <HeadingLoader
+              className={
+                maspStatus.status === Status.Pending ? "is-loading" : ""
+              }
+              title={maspStatus.info}
+            />
             <HeadingButtons>
               {parentAccount && (
                 <SettingsButton
@@ -177,9 +208,7 @@ export const App: React.FC = () => {
           <Routes>
             <Route
               path="*"
-              element={
-                <Loading status={status} info={statusInfo} error={error} />
-              }
+              element={<Loading status={status} error={error} />}
             />
             <Route path={TopLevelRoute.Setup} element={<Setup />} />
             <Route

apps/extension/src/App/Loading/Loading.components.ts

@@ -1,30 +1,13 @@
+import { Spinner } from "App/App.components";
 import styled from "styled-components";
 
 export const LoadingContainer = styled.div`
   &.is-loading::after {
-    content: "";
-    position: absolute;
     width: 32px;
     height: 32px;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
     border: 4px solid transparent;
-    border-top-color: ${(props) => props.theme.colors.primary.main};
-    border-radius: 50%;
-    animation: button-loading-spinner 1s ease infinite;
-
-    @keyframes button-loading-spinner {
-      from {
-        transform: rotate(0turn);
-      }
-
-      to {
-        transform: rotate(1turn);
-      }
-    }
+    margin: auto;
+    ${Spinner}
   }
 `;
 

apps/extension/src/App/Loading/Loading.tsx

@@ -8,12 +8,12 @@ type Props = {
   error?: string;
 };
 
-const Loading: React.FC<Props> = ({ error, status, info }) => {
+const Loading: React.FC<Props> = ({ error, status }) => {
   return (
     <LoadingContainer className={error ? "" : "is-loading"}>
       {(status === Status.Failed && (
         <LoadingError>Error: {error}</LoadingError>
-      )) || <p>{info ?? "Loading..."}</p>}
+      )) || <p>Fetching accounts...</p>}
     </LoadingContainer>
   );
 };

apps/extension/src/Approvals/ApproveTransfer/ConfirmTransfer.components.ts

@@ -0,0 +1,43 @@
+import styled, { css } from "styled-components";
+
+export const Spinner = css`
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-top-color: ${(props) => props.theme.colors.primary.main};
+    border-radius: 50%;
+    animation: button-loading-spinner 1s ease infinite;
+
+    @keyframes button-loading-spinner {
+      from {
+        transform: rotate(0turn);
+      }
+
+      to {
+        transform: rotate(1turn);
+      }
+    }
+  }
+`;
+
+export const InfoHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const InfoLoader = styled.div`
+  position: relative;
+  width: 20px;
+  height: 20px;
+
+  &::after {
+    width: 16px;
+    height: 16px;
+    border: 2px solid transparent;
+    ${Spinner}
+  }
+`;

apps/extension/src/Approvals/ApproveTransfer/ConfirmTransfer.tsx

@@ -14,6 +14,8 @@ import { useRequester } from "hooks/useRequester";
 import { SubmitApprovedTransferMsg } from "background/approvals";
 import { Address } from "App/Accounts/AccountListing.components";
 import { closeCurrentTab } from "utils";
+import { FetchAndStoreMaspParamsMsg, HasMaspParamsMsg } from "provider";
+import { InfoHeader, InfoLoader } from "./ConfirmTransfer.components";
 
 type Props = {
   msgId: string;
@@ -26,20 +28,40 @@ export const ConfirmTransfer: React.FC<Props> = ({ msgId, address }) => {
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string>();
   const [status, setStatus] = useState<Status>();
+  const [statusInfo, setStatusInfo] = useState<string>("");
 
   const handleApprove = async (): Promise<void> => {
     setStatus(Status.Pending);
+    const hasMaspParams = await requester.sendMessage(
+      Ports.Background,
+      new HasMaspParamsMsg()
+    );
+
+    if (!hasMaspParams) {
+      setStatusInfo("Fetching MASP parameters...");
+      try {
+        await requester.sendMessage(
+          Ports.Background,
+          new FetchAndStoreMaspParamsMsg()
+        );
+      } catch (e) {
+        setError(`Fetching MASP parameters failed: ${e}`);
+        setStatus(Status.Failed);
+      }
+    }
     try {
       // TODO: use executeUntil here!
+      setStatusInfo("Decrypting keys and submitting transfer...");
       await requester.sendMessage(
         Ports.Background,
         new SubmitApprovedTransferMsg(msgId, address, password)
       );
-      setStatus(Status.Completed);
     } catch (e) {
       setError("Unable to authenticate Tx!");
       setStatus(Status.Failed);
     }
+    setStatusInfo("");
+    setStatus(Status.Completed);
     return;
   };
 
@@ -54,7 +76,10 @@ export const ConfirmTransfer: React.FC<Props> = ({ msgId, address }) => {
   return (
     <ApprovalContainer>
       {status === Status.Pending && (
-        <p>Decrypting keys and submitting transfer...</p>
+        <InfoHeader>
+          <InfoLoader />
+          <p>{statusInfo}</p>
+        </InfoHeader>
       )}
       {status === Status.Failed && (
         <p>

apps/extension/src/background/keyring/handler.ts

@@ -24,7 +24,7 @@ import {
   SubmitBondMsg,
   SubmitUnbondMsg,
   SubmitIbcTransferMsg,
-  LoadMaspParamsMsg,
+  FetchAndStoreMaspParamsMsg,
   HasMaspParamsMsg,
 } from "provider/messages";
 
@@ -100,10 +100,10 @@ export const getHandler: (service: KeyRingService) => Handler = (service) => {
         );
       case DeleteAccountMsg:
         return handleDeleteAccountMsg(service)(env, msg as DeleteAccountMsg);
-      case LoadMaspParamsMsg:
-        return handleLoadMaspParamsMsg(service)(
+      case FetchAndStoreMaspParamsMsg:
+        return handleFetchAndStoreMaspParamsMsg(service)(
           env,
-          msg as LoadMaspParamsMsg
+          msg as FetchAndStoreMaspParamsMsg
         );
       case HasMaspParamsMsg:
         return handleHasMaspParamsMsg(service)(env, msg as HasMaspParamsMsg);
@@ -296,11 +296,11 @@ const handleDeleteAccountMsg: (
   };
 };
 
-const handleLoadMaspParamsMsg: (
+const handleFetchAndStoreMaspParamsMsg: (
   service: KeyRingService
-) => InternalHandler<LoadMaspParamsMsg> = (service) => {
+) => InternalHandler<FetchAndStoreMaspParamsMsg> = (service) => {
   return async (_, _msg) => {
-    return await service.loadMaspParams();
+    return await service.fetchAndStoreMaspParams();
   };
 };