Skip to content

Instantly share code, notes, and snippets.

@abhiaiyer91
Last active Mar 27, 2021
Embed
What would you like to do?
import { navigate } from "gatsby-link";
import * as React from "react";
import { useAuth } from "../hooks/useAuth";
const wrapper = {
backgroundColor: `rgb(197,250,3)`,
display: `flex`,
alignItems: `center`,
justifyContent: `center`,
flexDirection: `column`,
height: `100vh`,
fontFamily: "-apple-system, Roboto, sans-serif, serif",
};
const loginCard = {
maxWidth: 420,
width: `100%`,
background: `black`,
boxShadow: `rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px, rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px`,
borderRadius: `30px`,
alignSelf: `center`,
padding: `48px 16px`,
color: `rgb(197,250,3)`,
fontFamily: "-apple-system, Roboto, sans-serif, serif",
};
const button = {
borderRadius: `4px`,
border: `1px solid rgb(247, 248, 250)`,
backgroundColor: `rgb(255, 255, 255)`,
height: `40px`,
width: 240,
cursor: `pointer`,
};
const buttonWrapper = {
textAlign: `center`,
};
// markup
const IndexPage = () => {
const { logout, currentUser } = useAuth();
const user = currentUser();
const userAddress = user?.get("ethAddress");
React.useEffect(() => {
if (!user) {
navigate("/login");
}
}, [user]);
return (
<main style={wrapper}>
<title>Home Page</title>
<div style={loginCard}>
<p>ETH Address: {userAddress}</p>
<div style={buttonWrapper}>
<button
style={button}
onClick={() => {
return logout().catch((e) => {
console.error(e);
});
}}
>
LOG OUT
</button>
</div>
</div>
</main>
);
};
export default IndexPage;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment