Added how to

example/components/Footer.tsx

@@ -6,8 +6,9 @@ export const Footer = () => {
         <FooterContainer>
             <FooterWrapper>
                 <Text>
-                    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 ❤️.
                 </Text>
+                <br />
                 <BoldText>
                     ETH: 0xFd072083887bFcF8aEb8F37991c11c7743113374
                 </BoldText>
@@ -17,6 +18,7 @@ export const Footer = () => {
 }
 
 const FooterContainer = styled.div`
+  height: 150px;
   position: absolute;
   bottom: 0;
   width: 100%;

example/components/Header.tsx

@@ -1,13 +1,13 @@
 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";
 import {useWeb3React} from "@web3-react/core";
 import {shortenAddress} from "../utils";
 
 export const Header = () => {
-    const { account } = useWeb3React();
+    const { account, connector } = useWeb3React();
     return (
         <HeaderContainer>
             <HeaderWrapper>
@@ -20,7 +20,18 @@ export const Header = () => {
                         <MetaMaskCard />
                     </ConnectSection>
                 ) : (
-                    <Text>Connected with account: {shortenAddress(account)}</Text>
+                    <>
+                        <Text>
+                            Connected as: {shortenAddress(account)}
+                            <br/>
+                            <LinkText onClick={() => {
+                                if (connector?.deactivate) connector.deactivate()
+                                if (connector?.resetState) connector.resetState()
+                            }}>
+                                Disconnect
+                            </LinkText>
+                        </Text>
+                    </>
                 )}
             </HeaderWrapper>
         </HeaderContainer>

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 (
+    <Tab isActive={isActive}>
+        <HowToWrapper>
+            <Text>
+                This project works with asymmetric cryptography to encrypt and decrypt messages.
+            </Text>
+            <Text>
+              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.
+            </Text>
+            <Text>
+                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.
+            </Text>
+            <Text>
+              The process goes as follows:
+            </Text>
+            <TextList>
+                <Text>1. Purple shares her public key with Green.</Text>
+                <Text>2. Green encrypts a message with Purple's public key.</Text>
+                <Text>3. Green sends the encrypted message to Purple.</Text>
+                <Text>4. Purple uses her private key to decrypt Green's message.</Text>
+            </TextList>
+
+            <PostImage src={'/assets/svg/asymmetric-cryptography.svg'}
+                       alt={'Asymmetric cryptography explained graphically!'}
+                       priority
+                       width={450}
+                       height={350}
+            />
+
+            <Text>
+              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.
+            </Text>
+        </HowToWrapper>
+    </Tab>
+  );
+}
+
+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;
+`
+

example/components/Tab.tsx

@@ -1,23 +1,28 @@
 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 ? <TabWrapper>{children}</TabWrapper> : <></>;
 }
 
 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;

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;
+  }
+`

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%);

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() {
             <Tabs>
               <TabContent>
                 {tabsList.map((item) => (
-                    <item.content isActive={activeTab === item.tab} />
+                    <item.content isActive={activeTab === item.tab}
+                                  setActiveTab={setActiveTab}
+                    />
                 ))}
               </TabContent>
             </Tabs>
@@ -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%;
   }