{"version":3,"file":"static/chunks/407-3c8db08dc8b2ebcf.js","mappings":"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","sources":["webpack://_N_E/./src/ui/Common/components/AmountDisplay/AmountDisplay.tsx","webpack://_N_E/./src/ui/Common/components/Animation/AnimatedSpinnerIcon.tsx","webpack://_N_E/./src/ui/Common/components/Button/styles.tsx","webpack://_N_E/./src/ui/Icons/components/ArrowIcon.tsx","webpack://_N_E/./src/ui/Common/components/Button/Button.tsx","webpack://_N_E/./src/ui/Common/components/Button/interface.ts","webpack://_N_E/./src/ui/Common/components/Tooltip/styles.ts","webpack://_N_E/./src/ui/Common/components/Tooltip/Tooltip.tsx","webpack://_N_E/./src/ui/Common/util/format/amountFormat.ts","webpack://_N_E/./src/ui/Common/util/format/formatBN.ts","webpack://_N_E/./src/ui/Common/util/hooks/useElementPlacement.ts","webpack://_N_E/./src/ui/Common/util/lang/TypeUtils.ts"],"sourcesContent":["import BigNumber from 'bignumber.js'\nimport React, { PropsWithChildren, useMemo } from 'react'\nimport Tooltip from 'ui/Common/components/Tooltip'\nimport {\n  formatAmount,\n  formatBalanceAmount,\n  formatBalanceFiatAmount,\n  formatFeeAmount,\n  formatFeeFiatAmount,\n  formatFiatAmount,\n} from 'ui/Common/util/format/amountFormat'\n\nexport type AmountType = 'fee' | 'balance' | 'default'\n\n// -- Prop types\n// ----------\n\nexport interface AmountDisplayProps {\n  /** Amount value */\n  amount: BigNumber | undefined\n  /**\n   * Amount type. Determines which rules of formatting and rounding will be used.\n   *\n   * Possible value: 'fee', 'balance', 'default'\n   *\n   * See `ui/Common/util/format/amountFormat` for details\n   */\n  type: AmountType\n  /** Should amount be rendered as fiat? Iow. should we add a currency symbol. Defaults to `false`. */\n  fiat?: boolean\n  /** Should we show tooltip with full amount? Defaults to `true`. */\n  showTooltip?: boolean\n  /** What to show if amount is invalid (empty, NaN, ...). Defaults to '-'. */\n  fallback?: React.ReactNode\n}\n\n// -- Component\n// ----------\n\n/**\n * Display formatted amount value or fallback with optional tooltip.\n */\nconst AmountDisplay: React.FC<PropsWithChildren<AmountDisplayProps>> = ({\n  amount,\n  type,\n  fiat = false,\n  showTooltip = true,\n  fallback: fallbackDisplay = '-',\n}) => {\n  const isAmountValid = amount != null && !amount.isNaN()\n\n  const formattedAmount = useMemo(() => {\n    if (isAmountValid) {\n      if (type === 'fee') {\n        if (fiat) {\n          return formatFeeFiatAmount(amount)\n        } else {\n          return formatFeeAmount(amount)\n        }\n      } else if (type === 'balance') {\n        if (fiat) {\n          return formatBalanceFiatAmount(amount)\n        } else {\n          return formatBalanceAmount(amount)\n        }\n      } else {\n        if (fiat) {\n          return formatFiatAmount(amount)\n        } else {\n          return formatAmount(amount)\n        }\n      }\n    }\n  }, [amount, fiat, type, isAmountValid])\n\n  return showTooltip && isAmountValid ? (\n    <Tooltip text={amount.toFormat()}>{formattedAmount}</Tooltip>\n  ) : (\n    <>{formattedAmount ?? fallbackDisplay}</>\n  )\n}\n\nexport { AmountDisplay }\n","import styled from 'styled-components'\n\nconst RotatingContainer = styled.svg`\n  animation: spin 1s ease-in-out infinite;\n  @keyframes spin {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`\n\nexport function AnimatedSpinnerIcon({ size }: { size?: number }) {\n  return (\n    <RotatingContainer\n      width={size ?? 20}\n      height={size ?? 20}\n      viewBox=\"0 0 20 20\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      stroke=\"#f9fafb\"\n    >\n      <g stroke=\"#F9FAFB\">\n        <path d=\"M3.915 12.727a6.667 6.667 0 111.853 2.425\" fill=\"none\" />\n      </g>\n    </RotatingContainer>\n  )\n}\n","import { ButtonVariant } from './interface'\nimport get from 'lodash/get'\nimport styled from 'styled-components'\nimport { LARGE_BREAKPOINT } from 'ui/Common/components/Grid'\n\nexport const BackButton = styled.button<{ bgColor?: string }>`\n  border: none;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n\n  height: 24px;\n\n  overflow: hidden;\n\n  border-radius: 4px;\n  background-color: ${(p) => p.bgColor || p.theme.colors.grey.grey3};\n\n  padding: 0;\n  margin: 3px 0;\n\n  font-size: 12px;\n\n  line-height: 16px;\n  letter-spacing: 1.2px;\n\n  white-space: nowrap;\n\n  display: flex;\n  align-items: center;\n\n  > span {\n    display: none;\n  }\n\n  :hover {\n    > span {\n      display: initial;\n      margin-right: 12px;\n    }\n  }\n\n  :active {\n    background-color: ${(p) =>\n      p.bgColor ? p.theme.colors.grey.grey9 : p.theme.colors.grey.grey4};\n  }\n`\n\n// don't use grays from the theme because backgrounds doesn't change with theme\nexport const Button = styled.button<{\n  bgColor?: string\n  color?: string\n  variant?: ButtonVariant\n}>`\n  outline: none;\n  user-select: none;\n  cursor: pointer;\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 1.2px;\n  transition: background-color 0.1s, color 0.1s;\n\n  > span {\n    display: flex;\n    align-items: center;\n  }\n\n  ${(p) => {\n    const secondaryShared = `\n      padding: 0 16px;\n      background-color: ${\n        p.bgColor ? get(p.theme.colors, p.bgColor, p.bgColor) : 'transparent'\n      };\n      border-radius: 6px;\n      color: ${\n        p.color\n          ? get(p.theme.colors, p.color, p.color)\n          : p.theme.colors.grey.grey6\n      };\n      border: 2px solid ${\n        p.color\n          ? get(p.theme.colors, p.color, p.color)\n          : p.theme.colors.grey.grey5\n      };\n      text-transform: uppercase;\n\n      // make icon the same color as font\n      svg {\n        width: 18px;\n        height: 18px;\n        stroke: ${\n          p.color\n            ? get(p.theme.colors, p.color, p.color)\n            : p.theme.colors.grey.grey6\n        };\n        fill: ${\n          p.color\n            ? get(p.theme.colors, p.color, p.color)\n            : p.theme.colors.grey.grey6\n        };\n      }\n\n      &:hover {\n        background-color: ${\n          p.color\n            ? get(p.theme.colors, p.color, p.color)\n            : p.theme.colors.grey.grey6\n        };\n        border-color: transparent;\n        color: white;\n      }\n\n      &:active {\n        background-color: ${\n          p.color\n            ? get(p.theme.colors, p.color, p.color)\n            : p.theme.colors.grey.grey7\n        };\n        border-color: transparent;\n        color: white;\n      }\n\n      &:disabled {\n        cursor: initial;\n        background-color: rgba(0, 0, 0, 0.3);\n\n        &:hover {\n          background-color: rgba(0, 0, 0, 0.3);\n          color: ${\n            p.color\n              ? get(p.theme.colors, p.color, p.color)\n              : p.theme.colors.grey.grey6\n          };\n        }\n      }\n    `\n\n    switch (p.variant) {\n      case ButtonVariant.Secondary:\n        return `\n          height: 28px;\n          ${secondaryShared};\n      `\n\n      case ButtonVariant.SecondarySmall:\n        return `\n          height: 24px;\n          ${secondaryShared};\n        `\n\n      case ButtonVariant.Text:\n        return `\n          text-transform: uppercase;\n          border: none;\n          padding: 8px;\n          background-color: transparent;\n          color: ${p.color ? get(p.theme.colors, p.color, p.color) : 'white'};\n\n          // make icon the same color as font\n          svg {\n            width: 18px;\n            height: 18px;\n            stroke: ${\n              p.color ? get(p.theme.colors, p.color, p.color) : 'white'\n            };\n            fill: ${p.color ? get(p.theme.colors, p.color, p.color) : 'white'};\n          }\n        `\n\n      case ButtonVariant.Tertiary:\n        return `\n          border: none;\n          height: 32px;\n          padding: 0 18px;\n          background-color: ${\n            p.bgColor ? get(p.theme.colors, p.bgColor, p.bgColor) : 'white'\n          };\n          border-radius: 22.5px;\n          color: ${\n            p.color\n              ? get(p.theme.colors, p.color, p.color)\n              : p.theme.colors.grey.grey10\n          };\n\n          // make icon the same color as font\n          svg {\n            width: 18px;\n            height: 18px;\n            stroke: ${\n              p.color\n                ? get(p.theme.colors, p.color, p.color)\n                : p.theme.colors.grey.grey10\n            };\n            fill: ${\n              p.color\n                ? get(p.theme.colors, p.color, p.color)\n                : p.theme.colors.grey.grey10\n            };\n          }\n\n          &:hover {\n            background-color: ${p.theme.colors.grey.grey3};\n          }\n\n          &:active {\n            background-color: ${p.theme.colors.grey.grey2};\n          }\n\n          &:disabled {\n            cursor: initial;\n            background-color: rgba(0, 0, 0, 0.3);\n\n            &:hover {\n              background-color: rgba(0, 0, 0, 0.3);\n          }\n      `\n\n      case ButtonVariant.Primary:\n      default:\n        return `\n          border: none;\n          padding: 0 36px;\n          height: 64px;\n\n          @media (max-width: ${LARGE_BREAKPOINT}px) {\n            height: 48px;\n          }\n\n          background-color: ${\n            p.bgColor ? get(p.theme.colors, p.bgColor, p.bgColor) : 'black'\n          };\n          border-radius: 8px;\n          color: ${p.color ? get(p.theme.colors, p.color, p.color) : 'white'};\n          text-transform: uppercase;\n\n          // make icon the same color as font\n          svg {\n            width: 18px;\n            height: 18px;\n            stroke: ${\n              p.color ? get(p.theme.colors, p.color, p.color) : 'white'\n            };\n            fill: ${p.color ? get(p.theme.colors, p.color, p.color) : 'white'};\n          }\n\n          &:hover {\n            background-color: ${p.theme.colors.grey.grey9}\n          }\n\n          &:active {\n            background-color: ${p.theme.colors.grey.grey10};\n          }\n\n          &:disabled {\n            cursor: initial;\n            background-color: rgba(0, 0, 0, 0.3);\n\n            > span {\n            opacity: 0.5;\n            }\n\n            &:hover {\n              background-color: rgba(0, 0, 0, 0.3);\n          }\n  }\n    `\n    }\n  }};\n`\n","import React from 'react'\n\nexport const ArrowIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"m8.352 11.864 6-3.75a.748.748 0 0 1 1.148.636v7.5a.75.75 0 0 1-1.148.636l-6-3.75a.75.75 0 0 1 0-1.272z\"\n      fill={props.fill || '#4D5461'}\n      fillRule=\"nonzero\"\n    />\n  </svg>\n)\n","import { BackButtonProps, ButtonProps } from './interface'\nimport * as S from './styles'\nimport React from 'react'\nimport { ArrowIcon } from 'ui/Icons/components/ArrowIcon'\n\n/**\n * Basic button component. Content of a button is passed as `children` prop. This allows adding icons, etc.\n */\nexport const Button = ({ children, ...props }: ButtonProps) => {\n  return (\n    <S.Button type=\"button\" {...props}>\n      <span>{children}</span>\n    </S.Button>\n  )\n}\n\n/**\n * Back button component.\n */\nexport const BackButton = ({ bgColor, fill, ...props }: BackButtonProps) => {\n  return (\n    <S.BackButton bgColor={bgColor} type=\"button\" {...props}>\n      <ArrowIcon fill={fill} /> <span style={{ color: fill }}>Back</span>\n    </S.BackButton>\n  )\n}\n","import { ColorKey } from 'app/styles/colors'\nimport { CSSProperties, ReactNode } from 'react'\n\nexport enum ButtonVariant {\n  Primary = 'Primary',\n  Secondary = 'Secondary',\n  SecondarySmall = 'SecondarySmall',\n  // Outlined = 'Outlined',\n  // Small = 'Small',\n  // Rounded = 'Rounded',\n  Tertiary = 'Tertiary',\n  Text = 'Text',\n}\n\nexport interface ButtonProps {\n  /**\n   * Contents of a button\n   */\n  children: ReactNode\n  /**\n   * Called on button click\n   */\n  onClick?: () => void\n  /**\n   * Button is disabled -> not interactive\n   */\n  disabled?: boolean\n  /**\n   * color of a text and border if exists\n   */\n  color?: ColorKey | string\n  /**\n   * background color\n   */\n  bgColor?: ColorKey | string\n  /**\n   * use secondary button styles -> smaller, transparent, with border, tertiary\n   */\n  variant?: ButtonVariant\n  /**\n   * CSS style overrides\n   */\n  style?: CSSProperties\n  /**\n   * Element tab index\n   */\n  tabIndex?: number\n}\n\nexport interface BackButtonProps {\n  /**\n   * Called on button click\n   */\n  onClick?: () => void\n  /**\n   * color of a back icon\n   */\n  fill?: ColorKey | string\n  /**\n   * background color\n   */\n  bgColor?: ColorKey | string\n  /**\n   * CSS style overrides\n   */\n  style?: CSSProperties\n  /**\n   * Element tab index\n   */\n  tabIndex?: number\n}\n","import styled, { css, keyframes } from 'styled-components'\nimport { ElementPlacement } from 'ui/Common/util/hooks/useElementPlacement'\n\nexport const Tooltip = styled.div`\n  display: inline-block;\n  position: relative;\n`\n\n// animate tooltip visibility popup to look nicer AND to hide it before repositioning it\nconst PopupAnimation = keyframes`\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n`\n\nexport const Popup = styled.div<{\n  placement: ElementPlacement\n  multiline?: boolean\n}>`\n  animation: ${PopupAnimation} 0.2s;\n\n  min-width: 64px;\n  max-width: 256px;\n  position: absolute;\n  width: ${(p) => (p.multiline ? '256px' : 'auto')};\n  padding: 16px 20px;\n\n  border-radius: 2px;\n  background-color: #fff;\n  box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.15);\n\n  display: inline-flex;\n  align-items: center;\n  color: ${(p) => p.theme.colors.grey.grey10};\n\n  z-index: 100;\n\n  // ----- popup pointer (arrow/triangle created using borders)\n  &::after {\n    content: '';\n    position: absolute;\n    border: ${(p) => p.theme.spacing.xxs}px solid transparent;\n\n    // ----- vertical placement\n\n    // start-end\n    ${(p) =>\n      isPlacementVertical(p.placement) &&\n      css`\n        ${isPlacementCentered(p.placement) &&\n        css`\n          transform: translateX(-50%);\n          left: 50%;\n        `}\n        ${isPlacementStart(p.placement) &&\n        css`\n          left: 12%;\n        `}\n        ${isPlacementEnd(p.placement) &&\n        css`\n          right: 12%;\n        `}\n      `}\n\n    // top\n    ${(p) =>\n      p.placement.startsWith('top') &&\n      css`\n        top: 100%;\n        border-top-color: white;\n      `}\n    // bottom\n    ${(p) =>\n      p.placement.startsWith('bottom') &&\n      css`\n        bottom: 100%;\n        border-bottom-color: white;\n      `}\n\n    // ----- horizontal placement\n\n    // start-end\n    ${(p) =>\n      isPlacementHorizontal(p.placement) &&\n      css`\n        ${isPlacementCentered(p.placement) &&\n        css`\n          transform: translateY(-50%);\n          top: 50%;\n        `}\n        ${isPlacementStart(p.placement) &&\n        css`\n          top: 12%;\n        `}\n        ${isPlacementEnd(p.placement) &&\n        css`\n          bottom: 12%;\n        `}\n      `}\n\n    // right\n    ${(p) =>\n      p.placement.startsWith('right') &&\n      css`\n        right: 100%;\n        border-right-color: white;\n      `}\n    // left\n    ${(p) =>\n      p.placement.startsWith('left') &&\n      css`\n        left: 100%;\n        border-left-color: white;\n      `}\n  }\n`\n\nfunction isPlacementVertical(placement: ElementPlacement) {\n  return placement.startsWith('top') || placement.startsWith('bottom')\n}\nfunction isPlacementHorizontal(placement: ElementPlacement) {\n  return placement.startsWith('right') || placement.startsWith('left')\n}\nfunction isPlacementStart(placement: ElementPlacement) {\n  return placement.endsWith('start')\n}\nfunction isPlacementEnd(placement: ElementPlacement) {\n  return placement.endsWith('end')\n}\nfunction isPlacementCentered(placement: ElementPlacement) {\n  return !isPlacementStart(placement) && !isPlacementEnd(placement)\n}\n","import * as S from './styles'\nimport React, {\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport Box from 'ui/Common/components/Box'\nimport Text from 'ui/Common/components/Text'\nimport {\n  ElementPlacement,\n  useElementPlacement,\n} from 'ui/Common/util/hooks/useElementPlacement'\n\nconst TOOLTIP_OVER_TIMEOUT_DEFAULT = 300 // in millis\nconst TOOLTIP_OUT_TIMEOUT_DEFAULT = 200 // in millis\nconst PLACEMENT_DEFAULT: ElementPlacement = 'top'\n\n/**\n * Tooltip interface.\n */\ntype TooltipProps = React.PropsWithChildren<{\n  /**\n   * Alignment of the popup relative to the anchor element.\n   */\n  placement?: ElementPlacement\n  /**\n   * Time in miliseconds that mouse has to be over\n   * the anchor element to trigger the popup.\n   */\n  delay?: number\n  /**\n   * Display full content instead of cliped single line.\n   */\n  multiline?: boolean\n  /**\n   * Content of the tooltip.\n   */\n  text: React.ReactNode\n}>\n\n/**\n * Tooltip container component.\n */\nexport default function Tooltip(props: TooltipProps) {\n  const {\n    delay = TOOLTIP_OVER_TIMEOUT_DEFAULT,\n    placement = PLACEMENT_DEFAULT,\n  } = props\n\n  const [isMouseOver, setIsMouseOver] = useState(false)\n  const [isOpen, setIsOpen] = useState(false)\n  // dropdown container ref\n  const triggerContainerRef = useRef<HTMLDivElement>(null)\n  // popup container ref - used for positioning\n  const popupContainerRef = useRef<HTMLDivElement>(null)\n  const placeElement = useElementPlacement({ offset: 10 })\n\n  // open/close popup with delay to allow hovering the popup itself (eg. to copy text from it)\n  useEffect(() => {\n    const timeoutDelay = isMouseOver ? delay : TOOLTIP_OUT_TIMEOUT_DEFAULT // use different delay for over and for out\n    const timeoutId = setTimeout(() => {\n      setIsOpen(isMouseOver)\n    }, timeoutDelay)\n\n    return () => clearTimeout(timeoutId)\n  }, [delay, isMouseOver])\n\n  // sync overlay position with trigger\n  useEffect(() => {\n    if (isOpen && triggerContainerRef.current && popupContainerRef.current) {\n      placeElement(\n        triggerContainerRef.current,\n        popupContainerRef.current,\n        props.placement ?? 'top'\n      )\n    }\n  }, [isOpen, props.placement, placeElement])\n\n  // ------ event handlers\n\n  const handleMouseOver = useCallback(() => setIsMouseOver(true), [])\n\n  const handleMouseOut = useCallback(() => setIsMouseOver(false), [])\n\n  const handleMouseClick = useCallback((e: SyntheticEvent) => {\n    e.stopPropagation()\n    e.preventDefault()\n    return false\n  }, [])\n\n  return (\n    <S.Tooltip ref={triggerContainerRef}>\n      <Box\n        d=\"inline-block\"\n        onMouseOver={handleMouseOver}\n        onMouseOut={handleMouseOut}\n      >\n        {props.children}\n      </Box>\n\n      {isOpen &&\n        createPortal(\n          <div\n            onMouseOver={handleMouseOver}\n            onMouseOut={handleMouseOut}\n            onClick={handleMouseClick}\n          >\n            <S.Popup\n              placement={placement}\n              multiline={props.multiline}\n              ref={popupContainerRef}\n            >\n              <Text variant=\"paragraph.4\" ellipsis={!props.multiline}>\n                {props.text}\n              </Text>\n            </S.Popup>\n          </div>,\n          document.body\n        )}\n    </S.Tooltip>\n  )\n}\n","import BigNumber from 'bignumber.js'\nimport formatBN from 'ui/Common/util/format/formatBN'\nimport { isEmpty } from 'ui/Common/util/lang/TypeUtils'\n\n/**\n * Format general amount BigNumber value with defaults:\n *  - precision - 2\n *  - rounding - 'HALF_UP' (standard rounding)\n */\nexport function formatAmount(\n  value: BigNumber.Value | undefined\n): string | undefined {\n  if (isEmpty(value)) return\n\n  return formatBN(new BigNumber(value), 2, 'UP')\n}\n\n/**\n * Format balance amount BigNumber value with specific defaults:\n *  - precision - 2\n *  - rounding - 'DOWN'\n */\nexport function formatBalanceAmount(\n  value: BigNumber.Value | undefined\n): string | undefined {\n  if (isEmpty(value)) return\n\n  return formatBN(new BigNumber(value), 2, 'DOWN')\n}\n\n/**\n * Format fee amount BigNumber value with specific defaults:\n *  - precision - 2\n *  - rounding - 'UP'\n */\nexport function formatFeeAmount(\n  value: BigNumber.Value | undefined\n): string | undefined {\n  if (isEmpty(value)) return\n\n  return formatBN(new BigNumber(value), 2, 'UP')\n}\n\n/**\n * Format amount (see `formatAmount()`\n * and prefix it with currency symbol\n */\nexport function formatFiatAmount(\n  value: BigNumber.Value | undefined\n): string | undefined {\n  if (isEmpty(value)) return\n\n  return `$${formatAmount(value)}`\n}\n\n/**\n * Format balance amount (see `formatBalanceAmount()`\n * and prefix it with currency symbol\n */\nexport function formatBalanceFiatAmount(\n  value: BigNumber.Value | undefined\n): string | undefined {\n  if (isEmpty(value)) return\n\n  return `$${formatBalanceAmount(value)}`\n}\n\n/**\n * Format fee amount (see `formatFeeAmount()`\n * and prefix it with currency symbol\n */\nexport function formatFeeFiatAmount(\n  value: BigNumber.Value | undefined\n): string | undefined {\n  if (isEmpty(value)) return\n\n  return `$${formatFeeAmount(value)}`\n}\n","import BigNumber from 'bignumber.js'\n\nconst DECIMAL_PRECISION = 2\n\n/**\n * BigNumber rounding modes\n *\n * BN's rounding modes all have var names \"ROUND_&lt;MODE&gt;\"\n * To simplify translation we're using \"&lt;MODE&gt;\"\" substring\n * and then concatenate to \"ROUND_\" prefix to get real BN value for mode\n */\ntype BigNumberRoundingMode = 'UP' | 'DOWN' | 'HALF_UP'\n\n/**\n *\n * @param value - BugNumber value\n * @param decimalPlaces {nunmber} - defaults to 2\n * @param roundingMode {BigNumberRoundingMode} - based on BigNumber's rounding modes\n *\n * @returns string with formatted number\n */\nexport default function formatBN(\n  value: BigNumber,\n  decimalPlaces: number = DECIMAL_PRECISION,\n  roundingMode?: BigNumberRoundingMode | undefined\n): string {\n  const mode =\n    // translate to BN rounding mode\n    roundingMode != null ? BigNumber[`ROUND_${roundingMode}`] : undefined\n\n  if (value.isZero()) {\n    return value.toFixed(decimalPlaces, mode)\n  }\n  if (value.gte('0.1')) {\n    return value.toFormat(decimalPlaces, mode)\n  } else if (value.lte('-0.1')) {\n    return value.toFormat(decimalPlaces, mode)\n  } else {\n    return value.precision(decimalPlaces, mode).toFormat()\n  }\n}\n","import { useCallback } from 'react'\n\nconst PLACEMENT_OFFSET_DEFAULT = 8\n\nexport type ElementPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n\ntype PositionRect = {\n  top: number\n  right: number\n  bottom: number\n  left: number\n}\n\n/** Hook options */\nexport type ElementPlacementOptions = {\n  /** Distance from anchore element along the main dimension. Number in pixels. Defaults to 8. */\n  offset?: number\n}\n\n/**\n * Position one movable element (\"floaty\") around another fixed element (\"anchor\").\n *\n * Hook returns a positioning function that receives references to both elements\n * and a desired placement. This hook does not hold any internal state and is just\n * a convenience package for positioning fn.\n *\n * Placements are names for predefined relative positions (see `ElementPlacement` for available placements).\n * Each placement has a primary position (alignment) and an optional secondary position (justification).\n * Format is: `<primary>[-<secondary>]` Eg. `top`, `top-start`, `right-end`, ...\n *\n * Primary position determines on which side of an anchor a floaty will be aligned (top, right, bottom, left).\n *\n * Secondary position determines floaty's justification across primary side. For more consistency and easier\n * configuration, secondary positions are always relative: start, end or, if missing, center by default.\n * Similarly to CSS flexbox.\n *\n * Exmples:\n *  - `top` - above an anchor with aligned centers\n *  - `top-start` - above an anchor with aligned left sides\n *  - `right-start` - right of an anchor with aligned top sides\n *  - `left-end` - left of an anchor with aligned bottom sides\n *\n */\nexport function useElementPlacement(options?: ElementPlacementOptions) {\n  const place = useCallback(\n    (\n      anchorEl: HTMLElement,\n      floatyEl: HTMLElement,\n      placement: ElementPlacement\n    ) => {\n      const anchorBoundingRect = anchorEl.getBoundingClientRect()\n      const floatyBoundingRect = floatyEl.getBoundingClientRect()\n      const placementOffset = options?.offset ?? PLACEMENT_OFFSET_DEFAULT // offset form trigger el\n\n      // anchor element offsets of all 4 sides\n      const anchorOffsetPosition: PositionRect = {\n        top: anchorBoundingRect.top + window.scrollY,\n        right: anchorBoundingRect.right + window.scrollX,\n        bottom: anchorBoundingRect.bottom + window.scrollY,\n        left: anchorBoundingRect.left + window.scrollX,\n      }\n\n      const elHorizPositionDiff =\n        (anchorBoundingRect.width - floatyBoundingRect.width) / 2\n      const elVertPositionDiff =\n        (anchorBoundingRect.height - floatyBoundingRect.height) / 2\n\n      const floatyOffsetRect: Partial<PositionRect> = {}\n\n      // vertical\n      if (placement.startsWith('top') || placement.startsWith('bottom')) {\n        if (placement.startsWith('top')) {\n          floatyOffsetRect.top =\n            anchorOffsetPosition.top -\n            floatyBoundingRect.height -\n            placementOffset\n        } else {\n          floatyOffsetRect.top = anchorOffsetPosition.bottom + placementOffset\n        }\n\n        if (placement.endsWith('start')) {\n          floatyOffsetRect.left = anchorOffsetPosition.left\n        } else if (placement.endsWith('end')) {\n          floatyOffsetRect.left =\n            anchorOffsetPosition.right - floatyBoundingRect.width\n        } else {\n          floatyOffsetRect.left =\n            anchorOffsetPosition.left + elHorizPositionDiff\n        }\n      }\n      // horizontal\n      else if (placement.startsWith('right') || placement.startsWith('left')) {\n        if (placement.startsWith('right')) {\n          floatyOffsetRect.left = anchorOffsetPosition.right + placementOffset\n        } else {\n          floatyOffsetRect.left =\n            anchorOffsetPosition.left -\n            floatyBoundingRect.width -\n            placementOffset\n        }\n\n        if (placement.endsWith('start')) {\n          floatyOffsetRect.top = anchorOffsetPosition.top\n        } else if (placement.endsWith('end')) {\n          floatyOffsetRect.top =\n            anchorOffsetPosition.bottom - floatyBoundingRect.height\n        } else {\n          floatyOffsetRect.top = anchorOffsetPosition.top + elVertPositionDiff\n        }\n      } else {\n        console.warn(`Unsupported placement ${placement}`)\n      }\n\n      floatyEl.style.top =\n        floatyOffsetRect.top != null\n          ? `${floatyOffsetRect.top?.toString()}px`\n          : ''\n      floatyEl.style.right =\n        floatyOffsetRect.right != null\n          ? `${floatyOffsetRect.right?.toString()}px`\n          : ''\n      floatyEl.style.bottom =\n        floatyOffsetRect.bottom != null\n          ? `${floatyOffsetRect.bottom?.toString()}px`\n          : ''\n      floatyEl.style.left =\n        floatyOffsetRect.left != null\n          ? `${floatyOffsetRect.left?.toString()}px`\n          : ''\n    },\n    [options?.offset]\n  )\n\n  return place\n}\n","/**\n * Static helper methods for checking JS value types.\n * Especially useful for type guards\n */\nexport function isEmpty(obj: any): obj is null | undefined {\n  return obj === void 0 || obj === null\n}\n\nexport function isNotEmpty<T>(obj: T): obj is NonNullable<T> {\n  return !isEmpty(obj)\n}\n\nexport function isUndefined(obj: any): boolean {\n  return obj === void 0\n}\n\nexport function isString(obj: any): obj is string {\n  return typeof obj === 'string'\n}\n\nexport function isNumber(obj: any): obj is number {\n  return typeof obj === 'number'\n}\n\nexport function isBoolean(obj: any): obj is boolean {\n  return typeof obj === 'boolean'\n}\n\nexport function isArray(obj: any): obj is any[] {\n  return Array.isArray(obj)\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport function isFunction(obj: any): obj is Function {\n  return obj instanceof Function\n}\n\n/** Returns true if valus is null/undefined or an empty string. Optionally, value can be trimmed before checking. */\nexport function isStringEmpty(\n  value: string | null | undefined,\n  trim = false\n): value is null | undefined | '' {\n  return (\n    isEmpty(value) || (trim ? value.trim().length === 0 : value.length === 0)\n  )\n}\n\nexport function isPrimitive(obj: any): boolean {\n  return !isJsObject(obj)\n}\n\nexport function isJsObject(o: any): boolean {\n  return !isEmpty(o) && (isFunction(o) || typeof o === 'object')\n}\n"],"names":["AmountDisplay","amount","type","fiat","showTooltip","fallbackDisplay","fallback","isAmountValid","isNaN","formattedAmount","useMemo","formatFeeFiatAmount","formatFeeAmount","formatBalanceFiatAmount","formatBalanceAmount","formatFiatAmount","formatAmount","Tooltip","text","toFormat","RotatingContainer","styled","AnimatedSpinnerIcon","size","width","height","viewBox","xmlns","fill","stroke","g","path","d","BackButton","p","bgColor","theme","colors","grey","grey3","grey9","grey4","Button","secondaryShared","get","color","grey6","grey5","grey7","variant","ButtonVariant","grey10","grey2","LARGE_BREAKPOINT","ArrowIcon","props","svg","fillRule","children","S","span","style","Primary","Secondary","SecondarySmall","Tertiary","Text","PopupAnimation","keyframes","Popup","multiline","spacing","xxs","placement","startsWith","css","isPlacementCentered","isPlacementStart","isPlacementEnd","endsWith","delay","useState","triggerContainerRef","useRef","popupContainerRef","placeElement","useElementPlacement","offset","useEffect","timeoutId","setTimeout","setIsOpen","isMouseOver","clearTimeout","isOpen","current","handleMouseOver","useCallback","setIsMouseOver","handleMouseOut","handleMouseClick","e","stopPropagation","preventDefault","ref","Box","onMouseOver","onMouseOut","createPortal","div","onClick","ellipsis","document","body","value","isEmpty","formatBN","BigNumber","decimalPlaces","roundingMode","mode","undefined","isZero","toFixed","gte","lte","precision","options","anchorEl","floatyEl","floatyOffsetRect","anchorBoundingRect","getBoundingClientRect","floatyBoundingRect","placementOffset","anchorOffsetPosition","top","window","scrollY","right","scrollX","bottom","left","elHorizPositionDiff","elVertPositionDiff","console","warn","toString","obj","isString","isStringEmpty","trim","length"],"sourceRoot":""}