Bump @typescript-eslint/parser from 4.32.0 to 4.33.0

package.json

@@ -28,7 +28,7 @@
     "@types/styled-components": "^5.1.9",
     "@types/wcag-contrast": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.28.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "@ubeswap/injected-connector": "^6.1.0",
     "@uniswap/token-lists": "^1.0.0-beta.24",
     "@web3-react/core": "^6.1.9",
@@ -134,7 +134,7 @@
     "@ubeswap/core": "^1.0.2",
     "@ubeswap/default-token-list": "^4.1.39",
     "@ubeswap/moola": "^0.2.0",
-    "@ubeswap/sdk": "^2.1.1",
+    "@ubeswap/sdk": "^2.1.2",
     "@uniswap/default-token-list": "^2.0.0",
     "ajv-formats": "^2.1.1",
     "eventemitter3": "^4.0.7",

public/locales/en.json

@@ -229,5 +229,8 @@
   "farmUBE": "Farm UBE",
   "youHaveUnclaimedRewards": "You have {{count}} farms with unclaimed rewards",
   "claimAllRewards": "Claim all rewards",
-  "featuredPools": "Featured Pools"
+  "featuredPools": "Featured Pools",
+  "limitOrder": "Limit Order",
+  "price": "Price",
+  "placeOrder": "Place Order"
 }

src/components/Button/index.tsx

@@ -337,3 +337,20 @@ export function ButtonRadio({ active, ...rest }: { active?: boolean } & ButtonPr
     return <ButtonPrimary {...rest} />
   }
 }
+
+export const TabButton = styled(ButtonLight)<{
+  active?: boolean
+}>`
+  background-color: initial;
+  width: 35%;
+  ${({ active }) =>
+    active &&
+    `
+  box-shadow: 0 0 0 1pt #6D619A70;
+  background-color: #6D619A70;
+`}
+  font-size: 12px;
+  display: inline-block;
+  padding: 0.75rem;
+  margin: 0.5rem 0.05rem 0.5rem 0.5rem;
+`

src/components/Column/index.tsx

@@ -25,5 +25,8 @@ export const TopSection = styled(AutoColumn)`
   width: 100%;
   margin-bottom: 24px;
 `
+export const TopSectionLimitOrder = styled(TopSection)`
+  max-width: 420px;
+`
 
 export default Column

src/components/Header/BridgeMenuGroup.tsx

@@ -1,38 +1,11 @@
-import { darken } from 'polished'
 import React, { useRef } from 'react'
 import styled from 'styled-components'
 
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useToggleModal } from '../../state/application/hooks'
 import { ExternalLink } from '../../theme'
-
-const StyledNavMenu = styled('div')`
-  ${({ theme }) => theme.flexRowNoWrap}
-  align-items: left;
-  border-radius: 3rem;
-  outline: none;
-  cursor: pointer;
-  text-decoration: none;
-  color: ${({ theme }) => theme.text2};
-  font-size: 1rem;
-  width: fit-content;
-  margin: 0 12px;
-  font-weight: 500;
-
-  :hover,
-  :focus {
-    color: ${({ theme }) => darken(0.1, theme.text1)};
-  }
-
-  @media (max-width: 320px) {
-    margin: 0 8px;
-  }
-
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-    display: none;
-  `}
-`
+import { StyledNavMenu } from './NavMenu'
 
 const StyledMenu = styled.div`
   display: flex;
@@ -93,6 +66,9 @@ export default function BridgeMenuGroup() {
           <MenuItem id="link" href="https://optics.app/">
             Optics
           </MenuItem>
+          <MenuItem id="link" href="https://bridge.orbitchain.io/">
+            Orbit
+          </MenuItem>
         </MenuFlyout>
       )}
     </StyledMenu>

src/components/Header/ChartsMenuGroup.tsx

@@ -0,0 +1,70 @@
+import React, { useRef } from 'react'
+import styled from 'styled-components'
+
+import { useOnClickOutside } from '../../hooks/useOnClickOutside'
+import { ApplicationModal } from '../../state/application/actions'
+import { useModalOpen, useToggleModal } from '../../state/application/hooks'
+import { ExternalLink } from '../../theme'
+import { StyledNavMenu } from './NavMenu'
+
+const StyledMenu = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+`
+
+const MenuFlyout = styled.span`
+  min-width: 8.125rem;
+  background-color: ${({ theme }) => theme.bg3};
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
+    0px 24px 32px rgba(0, 0, 0, 0.01);
+  border-radius: 12px;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  font-size: 1rem;
+  position: absolute;
+  top: 3rem;
+  right: 0rem;
+  z-index: 100;
+`
+
+const MenuItem = styled(ExternalLink)`
+  flex: 1;
+  padding: 0.5rem 0.5rem;
+  color: ${({ theme }) => theme.text2};
+  :hover {
+    color: ${({ theme }) => theme.text1};
+    cursor: pointer;
+    text-decoration: none;
+  }
+  > svg {
+    margin-right: 8px;
+  }
+`
+
+export default function ChartsMenuGroup() {
+  const node = useRef<HTMLDivElement>()
+  const open = useModalOpen(ApplicationModal.CHARTS)
+  const toggle = useToggleModal(ApplicationModal.CHARTS)
+  useOnClickOutside(node, open ? toggle : undefined)
+
+  return (
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
+    <StyledMenu ref={node as any}>
+      <StyledNavMenu onClick={toggle}>Charts</StyledNavMenu>
+
+      {open && (
+        <MenuFlyout>
+          <MenuItem id="link" href="https://info.ubeswap.org/">
+            Analytics
+          </MenuItem>
+          <MenuItem id="link" href="https://celotracker.com">
+            Celo Tracker
+          </MenuItem>
+        </MenuFlyout>
+      )}
+    </StyledMenu>
+  )
+}

src/components/Header/NavMenu.tsx

@@ -0,0 +1,29 @@
+import { darken } from 'polished'
+import styled from 'styled-components'
+
+export const StyledNavMenu = styled('div')`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: left;
+  border-radius: 3rem;
+  outline: none;
+  cursor: pointer;
+  text-decoration: none;
+  color: ${({ theme }) => theme.text2};
+  font-size: 1rem;
+  width: fit-content;
+  margin: 0 12px;
+  font-weight: 500;
+
+  :hover,
+  :focus {
+    color: ${({ theme }) => darken(0.1, theme.text1)};
+  }
+
+  @media (max-width: 320px) {
+    margin: 0 8px;
+  }
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+    display: none;
+  `}
+`

src/components/Header/index.tsx

@@ -29,6 +29,7 @@ import Menu from '../Menu'
 import Row, { RowFixed } from '../Row'
 import Web3Status from '../Web3Status'
 import BridgeMenuGroup from './BridgeMenuGroup'
+import ChartsMenuGroup from './ChartsMenuGroup'
 import UbeBalanceContent from './UbeBalanceContent'
 
 const HeaderFrame = styled.div`
@@ -382,6 +383,9 @@ export default function Header() {
           <StyledNavLink id={`swap-nav-link`} to={'/swap'}>
             {t('swap')}
           </StyledNavLink>
+          <StyledNavLinkExtraSmall id={`swap-nav-link`} to={'/limit-order'}>
+            {t('limitOrder')}
+          </StyledNavLinkExtraSmall>
           <StyledNavLink
             id={`pool-nav-link`}
             to={'/pool'}
@@ -402,9 +406,7 @@ export default function Header() {
           <StyledNavLinkExtraSmall id={`stake-nav-link`} to={'/stake'}>
             {t('stake')}
           </StyledNavLinkExtraSmall>
-          <StyledExternalLink id={`stake-nav-link`} href={'https://info.ubeswap.org'}>
-            {t('charts')} <span style={{ fontSize: '11px' }}>↗</span>
-          </StyledExternalLink>
+          <ChartsMenuGroup />
         </HeaderLinks>
         <BurgerElement>
           <Hamburger size={18} hideOutline={false} label="show menu" toggled={drawerVisible} onToggle={onToggle} />
@@ -417,6 +419,16 @@ export default function Header() {
             onClose={onDrawerClose}
           >
             <StyledMenu>
+              <StyledMenuItem>
+                <StyledNavLink id={'stake-drawer-nav-link'} to={'/stake'} onClick={onDrawerClose}>
+                  {t('stake')}
+                </StyledNavLink>
+              </StyledMenuItem>
+              <StyledMenuItem>
+                <StyledNavLink id={'limit-orders-drawer-nav-link'} to={'/limit-order'} onClick={onDrawerClose}>
+                  Limit Orders
+                </StyledNavLink>
+              </StyledMenuItem>
               <StyledMenuItem>
                 <StyledNavLink id={'stake-drawer-nav-link'} to={'#'}>
                   Bridge
@@ -437,16 +449,26 @@ export default function Header() {
                   Optics
                 </StyledDrawerExternalLink>
               </StyledSubMenuItem>
+              <StyledSubMenuItem>
+                <StyledDrawerExternalLink id={`stake-drawer-nav-link`} href={'https://bridge.orbitchain.io/'}>
+                  Orbit
+                </StyledDrawerExternalLink>
+              </StyledSubMenuItem>
               <StyledMenuItem>
-                <StyledNavLink id={'stake-drawer-nav-link'} to={'/stake'} onClick={onDrawerClose}>
-                  {t('stake')}
+                <StyledNavLink id={'charts-drawer-nav-link'} to={'#'}>
+                  Charts
                 </StyledNavLink>
               </StyledMenuItem>
-              <StyledMenuItem>
-                <StyledDrawerExternalLink id={`stake-drawer-nav-link`} href={'https://info.ubeswap.org'}>
-                  {t('charts')}
+              <StyledSubMenuItem>
+                <StyledDrawerExternalLink id={`charts-analytics-drawer-nav-link`} href={'https://info.ubeswap.org/'}>
+                  Analytics
                 </StyledDrawerExternalLink>
-              </StyledMenuItem>
+              </StyledSubMenuItem>
+              <StyledSubMenuItem>
+                <StyledDrawerExternalLink id={`charts-celo-tracker-drawer-nav-link`} href={'https://celotracker.com/'}>
+                  Celo Tracker
+                </StyledDrawerExternalLink>
+              </StyledSubMenuItem>
             </StyledMenu>
           </StyledDrawer>
         </BurgerElement>

src/components/LimitOrderHistory/LimitOrderHistoryBody.tsx

@@ -0,0 +1,11 @@
+import { BodyWrapper } from 'pages/AppBody'
+import React from 'react'
+import styled from 'styled-components'
+
+const LimitOrderHistoryBodyWrapper = styled(BodyWrapper)`
+  margin-top: 2rem;
+`
+
+export default function LimitOrderHistoryBody({ children }: { children: React.ReactNode }) {
+  return <LimitOrderHistoryBodyWrapper>{children}</LimitOrderHistoryBodyWrapper>
+}