@material-ui/icons#InfoOutlined TypeScript Examples

export function PointerTooltip({
  children,
  placement = 'top',
  ...tooltipProps
}: InfoTooltipProps) {
  return (
    <sup style={{ cursor: 'help' }}>
      <Tooltip {...tooltipProps} title={children} placement={placement}>
        <InfoOutlined />
      </Tooltip>
    </sup>
  );
}

export function TouchTooltip({
  children,
  placement = 'top',
  ...tooltipProps
}: InfoTooltipProps) {
  const [open, setOpen] = useState<boolean>(false);

  const tooltipOpen = useCallback(() => {
    setOpen(true);
  }, []);

  const tooltipClose = useCallback(() => {
    setOpen(false);
  }, []);

  return (
    <ClickAwayListener onClickAway={tooltipClose}>
      <sup onClick={tooltipOpen}>
        <Tooltip
          {...tooltipProps}
          open={open}
          onClose={tooltipClose}
          disableFocusListener
          disableHoverListener
          disableTouchListener
          title={children}
          placement={placement}
        >
          <InfoOutlined />
        </Tooltip>
      </sup>
    </ClickAwayListener>
  );
}

labelRenderer = (
  { variant, label, tooltip }: Data,
  rect: Rect,
  i: number,
) => {
  if (variant === 'label') {
    return (
      <Marker key={'label' + i} style={{ left: rect.x + rect.width }}>
        {tooltip ? (
          <Tooltip title={tooltip} placement="top">
            <IconSpan style={{ cursor: 'help' }}>
              <sup>
                <InfoOutlined />
              </sup>{' '}
              <span className="text">{label}</span>
            </IconSpan>
          </Tooltip>
        ) : (
          label
        )}
      </Marker>
    );
  }
  return null;
}

labelRenderer = (
  { label, tooltip }: Data,
  rect: Rect,
  i: number,
  onClick?: () => void,
) => {
  return (
    <Marker
      key={'label' + i}
      style={{ left: rect.x + rect.width }}
      onClick={onClick}
    >
      {tooltip ? (
        <Tooltip title={tooltip} placement="top">
          <IconSpan style={{ cursor: 'pointer' }}>
            <sup>
              <InfoOutlined />
            </sup>{' '}
            <span className="text">{label}</span>
          </IconSpan>
        </Tooltip>
      ) : (
        label
      )}
    </Marker>
  );
}

labelRenderer = (
  { variant, label, tooltip, textAlign = 'center', color }: RenderData,
  rect: Rect,
  i: number,
) => {
  return variant === 'label' ? (
    <Label
      key={'label' + i}
      style={{
        transform: `translateX(${rect.x + rect.width}px)`,
        opacity: label.length === 0 ? 0 : 1,
        color,
      }}
    >
      <span>{label}</span>
    </Label>
  ) : (
    <Marker
      key={'label' + i}
      style={{
        transform: `translateX(${rect.x + rect.width}px)`,
        opacity: label.length === 0 ? 0 : 1,
      }}
    >
      <span>
        {tooltip ? (
          <Tooltip title={tooltip} placement="top">
            <IconSpan style={{ cursor: 'help', letterSpacing: '-0.5px' }}>
              <sup>
                <InfoOutlined />
              </sup>{' '}
              <span className="text">{label}</span>
            </IconSpan>
          </Tooltip>
        ) : (
          label
        )}
      </span>
    </Marker>
  );
}

InfoIcon = styled(InfoOutlined)({
  position: "absolute",
  right: 25,
  top: "50%",
})

InfoIconInput = styled(InfoOutlined)({
  cursor: "default",
})

InfoIconInput = styled(InfoOutlined)({
  cursor: "default",
})

InfoIconInput = styled(InfoOutlined)({
  cursor: "default",
})

InfoIcon = styled(InfoOutlined)({
  cursor: "default",
  marginLeft: 5,
  verticalAlign: "top",
})

export function Component({
  className,
  burnAmount,
  getAmount,
  setGetAmount,
  setBurnAmount,
  connectedWallet,
  fixedFee,
  setMode,
}: BurnProps) {
  // ---------------------------------------------
  // dependencies
  // ---------------------------------------------
  const { availablePost, connected, terraWalletAddress } = useAccount();

  const { contractAddress, gasPrice, constants } = useAnchorWebapp();

  const estimateFee = useEstimateFee(terraWalletAddress);

  const [burn, burnResult] = useBondBurnTx();

  const [openAlert, alertElement] = useAlert();

  // ---------------------------------------------
  // states
  // ---------------------------------------------
  const [estimatedGasWanted, setEstimatedGasWanted] = useState<Gas | null>(
    null,
  );
  const [estimatedFee, setEstimatedFee] = useState<u<UST> | null>(null);

  // ---------------------------------------------
  // queries
  // ---------------------------------------------
  const bank = useAnchorBank();

  const { data: { state: exchangeRate, parameters } = {} } =
    useBLunaExchangeRateQuery();

  // ---------------------------------------------
  // logics
  // ---------------------------------------------
  const pegRecoveryFee = useMemo(
    () => pegRecovery(exchangeRate, parameters),
    [exchangeRate, parameters],
  );

  const invalidTxFee = useMemo(
    () => connected && validateTxFee(bank.tokenBalances.uUST, fixedFee),
    [bank, fixedFee, connected],
  );

  const invalidBurnAmount = useMemo(
    () => connected && validateBurnAmount(burnAmount, bank),
    [bank, burnAmount, connected],
  );

  const estimate = useMemo(() => {
    return debounce((msgs: Msg[] | null) => {
      if (!msgs) {
        setEstimatedGasWanted(null);
        setEstimatedFee(null);
        return;
      }

      estimateFee(msgs).then((estimated) => {
        if (estimated) {
          setEstimatedGasWanted(estimated.gasWanted);
          setEstimatedFee(
            big(estimated.txFee).mul(gasPrice.uusd).toFixed() as u<UST>,
          );
        } else {
          setEstimatedGasWanted(null);
          setEstimatedFee(null);
        }
      });
    }, 500);
  }, [estimateFee, gasPrice.uusd]);

  // ---------------------------------------------
  // callbacks
  // ---------------------------------------------
  const updateBurnAmount = useCallback(
    (nextBurnAmount: string) => {
      if (nextBurnAmount.trim().length === 0) {
        setGetAmount('' as Luna);
        setBurnAmount('' as bLuna);
      } else {
        const burnAmount: bLuna = nextBurnAmount as bLuna;
        const getAmount: Luna = formatLunaInput(
          big(burnAmount).mul(exchangeRate?.exchange_rate ?? 1) as Luna<Big>,
        );

        setGetAmount(getAmount);
        setBurnAmount(burnAmount);
      }
    },
    [exchangeRate?.exchange_rate, setBurnAmount, setGetAmount],
  );

  const updateGetAmount = useCallback(
    (nextGetAmount: string) => {
      if (nextGetAmount.trim().length === 0) {
        setBurnAmount('' as bLuna);
        setGetAmount('' as Luna);
      } else {
        const getAmount: Luna = nextGetAmount as Luna;
        const burnAmount: bLuna = formatLunaInput(
          big(getAmount).div(exchangeRate?.exchange_rate ?? 1) as bLuna<Big>,
        );

        setBurnAmount(burnAmount);
        setGetAmount(getAmount);
      }
    },
    [exchangeRate?.exchange_rate, setBurnAmount, setGetAmount],
  );

  const init = useCallback(() => {
    setGetAmount('' as Luna);
    setBurnAmount('' as bLuna);
  }, [setBurnAmount, setGetAmount]);

  const proceed = useCallback(
    async (burnAmount: bLuna) => {
      if (!connected || !terraWalletAddress || !burn) {
        return;
      }

      const estimated = await estimateFee([
        new MsgExecuteContract(terraWalletAddress, contractAddress.cw20.bLuna, {
          send: {
            contract: contractAddress.bluna.hub,
            amount: floor(big(burnAmount).mul(MICRO)).toFixed(),
            msg: createHookMsg({
              unbond: {},
            }),
          },
        }),
      ]);

      if (estimated) {
        burn({
          burnAmount,
          gasWanted: estimated.gasWanted,
          txFee: big(estimated.txFee).mul(gasPrice.uusd).toFixed() as u<UST>,
          exchangeRate: exchangeRate?.exchange_rate ?? ('1' as Rate<string>),
          onTxSucceed: () => {
            init();
          },
        });
      } else {
        await openAlert({
          description: (
            <>
              Broadcasting failed,
              <br />
              please retry after some time.
            </>
          ),
          agree: 'OK',
        });
      }
    },
    [
      burn,
      connected,
      contractAddress.bluna.hub,
      contractAddress.cw20.bLuna,
      exchangeRate,
      estimateFee,
      gasPrice.uusd,
      init,
      openAlert,
      terraWalletAddress,
    ],
  );

  // ---------------------------------------------
  // effects
  // ---------------------------------------------
  useEffect(() => {
    if (!connectedWallet || burnAmount.length === 0) {
      setEstimatedGasWanted(null);
      setEstimatedFee(null);
      estimate(null);
      return;
    }

    const amount = floor(big(burnAmount).mul(MICRO));

    if (amount.lt(0) || amount.gt(bank.tokenBalances.ubLuna ?? 0)) {
      setEstimatedGasWanted(null);
      setEstimatedFee(null);
      estimate(null);
      return;
    }

    estimate([
      new MsgExecuteContract(
        connectedWallet.terraAddress,
        contractAddress.cw20.bLuna,
        {
          send: {
            contract: contractAddress.bluna.hub,
            amount: amount.toFixed(),
            msg: createHookMsg({
              unbond: {},
            }),
          },
        },
      ),
    ]);
  }, [
    bank.tokenBalances.ubLuna,
    burnAmount,
    connectedWallet,
    constants.bondGasWanted,
    contractAddress.bluna.hub,
    contractAddress.cw20.bLuna,
    estimate,
    estimateFee,
    fixedFee,
    gasPrice.uusd,
  ]);

  useEffect(() => {
    if (burnAmount.length > 0) {
      updateBurnAmount(burnAmount);
    }
    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // ---------------------------------------------
  // presentation
  // ---------------------------------------------
  if (
    burnResult?.status === StreamStatus.IN_PROGRESS ||
    burnResult?.status === StreamStatus.DONE
  ) {
    return (
      <TxResultRenderer
        resultRendering={burnResult.value}
        onExit={() => {
          init();
          switch (burnResult.status) {
            case StreamStatus.IN_PROGRESS:
              burnResult.abort();
              break;
            case StreamStatus.DONE:
              burnResult.clear();
              break;
          }
        }}
      />
    );
  }

  return (
    <div className={className}>
      {!!invalidTxFee && <MessageBox>{invalidTxFee}</MessageBox>}

      {pegRecoveryFee && (
        <MessageBox
          level="info"
          hide={{ id: 'burn_peg', period: 1000 * 60 * 60 * 24 * 7 }}
        >
          When exchange rate is lower than threshold,
          <br />
          protocol charges peg recovery fee for each Mint/Burn action.
        </MessageBox>
      )}

      <ConvertSymbolsContainer>
        <ConvertSymbols
          className="symbols"
          view="burn"
          fromIcon={<TokenIcon token="luna" />}
          toIcon={<TokenIcon token="bluna" />}
        />
      </ConvertSymbolsContainer>

      {/* Burn (bAsset) */}
      <div className="burn-description">
        <p>I want to burn</p>
        <p />
      </div>

      <SelectAndTextInputContainer
        className="burn"
        gridColumns={[140, '1fr']}
        error={!!invalidBurnAmount}
        leftHelperText={invalidBurnAmount}
        rightHelperText={
          connected && (
            <span>
              Balance:{' '}
              <span
                style={{ textDecoration: 'underline', cursor: 'pointer' }}
                onClick={() =>
                  updateBurnAmount(
                    formatLunaInput(demicrofy(bank.tokenBalances.ubLuna)),
                  )
                }
              >
                {formatLuna(demicrofy(bank.tokenBalances.ubLuna))} bLuna
              </span>
            </span>
          )
        }
      >
        <SelectAndTextInputContainerLabel>
          <TokenIcon token="bluna" /> bLuna
        </SelectAndTextInputContainerLabel>
        <NumberMuiInput
          placeholder="0.00"
          error={!!invalidBurnAmount}
          value={burnAmount}
          maxIntegerPoinsts={LUNA_INPUT_MAXIMUM_INTEGER_POINTS}
          maxDecimalPoints={LUNA_INPUT_MAXIMUM_DECIMAL_POINTS}
          onChange={({ target }: ChangeEvent<HTMLInputElement>) =>
            updateBurnAmount(target.value)
          }
        />
      </SelectAndTextInputContainer>

      <IconLineSeparator />

      {/* Get (Asset) */}
      <div className="gett-description">
        <p>and get</p>
        <p />
      </div>

      <SelectAndTextInputContainer
        className="gett"
        gridColumns={[140, '1fr']}
        error={!!invalidBurnAmount}
      >
        <SelectAndTextInputContainerLabel>
          <TokenIcon token="luna" /> Luna
        </SelectAndTextInputContainerLabel>
        <NumberMuiInput
          placeholder="0.00"
          error={!!invalidBurnAmount}
          value={getAmount}
          maxIntegerPoinsts={LUNA_INPUT_MAXIMUM_INTEGER_POINTS}
          maxDecimalPoints={LUNA_INPUT_MAXIMUM_DECIMAL_POINTS}
          onChange={({ target }: ChangeEvent<HTMLInputElement>) =>
            updateGetAmount(target.value)
          }
        />
      </SelectAndTextInputContainer>

      <HorizontalHeavyRuler />

      <BurnSwitch
        className="switch"
        style={{ marginBottom: 40 }}
        mode="burn"
        onChange={(mode) => mode === 'swap' && setMode('swap')}
      />

      <div className="guide" style={{ marginBottom: 40 }}>
        <h4>
          <InfoOutlined /> Burn
        </h4>
        <ul>
          <li>
            Default bLuna redemptions take at least 21 days to process. Slashing
            events during the 21 days may affect the final amount withdrawn.
          </li>
          <li>
            Redemptions are processed in 3-day batches and may take up to 24
            days.
          </li>
        </ul>
      </div>

      <TxFeeList className="receipt">
        {exchangeRate && (
          <SwapListItem
            label="Price"
            currencyA="Luna"
            currencyB="bLuna"
            initialDirection="a/b"
            exchangeRateAB={exchangeRate.exchange_rate}
            formatExchangeRate={(ratio) => formatLuna(ratio as Luna<Big>)}
          />
        )}
        {!!pegRecoveryFee && getAmount.length > 0 && (
          <TxFeeListItem label={<IconSpan>Peg Recovery Fee</IconSpan>}>
            {formatLuna(demicrofy(pegRecoveryFee(getAmount)))} LUNA
          </TxFeeListItem>
        )}
        {burnAmount.length > 0 && estimatedFee && (
          <TxFeeListItem label={<IconSpan>Estimated Tx Fee</IconSpan>}>
            ≈ {formatUST(demicrofy(estimatedFee))} UST
          </TxFeeListItem>
        )}
      </TxFeeList>

      {/* Submit */}
      <ViewAddressWarning>
        <ActionButton
          className="submit"
          disabled={
            !availablePost ||
            !connected ||
            !burn ||
            burnAmount.length === 0 ||
            big(burnAmount).lte(0) ||
            !!invalidTxFee ||
            !!invalidBurnAmount ||
            estimatedGasWanted === null ||
            estimatedFee === null
          }
          onClick={() => proceed(burnAmount)}
        >
          Burn
        </ActionButton>
      </ViewAddressWarning>

      {alertElement}
    </div>
  );
}

export function Component({
  className,
  burnAmount,
  getAmount,
  setGetAmount,
  setBurnAmount,
  fixedFee,
  setMode,
}: SwapProps) {
  // ---------------------------------------------
  // dependencies
  // ---------------------------------------------
  const { availablePost, connected } = useAccount();

  const { queryClient, contractAddress: address } = useAnchorWebapp();

  const [swap, swapResult] = useBondSwapTx();

  // ---------------------------------------------
  // states
  // ---------------------------------------------
  const [slippage, setSlippage] = useState<number>(0.05);

  const [resolveSimulation, simulation] = useResolveLast<
    SwapSimulation<Luna, bLuna> | undefined | null
  >(() => null);

  // ---------------------------------------------
  // queries
  // ---------------------------------------------
  const bank = useAnchorBank();

  // ---------------------------------------------
  // logics
  // ---------------------------------------------
  const invalidTxFee = useMemo(
    () => connected && validateTxFee(bank.tokenBalances.uUST, fixedFee),
    [bank, fixedFee, connected],
  );

  const invalidBurnAmount = useMemo(
    () => connected && validateBurnAmount(burnAmount, bank),
    [bank, burnAmount, connected],
  );

  // ---------------------------------------------
  // effects
  // ---------------------------------------------
  useEffect(() => {
    if (simulation?.getAmount) {
      setGetAmount(formatLunaInput(demicrofy(simulation?.getAmount)));
    }
  }, [setGetAmount, simulation?.getAmount]);

  useEffect(() => {
    if (simulation?.burnAmount) {
      setBurnAmount(formatLunaInput(demicrofy(simulation?.burnAmount)));
    }
  }, [setBurnAmount, simulation?.burnAmount]);

  // ---------------------------------------------
  // callbacks
  // ---------------------------------------------
  const updateBurnAmount = useCallback(
    async (nextBurnAmount: string, maxSpread: number) => {
      if (nextBurnAmount.trim().length === 0) {
        setGetAmount('' as Luna);
        setBurnAmount('' as bLuna);

        resolveSimulation(null);
      } else if (isZero(nextBurnAmount)) {
        setGetAmount('' as Luna);
        setBurnAmount(nextBurnAmount as bLuna);

        resolveSimulation(null);
      } else {
        const burnAmount: bLuna = nextBurnAmount as bLuna;
        setBurnAmount(burnAmount);

        const amount = microfy(burnAmount).toString() as u<bLuna>;

        resolveSimulation(
          terraswapSimulationQuery(
            address.terraswap.blunaLunaPair,
            {
              info: {
                token: {
                  contract_addr: address.cw20.bLuna,
                },
              },
              amount,
            },
            queryClient,
          ).then(({ simulation }) => {
            return simulation
              ? swapGetSimulation(
                  simulation as terraswap.pair.SimulationResponse<Luna>,
                  amount,
                  bank.tax,
                  maxSpread,
                )
              : undefined;
          }),
        );
      }
    },
    [
      address.cw20.bLuna,
      address.terraswap.blunaLunaPair,
      bank.tax,
      queryClient,
      resolveSimulation,
      setBurnAmount,
      setGetAmount,
    ],
  );

  const updateGetAmount = useCallback(
    (nextGetAmount: string, maxSpread: number) => {
      if (nextGetAmount.trim().length === 0) {
        setBurnAmount('' as bLuna);
        setGetAmount('' as Luna);

        resolveSimulation(null);
      } else if (isZero(nextGetAmount)) {
        setBurnAmount('' as bLuna);
        setGetAmount(nextGetAmount as Luna);

        resolveSimulation(null);
      } else {
        const getAmount: Luna = nextGetAmount as Luna;
        setGetAmount(getAmount);

        const amount = microfy(getAmount).toString() as u<Luna>;

        resolveSimulation(
          terraswapSimulationQuery(
            address.terraswap.blunaLunaPair,
            {
              info: {
                native_token: {
                  denom: 'uluna' as NativeDenom,
                },
              },
              amount,
            },
            queryClient,
          ).then(({ simulation }) => {
            return simulation
              ? swapBurnSimulation(
                  simulation as terraswap.pair.SimulationResponse<Luna>,
                  amount,
                  bank.tax,
                  maxSpread,
                )
              : undefined;
          }),
        );
      }
    },
    [
      address.terraswap.blunaLunaPair,
      bank.tax,
      queryClient,
      resolveSimulation,
      setBurnAmount,
      setGetAmount,
    ],
  );

  const updateSlippage = useCallback(
    (nextSlippage: number) => {
      setSlippage(nextSlippage);
      updateBurnAmount(burnAmount, nextSlippage);
    },
    [burnAmount, updateBurnAmount],
  );

  const init = useCallback(() => {
    setGetAmount('' as Luna);
    setBurnAmount('' as bLuna);
  }, [setGetAmount, setBurnAmount]);

  const proceed = useCallback(
    (burnAmount: bLuna, beliefPrice: Rate, maxSpread: number) => {
      if (!connected || !swap) {
        return;
      }

      swap({
        burnAmount,
        beliefPrice: formatExecuteMsgNumber(big(1).div(beliefPrice)) as Rate,
        maxSpread,
        onTxSucceed: () => {
          init();
        },
      });
    },
    [connected, swap, init],
  );

  // ---------------------------------------------
  // effects
  // ---------------------------------------------
  useEffect(() => {
    if (burnAmount.length > 0) {
      updateBurnAmount(burnAmount, slippage);
    }
    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // ---------------------------------------------
  // presentation
  // ---------------------------------------------
  if (
    swapResult?.status === StreamStatus.IN_PROGRESS ||
    swapResult?.status === StreamStatus.DONE
  ) {
    return (
      <TxResultRenderer
        resultRendering={swapResult.value}
        onExit={() => {
          init();
          switch (swapResult.status) {
            case StreamStatus.IN_PROGRESS:
              swapResult.abort();
              break;
            case StreamStatus.DONE:
              swapResult.clear();
              break;
          }
        }}
      />
    );
  }

  return (
    <div className={className}>
      {!!invalidTxFee && <MessageBox>{invalidTxFee}</MessageBox>}

      <ConvertSymbolsContainer>
        <ConvertSymbols
          className="symbols"
          view="burn"
          fromIcon={<TokenIcon token="luna" />}
          toIcon={<TokenIcon token="bluna" />}
        />
      </ConvertSymbolsContainer>

      {/* Burn (bAsset) */}
      <div className="burn-description">
        <p>I want to burn</p>
        <p />
      </div>

      <SelectAndTextInputContainer
        className="burn"
        gridColumns={[140, '1fr']}
        error={!!invalidBurnAmount}
        leftHelperText={invalidBurnAmount}
        rightHelperText={
          connected && (
            <span>
              Balance:{' '}
              <span
                style={{ textDecoration: 'underline', cursor: 'pointer' }}
                onClick={() =>
                  updateBurnAmount(
                    formatLunaInput(demicrofy(bank.tokenBalances.ubLuna)),
                    slippage,
                  )
                }
              >
                {formatLuna(demicrofy(bank.tokenBalances.ubLuna))} bLuna
              </span>
            </span>
          )
        }
      >
        <SelectAndTextInputContainerLabel>
          <TokenIcon token="bluna" /> bLuna
        </SelectAndTextInputContainerLabel>
        <NumberMuiInput
          placeholder="0.00"
          error={!!invalidBurnAmount}
          value={burnAmount}
          maxIntegerPoinsts={LUNA_INPUT_MAXIMUM_INTEGER_POINTS}
          maxDecimalPoints={LUNA_INPUT_MAXIMUM_DECIMAL_POINTS}
          onChange={({ target }: ChangeEvent<HTMLInputElement>) =>
            updateBurnAmount(target.value, slippage)
          }
        />
      </SelectAndTextInputContainer>

      <IconLineSeparator />

      {/* Get (Asset) */}
      <div className="gett-description">
        <p>and get</p>
        <p />
      </div>

      <SelectAndTextInputContainer
        className="gett"
        gridColumns={[140, '1fr']}
        error={!!invalidBurnAmount}
      >
        <SelectAndTextInputContainerLabel>
          <TokenIcon token="luna" /> Luna
        </SelectAndTextInputContainerLabel>
        <NumberMuiInput
          placeholder="0.00"
          error={!!invalidBurnAmount}
          value={getAmount}
          maxIntegerPoinsts={LUNA_INPUT_MAXIMUM_INTEGER_POINTS}
          maxDecimalPoints={LUNA_INPUT_MAXIMUM_DECIMAL_POINTS}
          onChange={({ target }: ChangeEvent<HTMLInputElement>) =>
            updateGetAmount(target.value, slippage)
          }
        />
      </SelectAndTextInputContainer>

      <HorizontalHeavyRuler />

      <BurnSwitch
        className="switch"
        style={{ marginBottom: 20 }}
        mode="swap"
        onChange={(mode) => mode === 'burn' && setMode('burn')}
      />

      <DiscloseSlippageSelector
        className="slippage"
        items={SLIPPAGE_VALUES}
        value={slippage}
        onChange={updateSlippage}
        helpText={
          slippage < LOW_SLIPPAGE ? (
            <SlippageSelectorNegativeHelpText>
              The transaction may fail
            </SlippageSelectorNegativeHelpText>
          ) : slippage > FRONTRUN_SLIPPAGE ? (
            <SlippageSelectorNegativeHelpText>
              The transaction may be frontrun
            </SlippageSelectorNegativeHelpText>
          ) : undefined
        }
      />

      <div className="guide" style={{ marginBottom: 40 }}>
        <h4>
          <InfoOutlined /> Instant burn
        </h4>
        <ul>
          <li>
            Instant burn may lead to additional fees, resulting in less Luna
            received.
          </li>
        </ul>
      </div>

      {burnAmount.length > 0 && simulation && (
        <TxFeeList className="receipt">
          <SwapListItem
            label="Price"
            currencyA="bLUNA"
            currencyB="LUNA"
            exchangeRateAB={simulation.beliefPrice}
            initialDirection="a/b"
            formatExchangeRate={(price) =>
              formatFluidDecimalPoints(
                price,
                LUNA_INPUT_MAXIMUM_DECIMAL_POINTS,
                { delimiter: true },
              )
            }
          />
          <TxFeeListItem label="Minimum Received">
            {formatLuna(demicrofy(simulation.minimumReceived))} LUNA
          </TxFeeListItem>
          <TxFeeListItem label="Trading Fee">
            {formatLuna(demicrofy(simulation.swapFee))} LUNA
          </TxFeeListItem>
          <TxFeeListItem label="Tx Fee">
            {formatUST(demicrofy(fixedFee))} UST
          </TxFeeListItem>
        </TxFeeList>
      )}

      {/* Submit */}
      <ViewAddressWarning>
        <ActionButton
          className="submit"
          disabled={
            !availablePost ||
            !connected ||
            !swap ||
            !simulation ||
            burnAmount.length === 0 ||
            big(burnAmount).lte(0) ||
            !!invalidTxFee ||
            !!invalidBurnAmount ||
            big(simulation?.swapFee ?? 0).lte(0)
          }
          onClick={() =>
            simulation && proceed(burnAmount, simulation.beliefPrice, slippage)
          }
        >
          Burn
        </ActionButton>
      </ViewAddressWarning>
    </div>
  );
}