utils#fromWei TypeScript Examples
The following examples show how to use
utils#fromWei.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: DpiStakeModal.tsx From index-ui with MIT License | 5 votes |
|
StakeModal: React.FC<StakeModalProps> = ({
isOpen,
onDismiss,
onStake,
}) => {
const [val, setVal] = useState('')
const { uniswapEthDpiLpBalance } = useBalances()
const fullBalance = useMemo(() => {
return getFullDisplayBalance(fromWei(uniswapEthDpiLpBalance), 0)
}, [uniswapEthDpiLpBalance])
const handleChange = useCallback(
(e: React.FormEvent<HTMLInputElement>) => {
setVal(e.currentTarget.value)
},
[setVal]
)
const handleSelectMax = useCallback(() => {
setVal(fullBalance)
}, [fullBalance, setVal])
const handleStakeClick = useCallback(() => {
onStake(val)
}, [onStake, val])
return (
<Modal isOpen={isOpen}>
<ModalTitle text='Stake' />
<ModalContent>
<TokenInput
value={val}
onSelectMax={handleSelectMax}
onChange={handleChange}
max={fullBalance}
symbol='Uniswap ETH/DPI LP Tokens'
/>
</ModalContent>
<ModalActions>
<Button onClick={onDismiss} text='Cancel' variant='secondary' />
</ModalActions>
</Modal>
)
}
Example #2
| Source File: GmiStakeModal.tsx From index-ui with MIT License | 5 votes |
|
StakeModal: React.FC<StakeModalProps> = ({
isOpen,
onDismiss,
onStake,
}) => {
const [val, setVal] = useState('')
const { gmiBalance } = useBalances()
const fullBalance = useMemo(() => {
return getFullDisplayBalance(fromWei(gmiBalance), 0)
}, [gmiBalance])
const handleChange = useCallback(
(e: React.FormEvent<HTMLInputElement>) => {
setVal(e.currentTarget.value)
},
[setVal]
)
const handleSelectMax = useCallback(() => {
setVal(fullBalance)
}, [fullBalance, setVal])
const handleStakeClick = useCallback(() => {
onStake(val)
}, [onStake, val])
return (
<Modal isOpen={isOpen}>
<ModalTitle text='Stake' />
<ModalContent>
<TokenInput
value={val}
onSelectMax={handleSelectMax}
onChange={handleChange}
max={fullBalance}
symbol='GMI Tokens'
/>
</ModalContent>
<ModalActions>
<Button onClick={onDismiss} text='Cancel' variant='secondary' />
<Button
disabled={!val || !Number(val)}
onClick={handleStakeClick}
text='Stake'
variant={!val || !Number(val) ? 'secondary' : 'default'}
/>
</ModalActions>
</Modal>
)
}
Example #3
| Source File: MviStakeModal.tsx From index-ui with MIT License | 5 votes |
|
MviStakeModal: React.FC<MviStakeModalProps> = ({
isOpen,
onDismiss,
onStake,
}) => {
const [val, setVal] = useState('')
const { uniswapEthMviLpBalance } = useBalances()
const fullBalance = useMemo(() => {
return getFullDisplayBalance(fromWei(uniswapEthMviLpBalance), 0)
}, [uniswapEthMviLpBalance])
const handleChange = useCallback(
(e: React.FormEvent<HTMLInputElement>) => {
setVal(e.currentTarget.value)
},
[setVal]
)
const handleSelectMax = useCallback(() => {
setVal(fullBalance)
}, [fullBalance, setVal])
const handleStakeClick = useCallback(() => {
onStake(val)
}, [onStake, val])
return (
<Modal isOpen={isOpen}>
<ModalTitle text='Stake' />
<ModalContent>
<TokenInput
value={val}
onSelectMax={handleSelectMax}
onChange={handleChange}
max={fullBalance}
symbol='Uniswap ETH/MVI LP Tokens'
/>
</ModalContent>
<ModalActions>
<Button onClick={onDismiss} text='Cancel' variant='secondary' />
<Button
disabled={!val || !Number(val)}
onClick={handleStakeClick}
text='Stake'
variant={!val || !Number(val) ? 'secondary' : 'default'}
/>
</ModalActions>
</Modal>
)
}
Example #4
| Source File: DpiFarm.tsx From index-ui with MIT License | 4 votes |
|
Stake: React.FC = () => {
const [stakeModalIsOpen, setStakeModalIsOpen] = useState(false)
const { stakedFarmTwoBalance: stakedBalance, unharvestedFarmTwoBalance } =
useBalances()
const { status } = useWallet()
const {
isApproved,
isApproving,
onApprove,
onStake,
onUnstakeAndHarvest,
onHarvest,
} = useFarmingTwo()
const { farmTwoApy } = usePrices()
const { isMobile } = useMediaQuery()
const handleDismissStakeModal = useCallback(() => {
setStakeModalIsOpen(false)
}, [setStakeModalIsOpen])
const handleOnStake = useCallback(
(amount: string) => {
onStake(amount)
handleDismissStakeModal()
},
[handleDismissStakeModal, onStake]
)
const handleStakeClick = useCallback(() => {
setStakeModalIsOpen(true)
}, [setStakeModalIsOpen])
const StakeButton = useMemo(() => {
if (status !== 'connected') {
return <Button disabled full text='Stake' variant='secondary' />
}
if (!isApproved) {
return (
<Button
disabled={isApproving}
full
onClick={onApprove}
text={!isApproving ? 'Approve staking' : 'Approving staking...'}
variant={
isApproving || status !== 'connected' ? 'secondary' : 'default'
}
/>
)
}
if (isApproved) {
return <Button full onClick={handleStakeClick} text='Stake' />
}
}, [isApproved, isApproving, status, handleStakeClick, onApprove])
const UnstakeButton = useMemo(() => {
const hasStaked = stakedBalance && fromWei(stakedBalance).gt(0)
if (status !== 'connected' || !hasStaked) {
return <Button disabled full text='Unstake & Claim' variant='secondary' />
}
return (
<Button
full
onClick={onUnstakeAndHarvest}
text='Unstake & Claim'
variant='secondary'
/>
)
}, [stakedBalance, status, onUnstakeAndHarvest])
const ClaimButton = useMemo(() => {
if (status !== 'connected') {
return <Button disabled full text='Claim' variant='secondary' />
}
return <Button full onClick={onHarvest} text='Claim' />
}, [status, onHarvest])
const formattedStakedBalance = useMemo(() => {
if (stakedBalance) {
return numeral(stakedBalance.toString()).format('0.00000a')
} else {
return '--'
}
}, [stakedBalance])
const formattedEarnedBalance = useMemo(() => {
if (unharvestedFarmTwoBalance) {
return numeral(unharvestedFarmTwoBalance.toString()).format('0.00000a')
} else {
return '--'
}
}, [unharvestedFarmTwoBalance])
return (
<>
<Card>
<div data-cy='dpi-farm-widget'>
<CardContent>
<StyledCardTitleWrapper>
<StyledHeaderIcon
src='https://index-dao.s3.amazonaws.com/defi_pulse_index_set.svg'
alt='DefiPulse Index Logo'
/>
<Spacer size='md' />
<StyledLmTitle>
<StyledCardTitle>DPI Liquidity Program</StyledCardTitle>
<Spacer size='sm' />
<StyledCardSubtitle>
Active July 13th, 2021 - August 12th, 2021
</StyledCardSubtitle>
</StyledLmTitle>
</StyledCardTitleWrapper>
<Spacer />
<StyledFarmTokensAndApyWrapper>
<Split>
<div>
<StyledFarmText>
{formattedStakedBalance}
<StyledTokenIcon
alt='eth dpi icon'
src='https://index-dao.s3.amazonaws.com/eth-dpi.svg'
/>
</StyledFarmText>
<StyledSectionLabel>
Staked ETH/DPI Uniswap LP Tokens
</StyledSectionLabel>
</div>
<div>
<StyledFarmText>{farmTwoApy}% APR</StyledFarmText>
<StyledSectionLabel>(Volatile)</StyledSectionLabel>
</div>
<div>
<StyledFarmText>
{formattedEarnedBalance}
<StyledTokenIcon src={indexToken} alt='Index token' />
</StyledFarmText>
<StyledSectionLabel>
Unclaimed INDEX in pool
</StyledSectionLabel>
</div>
</Split>
</StyledFarmTokensAndApyWrapper>
</CardContent>
<StyledCardActions isMobile={isMobile}>
{ClaimButton}
<Spacer />
{UnstakeButton}
</StyledCardActions>
</div>
</Card>
<DpiStakeModal
isOpen={stakeModalIsOpen}
onDismiss={handleDismissStakeModal}
onStake={handleOnStake}
/>
</>
)
}
Example #5
| Source File: GmiFarm.tsx From index-ui with MIT License | 4 votes |
|
Stake: React.FC = () => {
const [stakeModalIsOpen, setStakeModalIsOpen] = useState(false)
const { stakedGmiBalance: stakedBalance, unharvestedIndexFromGmiBalance } =
useBalances()
const { status } = useWallet()
const { isApproved, isApproving, onApprove, onStake, onUnstakeAndHarvest } =
useGmiFarming()
const { gmiRewardsApy } = usePrices()
const handleDismissStakeModal = useCallback(() => {
setStakeModalIsOpen(false)
}, [setStakeModalIsOpen])
const handleOnStake = useCallback(
(amount: string) => {
onStake(amount)
handleDismissStakeModal()
},
[handleDismissStakeModal, onStake]
)
const handleStakeClick = useCallback(() => {
setStakeModalIsOpen(true)
}, [setStakeModalIsOpen])
const StakeButton = useMemo(() => {
if (status !== 'connected') {
return <Button disabled full text='Stake' variant='secondary' />
}
if (!isApproved) {
return (
<Button
disabled={isApproving}
full
onClick={onApprove}
text={!isApproving ? 'Approve staking' : 'Approving staking...'}
variant={
isApproving || status !== 'connected' ? 'secondary' : 'default'
}
/>
)
}
if (isApproved) {
return <Button full onClick={handleStakeClick} text='Stake' />
}
}, [isApproved, isApproving, status, handleStakeClick, onApprove])
const UnstakeButton = useMemo(() => {
const hasStaked = stakedBalance && fromWei(stakedBalance).gt(0)
if (status !== 'connected' || !hasStaked) {
return <Button disabled full text='Unstake & Claim' variant='secondary' />
}
return (
<Button
full
onClick={onUnstakeAndHarvest}
text='Unstake & Claim'
variant='secondary'
/>
)
}, [stakedBalance, status, onUnstakeAndHarvest])
const formattedStakedBalance = useMemo(() => {
if (stakedBalance) {
return displayFromWei(stakedBalance, 5)
} else {
return '--'
}
}, [stakedBalance])
const formattedEarnedBalance = useMemo(() => {
if (unharvestedIndexFromGmiBalance) {
return displayFromWei(unharvestedIndexFromGmiBalance, 5)
} else {
return '--'
}
}, [unharvestedIndexFromGmiBalance])
return (
<>
<Card>
<div data-cy='expired-farm-widget'>
<CardContent>
<StyledCardTitleWrapper>
<StyledHeaderIcon alt='GMI icon' src={GmiIndex.image} />
<Spacer size='md' />
<StyledLmTitle>
<StyledCardTitle>GMI Staking</StyledCardTitle>
<Spacer size='sm' />
<StyledCardSubtitle>
Active Jan. 10th, 2022 - Mar. 10th, 2022
</StyledCardSubtitle>
</StyledLmTitle>
</StyledCardTitleWrapper>
<Spacer />
<StyledFarmTokensAndApyWrapper>
<Split>
<div>
<StyledFarmText>
{formattedStakedBalance}
<StyledTokenIcon alt='gmi icon' src={GmiIndex.image} />
</StyledFarmText>
<StyledSectionLabel>Staked GMI Tokens</StyledSectionLabel>
</div>
<div>
<StyledFarmText>{gmiRewardsApy}% APR</StyledFarmText>
<StyledSectionLabel>(Volatile)</StyledSectionLabel>
</div>
<div>
<StyledFarmText>
{formattedEarnedBalance}
<StyledTokenIcon src={indexToken} alt='Index token' />
</StyledFarmText>
<StyledSectionLabel>
Unclaimed INDEX in pool
</StyledSectionLabel>
</div>
</Split>
</StyledFarmTokensAndApyWrapper>
</CardContent>
<CardActions>
{StakeButton}
{UnstakeButton}
</CardActions>
</div>
</Card>
<GmiStakeModal
isOpen={stakeModalIsOpen}
onDismiss={handleDismissStakeModal}
onStake={handleOnStake}
/>
</>
)
}
Example #6
| Source File: LegacyFarm.tsx From index-ui with MIT License | 4 votes |
|
Stake: React.FC = () => {
const [stakeModalIsOpen, setStakeModalIsOpen] = useState(false)
const {
stakedUniswapEthDpiLpBalance: stakedBalance,
unharvestedIndexBalance,
} = useBalances()
const { status } = useWallet()
const { isApproved, isApproving, onApprove, onStake, onUnstakeAndHarvest } =
useFarming()
const { apy } = usePrices()
const handleDismissStakeModal = useCallback(() => {
setStakeModalIsOpen(false)
}, [setStakeModalIsOpen])
const handleOnStake = useCallback(
(amount: string) => {
onStake(amount)
handleDismissStakeModal()
},
[handleDismissStakeModal, onStake]
)
const handleStakeClick = useCallback(() => {
setStakeModalIsOpen(true)
}, [setStakeModalIsOpen])
const StakeButton = useMemo(() => {
if (status !== 'connected') {
return <Button disabled full text='Stake' variant='secondary' />
}
if (!isApproved) {
return (
<Button
disabled={isApproving}
full
onClick={onApprove}
text={!isApproving ? 'Approve staking' : 'Approving staking...'}
variant={
isApproving || status !== 'connected' ? 'secondary' : 'default'
}
/>
)
}
if (isApproved) {
return <Button full onClick={handleStakeClick} text='Stake' />
}
}, [isApproved, isApproving, status, handleStakeClick, onApprove])
const UnstakeButton = useMemo(() => {
const hasStaked = stakedBalance && fromWei(stakedBalance).gt(0)
if (status !== 'connected' || !hasStaked) {
return <Button disabled full text='Unstake & Claim' variant='secondary' />
}
return (
<Button
full
onClick={onUnstakeAndHarvest}
text='Unstake & Claim'
variant='secondary'
/>
)
}, [stakedBalance, status, onUnstakeAndHarvest])
const formattedStakedBalance = useMemo(() => {
if (stakedBalance) {
return numeral(stakedBalance).format('0.00000a')
} else {
return '--'
}
}, [stakedBalance])
const formattedEarnedBalance = useMemo(() => {
if (unharvestedIndexBalance) {
return numeral(unharvestedIndexBalance.toString()).format('0.00000a')
} else {
return '--'
}
}, [unharvestedIndexBalance])
return (
<>
<Card>
<div data-cy='expired-farm-widget'>
<CardContent>
<StyledCardTitleWrapper>
<StyledHeaderIcon
alt='expiring icon'
src='https://index-dao.s3.amazonaws.com/down-arrow.svg'
/>
<Spacer size='md' />
<StyledLmTitle>
<StyledCardTitle>Expired Liquidity Program</StyledCardTitle>
<Spacer size='sm' />
<StyledCardSubtitle>
Active Oct. 7th, 2020 - Dec. 6th, 2020
</StyledCardSubtitle>
</StyledLmTitle>
</StyledCardTitleWrapper>
<Spacer />
<StyledFarmTokensAndApyWrapper>
<Split>
<div>
<StyledFarmText>
{formattedStakedBalance}
<StyledTokenIcon
alt='eth dpi icon'
src='https://index-dao.s3.amazonaws.com/eth-dpi.svg'
/>
</StyledFarmText>
<StyledSectionLabel>
Staked ETH/DPI Uniswap LP Tokens
</StyledSectionLabel>
</div>
<div>
<StyledFarmText>0.00% APR</StyledFarmText>
<StyledSectionLabel>(Volatile)</StyledSectionLabel>
</div>
<div>
<StyledFarmText>
{formattedEarnedBalance}
<StyledTokenIcon src={indexToken} alt='Index token' />
</StyledFarmText>
<StyledSectionLabel>
Unclaimed INDEX in pool
</StyledSectionLabel>
</div>
</Split>
</StyledFarmTokensAndApyWrapper>
</CardContent>
<CardActions>{UnstakeButton}</CardActions>
</div>
</Card>
<DpiStakeModal
isOpen={stakeModalIsOpen}
onDismiss={handleDismissStakeModal}
onStake={handleOnStake}
/>
</>
)
}
Example #7
| Source File: MviFarm.tsx From index-ui with MIT License | 4 votes |
|
Stake: React.FC = () => {
const [stakeModalIsOpen, setStakeModalIsOpen] = useState(false)
const {
stakedUniswapEthMviLpBalance: stakedBalance,
unharvestedMviRewardsBalance,
} = useBalances()
const { status } = useWallet()
const {
isApproved,
isApproving,
onApprove,
onStake,
onUnstakeAndHarvest,
onHarvest,
} = useMviStakingRewards()
const { mviRewardsApy } = usePrices()
const { isMobile } = useMediaQuery()
const handleDismissStakeModal = useCallback(() => {
setStakeModalIsOpen(false)
}, [setStakeModalIsOpen])
const handleOnStake = useCallback(
(amount: string) => {
onStake(amount)
handleDismissStakeModal()
},
[handleDismissStakeModal, onStake]
)
const handleStakeClick = useCallback(() => {
setStakeModalIsOpen(true)
}, [setStakeModalIsOpen])
const StakeButton = useMemo(() => {
if (status !== 'connected') {
return <Button disabled full text='Stake' variant='secondary' />
}
if (!isApproved) {
return (
<Button
disabled={isApproving}
full
onClick={onApprove}
text={!isApproving ? 'Approve staking' : 'Approving staking...'}
variant={
isApproving || status !== 'connected' ? 'secondary' : 'default'
}
/>
)
}
if (isApproved) {
return <Button full onClick={handleStakeClick} text='Stake' />
}
}, [isApproved, isApproving, status, handleStakeClick, onApprove])
const UnstakeButton = useMemo(() => {
const hasStaked = stakedBalance && fromWei(stakedBalance).gt(0)
if (status !== 'connected' || !hasStaked) {
return <Button disabled full text='Unstake & Claim' variant='secondary' />
}
return (
<Button
full
onClick={onUnstakeAndHarvest}
text='Unstake & Claim'
variant='secondary'
/>
)
}, [stakedBalance, status, onUnstakeAndHarvest])
const ClaimButton = useMemo(() => {
if (status !== 'connected') {
return <Button disabled full text='Claim' variant='secondary' />
}
return <Button full onClick={onHarvest} text='Claim' />
}, [status, onHarvest])
const formattedStakedBalance = useMemo(() => {
if (stakedBalance) {
return numeral(fromWei(stakedBalance)).format('0.00000a')
} else {
return '--'
}
}, [stakedBalance])
const formattedEarnedBalance = useMemo(() => {
if (unharvestedMviRewardsBalance) {
return numeral(fromWei(unharvestedMviRewardsBalance)).format('0.00000a')
} else {
return '--'
}
}, [unharvestedMviRewardsBalance])
return (
<>
<Card>
<div data-cy='mvi-farm-widget'>
<CardContent>
<StyledCardTitleWrapper>
<StyledHeaderIcon
alt='MVI Icon'
src='https://set-core.s3.amazonaws.com/img/portfolios/mvi.svg'
/>
<Spacer size='md' />
<StyledLmTitle>
<StyledCardTitle>MVI Liquidity Program</StyledCardTitle>
<Spacer size='sm' />
<StyledCardSubtitle>
Active August 20th, 2021 - September 19th, 2021
</StyledCardSubtitle>
</StyledLmTitle>
</StyledCardTitleWrapper>
<Spacer />
<StyledFarmTokensAndApyWrapper>
<Split>
<div>
<StyledFarmText>
{formattedStakedBalance}
<StyledTokenIconWrapper>
<StyledTokenIcon
alt='ETH Icon'
src='https://s3.amazonaws.com/set-core/img/coin-icons/eth.svg'
/>
<StyledTokenIcon
alt='MVI Icon'
src='https://set-core.s3.amazonaws.com/img/portfolios/mvi.svg'
/>
</StyledTokenIconWrapper>
</StyledFarmText>
<StyledSectionLabel>
Staked ETH/MVI Uniswap LP Tokens
</StyledSectionLabel>
</div>
<div>
<StyledFarmText>{mviRewardsApy}% APR</StyledFarmText>
<StyledSectionLabel>(Volatile)</StyledSectionLabel>
</div>
<div>
<StyledFarmText>
{formattedEarnedBalance}
<StyledTokenIconWrapper>
<StyledTokenIcon src={indexToken} alt='Index token' />
</StyledTokenIconWrapper>
</StyledFarmText>
<StyledSectionLabel>
Unclaimed INDEX in pool
</StyledSectionLabel>
</div>
</Split>
</StyledFarmTokensAndApyWrapper>
</CardContent>
<StyledCardActions isMobile={isMobile}>
{ClaimButton}
<Spacer />
{UnstakeButton}
</StyledCardActions>
</div>
</Card>
<MviStakeModal
isOpen={stakeModalIsOpen}
onDismiss={handleDismissStakeModal}
onStake={handleOnStake}
/>
</>
)
}
