Skip to content

Commit

Permalink
Merge pull request #207 from HaloDAO/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
geonellov authored May 16, 2022
2 parents d78f658 + 635ee09 commit ebacab6
Show file tree
Hide file tree
Showing 23 changed files with 2,787 additions and 1,062 deletions.
2 changes: 2 additions & 0 deletions .github/workflows/deploy_dev.yml
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,8 @@ jobs:
REACT_APP_ETHGAS_API_HOST: ${{ secrets.REACT_APP_ETHGAS_API_HOST }}
REACT_APP_IS_CONSOLE_LOG_ENABLED: ${{ secrets.REACT_APP_IS_CONSOLE_LOG_ENABLED }}
SKIP_PREFLIGHT_CHECK: ${{ secrets.SKIP_PREFLIGHT_CHECK }}
REACT_APP_HALODAO_EXCHANGE_SUBGRAPH_STUDIO_URL: ${{ secrets.REACT_APP_HALODAO_EXCHANGE_SUBGRAPH_STUDIO_URL }}
REACT_APP_HALODAO_EXCHANGE_SUBGRAPH_HOSTED_URL: ${{ secrets.REACT_APP_HALODAO_EXCHANGE_SUBGRAPH_HOSTED_URL }}
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
Expand Down
2 changes: 2 additions & 0 deletions .github/workflows/deploy_preview.yml
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ jobs:
REACT_APP_ETHGAS_API_HOST: ${{ secrets.REACT_APP_ETHGAS_API_HOST }}
REACT_APP_IS_CONSOLE_LOG_ENABLED: ${{ secrets.REACT_APP_IS_CONSOLE_LOG_ENABLED }}
SKIP_PREFLIGHT_CHECK: ${{ secrets.SKIP_PREFLIGHT_CHECK }}
REACT_APP_HALODAO_EXCHANGE_SUBGRAPH_STUDIO_URL: ${{ secrets.REACT_APP_HALODAO_EXCHANGE_SUBGRAPH_STUDIO_URL }}
REACT_APP_HALODAO_EXCHANGE_SUBGRAPH_HOSTED_URL: ${{ secrets.REACT_APP_HALODAO_EXCHANGE_SUBGRAPH_HOSTED_URL }}
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
Expand Down
2 changes: 1 addition & 1 deletion public/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
"poolSummaryStakeable": "My Stakeable Value",
"poolSummaryStaked": "My Staked Value",
"poolSummaryHaloEarned": "Unclaimed xRNBW Earned",
"totalPoolValue": "Total Pool Value",
"totalValueLocked": "Total Value Locked",
"tokenCardRewardDescription": "Every xRNBW you earn is a vesting token that you can use to claim RNBW, our governance token, from the Rainbow Pool. Press Harvest to claim your pending xRNBW from the Farm and go to the Vesting Tab to manage your rewards.",
"valueStaked": "Value Staked",
"earned": "Earned",
Expand Down
470 changes: 470 additions & 0 deletions src/assets/svg/epochCharacter.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/components/Card/GradientCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from 'react'

const GradientCard = ({ children }: any) => {
return <div className="w-full h-auto rounded-md md:rounded-xl text-white p-3 bg-epochReleaseCard">{children}</div>
}

export default GradientCard
131 changes: 102 additions & 29 deletions src/components/EmptyState/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,42 @@ import { injected, portis } from '../../connectors'
import Row from '../Row'
import { RowBetween } from 'components/Row'
import styled from 'styled-components'
import { ExternalLink } from '../../theme'
import { Text } from 'rebass'

import { SUPPORTED_WALLETS } from '../../constants'

import Option from './Option'
import PendingView from '../WalletModal/PendingView'
import Modal from '../Modal'
import { ExternalLink } from '../../theme'

const ContentWrapper = styled.div`
padding: 2rem;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
${({ theme }) => theme.mediaWidth.upToMedium`padding: 1rem`};
`

const UpperSection = styled.div`
position: relative;
width: 100%;
h5 {
margin: 0;
margin-bottom: 0.5rem;
font-size: 1rem;
font-weight: 400;
}
h5:last-child {
margin-bottom: 0;
}
h4 {
margin-top: 0;
font-weight: 500;
}
`

const WalletRow = styled(Row)`
${({ theme }) => theme.mediaWidth.upToSmall`
Expand Down Expand Up @@ -83,11 +113,25 @@ const WALLET_VIEWS = {
PENDING: 'pending'
}

const EmptyState = ({ header, subHeader }: { header?: string; subHeader?: string }) => {
const EmptyState = ({
header,
subHeader,
loading,
walletLoading
}: {
header?: string
subHeader?: string
loading: boolean
walletLoading: (value: boolean) => void
}) => {
const { connector, activate } = useWeb3React()
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT) //eslint-disable-line
const [pendingWallet, setPendingWallet] = useState<AbstractConnector | undefined>()
const [pendingError, setPendingError] = useState<boolean>()
const [pendingError, setPendingError] = useState<boolean>() //eslint-disable-line

const handleLoading = (value: boolean) => {
walletLoading(value)
}

const tryActivation = async (connector: AbstractConnector | undefined) => {
let name = ''
Expand All @@ -105,23 +149,25 @@ const EmptyState = ({ header, subHeader }: { header?: string; subHeader?: string
})
setPendingWallet(connector) // set wallet for pending view
setWalletView(WALLET_VIEWS.PENDING)
console.log(walletView)
console.log(pendingWallet)

// if the connector is walletconnect and the user has already tried to connect, manually reset the connector
if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) {
connector.walletConnectProvider = undefined
}

connector &&
activate(connector, undefined, true).catch(error => {
if (error instanceof UnsupportedChainIdError) {
activate(connector) // a little janky...can't use setError because the connector isn't set
} else {
setPendingError(true)
console.log(pendingError)
}
})
const walletFunction = async () => {
connector &&
(await activate(connector, undefined, true).catch(error => {
if (error instanceof UnsupportedChainIdError) {
activate(connector) // a little janky...can't use setError because the connector isn't set
console.log('aspdoaspok')
} else {
setPendingError(true)
}
}))
}
walletFunction().then(() => {
handleLoading(false)
})
}
// get wallets user can switch too, depending on device/browser\
const getOptions = () => {
Expand All @@ -141,6 +187,9 @@ const EmptyState = ({ header, subHeader }: { header?: string; subHeader?: string
return (
<Option
onClick={() => {
if (option.name === 'Fortmatic' || option.name === 'Portis') {
handleLoading(true)
}
option.connector !== connector && !option.href && tryActivation(option.connector)
}}
id={`connect-${key}`}
Expand Down Expand Up @@ -181,6 +230,9 @@ const EmptyState = ({ header, subHeader }: { header?: string; subHeader?: string
<Option
id={`connect-${key}`}
onClick={() => {
if (option.name === 'Fortmatic' || option.name === 'Portis') {
handleLoading(true)
}
option.connector === connector
? setWalletView(WALLET_VIEWS.ACCOUNT)
: !option.href && tryActivation(option.connector)
Expand All @@ -199,19 +251,40 @@ const EmptyState = ({ header, subHeader }: { header?: string; subHeader?: string

if (!account && !error) {
return (
<MainRow>
<TitleRow>
<TitleText>{header}</TitleText>
</TitleRow>
<SubTitleRow>
<SubTitleText>{subHeader}</SubTitleText>
</SubTitleRow>
<WalletRow>{getOptions()}</WalletRow>
<Blurb style={{ lineHeight: '130%' }}>
<span>New to Ethereum? &nbsp;</span>{' '}
<ExternalLink href="https://ethereum.org/wallets/">Learn more about wallets</ExternalLink>
</Blurb>
</MainRow>
<>
<Modal
isOpen={loading}
onDismiss={() => {
walletLoading(false)
}}
minHeight={false}
maxHeight={90}
>
<UpperSection>
<ContentWrapper>
<PendingView
connector={pendingWallet}
error={false}
setPendingError={setPendingError}
tryActivation={tryActivation}
/>
</ContentWrapper>
</UpperSection>
</Modal>
<MainRow>
<TitleRow>
<TitleText>{header}</TitleText>
</TitleRow>
<SubTitleRow>
<SubTitleText>{subHeader}</SubTitleText>
</SubTitleRow>
<WalletRow>{getOptions()}</WalletRow>
<Blurb style={{ lineHeight: '130%' }}>
<span>New to Ethereum? &nbsp;</span>{' '}
<ExternalLink href="https://ethereum.org/wallets/">Learn more about wallets</ExternalLink>
</Blurb>
</MainRow>
</>
)
} else {
return <></>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Farm/FarmPoolCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -949,8 +949,8 @@ export default function FarmPoolCard({
)}
</div>
</StyledRowFixed>
<StyledRowFixed width="18%">
<LabelText className="first">{t('totalPoolValue')}:</LabelText>
<StyledRowFixed width="20%">
<LabelText className="first">{t('totalValueLocked')}:</LabelText>
<StyledTextForValue>{formatNumber(poolLiquidity, NumberFormat.usd)}</StyledTextForValue>
</StyledRowFixed>
<StyledRowFixed width="13%">
Expand Down
4 changes: 2 additions & 2 deletions src/components/Farm/FarmPoolTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ const FarmPoolTable = ({ poolsInfo, v0PoolsInfo, v1PoolsInfo, tokenPrice, select
<RowFixed width="16%">
<TYPE.thHeader style={{ justifySelf: 'flex-start' }}>{t('apr')}</TYPE.thHeader>
</RowFixed>
<RowFixed width="18%">
<TYPE.thHeader style={{ justifySelf: 'flex-start' }}>{t('totalPoolValue')}</TYPE.thHeader>
<RowFixed width="20%">
<TYPE.thHeader style={{ justifySelf: 'flex-start' }}>{t('totalValueLocked')}</TYPE.thHeader>
</RowFixed>
<RowFixed width="13%">
<TYPE.thHeader style={{ justifySelf: 'flex-start' }}>{t('stakeable')}</TYPE.thHeader>
Expand Down
10 changes: 7 additions & 3 deletions src/components/Farm/FarmSummary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,23 @@ import useFarmSummary from 'halo-hooks/useFarmSummary'
import { PoolInfo } from 'halo-hooks/usePoolInfo'
import { TokenPrice } from 'halo-hooks/useTokenPrice'
import StakeCard from '../Tailwind/Cards/StakeCard'
import { useActiveWeb3React } from '../../hooks'
import { ChainId } from '@halodao/sdk'

interface FarmSummaryProps {
poolsInfo: PoolInfo[]
tokenPrice: TokenPrice
farmTVL: string
}

const FarmSummary = ({ poolsInfo, tokenPrice }: FarmSummaryProps) => {
const FarmSummary = ({ poolsInfo, tokenPrice, farmTVL }: FarmSummaryProps) => {
const summary = useFarmSummary(poolsInfo, tokenPrice)
const { t } = useTranslation()
const { chainId } = useActiveWeb3React()

return (
<div className="w-full flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2 pb-2 justify-end">
{/* <StakeCard title={t('totalPoolValue')} value="5000.03" /> */}
<div className="w-full flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2 pb-2">
<StakeCard title={t('totalValueLocked')} value={farmTVL} displayMainnetIndicator={chainId !== ChainId.MAINNET} />
<StakeCard title={t('poolSummaryHaloEarned')} value={summary.haloEarned} />
<StakeCard title={t('poolSummaryStaked')} value={summary.stakedValue} />
<StakeCard title={t('poolSummaryStakeable')} value={summary.stakeableValue} />
Expand Down
3 changes: 2 additions & 1 deletion src/components/NumericalInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styled from 'styled-components'
import { escapeRegExp } from '../../utils'

const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
width: 100%;
color: ${({ error, theme }) => (error ? theme.red1 : theme.text1)};
position: relative;
font-weight: 500;
Expand All @@ -16,7 +17,7 @@ const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: s
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0px;
padding: 0;
-webkit-appearance: textfield;
::-webkit-search-decoration {
Expand Down
80 changes: 80 additions & 0 deletions src/components/Tailwind/Cards/EpochReleaseTimerCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React from 'react'
import EpochCharacter from '../../../assets/svg/epochCharacter.svg'
import GradientCard from './GradientCard'
import { CurrentEpoch } from '../../../halo-hooks/useEpochCountdown'
import { useActiveWeb3React } from '../../../hooks'
import { ChainId } from '@halodao/sdk'

interface TimeObject {
event: boolean
content: Record<string, string>
countdown?: CurrentEpoch
}

const EpochReleaseTimerCard = ({ event, content, countdown }: TimeObject) => {
const { chainId } = useActiveWeb3React()
const ConvertToString = (x: any) => {
return x.toString()
}
const IfDoubleDigit = (str: string) => {
const strLength = str.length
return strLength === 1
}
return (
<>
<GradientCard>
<div className="flex justify-center flex-wrap">
<div className="flex flex-col justify-around">
{event ? (
<>
<div className="font-semibold text-base leading-8">{content.title}</div>
<div className="w-full h-auto flex flex-row justify-around gap-x-2.5">
<div className="flex flex-col w-20">
<p className="font-bold text-xs text-center">Days</p>
<h2 className="font-normal text-center text-6xl text-primary-yellow font-fredoka">
{IfDoubleDigit(ConvertToString(countdown?.days)) ? `0${countdown?.days}` : countdown?.days}
</h2>
</div>
<div className="flex flex-col w-20">
<p className="font-bold text-xs text-center">Hours</p>
<h2 className="font-normal text-center text-6xl text-primary-yellow font-fredoka">
{' '}
{IfDoubleDigit(ConvertToString(countdown?.hours)) ? `0${countdown?.hours}` : countdown?.hours}
</h2>
</div>
<div className="flex flex-col w-20">
<p className="font-bold text-xs text-center">Minutes</p>
<h2 className="font-normal text-center text-6xl text-primary-yellow font-fredoka">
{IfDoubleDigit(ConvertToString(countdown?.minutes))
? `0${countdown?.minutes}`
: countdown?.minutes}
</h2>
</div>
</div>
</>
) : (
<>
<div className="font-semibold text-base leading-8">{content.title}</div>
<div className="font-fredoka font-normal text-4xl text-primary-yellow">{content?.liquidity}</div>
</>
)}
</div>
<img className="h-155.61 hidden sm:block" alt="" src={EpochCharacter} />
</div>
<div className="flex flex-col md:flex-row text-center md:text-left mx-4 space-y-2 md:space-y-0 mt-4 justify-between">
<div className="flex flex-col">
<p className="text-12px bold ">DEPOSIT IN POOL </p>
<h4 className="text-lg">{content.deposit}</h4>
</div>
{chainId !== ChainId.MAINNET && (
<div className="flex justify-center md:justify-end items-end py-1">
<span className="text-gray-300 bottom-0 text-12px">(Ethereum Mainnet)</span>
</div>
)}
</div>
</GradientCard>
</>
)
}

export default EpochReleaseTimerCard
7 changes: 7 additions & 0 deletions src/components/Tailwind/Cards/GradientCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from 'react'

const GradientCard = ({ children }: any) => {
return <div className="w-full h-auto rounded-md md:rounded-xl text-white p-3 bg-epochReleaseCard">{children}</div>
}

export default GradientCard
4 changes: 3 additions & 1 deletion src/components/Tailwind/Cards/StakeCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,17 @@ import React from 'react'
interface StakeCardProps {
title: string
value: string
displayMainnetIndicator?: boolean
}

const StakeCard = ({ title, value }: StakeCardProps) => {
const StakeCard = ({ title, value, displayMainnetIndicator }: StakeCardProps) => {
return (
<div>
<div className="w-auto md:w-44 h-20 md:h-28 grid grid-cols-1 content-between border-2 border-link-alternate rounded-card bg-stakeCard">
<div className="md:bg-link-alternate font-extrabold tracking-widest uppercase text-xl md:text-9px text-link-alternate md:text-white md:text-center pl-3 md:pl-0 py-1 rounded-t-md">
{title}
</div>
{displayMainnetIndicator && <div className="text-xs text-gray-500 px-3">Ethereum Mainnet</div>}
<div className="text-base text-24px px-3 pb-2">{value}</div>
</div>
</div>
Expand Down
Loading

0 comments on commit ebacab6

Please sign in to comment.