feature/guild

app/src/components/button/button_styling_types.ts

@@ -143,7 +143,6 @@ export const ButtonCSS = css`
   padding: 12px 17px;
   pointer-events: ${props => ((props as any).disabled ? 'none' : 'initial')};
   text-align: center;
-  transition: all 0.15s ease-out;
   user-select: none;
   white-space: nowrap;
   font-family: Roboto;

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

@@ -1,18 +1,39 @@
 import React from 'react'
+import styled from 'styled-components'
 
 interface Props {
   style?: any
+  size?: string
 }
 
+const StyledSvg = styled.svg`
+  cursor: pointer;
+  &:hover {
+    circle {
+      stroke: ${props => props.theme.dropdown.buttonBorderColorHover};
+    }
+    path {
+      fill: ${props => props.theme.dropdown.buttonColorHover};
+    }
+  }
+`
+
 export const IconAlertInverted = (props: Props) => {
-  const { style } = props
+  const { size = '20', ...restProps } = props
   return (
-    <svg fill="none" height="20" style={style} viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+    <StyledSvg
+      {...restProps}
+      fill="none"
+      height={size}
+      viewBox="0 0 20 20"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <circle cx="10" cy="10" r="9.5" stroke="#DCDFF2" />
       <path
         d="M9 14C9 13.4477 9.44772 13 10 13C10.5523 13 11 13.4477 11 14C11 14.5523 10.5523 15 10 15C9.44772 15 9 14.5523 9 14ZM9.12498 5H10.875V11H9.12498V5Z"
         fill="#86909E"
       />
-    </svg>
+    </StyledSvg>
   )
 }

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

@@ -18,20 +18,21 @@ const Wrapper = styled.svg<{ hoverEffect: boolean }>`
 interface Props {
   hoverEffect?: boolean
   onClick?: () => void
+  style?: any
 }
 
 export const IconArrowBack = (props: Props) => {
-  const { hoverEffect = false, onClick } = props
+  const { hoverEffect = false, ...restProps } = props
 
   return (
     <Wrapper
       fill="none"
       height="24"
       hoverEffect={hoverEffect}
-      onClick={onClick}
       viewBox="0 0 24 24"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
     >
       <path
         className="path"

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

@@ -1,11 +1,29 @@
 import React from 'react'
+import styled from 'styled-components'
 
-export const IconArrowRightLong = () => (
-  <svg fill="none" height="14" viewBox="0 0 18 14" width="18" xmlns="http://www.w3.org/2000/svg">
-    <path
-      className="arrow-path"
-      d="M12.1163 0.928154C12.0593 0.860436 11.9887 0.805227 11.9091 0.766048C11.8294 0.726868 11.7423 0.704578 11.6535 0.700598C11.5646 0.696618 11.4759 0.711035 11.393 0.742931C11.3101 0.774827 11.2347 0.823501 11.1718 0.885851C11.109 0.9482 11.0599 1.02286 11.0277 1.10506C10.9955 1.18727 10.981 1.27522 10.985 1.3633C10.989 1.45139 11.0115 1.53768 11.051 1.61667C11.0905 1.69566 11.1462 1.76563 11.2145 1.8221L15.8153 6.38836H0.608036C0.443872 6.397 0.289304 6.46773 0.176181 6.58598C0.0630584 6.70423 0 6.86099 0 7.02396C0 7.18693 0.0630584 7.34369 0.176181 7.46194C0.289304 7.58019 0.443872 7.65092 0.608036 7.65955H15.8153L11.2073 12.2205C11.0913 12.3409 11.0266 12.5009 11.0266 12.6674C11.0266 12.8339 11.0913 12.994 11.2073 13.1144C11.2665 13.1732 11.3367 13.2199 11.4141 13.2517C11.4915 13.2836 11.5744 13.3 11.6582 13.3C11.742 13.3 11.8249 13.2836 11.9023 13.2517C11.9797 13.2199 12.0499 13.1732 12.1091 13.1144L17.8082 7.46467C17.8688 7.40679 17.9171 7.33737 17.9501 7.26057C17.983 7.18377 18 7.10116 18 7.0177C18 6.93424 17.983 6.85163 17.9501 6.77483C17.9171 6.69803 17.8688 6.62861 17.8082 6.57073L12.1163 0.928154Z"
-      fill="#DCDFF2"
-    />
-  </svg>
-)
+interface Props {
+  width?: number
+  color?: string
+  height?: number
+  style?: any
+}
+const SvgStyled = styled.svg``
+export const IconArrowRightLong = (props: Props) => {
+  const { color = '#DCDFF2', height = 14, style, width = 18 } = props
+  return (
+    <SvgStyled
+      fill="none"
+      height={height}
+      style={style}
+      viewBox="0 0 18 14"
+      width={width}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className="arrow-path"
+        d="M12.1163 0.928154C12.0593 0.860436 11.9887 0.805227 11.9091 0.766048C11.8294 0.726868 11.7423 0.704578 11.6535 0.700598C11.5646 0.696618 11.4759 0.711035 11.393 0.742931C11.3101 0.774827 11.2347 0.823501 11.1718 0.885851C11.109 0.9482 11.0599 1.02286 11.0277 1.10506C10.9955 1.18727 10.981 1.27522 10.985 1.3633C10.989 1.45139 11.0115 1.53768 11.051 1.61667C11.0905 1.69566 11.1462 1.76563 11.2145 1.8221L15.8153 6.38836H0.608036C0.443872 6.397 0.289304 6.46773 0.176181 6.58598C0.0630584 6.70423 0 6.86099 0 7.02396C0 7.18693 0.0630584 7.34369 0.176181 7.46194C0.289304 7.58019 0.443872 7.65092 0.608036 7.65955H15.8153L11.2073 12.2205C11.0913 12.3409 11.0266 12.5009 11.0266 12.6674C11.0266 12.8339 11.0913 12.994 11.2073 13.1144C11.2665 13.1732 11.3367 13.2199 11.4141 13.2517C11.4915 13.2836 11.5744 13.3 11.6582 13.3C11.742 13.3 11.8249 13.2836 11.9023 13.2517C11.9797 13.2199 12.0499 13.1732 12.1091 13.1144L17.8082 7.46467C17.8688 7.40679 17.9171 7.33737 17.9501 7.26057C17.983 7.18377 18 7.10116 18 7.0177C18 6.93424 17.983 6.85163 17.9501 6.77483C17.9171 6.69803 17.8688 6.62861 17.8082 6.57073L12.1163 0.928154Z"
+        fill={color}
+      />
+    </SvgStyled>
+  )
+}

app/src/components/common/layout/header/index.tsx

@@ -4,17 +4,22 @@ import { matchPath } from 'react-router-dom'
 import ReactTooltip from 'react-tooltip'
 import styled, { css } from 'styled-components'
 
-import { Network } from '../..'
 import { Logo, STANDARD_DECIMALS } from '../../../../common/constants'
 import { useConnectedWeb3Context } from '../../../../contexts'
 import { networkIds } from '../../../../util/networks'
 import { bigNumberToString } from '../../../../util/tools'
 import { ExchangeType } from '../../../../util/types'
 import { Button, ButtonCircle, ButtonRound } from '../../../button'
 import { ButtonType } from '../../../button/button_styling_types'
-import { ModalConnectWalletWrapper, ModalDepositWithdrawWrapper, ModalYourConnectionWrapper } from '../../../modal'
+import {
+  ModalConnectWalletWrapper,
+  ModalDepositWithdrawWrapper,
+  ModalLockYoTokens,
+  ModalYourConnectionWrapper,
+} from '../../../modal'
 import { Dropdown, DropdownItemProps, DropdownPosition } from '../../form/dropdown'
 import { IconAdd, IconClose, IconOmen } from '../../icons'
+import { Network } from '../../network'
 
 export const HeaderWrapper = styled.div`
   align-items: center;
@@ -183,13 +188,15 @@ const OmenIconWrapper = styled.div`
 
 const HeaderContainer: React.FC = (props: any) => {
   const context = useConnectedWeb3Context()
+
   const { relay, toggleRelay } = context
   const { account, active, connectorName, error, networkId } = context.rawWeb3Context
 
   const { history, ...restProps } = props
   const [isConnectWalletModalOpen, setConnectWalletModalState] = useState(false)
   const [isYourConnectionModalOpen, setYourConnectionModalState] = useState(false)
   const [isDepositWithdrawModalOpen, setDepositWithdrawModalState] = useState(false)
+  const [isModalLockTokensOpen, setModalLockTokensState] = useState<boolean>(false)
   const [depositWithdrawType, setDepositWithdrawType] = useState<ExchangeType>(ExchangeType.deposit)
   const [marketPage, setMarketPage] = useState(true)
 
@@ -316,9 +323,8 @@ const HeaderContainer: React.FC = (props: any) => {
               placeholder={networkPlacholder}
             />
           )}
-
           {account && (
-            <HeaderButton style={{ display: 'none' }}>
+            <HeaderButton onClick={() => setModalLockTokensState(!isModalLockTokensOpen)}>
               {relay
                 ? `${bigNumberToString(xOmenBalance, STANDARD_DECIMALS, 0)}`
                 : `${bigNumberToString(omenBalance, STANDARD_DECIMALS, 0)}`}
@@ -361,6 +367,12 @@ const HeaderContainer: React.FC = (props: any) => {
             </HeaderButton>
           )}
         </ContentsRight>
+        <ModalLockYoTokens
+          context={context}
+          isOpen={isModalLockTokensOpen}
+          onClose={() => setModalLockTokensState(false)}
+          setIsModalLockTokensOpen={setModalLockTokensState}
+        />
         <ModalYourConnectionWrapper
           arrayOfClaimableBalances={arrayOfClaimableTokenBalances}
           changeWallet={() => {

app/src/components/main/index.tsx

@@ -9,9 +9,11 @@ import { MarketWizardCreatorContainer } from '../../pages/market_sections/market
 import { MainScroll, MainWrapper, WrongNetworkMessage } from '../common'
 import { Footer } from '../common/layout/footer'
 import { Header } from '../common/layout/header'
+import { ModalAirdropWrapper } from '../modal'
 import SettingsViewContainer from '../settings/settings_view'
 
 import { MarketRoutes } from './routes/market_routes'
+
 const RedirectToHome = () => <Redirect to="/" />
 
 export const Main: React.FC = () => {
@@ -22,6 +24,7 @@ export const Main: React.FC = () => {
       <Router>
         <MainWrapper>
           <Header />
+          <ModalAirdropWrapper />
           <Helmet>
             <title>{DOCUMENT_TITLE}</title>
           </Helmet>

app/src/components/market/common_sections/tables/new_value/img/ArrowIcon.tsx

@@ -1,7 +1,13 @@
 import React from 'react'
-
-export const ArrowIcon: React.FC = () => (
-  <svg fill="none" height="8" viewBox="0 0 11 8" width="11" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.01 3H0V5H7.01V8L11 4L7.01 0V3Z" />
-  </svg>
-)
+interface Props {
+  color?: string
+  style?: any
+}
+export const ArrowIcon = (props: Props) => {
+  const { color = 'none' } = props
+  return (
+    <svg fill={color} height="8" style={props.style} viewBox="0 0 11 8" width="11" xmlns="http://www.w3.org/2000/svg">
+      <path d="M7.01 3H0V5H7.01V8L11 4L7.01 0V3Z" />
+    </svg>
+  )
+}

app/src/components/modal/index.ts

@@ -3,3 +3,5 @@ export { ModalConnectWalletWrapper } from '../modal/modal_connect_wallet'
 export { ModalYourConnectionWrapper } from './modal_your_connection'
 export { ModalDepositWithdrawWrapper } from './modal_deposit_withdraw'
 export { ModalTransactionWrapper } from './modal_transaction'
+export { ModalAirdropWrapper } from './modal_airdrop'
+export { ModalLockYoTokens } from './modal_lock_yo_tokens'

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

@@ -0,0 +1,144 @@
+import { BigNumber } from 'ethers/utils'
+import React, { HTMLAttributes } from 'react'
+import styled, { withTheme } from 'styled-components'
+
+import { STANDARD_DECIMALS } from '../../../common/constants'
+import { useConnectedWeb3Context } from '../../../contexts'
+import { bigNumberToString } from '../../../util/tools'
+import { Button } from '../../button'
+import { ButtonType } from '../../button/button_styling_types'
+import { IconOmen } from '../../common/icons'
+import { BalanceSection, ModalCard } from '../common_styled'
+
+const TopSection = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  width: 100%;
+  border-bottom: ${props => props.theme.borders.borderLineDisabled};
+`
+
+const TopSectionLeft = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`
+
+const TopSectionDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
+  margin-left: 16px;
+`
+
+const TopSectionHeading = styled.div`
+  color: ${props => props.theme.colors.textColorDark};
+  font-weight: ${props => props.theme.textfield.fontWeight};
+`
+
+interface Subheading {
+  green: boolean
+}
+
+const TopSectionSubHeading = styled.div<Subheading>`
+  color: ${props => (props.green ? props.theme.colors.green : props.theme.colors.textColorLighter)};
+  font-weight: ${props => props.theme.textfield.fontWeight};
+`
+
+const BottomSection = styled(BalanceSection as any)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+`
+
+const BottomSectionTextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`
+
+const BottomSectionHeading = styled.div`
+  color: ${props => props.theme.colors.textColorDark};
+  font-weight: ${props => props.theme.textfield.fontWeight};
+`
+
+const BottomSectionSubheading = styled.div`
+  color: ${props => props.theme.colors.textColorLighter};
+  font-size: ${props => props.theme.fonts.defaultSize};
+`
+
+const BottomSectionDescription = styled.div`
+  color: ${props => props.theme.colors.textColorLighter};
+`
+
+const AirdropButton = styled(Button)`
+  width: 75px;
+`
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  theme: any
+  displayButtons?: boolean
+  displayAmount: BigNumber
+  claim?: (account: string, amount: BigNumber) => Promise<void>
+  onCheckAddress?: () => void
+}
+
+const AirdropCard = (props: Props) => {
+  const { claim, displayAmount, displayButtons = true, onCheckAddress } = props
+
+  const { account } = useConnectedWeb3Context()
+
+  const submitClaim = () => {
+    if (claim && account && displayAmount) {
+      claim(account, displayAmount)
+    }
+  }
+
+  const claimIsDisabled = !displayAmount || displayAmount.isZero()
+
+  return (
+    <>
+      <ModalCard>
+        <TopSection>
+          <TopSectionLeft>
+            <IconOmen id="airdrop" size={38} />
+            <TopSectionDetails>
+              <TopSectionHeading>Claimable Amount</TopSectionHeading>
+              <TopSectionSubHeading green={!claimIsDisabled}>
+                {bigNumberToString(displayAmount, STANDARD_DECIMALS)} OMN
+              </TopSectionSubHeading>
+            </TopSectionDetails>
+          </TopSectionLeft>
+          {displayButtons && (
+            <AirdropButton buttonType={ButtonType.primary} disabled={claimIsDisabled} onClick={submitClaim}>
+              Claim
+            </AirdropButton>
+          )}
+        </TopSection>
+        <BottomSection>
+          <BottomSectionTextWrapper>
+            {displayButtons ? (
+              <BottomSectionTextWrapper>
+                <BottomSectionHeading>Claim OMN token</BottomSectionHeading>
+                <BottomSectionSubheading>check address for claimable OMN</BottomSectionSubheading>
+              </BottomSectionTextWrapper>
+            ) : (
+              <BottomSectionTextWrapper>
+                <BottomSectionDescription>
+                  Enter an address to trigger a OMN claim. If the address has any claimable OMN it will be sent to them
+                  on submission.
+                </BottomSectionDescription>
+              </BottomSectionTextWrapper>
+            )}
+          </BottomSectionTextWrapper>
+          {displayButtons && <AirdropButton onClick={onCheckAddress}>Check</AirdropButton>}
+        </BottomSection>
+      </ModalCard>
+    </>
+  )
+}
+
+export const AirdropCardWrapper = withTheme(AirdropCard)