feat(airdrop): comfirm and claim

src/component/ClaimAirdrop/SubComponent/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import clsx from 'clsx';
-import { Modal, Spin, Space } from 'antd';
+import { Modal, Spin, Space, Button } from 'antd';
 
 import styles from '../styles.module.scss';
-import TwitterIcon from './img/Twitter.svg';
-import MediumIcon from './img/Medium.svg';
-import TelegramIcon from './img/Telegram.svg';
-import DiscordIcon from './img/Discord.svg';
+import twitterIcon from './img/twitter.svg';
+import mediumIcon from './img/medium.svg';
+import telegramIcon from './img/telegram.svg';
+import discordIcon from './img/discord.svg';
+import BackwardIcon from './img/backward.svg';
 
 export const ComfirmModalTitleWithCRAB = ({ crabQuantity='100' }) => (
   <div className={clsx(styles.titleComfirmModalWithCRAB)}>
@@ -21,8 +22,13 @@ export const ComfirmModalTitleForSorry = ({ crabQuantity='200,000' }) => (
   </div>
 );
 
-export const ComfirmModalTitleForComfirm = () => (
+export const ComfirmModalTitleForComfirm = ({
+  onBack=()=>{}
+}) => (
   <div className={clsx(styles.titleComfirmModalForComfirm)}>
+    <button onClick={onBack}>
+      <BackwardIcon />
+    </button>
     <span>Confirm Information</span>
     <span>Please review your destination address</span>
   </div>
@@ -107,16 +113,15 @@ export const DestinationSection = ({
   if (isNothingToClaim) {
     return (
       <div className={styles.destinationSection}>
-        <p>Address has no available claim</p>
+        <p className={clsx(styles.center, styles.bold)}>Address has no available claim</p>
       </div>
     );
   }
 
   if (isClaimed) {
     return (
       <div className={styles.destinationSection}>
-        <h5>Destination</h5>
-        <p>Address has already claimed</p>
+        <p className={clsx(styles.center, styles.bold)}>Address has already claimed</p>
       </div>
     );
   }
@@ -143,13 +148,27 @@ export const DestinationSection = ({
   );
 };
 
+export const GithubAccountSection = ({ account='helloworld' }) => (
+  <div className={styles.githubAccountSection}>
+    <h5>Github Account</h5>
+    <p>{account}</p>
+  </div>
+);
+
+export const AmountSection = ({ amount='100' }) => (
+  <div className={styles.amountSection}>
+    <h5>Amount</h5>
+    <p>{`${amount} CRAB`}</p>
+  </div>
+);
+
 export const SocialLinks = () => (
   <div>
     <Space size='large'>
-      <a href='#'><img alt='...' src={TwitterIcon} /></a>
-      <a href='#'><img alt='...' src={MediumIcon} /></a>
-      <a href='#'><img alt='...' src={TelegramIcon} /></a>
-      <a href='#'><img alt='...' src={DiscordIcon} /></a>
+      <a href='#'><img alt='...' src={twitterIcon} /></a>
+      <a href='#'><img alt='...' src={mediumIcon} /></a>
+      <a href='#'><img alt='...' src={telegramIcon} /></a>
+      <a href='#'><img alt='...' src={discordIcon} /></a>
     </Space>
   </div>
 );

src/component/ClaimAirdrop/index.tsx

@@ -7,6 +7,8 @@ import {
   ComfirmModalButton,
   SnapshotDataSection,
   DestinationSection,
+  GithubAccountSection,
+  AmountSection,
   SocialLinks,
   ComfirmModalTitleWithCRAB,
   ComfirmModalTitleForSorry,
@@ -37,13 +39,14 @@ const ClaimAirdrop: React.FC<Props> = ({ className }) => {
       </div>
       <ComfirmModal
         visible={visibleComfirmModal}
-        title={<ComfirmModalTitleWithCRAB />}
-        footer={<ComfirmModalButton onClick={() => setVisibleComfirmModal(false)} text='Claim CRAB' disabled={true} />}
+        title={<ComfirmModalTitleForComfirm onBack={() => setVisibleComfirmModal(false)} />}
+        footer={<ComfirmModalButton onClick={() => setVisibleComfirmModal(false)} text='Comfirm and Claim CRAB' disabled={false} />}
         onCancel={() => setVisibleComfirmModal(false)}
       >
         <Space direction='vertical' size='middle' style={{ width: '100%' }}>
-          <SnapshotDataSection />
-          <DestinationSection isValidAddress={false} />
+          <GithubAccountSection />
+          <DestinationSection comfirmAddress='0xe59261f6D4088BcD69985A3D369Ff14cC54EF1E5' />
+          <AmountSection />
         </Space>
       </ComfirmModal>
       <LoadingModal

src/component/ClaimAirdrop/styles.module.scss

@@ -88,6 +88,7 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
+  position: relative;
 
   >span {
     color: #ffffff;
@@ -101,6 +102,23 @@
       font-size: small;
     }
   }
+
+  >button {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: transparent;
+    border: none;
+    opacity: 0.8;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    >svg {
+      width: 20px;
+    }
+  }
 }
 
 .titleComfirmModalForCongratulation {
@@ -203,17 +221,27 @@
   }
 }
 
-.destinationSection {
+.destinationSection,
+.githubAccountSection,
+.amountSection {
   display: flex;
   flex-direction: column;
 
   >p {
-    font-weight: bold;
     font-size: small;
     margin: 0;
-    text-align: center;
+
+    &.center {
+      text-align: center;
+    }
+
+    &.bold {
+      font-weight: bold;
+    }
   }
+}
 
+.destinationSection {
   >input {
     border: 1px solid #CCCCCC;
     border-radius: 10px;