增加项目文档

packages/pancake-uikit/src/widgets/Menu/Menu.tsx

@@ -9,6 +9,7 @@ import Panel from "./components/Panel";
 import UserBlock from "./components/UserBlock";
 import { NavProps } from "./types";
 import Avatar from "./components/Avatar";
+import CakePrice from "./components/CakePrice";
 import { MENU_HEIGHT, SIDEBAR_WIDTH_REDUCED, SIDEBAR_WIDTH_FULL } from "./config";
 
 const Wrapper = styled.div`
@@ -76,6 +77,7 @@ const Menu: React.FC<NavProps> = ({
   children,
   inviteUrl,
   socialLink,
+  documentAddress,
 }) => {
   const { isXl } = useMatchBreakpoints();
   const isMobile = isXl === false;
@@ -124,12 +126,15 @@ const Menu: React.FC<NavProps> = ({
           isDark={isDark}
           href={homeLink?.href ?? "/"}
         />
-        {!!login && !!logout && (
+        <Flex>
-          <Flex>
+          <CakePrice cakePriceUsd={cakePriceUsd} />
-            <UserBlock account={account} inviteUrl={inviteUrl} login={login} logout={logout} />
+          {!!login && !!logout && (
-            {profile && <Avatar profile={profile} />}
+            <Flex>
-          </Flex>
+              <UserBlock account={account} inviteUrl={inviteUrl} login={login} logout={logout} />
-        )}
+              {profile && <Avatar profile={profile} />}
+            </Flex>
+          )}
+        </Flex>
       </StyledNav>
       <BodyWrapper>
         <Panel
@@ -145,6 +150,7 @@ const Menu: React.FC<NavProps> = ({
           pushNav={setIsPushed}
           links={links}
           socialLink={socialLink}
+          documentAddress={documentAddress}
         />
         <Inner isPushed={isPushed} showMenu={showMenu}>
           {children}

packages/pancake-uikit/src/widgets/Menu/components/CakePrice.tsx

@@ -10,6 +10,7 @@ interface Props {
 const PriceLink = styled.a`
   display: flex;
   align-items: center;
+  margin-right: 10px;
   svg {
     transition: transform 0.3s;
   }

packages/pancake-uikit/src/widgets/Menu/components/ExternalLink.tsx

@@ -18,11 +18,15 @@ const Image = styled.img`
   cursor: pointer;
 `;
 
+const LinkText = styled(Text)`
+  word-break: break-all;
+`;
+
 const ExternalLink: React.FC<ExternalLinkProps> = ({ link = "", name = "", icon = "" }) => {
   return (
     <>
       <Link external href={link} color="textSubtle">
-        {icon ? <Image src={icon} title={name} /> : <Text>{name}</Text>}
+        {icon ? <Image src={icon} title={name} /> : <LinkText>{name}</LinkText>}
       </Link>
     </>
   );

packages/pancake-uikit/src/widgets/Menu/components/LangSelector.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import styled from "styled-components";
 import Text from "../../../components/Text/Text";
 import Dropdown from "../../../components/Dropdown/Dropdown";
 import Button from "../../../components/Button/Button";
@@ -12,13 +13,17 @@ interface Props {
   setLang: (lang: Language) => void;
 }
 
+const ButtonStyle = styled(Button)`
+  padding-left: 0;
+`;
+
 const LangSelector: React.FC<Props> = ({ currentLang, langs, setLang }) => (
   <Dropdown
     position="top-right"
     target={
-      <Button variant="text" startIcon={<LanguageIcon color="textSubtle" width="24px" />}>
+      <ButtonStyle variant="text" startIcon={<LanguageIcon color="textSubtle" width="24px" />}>
         <Text color="textSubtle">{currentLang?.toUpperCase()}</Text>
-      </Button>
+      </ButtonStyle>
     }
   >
     {langs.map((lang) => (

packages/pancake-uikit/src/widgets/Menu/components/Logo.tsx

@@ -66,7 +66,7 @@ const Logo: React.FC<Props> = ({ isPushed, togglePush, isDark, href }) => {
       {/* <LogoIcon className="mobile-icon" /> */}
       {/* <LogoWithText className="desktop-icon" isDark={isDark} /> */}
       <HighIcon width={30} height={30} />
-      <Text className="mobile-Text">High City Swap</Text>
+      <Text className="mobile-Text">Hi City Swap</Text>
     </>
   );
 

packages/pancake-uikit/src/widgets/Menu/components/Panel.tsx

@@ -8,6 +8,7 @@ import { PanelProps, PushedProps } from "../types";
 interface Props extends PanelProps, PushedProps {
   showMenu: boolean;
   isMobile: boolean;
+  documentAddress?: string;
 }
 
 const StyledPanel = styled.div<{ isPushed: boolean; showMenu: boolean }>`

packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx

@@ -1,16 +1,20 @@
-import React from "react";
+import React, { useContext } from "react";
 import styled from "styled-components";
 import { CogIcon } from "../../../components/Svg";
 import IconButton from "../../../components/Button/IconButton";
+import Link from "../../../components/Link/Link";
 import { MENU_ENTRY_HEIGHT } from "../config";
 import { PanelProps, PushedProps } from "../types";
-import CakePrice from "./CakePrice";
+// import CakePrice from "./CakePrice";
 import ThemeSwitcher from "./ThemeSwitcher";
 import LangSelector from "./LangSelector";
 import MoreDropDown from "./MoreDropDown";
 import DefaultDropDown from "./DefaultDropDown";
+import { ConfigContext } from "../../../components/ConfigProvider/context";
 
-interface Props extends PanelProps, PushedProps {}
+interface Props extends PanelProps, PushedProps {
+  documentAddress?: string;
+}
 
 const Container = styled.div`
   flex: none;
@@ -45,9 +49,11 @@ const PanelFooter: React.FC<Props> = ({
   langs,
   setLang,
   socialLink,
+  documentAddress,
 }) => {
-  const defaultList = socialLink?.slice(0, 2);
+  const { t } = useContext(ConfigContext);
-  const moreList = socialLink?.slice(2);
+  const defaultList = socialLink?.slice(0, 3);
+  const moreList = socialLink?.slice(3);
   if (!isPushed) {
     return (
       <Container>
@@ -60,7 +66,7 @@ const PanelFooter: React.FC<Props> = ({
   return (
     <Container>
       <SocialEntry>
-        <CakePrice cakePriceUsd={cakePriceUsd} />
+        {/* <CakePrice cakePriceUsd={cakePriceUsd} /> */}
         <>
           {defaultList && <DefaultDropDown list={defaultList} />}
           {moreList && moreList.length > 0 && <MoreDropDown list={moreList} />}
@@ -69,6 +75,9 @@ const PanelFooter: React.FC<Props> = ({
       <SettingsEntry>
         {/* <ThemeSwitcher isDark={isDark} toggleTheme={toggleTheme} /> */}
         <LangSelector currentLang={currentLang} langs={langs} setLang={setLang} />
+        <Link href={documentAddress} target="_blank" color="#7A6EAA">
+          {t("help center")}
+        </Link>
       </SettingsEntry>
     </Container>
   );

packages/pancake-uikit/src/widgets/Menu/icons/Announcement.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Svg from "../../../components/Svg/Svg";
+import { SvgProps } from "../../../components/Svg/types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path
+        id="公告"
+        fill="#7A6EAA"
+        d="M16.532,0H2.467A2.433,2.433,0,0,0,0,2.38V12.857a2.432,2.432,0,0,0,2.467,2.381H4.589l-.443,1.477a.2.2,0,0,0,.049.238c.049.047.1.047.2.047h.1l4.047-1.762h8A2.433,2.433,0,0,0,19,12.858V2.38A2.465,2.465,0,0,0,16.532,0ZM5.627,7.952H3.355a.714.714,0,1,1,0-1.428H5.577a.746.746,0,0,1,.74.714.7.7,0,0,1-.69.714Zm5.083,0H8.487a.714.714,0,1,1,0-1.428h2.222a.714.714,0,1,1,0,1.428Zm4.886,0H13.72a.714.714,0,1,1,0-1.428h1.875a.746.746,0,0,1,.741.714.684.684,0,0,1-.212.508A.746.746,0,0,1,15.6,7.952Z"
+        transform="translate(0)"
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

packages/pancake-uikit/src/widgets/Menu/icons/Bazaar.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Svg from "../../../components/Svg/Svg";
+import { SvgProps } from "../../../components/Svg/types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path
+        id="市场动态"
+        fill="#7A6EAA"
+        d="M82.348,76.711H76.16V78.5h6.188Zm0-3.593H76.16v1.8h6.188Zm0-4.18h-13.5v1.79h13.5ZM68.851,78.5h5.055V73.118H68.851Zm13.961,5.382a1.651,1.651,0,0,0-3.169,0H77.184a1.651,1.651,0,0,0-3.169,0H71.556a1.651,1.651,0,0,0-3.169,0h-2.35V65.946a1.159,1.159,0,0,1,1.12-1.188H84.042a1.159,1.159,0,0,1,1.12,1.188V83.883h-2.35Z"
+        transform="translate(-66.037 -64.758)"
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

packages/pancake-uikit/src/widgets/Menu/icons/BlindBox.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Svg from "../../../components/Svg/Svg";
+import { SvgProps } from "../../../components/Svg/types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path
+        id="盒子标签"
+        fill="#7A6EAA"
+        d="M139.368,132.794v6.575a.263.263,0,0,1-.352.239l-2.263-.93a.674.674,0,0,0-.541,0l-2.263.93a.257.257,0,0,1-.352-.239v-6.575h-6.26v12.9a.5.5,0,0,0,.5.5h17.273a.5.5,0,0,0,.5-.5v-12.9Zm6.223-.717a.478.478,0,0,0-.1-.214l-3.08-3.809a.528.528,0,0,0-.39-.189H131a.516.516,0,0,0-.39.176l-3.155,3.822a.478.478,0,0,0-.1.214Z"
+        transform="translate(-127.337 -127.866)"
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

packages/pancake-uikit/src/widgets/Menu/icons/Board.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Svg from "../../../components/Svg/Svg";
+import { SvgProps } from "../../../components/Svg/types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path
+        id="资金账户"
+        fill="#7A6EAA"
+        d="M193.061,238.866H170.666v-2.8a1.4,1.4,0,0,1,1.4-1.4h19.6a1.4,1.4,0,0,1,1.4,1.4v2.8Zm0,1.4v11.2a1.4,1.4,0,0,1-1.4,1.4h-19.6a1.4,1.4,0,0,1-1.4-1.4v-11.2h22.4Zm-18.9,4.9a.7.7,0,0,0,0,1.4h5.6a.7.7,0,1,0,0-1.4Z"
+        transform="translate(-170.666 -234.667)"
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

packages/pancake-uikit/src/widgets/Menu/icons/Ido.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Svg from "../../../components/Svg/Svg";
+import { SvgProps } from "../../../components/Svg/types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <g id="兑换" transform="translate(-156.6 -227.17)">
+        <path
+          id="路径_1321"
+          data-name="路径 1321"
+          fill="#7A6EAA"
+          d="M177.6,245.308H158.1a1.5,1.5,0,0,1-1.5-1.5V228.665a1.5,1.5,0,0,1,1.5-1.5H177.6a1.5,1.5,0,0,1,1.5,1.5v15.147A1.5,1.5,0,0,1,177.6,245.308Z"
+          transform="translate(0 0)"
+        />
+        <path
+          id="路径_1322"
+          data-name="路径 1322"
+          fill="#7A6EAA"
+          d="M274.416,332.482H260.936a.783.783,0,1,1,0-1.566h11.3L270,329.067a.783.783,0,1,1,1-1.208l3.922,3.235a.783.783,0,0,1-.5,1.387Zm-9.56,7.041a.779.779,0,0,1-.5-.179l-3.922-3.235a.783.783,0,1,1,.5-1.387h13.481a.783.783,0,1,1,0,1.566h-11.3l2.241,1.848a.783.783,0,0,1-.5,1.387Z"
+          transform="translate(-99.826 -97.363)"
+        />
+      </g>
+    </Svg>
+  );
+};
+
+export default Icon;

packages/pancake-uikit/src/widgets/Menu/icons/NFTBox.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Svg from "../../../components/Svg/Svg";
+import { SvgProps } from "../../../components/Svg/types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <g id="document_fill" transform="translate(-160 -128)">
+        <path
+          id="路径_1"
+          data-name="路径 1"
+          fill="#7A6EAA"
+          d="M644.988,145.838l-4.22-4.587A2.666,2.666,0,0,0,640,140.7v5.438l5.211,0a2.432,2.432,0,0,0-.222-.3"
+          transform="translate(-467.642 -12.377)"
+        />
+        <path
+          id="路径_2"
+          data-name="路径 2"
+          fill="#7A6EAA"
+          d="M172.358,139.534h-6.591a.824.824,0,0,1,0-1.648h6.591a.824.824,0,0,1,0,1.648m0,4.119h-6.591a.824.824,0,0,1,0-1.648h6.591a.824.824,0,0,1,0,1.648m5.762-8.239H172.36a1.651,1.651,0,0,1-1.649-1.651V128h-9.068A1.648,1.648,0,0,0,160,129.649v16.473a1.648,1.648,0,0,0,1.641,1.65h14.843a1.648,1.648,0,0,0,1.641-1.652V135.457c0-.014,0-.029,0-.043"
+          transform="translate(0 0)"
+        />
+      </g>
+    </Svg>
+  );
+};
+
+export default Icon;

packages/pancake-uikit/src/widgets/Menu/icons/Recommend.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Svg from "../../../components/Svg/Svg";
+import { SvgProps } from "../../../components/Svg/types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path
+        id="icon_推荐-面"
+        fill="#7A6EAA"
+        d="M157.09,19.458l-4.048,3.231h-.126V4.385A4.386,4.386,0,0,1,157.3,0h7.674a4.386,4.386,0,0,1,4.385,4.385v18.3h-.126l-8.1-6.463-4.048,3.231Zm.794-6.885,3.254-2.261,3.254,2.261-1.153-3.791,3.163-2.4-3.962-.08-1.3-3.745-1.3,3.745-3.962.08,3.163,2.4-1.153,3.791Zm0,0"
+        transform="translate(-152.916)"
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

packages/pancake-uikit/src/widgets/Menu/icons/index.ts

@@ -17,3 +17,10 @@ export { default as TelegramIcon } from "./Telegram";
 export { default as TicketIcon } from "./Ticket";
 export { default as TradeIcon } from "./Trade";
 export { default as TwitterIcon } from "./Twitter";
+export { default as BlindBox } from "./BlindBox";
+export { default as Announcement } from "./Announcement";
+export { default as Bazaar } from "./Bazaar";
+export { default as Board } from "./Board";
+export { default as NFTBox } from "./NFTBox";
+export { default as Recommend } from "./Recommend";
+export { default as Ido } from "./Ido";

packages/pancake-uikit/src/widgets/Menu/types.ts

@@ -64,6 +64,7 @@ export interface NavProps extends PanelProps {
   profile?: Profile;
   logout?: () => void;
   socialLink?: SocialLink[];
+  documentAddress?: string;
 }
 
 export interface SocialLink {