diff --git a/example/components/Card.tsx b/example/components/Card.tsx index f08f328..e34af74 100644 --- 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,26 +29,10 @@ export function Card({ provider, }: Props) { return ( -
+ {getName(connector)} -
- -
-
- -
+ + -
+ ); } + +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 index b7235d5..169e865 100644 --- 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 index 25a890a..fb451c7 100644 --- 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 new file mode 100644 index 0000000..a8a611e --- /dev/null +++ b/example/components/Footer.tsx @@ -0,0 +1,36 @@ +import styled from "styled-components"; +import {Text} from "./Text"; + +export const Footer = () => { + return ( + + + + 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 ❤️. + + + ETH: 0xFd072083887bFcF8aEb8F37991c11c7743113374 + + + + ) +} + +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 new file mode 100644 index 0000000..59cd0cb --- /dev/null +++ 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 ( + + + + MetaMask Encrypt/Decrypt + + {!account ? ( + +

Use the section below to connect to MetaMask wallet provider

+ + + ) : ( + Connected with account: {account} + )} + + + ) +} + +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 new file mode 100644 index 0000000..9f3bee4 --- /dev/null +++ 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 index abcabfe..6fb2a04 100644 --- a/example/components/Status.tsx +++ b/example/components/Status.tsx @@ -10,19 +10,17 @@ export function Status({ error?: Error; }) { return ( -
+ <> {error ? ( - <> +
🔴 {error.name ?? "Error"} {error.message ? `: ${error.message}` : null} - +
) : isActivating ? ( - <>🟡 Connecting - ) : isActive ? ( - <>🟢 Connected - ) : ( - <>⚪️ Disconnected +
🟡 Connecting
+ ) : isActive && ( +
🟢 Connected
)} -
+ ); } diff --git a/example/components/Tab.tsx b/example/components/Tab.tsx index 196d3e1..8b881d3 100644 --- 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 new file mode 100644 index 0000000..d4e2ffa --- /dev/null +++ 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 index fb1b9bd..ccedd3c 100644 --- 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 ( <> - - + MetaMask Encrypt/Decrypt @@ -50,10 +53,18 @@ export default function App({ Component, pageProps }: AppProps) { gtag('config', 'G-YVFR36G469'); `} - - - - + + + +
+ +