diff --git a/src/__tests__/components/input.test.tsx b/src/__tests__/components/input.test.tsx index dbc4d95c..4df89a2d 100644 --- a/src/__tests__/components/input.test.tsx +++ b/src/__tests__/components/input.test.tsx @@ -9,10 +9,10 @@ it("renders correctly", () => { expect(asFragment()).toMatchInlineSnapshot(`
diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx index 03e3193d..bdc17024 100644 --- a/src/__tests__/widgets/menu.test.tsx +++ b/src/__tests__/widgets/menu.test.tsx @@ -29,8 +29,6 @@ it("renders correctly", () => { { expect(asFragment()).toMatchInlineSnapshot(`
{ target="_self" >
Exchange
Stake
@@ -251,21 +249,21 @@ it("renders correctly", () => {
Raise
@@ -283,21 +281,21 @@ it("renders correctly", () => {
Collect
@@ -315,11 +313,11 @@ it("renders correctly", () => {
{ target="_blank" >
Lend
Explore
@@ -362,7 +360,7 @@ it("renders correctly", () => {
{ style="display: flex; align-items: center; justify-content: space-evenly; width: 200px;" > { { { /> - BNB @@ -553,12 +548,12 @@ it("renders correctly", () => {
body
@@ -644,10 +639,10 @@ it("renders correctly", () => { />
{
{ class="css-1rzh7ej" />
{ { { { { {
= ({ size = sizes.MD, icon, width, ...props }) => { return ( - + = ({ size = sizes.MD, icon, width, ...props }) {icon && ( )} - + ); }; diff --git a/src/components/Select/styles.ts b/src/components/Select/styles.ts index f96e2fb5..f40d365f 100644 --- a/src/components/Select/styles.ts +++ b/src/components/Select/styles.ts @@ -20,7 +20,7 @@ const styles: Record = { boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px", }, backdrop: { - width: "100vw", + width: "98vw", height: "100vh", position: "fixed", background: "transparent", diff --git a/src/components/Svg/Icons/MenuSettings.tsx b/src/components/Svg/Icons/MenuSettings.tsx new file mode 100644 index 00000000..9eeb8f50 --- /dev/null +++ b/src/components/Svg/Icons/MenuSettings.tsx @@ -0,0 +1,26 @@ +/** @jsxImportSource theme-ui */ +import React from "react"; +import { rotation, SvgProps } from "./types"; + +const Arrow: React.FC = ({ direction = "down", color = "text", width, getStyles }) => { + const deg: rotation = { + left: 90, + up: 180, + right: 270, + down: 0, + }; + const style = getStyles({ + degree: deg[direction as keyof rotation], + color, + }); + return ( + + + + ); +}; + +export default Arrow; diff --git a/src/components/Svg/Icons/index.ts b/src/components/Svg/Icons/index.ts index 31836a5f..9707f0f3 100644 --- a/src/components/Svg/Icons/index.ts +++ b/src/components/Svg/Icons/index.ts @@ -45,6 +45,7 @@ export { default as ZapIcon } from "./ZapIcon"; export { default as Migrate } from "./Migrate"; export { default as Message } from "./Message"; export { default as Positions } from "./Positions"; +export { default as MenuSettings } from "./MenuSettings"; export { default as Quiz } from "./Quiz"; export { default as Bridge } from "./Bridge"; export { default as DocsIcon } from "./Docs"; diff --git a/src/components/Svg/Svg.tsx b/src/components/Svg/Svg.tsx index 7af5da19..544e0b5c 100644 --- a/src/components/Svg/Svg.tsx +++ b/src/components/Svg/Svg.tsx @@ -50,6 +50,7 @@ import { Migrate, Message, Positions, + MenuSettings, Quiz, Bridge, DocsIcon, @@ -226,6 +227,9 @@ const Svg: React.FC = ({ icon, ...props }: any) => { if (icon === icons.POSITIONS) { return ; } + if (icon === icons.MENU_SETTINGS) { + return ; + } if (icon === icons.QUIZ) { return ; } diff --git a/src/components/Svg/_Icons/BillsM1.tsx b/src/components/Svg/_Icons/BillsM1.tsx index 146e7353..d4f2c68d 100644 --- a/src/components/Svg/_Icons/BillsM1.tsx +++ b/src/components/Svg/_Icons/BillsM1.tsx @@ -4,16 +4,32 @@ import { LegacySvgProps } from "../types"; const BillsM1: React.FC = ({ color, bgColor, ...props }) => { return ( - - - - - + - - + + + + + + + + + ); }; diff --git a/src/components/Svg/_Icons/BillsM2.tsx b/src/components/Svg/_Icons/BillsM2.tsx index e0836ff4..6c454ba9 100644 --- a/src/components/Svg/_Icons/BillsM2.tsx +++ b/src/components/Svg/_Icons/BillsM2.tsx @@ -4,25 +4,21 @@ import { LegacySvgProps } from "../types"; const BillsM2: React.FC = ({ color, bgColor, ...props }) => { return ( - - - - - - - + + - - - - - ); }; diff --git a/src/components/Svg/_Icons/BillsM3.tsx b/src/components/Svg/_Icons/BillsM3.tsx index e67e16a4..48bfdae1 100644 --- a/src/components/Svg/_Icons/BillsM3.tsx +++ b/src/components/Svg/_Icons/BillsM3.tsx @@ -4,17 +4,24 @@ import { LegacySvgProps } from "../types"; const BillsM3: React.FC = ({ color, bgColor, ...props }) => { return ( - - - + + - ); diff --git a/src/components/Svg/types.ts b/src/components/Svg/types.ts index 45f7917f..96f13005 100644 --- a/src/components/Svg/types.ts +++ b/src/components/Svg/types.ts @@ -59,6 +59,7 @@ export enum icons { MIGRATE = "Migrate", MESSAGE = "message", POSITIONS = "Positions", + MENU_SETTINGS = "MenuSettings", QUIZ = "quiz", BRIDGE = "bridge", DOCS = "docs", diff --git a/src/components/Tag/LpTag.tsx b/src/components/Tag/LpTag.tsx new file mode 100644 index 00000000..364ef6f0 --- /dev/null +++ b/src/components/Tag/LpTag.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import { StyledLpTag, StyledLPText } from "./styles"; +import { LpTagProps } from "./types"; + +const LpTag: React.FC = ({ variant, ...props }) => { + return ( + + {variant} LP + + ); +}; + +export default LpTag; diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index 8b775cb8..b2d209a0 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -1,6 +1,6 @@ import React from "react"; import { TagProps } from "./types"; -import { StyledTag } from "./StyledTag"; +import { StyledTag } from "./styles"; const Tag: React.FC = ({ startIcon, endIcon, children, ...props }) => ( diff --git a/src/components/Tag/index.stories.tsx b/src/components/Tag/index.stories.tsx index f498551d..bf891a46 100644 --- a/src/components/Tag/index.stories.tsx +++ b/src/components/Tag/index.stories.tsx @@ -5,6 +5,7 @@ import { Meta } from "@storybook/react/types-6-0"; import { CommunityIcon, RemoveIcon } from "../Svg"; import Tag from "./Tag"; import { variants } from "./types"; +import LpTag from "./LpTag"; const Row = styled.div` display: flex; @@ -37,6 +38,11 @@ export const Default: React.FC = () => { ))} + + + + + ); }; diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx index 2e0eabc7..18f557e8 100644 --- a/src/components/Tag/index.tsx +++ b/src/components/Tag/index.tsx @@ -1,2 +1,4 @@ export { default as Tag } from "./Tag"; +export { default as LpTag } from "./LpTag"; export type { TagProps, Variants as TagVariants } from "./types"; +export type { LpTagVariants } from "./types"; diff --git a/src/components/Tag/StyledTag.tsx b/src/components/Tag/styles.tsx similarity index 59% rename from src/components/Tag/StyledTag.tsx rename to src/components/Tag/styles.tsx index f765b621..f615ff90 100644 --- a/src/components/Tag/StyledTag.tsx +++ b/src/components/Tag/styles.tsx @@ -1,6 +1,6 @@ import styled, { DefaultTheme } from "styled-components"; import getColor from "../../util/getColor"; -import { TagProps } from "./types"; +import { LpTagProps, TagProps } from "./types"; interface ThemedProps extends TagProps { theme: DefaultTheme; @@ -29,4 +29,23 @@ export const StyledTag = styled.div` } `; -export default null; +interface CustomProps extends LpTagProps { + theme: DefaultTheme; +} + +export const StyledLpTag = styled.div` + align-items: center; + background: ${({ theme, variant = "ape" }) => theme?.colors?.lpTagBg?.[variant]}; + border-radius: 6px; + display: inline-flex; + height: 15px; + padding: 0 5px; +`; + +export const StyledLPText = styled.div<{ theme: DefaultTheme }>` + color: ${({ theme }) => theme?.colors?.primaryBright}; + text-transform: uppercase; + font-size: 10px; + font-weight: 600; + line-height: 15px; +`; diff --git a/src/components/Tag/types.ts b/src/components/Tag/types.ts index d6646713..ca580070 100644 --- a/src/components/Tag/types.ts +++ b/src/components/Tag/types.ts @@ -19,3 +19,15 @@ export interface TagProps extends SpaceProps { endIcon?: ReactNode; outline?: boolean; } + +export const lpTagVariants = { + APE: "ape", + UNI: "uni", + ARK: "ark", +} as const; + +export type LpTagVariants = typeof lpTagVariants[keyof typeof lpTagVariants]; + +export interface LpTagProps extends SpaceProps { + variant: LpTagVariants; +} diff --git a/src/index.ts b/src/index.ts index 7ed850c2..a2c44913 100644 --- a/src/index.ts +++ b/src/index.ts @@ -28,6 +28,7 @@ export * from "./components/ThemeSwitcher"; export * from "./components/Tabs"; export * from "./components/ScrollToTop"; export * from "./components/RunFiatButton"; +export { default as NetworkButton } from "./widgets/Navbar/NetworkButton"; // Hooks export * from "./hooks"; diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 372a5072..f380604d 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -13,6 +13,11 @@ export const baseColors = { inputBorder: "#E6DECB", brown: "#A16552", smartGradient: "linear-gradient(94.44deg, #BA801E -9.73%, #E7CF67 40.14%, #BA801E 93.01%)", + lpTagBg: { + ape: "linear-gradient(99.09deg, rgba(161, 101, 82, 0.8) 0%, rgba(255, 179, 0, 0.8) 106.96%)", + uni: "rgba(213, 49, 113, 0.8)", + ark: "rgba(208, 126, 90, 0.8)", + }, }; export const brandColors = { diff --git a/src/theme/types.ts b/src/theme/types.ts index bb9d6aed..366eba83 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -61,6 +61,7 @@ export type Colors = { smartGradient: string; yellowHover: string; input: string; + lpTagBg: LpTagColors; // Gradients gradients?: Gradients; @@ -77,3 +78,9 @@ export type ZIndices = { export type FontFamily = { poppins: string; }; + +export type LpTagColors = { + ape: string; + uni: string; + ark: string; +}; diff --git a/src/widgets/Modal/ModalHeader.tsx b/src/widgets/Modal/ModalHeader.tsx index 6a37a1d7..2016d07a 100644 --- a/src/widgets/Modal/ModalHeader.tsx +++ b/src/widgets/Modal/ModalHeader.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from "react"; +import React from "react"; import { Flex } from "theme-ui"; import style from "./styles"; import { IconButton } from "../../components/Button"; diff --git a/src/widgets/Navbar/NetworkButton.tsx b/src/widgets/Navbar/NetworkButton.tsx index 6b1784ed..68319d2e 100644 --- a/src/widgets/Navbar/NetworkButton.tsx +++ b/src/widgets/Navbar/NetworkButton.tsx @@ -7,14 +7,15 @@ import { Button } from "../../components/Button"; import { Text } from "../../components/Text"; import styles from "./styles"; -interface Props { +export interface Props { chainId: number; switchNetwork: SwitchNetwork; t: (key: string) => string; + supportedChains?: number[]; } -const NetworkButton: React.FC = ({ chainId, switchNetwork, t }) => { - const { onPresentNetworkModal } = useNetworkModal(switchNetwork, chainId, t); +const NetworkButton: React.FC = ({ chainId, switchNetwork, t, supportedChains }) => { + const { onPresentNetworkModal } = useNetworkModal(switchNetwork, chainId, t, supportedChains); const Icon = NETWORK_ICON[chainId]; return ( @@ -26,8 +27,7 @@ const NetworkButton: React.FC = ({ chainId, switchNetwork, t }) => { }} > - - + {NETWORK_LABEL[chainId]} diff --git a/src/widgets/NetworkModal/SelectNetworkModal.tsx b/src/widgets/NetworkModal/SelectNetworkModal.tsx index cf1eb87c..e26d534d 100644 --- a/src/widgets/NetworkModal/SelectNetworkModal.tsx +++ b/src/widgets/NetworkModal/SelectNetworkModal.tsx @@ -9,15 +9,19 @@ import { Svg } from "../../components/Svg"; import { Flex } from "../../components/Flex"; import styles from "./styles"; -interface Props { +export interface Props { switchNetwork: SwitchNetwork; chainId: number; t: (key: string) => string; onDismiss?: () => void; + supportedChains?: number[]; } -const SelectNetworkModal: React.FC = ({ switchNetwork, chainId, t, onDismiss }) => { - const [selectedNetwork, networkList] = partition(networks, (network) => network.chainId === chainId); +const SelectNetworkModal: React.FC = ({ switchNetwork, chainId, t, onDismiss, supportedChains }) => { + const filteredNetworks = supportedChains + ? networks.filter((network) => supportedChains?.includes(network.chainId)) + : networks; + const [selectedNetwork, networkList] = partition(filteredNetworks, (network) => network.chainId === chainId); return ( diff --git a/src/widgets/NetworkModal/useNetworkModal.tsx b/src/widgets/NetworkModal/useNetworkModal.tsx index 9675e88b..49d3472a 100644 --- a/src/widgets/NetworkModal/useNetworkModal.tsx +++ b/src/widgets/NetworkModal/useNetworkModal.tsx @@ -7,9 +7,14 @@ interface ReturnType { onPresentNetworkModal: () => void; } -const useNetworkModal = (switchNetwork: SwitchNetwork, chainId: number, t: (key: string) => string): ReturnType => { +const useNetworkModal = ( + switchNetwork: SwitchNetwork, + chainId: number, + t: (key: string) => string, + supportedChains?: number[] +): ReturnType => { const [onPresentNetworkModal] = useModal( - , + , true, false, "NetworkModal"