Added footer & header, and seo

leonacostaok · Nov 8, 2023 · 241bc64 · 241bc64
1 parent 1ef50d1
commit 241bc64
Show file tree

Hide file tree

Showing 11 changed files with 169 additions and 68 deletions.
diff --git a/example/components/Card.tsx b/example/components/Card.tsx
@@ -5,6 +5,7 @@ import { getName } from "../utils";
 import { Accounts } from "./Accounts";
 import { ConnectWithSelect } from "./ConnectWithSelect";
 import { Status } from "./Status";
+import styled from "styled-components";
 
 interface Props {
   connector: MetaMask;
@@ -28,33 +29,30 @@ export function Card({
   provider,
 }: Props) {
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        width: "20rem",
-        padding: "1rem",
-        margin: "1rem",
-        overflow: "auto",
-        border: "1px solid",
-        borderRadius: "1rem",
-      }}
-    >
+    <CardWrapper>
       <b>{getName(connector)}</b>
-      <div style={{ marginBottom: "1rem" }}>
-        <Status isActivating={isActivating} isActive={isActive} error={error} />
-      </div>
-      <div style={{ marginBottom: "1rem" }}>
-        <Accounts accounts={accounts} provider={provider} ENSNames={ENSNames} />
-      </div>
+      <Status isActivating={isActivating} isActive={isActive} error={error} />
+      <Accounts accounts={accounts} provider={provider} ENSNames={ENSNames} />
       <ConnectWithSelect
         connector={connector}
         isActivating={isActivating}
         isActive={isActive}
         error={error}
         setError={setError}
       />
-    </div>
+    </CardWrapper>
   );
 }
+
+const CardWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 20rem;
+  padding: 1rem;
+  margin: 1rem;
+  overflow: auto;
+  border: 1px solid;
+  border-radius: 1rem;
+`
diff --git a/example/components/Decrypt.tsx b/example/components/Decrypt.tsx
@@ -64,13 +64,11 @@ export function Decrypt({ isActive }: { isActive: boolean }) {
 }
 
 const TextArea = styled.textarea`
-  max-width: 600px;
   width: 100%;
   height: 150px;
 `;
 
 const Input = styled.input`
-  max-width: 500px;
   width: 100%;
 `;
 

diff --git a/example/components/Encrypt.tsx b/example/components/Encrypt.tsx
@@ -86,13 +86,11 @@ export function Encrypt({ isActive }: { isActive: boolean }) {
 }
 
 const TextArea = styled.textarea`
-  max-width: 600px;
   width: 100%;
   height: 150px;
 `;
 
 const Input = styled.input`
-  max-width: 500px;
   width: 100%;
 `;
 

diff --git a/example/components/Footer.tsx b/example/components/Footer.tsx
@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import {Text} from "./Text";
+
+export const Footer = () => {
+    return (
+        <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 ❤️.
+                </Text>
+                <Text>
+                    ETH: 0xFd072083887bFcF8aEb8F37991c11c7743113374
+                </Text>
+            </FooterWrapper>
+        </FooterContainer>
+    )
+}
+
+const FooterContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const FooterWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  max-width: 800px;
+  position: absolute;
+  bottom: 0;
+`
diff --git a/example/components/Header.tsx b/example/components/Header.tsx
@@ -0,0 +1,52 @@
+import styled, {css} from "styled-components";
+import {Text} from "./Text";
+import {MainHeading} from "./Heading";
+import MetaMaskCard from "./MetaMaskCard";
+import React from "react";
+import {useWeb3React} from "@web3-react/core";
+
+export const Header = () => {
+    const { account } = useWeb3React();
+    return (
+        <HeaderContainer>
+            <HeaderWrapper>
+                <MainHeading>
+                    MetaMask Encrypt/Decrypt
+                </MainHeading>
+                {!account ? (
+                    <ConnectSection>
+                        <p>Use the section below to connect to MetaMask wallet provider</p>
+                        <MetaMaskCard />
+                    </ConnectSection>
+                ) : (
+                    <Text>Connected with account: {account}</Text>
+                )}
+            </HeaderWrapper>
+        </HeaderContainer>
+    )
+}
+
+const HeaderContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const HeaderWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  max-width: 800px;
+`
+
+const ConnectSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 20px;
+`;
diff --git a/example/components/Heading.tsx b/example/components/Heading.tsx
@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const MainHeading = styled.h1`
+     text-align: center;
+`
diff --git a/example/components/Status.tsx b/example/components/Status.tsx
@@ -10,19 +10,17 @@ export function Status({
   error?: Error;
 }) {
   return (
-    <div>
+    <>
       {error ? (
-        <>
+        <div>
           🔴 {error.name ?? "Error"}
           {error.message ? `: ${error.message}` : null}
-        </>
+        </div>
       ) : isActivating ? (
-        <>🟡 Connecting</>
-      ) : isActive ? (
-        <>🟢 Connected</>
-      ) : (
-        <>⚪️ Disconnected</>
+        <div>🟡 Connecting</div>
+      ) : isActive && (
+        <div>🟢 Connected</div>
       )}
-    </div>
+    </>
   );
 }
diff --git a/example/components/Tab.tsx b/example/components/Tab.tsx
@@ -14,8 +14,7 @@ export function Tab({
 const TabWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
+  padding: 5vh 5vw;
   justify-content: center;
   align-items: center;
   gap: 20px;

diff --git a/example/components/Text.tsx b/example/components/Text.tsx
@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const Text = styled.p`
+     text-align: center;
+`
diff --git a/example/pages/_app.tsx b/example/pages/_app.tsx
@@ -3,8 +3,12 @@ import { MetaMask } from "@web3-react/metamask";
 import { AppProps } from "next/app";
 import React, { useEffect } from "react";
 import Script from 'next/script'
+import Head from 'next/head'
 
 import { hooks as metaMaskHooks, metaMask } from "../connectors/metaMask";
+import {Footer} from "../components/Footer";
+import styled from "styled-components";
+import {Header} from "../components/Header";
 
 const connectors: [MetaMask, Web3ReactHooks][] = [[metaMask, metaMaskHooks]];
 
@@ -32,8 +36,7 @@ export default function App({ Component, pageProps }: AppProps) {
   }, []);
   return (
       <>
-
-        <head>
+        <Head>
           <title>MetaMask Encrypt/Decrypt</title>
           <meta name="description" content="MetaMask Encrypt and decrypt tools" />
           <meta property="og:title" content="MetaMask Encrypt/Decrypt" />
@@ -50,10 +53,18 @@ export default function App({ Component, pageProps }: AppProps) {
             gtag('config', 'G-YVFR36G469');
           `}
           </Script>
-        </head>
-        <Web3ReactProvider connectors={connectors}>
-          <Component {...pageProps} />
-        </Web3ReactProvider>
+        </Head>
+        <MainContainer>
+          <Web3ReactProvider connectors={connectors}>
+            <Header />
+            <Component {...pageProps} />
+            <Footer />
+          </Web3ReactProvider>
+        </MainContainer>
       </>
   );
 }
+
+const MainContainer = styled.main`
+  min-height: calc(100vh - 16px);
+`
diff --git a/example/pages/index.tsx b/example/pages/index.tsx
@@ -6,6 +6,7 @@ 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";
 
 enum TabOptions {
   ENCRYPT,
@@ -33,40 +34,42 @@ export default function Home() {
   const [activeTab, setActiveTab] = useState(TabOptions.ENCRYPT);
   return (
     <>
-      {account ? (
-        <Tabs>
-          <p>Connected with account: {account}</p>
-          <TabsSelector>
-            {tabsList.map((item) => (
-              <TabButton
-                active={activeTab === item.tab}
-                onClick={() => setActiveTab(item.tab)}
-              >
-                {item.name}
-              </TabButton>
-            ))}
-          </TabsSelector>
-          <TabContent>
-            {tabsList.map((item) => (
-              <item.content isActive={activeTab === item.tab} />
-            ))}
-          </TabContent>
-        </Tabs>
-      ) : (
-        <Tabs>
-          <Tab isActive={true}>
-            <MetaMaskCard />
-          </Tab>
-        </Tabs>
+      {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} />
+                ))}
+              </TabContent>
+            </Tabs>
+          </ScreenContainer>
       )}
     </>
   );
 }
 
+const ScreenContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
 const Tabs = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
   gap: 20px;
 `;
 const TabsSelector = styled.div`
@@ -87,7 +90,5 @@ const TabButton = styled.button<{ active: boolean }>`
 `;
 const TabContent = styled.div`
   border: solid 1px black;
-  max-width: 700px;
   width: 50%;
-  height: 300px;
 `;