Feature: Omen Airdrop Popup Modal Version 2

app/src/components/common/icons/IconExclamation.tsx

@@ -14,7 +14,7 @@ export const IconExclamation = (props: Props) => (
   >
     <path
       d="M7.2 10.4h1.6V12H7.2v-1.6zm0-6.4h1.6v4.8H7.2V4zm.792-4C3.576 0 0 3.584 0 8s3.576 8 7.992 8C12.416 16 16 12.416 16 8s-3.584-8-8.008-8zM8 14.4A6.398 6.398 0 011.6 8c0-3.536 2.864-6.4 6.4-6.4 3.536 0 6.4 2.864 6.4 6.4 0 3.536-2.864 6.4-6.4 6.4z"
-      fill="#7986CB"
+      fill={props.color ? props.color : '#7986CB'}
     ></path>
   </svg>
 )

app/src/components/modal/common_styled/index.tsx

@@ -43,7 +43,8 @@ export const ModalCard = styled.div`
   border-radius: ${props => props.theme.cards.borderRadius};
 
   &:nth-child(3),
-  &:nth-child(4) {
+  &:nth-child(4),
+  &:nth-child(6) {
     margin-top: 16px;
   }
 `

app/src/components/modal/modal_airdrop/airdrop_card.tsx

@@ -11,13 +11,13 @@ import { ButtonType } from '../../button/button_styling_types'
 import { IconOmen } from '../../common/icons'
 import { BalanceSection, ModalCard } from '../common_styled'
 
-const TopSection = styled.div`
+const TopSection = styled.div<{ displayCheckAddress: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px;
   width: 100%;
-  border-bottom: ${props => props.theme.borders.borderLineDisabled};
+  border-bottom: ${props => (props.displayCheckAddress ? props.theme.borders.borderLineDisabled : '')};
 `
 
 const TopSectionLeft = styled.div`
@@ -52,35 +52,36 @@ const AirdropButton = styled(Button)`
 `
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
-  theme: any
-  displayButtons?: boolean
-  displayAmount: BigNumber
   claim?: (account: string, amount: BigNumber) => Promise<void>
+  displayAmount: BigNumber
+  displayButtons?: boolean
+  displayCheckAddress?: boolean
   onCheckAddress?: () => void
+  theme: any
 }
 
 const AirdropCard = (props: Props) => {
-  const { claim, displayAmount, displayButtons = true, onCheckAddress } = props
+  const { claim, displayAmount, displayButtons = true, displayCheckAddress = true, onCheckAddress } = props
 
-  const { account } = useConnectedWeb3Context()
+  const { account, balances } = useConnectedWeb3Context()
 
   const submitClaim = () => {
     if (claim && account && displayAmount) {
       claim(account, displayAmount)
     }
   }
 
-  const claimIsDisabled = !displayAmount || displayAmount.isZero()
+  const claimIsDisabled = !displayAmount || displayAmount.isZero() || balances.xDaiBalance.isZero()
 
   return (
     <>
       <ModalCard>
-        <TopSection>
+        <TopSection displayCheckAddress={displayCheckAddress}>
           <TopSectionLeft>
             <IconOmen id="airdrop" size={38} />
             <TopSectionDetails>
               <TYPE.bodyMedium color={'text1'}>Claimable Amount</TYPE.bodyMedium>
-              <TYPE.bodyMedium color={!claimIsDisabled ? 'profit' : 'text2'}>
+              <TYPE.bodyMedium color={displayAmount.isZero() ? 'text2' : 'profit'}>
                 {bigNumberToString(displayAmount, STANDARD_DECIMALS)} OMN
               </TYPE.bodyMedium>
             </TopSectionDetails>
@@ -91,24 +92,28 @@ const AirdropCard = (props: Props) => {
             </AirdropButton>
           )}
         </TopSection>
-        <BottomSection>
-          <BottomSectionTextWrapper>
+        {displayCheckAddress && (
+          <BottomSection>
+            {' '}
             {displayButtons ? (
-              <BottomSectionTextWrapper>
-                <TYPE.bodyMedium color={'text1'}>Claim OMN token</TYPE.bodyMedium>
-                <TYPE.bodyRegular color={'text2'}>check address for claimable OMN</TYPE.bodyRegular>
-              </BottomSectionTextWrapper>
+              <>
+                {' '}
+                <BottomSectionTextWrapper>
+                  {' '}
+                  <TYPE.bodyMedium color={'text1'}>Claim OMN token</TYPE.bodyMedium>{' '}
+                  <TYPE.bodyRegular color={'text2'}>check address for claimable OMN</TYPE.bodyRegular>{' '}
+                </BottomSectionTextWrapper>{' '}
+                <AirdropButton onClick={onCheckAddress}>Check</AirdropButton>{' '}
+              </>
             ) : (
-              <BottomSectionTextWrapper>
-                <TYPE.bodyRegular color={'text2'}>
-                  Enter an address to trigger a OMN claim. If the address has any claimable OMN it will be sent to them
-                  on submission.
-                </TYPE.bodyRegular>
-              </BottomSectionTextWrapper>
-            )}
-          </BottomSectionTextWrapper>
-          {displayButtons && <AirdropButton onClick={onCheckAddress}>Check</AirdropButton>}
-        </BottomSection>
+              <TYPE.bodyRegular color={'text2'}>
+                {' '}
+                Enter an address to trigger a OMN claim. If the address has any claimable OMN it will be sent to them on
+                submission.{' '}
+              </TYPE.bodyRegular>
+            )}{' '}
+          </BottomSection>
+        )}
       </ModalCard>
     </>
   )

app/src/components/modal/modal_airdrop/index.tsx

@@ -1,21 +1,30 @@
 import { BigNumber } from 'ethers/utils'
 import React, { HTMLAttributes, useState } from 'react'
 import Modal from 'react-modal'
-import { withTheme } from 'styled-components'
+import styled, { withTheme } from 'styled-components'
 
 import { STANDARD_DECIMALS } from '../../../common/constants'
 import { useConnectedWeb3Context } from '../../../contexts'
 import { useAirdropService } from '../../../hooks'
+import { TYPE } from '../../../theme'
 import { bigNumberToString } from '../../../util/tools'
 import { TransactionStep } from '../../../util/types'
-import { IconClose, IconOmen } from '../../common/icons'
+import { IconClose, IconExclamation, IconOmen } from '../../common/icons'
 import { ContentWrapper, ModalNavigation, ModalNavigationLeft } from '../common_styled'
 import { ModalTransactionWrapper } from '../modal_transaction'
 
 import { AirdropCardWrapper } from './airdrop_card'
-import { ModalCheckAddressWrapper } from './check_address'
 import Graphic from './graphic'
 
+const DaiBanner = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border: 1px solid ${props => props.theme.dai};
+  border-radius: ${props => props.theme.cards.borderRadius};
+  width: 100%;
+`
+
 interface Props extends HTMLAttributes<HTMLDivElement> {
   theme: any
 }
@@ -30,6 +39,7 @@ export const ModalAirdrop = (props: Props) => {
   const [checkAddress, setCheckAddress] = useState(false)
   const [isTransactionModalOpen, setIsTransactionModalOpen] = useState<boolean>(false)
   const [message, setMessage] = useState('')
+  const displayDaiBanner = balances.xDaiBalance.isZero()
 
   Modal.setAppElement('#root')
 
@@ -73,7 +83,21 @@ export const ModalAirdrop = (props: Props) => {
             <IconClose hoverEffect={true} onClick={onClose} />
           </ModalNavigation>
           <Graphic />
-          <AirdropCardWrapper claim={claim} displayAmount={claimAmount} onCheckAddress={() => setCheckAddress(true)} />
+          <TYPE.heading2 color={'text1'} fontWeight={500} margin={'24px 0px 12px'}>
+            OMN has arrived!
+          </TYPE.heading2>
+          <TYPE.bodyRegular color={'text2'} marginBottom={'32px'}>
+            Thanks for being part of the Omen Community.
+          </TYPE.bodyRegular>
+          {displayDaiBanner && (
+            <DaiBanner>
+              <IconExclamation color={theme.dai} />
+              <TYPE.bodyRegular color={'dai'} marginLeft={'12px'}>
+                Deposit Dai in order to claim OMN tokens.
+              </TYPE.bodyRegular>
+            </DaiBanner>
+          )}
+          <AirdropCardWrapper claim={claim} displayAmount={claimAmount} displayCheckAddress={false} />
         </ContentWrapper>
       </Modal>
       <ModalTransactionWrapper
@@ -85,12 +109,6 @@ export const ModalAirdrop = (props: Props) => {
         txHash={txHash}
         txState={txState}
       />
-      <ModalCheckAddressWrapper
-        claim={claim}
-        isOpen={checkAddress && !isTransactionModalOpen}
-        onBack={() => setCheckAddress(false)}
-        onClose={onClose}
-      />
     </>
   )
 }

app/src/theme/index.tsx

@@ -24,6 +24,7 @@ export function colors(darkMode: boolean): Colors {
     profit: darkMode ? '' : '#4B9E98',
     alert: darkMode ? '' : '#E57373',
     link: darkMode ? '' : '#1E88E5',
+    dai: darkMode ? '' : '#F9A606',
 
     //border
     border1: darkMode ? '' : '#DCDFF2',

app/src/theme/types.ts

@@ -17,6 +17,7 @@ export interface Colors {
   profit: Color
   alert: Color
   link: Color
+  dai: Color
 
   border1: Color
   border2: Color