Feature/49/dashboard

src/components/LatestBlock.tsx

@@ -85,15 +85,15 @@ const LatestBlock: React.FC<LatestBlockProps> = ({
         status={
           !isLoading &&
           latestBlockHeight &&
-          currentHeight < latestBlockHeight - 5
+          currentHeight < latestBlockHeight - 10
             ? "error"
             : "success"
         }
       />
       <Label>
-        {isLoading || !latestBlockHeight
+        {isLoading || !currentHeight
           ? "Loading..."
-          : `Latest Block - ${latestBlockHeight}`}
+          : `Latest Block - ${currentHeight}`}
       </Label>
     </Wrapper>
   )

src/components/Select.tsx

@@ -50,7 +50,7 @@ const SelectElement = styled.select`
   border: solid 1px #0222ba;
   border-radius: 8px;
 
-  font-family: OpenSans;
+  font-family: "Open Sans", arial, sans-serif;
   font-size: 12px;
   font-weight: bold;
   font-stretch: normal;

src/components/Table.tsx

@@ -85,6 +85,7 @@ const Cell = styled.td`
 
 const HeaderCell = styled(Cell)`
   font-weight: 700;
+  cursor: pointer;
 `
 
 type SortIconProps = {

src/components/Tooltip.tsx

@@ -23,14 +23,22 @@ const TooltipTippyProps: TippyProps = {
 
 interface Props extends Omit<TippyProps, "children"> {
   onClick?: () => void
+  style?: React.CSSProperties
 }
 
-const Tooltip: FC<Props> = ({ className, onClick, children, ...props }) => {
+const Tooltip: FC<Props> = ({
+  className,
+  onClick,
+  children,
+  style,
+  ...props
+}) => {
   const button = (
     <button
       type="button"
       className={classNames(styles.button, className)}
       onClick={onClick}
+      style={style}
     >
       {children}
     </button>

src/index.scss

@@ -18,6 +18,22 @@ body,
   padding-bottom: $footer-height;
   background-attachment: fixed;
 
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  *::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background-color: lightgray;
+  }
+  *::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+  }
+
   @include mobile {
     padding-bottom: $footer-height-mobile;
 

src/layouts/Header.module.scss

@@ -27,9 +27,6 @@
     @include mobile {
       bottom: 0;
     }
-    .scrolled & {
-      bottom: 0;
-    }
   }
 
   & .container {
@@ -38,13 +35,9 @@
     top: 0;
   }
 
-  &.scrolled {
-    padding: 14px 0;
-  }
-
   & .wrapper,
   & section {
-    @include flex;
+    @include flex(flex-start);
   }
 }
 
@@ -57,18 +50,17 @@
     z-index: 4850;
 
     & .support {
-      transition: opacity 0.2s ease-in-out;
+      transition: right 0.2s ease-in-out, opacity 0.2s ease-in-out;
       position: fixed;
       right: 30px;
       bottom: 30px;
       width: auto;
       height: auto;
-    }
 
-    &.scrolled {
-      padding: 14px 0;
-      & .support {
+      .scrolled & {
         opacity: 0;
+        right: -48px;
+
         pointer-events: none;
       }
     }

src/layouts/Header.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { ReactComponent as Logo } from "../images/TerraswapLogo.svg"
 import Container from "../components/Container"
 import Connect from "./Connect"
@@ -22,12 +22,45 @@ const SidebarWrapper = styled.div`
 `
 
 const Header = () => {
+  const [isScrolled, setIsScrolled] = useState(false)
+  useEffect(() => {
+    let timerId: any
+    const showConnectButtonAfter1Sec = () => {
+      if (timerId) {
+        clearTimeout(timerId)
+      }
+
+      timerId = setTimeout(() => {
+        setIsScrolled(false)
+      }, 875)
+    }
+    const handleWheel = () => {
+      setIsScrolled(true)
+      showConnectButtonAfter1Sec()
+    }
+
+    window.addEventListener("wheel", handleWheel)
+    window.addEventListener("touchmove", handleWheel)
+    return () => {
+      window.removeEventListener("wheel", handleWheel)
+      window.removeEventListener("touchmove", handleWheel)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (isScrolled) {
+      document.body.classList.add("scrolled", styles.scrolled)
+      return
+    }
+    document.body.classList.remove("scrolled", styles.scrolled)
+  }, [isScrolled])
+
   return (
     <>
       <header className={styles.header}>
         <Container className={styles.container}>
           <section className={styles.wrapper}>
-            <Link to="/dashboard">
+            <Link to="/">
               <Logo height={38} className={styles.logo} />
             </Link>
           </section>

src/layouts/Sidebar.tsx

@@ -219,19 +219,19 @@ const Sidebar = () => {
       <Wrapper isOpen={isOpen}>
         <div>
           <NavLink
-            to="/dashboard"
+            to="/"
             exact
             isActive={(match, location) => {
               return location.pathname?.includes("/pairs") ||
-                location.pathname?.includes("/dashboard")
+                location.pathname === "/"
                 ? true
                 : false
             }}
             onClick={() => close()}
           >
             Dashboard
           </NavLink>
-          <NavLink to="/" exact onClick={() => close()}>
+          <NavLink to="/swap" exact onClick={() => close()}>
             Swap
           </NavLink>
         </div>

src/pages/Dashboard/Pair.tsx

@@ -69,7 +69,7 @@ const PairPage = () => {
             gap: 10,
           }}
         >
-          <Link to="/dashboard" style={{ lineHeight: "1", fontSize: 0 }}>
+          <Link to="/" style={{ lineHeight: "1", fontSize: 0 }}>
             <IconGoBack height={30} />
           </Link>
           <div>
@@ -419,7 +419,6 @@ const PairPage = () => {
                             </span>
                             <br />
                             <span>
-                              +&nbsp;
                               {formatMoney(
                                 Number(
                                   lookup(

src/pages/Dashboard/Summary.tsx

@@ -22,6 +22,11 @@ const Wrapper = styled.div`
     height: 48px;
     padding: 0;
   }
+
+  &,
+  & * {
+    box-sizing: border-box;
+  }
 `
 
 const SummaryList = styled.div`
@@ -34,6 +39,7 @@ const SummaryList = styled.div`
   align-items: center;
 
   transition: top 0.2s ease-in-out;
+  font-size: 0;
 
   @media screen and (max-width: ${({ theme }) => theme.breakpoint}) {
     display: block;
@@ -50,7 +56,7 @@ const SummaryItem = styled.div.attrs<SummaryItemProps>({})<SummaryItemProps>`
 
   @media screen and (max-width: ${({ theme }) => theme.breakpoint}) {
     display: block;
-    padding: 13px 30px;
+    padding: 13px 13px;
   }
 
   & label {
@@ -93,7 +99,7 @@ const Summary: React.FC<SummaryProps> = ({ data }) => {
         current += 1
         return current >= count ? 0 : current
       })
-    }, 3000)
+    }, 2000)
 
     return () => {
       if (intervalId) {

src/pages/Dashboard/index.tsx

@@ -17,6 +17,7 @@ import Select from "components/Select"
 
 import Summary from "./Summary"
 import LatestBlock from "components/LatestBlock"
+import Tooltip from "components/Tooltip"
 
 const Wrapper = styled.div`
   width: 100%;
@@ -535,7 +536,14 @@ const Dashboard = () => {
                   },
                   {
                     accessor: "apr",
-                    Header: "Commission APY (7D avg)",
+                    Header: (
+                      <Tooltip
+                        content="Commission APR (7D avg)"
+                        style={{ display: "inline-flex" }}
+                      >
+                        APR (7D avg)
+                      </Tooltip>
+                    ),
                     Cell: ({ cell: { value } }: any) => (
                       <span>{(Number(value) * 100).toFixed(2)}%</span>
                     ),

src/routes.tsx

@@ -7,8 +7,8 @@ import PairPage from "./pages/Dashboard/Pair"
 
 export default () => (
   <Switch>
-    <Route exact path="/" component={Swap} />
-    <Route exact path="/dashboard" component={Dashboard} />
+    <Route exact path="/" component={Dashboard} />
+    <Route exact path="/swap" component={Swap} />
     <Route exact path="/pairs/:address" component={PairPage} />
     <Redirect to="/" />
   </Switch>