@material-ui/icons#Send TypeScript Examples

WithIcon = () => (
  <Layout>
    <TextButton>
      <Send style={{ marginRight: 10 }} />
      BUTTON
    </TextButton>
    <ActionButton>
      <CircularProgress
        size="1.5rem"
        style={{ color: 'currentColor', marginRight: 10 }}
      />
      BUTTON
    </ActionButton>
    <BorderButton>
      <Send style={{ marginRight: 10 }} />
      BUTTON
    </BorderButton>
    <TextButton disabled>
      <Send style={{ marginRight: 10 }} />
      BUTTON
    </TextButton>
    <ActionButton disabled>
      <CircularProgress
        size="1.5rem"
        style={{ color: 'currentColor', marginRight: 10 }}
      />
      BUTTON
    </ActionButton>
    <BorderButton disabled>
      <Send style={{ marginRight: 10 }} />
      BUTTON
    </BorderButton>
  </Layout>
)

function TotalValueBase({ className }: TotalValueProps) {
  const {
    target: { isNative },
  } = useDeploymentTarget();

  const { theme } = useTheme();

  const { connected } = useAccount();

  const tokenBalances = useBalances();

  const {
    ust: { formatOutput, demicrofy, symbol },
  } = useFormatters();

  const { data: { moneyMarketEpochState } = {} } = useEarnEpochStatesQuery();

  const [openSend, sendElement] = useSendDialog();

  const { ancUstLp, ustBorrow } = useRewards();

  const { data: ancPrice } = useAssetPriceInUstQuery('anc');

  const { data: { userGovStakingInfo } = {} } =
    useRewardsAncGovernanceRewardsQuery();

  const { data: { oraclePrices } = {} } = useBorrowMarketQuery();

  const { data: { marketBorrowerInfo, overseerCollaterals } = {} } =
    useBorrowBorrowerQuery();

  const { data: bAssetBalanceTotal } = useBAssetInfoAndBalanceTotalQuery();

  const [focusedIndex, setFocusedIndex] = useState(-1);

  const { ref, width = 400 } = useResizeObserver();

  const { totalValue, data } = useMemo<{
    totalValue: u<UST<BigSource>>;
    data: Item[];
  }>(() => {
    if (!connected) {
      return { totalValue: '0' as u<UST>, data: [] };
    }

    const ust = tokenBalances.uUST;
    const deposit = computeTotalDeposit(
      tokenBalances.uaUST,
      moneyMarketEpochState,
    );
    const borrowing =
      overseerCollaterals && oraclePrices && marketBorrowerInfo && ustBorrow
        ? (computeCollateralsTotalUST(overseerCollaterals, oraclePrices)
            .minus(marketBorrowerInfo.loan_amount)
            .plus(ustBorrow.rewardValue) as u<UST<Big>>)
        : ('0' as u<UST>);
    const holdings = computeHoldings(
      tokenBalances,
      ancPrice,
      oraclePrices,
      bAssetBalanceTotal,
    );

    const pool =
      ancUstLp && ancPrice
        ? (big(big(ancUstLp.poolAssets.anc).mul(ancPrice)).plus(
            ancUstLp.poolAssets.ust,
          ) as u<UST<Big>>)
        : ('0' as u<UST>);

    const farming = ancUstLp
      ? (big(ancUstLp.stakedValue).plus(ancUstLp.rewardsAmountInUst) as u<
          UST<Big>
        >)
      : ('0' as u<UST>);
    const govern =
      userGovStakingInfo && ancPrice
        ? (big(userGovStakingInfo.balance).mul(ancPrice) as u<UST<Big>>)
        : ('0' as u<UST>);

    const totalValue = sum(
      ust,
      deposit,
      borrowing,
      holdings,
      pool,
      farming,
      govern,
    ) as u<UST<Big>>;

    return {
      totalValue,
      data: [
        {
          label: 'UST',
          tooltip: 'Total amount of UST held',
          amount: ust,
        },
        {
          label: 'Deposit',
          tooltip: 'Total amount of UST deposited and interest generated',
          amount: deposit,
        },
        {
          label: 'Borrowing',
          tooltip:
            'Total value of collateral value and pending rewards minus loan amount',
          amount: borrowing,
        },
        {
          label: 'Holdings',
          tooltip: 'Total value of ANC and bAssets held',
          amount: holdings,
        },
        {
          label: 'Pool',
          tooltip:
            'Total value of ANC and UST withdrawable from liquidity pools',
          amount: pool,
        },
        {
          label: 'Farming',
          tooltip: 'Total value of ANC LP tokens staked and pending rewards',
          amount: farming,
        },
        {
          label: 'Govern',
          tooltip: 'Total value of staked ANC',
          amount: govern,
        },
      ],
    };
  }, [
    ancPrice,
    ancUstLp,
    bAssetBalanceTotal,
    connected,
    marketBorrowerInfo,
    moneyMarketEpochState,
    oraclePrices,
    overseerCollaterals,
    tokenBalances,
    userGovStakingInfo,
    ustBorrow,
  ]);

  const isSmallLayout = useMemo(() => {
    return width < 470;
  }, [width]);

  const chartData = useMemo<ChartItem[]>(() => {
    return data.map(({ label, amount }, i) => ({
      label,
      value: +amount,
      color: theme.chart[i % theme.chart.length],
    }));
  }, [data, theme.chart]);

  return (
    <Section className={className} data-small-layout={isSmallLayout}>
      <header ref={ref}>
        <div>
          <h4>
            <IconSpan>
              TOTAL VALUE{' '}
              <InfoTooltip>
                Total value of deposits, borrowing, holdings, withdrawable
                liquidity, rewards, staked ANC, and UST held
              </InfoTooltip>
            </IconSpan>
          </h4>
          <p>
            <AnimateNumber format={formatOutput}>
              {demicrofy(totalValue)}
            </AnimateNumber>
            <Sub> UST</Sub>
          </p>
        </div>
        {isNative && (
          <div>
            <BorderButton onClick={() => openSend({})} disabled={!connected}>
              <Send />
              Send
            </BorderButton>
          </div>
        )}
      </header>

      <div className="values">
        <ul>
          {data.map(({ label, tooltip, amount }, i) => (
            <li
              key={label}
              style={{ color: theme.chart[i] }}
              data-focus={i === focusedIndex}
            >
              <i />
              <p>
                <IconSpan>
                  {label} <InfoTooltip>{tooltip}</InfoTooltip>
                </IconSpan>
              </p>
              <p>
                {formatOutput(demicrofy(amount))}
                {` ${symbol}`}
              </p>
            </li>
          ))}
        </ul>

        {!isSmallLayout && (
          <DoughnutChart data={chartData} onFocus={setFocusedIndex} />
        )}
      </div>

      {sendElement}
    </Section>
  );
}