feat(airdrop): destination

MORIOM70 · Jan 18, 2022 · 7d6d9f0 · 7d6d9f0
1 parent da99229
commit 7d6d9f0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/src/component/ClaimAirdrop/SubComponent/index.tsx b/src/component/ClaimAirdrop/SubComponent/index.tsx
@@ -98,7 +98,7 @@ export const SnapshotDataSection = ({
 );
 
 export const DestinationSection = ({
-  onAddressChange=(address)=>console.log(address),
+  onAddressChange=(e)=>console.log(e.target.value),
   isValidAddress=true,
   isNothingToClaim=false,
   isClaimed=false,
@@ -133,11 +133,11 @@ export const DestinationSection = ({
   return (
     <div className={styles.destinationSection}>
       <h5>Destination</h5>
-      <input onChange={onAddressChange} />
+      <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>Please enter a valid Crab Smart Address, 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>
   );

diff --git a/src/component/ClaimAirdrop/index.tsx b/src/component/ClaimAirdrop/index.tsx
@@ -43,7 +43,7 @@ const ClaimAirdrop: React.FC<Props> = ({ className }) => {
       >
         <Space direction='vertical' size='middle' style={{ width: '100%' }}>
           <SnapshotDataSection />
-          <DestinationSection isNothingToClaim={true} />
+          <DestinationSection isValidAddress={false} />
         </Space>
       </ComfirmModal>
       <LoadingModal

diff --git a/src/component/ClaimAirdrop/styles.module.scss b/src/component/ClaimAirdrop/styles.module.scss
@@ -204,10 +204,45 @@
 }
 
 .destinationSection {
+  display: flex;
+  flex-direction: column;
+
   >p {
     font-weight: bold;
     font-size: small;
     margin: 0;
     text-align: center;
   }
+
+  >input {
+    border: 1px solid #CCCCCC;
+    border-radius: 10px;
+    height: 36px;
+    padding: 0 12px;
+    margin-bottom: 6px;
+    box-shadow: inset 0 0 6px #CCCCCC;
+
+    &:hover {
+      box-shadow: 0 0 2px rgba(228, 26, 112, 0.9);
+      border: 1px solid rgba(228, 26, 112, 0.9);
+    }
+
+    &:focus-visible {
+      outline-color: rgba(228, 26, 112, 0.9);
+    }
+  }
+
+  >span {
+    >a {
+      text-decoration: underline;
+    }
+
+    &.warning {
+      color: #FF0000;
+
+      >a {
+        color: #000000;
+      }
+    }
+  }
 }