Merge pull request #130 from Anchor-Protocol/feature/mobile-airdrop

Feature: Airdrop dialog on mobile layout
Anchor-Protocol · May 29, 2021 · fadcdb4 · fadcdb4 · vercel · May 29, 2021
2 parents d8a4ef2 + ac6a1b7
commit fadcdb4
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 39 deletions.
diff --git a/app/src/components/Header/MobileHeader.tsx b/app/src/components/Header/MobileHeader.tsx
@@ -9,7 +9,9 @@ import {
   WalletStatus,
 } from '@terra-money/wallet-provider';
 import logoUrl from 'components/Header/assets/Logo.svg';
+import { AirdropContent } from 'components/Header/WalletSelector/AirdropContent';
 import { links, mobileHeaderHeight } from 'env';
+import { useAirdrop } from 'pages/airdrop/queries/useAirdrop';
 import { govPathname } from 'pages/gov/env';
 import { useSendDialog } from 'pages/send/useSendDialog';
 import React, { useCallback, useState } from 'react';
@@ -22,6 +24,8 @@ export interface MobileHeaderProps {
   className?: string;
 }
 
+let _airdropClosed: boolean = false;
+
 function MobileHeaderBase({ className }: MobileHeaderProps) {
   const [open, setOpen] = useState<boolean>(false);
 
@@ -31,6 +35,33 @@ function MobileHeaderBase({ className }: MobileHeaderProps) {
 
   const [openSendDialog, sendDialogElement] = useSendDialog();
 
+  const [airdrop] = useAirdrop();
+  //const airdrop = useMemo<Airdrop | 'in-progress' | null>(
+  //  () => ({
+  //    createdAt: '',
+  //    id: 1,
+  //    stage: 1,
+  //    address: '',
+  //    staked: '100000000' as uANC,
+  //    total: '100000000' as uANC,
+  //    rate: '0.1' as Rate,
+  //    amount: '100000000' as uANC,
+  //    proof: '',
+  //    merkleRoot: '',
+  //    claimable: true,
+  //  }),
+  //  [],
+  //);
+
+  const matchAirdrop = useRouteMatch('/airdrop');
+
+  const [airdropClosed, setAirdropClosed] = useState(() => _airdropClosed);
+
+  const closeAirdrop = useCallback(() => {
+    setAirdropClosed(true);
+    _airdropClosed = true;
+  }, []);
+
   const toggleWallet = useCallback(() => {
     if (status === WalletStatus.WALLET_CONNECTED) {
       openWalletDetail({
@@ -111,6 +142,16 @@ function MobileHeaderBase({ className }: MobileHeaderProps) {
             offIcon={Menu}
           />
         </section>
+
+        {!open &&
+          !airdropClosed &&
+          airdrop &&
+          airdrop !== 'in-progress' &&
+          !matchAirdrop && (
+            <section className="airdrop">
+              <AirdropContent onClose={closeAirdrop} isMobileLayout />
+            </section>
+          )}
       </header>
 
       {open && <div style={{ height: mobileHeaderHeight }} />}
@@ -224,6 +265,11 @@ export const MobileHeader = styled(MobileHeaderBase)`
     }
   }
 
+  .airdrop {
+    padding-bottom: 20px;
+    background-color: ${({ theme }) => theme.backgroundColor};
+  }
+
   // ---------------------------------------------
   // layout
   // ---------------------------------------------

diff --git a/app/src/components/Header/WalletSelector/AirdropContent.tsx b/app/src/components/Header/WalletSelector/AirdropContent.tsx
@@ -1,50 +1,37 @@
 import { IconButton } from '@material-ui/core';
 import { Close } from '@material-ui/icons';
 import { FlatButton } from '@terra-dev/neumorphism-ui/components/FlatButton';
-import airdropImage from 'components/Header/assets/airdrop.svg';
 import { Link } from 'react-router-dom';
-import styled, { keyframes } from 'styled-components';
-
-const parachute = keyframes`
-  0% {
-    transform: rotate(10deg) translateY(0);
-  }
-  
-  25% {
-    transform: rotate(-10deg) translateY(-3px);
-  }
-  
-  50% {
-    transform: rotate(10deg) translateY(0);
-  }
-  
-  75% {
-    transform: rotate(-10deg) translateY(3px);
-  }
-  
-  100% {
-    transform: rotate(10deg) translateY(0);
-  }
-`;
+import styled from 'styled-components';
+import { AirdropImage } from './AirdropImage';
 
 function AirdropBase({
   className,
   onClose,
+  isMobileLayout,
 }: {
   className?: string;
   onClose: () => void;
+  isMobileLayout?: true;
 }) {
   return (
-    <div className={className}>
-      <img src={airdropImage} alt="Airdrop!" />
-      <h2>Airdrop</h2>
-      <p>Claim your ANC tokens</p>
-      <FlatButton component={Link} to="/airdrop">
-        Claim
-      </FlatButton>
-      <IconButton className="close" size="small" onClick={onClose}>
-        <Close />
-      </IconButton>
+    <div
+      className={className}
+      data-layout={isMobileLayout ? 'mobile' : 'modal'}
+    >
+      <div>
+        <AirdropImage />
+      </div>
+      <div>
+        <h2>Airdrop</h2>
+        <p>Claim your ANC tokens</p>
+        <FlatButton component={Link} to="/airdrop">
+          Claim
+        </FlatButton>
+        <IconButton className="close" size="small" onClick={onClose}>
+          <Close />
+        </IconButton>
+      </div>
     </div>
   );
 }
@@ -55,15 +42,11 @@ export const AirdropContent = styled(AirdropBase)`
 
   position: relative;
 
-  img {
-    animation: ${parachute} 6s ease-in-out infinite;
-  }
-
   h2 {
     margin-top: 13px;
 
     font-size: 16px;
-    font-weight: 500;
+    font-weight: 700;
   }
 
   p {
@@ -92,4 +75,40 @@ export const AirdropContent = styled(AirdropBase)`
       font-size: 16px;
     }
   }
+
+  &[data-layout='mobile'] {
+    height: 129px;
+    margin: 0;
+    padding: 0 20px;
+
+    display: flex;
+    align-items: center;
+
+    background-color: ${({ theme }) =>
+      theme.palette.type === 'dark' ? '#363c5f' : '#ededed'};
+
+    img {
+      width: 70px;
+    }
+
+    > :first-child {
+      width: 100px;
+    }
+
+    > :last-child {
+      flex: 1;
+
+      padding-left: 5px;
+      text-align: left;
+
+      a {
+        margin-top: 8px;
+      }
+
+      .close {
+        right: 20px;
+        top: 20px;
+      }
+    }
+  }
 `;
diff --git a/app/src/components/Header/WalletSelector/AirdropImage.tsx b/app/src/components/Header/WalletSelector/AirdropImage.tsx
@@ -0,0 +1,37 @@
+import airdropImage from 'components/Header/assets/airdrop.svg';
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+export interface AirdropImageProps {
+  className?: string;
+}
+
+function AirdropImageBase({ className }: AirdropImageProps) {
+  return <img src={airdropImage} className={className} alt="Airdrop!" />;
+}
+
+const parachute = keyframes`
+  0% {
+    transform: rotate(10deg) translateY(0);
+  }
+  
+  25% {
+    transform: rotate(-10deg) translateY(-3px);
+  }
+  
+  50% {
+    transform: rotate(10deg) translateY(0);
+  }
+  
+  75% {
+    transform: rotate(-10deg) translateY(3px);
+  }
+  
+  100% {
+    transform: rotate(10deg) translateY(0);
+  }
+`;
+
+export const AirdropImage = styled(AirdropImageBase)`
+  animation: ${parachute} 6s ease-in-out infinite;
+`;
diff --git a/app/src/components/Header/WalletSelector/index.tsx b/app/src/components/Header/WalletSelector/index.tsx
@@ -44,6 +44,22 @@ function WalletSelectorBase({ className }: WalletSelectorProps) {
   const bank = useBank();
 
   const [airdrop] = useAirdrop();
+  //const airdrop = useMemo<Airdrop | 'in-progress' | null>(
+  //  () => ({
+  //    createdAt: '',
+  //    id: 1,
+  //    stage: 1,
+  //    address: '',
+  //    staked: '100000000' as uANC,
+  //    total: '100000000' as uANC,
+  //    rate: '0.1' as Rate,
+  //    amount: '100000000' as uANC,
+  //    proof: '',
+  //    merkleRoot: '',
+  //    claimable: true,
+  //  }),
+  //  [],
+  //);
 
   const matchAirdrop = useRouteMatch('/airdrop');