fear(airdrop): loading modal

MORIOM70 · Jan 18, 2022 · 40fa9f1 · 40fa9f1
1 parent 2dc4971
commit 40fa9f1
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 2 deletions.
diff --git a/src/component/ClaimAirdrop/SubComponent/index.tsx b/src/component/ClaimAirdrop/SubComponent/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from '../styles.module.scss';
-import { Modal } from 'antd';
+import { Modal, Spin } from 'antd';
 
 export const ComfirmModalTitleWithCRAB = ({ crabQuantity='100' }) => (
   <div className={clsx(styles.titleComfirmModalWithCRAB)}>
@@ -58,3 +58,23 @@ export const ComfirmModal = ({
     </Modal>
   );
 };
+
+export const LoadingModal = ({
+  visible=false,
+  onCancel=()=>{},
+}) => {
+  return (
+    <Modal
+      visible={visible}
+      title={null}
+      footer={null}
+      onCancel={onCancel}
+      className={clsx(styles.loadingModal)}
+    >
+      <div className={clsx(styles.loadingModalBody)}>
+        <Spin size='large' className={clsx(styles.loadingModalSpin)} indicator={<div className={styles.indicator} />} />
+        <p>Waiting For Confirmation</p>
+      </div>
+    </Modal>
+  )
+};
diff --git a/src/component/ClaimAirdrop/index.tsx b/src/component/ClaimAirdrop/index.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.scss';
 import {
+  LoadingModal,
   ComfirmModal,
   ComfirmModalButton,
   ComfirmModalTitleWithCRAB,
@@ -15,7 +16,8 @@ type Props = {
 }
 
 const ClaimAirdrop: React.FC<Props> = ({ className }) => {
-  const [visibleComfirmModal, setVisibleComfirmModal] = useState(true);
+  const [visibleLoadingModal, setVisibleLoadingModal] = useState(true);
+  const [visibleComfirmModal, setVisibleComfirmModal] = useState(false);
 
   const handleClickLoginWithGithub = (e: Event) => {
     e.preventDefault();
@@ -35,6 +37,10 @@ const ClaimAirdrop: React.FC<Props> = ({ className }) => {
         footer={<ComfirmModalButton onClick={() => setVisibleComfirmModal(false)} disabled={true} />}
         onCancel={() => setVisibleComfirmModal(false)}
       />
+      <LoadingModal
+        visible={visibleLoadingModal}
+        onCancel={() => setVisibleLoadingModal(false)}
+      />
     </>
   );
 };

diff --git a/src/component/ClaimAirdrop/styles.module.scss b/src/component/ClaimAirdrop/styles.module.scss
@@ -138,3 +138,49 @@
     }
   }
 }
+
+.loadingModal {
+  :global {
+    .ant-modal-content {
+      border-radius: 20px;
+    }
+
+    .ant-modal-close {
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
+}
+
+.loadingModalBody {
+  margin-top: 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  >p {
+    margin-top: 20px;
+    color: #000000;
+    font-size: small;
+  }
+}
+
+@keyframes crab-spin {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loadingModalSpin {
+  .indicator {
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #EC3783;
+    border-radius: 50%;
+    animation: crab-spin 1.2s linear infinite;
+  }
+}