utils#displayFromWei TypeScript Examples

The following examples show how to use utils#displayFromWei. 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: ProductWalletBalance.tsx    From index-ui with MIT License 6 votes vote down vote up 
ProductWalletBalance: React.FC<ProductWalletBalanceProps> = ({
  token,
  latestPrice = 0,
  currentBalance = new BigNumber(0),
}) => {
  const { isMetamaskConnected } = useWallet()
  const handleAddToMetamask = useAddToMetamask()

  return (
    <ProductPageSection title='My Assets'>
      <StyledTokenWrapper>
        <div>
          <StyledTokenValuation>
            ${displayFromWei(currentBalance.times(latestPrice))}
          </StyledTokenValuation>
          <StyledTokenBalance data-cy='my-assets-token-balance'>
            {displayFromWei(currentBalance)} {token.symbol}
          </StyledTokenBalance>
        </div>
        <div>
          <SimpleButton
            text='Add to Metamask'
            isDisabled={!isMetamaskConnected}
            onClick={() => handleAddToMetamask(token)}
          />
        </div>
      </StyledTokenWrapper>
    </ProductPageSection>
  )
}
Example #2
Source File: WalletModal.tsx    From index-ui with MIT License 4 votes vote down vote up 
WalletModal: React.FC<ModalProps> = ({ isOpen, onDismiss }) => {
  const { reset, chainId } = useWallet()
  const {
    indexBalance,
    dpiBalance,
    dpiBalancePolygon,
    mviBalance,
    mviBalancePolygon,
    ethfliBalance,
    ethflipBalance,
    btcfliBalance,
    bedBalance,
    dataBalance,
    gmiBalance,
    uniswapEthDpiLpBalance,
    uniswapEthMviLpBalance,
    stakedUniswapEthDpiLpBalance,
    stakedFarmTwoBalance,
    stakedUniswapEthMviLpBalance,
    dataBalancePolygon,
    gmiBalancePolygon,
    stakedGmiBalance,
    iethFlipBalance,
    imaticFlipBalancePolygon,
    maticFlipBalancePolygon,
  } = useBalances()

  const totalStakedEthDpiLpBalance = getBigNumber(
    stakedUniswapEthDpiLpBalance
  ).plus(getBigNumber(stakedFarmTwoBalance))

  const handleSignOut = useCallback(() => {
    reset()
    toast.success("You've successfully signed out.")
    onDismiss && onDismiss()
  }, [reset, onDismiss])

  const ethMviTokenIcon = (
    <StyledLpTokenWrapper>
      <StyledLpTokenImage
        alt='ETH Icon'
        src='https://s3.amazonaws.com/set-core/img/coin-icons/eth.svg'
      />
      <StyledLpTokenImage
        alt='MVI Icon'
        src='https://set-core.s3.amazonaws.com/img/portfolios/mvi.svg'
      />
    </StyledLpTokenWrapper>
  )

  const ethDpiTokenIcon = (
    <StyledLpTokenWrapper>
      <StyledLpTokenImage
        alt='ETH Icon'
        src='https://s3.amazonaws.com/set-core/img/coin-icons/eth.svg'
      />
      <StyledLpTokenImage alt='DPI Icon' src={dpiTokenImage} />
    </StyledLpTokenWrapper>
  )

  const getChainName = () => {
    if (chainId === MAINNET_CHAIN_DATA.chainId)
      return `My ${MAINNET_CHAIN_DATA.name} Wallet`
    if (chainId === POLYGON_CHAIN_DATA.chainId)
      return `My ${POLYGON_CHAIN_DATA.name} Wallet`
    return 'My Wallet'
  }

  const mainnetModalContent = () => {
    return (
      <>
        <Split>
          <Box row>
            <FancyValue
              icon={{
                src: indexToken,
                alt: 'Index token',
              }}
              link={`https://etherscan.io/address/${tokenAddresses.indexTokenAddress}`}
              label='INDEX balance'
              value={displayFromWei(indexBalance)}
            />
          </Box>
          <Box row>
            <FancyValue
              icon={{
                alt: 'Defi Pulse Icon',
                src: dpiTokenImage,
              }}
              label='DPI balance'
              link={`https://etherscan.io/address/${tokenAddresses.dpiTokenAddress}`}
              value={displayFromWei(dpiBalance)}
            />
          </Box>
        </Split>
        <Spacer />
        <Split>
          <Box row>
            <FancyValue
              icon={{
                alt: 'BED Icon',
                src: bedBorderLogo,
              }}
              label='BED Index Balance'
              link={`https://etherscan.io/address/${tokenAddresses.bedTokenAddress}`}
              value={displayFromWei(bedBalance)}
            />
          </Box>
          <Box row>
            <FancyValue
              icon={{
                alt: 'MVI Icon',
                src: 'https://set-core.s3.amazonaws.com/img/portfolios/mvi.svg',
              }}
              label='Metaverse Index Balance'
              link={`https://etherscan.io/address/${tokenAddresses.mviTokenAddress}`}
              value={displayFromWei(mviBalance)}
            />
          </Box>
        </Split>
        <Spacer />
        <Split>
          <Box row>
            <FancyValue
              icon={{
                alt: 'DATA Icon',
                src: dataLogo,
              }}
              label='DATA Economy Index Balance'
              link={`https://etherscan.io/address/${tokenAddresses.dataTokenAddress}`}
              value={displayFromWei(dataBalance)}
            />
          </Box>
          <Box row>
            <FancyValue
              icon={{
                alt: 'GMI Icon',
                src: gmiLogo,
              }}
              label='Bankless DeFi Innovation Index Balance'
              link={`https://etherscan.io/address/${tokenAddresses.gmiTokenAddress}`}
              value={displayFromWei(gmiBalance)}
            />
          </Box>
        </Split>
        <Spacer />
        <Separator />
        <Spacer />
        <Split>
          <Box row>
            <FancyValue
              icon={{
                alt: 'ETH2x-FLI Icon',
                src: 'https://set-core.s3.amazonaws.com/img/portfolios/eth2x_fli.svg',
              }}
              label='ETH 2x FLI Balance'
              link={`https://etherscan.io/address/${tokenAddresses.eth2xfliTokenAddress}`}
              value={displayFromWei(ethfliBalance)}
            />
          </Box>
          <Box row>
            <FancyValue
              icon={{
                alt: 'BTC2x-FLI Icon',
                src: 'https://set-core.s3.amazonaws.com/img/portfolios/fli_btc.svg',
              }}
              label='BTC 2x FLI Balance'
              link={`https://etherscan.io/address/${tokenAddresses.btc2xfliTokenAddress}`}
              value={displayFromWei(btcfliBalance)}
            />
          </Box>
        </Split>
        <Spacer />
        <Separator />
        <Spacer />
        <Split>
          <Box row>
            <FancyValue
              iconComponent={ethDpiTokenIcon}
              label='Uniswap ETH/DPI LP balance'
              link={`https://etherscan.io/address/${tokenAddresses.uniswapEthDpiLpTokenAddress}`}
              value={displayFromWei(uniswapEthDpiLpBalance)}
            />
          </Box>
          <Box row>
            <FancyValue
              icon={{
                alt: 'Staked Uniswap ETH/DPI LP Icon',
                src: 'https://set-core.s3.amazonaws.com/img/coin-icons/uni_lp.svg',
              }}
              label='Staked Uniswap ETH/DPI LP'
              link={`https://etherscan.io/address/${tokenAddresses.farmTwoAddress}`}
              value={displayFromWei(totalStakedEthDpiLpBalance)}
            />
          </Box>
        </Split>
        <Spacer />
        <Split>
          <Box row>
            <FancyValue
              iconComponent={ethMviTokenIcon}
              label='Uniswap ETH/MVI LP balance'
              link={`https://etherscan.io/address/${tokenAddresses.uniswapEthMviLpTokenAddress}`}
              value={displayFromWei(uniswapEthMviLpBalance)}
            />
          </Box>
          <Box row>
            <FancyValue
              icon={{
                alt: 'Staked Uniswap ETH/MVI LP Icon',
                src: 'https://set-core.s3.amazonaws.com/img/coin-icons/uni_lp.svg',
              }}
              label='Staked Uniswap ETH/MVI LP'
              link={`https://etherscan.io/address/${tokenAddresses.mviStakingRewardsAddress}`}
              value={displayFromWei(stakedUniswapEthMviLpBalance)}
            />
          </Box>
        </Split>
        <Spacer />
        <Split>
          <Spacer />
          <Box row>
            <FancyValue
              icon={{
                alt: 'Staked GMI Icon',
                src: gmiLogo,
              }}
              label='Staked GMI'
              link={`https://etherscan.io/address/${tokenAddresses.gmiTokenAddress}`}
              value={displayFromWei(stakedGmiBalance)}
            />
          </Box>
        </Split>
      </>
    )
  }

  const polygonModalContent = () => {
    return (
      <>
        <Split>
          <Box row>
            <FancyValue
              icon={{
                alt: 'Defi Pulse Icon',
                src: dpiTokenImage,
              }}
              label='DPI balance (Polygon)'
              link={`https://polygonscan.com/address/${tokenAddresses.dpiTokenPolygonAddress}`}
              value={displayFromWei(dpiBalancePolygon)}
            />
          </Box>
          <Box row>
            <FancyValue
              icon={{
                alt: 'MVI Icon',
                src: 'https://set-core.s3.amazonaws.com/img/portfolios/mvi.svg',
              }}
              label='Metaverse Index Balance (Polygon)'
              link={`https://polygonscan.com/address/${tokenAddresses.mviTokenPolygonAddress}`}
              value={displayFromWei(mviBalancePolygon)}
            />
          </Box>
        </Split>
        <Spacer />
        <Split>
          <Box row>
            <FancyValue
              icon={{
                alt: 'GMI Icon',
                src: gmiLogo,
              }}
              label='Bankless DeFi Innovation Index Balance (Polygon)'
              link={`https://polygonscan.com/address/${tokenAddresses.gmiTokenPolygonAddress}`}
              value={displayFromWei(gmiBalancePolygon)}
            />
          </Box>
          <Box row>
            <FancyValue
              icon={{
                alt: 'DATA Icon',
                src: dataLogo,
              }}
              label='DATA Economy Index Balance (Polygon)'
              link={`https://polygonscan.com/address/${tokenAddresses.dataTokenPolygonAddress}`}
              value={displayFromWei(dataBalancePolygon)}
            />
          </Box>
        </Split>
        <Spacer />
        <Split>
          <Box row>
            <FancyValue
              icon={{
                alt: 'ETH2x-FLI-P Icon',
                src: 'https://set-core.s3.amazonaws.com/img/portfolios/eth2x_fli.svg',
              }}
              label='ETH 2x FLI-P Balance'
              link={`https://polygonscan.com/address/${tokenAddresses.eth2xflipTokenAddress}`}
              value={displayFromWei(ethflipBalance)}
            />
          </Box>
          <Box row>
            <FancyValue
              icon={{
                alt: 'iETH-FLI-P Icon',
                src: iethflipLogo,
              }}
              label='iETH-FLI-P Balance (Polygon)'
              link={`https://polygonscan.com/address/${tokenAddresses.iethflipTokenAddress}`}
              value={displayFromWei(iethFlipBalance)}
            />
          </Box>
        </Split>
        <Spacer />
        <Split>
          <Box row>
            <FancyValue
              icon={{
                alt: 'MATIC2x-FLI-P Icon',
                src: maticflipLogo,
              }}
              label='MATIC2x-FLI-P Balance (Polygon)'
              link={`https://polygonscan.com/address/${tokenAddresses.matic2xflipTokenAddress}`}
              value={displayFromWei(maticFlipBalancePolygon)}
            />
          </Box>
          <Box row>
            <FancyValue
              icon={{
                alt: 'iMATIC-FLI-P Icon',
                src: imaticflipLogo,
              }}
              label='iMATIC-FLI-P Balance (Polygon)'
              link={`https://polygonscan.com/address/${tokenAddresses.imaticflipTokenAddress}`}
              value={displayFromWei(imaticFlipBalancePolygon)}
            />
          </Box>
        </Split>
      </>
    )
  }

  return (
    <Modal isOpen={isOpen} onDismiss={onDismiss}>
      <StyledModalBody>
        <ModalTitle text={getChainName()} />
        <ModalContent>
          {chainId && chainId === MAINNET_CHAIN_DATA.chainId
            ? mainnetModalContent()
            : polygonModalContent()}
        </ModalContent>
        <Separator />
        <ModalActions>
          <Button onClick={onDismiss} text='Close' variant='secondary' />
          <Button onClick={handleSignOut} text='Sign Out' />
        </ModalActions>
      </StyledModalBody>
    </Modal>
  )
}
Example #3
Source File: GmiFarm.tsx    From index-ui with MIT License 4 votes vote down vote up 
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}
      />
    </>
  )
}