zhangshu
/
hicity-toolkit
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

增加项目文档

This commit is contained in:
myf 2022-06-02 11:59:44 +08:00
parent 20ad6d8dea
commit 650a3f5272
16 changed files with 196 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/pancake-uikit/src/widgets/Menu/Menu.tsx
View File

@ -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>
<UserBlock account={account} inviteUrl={inviteUrl} 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
@ -145,6 +150,7 @@ const Menu: React.FC<NavProps> = ({
pushNav={setIsPushed}
links={links}
socialLink={socialLink}
documentAddress={documentAddress}
/>
<Inner isPushed={isPushed} showMenu={showMenu}>
{children}

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

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

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

@ -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>
</>
);

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

@ -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) => (

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

@ -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>
</>
);

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

@ -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 }>`

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

@ -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 moreList = socialLink?.slice(2);
const { t } = useContext(ConfigContext);
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>
);

18
packages/pancake-uikit/src/widgets/Menu/icons/Announcement.tsx Normal file
View File

@ -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;

18
packages/pancake-uikit/src/widgets/Menu/icons/Bazaar.tsx Normal file
View File

@ -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;

18
packages/pancake-uikit/src/widgets/Menu/icons/BlindBox.tsx Normal file
View File

@ -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;

18
packages/pancake-uikit/src/widgets/Menu/icons/Board.tsx Normal file
View File

@ -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;

28
packages/pancake-uikit/src/widgets/Menu/icons/Ido.tsx Normal file
View File

@ -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;

28
packages/pancake-uikit/src/widgets/Menu/icons/NFTBox.tsx Normal file
View File

@ -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;

18
packages/pancake-uikit/src/widgets/Menu/icons/Recommend.tsx Normal file
View File

@ -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;

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

@ -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";

1
packages/pancake-uikit/src/widgets/Menu/types.ts
View File

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