调整

packages/pancake-uikit/src/components/ConfigProvider/ConfigProvider.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ConfigProviderProps } from "./types";
+import { ConfigContext } from "./context";
+
+const ConfigProvider: React.FC<ConfigProviderProps> = ({ children, t = (v) => v }) => {
+  return <ConfigContext.Provider value={{ t }}>{children}</ConfigContext.Provider>;
+};
+
+export default ConfigProvider;

packages/pancake-uikit/src/components/ConfigProvider/context.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ConfigProviderProps } from "./types";
+
+export const ConfigContext = React.createContext<ConfigProviderProps>({
+  t: (val) => val,
+});
+
+export default ConfigContext;

packages/pancake-uikit/src/components/ConfigProvider/index.tsx

@@ -0,0 +1,2 @@
+export { default as ConfigProvider } from "./ConfigProvider";
+export type { ConfigProviderProps } from "./types";

packages/pancake-uikit/src/components/ConfigProvider/types.ts

@@ -0,0 +1,9 @@
+import { ReactText } from "react";
+
+type ContextData = {
+  [key: string]: ReactText;
+};
+
+export interface ConfigProviderProps {
+  t: (key: string, data?: ContextData) => string;
+}

packages/pancake-uikit/src/components/Svg/Icons/Language.tsx

@@ -5,7 +5,10 @@ import { SvgProps } from "../types";
 const Icon: React.FC<SvgProps> = (props) => {
   return (
     <Svg viewBox="0 0 24 24" {...props}>
-      <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM18.92 8H15.97C15.65 6.75 15.19 5.55 14.59 4.44C16.43 5.07 17.96 6.35 18.92 8ZM12 4.04C12.83 5.24 13.48 6.57 13.91 8H10.09C10.52 6.57 11.17 5.24 12 4.04ZM4.26 14C4.1 13.36 4 12.69 4 12C4 11.31 4.1 10.64 4.26 10H7.64C7.56 10.66 7.5 11.32 7.5 12C7.5 12.68 7.56 13.34 7.64 14H4.26ZM5.08 16H8.03C8.35 17.25 8.81 18.45 9.41 19.56C7.57 18.93 6.04 17.66 5.08 16ZM8.03 8H5.08C6.04 6.34 7.57 5.07 9.41 4.44C8.81 5.55 8.35 6.75 8.03 8ZM12 19.96C11.17 18.76 10.52 17.43 10.09 16H13.91C13.48 17.43 12.83 18.76 12 19.96ZM14.34 14H9.66C9.57 13.34 9.5 12.68 9.5 12C9.5 11.32 9.57 10.65 9.66 10H14.34C14.43 10.65 14.5 11.32 14.5 12C14.5 12.68 14.43 13.34 14.34 14ZM14.59 19.56C15.19 18.45 15.65 17.25 15.97 16H18.92C17.96 17.65 16.43 18.93 14.59 19.56ZM16.36 14C16.44 13.34 16.5 12.68 16.5 12C16.5 11.32 16.44 10.66 16.36 10H19.74C19.9 10.64 20 11.31 20 12C20 12.69 19.9 13.36 19.74 14H16.36Z" />
+      <path
+        fill="#1FC7D4"
+        d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM18.92 8H15.97C15.65 6.75 15.19 5.55 14.59 4.44C16.43 5.07 17.96 6.35 18.92 8ZM12 4.04C12.83 5.24 13.48 6.57 13.91 8H10.09C10.52 6.57 11.17 5.24 12 4.04ZM4.26 14C4.1 13.36 4 12.69 4 12C4 11.31 4.1 10.64 4.26 10H7.64C7.56 10.66 7.5 11.32 7.5 12C7.5 12.68 7.56 13.34 7.64 14H4.26ZM5.08 16H8.03C8.35 17.25 8.81 18.45 9.41 19.56C7.57 18.93 6.04 17.66 5.08 16ZM8.03 8H5.08C6.04 6.34 7.57 5.07 9.41 4.44C8.81 5.55 8.35 6.75 8.03 8ZM12 19.96C11.17 18.76 10.52 17.43 10.09 16H13.91C13.48 17.43 12.83 18.76 12 19.96ZM14.34 14H9.66C9.57 13.34 9.5 12.68 9.5 12C9.5 11.32 9.57 10.65 9.66 10H14.34C14.43 10.65 14.5 11.32 14.5 12C14.5 12.68 14.43 13.34 14.34 14ZM14.59 19.56C15.19 18.45 15.65 17.25 15.97 16H18.92C17.96 17.65 16.43 18.93 14.59 19.56ZM16.36 14C16.44 13.34 16.5 12.68 16.5 12C16.5 11.32 16.44 10.66 16.36 10H19.74C19.9 10.64 20 11.31 20 12C20 12.69 19.9 13.36 19.74 14H16.36Z"
+      />
     </Svg>
   );
 };

packages/pancake-uikit/src/components/Svg/Icons/More.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Svg from "../Svg";
+import { SvgProps } from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path d="M22,11A11,11,0,1,0,11,22,11,11,0,0,0,22,11ZM17,9a2,2,0,1,1-2,2A2,2,0,0,1,17,9ZM5,13a2,2,0,1,1,2-2A2,2,0,0,1,5,13Zm4-2a2,2,0,1,1,2,2A2,2,0,0,1,9,11Z" />
+    </Svg>
+  );
+};
+
+export default Icon;

packages/pancake-uikit/src/components/Svg/index.tsx

@@ -29,6 +29,8 @@ export { default as CopyIcon } from "./Icons/Copy";
 export { default as CrownIcon } from "./Icons/Crown";
 export { default as ErrorIcon } from "./Icons/Error";
 export { default as HelpIcon } from "./Icons/Help";
+export { default as More } from "./Icons/More";
+export { default as HighIcon } from "./Icons/HighIcon";
 export { default as HistoryIcon } from "./Icons/History";
 export { default as InfoIcon } from "./Icons/Info";
 export { default as LanguageIcon } from "./Icons/Language";

packages/pancake-uikit/src/index.ts

@@ -30,6 +30,7 @@ export * from "./components/TabMenu";
 export * from "./components/Tag";
 export * from "./components/Text";
 export * from "./components/Toggle";
+export * from "./components/ConfigProvider";
 
 // Hooks
 export * from "./hooks";

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`
@@ -74,6 +75,9 @@ const Menu: React.FC<NavProps> = ({
   links,
   profile,
   children,
+  inviteUrl,
+  socialLink,
+  documentAddress,
 }) => {
   const { isXl } = useMatchBreakpoints();
   const isMobile = isXl === false;
@@ -122,12 +126,15 @@ const Menu: React.FC<NavProps> = ({
           isDark={isDark}
           href={homeLink?.href ?? "/"}
         />
-        {!!login && !!logout && (
-          <Flex>
-            <UserBlock account={account} login={login} logout={logout} />
-            {profile && <Avatar profile={profile} />}
-          </Flex>
-        )}
+        <Flex>
+          <CakePrice cakePriceUsd={cakePriceUsd} />
+          {!!login && !!logout && (
+            <Flex>
+              <UserBlock account={account} inviteUrl={inviteUrl} login={login} logout={logout} />
+              {profile && <Avatar profile={profile} />}
+            </Flex>
+          )}
+        </Flex>
       </StyledNav>
       <BodyWrapper>
         <Panel
@@ -142,6 +149,8 @@ const Menu: React.FC<NavProps> = ({
           cakePriceUsd={cakePriceUsd}
           pushNav={setIsPushed}
           links={links}
+          socialLink={socialLink}
+          documentAddress={documentAddress}
         />
         <Inner isPushed={isPushed} showMenu={showMenu}>
           {children}

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

@@ -1,8 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { PancakeRoundIcon } from "../../../components/Svg";
 import Text from "../../../components/Text/Text";
-import Skeleton from "../../../components/Skeleton/Skeleton";
+import HighIcon from "../../../components/Svg/Icons/HighIcon";
 
 interface Props {
   cakePriceUsd?: number;
@@ -11,6 +10,7 @@ interface Props {
 const PriceLink = styled.a`
   display: flex;
   align-items: center;
+  margin-right: 10px;
   svg {
     transition: transform 0.3s;
   }
@@ -22,16 +22,16 @@ const PriceLink = styled.a`
 `;
 
 const CakePrice: React.FC<Props> = ({ cakePriceUsd }) => {
-  return cakePriceUsd ? (
+  return (
     <PriceLink
       href="https://exchange.pancakeswap.finance/#/swap?outputCurrency=0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82"
       target="_blank"
     >
-      <PancakeRoundIcon width="24px" mr="8px" />
-      <Text color="textSubtle" bold>{`$${cakePriceUsd.toFixed(3)}`}</Text>
+      <HighIcon width="24px" mr="8px" />
+      <Text color="textSubtle" bold>
+        {cakePriceUsd ? `$${cakePriceUsd.toFixed(3)}` : "$0"}
+      </Text>
     </PriceLink>
-  ) : (
-    <Skeleton width={80} height={24} />
   );
 };
 

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

@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+import { SocialLink } from "../types";
+import Dropdown from "../../../components/Dropdown/Dropdown";
+import ExternalLink from "./ExternalLink";
+
+interface Props {
+  list: SocialLink[];
+}
+
+const Image = styled.img`
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  cursor: pointer;
+`;
+
+const PanelFooter: React.FC<Props> = ({ list }) => {
+  return (
+    <>
+      {list?.map((item) => {
+        return item.list && item.list.length > 1 ? (
+          <Dropdown position="top-right" key={item.key} target={<Image src={item.icon} title={item.name} />}>
+            {item.list?.map((childItem) => {
+              return <ExternalLink key={childItem.link} link={childItem.link} name={childItem.name} />;
+            })}
+          </Dropdown>
+        ) : (
+          item.list && <ExternalLink key={item.key} link={item.list[0].link} icon={item.icon} name={item.name} />
+        );
+      })}
+    </>
+  );
+};
+
+export default PanelFooter;

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

@@ -0,0 +1,35 @@
+import React from "react";
+import styled from "styled-components";
+import Flex from "../../../components/Box/Flex";
+import Text from "../../../components/Text/Text";
+import Dropdown from "../../../components/Dropdown/Dropdown";
+import Link from "../../../components/Link/Link";
+import MoreIcon from "../../../components/Svg/Icons/More";
+interface ExternalLinkProps {
+  link?: string;
+  name?: string;
+  icon?: string;
+}
+
+const Image = styled.img`
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  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} /> : <LinkText>{name}</LinkText>}
+      </Link>
+    </>
+  );
+};
+
+export default ExternalLink;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import Text from "../../../components/Text/Text";
+import { Modal } from "../../Modal";
+import { CopyToClipboard } from "../../WalletModal";
+
+interface Props {
+  inviteUrl: string;
+  title: string;
+  onDismiss?: () => void;
+}
+
+const InviteModal: React.FC<Props> = ({ inviteUrl, title, onDismiss }) => (
+  <Modal title={title} onDismiss={onDismiss}>
+    <CopyToClipboard toCopy={inviteUrl}>
+      <Text fontSize="20px" bold style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+        {inviteUrl}
+      </Text>
+    </CopyToClipboard>
+  </Modal>
+);
+
+export default InviteModal;

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" />}>
-        <Text color="textSubtle">{currentLang?.toUpperCase()}</Text>
-      </Button>
+      <ButtonStyle variant="text" startIcon={<LanguageIcon color="textSubtle" width="24px" />}>
+        <Text color="#1FC7D4">{currentLang?.toUpperCase()}</Text>
+      </ButtonStyle>
     }
   >
     {langs.map((lang) => (
@@ -27,7 +32,7 @@ const LangSelector: React.FC<Props> = ({ currentLang, langs, setLang }) => (
         fullWidth
         onClick={() => setLang(lang)}
         // Safari fix
-        style={{ minHeight: "32px", height: "auto" }}
+        style={{ minHeight: "32px", height: "auto", color: "#1FC7D4" }}
       >
         {lang.language}
       </MenuButton>

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

@@ -2,7 +2,9 @@ import React from "react";
 import styled, { keyframes } from "styled-components";
 import { Link } from "react-router-dom";
 import { LogoIcon } from "../../../components/Svg";
+import HighIcon from "../../../components/Svg/Icons/HighIcon";
 import Flex from "../../../components/Box/Flex";
+import Text from "../../../components/Text/Text";
 import { HamburgerIcon, HamburgerCloseIcon, LogoIcon as LogoWithText } from "../icons";
 import MenuButton from "./MenuButton";
 
@@ -27,6 +29,15 @@ const StyledLink = styled(Link)`
       display: none;
     }
   }
+  .mobile-Text {
+    margin-left: 10px;
+    color: #000000;
+    font-size: 18px;
+    display: none;
+    ${({ theme }) => theme.mediaQueries.md} {
+      display: block;
+    }
+  }
   .desktop-icon {
     width: 160px;
     display: none;
@@ -52,8 +63,10 @@ const Logo: React.FC<Props> = ({ isPushed, togglePush, isDark, href }) => {
   const isAbsoluteUrl = href.startsWith("http");
   const innerLogo = (
     <>
-      <LogoIcon className="mobile-icon" />
-      <LogoWithText className="desktop-icon" isDark={isDark} />
+      {/* <LogoIcon className="mobile-icon" /> */}
+      {/* <LogoWithText className="desktop-icon" isDark={isDark} /> */}
+      <HighIcon width={30} height={30} />
+      <Text className="mobile-Text">Hi City Swap</Text>
     </>
   );
 

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

@@ -21,8 +21,10 @@ const rainbowAnimation = keyframes`
 `;
 
 const LinkLabel = styled.div<{ isPushed: boolean }>`
-  color: ${({ isPushed, theme }) => (isPushed ? theme.colors.textSubtle : "transparent")};
+  /* color: ${({ isPushed, theme }) => (isPushed ? theme.colors.textSubtle : "transparent")}; */
+  color: #999;
   transition: color 0.4s;
+  padding-left: 5px;
   flex-grow: 1;
 `;
 

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

@@ -0,0 +1,132 @@
+import React from "react";
+import styled from "styled-components";
+import { SocialLink } from "../types";
+import Flex from "../../../components/Box/Flex";
+import Text from "../../../components/Text/Text";
+import Link from "../../../components/Link/Link";
+import MoreIcon from "../../../components/Svg/Icons/More";
+import ChevronRightIcon from "../../../components/Svg/Icons/ChevronRight";
+import ExternalLink from "./ExternalLink";
+
+interface Props {
+  list: SocialLink[];
+}
+
+const Image = styled.img`
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  cursor: pointer;
+`;
+const ImageDiv = styled.div`
+  position: relative;
+  cursor: pointer;
+  & > .content {
+    display: none;
+    background-color: #fff;
+    box-sizing: border-box;
+    border-radius: 10px;
+    position: absolute;
+    width: 140px;
+    right: 0px;
+    left: 0;
+    z-index: 99999;
+    bottom: 0;
+    margin: 20px auto;
+    box-shadow: 0px 2px 12px -8px rgb(25 19 38 / 10%), 0px 1px 1px rgb(25 19 38 / 5%);
+  }
+  :hover {
+    & > .content {
+      display: block;
+    }
+  }
+`;
+const ImageItem = styled.div`
+  /* padding: 5px 0; */
+  position: relative;
+  .itemDiv {
+    display: none;
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 0 10px;
+    border-radius: 10px;
+    position: absolute;
+    width: 100px;
+    right: 0px;
+    left: 130px;
+    z-index: 99999;
+    bottom: 0;
+    margin: 20px auto;
+    box-shadow: 0px 2px 12px -8px rgb(25 19 38 / 10%), 0px 1px 1px rgb(25 19 38 / 5%);
+  }
+  :hover {
+    & > .itemDiv {
+      display: block;
+    }
+  }
+  & > .content-item {
+    padding: 5px 10px;
+  }
+  & > .content-item:hover {
+    background-color: rgba(112, 112, 112, 0.2);
+  }
+`;
+const SingleLink = styled(Link)`
+  padding: 5px 10px;
+  width: 100%;
+  :hover {
+    background-color: rgba(112, 112, 112, 0.2);
+  }
+`;
+
+const MoreIconSvg = styled(MoreIcon)`
+  width: 30px;
+  height: 30px;
+`;
+const TextDiv = styled(Text)`
+  width: 70px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const MoreDropDown: React.FC<Props> = ({ list }) => {
+  return (
+    <>
+      <ImageDiv>
+        <div>
+          <MoreIconSvg />
+        </div>
+        <div className="content">
+          {list?.map((item) => {
+            return item.list && item.list.length > 1 ? (
+              <ImageItem key={item.key}>
+                <Flex className="content-item" alignItems="center" justifyContent="space-between">
+                  <>
+                    <Image src={item.icon} title={item.name} />
+                    <TextDiv marginLeft="5px">{item.name}</TextDiv>
+                  </>
+                  <ChevronRightIcon />
+                </Flex>
+                <div className="itemDiv">
+                  {item.list?.map((childItem) => {
+                    return <ExternalLink key={childItem.link} link={childItem.link} name={childItem.name} />;
+                  })}
+                </div>
+              </ImageItem>
+            ) : (
+              item.list && item.list.length > 0 && (
+                <SingleLink key={item.key} external href={item.list[0].link} color="textSubtle">
+                  <Image src={item.icon} title={item.name} />
+                  <TextDiv marginLeft="5px">{item.name}</TextDiv>
+                </SingleLink>
+              )
+            );
+          })}
+        </div>
+      </ImageDiv>
+    </>
+  );
+};
+
+export default MoreDropDown;

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,15 +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 SocialLinks from "./SocialLinks";
 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;
@@ -43,7 +48,12 @@ const PanelFooter: React.FC<Props> = ({
   currentLang,
   langs,
   setLang,
+  socialLink,
+  documentAddress,
 }) => {
+  const { t } = useContext(ConfigContext);
+  const defaultList = socialLink?.slice(0, 3);
+  const moreList = socialLink?.slice(3);
   if (!isPushed) {
     return (
       <Container>
@@ -53,16 +63,21 @@ const PanelFooter: React.FC<Props> = ({
       </Container>
     );
   }
-
   return (
     <Container>
       <SocialEntry>
-        <CakePrice cakePriceUsd={cakePriceUsd} />
-        <SocialLinks />
+        {/* <CakePrice cakePriceUsd={cakePriceUsd} /> */}
+        <>
+          {defaultList && <DefaultDropDown list={defaultList} />}
+          {moreList && moreList.length > 0 && <MoreDropDown list={moreList} />}
+        </>
       </SocialEntry>
       <SettingsEntry>
-        <ThemeSwitcher isDark={isDark} toggleTheme={toggleTheme} />
+        {/* <ThemeSwitcher isDark={isDark} toggleTheme={toggleTheme} /> */}
         <LangSelector currentLang={currentLang} langs={langs} setLang={setLang} />
+        <Link href={documentAddress} target="_blank" color="#1FC7D4" style={{ cursor: "pointer" }}>
+          {t("help center")}
+        </Link>
       </SettingsEntry>
     </Container>
   );

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

@@ -1,37 +1,28 @@
 import React from "react";
+import styled from "styled-components";
 import { SvgProps } from "../../../components/Svg";
 import Flex from "../../../components/Box/Flex";
 import Dropdown from "../../../components/Dropdown/Dropdown";
 import Link from "../../../components/Link/Link";
+import Text from "../../../components/Text/Text";
 import * as IconModule from "../icons";
 import { socials } from "../config";
+import { LinkLabel } from "./MenuEntry";
+import { SocialLink } from "../types";
 
 const Icons = IconModule as unknown as { [key: string]: React.FC<SvgProps> };
+interface Props {
+  socialLink?: SocialLink[];
+}
 
-const SocialLinks: React.FC = () => (
-  <Flex>
-    {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 (
-          <Dropdown key={social.label} position="top" target={<Icon {...iconProps} mr={mr} />}>
-            {social.items.map((item) => (
-              <Link external key={item.label} href={item.href} aria-label={item.label} color="textSubtle">
-                {item.label}
-              </Link>
-            ))}
-          </Dropdown>
-        );
-      }
-      return (
-        <Link external key={social.label} href={social.href} aria-label={social.label} mr={mr}>
-          <Icon {...iconProps} />
-        </Link>
-      );
-    })}
-  </Flex>
-);
+const Image = styled.img`
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+`;
+
+const SocialLinks: React.FC<Props> = ({ socialLink }) => {
+  return <></>;
+};
 
 export default React.memo(SocialLinks, () => true);

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

@@ -1,19 +1,34 @@
-import React from "react";
+import React, { useContext } from "react";
 import Button from "../../../components/Button/Button";
+import { useModal } from "../../Modal";
+import InviteModal from "./InviteModal";
 import { useWalletModal } from "../../WalletModal";
 import { Login } from "../../WalletModal/types";
+import { ConfigContext } from "../../../components/ConfigProvider/context";
 
 interface Props {
   account?: string;
+  inviteUrl: string;
   login: Login;
   logout: () => void;
 }
 
-const UserBlock: React.FC<Props> = ({ account, login, logout }) => {
+const UserBlock: React.FC<Props> = ({ account, login, logout, inviteUrl }) => {
+  const { t } = useContext(ConfigContext);
   const { onPresentConnectModal, onPresentAccountModal } = useWalletModal(login, logout, account);
+  const [onPresentInviteModal] = useModal(<InviteModal title={t("Invite")} inviteUrl={inviteUrl} />);
   const accountEllipsis = account ? `${account.substring(0, 4)}...${account.substring(account.length - 4)}` : null;
   return (
     <div>
+      <Button
+        scale="sm"
+        mr={10}
+        onClick={() => {
+          onPresentInviteModal();
+        }}
+      >
+        {t("Invite")}
+      </Button>
       {account ? (
         <Button
           scale="sm"
@@ -31,7 +46,7 @@ const UserBlock: React.FC<Props> = ({ account, login, logout }) => {
             onPresentConnectModal();
           }}
         >
-          Connect
+          {t("Connect")}
         </Button>
       )}
     </div>

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="#999"
+        d="M17.4,0H2.6A2.568,2.568,0,0,0,0,2.52V13.613a2.567,2.567,0,0,0,2.6,2.521H4.831L4.364,17.7a.215.215,0,0,0,.052.252c.052.05.1.05.208.05h.1l4.26-1.866H17.4a2.568,2.568,0,0,0,2.6-2.52V2.52A2.6,2.6,0,0,0,17.4,0ZM5.923,8.42H3.532a.756.756,0,1,1,0-1.512H5.871a.787.787,0,0,1,.779.756.742.742,0,0,1-.727.756Zm5.351,0H8.933a.756.756,0,1,1,0-1.512h2.339a.756.756,0,1,1,0,1.512Zm5.143,0H14.443a.756.756,0,1,1,0-1.512h1.973a.787.787,0,0,1,.78.756.727.727,0,0,1-.223.537A.783.783,0,0,1,16.416,8.42Z"
+        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="#999"
+        d="M83.094,77.258H76.623v1.871h6.471Zm0-3.757H76.623v1.886h6.471Zm0-4.371H68.98V71H83.094Zm-14.114,10h5.286V73.5H68.98Zm14.6,5.629a1.726,1.726,0,0,0-3.314,0H77.694a1.726,1.726,0,0,0-3.314,0H71.808a1.726,1.726,0,0,0-3.314,0H66.037V66a1.212,1.212,0,0,1,1.171-1.243H84.866A1.212,1.212,0,0,1,86.037,66V84.758H83.58Z"
+        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="#999"
+        d="M140.5,133.243v7.174a.287.287,0,0,1-.385.261l-2.476-1.015a.739.739,0,0,0-.591,0l-2.476,1.015a.282.282,0,0,1-.385-.261v-7.174h-6.85v14.074a.551.551,0,0,0,.55.549h18.9a.551.551,0,0,0,.55-.549V133.243Zm6.809-.782a.521.521,0,0,0-.11-.233l-3.37-4.156a.578.578,0,0,0-.426-.206H131.34a.565.565,0,0,0-.426.192l-3.453,4.17a.522.522,0,0,0-.11.233Z"
+        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="#999"
+        d="M190.666,238.866h-20v-2.8a1.331,1.331,0,0,1,1.25-1.4h17.5a1.331,1.331,0,0,1,1.25,1.4v2.8Zm0,1.4v11.2a1.331,1.331,0,0,1-1.25,1.4h-17.5a1.331,1.331,0,0,1-1.25-1.4v-11.2h20Zm-16.875,4.9a.7.7,0,0,0,0,1.4h5a.7.7,0,0,0,0-1.4Z"
+        transform="translate(-170.666 -234.667)"
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

packages/pancake-uikit/src/widgets/Menu/icons/Compound.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="icons8-jira"
+        fill="#999"
+        d="M9.939,0a.476.476,0,0,0-.3.122A5.114,5.114,0,0,0,8.149,3.473,5.111,5.111,0,0,0,9.64,6.826l.4.382.6.575L12.942,10l-2.3,2.212.359.345a5.923,5.923,0,0,1,1.756,3.966,4.8,4.8,0,0,1-.132,1.1l6.978-6.7a1.268,1.268,0,0,0,0-1.845L10.279.122A.477.477,0,0,0,9.939,0ZM7.374,2.372.4,9.074a1.268,1.268,0,0,0,0,1.845l9.32,8.953a.466.466,0,0,0,.64,0,5.111,5.111,0,0,0,1.491-3.351,5.114,5.114,0,0,0-1.491-3.351L7.055,10l2.3-2.212L9,7.439A5.919,5.919,0,0,1,7.243,3.473a4.8,4.8,0,0,1,.131-1.1Z"
+        transform="translate(0.002 0.001)"
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

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

@@ -5,7 +5,14 @@ import { SvgProps } from "../../../components/Svg/types";
 const Icon: React.FC<SvgProps> = (props) => {
   return (
     <Svg viewBox="0 0 24 24" {...props}>
-      <path d="M9.99998 19V14H14V19C14 19.55 14.45 20 15 20H18C18.55 20 19 19.55 19 19V12H20.7C21.16 12 21.38 11.43 21.03 11.13L12.67 3.59997C12.29 3.25997 11.71 3.25997 11.33 3.59997L2.96998 11.13C2.62998 11.43 2.83998 12 3.29998 12H4.99998V19C4.99998 19.55 5.44998 20 5.99998 20H8.99998C9.54998 20 9.99998 19.55 9.99998 19Z" />
+      <path
+        id="_204首页"
+        data-name="204首页"
+        fill="#999"
+        d="M119.285,143.223l-10.429-7.461a.839.839,0,0,0-.989,0l-10.493,7.461a.426.426,0,0,0,.258.774h2.107v11.611a.431.431,0,0,0,.43.43h5.161a.431.431,0,0,0,.43-.43v-6.451h5.161v6.451a.431.431,0,0,0,.43.43h5.161a.431.431,0,0,0,.43-.43V144h2.107A.425.425,0,0,0,119.285,143.223Z"
+        transform="translate(-97.191 -135.6)"
+      />
+      {/* <path d="M9.99998 19V14H14V19C14 19.55 14.45 20 15 20H18C18.55 20 19 19.55 19 19V12H20.7C21.16 12 21.38 11.43 21.03 11.13L12.67 3.59997C12.29 3.25997 11.71 3.25997 11.33 3.59997L2.96998 11.13C2.62998 11.43 2.83998 12 3.29998 12H4.99998V19C4.99998 19.55 5.44998 20 5.99998 20H8.99998C9.54998 20 9.99998 19.55 9.99998 19Z" /> */}
     </Svg>
   );
 };

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="#999899"
+          d="M175.271,245.308H157.929a1.419,1.419,0,0,1-1.329-1.5V228.665a1.419,1.419,0,0,1,1.329-1.5h17.342a1.419,1.419,0,0,1,1.329,1.5v15.147A1.42,1.42,0,0,1,175.271,245.308Z"
+          transform="translate(0 0)"
+        />
+        <path
+          id="路径_1322"
+          data-name="路径 1322"
+          fill="#fcfcfc"
+          d="M272.043,332.482H260.73a.8.8,0,0,1,0-1.566h9.484l-1.88-1.848a.89.89,0,0,1-.089-1.1.588.588,0,0,1,.925-.106l3.291,3.235a.882.882,0,0,1,.2.869A.674.674,0,0,1,272.043,332.482Zm-8.022,7.041a.593.593,0,0,1-.418-.179l-3.291-3.235a.683.683,0,0,1-.629-.556.864.864,0,0,1,.265-.878.575.575,0,0,1,.782.048h11.313a.8.8,0,0,1,0,1.566h-9.484l1.88,1.848a.889.889,0,0,1,.089,1.1A.62.62,0,0,1,264.02,339.523Z"
+          transform="translate(-99.826 -97.363)"
+        />
+      </g>
+    </Svg>
+  );
+};
+
+export default Icon;

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

@@ -0,0 +1,19 @@
+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="盒子_画板_1"
+        data-name="盒子_画板 1"
+        fill="#999899"
+        d="M289,418.5h18v10a1,1,0,0,1-1,1H290a1,1,0,0,1-1-1h0Zm6,2v2h6v-2Zm-7-8a1,1,0,0,1,1-1h18a1,1,0,0,1,1,1h0v4H288Z"
+        transform="translate(-288 -411.5)"
+      />
+    </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="#999"
+        d="M157.485,19.458l-4.431,3.231h-.138V4.385A4.608,4.608,0,0,1,157.716,0h8.4a4.608,4.608,0,0,1,4.8,4.385v18.3h-.138l-8.862-6.463-4.431,3.231Zm.869-6.885,3.562-2.261,3.562,2.261-1.262-3.791,3.462-2.4-4.338-.08-1.425-3.745L160.491,6.3l-4.337.08,3.462,2.4-1.263,3.791Zm0,0"
+        transform="translate(-152.916)"
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

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

@@ -17,3 +17,11 @@ 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";
+export { default as Compound } from "./Compound";

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

@@ -54,11 +54,27 @@ export interface PanelProps {
   langs: Language[];
   setLang: (lang: Language) => void;
   links: Array<MenuEntry>;
+  socialLink?: SocialLink[];
 }
 
 export interface NavProps extends PanelProps {
   account?: string;
+  inviteUrl: string;
   login?: Login;
   profile?: Profile;
   logout?: () => void;
+  socialLink?: SocialLink[];
+  documentAddress?: string;
+}
+
+export interface SocialLink {
+  icon?: string;
+  name?: string;
+  key?: string | number;
+  list?: SocialLinkList[];
+}
+export interface SocialLinkList {
+  name?: string;
+  icon?: string;
+  link?: string;
 }

packages/pancake-uikit/src/widgets/WalletModal/AccountModal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import Button from "../../components/Button/Button";
 import Text from "../../components/Text/Text";
 import LinkExternal from "../../components/Link/LinkExternal";
@@ -6,6 +6,7 @@ import Flex from "../../components/Box/Flex";
 import { Modal } from "../Modal";
 import CopyToClipboard from "./CopyToClipboard";
 import { connectorLocalStorageKey } from "./config";
+import { ConfigContext } from "../../components/ConfigProvider/context";
 
 interface Props {
   account: string;
@@ -13,35 +14,39 @@ interface Props {
   onDismiss?: () => void;
 }
 
-const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null }) => (
-  <Modal title="Your wallet" onDismiss={onDismiss}>
-    <Text
-      fontSize="20px"
-      bold
-      style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", marginBottom: "8px" }}
-    >
-      {account}
-    </Text>
-    <Flex mb="32px">
-      <LinkExternal small href={`https://bscscan.com/address/${account}`} mr="16px">
-        View on BscScan
-      </LinkExternal>
-      <CopyToClipboard toCopy={account}>Copy Address</CopyToClipboard>
-    </Flex>
-    <Flex justifyContent="center">
-      <Button
-        scale="sm"
-        variant="secondary"
-        onClick={() => {
-          logout();
-          window.localStorage.removeItem(connectorLocalStorageKey);
-          onDismiss();
-        }}
+const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null }) => {
+  const { t } = useContext(ConfigContext);
+
+  return (
+    <Modal title={t("my wallet")} onDismiss={onDismiss}>
+      <Text
+        fontSize="20px"
+        bold
+        style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", marginBottom: "8px" }}
       >
-        Logout
-      </Button>
-    </Flex>
-  </Modal>
-);
+        {account}
+      </Text>
+      <Flex mb="32px">
+        <LinkExternal small href={`https://bscscan.com/address/${account}`} mr="16px">
+          Etherscan
+        </LinkExternal>
+        <CopyToClipboard toCopy={account}>{t("Copy the address")}</CopyToClipboard>
+      </Flex>
+      <Flex justifyContent="center">
+        <Button
+          scale="sm"
+          variant="secondary"
+          onClick={() => {
+            logout();
+            window.localStorage.removeItem(connectorLocalStorageKey);
+            onDismiss();
+          }}
+        >
+          {t("Logout")}
+        </Button>
+      </Flex>
+    </Modal>
+  );
+};
 
 export default AccountModal;

packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useContext } from "react";
+import { ConfigContext } from "../../components/ConfigProvider/context";
 import styled from "styled-components";
 import { Link } from "../../components/Link";
 import { HelpIcon } from "../../components/Svg";
@@ -19,22 +20,25 @@ const HelpLink = styled(Link)`
   margin-top: 24px;
 `;
 
-const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null }) => (
-  <Modal title="Connect to a wallet" onDismiss={onDismiss}>
-    {config.map((entry, index) => (
-      <WalletCard
-        key={entry.title}
-        login={login}
-        walletConfig={entry}
-        onDismiss={onDismiss}
-        mb={index < config.length - 1 ? "8px" : "0"}
-      />
-    ))}
-    <HelpLink href="https://docs.pancakeswap.finance/get-started/connection-guide" external>
-      <HelpIcon color="primary" mr="6px" />
-      Learn how to connect
-    </HelpLink>
-  </Modal>
-);
+const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null }) => {
+  const { t } = useContext(ConfigContext);
+  return (
+    <Modal title={t("Connect the purse")} onDismiss={onDismiss}>
+      {config.map((entry, index) => (
+        <WalletCard
+          key={entry.title}
+          login={login}
+          walletConfig={entry}
+          onDismiss={onDismiss}
+          mb={index < config.length - 1 ? "8px" : "0"}
+        />
+      ))}
+      <HelpLink href="https://docs.pancakeswap.finance/get-started/connection-guide" external>
+        <HelpIcon color="primary" mr="6px" />
+        {t("How to use")}
+      </HelpLink>
+    </Modal>
+  );
+};
 
 export default ConnectModal;

packages/pancake-uikit/src/widgets/WalletModal/index.tsx

@@ -1,4 +1,5 @@
 export { default as useWalletModal } from "./useWalletModal";
 export { connectorLocalStorageKey } from "./config";
+export { default as CopyToClipboard } from "./CopyToClipboard";
 export { ConnectorNames } from "./types";
 export type { Login } from "./types";