signing transactions and granting access should signal that buttons are working (#33)

Author: piyalbasu

src/popup/basics/index.tsx

@@ -135,16 +135,26 @@ export const FormButton = styled(ButtonEl)`
 interface SubmitButtonProps {
   buttonCTA: string;
   isSubmitting: boolean;
-  isValid: boolean;
+  isValid?: boolean;
+  size?: string;
+  onClick?: () => void;
 }
 
 export const FormSubmitButton = ({
   buttonCTA,
   isSubmitting,
-  isValid,
+  isValid = true,
+  onClick,
+  size,
   ...props
 }: SubmitButtonProps) => (
-  <FormButton type="submit" disabled={isSubmitting || !isValid} {...props}>
+  <FormButton
+    onClick={onClick}
+    size={size}
+    type="submit"
+    disabled={isSubmitting || !isValid}
+    {...props}
+  >
     {isSubmitting ? "Loading..." : buttonCTA}
   </FormButton>
 );

src/popup/views/GrantAccess/index.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { useLocation } from "react-router-dom";
 
 import { rejectAccess, grantAccess } from "api/internal";
 
 import { COLOR_PALETTE, FONT_WEIGHT } from "popup/styles";
-import { Button } from "popup/basics";
+import { Button, FormSubmitButton } from "popup/basics";
 
 const GrantAccessEl = styled.div`
   padding: 2.25rem 2.5rem;
@@ -42,13 +42,15 @@ export const GrantAccess = () => {
   const decodedTab = atob(location.search.replace("?", ""));
   const tabToUnlock = decodedTab ? JSON.parse(decodedTab) : {};
   const { url, title } = tabToUnlock;
+  const [isGranting, setIsGranting] = useState(false);
 
-  const rejectAndClose = async () => {
-    await rejectAccess();
+  const rejectAndClose = () => {
+    rejectAccess();
     window.close();
   };
 
   const grantAndClose = async () => {
+    setIsGranting(true);
     await grantAccess(url);
     window.close();
   };
@@ -65,9 +67,12 @@ export const GrantAccess = () => {
         <RejectButton size="small" onClick={() => rejectAndClose()}>
           Reject
         </RejectButton>
-        <Button size="small" onClick={() => grantAndClose()}>
-          Connect
-        </Button>
+        <FormSubmitButton
+          buttonCTA="Confirm"
+          isSubmitting={isGranting}
+          size="small"
+          onClick={() => grantAndClose()}
+        />
       </ButtonContainerEl>
     </GrantAccessEl>
   );

src/popup/views/SignTransaction/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useLocation } from "react-router-dom";
 import { useSelector } from "react-redux";
 import BigNumber from "bignumber.js";
@@ -12,7 +12,7 @@ import { truncatedPublicKey } from "helpers";
 
 import { publicKeySelector } from "popup/ducks/authServices";
 import { COLOR_PALETTE, FONT_WEIGHT } from "popup/styles";
-import { Button, BackButton } from "popup/basics";
+import { Button, BackButton, FormSubmitButton } from "popup/basics";
 
 const El = styled.div`
   padding: 2.25rem 2.5rem;
@@ -92,13 +92,15 @@ export const SignTransaction = () => {
 
   const { _fee, _operations } = transaction;
   const publicKey = useSelector(publicKeySelector);
+  const [isConfirming, setIsConfirming] = useState(false);
 
   const rejectAndClose = async () => {
     await rejectAccess();
     window.close();
   };
 
   const signAndClose = async () => {
+    setIsConfirming(true);
     await signTransaction({ transaction });
     window.close();
   };
@@ -247,9 +249,12 @@ export const SignTransaction = () => {
         <RejectButton size="small" onClick={() => rejectAndClose()}>
           Reject
         </RejectButton>
-        <Button size="small" onClick={() => signAndClose()}>
-          Confirm
-        </Button>
+        <FormSubmitButton
+          buttonCTA="Confirm"
+          isSubmitting={isConfirming}
+          size="small"
+          onClick={() => signAndClose()}
+        />
       </ButtonContainerEl>
     </El>
   );