diff --git a/subgraph/README.md b/subgraph/README.md index e66cfccfa..6221dcaed 100644 --- a/subgraph/README.md +++ b/subgraph/README.md @@ -37,6 +37,7 @@ yarn deploy:arbitrum-goerli ``` ### Using the Kleros organization account + Go to the [Deploy Subgraph Action](https://github.com/kleros/kleros-v2/actions/workflows/deploy-subgraph.yml) and click the Run workflow button: image diff --git a/web/global.d.ts b/web/global.d.ts index fcd31a0c2..b98930e9a 100644 --- a/web/global.d.ts +++ b/web/global.d.ts @@ -6,6 +6,10 @@ declare global { const content: React.FC>; export default content; } + module "*.png" { + const path: string; + export default path; + } } declare module "styled-components" { diff --git a/web/src/assets/svgs/icons/book-open.svg b/web/src/assets/svgs/icons/book-open.svg new file mode 100644 index 000000000..36d3597e3 --- /dev/null +++ b/web/src/assets/svgs/icons/book-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/assets/svgs/icons/book.svg b/web/src/assets/svgs/icons/book.svg new file mode 100644 index 000000000..56a6f99ae --- /dev/null +++ b/web/src/assets/svgs/icons/book.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/assets/svgs/icons/bug.svg b/web/src/assets/svgs/icons/bug.svg new file mode 100644 index 000000000..02608f603 --- /dev/null +++ b/web/src/assets/svgs/icons/bug.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/web/src/assets/svgs/icons/curate-image.png b/web/src/assets/svgs/icons/curate-image.png new file mode 100644 index 000000000..9a61ecfde Binary files /dev/null and b/web/src/assets/svgs/icons/curate-image.png differ diff --git a/web/src/assets/svgs/icons/curate.svg b/web/src/assets/svgs/icons/curate.svg new file mode 100644 index 000000000..2cd271e6d --- /dev/null +++ b/web/src/assets/svgs/icons/curate.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/icons/dispute-resolver.svg b/web/src/assets/svgs/icons/dispute-resolver.svg new file mode 100644 index 000000000..8c3d66861 --- /dev/null +++ b/web/src/assets/svgs/icons/dispute-resolver.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/icons/escrow.svg b/web/src/assets/svgs/icons/escrow.svg new file mode 100644 index 000000000..3da89c3d8 --- /dev/null +++ b/web/src/assets/svgs/icons/escrow.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/src/assets/svgs/icons/eth.svg b/web/src/assets/svgs/icons/eth.svg new file mode 100644 index 000000000..449f2f658 --- /dev/null +++ b/web/src/assets/svgs/icons/eth.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/assets/svgs/icons/governor.svg b/web/src/assets/svgs/icons/governor.svg new file mode 100644 index 000000000..d067c43e1 --- /dev/null +++ b/web/src/assets/svgs/icons/governor.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/src/assets/svgs/icons/kleros.svg b/web/src/assets/svgs/icons/kleros.svg new file mode 100644 index 000000000..532aaf497 --- /dev/null +++ b/web/src/assets/svgs/icons/kleros.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/assets/svgs/icons/linguo.svg b/web/src/assets/svgs/icons/linguo.svg new file mode 100644 index 000000000..7c8c9ae2d --- /dev/null +++ b/web/src/assets/svgs/icons/linguo.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/icons/poh-image.png b/web/src/assets/svgs/icons/poh-image.png new file mode 100644 index 000000000..3f7e06a1c Binary files /dev/null and b/web/src/assets/svgs/icons/poh-image.png differ diff --git a/web/src/assets/svgs/icons/poh.svg b/web/src/assets/svgs/icons/poh.svg new file mode 100644 index 000000000..8bfdaee0c --- /dev/null +++ b/web/src/assets/svgs/icons/poh.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/src/assets/svgs/icons/tokens.svg b/web/src/assets/svgs/icons/tokens.svg new file mode 100644 index 000000000..d3a708dcd --- /dev/null +++ b/web/src/assets/svgs/icons/tokens.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/web/src/assets/svgs/menu-icons/help.svg b/web/src/assets/svgs/menu-icons/help.svg index 00dd525b7..71c5d151e 100644 --- a/web/src/assets/svgs/menu-icons/help.svg +++ b/web/src/assets/svgs/menu-icons/help.svg @@ -1,3 +1,3 @@ - + diff --git a/web/src/layout/Header/navbar/DappList.tsx b/web/src/layout/Header/navbar/DappList.tsx new file mode 100644 index 000000000..dc468da19 --- /dev/null +++ b/web/src/layout/Header/navbar/DappList.tsx @@ -0,0 +1,137 @@ +import React, { useRef } from "react"; +import styled from "styled-components"; +import { useFocusOutside } from "hooks/useFocusOutside"; +import Curate from "svgs/icons/curate-image.png"; +import Resolver from "svgs/icons/dispute-resolver.svg"; +import Escrow from "svgs/icons/escrow.svg"; +import Governor from "svgs/icons/governor.svg"; +import Court from "svgs/icons/kleros.svg"; +import Linguo from "svgs/icons/linguo.svg"; +import POH from "svgs/icons/poh-image.png"; +import Tokens from "svgs/icons/tokens.svg"; +import Product from "./Product"; + +interface IDappList { + toggleSolution: () => void; +} + +const ITEMS = [ + { + text: "Court", + Icon: Court, + url: "", + }, + { + text: "Escrow", + Icon: Escrow, + url: "", + }, + { + text: "Tokens", + Icon: Tokens, + url: "", + }, + { + text: "POH", + Icon: POH, + url: "", + }, + { + text: "Curate", + Icon: Curate, + url: "", + }, + { + text: "Resolver", + Icon: Resolver, + url: "", + }, + { + text: "Linguo", + Icon: Linguo, + url: "", + }, + { + text: "Governor", + Icon: Governor, + url: "", + }, +]; + +const Header = styled.h1` + display: flex; + padding-top: 32px; + padding-bottom: 20px; + font-size: 24px; + font-weight: 600; + line-height: 32.68px; +`; + +const Container = styled.div` + display: flex; + position: absolute; + max-height: 60vh; + top: 5%; + left: 50%; + transform: translate(-50%); + z-index: 10; + flex-direction: column; + align-items: center; + + width: calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375)); + max-width: 480px; + min-width: 300px; + border-radius: 3px; + border: 1px solid ${({ theme }) => theme.stroke}; + background-color: ${({ theme }) => theme.whiteBackground}; + box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.06); + + svg { + visibility: visible; + } +`; + +const ItemsDiv = styled.div` + display: grid; + overflow-y: auto; + padding: 16px calc(8px + (24 - 8) * ((100vw - 480px) / (1250 - 480))); + row-gap: 8px; + column-gap: 2px; + justify-items: center; + max-width: 480px; + min-width: 300px; + width: calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375)); + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); +`; + +const Overlay = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: ${({ theme }) => theme.blackLowOpacity}; + z-index: 1; +`; + +const DappList: React.FC = ({ toggleSolution }) => { + const containerRef = useRef(null); + useFocusOutside(containerRef, () => { + toggleSolution(); + }); + + return ( + <> + + +
Kleros Solutions
+ + {ITEMS.map((item) => { + return ; + })} + + + + ); +}; +export default DappList; diff --git a/web/src/layout/Header/navbar/Menu/Help.tsx b/web/src/layout/Header/navbar/Menu/Help.tsx new file mode 100644 index 000000000..18a8ae8cd --- /dev/null +++ b/web/src/layout/Header/navbar/Menu/Help.tsx @@ -0,0 +1,118 @@ +import React, { useRef } from "react"; +import styled from "styled-components"; +import { useFocusOutside } from "hooks/useFocusOutside"; +import Book from "svgs/icons/book-open.svg"; +import Guide from "svgs/icons/book.svg"; +import Bug from "svgs/icons/bug.svg"; +import ETH from "svgs/icons/eth.svg"; +import Faq from "svgs/menu-icons/help.svg"; +import Telegram from "svgs/socialmedia/telegram.svg"; + +const ITEMS = [ + { + text: "Onboarding", + Icon: Book, + url: "", + }, + { + text: "Get Help", + Icon: Telegram, + url: "", + }, + { + text: "Report a Bug", + Icon: Bug, + url: "", + }, + { + text: "DApp Guide", + Icon: Guide, + url: "", + }, + { + text: "Crypto Beginner's Guide", + Icon: ETH, + url: "", + }, + { + text: "FAQ", + Icon: Faq, + url: "", + }, +]; + +interface IHelp { + toggle: () => void; +} + +const Container = styled.div` + display: flex; + flex-direction: column; + position: absolute; + top: 5%; + left: 50%; + transform: translate(-50%); + z-index: 10; + padding: 27px 10px; + gap: 23px; + border: 1px solid ${({ theme }) => theme.stroke}; + background-color: ${({ theme }) => theme.whiteBackground}; + border-radius: 3px; + box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.06); +`; + +const ListItem = styled.div` + display: flex; + gap: 8px; + padding: 0px 8px; + cursor: pointer; + :hover { + transform: scale(1.02) translateZ(0); + transition: 200ms; + transition-timing-function: cubic-bezier(0.3, 0, 0.2, 1); + backface-visibility: hidden; + } + + small { + font-size: 16px; + font-weight: 400; + } +`; +const Icon = styled.svg` + display: inline-block; + width: 16px; + height: 16px; + fill: ${({ theme }) => theme.secondaryPurple}; +`; + +const Overlay = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: ${({ theme }) => theme.blackLowOpacity}; + z-index: 1; +`; + +const Help: React.FC = ({ toggle }) => { + const containerRef = useRef(null); + useFocusOutside(containerRef, () => { + toggle(); + }); + + return ( + <> + + + {ITEMS.map((item) => ( + + + {item.text} + + ))} + + + ); +}; +export default Help; diff --git a/web/src/layout/Header/navbar/Menu/index.tsx b/web/src/layout/Header/navbar/Menu/index.tsx index e0f28c800..2886c7c66 100644 --- a/web/src/layout/Header/navbar/Menu/index.tsx +++ b/web/src/layout/Header/navbar/Menu/index.tsx @@ -1,10 +1,12 @@ import React, { useState } from "react"; import styled from "styled-components"; +import { useToggle } from "react-use"; import LightButton from "components/LightButton"; -import NotificationsIcon from "svgs/menu-icons/notifications.svg"; +import Help from "./Help"; import DarkModeIcon from "svgs/menu-icons/dark-mode.svg"; -import LightModeIcon from "svgs/menu-icons/light-mode.svg"; import HelpIcon from "svgs/menu-icons/help.svg"; +import LightModeIcon from "svgs/menu-icons/light-mode.svg"; +import NotificationsIcon from "svgs/menu-icons/notifications.svg"; import SettingsIcon from "svgs/menu-icons/settings.svg"; import Settings from "./Settings"; import { useToggleTheme } from "hooks/useToggleThemeContext"; @@ -13,13 +15,13 @@ const Container = styled.div``; const ButtonContainer = styled.div` min-height: 32px; - display: flex; align-items: center; `; const Menu: React.FC = () => { const [theme, toggleTheme] = useToggleTheme(); + const [isHelpOpen, toggleIsHelpOpen] = useToggle(true); const [isSettingsOpen, setIsSettingsOpen] = useState(false); const isLightTheme = theme === "light"; @@ -30,7 +32,13 @@ const Menu: React.FC = () => { Icon: SettingsIcon, onClick: () => setIsSettingsOpen(true), }, - { text: "Help", Icon: HelpIcon }, + { + text: "Help", + Icon: HelpIcon, + onClick: () => { + toggleIsHelpOpen(); + }, + }, { text: `${isLightTheme ? "Dark" : "Light"} Mode`, Icon: isLightTheme ? DarkModeIcon : LightModeIcon, @@ -43,9 +51,10 @@ const Menu: React.FC = () => { {buttons.map(({ text, Icon, onClick }) => ( - {text === "Settings" && isSettingsOpen && } ))} + {isHelpOpen && } + {isSettingsOpen && } ); }; diff --git a/web/src/layout/Header/navbar/Product.tsx b/web/src/layout/Header/navbar/Product.tsx new file mode 100644 index 000000000..a5e6bf69a --- /dev/null +++ b/web/src/layout/Header/navbar/Product.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import styled from "styled-components"; + +interface IProduct { + text: string; + url: string; + Icon: React.FC> | string; +} + +const Container = styled.a` + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + padding: 20px 25px 35px 25px; + max-width: 100px; + border-radius: 3px; + :hover { + transform: scale(1.05); + transition: 350ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + gap: 8px; + width: calc(100px + (130 - 100) * (100vw - 375px) / (1250 - 375)); + + background-color: ${({ theme }) => theme.lightBackground}; + + small { + font-weight: 400; + line-height: 19px; + font-size: 14px; + } + + svg { + max-width: 48px; + max-height: 48px; + fill: none; + visibility: visible; + display: inline-block; + } +`; + +const StyledIcon = styled.svg` + max-width: 48px; + max-height: 48px; + fill: none; + visibility: visible; + display: inline-block; + fill: ${({ theme }) => theme.secondaryPurple}; +`; + +const StyledImg = styled.img` + max-width: 48px; + max-height: 48px; +`; + +const Product: React.FC = ({ text, url, Icon }) => { + console.log("icon", Icon); + return ( + + {typeof Icon === "string" ? : } + {text} + + ); +}; + +export default Product; diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx index 25975a9e8..af1d9631a 100644 --- a/web/src/layout/Header/navbar/index.tsx +++ b/web/src/layout/Header/navbar/index.tsx @@ -1,12 +1,13 @@ import React from "react"; import styled from "styled-components"; -import { useLockBodyScroll } from "react-use"; -import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; +import { useLockBodyScroll, useToggle } from "react-use"; +import ConnectButton from "components/ConnectButton"; import LightButton from "components/LightButton"; +import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; +import { useOpenContext } from "../index"; +import DappList from "./DappList"; import Explore from "./Explore"; -import ConnectButton from "components/ConnectButton"; import Menu from "./Menu"; -import { useOpenContext } from "../index"; const Container = styled.div<{ isOpen: boolean }>` position: absolute; @@ -28,17 +29,26 @@ const Container = styled.div<{ isOpen: boolean }>` padding: 24px; hr { - margin 24px 0; + margin: 24px 0; } `; const NavBar: React.FC = () => { + const [isSolutionsOpen, toggleSolution] = useToggle(false); + const { isOpen } = useOpenContext(); useLockBodyScroll(isOpen); return ( - + { + toggleSolution(); + }} + Icon={KlerosSolutionsIcon} + /> + {isSolutionsOpen && }
diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts index fba9e87e8..b8a831311 100644 --- a/web/src/styles/global-style.ts +++ b/web/src/styles/global-style.ts @@ -89,6 +89,8 @@ export const GlobalStyle = createGlobalStyle` svg, img { display: inline-block; vertical-align: middle; + visibility: visible; + } ul {