feat: Add cake price to menu (#49)

package.json

@@ -39,7 +39,6 @@
     "@types/react": "^16.9.52",
     "@types/react-router-dom": "^5.1.6",
     "@types/styled-components": "^5.1.4",
-    "@types/styled-system": "^5.1.10",
     "@typescript-eslint/eslint-plugin": "^4.4.1",
     "@typescript-eslint/parser": "^4.4.1",
     "babel-loader": "^8.1.0",
@@ -74,6 +73,7 @@
   },
   "dependencies": {
     "@types/lodash": "^4.14.162",
+    "@types/styled-system": "^5.1.10",
     "lodash": "^4.17.20",
     "styled-system": "^5.1.5"
   }

src/components/Svg/Icons/LogoRound.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import Svg from "../Svg";
+import SvgProps from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 512 512" {...props}>
+      <circle cx="256" cy="256" r="256" fill="url(#paint0_linear)" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M149.813 139.861C144.738 112.406 165.591 87.0417 193.238 87.0417C217.636 87.0417 237.414 107.022 237.414 131.669V186.687C243.517 186.252 249.718 186.028 255.998 186.028C262.032 186.028 267.992 186.234 273.862 186.636V131.669C273.862 107.022 293.641 87.0417 318.039 87.0417C345.686 87.0417 366.539 112.406 361.464 139.861L349.509 204.532C390.538 222.627 421.562 254.056 421.562 293.548V317.442C421.562 349.919 400.293 377.11 370.56 395.466C340.595 413.965 300.058 424.962 255.998 424.962C211.939 424.962 171.401 413.965 141.436 395.466C111.703 377.11 90.4342 349.919 90.4342 317.442V293.548C90.4342 254.265 121.139 222.957 161.822 204.825L149.813 139.861ZM334.189 213.028L348.178 137.354C351.701 118.299 337.227 100.695 318.039 100.695C301.105 100.695 287.378 114.562 287.378 131.669V201.683C282.941 201.108 278.433 200.653 273.862 200.323C268.003 199.899 262.042 199.682 255.998 199.682C249.707 199.682 243.505 199.918 237.414 200.376C232.844 200.72 228.335 201.189 223.899 201.777V131.669C223.899 114.562 210.172 100.695 193.238 100.695C174.05 100.695 159.576 118.299 163.099 137.354L177.134 213.279C133.257 229.744 103.95 259.533 103.95 293.548V317.442C103.95 369.283 172.024 411.308 255.998 411.308C339.972 411.308 408.047 369.283 408.047 317.442V293.548C408.047 259.36 378.439 229.44 334.189 213.028Z"
+        fill="#633001"
+      />
+      <path
+        d="M408.047 317.442C408.047 369.283 339.972 411.308 255.998 411.308C172.024 411.308 103.95 369.283 103.95 317.442V293.548H408.047V317.442Z"
+        fill="#FEDC90"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M163.099 137.354C159.576 118.299 174.05 100.695 193.238 100.695C210.172 100.695 223.899 114.562 223.899 131.669V201.777C234.247 200.404 244.986 199.682 255.998 199.682C266.755 199.682 277.252 200.371 287.378 201.683V131.669C287.378 114.562 301.105 100.695 318.039 100.695C337.227 100.695 351.701 118.299 348.178 137.354L334.189 213.028C378.439 229.44 408.047 259.36 408.047 293.548C408.047 345.389 339.972 387.415 255.998 387.415C172.024 387.415 103.95 345.389 103.95 293.548C103.95 259.533 133.257 229.744 177.134 213.279L163.099 137.354Z"
+        fill="#D1884F"
+      />
+      <path
+        d="M213.762 286.722C213.762 300.86 206.199 312.322 196.868 312.322C187.538 312.322 179.974 300.86 179.974 286.722C179.974 272.583 187.538 261.122 196.868 261.122C206.199 261.122 213.762 272.583 213.762 286.722Z"
+        fill="#633001"
+      />
+      <path
+        d="M330.333 286.722C330.333 300.86 322.769 312.322 313.439 312.322C304.108 312.322 296.544 300.86 296.544 286.722C296.544 272.583 304.108 261.122 313.439 261.122C322.769 261.122 330.333 272.583 330.333 286.722Z"
+        fill="#633001"
+      />
+      <defs>
+        <linearGradient id="paint0_linear" x1="256" y1="0" x2="256" y2="512" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#54DADE" />
+          <stop offset="0.762157" stopColor="#24C7D6" />
+        </linearGradient>
+      </defs>
+    </Svg>
+  );
+};
+
+export default Icon;

src/components/Svg/index.tsx

@@ -5,6 +5,7 @@ export { default as ErrorIcon } from "./Icons/Error";
 export { default as HamburgerIcon } from "./Icons/Hamburger";
 export { default as HelpIcon } from "./Icons/Help";
 export { default as LogoIcon } from "./Icons/Logo";
+export { default as LogoRoundIcon } from "./Icons/LogoRound";
 export { default as OpenNewIcon } from "./Icons/OpenNew";
 export { default as PancakesIcon } from "./Icons/Pancakes";
 export { default as RemoveIcon } from "./Icons/Remove";

src/theme/base.ts

@@ -8,6 +8,7 @@ const mediaQueries: MediaQueries = {
   md: `@media screen and (min-width: ${breakpoints[2]})`,
   lg: `@media screen and (min-width: ${breakpoints[3]})`,
   xl: `@media screen and (min-width: ${breakpoints[4]})`,
+  nav: `@media screen and (min-width: ${breakpoints[3]})`,
 };
 
 export const shadows = {

src/theme/types.ts

@@ -12,6 +12,7 @@ export type MediaQueries = {
   md: string;
   lg: string;
   xl: string;
+  nav: string;
 };
 
 export type Spacing = number[];

src/widgets/Nav/MobileOnlyButton.tsx → src/widgets/Nav/Buttons.tsx

@@ -2,14 +2,22 @@ import styled from "styled-components";
 import Button from "../../components/Button";
 
 const MobileOnlyButton = styled(Button)`
-  ${({ theme }) => theme.mediaQueries.md} {
+  ${({ theme }) => theme.mediaQueries.nav} {
     display: none;
   }
 `;
-
 MobileOnlyButton.defaultProps = {
   variant: "text",
   size: "sm",
 };
 
-export default MobileOnlyButton;
+const MenuButton = styled(Button)`
+  padding: 8px;
+  border-radius: 8px;
+`;
+MenuButton.defaultProps = {
+  variant: "text",
+  size: "sm",
+};
+
+export { MobileOnlyButton, MenuButton };

src/widgets/Nav/Panel.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 import styled from "styled-components";
 import { NavLink } from "react-router-dom";
-import { CloseIcon } from "../../components/Svg";
+import { CloseIcon, LogoRoundIcon } from "../../components/Svg";
 import Button from "../../components/Button";
+import Flex from "../../components/Flex";
+import Text from "../../components/Text";
 import Dropdown from "../../components/Dropdown";
 import Language from "./icons/Language";
 import UserBlock from "./UserBlock";
-import MobileOnlyButton from "./MobileOnlyButton";
+import { MobileOnlyButton, MenuButton } from "./Buttons";
 import config from "./config";
 import Dark from "./icons/Dark";
 import Light from "./icons/Light";
@@ -31,7 +33,7 @@ const StyledPanel = styled.div<{ show: boolean }>`
   overflow-y: auto;
   transition: right 0.4s;
   z-index: 11;
-  ${({ theme }) => theme.mediaQueries.md} {
+  ${({ theme }) => theme.mediaQueries.nav} {
     position: unset;
     max-width: unset;
     overflow-y: unset;
@@ -49,7 +51,7 @@ const LinkBlock = styled.div`
   flex-direction: column;
   order: 2;
   margin-bottom: 32px;
-  ${({ theme }) => theme.mediaQueries.md} {
+  ${({ theme }) => theme.mediaQueries.nav} {
     order: 1;
     margin-bottom: 0;
     flex-direction: row;
@@ -65,7 +67,7 @@ const LinkBlock = styled.div`
     :hover {
       background-color: ${({ theme }) => theme.nav.hover};
     }
-    ${({ theme }) => theme.mediaQueries.md} {
+    ${({ theme }) => theme.mediaQueries.nav} {
       display: flex;
       align-items: center;
       padding: 0 12px;
@@ -78,7 +80,7 @@ const ControlBlock = styled.div`
   align-items: center;
   order: 3;
   margin-left: 40px;
-  ${({ theme }) => theme.mediaQueries.md} {
+  ${({ theme }) => theme.mediaQueries.nav} {
     order: 2;
     margin-left: 0;
     flex-grow: 1;
@@ -97,6 +99,7 @@ const Panel: React.FC<Props> = ({
   langs,
   setLang,
   currentLang,
+  cakePriceUsd,
 }) => {
   return (
     <StyledPanel show={show}>
@@ -121,18 +124,25 @@ const Panel: React.FC<Props> = ({
         )}
       </LinkBlock>
       <ControlBlock>
-        <Button size="sm" variant="text" onClick={() => toggleTheme(!isDark)}>
+        {cakePriceUsd && (
+          <Flex mr="4px">
+            <LogoRoundIcon mr="4px" />
+            <Text bold>{`$${cakePriceUsd.toFixed(3)}`}</Text>
+          </Flex>
+        )}
+        <MenuButton onClick={() => toggleTheme(!isDark)}>
           {isDark ? <Light color="primary" /> : <Dark color="primary" />}
-        </Button>
+        </MenuButton>
         <Dropdown
           target={
-            <Button startIcon={<Language color="primary" />} variant="text" size="sm" mr="4px">
+            <MenuButton startIcon={<Language color="primary" />} mr="4px">
               {currentLang}
-            </Button>
+            </MenuButton>
           }
         >
           {langs.map((lang) => (
             <Button
+              fullWidth
               key={lang.code}
               variant="text"
               size="sm"

src/widgets/Nav/UserBlock.tsx

@@ -19,7 +19,7 @@ const Container = styled.div`
   order: 1;
   margin-bottom: 32px;
   margin-left: 40px;
-  ${({ theme }) => theme.mediaQueries.md} {
+  ${({ theme }) => theme.mediaQueries.nav} {
     order: 2;
     margin-bottom: 0;
     margin-left: 0;

src/widgets/Nav/index.stories.tsx

@@ -39,6 +39,7 @@ export const Connected: React.FC = () => {
         langs={langs}
         setLang={noop}
         currentLang="EN"
+        cakePriceUsd={0.23158668932877668}
       />
     </BrowserRouter>
   );
@@ -56,6 +57,7 @@ export const NotConnected: React.FC = () => {
         langs={langs}
         setLang={() => null}
         currentLang="EN"
+        cakePriceUsd={0.23158668932877668}
       />
     </BrowserRouter>
   );

src/widgets/Nav/index.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { HamburgerIcon } from "../../components/Svg";
 import Overlay from "../../components/Overlay";
 import Logo from "./icons/Logo";
-import MobileOnlyButton from "./MobileOnlyButton";
+import { MobileOnlyButton } from "./Buttons";
 import Panel from "./Panel";
 import { NavProps } from "./types";
 
@@ -14,7 +14,7 @@ const StyledNav = styled.nav`
   padding: 0 18px;
   height: 64px;
   background-color: ${({ theme }) => theme.nav.background};
-  ${({ theme }) => theme.mediaQueries.md} {
+  ${({ theme }) => theme.mediaQueries.nav} {
     justify-content: normal;
   }
 `;
@@ -32,6 +32,7 @@ const Nav: React.FC<NavProps> = ({
   langs,
   setLang,
   currentLang,
+  cakePriceUsd,
 }) => {
   const [isOpened, setIsOpened] = useState(false);
   return (
@@ -53,6 +54,7 @@ const Nav: React.FC<NavProps> = ({
         langs={langs}
         setLang={setLang}
         currentLang={currentLang}
+        cakePriceUsd={cakePriceUsd}
       />
       <Overlay show={isOpened} onClick={() => setIsOpened(false)} role="presentation" />
     </StyledNav>

src/widgets/Nav/types.ts

@@ -22,4 +22,5 @@ export interface NavProps {
   currentLang: string;
   langs: LangType[];
   setLang: (lang: LangType) => void;
+  cakePriceUsd?: number;
 }