{"version":3,"file":"static/chunks/704-e0476649d5237871.js","mappings":"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","sources":["webpack://_N_E/./src/ui/Common/components/AssetStats/styles.ts","webpack://_N_E/./src/ui/Common/components/AssetStats/AssetStats.tsx","webpack://_N_E/./src/ui/Icons/components/SortColumnIcon.tsx","webpack://_N_E/./src/ui/Wallet/components/AssetList/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\n/** AssetWrapper styled component. */\nexport const AssetWrapper = styled.div<{ inverse?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: ${(p) => p.theme.spacing.xs}px;\n  font-size: ${(p) => p.theme.typography.paragraph[4].size}px;\n  font-weight: ${(p) => p.theme.typography.paragraph[4].weight};\n  text-align: right;\n  color: ${(p) => (p.inverse ? '#FFF' : p.theme.colors.grey.grey10)};\n`\n\nexport const Total = styled.div<{ pending?: boolean; inverse?: boolean }>`\n  margin-right: ${(p) => p.theme.spacing.xxs}px;\n  color: ${(p) =>\n    p.inverse\n      ? '#FFF'\n      : p.pending\n      ? p.theme.colors.grey.grey6\n      : p.theme.colors.grey.grey10};\n`\n\nexport const Price = styled.div`\n  margin-left: ${(p) => p.theme.spacing.xxs}px;\n`\n\nexport const Change = styled.div<{ changeColor?: string }>`\n  color: ${(p) => p.changeColor};\n  margin-left: ${(p) => p.theme.spacing.xxs}px;\n`\n\nexport const Bold = styled.span`\n  font-weight: ${(p) => p.theme.typography.heading[1].weight};\n`\n\nexport const TimeStamp = styled.span`\n  text-transform: uppercase;\n`\n","import * as S from './styles'\nimport BigNumber from 'bignumber.js'\nimport React from 'react'\nimport { AmountDisplay } from 'ui/Common/components/AmountDisplay'\n\nexport interface AssetStatsProps {\n  fiatBalance: BigNumber | undefined\n  unitPrice: BigNumber | undefined\n  change?: number\n  isPending?: boolean\n  timestamp?: number\n  inverse?: boolean\n}\n\n/**\n * AssetStats component.\n */\nfunction AssetStats({\n  isPending,\n  timestamp,\n  fiatBalance,\n  unitPrice,\n  change,\n  inverse = false,\n}: AssetStatsProps) {\n  const showChange = typeof change === 'number' && change !== 0\n\n  const changeParams = showChange\n    ? { color: 'green', symbol: '+', change: change! }\n    : { color: 'red', symbol: '-', change: Math.abs(change!) }\n\n  const date = timestamp && new Date(timestamp * 1000)\n  const formattedDate =\n    date &&\n    `${date.toLocaleDateString('en-US', {\n      month: 'short',\n      day: '2-digit',\n      year: 'numeric',\n    })}, ${date.toLocaleTimeString('en-US', {\n      hour: '2-digit',\n      minute: '2-digit',\n    })}`\n\n  return (\n    <S.AssetWrapper inverse={inverse}>\n      {date && (\n        <S.TimeStamp>\n          {formattedDate}\n          <span style={{ margin: '0 8px' }}>|</span>\n        </S.TimeStamp>\n      )}\n\n      {fiatBalance && (\n        <>\n          <S.Total pending={isPending} inverse={inverse}>\n            TOTAL&nbsp;\n            <S.Bold>\n              <AmountDisplay\n                amount={fiatBalance}\n                type=\"balance\"\n                fiat\n                showTooltip={false}\n              />\n            </S.Bold>\n          </S.Total>\n          |\n        </>\n      )}\n      {unitPrice && (\n        <S.Price>\n          PRICE&nbsp;\n          <S.Bold>\n            <AmountDisplay\n              amount={unitPrice}\n              type=\"balance\"\n              fiat\n              showTooltip={false}\n            />\n          </S.Bold>\n        </S.Price>\n      )}\n\n      {showChange && (\n        <S.Change changeColor={changeParams.change >= 0 ? 'green' : 'red'}>\n          <S.Bold>\n            {changeParams.change >= 0 ? '+' : '-'}\n            {Math.abs(changeParams.change * 100).toFixed(2)}%\n          </S.Bold>\n        </S.Change>\n      )}\n    </S.AssetWrapper>\n  )\n}\n\nexport default AssetStats\n","import React from 'react'\n\nexport const SortColumnIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    width={8}\n    height={8}\n    viewBox=\"0 0 8 8\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"#6C727F\"\n    {...props}\n  >\n    <path d=\"M8 5.32H0l4 2.667zM8 2.667H0L4 0z\" />\n  </svg>\n)\n","import styled, { css, keyframes } from 'styled-components'\nimport { LARGE_BREAKPOINT } from 'ui/Common/components/Grid'\nimport { SortColumnIcon } from 'ui/Icons/components/SortColumnIcon'\n\n// asset heights are used multiple times in this file so we'll extract them here\nconst ASSET_ITEM_HEIGHT_DEFAULT = 144\nconst ASSET_ITEM_HEIGHT_SMALL = 122\n\n// asset item's container height (to calculate list's defualt height)\nconst ASSET_LIST_ITEM_COUNT = 4 // how many items should fit in the list without triggering scrollbar\nconst ASSET_ITEM_CONTAINER_DEFAULT_HEIGHT = ASSET_ITEM_HEIGHT_DEFAULT + 4 // item height + margins\nconst ASSET_ITEM_CONTAINER_SMALL_HEIGHT = ASSET_ITEM_HEIGHT_SMALL + 4 // item height + margins\n\nexport const AssetList = styled.div`\n  overflow-y: auto;\n\n  max-height: ${ASSET_LIST_ITEM_COUNT * ASSET_ITEM_CONTAINER_DEFAULT_HEIGHT}px;\n\n  @media (max-width: ${LARGE_BREAKPOINT}px) {\n    max-height: ${ASSET_LIST_ITEM_COUNT * ASSET_ITEM_CONTAINER_SMALL_HEIGHT}px;\n  }\n`\n\nexport const ButtonsWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 8px;\n  }\n`\n\nexport const Amount = styled.div<{\n  hasSpinner?: boolean\n  hasGraph?: boolean\n  isEmpty?: boolean\n}>`\n  font-size: ${(p) => p.theme.typography.heading[2].size}px;\n  font-weight: ${(p) => p.theme.typography.heading[2].weight};\n  line-height: ${(p) => p.theme.typography.heading[2].lineHeight}px;\n  color: ${(p) => p.hasSpinner && p.theme.colors.grey.grey6};\n\n  > svg {\n    position: absolute;\n    right: 24px;\n    top: ${(p) => (p.hasGraph ? (p.isEmpty ? '57px' : '39px') : '57px')};\n    transition: top ease-out 0.2s, opacity 0.25s ease-in-out;\n\n    opacity: ${(p) => (p.hasSpinner ? 1 : 0)};\n    pointer-events: ${(p) => (p.hasSpinner ? 'initial' : 'none')};\n\n    @media (max-width: ${LARGE_BREAKPOINT}px) {\n      top: ${(p) => (p.hasGraph ? (p.isEmpty ? '43px' : '27px') : '43px')};\n      right: 12px;\n    }\n\n    > g {\n      stroke: ${(p) => p.theme.colors.grey.grey7};\n    }\n  }\n`\n\nexport const Wrapper = styled.div<{ initial?: boolean; isFlashing: boolean }>`\n  position: relative;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  border-radius: 8px;\n  background-color: ${(p) => p.theme.colors.white.white100};\n  color: ${(p) => p.theme.colors.grey.grey10};\n  padding: 32px 48px 24px;\n  height: ${ASSET_ITEM_HEIGHT_DEFAULT}px;\n  margin-top: 4px;\n  z-index: 1;\n\n  @media (max-width: ${LARGE_BREAKPOINT}px) {\n    padding: 20px 32px 18px 28px;\n    height: 122px;\n  }\n\n  ${ButtonsWrapper} {\n    /* display: ${(p) => (p.initial ? 'flex' : 'none')}; */\n  }\n\n  &:hover {\n    ${ButtonsWrapper} {\n      display: flex;\n    }\n\n    ${Amount} {\n      & > svg {\n        top: 39px;\n        transition: top ease-in 0.2s;\n        transition-delay: 0.1s;\n\n        @media (max-width: ${LARGE_BREAKPOINT}px) {\n          top: 27px;\n        }\n      }\n    }\n  }\n\n  &:after {\n    content: '';\n    width: 100%;\n    position: absolute;\n    height: ${ASSET_ITEM_HEIGHT_DEFAULT}px;\n    border-radius: 8px;\n    background-color: ${(p) => p.theme.colors.green.green6};\n    top: 0;\n    left: 0;\n    opacity: 0;\n    animation: ${(p) => (p.isFlashing ? Blink : '')} 5.1s;\n    z-index: 0;\n\n    @media (max-width: ${LARGE_BREAKPOINT}px) {\n      height: ${ASSET_ITEM_HEIGHT_SMALL}px;\n    }\n  }\n`\n\nexport const Blink = keyframes`\n    0% {\n        opacity: 0;\n    }\n    5% {\n      opacity: 1;\n    }\n    100% {\n        opacity: 0;\n    }\n`\nexport const ChainSection = styled.div`\n  position: absolute;\n  top: 18px;\n  left: 18px;\n  z-index: 1;\n`\n\nexport const NameSection = styled.div`\n  display: flex;\n  align-items: center;\n  font-size: ${(p) => p.theme.typography.heading[6].size}px;\n  font-weight: ${(p) => p.theme.typography.heading[6].weight};\n  line-height: ${(p) => p.theme.typography.heading[6].lineHeight}px;\n  margin-bottom: 8px;\n  z-index: 1;\n\n  > svg {\n    margin: 0 20px 0 0;\n  }\n`\n\nexport const BalanceSection = styled.div<{ hasGraph?: boolean }>`\n  display: flex;\n  flex-direction: column;\n  text-align: right;\n  justify-content: ${(p) => (p.hasGraph ? 'space-between' : 'center')};\n  z-index: 1;\n  margin-left: -105px;\n\n  .assetstats {\n    margin-top: 2px;\n  }\n`\n\nexport const RewardIcon = styled.div``\n\nexport const ProgressBar = styled.div<{\n  rewardIndex: number\n}>`\n  display: flex;\n  margin: 19px 0 13px;\n  position: relative;\n  text-transform: initial;\n\n  /* Show rewards icon */\n  ${RewardIcon} {\n    position: absolute;\n    bottom: 0px;\n    left: ${(p) => (p.rewardIndex - 1) * 14 - 4 + 'px'};\n\n    /* Rewards icon on smaller screen */\n    @media (max-width: ${LARGE_BREAKPOINT}px) {\n      left: ${(p) => (p.rewardIndex - 1) * 12 - 4 + 'px'};\n    }\n  }\n`\n\nexport const ProgressBarItem = styled.div<{\n  active?: boolean\n  isBorrow?: boolean\n}>`\n  width: 12px;\n  height: 4px;\n  margin-right: 2px;\n  border-radius: 1px;\n  background-color: ${(p) =>\n    p.isBorrow\n      ? p.theme.colors.grey.grey5\n      : p.active\n      ? p.theme.colors.green.green6\n      : p.theme.colors.grey.grey4};\n\n  @media (max-width: ${LARGE_BREAKPOINT}px) {\n    width: 10px;\n  }\n\n  /* On hover progressBarItem takes black background (Lock icon) */\n  /* &:hover {\n    background-color: #000;\n  } */\n`\n\nexport const Available = styled.div`\n  color: #000;\n  font-size: ${(p) => p.theme.typography.paragraph[4].size}px;\n  font-weight: ${(p) => p.theme.typography.paragraph[4].weight};\n  line-height: ${(p) => p.theme.typography.paragraph[4].lineHeight}px;\n  text-align: right;\n  margin-left: ${(p) => p.theme.spacing.xs}px;\n\n  > span {\n    color: ${(p) => p.theme.colors.green.green6};\n    font-weight: ${(p) => p.theme.typography.heading[4].weight};\n    margin-left: ${(p) => p.theme.spacing.xxs}px;\n  }\n`\n\nexport const ProgressBarWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: 35px;\n`\n\nexport const VestingWrapper = styled.div<{\n  isFlashing: boolean\n}>`\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  border-radius: 8px;\n  background-color: ${(p) => p.theme.colors.white.white100};\n  color: ${(p) => p.theme.colors.grey.grey10};\n  padding: 32px 48px 24px;\n  height: ${ASSET_ITEM_HEIGHT_DEFAULT}px;\n  width: 100%;\n  margin-top: 4px;\n\n  @media (max-width: ${LARGE_BREAKPOINT}px) {\n    padding: 20px 32px 18px 28px;\n    height: ${ASSET_ITEM_HEIGHT_SMALL}px;\n  }\n\n  &:after {\n    content: '';\n    width: 100%;\n    position: absolute;\n    height: ${ASSET_ITEM_HEIGHT_DEFAULT}px;\n    border-radius: 8px;\n    background-color: ${(p) => p.theme.colors.green.green6};\n    top: 0;\n    left: 0;\n    opacity: 0;\n    animation: ${(p) => (p.isFlashing ? Blink : '')} 5.1s;\n    z-index: 0;\n\n    @media (max-width: ${LARGE_BREAKPOINT}px) {\n      height: ${ASSET_ITEM_HEIGHT_SMALL}px;\n    }\n  }\n`\n\nexport const VestingControlsWrapper = styled.div<{ withdrawing?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-top: 11px;\n\n  > button {\n    color: ${(p) => p.theme.colors.white.white100};\n    background-color: ${(p) =>\n      p.withdrawing ? '#d2f3b8' : p.theme.colors.green.green6};\n    border: none;\n\n    &:hover {\n      background-color: ${(p) => (p.withdrawing ? '#d2f3b8' : '#1b7a00')};\n    }\n\n    &:active {\n      background-color: ${(p) => p.theme.colors.green.green6};\n    }\n\n    &:disabled {\n      background-color: #d2f3b8;\n      &:hover {\n        background-color: #d2f3b8;\n        color: ${(p) => p.theme.colors.white.white100};\n      }\n    }\n  }\n`\n\ntype SummaryWrapperProps = {\n  inverse: boolean\n}\n\nexport const SummaryWrapper = styled.div<SummaryWrapperProps>`\n  height: ${ASSET_ITEM_HEIGHT_DEFAULT}px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ${(props) => (props.inverse ? '#000' : '#FFF')};\n  color: ${(props) => (props.inverse ? '#FFF' : '#000')};\n  padding: 0 48px;\n  border-radius: 8px;\n\n  @media (max-width: ${LARGE_BREAKPOINT}px) {\n    height: ${ASSET_ITEM_HEIGHT_SMALL}px;\n    padding: 0 36px 0 26px;\n  }\n`\n\nexport const VestingStats = styled.div<{ withdrawing?: boolean }>`\n  display: flex;\n  justify-content: flex-end;\n  color: #000;\n  font-size: ${(p) => p.theme.typography.paragraph[4].size}px;\n  font-weight: ${(p) => p.theme.typography.paragraph[4].weight};\n  line-height: ${(p) => p.theme.typography.paragraph[4].lineHeight}px;\n  text-align: right;\n\n  > svg {\n    position: absolute;\n    right: 20px;\n    top: 64px;\n    transition: opacity 0.25s ease-in-out;\n\n    opacity: ${(p) => (p.withdrawing ? 1 : 0)};\n    pointer-events: ${(p) => (p.withdrawing ? 'initial' : 'none')};\n\n    @media (max-width: ${LARGE_BREAKPOINT}px) {\n      right: 10px;\n      top: 50px;\n    }\n\n    > g {\n      stroke: ${(p) => p.theme.colors.grey.grey7};\n    }\n  }\n`\n\nexport const Withdrawing = styled.div`\n  display: flex;\n  color: ${(p) => p.theme.colors.additional.yellow};\n  text-align: right;\n  margin-right: ${(p) => p.theme.spacing.xs}px;\n\n  > span {\n    margin-left: ${(p) => p.theme.spacing.xxs}px;\n  }\n`\n\nexport const HeaderWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 8px;\n  padding: 0 48px;\n\n  height: 40px;\n  background-color: ${(p) => p.theme.colors.grey.grey4};\n  color: ${(p) => p.theme.colors.grey.grey6};\n\n  @media (max-width: ${LARGE_BREAKPOINT}px) {\n    padding: 0 32px 0 28px;\n  }\n`\n\nexport const HeaderItem = styled.div`\n  font-size: 10px;\n  line-height: 16px;\n  font-weight: ${(p) => p.theme.typography.fontWeight.Bold};\n  text-transform: uppercase;\n`\n\nconst tableItem = css`\n  display: flex;\n  align-items: center;\n`\n\nexport const ChainsWrapper = styled.div`\n  ${tableItem};\n  flex: 0 0 32px;\n  margin-right: 20px;\n`\n\nexport const AssetsWrapper = styled.div`\n  ${tableItem};\n  flex: 0 0 46px;\n`\n\nexport const BalanceWrapper = styled.div`\n  ${tableItem};\n  justify-content: end;\n  flex: 0 0 104px;\n`\n\nexport const SortIcon = styled(SortColumnIcon)<{\n  $highlightUp?: boolean\n  $highlightDown?: boolean\n}>`\n  margin-left: 4px;\n\n  #part-up {\n    fill: ${(p) => (p.$highlightUp ? p.theme.colors.grey.grey10 : undefined)};\n  }\n\n  #part-down {\n    fill: ${(p) => (p.$highlightDown ? p.theme.colors.grey.grey10 : undefined)};\n  }\n`\n\nconst AnimationWrapper = styled.div`\n  &,\n  & > * {\n    transition-duration: 0.2s;\n    transition-timing-function: ease-in;\n  }\n\n  ${Wrapper}:hover & > * {\n    transition-delay: 0.1s;\n  }\n`\n\n/** Style for switching visible items */\nexport const ItemSwitcher = styled(AnimationWrapper)<{\n  /**\n   * Does switcher have 1 or two items? If it has 1 item then it will hide\n   * entire container since there is nothing to switch.\n   *\n   */\n  singleItem?: boolean\n}>`\n  overflow: hidden;\n\n  /* container tranformations */\n  height: ${(props) => `${props.singleItem ? 0 : '100%'}`};\n  opacity: ${(props) => (props.singleItem ? 0 : 1)};\n  transform: ${(props) => (props.singleItem ? 'translateY(100%)' : 'none')};\n\n  /* container margins */\n  margin-top: 8px;\n  @media (max-width: ${LARGE_BREAKPOINT}px) {\n    margin-top: 4px;\n  }\n\n  /* intialize items */\n  /* make sure && remains cause it forces styled to generate specific class for each item */\n  && > * {\n    height: 100%;\n    flex: 1 0 100%;\n    align-items: center;\n    justify-content: end;\n    transform: ${(props) => (props.singleItem ? 'none' : 'translateY(0)')};\n  }\n\n  /* do the switching when parent wrapper is in hover */\n  /* make sure && remains cause it forces styled to generate specific class for each item */\n  ${Wrapper}:hover && {\n    /* items transformations */\n    > * {\n      transform: ${(props) =>\n        props.singleItem ? 'none' : 'translateY(-100%)'};\n    }\n\n    /* container tranformations */\n    height: 100%;\n    opacity: ${(props) => (props.singleItem ? 1 : 1)};\n    transform: ${(props) => (props.singleItem ? 'translateY(0)' : 'none')};\n  }\n`\nexport const ActionMenuButton = styled.div`\n  display: flex;\n  padding: 4px;\n  cursor: pointer;\n\n  svg {\n    fill: #6c727f;\n  }\n`\n"],"names":["AssetWrapper","styled","p","theme","spacing","xs","typography","paragraph","size","weight","inverse","colors","grey","grey10","Total","xxs","pending","grey6","Price","Change","changeColor","Bold","heading","TimeStamp","isPending","timestamp","fiatBalance","unitPrice","change","showChange","changeParams","color","symbol","Math","abs","date","Date","formattedDate","toLocaleDateString","month","day","year","toLocaleTimeString","hour","minute","S","span","style","margin","AmountDisplay","amount","type","fiat","showTooltip","toFixed","SortColumnIcon","props","svg","width","height","viewBox","xmlns","fill","path","d","ASSET_ITEM_HEIGHT_DEFAULT","ASSET_ITEM_HEIGHT_SMALL","AssetList","ASSET_LIST_ITEM_COUNT","LARGE_BREAKPOINT","ButtonsWrapper","Amount","lineHeight","hasSpinner","hasGraph","isEmpty","grey7","Wrapper","white","white100","initial","green","green6","isFlashing","Blink","keyframes","ChainSection","NameSection","BalanceSection","RewardIcon","ProgressBar","rewardIndex","ProgressBarItem","isBorrow","grey5","active","grey4","Available","ProgressBarWrapper","VestingWrapper","VestingControlsWrapper","withdrawing","SummaryWrapper","VestingStats","Withdrawing","additional","yellow","HeaderWrapper","HeaderItem","fontWeight","tableItem","css","ChainsWrapper","AssetsWrapper","BalanceWrapper","SortIcon","$highlightUp","undefined","$highlightDown","AnimationWrapper","ItemSwitcher","singleItem","ActionMenuButton"],"sourceRoot":""}