Now showing how to and github link before connection for ease of unde…

…rstanding of the platform and features
leonacostaok · Nov 8, 2023 · 91dda98 · 91dda98
1 parent b56aaaf
commit 91dda98
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 55 deletions.
diff --git a/example/components/Decrypt.tsx b/example/components/Decrypt.tsx
@@ -34,7 +34,7 @@ export function Decrypt({ isActive }: { isActive: boolean }) {
     setMessage(null);
   };
   return (
-    <Tab isActive={isActive}>
+    <Tab isActive={isActive} requiresConnection={true}>
       {message ? (
         <>
           <Text>This is your decrypted message</Text>

diff --git a/example/components/Encrypt.tsx b/example/components/Encrypt.tsx
@@ -45,7 +45,7 @@ export function Encrypt({ isActive }: { isActive: boolean }) {
     setEncryptedMessage(null);
   };
   return (
-    <Tab isActive={isActive}>
+    <Tab isActive={isActive} requiresConnection={true}>
       {encryptedMessage ? (
         <>
           <Text>Encrypted message</Text>

diff --git a/example/components/Header.tsx b/example/components/Header.tsx
@@ -1,7 +1,6 @@
-import styled, {css} from "styled-components";
+import styled from "styled-components";
 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";
@@ -14,24 +13,17 @@ export const Header = () => {
                 <MainHeading>
                     MetaMask Encrypt/Decrypt
                 </MainHeading>
-                {!account ? (
-                    <ConnectSection>
-                        <Text>Use the section below to connect to MetaMask wallet provider</Text>
-                        <MetaMaskCard />
-                    </ConnectSection>
-                ) : (
-                    <>
-                        <Text>
-                            Connected as: {shortenAddress(account)}
-                            <br/>
-                            <LinkText onClick={() => {
-                                if (connector?.deactivate) connector.deactivate()
-                                if (connector?.resetState) connector.resetState()
-                            }}>
-                                Disconnect
-                            </LinkText>
-                        </Text>
-                    </>
+                {account && (
+                    <Text>
+                        Connected as: {shortenAddress(account)}
+                        <br/>
+                        <LinkText onClick={() => {
+                            if (connector?.deactivate) connector.deactivate()
+                            if (connector?.resetState) connector.resetState()
+                        }}>
+                            Disconnect
+                        </LinkText>
+                    </Text>
                 )}
             </HeaderWrapper>
         </HeaderContainer>

diff --git a/example/components/HowTo.tsx b/example/components/HowTo.tsx
@@ -1,22 +1,33 @@
 import { Tab } from "./Tab";
-import {Text} from "./Text";
+import {Link, Text} from "./Text";
 import {TabOptions} from "../pages";
 import {styled} from "styled-components";
 import Image from 'next/image'
 
-export function HowTo({ isActive, setActiveTab }: {
+export function HowTo({ isActive }: {
   setActiveTab?: (el: TabOptions) => void
   isActive: boolean
 }) {
 
   return (
-    <Tab isActive={isActive}>
+    <Tab isActive={isActive} requiresConnection={false}>
         <HowToWrapper>
             <Text>
-                This project works with asymmetric cryptography to encrypt and decrypt messages.
+                The project is open-source and can be found in{' '}
+                <Link href="https://github.com/leonacostaok/metamask-encrypt-decrypt"
+                      rel="noopener noreferrer"
+                      target="_blank">
+                    GitHub
+                </Link>.
             </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.
+                It 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.
+            </Text>
+            <Text>
+                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.
@@ -41,6 +52,10 @@ export function HowTo({ isActive, setActiveTab }: {
             <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>
+
+            <Text>
+               This app does not have access to your private key, and will interact with your wallet provider for the decryption of the messages.
+            </Text>
         </HowToWrapper>
     </Tab>
   );

diff --git a/example/components/RequestPublicKey.tsx b/example/components/RequestPublicKey.tsx
@@ -20,7 +20,7 @@ export function RequestPublicKey({ isActive }: { isActive: boolean }) {
     setPublicKey(await provider.send("eth_getEncryptionPublicKey", [account]));
   };
   return (
-    <Tab isActive={isActive}>
+    <Tab isActive={isActive} requiresConnection={true}>
       {publicKey ? (
         <>
           <Text>This is your public key</Text>

diff --git a/example/components/Tab.tsx b/example/components/Tab.tsx
@@ -1,16 +1,31 @@
 import { ReactNode } from "react";
 import styled from "styled-components";
 import {TabOptions} from "../pages";
+import {useWeb3React} from "@web3-react/core";
+import {Text} from "./Text";
+import MetaMaskCard from "./MetaMaskCard";
 
 export function Tab({
   isActive,
   children,
+    requiresConnection
 }: {
+  requiresConnection?: boolean,
   isActive: boolean;
   setActiveTab?: (el: TabOptions) => void
   children?: ReactNode;
 }) {
-  return isActive ? <TabWrapper>{children}</TabWrapper> : <></>;
+  const { account } = useWeb3React();
+  return isActive ? (requiresConnection && account) || !requiresConnection ? (
+      <TabWrapper>
+        {children}
+      </TabWrapper>
+  ) : (
+      <ConnectSection>
+        <Text>This section requires authentication, please connect to a wallet provider from the list below to continue</Text>
+        <MetaMaskCard />
+      </ConnectSection>
+  ) : <></>;
 }
 
 const TabWrapper = styled.div`
@@ -28,3 +43,17 @@ const TabWrapper = styled.div`
     max-width: 500px;
   }
 `;
+
+const ConnectSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 20px;
+  padding: 50px 0;
+  p {
+    text-align: center;
+    max-width: 500px;
+  }
+`;
+
diff --git a/example/components/Text.tsx b/example/components/Text.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import NextLink from 'next/link'
 
 export const Text = styled.p`
   text-align: center;
@@ -39,3 +40,16 @@ export const LinkText = styled.span`
     cursor: pointer !important;
   }
 `
+
+export const Link = styled(NextLink)`
+     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/next.config.js b/example/next.config.js
@@ -3,6 +3,7 @@
  */
 const nextConfig = {
   output: 'export',
+  images: {unoptimized: true},
   env: {
     infuraKey: process.env.INFURA_KEY,
     alchemyKey: process.env.ALCHEMY_KEY,

diff --git a/example/pages/index.tsx b/example/pages/index.tsx
@@ -35,34 +35,31 @@ const tabsList: TabType[] = [
   { tab: TabOptions.DECRYPT, name: "Decrypt", content: Decrypt },
 ];
 export default function Home() {
-  const { account } = useWeb3React();
   const [activeTab, setActiveTab] = useState(TabOptions.HOW_TO);
   return (
-    <>
-      {account && (
-          <ScreenContainer>
-            <TabsSelector>
-              {tabsList.map((item) => (
-                  <TabButton
-                      active={activeTab === item.tab}
-                      onClick={() => setActiveTab(item.tab)}
-                  >
-                    {item.name}
-                  </TabButton>
-              ))}
-            </TabsSelector>
-            <Tabs>
-              <TabContent>
-                {tabsList.map((item) => (
-                    <item.content isActive={activeTab === item.tab}
-                                  setActiveTab={setActiveTab}
-                    />
-                ))}
-              </TabContent>
-            </Tabs>
-          </ScreenContainer>
-      )}
-    </>
+    <ScreenContainer>
+      <TabsSelector>
+        {tabsList.map((item) => (
+            <TabButton
+                key={`tab-button-${item.name}`}
+                active={activeTab === item.tab}
+                onClick={() => setActiveTab(item.tab)}
+            >
+              {item.name}
+            </TabButton>
+        ))}
+      </TabsSelector>
+      <Tabs>
+        <TabContent>
+          {tabsList.map((item) => (
+              <item.content key={`tab-content-${item.name}`}
+                            isActive={activeTab === item.tab}
+                            setActiveTab={setActiveTab}
+              />
+          ))}
+        </TabContent>
+      </Tabs>
+    </ScreenContainer>
   );
 }