Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature/guild #2167

Merged
merged 24 commits into from
Aug 11, 2021
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
c9786f3
Guild Token Lock (#1908)
Mi-Lan Jul 1, 2021
01419ea
feature/1861 (#1907)
hexyls Jul 3, 2021
20ffd3a
feature: add airdrop card to guild modal
hexyls Jul 20, 2021
4bd1cc3
fix: style changes, testing airdrop
hexyls Jul 21, 2021
f35e307
style: Reduce margin from 32px to 24px for diver and button group
Jul 21, 2021
c1781d3
fix: refetch claimable balance
hexyls Jul 22, 2021
e16145c
Merge branch 'feature/airdrop-guild-modal' of github.com:protofire/om…
hexyls Jul 22, 2021
9338323
fix: reset check address claim amount
hexyls Jul 22, 2021
a85e345
fix: display omen account on tight integration
hexyls Jul 22, 2021
76d783e
fix: capitalize wallet balance
hexyls Jul 22, 2021
f087c0b
feature: add airdrop for dxd holders
hexyls Jul 23, 2021
2b7959a
Add airdrop card to guild modal (#2112)
hexyls Jul 26, 2021
6ce1eae
Merge branch 'feature/guild' into fix/2114
hexyls Jul 28, 2021
80cbe2c
Merge branch 'feature/guild' into feature/2093
hexyls Jul 28, 2021
b0ffd3c
feature: redeploy both airdrops
hexyls Jul 28, 2021
464c75d
Combined (relay+eoa) OMN balance in header (#2139)
hexyls Aug 9, 2021
1539a8c
Merge pull request #2121 from protofire/fix/2114
hexyls Aug 10, 2021
39dce76
Merge branch 'feature/guild' into feature/2093
hexyls Aug 10, 2021
38f40d1
fix: fetch claims from github
hexyls Aug 10, 2021
f395fee
Merge branch 'feature/2093' of github.com:protofire/omen-exchange int…
hexyls Aug 10, 2021
2ecb1fb
fix: add claim recipient field
hexyls Aug 10, 2021
e2af478
Merge pull request #2122 from protofire/feature/2093
hexyls Aug 10, 2021
91947dc
Merge branch 'master' into feature/guild
hexyls Aug 11, 2021
a7b0679
fix: attempt to resolve merge issues, move code to cpk pipes
hexyls Aug 11, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add airdrop card to guild modal (#2112)
* feature: add airdrop card to guild modal

* fix: style changes, testing airdrop

* style: Reduce margin from 32px to 24px for diver and button group

* fix: refetch claimable balance

* fix: reset check address claim amount

* fix: generalized onClose for guild modal

* fix: update rinkeby airdrop

Co-authored-by: Thomas Pulber <thomaspulber@Thomass-Mac-Pro.fritz.box>
  • Loading branch information
hexyls and Thomas Pulber authored Jul 26, 2021
commit 2b7959a94c135091f6d11aec0d3c091ee16ac6f8
32 changes: 9 additions & 23 deletions app/src/components/modal/modal_airdrop/airdrop_card.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { BigNumber } from 'ethers/utils'
import React, { HTMLAttributes, useEffect, useState } from 'react'
import React, { HTMLAttributes } from 'react'
import styled, { withTheme } from 'styled-components'

import { STANDARD_DECIMALS } from '../../../common/constants'
import { useAirdropService, useConnectedWeb3Context } from '../../../hooks'
import { useConnectedWeb3Context } from '../../../hooks'
import { formatBigNumber } from '../../../util/tools'
import { Button } from '../../button'
import { ButtonType } from '../../button/button_styling_types'
Expand All @@ -14,7 +14,7 @@ const TopSection = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
padding: 20px;
width: 100%;
border-bottom: ${props => props.theme.borders.borderLineDisabled};
`
Expand Down Expand Up @@ -81,37 +81,23 @@ const AirdropButton = styled(Button)`
interface Props extends HTMLAttributes<HTMLDivElement> {
theme: any
displayButtons?: boolean
displayAmount?: BigNumber
displayAmount: BigNumber
claim?: (account: string, amount: BigNumber) => Promise<void>
onCheckAddress?: () => void
}

const AirdropCard = (props: Props) => {
const { claim, displayAmount, displayButtons = true, onCheckAddress } = props

const { account, library, networkId, relay } = useConnectedWeb3Context()

const airdrop = useAirdropService()

const [amount, setAmount] = useState(new BigNumber('0'))

useEffect(() => {
const getClaimAmount = async () => {
const newAmount = await airdrop.getClaimAmount(account)
setAmount(newAmount)
}
if (account && !displayAmount) {
getClaimAmount()
}
}, [airdrop, account, library, networkId, relay, displayAmount])
const { account } = useConnectedWeb3Context()

const submitClaim = () => {
if (claim && account) {
claim(account, displayAmount || amount)
if (claim && account && displayAmount) {
claim(account, displayAmount)
}
}

const claimIsDisabled = displayAmount ? displayAmount.isZero() : amount.isZero()
const claimIsDisabled = !displayAmount || displayAmount.isZero()

return (
<>
Expand All @@ -122,7 +108,7 @@ const AirdropCard = (props: Props) => {
<TopSectionDetails>
<TopSectionHeading>Claimable Amount</TopSectionHeading>
<TopSectionSubHeading green={!claimIsDisabled}>
{formatBigNumber(displayAmount || amount, STANDARD_DECIMALS)} OMN
{formatBigNumber(displayAmount, STANDARD_DECIMALS)} OMN
</TopSectionSubHeading>
</TopSectionDetails>
</TopSectionLeft>
Expand Down
8 changes: 5 additions & 3 deletions app/src/components/modal/modal_airdrop/check_address.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
export const ModalCheckAddress = (props: Props) => {
const { claim, isOpen, onBack, onClose, theme } = props

const airdrop = useAirdropService()
const { airdrop } = useAirdropService()

const [address, setAddress] = useState('')
const [amount, setAmount] = useState(new BigNumber('0'))
Expand All @@ -72,9 +72,11 @@ export const ModalCheckAddress = (props: Props) => {
setLoading(false)
}

const submitClaim = () => {
const submitClaim = async () => {
if (claim && address) {
claim(address, amount)
await claim(address, amount)
setAddress('')
setAmount(new BigNumber('0'))
}
}

Expand Down
28 changes: 6 additions & 22 deletions app/src/components/modal/modal_airdrop/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { BigNumber } from 'ethers/utils'
import React, { HTMLAttributes, useEffect, useState } from 'react'
import React, { HTMLAttributes, useState } from 'react'
import Modal from 'react-modal'
import { withTheme } from 'styled-components'

Expand All @@ -22,11 +22,10 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
export const ModalAirdrop = (props: Props) => {
const { theme } = props

const { account, balances, cpk, networkId, relay } = useConnectedWeb3Context()
const { balances, cpk } = useConnectedWeb3Context()

const initialIsOpenState = localStorage.getItem('airdrop')
const [isOpen, setIsOpen] = useState(!initialIsOpenState)
const [amount, setAmount] = useState(new BigNumber('0'))
const [checkAddress, setCheckAddress] = useState(false)
const [isTransactionModalOpen, setIsTransactionModalOpen] = useState<boolean>(false)
const [txHash, setTxHash] = useState('')
Expand All @@ -35,23 +34,7 @@ export const ModalAirdrop = (props: Props) => {

Modal.setAppElement('#root')

const airdrop = useAirdropService()

useEffect(() => {
let active = true
const getClaimAmount = async () => {
const newAmount = await airdrop.getClaimAmount(account)
if (active) {
setAmount(newAmount)
}
}
if (account) {
getClaimAmount()
}
return () => {
active = false
}
}, [airdrop, airdrop.relay, account, relay, networkId])
const { claimAmount, fetchClaimAmount } = useAirdropService()

const onClose = () => {
localStorage.setItem('airdrop', 'displayed')
Expand All @@ -70,6 +53,7 @@ export const ModalAirdrop = (props: Props) => {
setTxState(TransactionStep.waitingConfirmation)
setIsTransactionModalOpen(true)
await cpk.claimAirdrop({ account, setTxHash, setTxState })
await fetchClaimAmount()
await balances.fetchBalances()
} catch (e) {
setIsTransactionModalOpen(false)
Expand All @@ -79,7 +63,7 @@ export const ModalAirdrop = (props: Props) => {
return (
<>
<Modal
isOpen={isOpen && !amount.isZero() && !isTransactionModalOpen && !checkAddress}
isOpen={isOpen && !claimAmount.isZero() && !isTransactionModalOpen && !checkAddress}
onRequestClose={onClose}
shouldCloseOnOverlayClick={true}
style={theme.fluidHeightModal}
Expand All @@ -90,7 +74,7 @@ export const ModalAirdrop = (props: Props) => {
<IconClose hoverEffect={true} onClick={onClose} />
</ModalNavigation>
<Graphic />
<AirdropCardWrapper claim={claim} displayAmount={amount} onCheckAddress={() => setCheckAddress(true)} />
<AirdropCardWrapper claim={claim} displayAmount={claimAmount} onCheckAddress={() => setCheckAddress(true)} />
</ContentWrapper>
</Modal>
<ModalTransactionWrapper
Expand Down
67 changes: 52 additions & 15 deletions app/src/components/modal/modal_lock_yo_tokens/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import ReactTooltip from 'react-tooltip'
import styled, { withTheme } from 'styled-components'

import { STANDARD_DECIMALS } from '../../../common/constants'
import { useAirdropService } from '../../../hooks'
import { ERC20Service, OmenGuildService } from '../../../services'
import { getToken, networkIds } from '../../../util/networks'
import { daysUntil, divBN, formatBigNumber, formatLockDate } from '../../../util/tools'
Expand All @@ -19,6 +20,8 @@ import { IconArrowBack, IconClose, IconOmen } from '../../common/icons'
import { IconAlertInverted } from '../../common/icons/IconAlertInverted'
import { ArrowIcon } from '../../market/common/new_value/img/ArrowIcon'
import { ContentWrapper, ModalNavigation } from '../common_styled'
import { AirdropCardWrapper } from '../modal_airdrop/airdrop_card'
import { ModalCheckAddressWrapper } from '../modal_airdrop/check_address'
import { ModalTransactionWrapper } from '../modal_transaction'

interface Props extends HTMLAttributes<HTMLDivElement> {
Expand Down Expand Up @@ -73,7 +76,7 @@ const ButtonSection = styled.div`
justify-content: space-between;
width: 100%;
column-gap: 20px;
margin-top: 32px;
margin-top: 24px;
`
const ButtonsLockUnlock = styled(Button)`
flex: 1;
Expand All @@ -91,16 +94,17 @@ const ConditionalWrapper = styled.div<{ hideWrapper: boolean }>`
`
const Divider = styled.div`
border-top: ${props => props.theme.borders.borderLineDisabled};
margin: 32px 0;
margin: 24px 0;
`
const PercentageText = styled.span<{ lightColor?: boolean }>`
${props => props.lightColor && `color:${props.theme.colors.textColorLighter}`};
`

const ModalLockTokens = (props: Props) => {
const { context, fetchBalances, isOpen, omenBalance, onClose, setIsModalLockTokensOpen, theme } = props
const { account, cpk, library: provider, networkId, relay } = context
const { context, fetchBalances, isOpen, omenBalance, setIsModalLockTokensOpen, theme } = props
const { account, balances, cpk, library: provider, networkId, relay } = context

const { claimAmount, fetchClaimAmount } = useAirdropService()
const omen = new OmenGuildService(provider, networkId)

const [isLockAmountOpen, setIsLockAmountOpen] = useState<boolean>(false)
Expand All @@ -117,6 +121,7 @@ const ModalLockTokens = (props: Props) => {
const [txNetId, setTxNetId] = useState()
const [omenAllowance, setOmenAllowance] = useState<BigNumber>(Zero)
const [allowanceState, setAllowanceState] = useState<ButtonStates>(ButtonStates.idle)
const [checkAddress, setCheckAddress] = useState(false)

const isApproveVisible =
(omenAllowance.isZero() && isLockAmountOpen) ||
Expand Down Expand Up @@ -241,9 +246,33 @@ const ModalLockTokens = (props: Props) => {
}
}

const claim = async (account: string, amount: BigNumber) => {
if (!cpk || !account) {
return
}

try {
setTransactionMessage(`Claim ${formatBigNumber(amount, STANDARD_DECIMALS)} OMN`)
setTxState(TransactionStep.waitingConfirmation)
setIsTransactionModalOpen(true)
await cpk.claimAirdrop({ account, setTxHash, setTxState })
await fetchClaimAmount()
await balances.fetchBalances()
} catch (e) {
setIsTransactionModalOpen(false)
}
}

const onClose = () => {
setIsTransactionModalOpen(false)
setCheckAddress(false)
setIsLockAmountOpen(false)
props.onClose()
}

return (
<>
<Modal isOpen={isOpen && !isTransactionModalOpen} style={theme.fluidHeightModal}>
<Modal isOpen={isOpen && !isTransactionModalOpen && !checkAddress} style={theme.fluidHeightModal}>
<ContentWrapper>
<ModalNavigation style={{ padding: '0', marginBottom: isLockAmountOpen ? '32px' : '24px' }}>
<NavLeft>
Expand All @@ -260,12 +289,7 @@ const ModalLockTokens = (props: Props) => {
)}
<HeaderText>{isLockAmountOpen ? 'Lock Omen Token' : 'Omen Guild Membership'}</HeaderText>
</NavLeft>
<IconClose
hoverEffect={true}
onClick={() => {
onClose()
}}
/>
<IconClose hoverEffect={true} onClick={onClose} />
</ModalNavigation>
<ModalMain>
<ConditionalWrapper hideWrapper={!isLockAmountOpen}>
Expand Down Expand Up @@ -394,6 +418,16 @@ const ModalLockTokens = (props: Props) => {
</ButtonsLockUnlock>
</ButtonSection>
</ContentWrapper>
{!isLockAmountOpen && (
<>
<Divider />
<AirdropCardWrapper
claim={claim}
displayAmount={claimAmount}
onCheckAddress={() => setCheckAddress(true)}
/>
</>
)}
</Modal>
<ModalTransactionWrapper
confirmations={0}
Expand All @@ -402,13 +436,16 @@ const ModalLockTokens = (props: Props) => {
isOpen={isTransactionModalOpen}
message={transactionMessage}
netId={txNetId}
onClose={() => {
setIsTransactionModalOpen(false)
onClose()
}}
onClose={onClose}
txHash={txHash}
txState={txState}
/>
<ModalCheckAddressWrapper
claim={claim}
isOpen={checkAddress && !isTransactionModalOpen}
onBack={() => setCheckAddress(false)}
onClose={onClose}
/>
</>
)
}
Expand Down
34 changes: 32 additions & 2 deletions app/src/hooks/useAirdropService.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,43 @@
import { BigNumber } from 'ethers/utils'
import { useEffect, useState } from 'react'

import { AirdropService } from '../services'

import { useConnectedWeb3Context } from './connectedWeb3'

export const useAirdropService = (): AirdropService => {
interface Status {
active: boolean
}

interface AirdropServiceParams {
airdrop: AirdropService
claimAmount: BigNumber
fetchClaimAmount: (status?: Status) => Promise<void>
}

export const useAirdropService = (): AirdropServiceParams => {
const { account, library: provider, networkId, relay } = useConnectedWeb3Context()

const [airdrop, setAirdrop] = useState<AirdropService>(new AirdropService(networkId, provider, account, relay))
const [claimAmount, setClaimAmount] = useState(new BigNumber('0'))

const fetchClaimAmount = async (status?: Status) => {
const newAmount = await airdrop.getClaimAmount(account)
if (!status || status.active) {
setClaimAmount(newAmount)
}
}

useEffect(() => {
const status = { active: true }
if (account) {
fetchClaimAmount(status)
}
return () => {
status.active = false
}
// eslint-disable-next-line
}, [airdrop, airdrop.relay, account, relay, networkId])

useEffect(() => {
if (account) {
Expand All @@ -16,5 +46,5 @@ export const useAirdropService = (): AirdropService => {
// eslint-disable-next-line
}, [networkId, account, relay])

return airdrop
return { airdrop, claimAmount, fetchClaimAmount }
}
Loading