{"version":3,"file":"static/chunks/224-02936d8d539bfb0b.js","mappings":"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","sources":["webpack://_N_E/./src/ui/Common/components/Box/Box.tsx","webpack://_N_E/./src/ui/Common/components/Grid/Grid.tsx","webpack://_N_E/./src/ui/Common/components/Layout/MobilePlaceholder.tsx","webpack://_N_E/./src/ui/Common/components/Layout/styles.ts","webpack://_N_E/./src/ui/App/components/Sidebar/styles.tsx","webpack://_N_E/./src/ui/Icons/components/BridgeIcon.tsx","webpack://_N_E/./src/ui/Icons/components/LaunchIcon.tsx","webpack://_N_E/./src/ui/App/components/Sidebar/Sidebar.tsx","webpack://_N_E/./src/ui/Common/util/browserUtils.ts","webpack://_N_E/./src/ui/Common/util/hooks/useBrowserEnv.ts","webpack://_N_E/./src/ui/Common/components/Layout/Layout.tsx","webpack://_N_E/./src/ui/Icons/components/MeldLogo.tsx","webpack://_N_E/./src/ui/Icons/components/StakeIcon.tsx","webpack://_N_E/./src/ui/Icons/components/WalletIcon.tsx"],"sourcesContent":["import { ColorKey } from 'app/styles/colors'\nimport get from 'lodash/get'\nimport React, { PropsWithChildren, ReactEventHandler } from 'react'\nimport styled, { CSSProperties } from 'styled-components'\nimport { getStylesFromProps, ISizable } from 'ui/Common/util/Sizable'\n\n/**\n * Box components props\n */\ninterface BoxProps extends ISizable {\n  /**\n   * Inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * Background color - color key from the styleguide pallet can be passed also\n   */\n  bg?: ColorKey | CSSProperties['color']\n  /**\n   * Border radius\n   */\n  br?: number | string\n  /**\n   * \"Strength\" of box shadow form the styleguide applied to the elemeny\n   * TODO:: add when elevation is added to the styleguide\n   */\n  elevation?: number\n  /**\n   * Display style property\n   *\n   * @default \"block\"\n   */\n  d?: React.CSSProperties['display']\n  /**\n   * Position style property\n   */\n  position?: React.CSSProperties['position']\n  /**\n   * Click callback\n   */\n  onClick?: ReactEventHandler\n  /**\n   * Mouse over callback\n   */\n  onMouseOver?: React.MouseEventHandler\n  /**\n   * Mouse out callback\n   */\n  onMouseOut?: React.MouseEventHandler\n}\n\n/**\n * A subset of the Box props that are passed to inner styled component\n */\ntype InnerBoxProps = Pick<BoxProps, 'bg' | 'br' | 'd' | 'position'>\n\n/**\n * SC wrapper for the Box component\n */\nconst _Box = styled.div<InnerBoxProps>`\n  ${(p) => p.d && `display: ${p.d};`}\n  ${(p) => p.position && `position: ${p.position};`}\n\n  ${(p) => p.bg && `background-color: ${get(p.theme.colors, p.bg, p.bg)};`}\n  ${(p) =>\n    p.br && `border-radius: ${typeof p.br === 'number' ? `${p.br}px` : p.br};`}\n`\n\n/**\n * Box is a basic building block for all UI elements and layouts.\n */\nconst Box: React.FC<PropsWithChildren<BoxProps>> = (props) => {\n  const style: React.CSSProperties = {\n    ...getStylesFromProps(props),\n    ...props.style,\n  }\n\n  return <_Box {...props} style={style} />\n}\n\n// Box defaults\nBox.defaultProps = {\n  d: 'block',\n}\n\nBox.displayName = 'MELD (Box)'\n\nexport default Box\n","import styled from 'styled-components'\n\nexport const MINIMAL_CONTENT_WIDTH = 1248\nexport const LARGE_CONTENT_WIDTH = 1548\nexport const LARGE_BREAKPOINT = 1680\n\n// FIXME rewrite this to use `max-width` like everything else\nexport const largeBreakPointMediaCondition = `min-width: ${\n  LARGE_BREAKPOINT + 1\n}px`\n\nconst GRID_BASIS_BASE = 84\nconst GRID_BASIS_LARGER = 96\n\nconst GRID_BASE_GAP = 20\nconst GRID_LARGER_GAP = 24\n\n/**\n * Parent for all other Grid components, usually one Grid component per page. Children should be Row components.\n * Grid consists of 12 columns with gap between columns. Grid is fixed and has two defined widths.\n * On other widths Grid should be centered on the screen between sidebar and screen edge.\n */\nexport const Grid = styled.div`\n  margin: 0 auto;\n  min-width: ${MINIMAL_CONTENT_WIDTH}px;\n  max-width: ${MINIMAL_CONTENT_WIDTH}px;\n\n  @media (${largeBreakPointMediaCondition}) {\n    min-width: ${LARGE_CONTENT_WIDTH}px;\n    max-width: ${LARGE_CONTENT_WIDTH}px;\n  }\n`\n\n/**\n * Marks single row in the grid. Contains one or multiple Column components.\n * Directs alignment of columns and takes care of half gaps before first and after last columns.\n */\nexport const Row = styled.div`\n  width: ${12 * GRID_BASIS_BASE + 11 * GRID_BASE_GAP}px;\n  margin: 0 auto;\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 20px;\n\n  @media (${largeBreakPointMediaCondition}) {\n    gap: 24px;\n    width: ${12 * GRID_BASIS_LARGER + 11 * GRID_LARGER_GAP}px;\n  }\n`\n\n/**\n * Column component places its children in the grid. Takes props which dictate placement.\n *\n * `base` defines how many columns should component take on base width. If not provided, component will take all available space (equivalent to 12).\n *\n * `larger` defines how many columns should component take on larger width. If not provided, `base` will be evaluated and the last fallback is full available width (equivalent to 12).\n *\n * `offset` defines how many columns should be left empty before component is placed in the grid. If not provided component will be placed on the grid start.\n *\n * `largerOffset` defines how many columns should be left empty on larger widths. If not provided `offset` will be evaluated.\n */\nexport const Column = styled.div<{\n  base?: number\n  larger?: number\n  offset?: number\n  largerOffset?: number\n}>`\n  ${(p) => {\n    const baseColumnsWidth = (p.base || 12) * GRID_BASIS_BASE\n    const LargerColumnsWidth = (p.larger || p.base || 12) * GRID_BASIS_LARGER\n\n    const baseColumnsGapsSpan = ((p.base || 12) - 1) * GRID_BASE_GAP\n    const largerColumnsGapsSpan =\n      ((p.larger || p.base || 12) - 1) * GRID_LARGER_GAP\n\n    const baseWidth = baseColumnsWidth + baseColumnsGapsSpan\n    const largerWidth = LargerColumnsWidth + largerColumnsGapsSpan\n\n    const baseOffsetColumnsWidth = (p.offset || 0) * GRID_BASIS_BASE\n    const largerOffsetColumnsWidth =\n      (p.largerOffset || p.offset || 0) * GRID_BASIS_LARGER\n\n    const baseOffsetGaps = (p.offset || 0) * GRID_BASE_GAP\n    const largerOffsetGaps = (p.largerOffset || p.offset || 0) * GRID_LARGER_GAP\n\n    const baseOffset = baseOffsetColumnsWidth + baseOffsetGaps\n    const largerOffset = largerOffsetColumnsWidth + largerOffsetGaps\n\n    return `\n        min-width: ${baseWidth}px;\n        max-width: ${baseWidth}px;\n\n        ${baseOffset > 0 ? `margin-left: ${baseOffset}px` : ''};\n\n        @media (${largeBreakPointMediaCondition}) {\n            min-width: ${largerWidth}px;\n            max-width: ${largerWidth}px;\n\n            ${largerOffset ? `margin-left: ${largerOffset}px` : ''};\n        }\n    `\n  }}\n`\n","import React from 'react'\nimport Box from 'ui/Common/components/Box'\nimport Text from 'ui/Common/components/Text'\n\nexport default function MobilePlaceholder() {\n  return (\n    <Box\n      d=\"flex\"\n      w=\"100%\"\n      h=\"100vh\"\n      bg=\"white.white100\"\n      style={{\n        justifyContent: 'center',\n        alignItems: 'center',\n        flexDirection: 'column',\n        textAlign: 'center',\n      }}\n    >\n      <video width={180} autoPlay loop muted playsInline>\n        <source src=\"/video/meld-loader.mp4\" type=\"video/mp4\" />\n      </video>\n      <Box w={375}>\n        <Text mt={32} mb={16} block color=\"#121826\" variant=\"heading.3\">\n          Only the desktop version is supported for now.\n        </Text>\n        <Text color=\"#6c727f\" variant=\"paragraph.3\">\n          Mobile version is coming soon.\n        </Text>\n      </Box>\n    </Box>\n  )\n}\n","import styled from 'styled-components'\nimport {\n  largeBreakPointMediaCondition,\n  MINIMAL_CONTENT_WIDTH,\n} from 'ui/Common/components/Grid'\n\nexport const Page = styled.div`\n  padding: 24px 20px 0 20px;\n  margin-left: 96px;\n  min-width: ${MINIMAL_CONTENT_WIDTH}px;\n\n  @media (${largeBreakPointMediaCondition}) {\n    padding: 24px 24px 0 24px;\n  }\n`\n\nexport const TitleContainer = styled.div`\n  margin-top: ${(p) => p.theme.spacing.xl}px;\n  margin-bottom: ${(p) => p.theme.spacing.xxl}px;\n\n  color: ${(p) => p.theme.colors.grey.grey10};\n  font-size: ${(p) => p.theme.spacing.xl}px;\n  font-weight: 700;\n  line-height: 1;\n`\n","import styled from 'styled-components'\nimport { largeBreakPointMediaCondition } from 'ui/Common/components/Grid'\n\nexport const SidebarWrapper = styled.aside`\n  height: 100vh;\n  z-index: 10;\n  position: fixed;\n  left: 0;\n  top: 0;\n  background-color: ${(p) => p.theme.elements.sidebar.backgroundColor};\n  display: flex;\n  flex-flow: column nowrap;\n  padding-top: 24px;\n  width: 72px;\n\n  @media (${largeBreakPointMediaCondition}) {\n    width: 96px;\n    padding-top: 36px;\n  }\n`\n\nexport const Button = styled.button`\n  display: block;\n  outline: none;\n  border: none;\n  padding: 16px;\n  transition: background-color 0.15s ease-in-out, fill 0.15s ease-in-out;\n  background-color: transparent;\n  cursor: pointer;\n  border-radius: 8px;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  height: 56px;\n  width: 56px;\n\n  .icon {\n    width: 24px;\n    height: 24px;\n  }\n\n  &.activeItem {\n    fill: ${(p) => p.theme.colors.red.red6};\n    background-color: ${(p) => p.theme.colors.grey.grey3};\n  }\n\n  :hover {\n    background-color: ${(p) => p.theme.colors.grey.grey2};\n  }\n\n  :active {\n    background-color: ${(p) => p.theme.colors.grey.grey3};\n    fill: ${(p) => p.theme.colors.red.red6};\n  }\n`\n\nexport const LogoSection = styled.div`\n  width: 40px;\n  height: 40px;\n  margin: 0 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  @media (${largeBreakPointMediaCondition}) {\n    width: 48px;\n    height: 48px;\n  }\n`\n\nexport const NavSection = styled.div`\n  flex: 1 0;\n  /* negative margin will offset logo and it's padding -> this will ensure icons are centered */\n  margin: -64px auto 0 auto;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n\n  > * + * {\n    margin-top: 2px;\n  }\n`\n\nexport const SettingsSection = styled.div`\n  position: relative;\n  z-index: 2;\n`\n","import * as React from 'react'\n\nfunction BridgeIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      width=\"24px\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <g\n        transform=\"translate(-24 -420) translate(8 291) translate(0 113) translate(16 16) translate(1 2)\"\n        fillRule=\"nonzero\"\n        stroke=\"none\"\n        strokeWidth={1}\n      >\n        <path d=\"M16.5818182 0L22.6909091 6.10909091 16.5818182 12.2181818 16.5818182 7.85454545 9.6 7.85454545 9.6 4.36363636 16.5818182 4.36363636z\" />\n        <path d=\"M6.10909091 19.2L0 13.0909091 6.10909091 6.98181818 6.10909091 11.3454545 13.0909091 11.3454545 13.0909091 14.8363636 6.10909091 14.8363636z\" />\n      </g>\n    </svg>\n  )\n}\n\nexport { BridgeIcon }\n","import React from 'react'\n\nexport const LaunchIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    width={props.width || 24}\n    height={props.height || 24}\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill={props.fill || '#FFF'}\n    {...props}\n  >\n    <g fill={props.fill || '#FD003D'} fillRule=\"nonzero\">\n      <path d=\"M21.756 2.247a.838.838 0 0 0-.637-.246C9.366 2.614 5.024 13.084 4.982 13.19a.838.838 0 0 0 .184.905l4.74 4.74c.239.238.597.31.909.182.105-.043 10.518-4.433 11.184-16.131a.838.838 0 0 0-.243-.639zm-6.841 9.208a1.676 1.676 0 1 1-2.37-2.369 1.676 1.676 0 0 1 2.37 2.37zM2.933 17.68a2.383 2.383 0 1 1 3.37 3.37C5.371 21.981 2 22 2 22s0-3.39.933-4.32zM10.678 3.854a7.466 7.466 0 0 0-6.565 2.08 7.611 7.611 0 0 0-1.16 1.509.838.838 0 0 0 .13 1.018l1.667 1.667a22.306 22.306 0 0 1 5.928-6.274zM20.147 13.323a7.466 7.466 0 0 1-2.081 6.565 7.611 7.611 0 0 1-1.508 1.16.838.838 0 0 1-1.018-.13l-1.668-1.667a22.306 22.306 0 0 0 6.275-5.928z\" />\n    </g>\n  </svg>\n)\n","import * as S from './styles'\nimport Link from 'next/link'\nimport React, { ReactNode } from 'react'\nimport { isAkamonEnabled } from 'ui/Common/config'\nimport { BridgeIcon } from 'ui/Icons/components/BridgeIcon'\nimport { LaunchIcon } from 'ui/Icons/components/LaunchIcon'\nimport MeldLogo from 'ui/Icons/components/MeldLogo'\nimport { StakeIcon } from 'ui/Icons/components/StakeIcon'\nimport { WalletIcon } from 'ui/Icons/components/WalletIcon'\n\n// import { DashboardIcon } from 'ui/Icons/components/DashboardIcon'\n// import { LendIcon } from 'ui/Icons/components/LendIcon'\n// import { BorrowIcon } from 'ui/Icons/components/BorrowIcon'\n// import { MintIcon } from 'ui/Icons/components/MintIcon'\n// import { NotificationIcon } from 'ui/Icons/components/NotificationIcon'\n// import { SettingsIcon } from 'ui/Icons/components/SettingsIcon'\n\ninterface SidebarIconButtonProps {\n  icon: ReactNode\n  name: string\n  active?: boolean\n  value: string\n}\n\nfunction SidebarButton({ icon, active, value, name }: SidebarIconButtonProps) {\n  return (\n    <Link passHref href={`/${value}`}>\n      <S.Button className={active ? 'activeItem' : ''} title={name}>\n        <div className=\"icon\">{icon}</div>\n      </S.Button>\n    </Link>\n  )\n}\n\ntype Item = { name: string; value: string; icon: ReactNode }\n\n/**\n * Renders MELD sidebar. Sidebar contains navigation links, and serves as a menu.\n * Sidebar will highlight active item and render links to other pages.\n */\nexport function Sidebar({\n  activeItem,\n  countdown,\n}: {\n  activeItem: string\n  countdown?: boolean\n}) {\n  // !!! REMOVE WITH COUNTDOWN\n  const _items = countdown\n    ? {\n        middle: [\n          { name: 'Countdown', value: 'countdown', icon: <LaunchIcon /> },\n        ],\n        bottom: [],\n      }\n    : ({\n        middle: [\n          // { name: 'Dashboard', value: 'dashboard', icon: <DashboardIcon /> },\n          // { name: 'Lend', value: 'lend', icon: <LendIcon /> },\n          // { name: 'Borrow', value: 'borrow', icon: <BorrowIcon /> },\n          { name: 'Stake MELD', value: 'stake', icon: <StakeIcon /> },\n          // { name: 'Mint', value: 'mint', icon: <MintIcon /> },\n          { name: 'Wallet', value: 'wallet', icon: <WalletIcon /> },\n          ...(isAkamonEnabled\n            ? [\n                {\n                  name: 'Akamon Gateway',\n                  value: 'akamon',\n                  icon: <BridgeIcon />,\n                },\n              ]\n            : []),\n        ],\n        bottom: [\n          // {\n          //   name: 'Notifications',\n          //   value: 'notifications',\n          //   icon: <NotificationIcon />,\n          // },\n          // { name: 'Settings', value: 'settings', icon: <SettingsIcon /> },\n        ],\n      } as { middle: Item[]; bottom: Item[] })\n\n  return (\n    <S.SidebarWrapper>\n      <S.LogoSection>\n        <MeldLogo width={40} height={40} />\n      </S.LogoSection>\n\n      <S.NavSection>\n        {_items.middle.map(({ name, value, icon }) => (\n          <SidebarButton\n            key={value}\n            value={value}\n            name={name}\n            icon={icon}\n            active={value === activeItem}\n          />\n        ))}\n      </S.NavSection>\n\n      <S.SettingsSection>\n        {_items.bottom.map(({ icon, name, value }) => (\n          <SidebarButton key={value} name={name} value={value} icon={icon} />\n        ))}\n      </S.SettingsSection>\n    </S.SidebarWrapper>\n  )\n}\n","// ---------- detect UA\n\nexport function isAndroid(): boolean {\n  return window.navigator.userAgent.match(/Android/i) != null\n}\n\nexport function isBlackBerry(): boolean {\n  return window.navigator.userAgent.match(/BlackBerry/i) != null\n}\n\nexport function isIos(): boolean {\n  return window.navigator.userAgent.match(/iPhone|iPad|iPod/i) != null\n}\n\nexport function isOperaMini(): boolean {\n  return window.navigator.userAgent.match(/Opera Mini/i) != null\n}\n\nexport function isIeMobile(): boolean {\n  return window.navigator.userAgent.match(/IEMobile/i) != null\n}\n\nexport function isMobile(): boolean {\n  return (\n    isAndroid() || isBlackBerry() || isIos() || isOperaMini() || isIeMobile()\n  )\n}\n","import { useEffect, useState } from 'react'\nimport * as BrowserUtils from 'ui/Common/util/browserUtils'\n\n/** Interface that describes runtime browser env info. */\nexport type IBrowserEnv = {\n  isAndroid: () => boolean\n  isBlackBerry: () => boolean\n  isIos: () => boolean\n  isOpera: () => boolean\n  isIeMobile: () => boolean\n  isMobile: () => boolean\n}\n\nexport function createBrowserEnv(): IBrowserEnv {\n  return {\n    isAndroid: () => {\n      return BrowserUtils.isAndroid()\n    },\n\n    isBlackBerry: () => {\n      return BrowserUtils.isBlackBerry()\n    },\n\n    isIos: () => {\n      return BrowserUtils.isIos()\n    },\n\n    isOpera: () => {\n      return BrowserUtils.isOperaMini()\n    },\n\n    isIeMobile: () => {\n      return BrowserUtils.isIeMobile()\n    },\n\n    isMobile: () => {\n      return BrowserUtils.isMobile()\n    },\n  }\n}\n\n/** Retrieve browser env information and return in a convenient object. */\nexport function useBrowserEnv() {\n  const [browserEnv, setBrowserEnv] = useState<IBrowserEnv>()\n\n  useEffect(() => {\n    // this touches `window` obj which is only available in browser so we have to use it in useEffect (because of Nextjs)\n    setBrowserEnv(createBrowserEnv())\n  }, [])\n\n  return browserEnv\n}\n","import MobilePlaceholder from './MobilePlaceholder'\nimport * as S from './styles'\nimport { useRouter } from 'next/router'\nimport { ReactNode } from 'react'\nimport { Sidebar } from 'ui/App/components/Sidebar'\nimport { useBrowserEnv } from 'ui/Common/util/hooks/useBrowserEnv'\n\ntype LayoutProps = {\n  children?: ReactNode\n  countdown?: boolean\n}\n\nexport default function Layout({ children, countdown }: LayoutProps) {\n  const router = useRouter()\n  const browserEnv = useBrowserEnv()\n\n  // pathname is absolute (starts with /) so use second item\n  const activeItem = router.pathname.split('/')[1]\n\n  // browserEnv is undefined at first so we'll show nothing until it is created to avoid flashing content\n  return (\n    <>\n      {browserEnv && !browserEnv.isMobile() && (\n        <>\n          <Sidebar countdown={countdown} activeItem={activeItem} />\n          <S.Page>\n            <main>{children}</main>\n          </S.Page>\n        </>\n      )}\n\n      {browserEnv?.isMobile() && <MobilePlaceholder />}\n    </>\n  )\n}\n","import * as React from 'react'\nimport { useUID } from 'react-uid'\n\nfunction MeldLogo(props: React.SVGProps<SVGSVGElement>) {\n  const idA = useUID()\n  const idB = useUID()\n  const idC = useUID()\n  const idD = useUID()\n\n  return (\n    <svg\n      width={32}\n      height={32}\n      viewBox=\"0 0 32 32\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <defs>\n        <linearGradient\n          x1=\"9.686%\"\n          y1=\"73.431%\"\n          x2=\"43.126%\"\n          y2=\"53.999%\"\n          id={idA}\n        >\n          <stop stopColor=\"#CB1A4F\" offset=\"0%\" />\n          <stop stopColor=\"#E51B44\" offset=\"100%\" />\n        </linearGradient>\n        <linearGradient\n          x1=\"44.066%\"\n          y1=\"56.774%\"\n          x2=\"57.141%\"\n          y2=\"42.582%\"\n          id={idB}\n        >\n          <stop stopColor=\"#E51B44\" stopOpacity={0} offset=\"0%\" />\n          <stop stopColor=\"#E51B44\" stopOpacity={0.049} offset=\"4.6%\" />\n          <stop stopColor=\"#E51B44\" stopOpacity={0.178} offset=\"12.7%\" />\n          <stop stopColor=\"#E51B44\" stopOpacity={0.33} offset=\"20.6%\" />\n          <stop stopColor=\"#E51B44\" offset=\"52.6%\" />\n        </linearGradient>\n        <linearGradient\n          x1=\"43.991%\"\n          y1=\"56.797%\"\n          x2=\"57.178%\"\n          y2=\"42.582%\"\n          id={idC}\n        >\n          <stop stopColor=\"#E51B44\" stopOpacity={0} offset=\"0%\" />\n          <stop stopColor=\"#E51B44\" stopOpacity={0.049} offset=\"4.6%\" />\n          <stop stopColor=\"#E51B44\" stopOpacity={0.178} offset=\"12.7%\" />\n          <stop stopColor=\"#E51B44\" stopOpacity={0.33} offset=\"20.6%\" />\n          <stop stopColor=\"#E51B44\" offset=\"52.6%\" />\n        </linearGradient>\n        <linearGradient\n          x1=\"12.7%\"\n          y1=\"20.517%\"\n          x2=\"82.2%\"\n          y2=\"75.608%\"\n          id={idD}\n        >\n          <stop stopColor=\"#D33651\" stopOpacity={0} offset=\"0%\" />\n          <stop stopColor=\"#D43650\" stopOpacity={0.326} offset=\"29%\" />\n          <stop stopColor=\"#D6364F\" offset=\"65.4%\" />\n        </linearGradient>\n      </defs>\n      <g fill=\"none\" fillRule=\"evenodd\">\n        <path\n          d=\"M16.003 0C7.163 0 0 7.163 0 16.003 0 24.837 7.163 32 16.003 32 24.844 32 32 24.837 32 16.003 32 7.163 24.837 0 16.003 0z\"\n          fill={`url(#${idA})`}\n          fillRule=\"nonzero\"\n        />\n        <path\n          d=\"M23.197 14.659l-1.95-5.533a1.377 1.377 0 00-1.288-.89h-.006c-.584 0-1.099.35-1.289.884l-2.671 7.651L13.32 9.12c-.2-.536-.715-.89-1.288-.885h-.007a1.359 1.359 0 00-1.288.891l-1.941 5.535h-1.87c-.754 0-1.364.586-1.364 1.308 0 .722.61 1.307 1.363 1.307h.955l-1.096 3.112c-.237.683.142 1.424.854 1.658.14.046.287.07.434.072.57 0 1.099-.345 1.289-.891l2.685-7.618 2.658 7.63c.2.536.715.89 1.288.884.583 0 1.098-.351 1.288-.885l2.658-7.63 2.685 7.625c.238.683 1.01 1.054 1.73.82.711-.228 1.098-.97.854-1.659l-1.09-3.114h.956c.753 0 1.363-.585 1.363-1.307s-.61-1.308-1.363-1.308l-1.877-.006z\"\n          fill=\"#FFF\"\n        />\n        <path\n          d=\"M9.73.034L7.926 5.196l1.489 3.887 1.641-4.712-1.3-3.657a1.241 1.241 0 01-.027-.68z\"\n          fill={`url(#${idB})`}\n          transform=\"translate(8.881 9.238)\"\n        />\n        <path\n          d=\"M1.817 0L0 5.18l1.502 3.908L3.165 4.37 1.843.683a1.245 1.245 0 01-.04-.614L1.816 0z\"\n          fill={`url(#${idC})`}\n          transform=\"translate(8.881 9.238)\"\n        />\n        <path\n          fill={`url(#${idD})`}\n          d=\"M11.158 4.58l-.046-.1z\"\n          transform=\"translate(8.881 9.238)\"\n        />\n      </g>\n    </svg>\n  )\n}\n\nexport default MeldLogo\n","import React from 'react'\n\nexport const StakeIcon = (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    <g>\n      <path d=\"M15.364 7.636c-1.31 0-1.964-.581-2.764-1.381C11.582 5.236 10.273 4 7.364 4 4.89 4 3 5.89 3 8.364c0 2.545 2.4 6.545 8.727 6.545 5.382 0 8.728-.145 8.728-3.636 0-2.182-2.619-3.637-5.091-3.637zm-4.946 2.546c-.509.436-1.309.654-2.036.654-.146 0-.364 0-.51-.072-1.09-.219-1.963-1.237-1.963-2.255 0-.945.655-1.964 1.891-1.964 1.09.073 3.2 1.237 3.2 2.546 0 .29-.073.654-.582 1.09z\" />\n      <path d=\"M11.727 16.364c-4.436 0-7.2-1.746-8.727-3.855v.946C3 16 5.4 20 11.727 20c5.382 0 8.728-.145 8.728-3.636v-1.6c-1.891 1.6-5.31 1.6-8.728 1.6z\" />\n    </g>\n  </svg>\n)\n","import React from 'react'\n\nexport const WalletIcon = (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    <g>\n      <path d=\"M7.834 3.667h11.11v2.778H7.835z\" />\n      <path d=\"M19.639 7.833H5.75a.696.696 0 010-1.389h.694V5.056H5.75c-1.15 0-2.083.932-2.083 2.083v10.417a2.778 2.778 0 002.777 2.777H19.64a.695.695 0 00.694-.694V8.528a.695.695 0 00-.694-.695zm-3.472 7.64a1.389 1.389 0 11-.001-2.778 1.389 1.389 0 010 2.777z\" />\n    </g>\n  </svg>\n)\n"],"names":["_Box","styled","p","d","position","bg","get","theme","colors","br","Box","props","style","getStylesFromProps","defaultProps","displayName","MINIMAL_CONTENT_WIDTH","LARGE_CONTENT_WIDTH","LARGE_BREAKPOINT","largeBreakPointMediaCondition","Grid","Row","Column","baseColumnsWidth","base","LargerColumnsWidth","larger","baseWidth","largerWidth","baseOffsetColumnsWidth","offset","largerOffsetColumnsWidth","largerOffset","baseOffset","MobilePlaceholder","w","h","justifyContent","alignItems","flexDirection","textAlign","video","width","autoPlay","loop","muted","playsInline","source","src","type","Text","mt","mb","block","color","variant","Page","spacing","xl","xxl","grey","grey10","SidebarWrapper","elements","sidebar","backgroundColor","Button","red","red6","grey3","grey2","LogoSection","NavSection","SettingsSection","BridgeIcon","svg","height","viewBox","xmlns","g","transform","fillRule","stroke","strokeWidth","path","LaunchIcon","fill","SidebarButton","icon","active","value","name","Link","passHref","href","S","className","title","div","Sidebar","activeItem","_items","countdown","middle","bottom","StakeIcon","WalletIcon","isAkamonEnabled","MeldLogo","map","isAndroid","window","navigator","userAgent","match","isBlackBerry","isIos","isOperaMini","isIeMobile","createBrowserEnv","BrowserUtils","isOpera","isMobile","Layout","children","router","useRouter","browserEnv","useState","useEffect","setBrowserEnv","useBrowserEnv","pathname","split","main","idA","useUID","idB","idC","idD","defs","linearGradient","x1","y1","x2","y2","id","stop","stopColor","stopOpacity"],"sourceRoot":""}