From 2dc4971c3534bcd28f0938bb9c354c4d481d57d3 Mon Sep 17 00:00:00 2001
From: JayJay1024 <lygm1062@gmail.com>
Date: Tue, 18 Jan 2022 18:06:18 +0800
Subject: [PATCH] feat(airdrop): comfirm modal title

---
 .../ClaimAirdrop/SubComponent/index.tsx       | 60 +++++++++++++++++
 src/component/ClaimAirdrop/index.tsx          | 39 +++--------
 src/component/ClaimAirdrop/styles.module.scss | 65 +++++++++++++++++++
 3 files changed, 135 insertions(+), 29 deletions(-)
 create mode 100644 src/component/ClaimAirdrop/SubComponent/index.tsx

diff --git a/src/component/ClaimAirdrop/SubComponent/index.tsx b/src/component/ClaimAirdrop/SubComponent/index.tsx
new file mode 100644
index 00000000..dcff8530
--- /dev/null
+++ b/src/component/ClaimAirdrop/SubComponent/index.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from '../styles.module.scss';
+import { Modal } from 'antd';
+
+export const ComfirmModalTitleWithCRAB = ({ crabQuantity='100' }) => (
+  <div className={clsx(styles.titleComfirmModalWithCRAB)}>
+    <span>Claim CRAB Token</span>
+    <span>{crabQuantity} CRAB</span>
+  </div>
+);
+
+export const ComfirmModalTitleForSorry = ({ crabQuantity='200,000' }) => (
+  <div className={clsx(styles.titleComfirmModalForSorry)}>
+    <span>{`Sorry, ${crabQuantity} CRAB has been distributed.`}</span>
+  </div>
+);
+
+export const ComfirmModalTitleForComfirm = () => (
+  <div className={clsx(styles.titleComfirmModalForComfirm)}>
+    <span>Confirm Information</span>
+    <span>Please review your destination address</span>
+  </div>
+);
+
+export const ComfirmModalTitleForCcongratulation = () => (
+  <div className={clsx(styles.titleComfirmModalForCongratulation)}>
+    <span>Congratulations!</span>
+  </div>
+);
+
+export const ComfirmModalButton = ({
+  text='OK',
+  onClick=()=>{},
+  disabled=false,
+}) => (
+  <button className={clsx(styles.btnComfirmModal)} onClick={onClick} disabled={disabled}>
+    <span>{text}</span>
+  </button>
+)
+
+export const ComfirmModal = ({
+  visible=false,
+  title=null,
+  footer=null,
+  children=null,
+  onCancel=()=>{},
+}) => {
+  return (
+    <Modal
+      visible={visible}
+      title={title}
+      footer={footer}
+      onCancel={onCancel}
+      className={clsx(styles.comfirmModal)}
+    >
+      {children}
+    </Modal>
+  );
+};
diff --git a/src/component/ClaimAirdrop/index.tsx b/src/component/ClaimAirdrop/index.tsx
index d7074b5f..a4d6b41c 100644
--- a/src/component/ClaimAirdrop/index.tsx
+++ b/src/component/ClaimAirdrop/index.tsx
@@ -1,35 +1,14 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.scss';
-import { Modal } from 'antd';
-
-const ComfirmModalButton = ({
-  text='OK',
-  onClick=()=>{},
-  disabled=false,
-}) => (
-  <button className={clsx(styles.btnComfirmModal)} onClick={onClick} disabled={disabled}>
-    <span>{text}</span>
-  </button>
-)
-
-const ComfirmModal = ({
-  visible=false,
-  title=null,
-  footer=null,
-  children=null,
-}) => {
-  return (
-    <Modal
-      visible={visible}
-      title={title}
-      footer={footer}
-      className={clsx(styles.comfirmModal)}
-    >
-      {children}
-    </Modal>
-  );
-};
+import {
+  ComfirmModal,
+  ComfirmModalButton,
+  ComfirmModalTitleWithCRAB,
+  ComfirmModalTitleForSorry,
+  ComfirmModalTitleForComfirm,
+  ComfirmModalTitleForCcongratulation,
+} from './SubComponent';
 
 type Props = {
   className?: string;
@@ -52,7 +31,9 @@ const ClaimAirdrop: React.FC<Props> = ({ className }) => {
       </div>
       <ComfirmModal
         visible={visibleComfirmModal}
+        title={<ComfirmModalTitleForCcongratulation />}
         footer={<ComfirmModalButton onClick={() => setVisibleComfirmModal(false)} disabled={true} />}
+        onCancel={() => setVisibleComfirmModal(false)}
       />
     </>
   );
diff --git a/src/component/ClaimAirdrop/styles.module.scss b/src/component/ClaimAirdrop/styles.module.scss
index 66ee0670..b28042d6 100644
--- a/src/component/ClaimAirdrop/styles.module.scss
+++ b/src/component/ClaimAirdrop/styles.module.scss
@@ -51,6 +51,71 @@
   }
 }
 
+.titleComfirmModalWithCRAB {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  >span {
+    color: #ffffff;
+
+    &:first-child {
+      font-size: small;
+      margin-bottom: 10px;
+    }
+
+    &:last-child {
+      font-weight: bolder;
+    }
+  }
+}
+
+.titleComfirmModalForSorry {
+  width: 100%;
+  padding: 15px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  >span {
+    color: #ffffff;
+    font-size: small;
+  }
+}
+
+.titleComfirmModalForComfirm {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+
+  >span {
+    color: #ffffff;
+
+    &:first-child {
+      font-weight: bolder;
+      margin-bottom: 6px;
+    }
+
+    &:last-child {
+      font-size: small;
+    }
+  }
+}
+
+.titleComfirmModalForCongratulation {
+  width: 100%;
+  padding: 18px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  >span {
+    color: #ffffff;
+    font-weight: bolder;
+  }
+}
+
 .comfirmModal {
   :global {
     .ant-modal-content {