feat: site ready

therealharpaljadeja · Aug 21, 2023 · a183b18 · a183b18
1 parent e69e491
commit a183b18
Show file tree

Hide file tree

Showing 12 changed files with 1,597 additions and 343 deletions.
diff --git a/packages/site/gatsby-config.ts b/packages/site/gatsby-config.ts
@@ -17,6 +17,22 @@ const config: GatsbyConfig = {
         display: 'standalone',
       },
     },
+    {
+      resolve: '@chakra-ui/gatsby-plugin',
+      options: {
+        /**
+         * @property {boolean} [resetCSS=true]
+         * if false, this plugin will not use `<CSSReset />
+         */
+        resetCSS: true,
+        /**
+         * @property {number} [portalZIndex=undefined]
+         * The z-index to apply to all portal nodes. This is useful
+         * if your app uses a lot z-index to position elements.
+         */
+        portalZIndex: undefined,
+      },
+    },
   ],
 };
 

diff --git a/packages/site/package.json b/packages/site/package.json
@@ -25,8 +25,13 @@
     ]
   },
   "dependencies": {
+    "@chakra-ui/gatsby-plugin": "^3.1.3",
+    "@chakra-ui/react": "^2.8.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@metamask/keyring-api": "^0.1.3",
     "@metamask/providers": "^9.0.0",
+    "framer-motion": "^10.16.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",

diff --git a/packages/site/src/App.tsx b/packages/site/src/App.tsx
@@ -4,14 +4,7 @@ import { Footer, Header } from './components';
 
 import { GlobalStyle } from './config/theme';
 import { ToggleThemeContext } from './Root';
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 100vh;
-  max-width: 100vw;
-`;
+import { VStack } from '@chakra-ui/react';
 
 export type AppProps = {
   children: ReactNode;
@@ -22,12 +15,11 @@ export const App: FunctionComponent<AppProps> = ({ children }) => {
 
   return (
     <>
-      <GlobalStyle />
-      <Wrapper>
+      <VStack backgroundColor={'#251551'} width="100%" height="100%">
         <Header handleToggleClick={toggleTheme} />
         {children}
         <Footer />
-      </Wrapper>
+      </VStack>
     </>
   );
 };
diff --git a/packages/site/src/Root.tsx b/packages/site/src/Root.tsx
@@ -24,9 +24,7 @@ export const Root: FunctionComponent<RootProps> = ({ children }) => {
 
   return (
     <ToggleThemeContext.Provider value={toggleTheme}>
-      <ThemeProvider theme={darkTheme ? dark : light}>
-        <MetaMaskProvider>{children}</MetaMaskProvider>
-      </ThemeProvider>
+      <MetaMaskProvider>{children}</MetaMaskProvider>
     </ToggleThemeContext.Provider>
   );
 };
diff --git a/packages/site/src/components/Buttons.tsx b/packages/site/src/components/Buttons.tsx
@@ -3,93 +3,48 @@ import styled from 'styled-components';
 import { MetamaskState } from '../hooks';
 import { ReactComponent as FlaskFox } from '../assets/flask_fox.svg';
 import { shouldDisplayReconnectButton } from '../utils';
-
-const Link = styled.a`
-  display: flex;
-  align-self: flex-start;
-  align-items: center;
-  justify-content: center;
-  font-size: ${(props) => props.theme.fontSizes.small};
-  border-radius: ${(props) => props.theme.radii.button};
-  border: 1px solid ${(props) => props.theme.colors.background.inverse};
-  background-color: ${(props) => props.theme.colors.background.inverse};
-  color: ${(props) => props.theme.colors.text.inverse};
-  text-decoration: none;
-  font-weight: bold;
-  padding: 1rem;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-
-  &:hover {
-    background-color: transparent;
-    border: 1px solid ${(props) => props.theme.colors.background.inverse};
-    color: ${(props) => props.theme.colors.text.default};
-  }
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    width: 100%;
-    box-sizing: border-box;
-  }
-`;
-
-const Button = styled.button`
-  display: flex;
-  align-self: flex-start;
-  align-items: center;
-  justify-content: center;
-  margin-top: auto;
-  ${({ theme }) => theme.mediaQueries.small} {
-    width: 100%;
-  }
-`;
-
-const ButtonText = styled.span`
-  margin-left: 1rem;
-`;
-
-const ConnectedContainer = styled.div`
-  display: flex;
-  align-self: flex-start;
-  align-items: center;
-  justify-content: center;
-  font-size: ${(props) => props.theme.fontSizes.small};
-  border-radius: ${(props) => props.theme.radii.button};
-  border: 1px solid ${(props) => props.theme.colors.background.inverse};
-  background-color: ${(props) => props.theme.colors.background.inverse};
-  color: ${(props) => props.theme.colors.text.inverse};
-  font-weight: bold;
-  padding: 1.2rem;
-`;
-
-const ConnectedIndicator = styled.div`
-  content: ' ';
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: green;
-`;
+import { Button, Container, HStack, Link, Tag, Text } from '@chakra-ui/react';
+import SText from './Text';
 
 export const InstallFlaskButton = () => (
   <Link href="https://metamask.io/flask/" target="_blank">
-    <FlaskFox />
-    <ButtonText>Install MetaMask Flask</ButtonText>
+    <HStack backgroundColor={'#4823b0'} px="4" py="2" borderRadius={'md'}>
+      <FlaskFox />
+      <SText>Install Flask</SText>
+    </HStack>
   </Link>
 );
 
 export const ConnectButton = (props: ComponentProps<typeof Button>) => {
   return (
-    <Button {...props}>
+    <Button
+      {...props}
+      backgroundColor={'#4823b0'}
+      px="4"
+      py="2"
+      borderRadius={'md'}
+      gap={'3'}
+      _hover={{ backgroundColor: '#4823b0' }}
+    >
       <FlaskFox />
-      <ButtonText>Connect</ButtonText>
+      <SText>Connect</SText>
     </Button>
   );
 };
 
 export const ReconnectButton = (props: ComponentProps<typeof Button>) => {
   return (
-    <Button {...props}>
+    <Button
+      {...props}
+      backgroundColor={'#4823b0'}
+      px="4"
+      py="2"
+      borderRadius={'md'}
+      gap="3"
+      _hover={{ backgroundColor: '#4823b0' }}
+    >
       <FlaskFox />
-      <ButtonText>Reconnect</ButtonText>
+      <SText>Reconnect</SText>
     </Button>
   );
 };
@@ -118,9 +73,14 @@ export const HeaderButtons = ({
   }
 
   return (
-    <ConnectedContainer>
-      <ConnectedIndicator />
+    <Button>
+      <Container
+        height="10px"
+        width={'10px'}
+        borderRadius={'full'}
+        backgroundColor={'green.900'}
+      />
       <ButtonText>Connected</ButtonText>
-    </ConnectedContainer>
+    </Button>
   );
 };
diff --git a/packages/site/src/components/Card.tsx b/packages/site/src/components/Card.tsx
@@ -1,3 +1,4 @@
+import { Heading, VStack } from '@chakra-ui/react';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 
@@ -11,35 +12,6 @@ type CardProps = {
   fullWidth?: boolean;
 };
 
-const CardWrapper = styled.div<{ fullWidth?: boolean; disabled: boolean }>`
-  display: flex;
-  flex-direction: column;
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : '250px')};
-  background-color: ${({ theme }) => theme.colors.card.default};
-  margin-top: 2.4rem;
-  margin-bottom: 2.4rem;
-  padding: 2.4rem;
-  border: 1px solid ${({ theme }) => theme.colors.border.default};
-  border-radius: ${({ theme }) => theme.radii.default};
-  box-shadow: ${({ theme }) => theme.shadows.default};
-  filter: opacity(${({ disabled }) => (disabled ? '.4' : '1')});
-  align-self: stretch;
-  ${({ theme }) => theme.mediaQueries.small} {
-    width: 100%;
-    margin-top: 1.2rem;
-    margin-bottom: 1.2rem;
-    padding: 1.6rem;
-  }
-`;
-
-const Title = styled.h2`
-  font-size: ${({ theme }) => theme.fontSizes.large};
-  margin: 0;
-  ${({ theme }) => theme.mediaQueries.small} {
-    font-size: ${({ theme }) => theme.fontSizes.text};
-  }
-`;
-
 const Description = styled.div`
   margin-top: 2.4rem;
   margin-bottom: 2.4rem;
@@ -48,12 +20,10 @@ const Description = styled.div`
 export const Card = ({ content, disabled = false, fullWidth }: CardProps) => {
   const { title, description, button } = content;
   return (
-    <CardWrapper fullWidth={fullWidth} disabled={disabled}>
-      {title && (
-        <Title>{title}</Title>
-      )}
+    <VStack border="1px solid black" p="4" borderRadius={'md'} width={'100%'}>
+      {title && <Heading size={'md'}>{title}</Heading>}
       <Description>{description}</Description>
       {button}
-    </CardWrapper>
+    </VStack>
   );
 };
diff --git a/packages/site/src/components/Footer.tsx b/packages/site/src/components/Footer.tsx
@@ -2,46 +2,27 @@ import styled, { useTheme } from 'styled-components';
 import { ReactComponent as MetaMaskFox } from '../assets/metamask_fox.svg';
 import { MetaMask } from './MetaMask';
 import { PoweredBy } from './PoweredBy';
-
-const FooterWrapper = styled.footer`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding-top: 2.4rem;
-  padding-bottom: 2.4rem;
-  border-top: 1px solid ${(props) => props.theme.colors.border.default};
-`;
-
-const PoweredByButton = styled.a`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 1.2rem;
-  border-radius: ${({ theme }) => theme.radii.button};
-  box-shadow: ${({ theme }) => theme.shadows.button};
-  background-color: ${({ theme }) => theme.colors.background.alternative};
-`;
-
-const PoweredByContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 1rem;
-`;
+import { Button, HStack, Image, Link, VStack } from '@chakra-ui/react';
 
 export const Footer = () => {
-  const theme = useTheme();
-
   return (
-    <FooterWrapper>
-      <PoweredByButton href="https://docs.metamask.io/" target="_blank">
-        <MetaMaskFox />
-        <PoweredByContainer>
-          <PoweredBy color={theme.colors.text.muted} />
-          <MetaMask color={theme.colors.text.default} />
-        </PoweredByContainer>
-      </PoweredByButton>
-    </FooterWrapper>
+    <VStack marginTop={'10'} alignItems={'center'} gap="2">
+      <PoweredBy color={'white'} />
+      <HStack gap="4">
+        <Link href="https://docs.metamask.io/" target="_blank">
+          <VStack gap="2" alignItems={'start'}>
+            <HStack>
+              <MetaMaskFox />
+              <MetaMask color={'white'} />
+            </HStack>
+          </VStack>
+        </Link>
+        <Link href="https://docs.metamask.io/" target="_blank">
+          <HStack>
+            <Image width="100px" src="./pimlico.png" />
+          </HStack>
+        </Link>
+      </HStack>
+    </VStack>
   );
 };
diff --git a/packages/site/src/components/Header.tsx b/packages/site/src/components/Header.tsx
@@ -5,6 +5,8 @@ import { connectSnap, getThemePreference, getSnap } from '../utils';
 import { HeaderButtons } from './Buttons';
 import { SnapLogo } from './SnapLogo';
 import { Toggle } from './Toggle';
+import { Heading, HStack } from '@chakra-ui/react';
+import SHeading from './Heading';
 
 const HeaderWrapper = styled.header`
   display: flex;
@@ -15,16 +17,6 @@ const HeaderWrapper = styled.header`
   border-bottom: 1px solid ${(props) => props.theme.colors.border.default};
 `;
 
-const Title = styled.p`
-  font-size: ${(props) => props.theme.fontSizes.title};
-  font-weight: bold;
-  margin: 0;
-  margin-left: 1.2rem;
-  ${({ theme }) => theme.mediaQueries.small} {
-    display: none;
-  }
-`;
-
 const LogoWrapper = styled.div`
   display: flex;
   flex-direction: row;
@@ -42,7 +34,6 @@ export const Header = ({
 }: {
   handleToggleClick(): void;
 }) => {
-  const theme = useTheme();
   const [state, dispatch] = useContext(MetaMaskContext);
 
   const handleConnectClick = async () => {
@@ -60,18 +51,14 @@ export const Header = ({
     }
   };
   return (
-    <HeaderWrapper>
-      <LogoWrapper>
-        <SnapLogo color={theme.colors.icon.default} size={36} />
-        <Title>template-snap</Title>
-      </LogoWrapper>
+    <HStack width={'100%'} justifyContent={'space-between'} px={'6'} py={'4'}>
+      <HStack gap={'2'}>
+        <SnapLogo color={'white'} size={28} />
+        <SHeading size={'md'}>aa-snap</SHeading>
+      </HStack>
       <RightContainer>
-        <Toggle
-          onToggle={handleToggleClick}
-          defaultChecked={getThemePreference()}
-        />
         <HeaderButtons state={state} onConnectClick={handleConnectClick} />
       </RightContainer>
-    </HeaderWrapper>
+    </HStack>
   );
 };