Merge branch 'jay-airdrop-claim' into airdrop-api

docs/builders/get-started/darwinia-crab.md → docs/builders/get-started/darwinia-crab.mdx

@@ -14,6 +14,7 @@ Crab has two endpoints available for users to connect to: one for HTTPS and one
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import ClaimAirdrop from '../../../src/component/ClaimAirdrop';
 
 <Tabs
   defaultValue="wss"
@@ -42,3 +43,9 @@ wss://crab-rpc.darwinia.network
 
 - Compatible with EVM, Ethereum contracts, Ethereum contract tools.
 - Support ethereum-substrate bi-directional bridge
+
+## Get Tokens
+
+To promote Crab Network to developers, meanwhile to make it easier for developers to start building on Crab, we launched a developer airdrop program. The developer airdrop program will distribute 200,000 CRAB, any Github account registered before December 30, 2021 will have the qualification to claim the airdrop.
+
+<ClaimAirdrop />

src/component/ClaimAirdrop/SubComponent/index.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import clsx from 'clsx';
+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 BackwardIcon from './img/backward.svg';
+
+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 = ({
+  onBack=()=>{}
+}) => (
+  <div className={clsx(styles.titleComfirmModalForComfirm)}>
+    <button onClick={onBack}>
+      <BackwardIcon />
+    </button>
+    <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 CongratulationContent = () => (
+  <div>
+    <p>The airdrop token 100 CRAB has been sent to the destination address that you filled before, please track this transfer through the Subview:</p>
+    <p><a href='#'>View in Subview Explorer</a></p>
+  </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>
+  );
+};
+
+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>
+  )
+};
+
+export const SnapshotDataSection = ({
+  githubAccount='***',
+  registrationTime='2021/12/05',
+}) => (
+  <div className={styles.snapshotTimeSection}>
+    <h5>Snapshot Data</h5>
+    <div className={clsx(styles.wrapContent)}>
+      <span>{`Github Account: ${githubAccount}`}</span>
+      <span>{`Registration Time: : ${registrationTime}`}</span>
+    </div>
+  </div>
+);
+
+export const DestinationSection = ({
+  onAddressChange=(e)=>console.log(e.target.value),
+  isValidAddress=true,
+  isNothingToClaim=false,
+  isClaimed=false,
+  comfirmAddress=undefined,
+}) => {
+  if (isNothingToClaim) {
+    return (
+      <div className={styles.destinationSection}>
+        <p className={clsx(styles.center, styles.bold)}>Address has no available claim</p>
+      </div>
+    );
+  }
+
+  if (isClaimed) {
+    return (
+      <div className={styles.destinationSection}>
+        <p className={clsx(styles.center, styles.bold)}>Address has already claimed</p>
+      </div>
+    );
+  }
+
+  if (comfirmAddress) {
+    return (
+      <div className={styles.destinationSection}>
+        <h5>Destination</h5>
+        <p>{comfirmAddress}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.destinationSection}>
+      <h5>Destination</h5>
+      <input placeholder='Please enter your Crab Smart Address which starts with 0x' onChange={onAddressChange} />
+      {isValidAddress ? (
+        <span>Please enter your Crab Smart Address to claim token CRAB, learn more about Crab Smart Address, please refer <a href='#'>here</a>.</span>
+      ) : (
+        <span className={styles.warning}>Please enter a valid Crab Smart Address, learn more about Crab Smart Address, please refer <a href='#'>here</a>.</span>
+      )}
+    </div>
+  );
+};
+
+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 = () => (
+  <Space className={styles.socialLinks} size='large'>
+    <a href='#'><TwitterIcon /></a>
+    <a href='#'><MediumIcon /></a>
+    <a href='#'><TelegramIcon/></a>
+    <a href='#'><DiscordIcon /></a>
+  </Space>
+);

src/component/ClaimAirdrop/index.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import {
+  LoadingModal,
+  ComfirmModal,
+  ComfirmModalButton,
+  SnapshotDataSection,
+  DestinationSection,
+  GithubAccountSection,
+  AmountSection,
+  SocialLinks,
+  CongratulationContent,
+  ComfirmModalTitleWithCRAB,
+  ComfirmModalTitleForSorry,
+  ComfirmModalTitleForComfirm,
+  ComfirmModalTitleForCcongratulation,
+} from './SubComponent';
+import { Space } from 'antd';
+
+type Props = {
+  className?: string;
+}
+
+const ClaimAirdrop: React.FC<Props> = ({ className }) => {
+  const [visibleLoadingModal, setVisibleLoadingModal] = useState(false);
+  const [visibleComfirmModal, setVisibleComfirmModal] = useState(false);
+
+  // const handleClickLoginWithGithub = (e: Event) => {
+  //   e.preventDefault();
+  //   setVisibleComfirmModal(true);
+  // }
+
+  return (
+    <>
+      <div className={clsx(className)}>
+        <a className={clsx(styles.btnLoginWithGihub)} href="/api/connect/github">
+          <span>Log in with Github</span>
+        </a>
+      </div>
+      <ComfirmModal
+        visible={visibleComfirmModal}
+        title={<ComfirmModalTitleForCcongratulation />}
+        // footer={<ComfirmModalButton onClick={() => setVisibleComfirmModal(false)} text='Comfirm and Claim CRAB' disabled={false} />}
+        footer={<SocialLinks />}
+        onCancel={() => setVisibleComfirmModal(false)}
+      >
+        <Space direction='vertical' size='middle' style={{ width: '100%' }}>
+          <CongratulationContent />
+        </Space>
+      </ComfirmModal>
+      <LoadingModal
+        visible={visibleLoadingModal}
+        onCancel={() => setVisibleLoadingModal(false)}
+      />
+    </>
+  );
+};
+
+export default React.memo<Props>(ClaimAirdrop);