Add loading state to register button on final check modal

components/final-check-modal/index.tsx

@@ -17,6 +17,7 @@ interface Props {
   isModalOpen: boolean;
   onCloseModal: () => void;
   onClickRegisterButton: () => Promise<void>;
+  isLoadingRegistration?: boolean;
 }
 
 export const FinalCheckModal: FunctionComponent<Props> = (props) => {
@@ -26,6 +27,7 @@ export const FinalCheckModal: FunctionComponent<Props> = (props) => {
     isModalOpen,
     onCloseModal,
     onClickRegisterButton,
+    isLoadingRegistration,
   } = props;
   const router = useRouter();
 
@@ -89,7 +91,10 @@ export const FinalCheckModal: FunctionComponent<Props> = (props) => {
             Use a different account
           </SecondaryButton>
           <RegisterButton>
-            <PrimaryButton onClick={onClickRegisterButton}>
+            <PrimaryButton
+              onClick={onClickRegisterButton}
+              isLoading={isLoadingRegistration}
+            >
               Register
             </PrimaryButton>
           </RegisterButton>

components/primary-button/index.tsx

@@ -9,10 +9,11 @@ interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export const PrimaryButton: FunctionComponent<PrimaryButtonProps> = ({
   children,
   isLoading,
+  disabled,
   ...props
 }) => {
   return (
-    <StyledPrimaryButton {...props}>
+    <StyledPrimaryButton {...props} disabled={disabled || isLoading}>
       {isLoading ? (
         <SpinnerWrapper>
           <Spinner />
@@ -61,6 +62,7 @@ const StyledPrimaryButton = styled.button`
 
   &:disabled {
     background-color: ${color.orange["300"]};
+    cursor: not-allowed;
 
     span {
       opacity: 0.5;

pages/verification/index.tsx

@@ -267,8 +267,6 @@ export default function VerificationPage() {
   const onClickRegistration = () => {
     amplitude.track("click register button");
 
-    console.log(isOwner);
-
     if (isOwner) {
       handleRegistration();
     } else {
@@ -448,6 +446,7 @@ export default function VerificationPage() {
         isModalOpen={isModalOpen}
         onCloseModal={() => setModalOpen(false)}
         onClickRegisterButton={handleRegistration}
+        isLoadingRegistration={isLoadingRegistration}
       />
     </Container>
   );