diff --git a/example/components/Footer.tsx b/example/components/Footer.tsx index 38954ab..9cca39c 100644 --- a/example/components/Footer.tsx +++ b/example/components/Footer.tsx @@ -6,8 +6,9 @@ export const Footer = () => { - This project was built by a developer to contribute to the amazing web3 community with no direct affiliation with https://metamask.io/. If you found this helpful in any way, feel free to share the ❤️. + This project was built by developers to contribute to the amazing web3 community with no direct affiliation with https://metamask.io/. If you found this helpful in any way, feel free to share the ❤️. +
ETH: 0xFd072083887bFcF8aEb8F37991c11c7743113374 @@ -17,6 +18,7 @@ export const Footer = () => { } const FooterContainer = styled.div` + height: 150px; position: absolute; bottom: 0; width: 100%; diff --git a/example/components/Header.tsx b/example/components/Header.tsx index 6592cbb..9e3064e 100644 --- a/example/components/Header.tsx +++ b/example/components/Header.tsx @@ -1,5 +1,5 @@ import styled, {css} from "styled-components"; -import {Text} from "./Text"; +import {LinkText, Text} from "./Text"; import {MainHeading} from "./Heading"; import MetaMaskCard from "./MetaMaskCard"; import React from "react"; @@ -7,7 +7,7 @@ import {useWeb3React} from "@web3-react/core"; import {shortenAddress} from "../utils"; export const Header = () => { - const { account } = useWeb3React(); + const { account, connector } = useWeb3React(); return ( @@ -20,7 +20,18 @@ export const Header = () => { ) : ( - Connected with account: {shortenAddress(account)} + <> + + Connected as: {shortenAddress(account)} +
+ { + if (connector?.deactivate) connector.deactivate() + if (connector?.resetState) connector.resetState() + }}> + Disconnect + + + )} diff --git a/example/components/HowTo.tsx b/example/components/HowTo.tsx new file mode 100644 index 0000000..5fbb993 --- /dev/null +++ b/example/components/HowTo.tsx @@ -0,0 +1,70 @@ +import { Tab } from "./Tab"; +import {Text} from "./Text"; +import {TabOptions} from "../pages"; +import {styled} from "styled-components"; +import Image from 'next/image' + +export function HowTo({ isActive, setActiveTab }: { + setActiveTab?: (el: TabOptions) => void + isActive: boolean +}) { + + return ( + + + + This project works with asymmetric cryptography to encrypt and decrypt messages. + + + Encryption is a feature of asymmetric cryptography that allows us to share PRIVATE messages between known parties. Private messages, in this context, are messages no one else than the recipient should see. + + + If I want to send a private message to a friend, and only for him to see that message, then I will encrypt it with his public key, and he will be able to decrypt it with his private key. + + + The process goes as follows: + + + 1. Purple shares her public key with Green. + 2. Green encrypts a message with Purple's public key. + 3. Green sends the encrypted message to Purple. + 4. Purple uses her private key to decrypt Green's message. + + + + + + This process is only used to share information that should not be public (it is masked behind an encryption), and no one but the person who has the message and then one that received the message can see it otherwise. + + + + ); +} + +const HowToWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; + width: 100%; + p { + text-align: justify; + width: 100%; + } +` + +const TextList = styled.div` + display: flex; + flex-direction: column; +` + +const PostImage = styled(Image)` + margin: -30px 0; +` + diff --git a/example/components/Tab.tsx b/example/components/Tab.tsx index 880f2a8..d748468 100644 --- a/example/components/Tab.tsx +++ b/example/components/Tab.tsx @@ -1,11 +1,13 @@ import { ReactNode } from "react"; import styled from "styled-components"; +import {TabOptions} from "../pages"; export function Tab({ isActive, children, }: { isActive: boolean; + setActiveTab?: (el: TabOptions) => void children?: ReactNode; }) { return isActive ? {children} : <>; @@ -13,11 +15,14 @@ export function Tab({ const TabWrapper = styled.div` display: flex; + background-color: rgba(255, 255, 255, 0.07); flex-direction: column; padding: 5vh 5vw; justify-content: center; align-items: center; + min-height: 40vh; gap: 10px; + p { text-align: center; max-width: 500px; diff --git a/example/components/Text.tsx b/example/components/Text.tsx index 57d3c97..282e6ca 100644 --- a/example/components/Text.tsx +++ b/example/components/Text.tsx @@ -1,17 +1,41 @@ import styled from "styled-components"; export const Text = styled.p` - text-align: center; + text-align: center; line-height: 1.4; - color:white; + color: white; + margin-block-start: 0; + margin-block-end: 0; + + &:hover { + color: #eaeaea; + font-weight: bold; + } ` export const BoldText = styled.p` text-align: center; font-weight: 900; color:white; + margin-block-start: 0; + margin-block-end: 0; ` export const TextRed = styled.p` color: red; + margin-block-start: 0; + margin-block-end: 0; `; + +export const LinkText = styled.span` + text-align: center; + line-height: 1.4; + text-decoration: underline; + color:white; + margin-block-start: 0; + margin-block-end: 0; + &:hover { + color: rgb(42, 196, 231); + cursor: pointer !important; + } +` diff --git a/example/pages/_app.tsx b/example/pages/_app.tsx index b6ea01c..54c15e5 100644 --- a/example/pages/_app.tsx +++ b/example/pages/_app.tsx @@ -78,6 +78,7 @@ const AppContainer = styled.main` margin: -8px; font-style: normal; line-height: normal; + height:100%; font-weight: 400; font-family: 'Montserrat', sans-serif; ` @@ -86,9 +87,10 @@ const MainContainer = styled.div` position: relative; display: flex; flex-direction: column; - justify-content: start; + justify-content: space-between; gap: 20px; - min-height: 100vh; + min-height:100%; + padding-bottom: 150px; ` const Background = styled.div` @@ -104,11 +106,10 @@ const Background = styled.div` background-position: 0 0; } } - position: absolute; + position: fixed; height: 100vh; width: 100vw; margin: auto; - top: 0; font-family: -apple-system, BlinkMacSystemFont, sans-serif; overflow: auto; background: fixed linear-gradient(315deg, #07172E 3%, #0c2b57 38%, #1659b7 68%, #3e82e1 98%); diff --git a/example/pages/index.tsx b/example/pages/index.tsx index cec84df..e7eafa1 100644 --- a/example/pages/index.tsx +++ b/example/pages/index.tsx @@ -1,17 +1,17 @@ import { useWeb3React } from "@web3-react/core"; import { Decrypt } from "components/Decrypt"; import { Encrypt } from "components/Encrypt"; -import MetaMaskCard from "components/MetaMaskCard"; import { RequestPublicKey } from "components/RequestPublicKey"; import { Tab } from "components/Tab"; import React, { useState } from "react"; import styled, { css } from "styled-components"; -import {Text} from "../components/Text"; +import {HowTo} from "../components/HowTo"; -enum TabOptions { +export enum TabOptions { ENCRYPT, DECRYPT, REQUEST_PUBLIC_KEY, + HOW_TO } interface TabType { @@ -21,6 +21,11 @@ interface TabType { } const tabsList: TabType[] = [ + { + tab: TabOptions.HOW_TO, + name: "How to", + content: HowTo, + }, { tab: TabOptions.REQUEST_PUBLIC_KEY, name: "Request Public Key", @@ -31,7 +36,7 @@ const tabsList: TabType[] = [ ]; export default function Home() { const { account } = useWeb3React(); - const [activeTab, setActiveTab] = useState(TabOptions.ENCRYPT); + const [activeTab, setActiveTab] = useState(TabOptions.HOW_TO); return ( <> {account && ( @@ -49,7 +54,9 @@ export default function Home() { {tabsList.map((item) => ( - + ))} @@ -74,7 +81,7 @@ const Tabs = styled.div` `; const TabsSelector = styled.div` display: flex; - width: 50%; + width: 60%; flex-direction: row; align-items: center; border: 1px solid rgba(255, 255, 255, 0.18); @@ -87,17 +94,13 @@ const TabsSelector = styled.div` border-radius: 0 20px 0 0; } - @media only screen and (max-width: 1024px) { - flex-direction: column; - div:first-of-type { - border-radius: 20px 20px 0 0; - } - div:last-of-type { - border-radius: 0 0 0 0; - } + @media only screen and (max-width: 1200px) { + width: 75%; } + @media only screen and (max-width: 1024px) { flex-direction: column; + width: 85%; div:first-of-type { border-radius: 20px 20px 0 0; } @@ -137,8 +140,15 @@ const TabButton = styled.div<{ active: boolean }>` const TabContent = styled.div` border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0 0 20px 20px; - width: 50%; - + width: 60%; + + @media only screen and (max-width: 1200px) { + width: 75%; + } + + @media only screen and (max-width: 1024px) { + width: 85%; + } @media only screen and (max-width: 575px){ width: 95%; } diff --git a/example/public/assets/svg/asymmetric-cryptography.svg b/example/public/assets/svg/asymmetric-cryptography.svg new file mode 100644 index 0000000..1cb6f5e --- /dev/null +++ b/example/public/assets/svg/asymmetric-cryptography.svg @@ -0,0 +1,437 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file