+ }
+ >
+ {langs.map((lang) => (
+
setLang(lang)}
+ // Safari fix
+ style={{ minHeight: "32px", height: "auto" }}
+ >
+ {lang.language}
+
+ ))}
+
+);
+
+export default React.memo(LangSelector, (prev, next) => prev.currentLang === next.currentLang);
diff --git a/src/widgets/Menu/components/Logo.tsx b/src/widgets/Menu/components/Logo.tsx
index f9f53d576..d8fb6a570 100644
--- a/src/widgets/Menu/components/Logo.tsx
+++ b/src/widgets/Menu/components/Logo.tsx
@@ -62,4 +62,4 @@ const Logo: React.FC
= ({ isPushed, togglePush, isDark, href }) => {
);
};
-export default Logo;
+export default React.memo(Logo, (prev, next) => prev.isPushed === next.isPushed && prev.isDark === next.isDark);
diff --git a/src/widgets/Menu/components/MenuEntry.tsx b/src/widgets/Menu/components/MenuEntry.tsx
index 537e5e8e8..e0b426ec5 100644
--- a/src/widgets/Menu/components/MenuEntry.tsx
+++ b/src/widgets/Menu/components/MenuEntry.tsx
@@ -1,3 +1,4 @@
+import React from "react";
import styled, { keyframes, DefaultTheme } from "styled-components";
import { MENU_ENTRY_HEIGHT } from "../config";
@@ -65,4 +66,7 @@ MenuEntry.defaultProps = {
role: "button",
};
-export { MenuEntry, LinkLabel };
+const MenuEntryMemo = React.memo(MenuEntry, () => true);
+const LinkLabelMemo = React.memo(LinkLabel, () => true);
+
+export { MenuEntryMemo as MenuEntry, LinkLabelMemo as LinkLabel };
diff --git a/src/widgets/Menu/components/MenuLink.tsx b/src/widgets/Menu/components/MenuLink.tsx
index 3db29953a..d08c37a97 100644
--- a/src/widgets/Menu/components/MenuLink.tsx
+++ b/src/widgets/Menu/components/MenuLink.tsx
@@ -10,4 +10,4 @@ const MenuLink: React.FC> = ({ href, ...
return ;
};
-export default MenuLink;
+export default React.memo(MenuLink, () => true);
diff --git a/src/widgets/Menu/components/PanelFooter.tsx b/src/widgets/Menu/components/PanelFooter.tsx
index 09c6a9b85..98479afc1 100644
--- a/src/widgets/Menu/components/PanelFooter.tsx
+++ b/src/widgets/Menu/components/PanelFooter.tsx
@@ -1,23 +1,16 @@
import React from "react";
import styled from "styled-components";
-import { PancakeRoundIcon, CogIcon, SvgProps } from "../../../components/Svg";
-import Text from "../../../components/Text/Text";
-import Flex from "../../../components/Box/Flex";
-import Dropdown from "../../../components/Dropdown/Dropdown";
-import Link from "../../../components/Link/Link";
-import Skeleton from "../../../components/Skeleton/Skeleton";
-import Button from "../../../components/Button/Button";
+import { CogIcon } from "../../../components/Svg";
import IconButton from "../../../components/Button/IconButton";
-import MenuButton from "./MenuButton";
-import * as IconModule from "../icons";
-import { socials, MENU_ENTRY_HEIGHT } from "../config";
+import { MENU_ENTRY_HEIGHT } from "../config";
import { PanelProps, PushedProps } from "../types";
+import CakePrice from "./CakePrice";
+import ThemeSwitcher from "./ThemeSwitcher";
+import SocialLinks from "./SocialLinks";
+import LangSelector from "./LangSelector";
interface Props extends PanelProps, PushedProps {}
-const Icons = (IconModule as unknown) as { [key: string]: React.FC };
-const { MoonIcon, SunIcon, LanguageIcon } = Icons;
-
const Container = styled.div`
flex: none;
padding: 8px 4px;
@@ -25,19 +18,6 @@ const Container = styled.div`
border-top: solid 2px rgba(133, 133, 133, 0.1);
`;
-const PriceLink = styled.a`
- display: flex;
- align-items: center;
- svg {
- transition: transform 0.3s;
- }
- :hover {
- svg {
- transform: scale(1.2);
- }
- }
-`;
-
const SettingsEntry = styled.div`
display: flex;
align-items: center;
@@ -77,69 +57,12 @@ const PanelFooter: React.FC = ({
return (
- {cakePriceUsd ? (
-
-
- {`$${cakePriceUsd.toFixed(3)}`}
-
- ) : (
-
- )}
-
- {socials.map((social, index) => {
- const Icon = Icons[social.icon];
- const iconProps = { width: "24px", color: "textSubtle", style: { cursor: "pointer" } };
- const mr = index < socials.length - 1 ? "24px" : 0;
- if (social.items) {
- return (
- }>
- {social.items.map((item) => (
-
- {item.label}
-
- ))}
-
- );
- }
- return (
-
-
-
- );
- })}
-
+
+
-
- }>
- {currentLang?.toUpperCase()}
-
- }
- >
- {langs.map((lang) => (
- setLang(lang)}
- // Safari fix
- style={{ minHeight: "32px", height: "auto" }}
- >
- {lang.language}
-
- ))}
-
+
+
);
diff --git a/src/widgets/Menu/components/SocialLinks.tsx b/src/widgets/Menu/components/SocialLinks.tsx
new file mode 100644
index 000000000..0306e3de4
--- /dev/null
+++ b/src/widgets/Menu/components/SocialLinks.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { SvgProps } from "../../../components/Svg";
+import Flex from "../../../components/Box/Flex";
+import Dropdown from "../../../components/Dropdown/Dropdown";
+import Link from "../../../components/Link/Link";
+import * as IconModule from "../icons";
+import { socials } from "../config";
+
+const Icons = (IconModule as unknown) as { [key: string]: React.FC };
+
+const SocialLinks: React.FC = () => (
+
+ {socials.map((social, index) => {
+ const Icon = Icons[social.icon];
+ const iconProps = { width: "24px", color: "textSubtle", style: { cursor: "pointer" } };
+ const mr = index < socials.length - 1 ? "24px" : 0;
+ if (social.items) {
+ return (
+ }>
+ {social.items.map((item) => (
+
+ {item.label}
+
+ ))}
+
+ );
+ }
+ return (
+
+
+
+ );
+ })}
+
+);
+
+export default React.memo(SocialLinks, () => true);
diff --git a/src/widgets/Menu/components/ThemeSwitcher.tsx b/src/widgets/Menu/components/ThemeSwitcher.tsx
new file mode 100644
index 000000000..85a443c3f
--- /dev/null
+++ b/src/widgets/Menu/components/ThemeSwitcher.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { SvgProps } from "../../../components/Svg";
+import Text from "../../../components/Text/Text";
+import Flex from "../../../components/Box/Flex";
+import Button from "../../../components/Button/Button";
+import * as IconModule from "../icons";
+
+const Icons = (IconModule as unknown) as { [key: string]: React.FC };
+const { MoonIcon, SunIcon } = Icons;
+
+interface Props {
+ isDark: boolean;
+ toggleTheme: (isDark: boolean) => void;
+}
+
+const ThemeSwitcher: React.FC = ({ isDark, toggleTheme }) => (
+
+);
+
+export default React.memo(ThemeSwitcher, (prev, next) => prev.isDark === next.isDark);
diff --git a/src/widgets/Menu/components/UserBlock.tsx b/src/widgets/Menu/components/UserBlock.tsx
index 6457a85a0..01f7e834f 100644
--- a/src/widgets/Menu/components/UserBlock.tsx
+++ b/src/widgets/Menu/components/UserBlock.tsx
@@ -38,4 +38,4 @@ const UserBlock: React.FC = ({ account, login, logout }) => {
);
};
-export default UserBlock;
+export default React.memo(UserBlock, (prevProps, nextProps) => prevProps.account === nextProps.account);
diff --git a/src/widgets/Menu/icons/Logo.tsx b/src/widgets/Menu/icons/Logo.tsx
index 6f5383e08..fb898e0e1 100644
--- a/src/widgets/Menu/icons/Logo.tsx
+++ b/src/widgets/Menu/icons/Logo.tsx
@@ -82,4 +82,4 @@ const Logo: React.FC = ({ isDark, ...props }) => {
);
};
-export default Logo;
+export default React.memo(Logo, (prev, next) => prev.isDark === next.isDark);