react-feather#Lock TypeScript Examples

export default function CurrencyInputPanel({
  value,
  onUserInput,
  onMax,
  showMaxButton,
  onCurrencySelect,
  currency,
  otherCurrency,
  id,
  showCommonBases,
  customBalanceText,
  fiatValue,
  priceImpact,
  hideBalance = false,
  pair = null, // used for double token logo
  hideInput = false,
  locked = false,
  showCurrencySelector = true,
  showRate = false,
  isInvertedRate = false,
  realExecutionPrice,
  realExecutionPriceAsString,
  rateType,
  ...rest
}: CurrencyInputPanelProps) {
  const [modalOpen, setModalOpen] = useState(false);
  const [showInverted, setShowInverted] = useState<boolean>(true);

  const { account, chainId } = useWeb3();
  const selectedCurrencyBalance = useCurrencyBalance(
    account ?? undefined,
    currency ?? undefined
  );
  const theme = useTheme();

  const handleDismissSearch = useCallback(() => {
    setModalOpen(false);
  }, [setModalOpen]);

  const isEthereum = chainId && isEthereumChain(chainId);

  const rate = useMemo(
    () =>
      currency && otherCurrency && value
        ? `1 ${
            isInvertedRate ? otherCurrency?.symbol : currency?.symbol
          } = ${value} ${
            isInvertedRate ? currency?.symbol : otherCurrency?.symbol
          }`
        : undefined,
    [currency, isInvertedRate, otherCurrency, value]
  );

  const realExecutionRateExplainer = useMemo(
    () =>
      currency && otherCurrency && realExecutionPriceAsString
        ? realExecutionPriceAsString === "never executes"
          ? realExecutionPriceAsString
          : `1 ${
              isInvertedRate ? otherCurrency?.symbol : currency?.symbol
            } = ${realExecutionPriceAsString} ${
              isInvertedRate ? currency?.symbol : otherCurrency?.symbol
            }`
        : undefined,
    [currency, isInvertedRate, otherCurrency, realExecutionPriceAsString]
  );

  return (
    <InputPanel id={id} hideInput={hideInput} {...rest}>
      {locked && (
        <FixedContainer>
          <AutoColumn gap="sm" justify="center">
            <Lock />
            <TYPE.label fontSize="12px" textAlign="center">
              The market price is outside your specified price range.
              Single-asset deposit only.
            </TYPE.label>
          </AutoColumn>
        </FixedContainer>
      )}
      <Container hideInput={hideInput}>
        <InputRow
          style={hideInput ? { padding: "0", borderRadius: "8px" } : {}}
          selected={!onCurrencySelect}
        >
          {showCurrencySelector ? (
            <CurrencySelect
              selected={!!currency}
              hideInput={hideInput}
              className="open-currency-select-button"
              onClick={() => {
                if (onCurrencySelect) {
                  setModalOpen(true);
                }
              }}
            >
              <Aligner>
                <RowFixed>
                  {pair ? (
                    <span style={{ marginRight: "0.5rem" }}>
                      <DoubleCurrencyLogo
                        currency0={pair.token0}
                        currency1={pair.token1}
                        size={24}
                        margin={true}
                      />
                    </span>
                  ) : currency ? (
                    <CurrencyLogo
                      style={{ marginRight: "0.5rem" }}
                      currency={currency}
                      size={"24px"}
                    />
                  ) : null}
                  {pair ? (
                    <StyledTokenName className="pair-name-container">
                      {pair?.token0.symbol}:{pair?.token1.symbol}
                    </StyledTokenName>
                  ) : (
                    <StyledTokenName
                      className="token-symbol-container"
                      active={Boolean(currency && currency.symbol)}
                    >
                      {(currency &&
                      currency.symbol &&
                      currency.symbol.length > 20
                        ? currency.symbol.slice(0, 4) +
                          "..." +
                          currency.symbol.slice(
                            currency.symbol.length - 5,
                            currency.symbol.length
                          )
                        : currency?.symbol) || "Select a token"}
                    </StyledTokenName>
                  )}
                </RowFixed>
                {onCurrencySelect && <StyledDropDown selected={!!currency} />}
              </Aligner>
            </CurrencySelect>
          ) : null}

          {showRate && (
            <RowFixed style={{ height: "17px" }}>
              <MouseoverTooltip
                text={`The virtual price that will determine your output amount. ${
                  chainId && isEthereumChain(chainId)
                    ? "It does not account execution gas costs. For that check the actual execution rate below."
                    : ""
                } ${rate ? rate + "." : ""}`}
              >
                <TYPE.main>{"Price"}</TYPE.main>
              </MouseoverTooltip>
            </RowFixed>
          )}

          {!hideInput && (
            <NumericalInput
              className="token-amount-input"
              value={value}
              onUserInput={(val) => {
                onUserInput(val);
              }}
            />
          )}
        </InputRow>
        {!hideInput && !hideBalance && !showRate && (
          <FiatRow>
            <RowBetween>
              {account ? (
                <RowFixed style={{ height: "17px" }}>
                  <TYPE.body
                    onClick={onMax}
                    color={theme.text2}
                    fontWeight={400}
                    fontSize={14}
                    style={{ display: "inline", cursor: "pointer" }}
                  >
                    {!hideBalance && !!currency && selectedCurrencyBalance
                      ? (customBalanceText ?? "Balance: ") +
                        formatTokenAmount(selectedCurrencyBalance, 4) +
                        " " +
                        currency.symbol
                      : "-"}
                  </TYPE.body>
                  {showMaxButton && selectedCurrencyBalance ? (
                    <StyledBalanceMax onClick={onMax}>(Max)</StyledBalanceMax>
                  ) : null}
                </RowFixed>
              ) : (
                "-"
              )}
              {!rateType ? (
                <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
              ) : (
                //  Only show on output panel
                <RatePercentage
                  priceImpact={priceImpact}
                  rateType={rateType}
                  inputCurrency={otherCurrency}
                  outputCurrency={currency}
                />
              )}
            </RowBetween>
          </FiatRow>
        )}

        {showRate && value && currency && otherCurrency && isEthereum && (
          <Fragment>
            <FiatRow>
              <RowBetween>
                {currency && otherCurrency ? (
                  <MouseoverTooltip
                    text={`The actual execution price. Takes into account the gas necessary to execute your order and guarantees that your desired rate is fulfilled. It fluctuates according to gas prices. ${
                      rate
                        ? `Assuming current gas price it should execute when ` +
                          realExecutionRateExplainer +
                          "."
                        : ""
                    }`}
                  >
                    <TYPE.body
                      onClick={onMax}
                      color={theme.text2}
                      fontWeight={400}
                      fontSize={14}
                      style={{ display: "inline", cursor: "pointer" }}
                    >
                      Real execution price (?)
                    </TYPE.body>
                  </MouseoverTooltip>
                ) : (
                  "-"
                )}
                {realExecutionPrice ? (
                  <TradePrice
                    price={realExecutionPrice}
                    showInverted={showInverted}
                    setShowInverted={setShowInverted}
                  />
                ) : (
                  <TYPE.body
                    fontSize={14}
                    color={
                      realExecutionRateExplainer ? theme.text2 : theme.text4
                    }
                  >
                    {/* {realExecutionRateExplainer ? "~" : ""} */}
                    <HoverInlineText
                      text={
                        realExecutionRateExplainer
                          ? realExecutionRateExplainer
                          : "-"
                      }
                    />
                  </TYPE.body>
                )}
              </RowBetween>
            </FiatRow>
          </Fragment>
        )}
      </Container>
      {onCurrencySelect && (
        <CurrencySearchModal
          isOpen={modalOpen}
          onDismiss={handleDismissSearch}
          onCurrencySelect={onCurrencySelect}
          selectedCurrency={currency}
          otherSelectedCurrency={otherCurrency}
          showCommonBases={showCommonBases}
        />
      )}
    </InputPanel>
  );
}