fix: open source the ZooToken website 🎉

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

.env.default

@@ -0,0 +1,4 @@
+# Publicly available on the website
+NEXT_PUBLIC_ALCHEMY_RPC_KEY_MAINNET=
+NEXT_PUBLIC_ALCHEMY_RPC_KEY_KOVAN=
+NEXT_PUBLIC_ALCHEMY_RPC_KEY_ROPSTEN=

.eslintrc

@@ -0,0 +1,17 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "useJSXTextNode": true,
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "modules": true,
+      "jsx": true
+    }
+  },
+  "plugins": ["react-hooks"],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  }
+}

.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env*
+!.env.default
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.vscode
+
+.now
+
+public/sitemap.xml

.prettierignore

@@ -0,0 +1,28 @@
+.prettierignore
+.gitignore
+yarn.lock
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+/static
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  arrowParens: 'always',
+  endOfLine: 'lf',
+  quoteProps: 'consistent',
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 80,
+};

README.md

@@ -1,2 +1,17 @@
 # zootoken-website
-Welcome to the ZOO🦒 🐒  🐅
+
+Welcome to the ZOO🦒 🐒 🐅
+
+This repo holds the [ZooToken website](http://zootoken.club), new features and improvements from the community is highly encouraged.
+
+## Visiting the ZOO Cryptovoxels parcel
+
+The Zoo is located in the Brooklyn island of the Cryptovoxels metaverse and can be viewed at coordinates [here](https://www.cryptovoxels.com/play?coords=N@784E,54N).
+
+## Getting started locally
+
+1. Clone the repository
+1. Install dependencies `yarn install`
+1. Copy the `.env.default` and add your own [Alchemy RPC key](https://alchemyapi.io) `cp .env.default .env.local`
+1. Start the development server `yarn dev`
+1. View the page at http://localhost:3000

components/BaseButton.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+// Button w/ full CSS resets
+const BaseButton = styled.button`
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+`;
+
+export { BaseButton };

components/BaseLink.tsx

@@ -0,0 +1,57 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+import Link, { LinkProps } from 'next/link';
+
+export const StyledLink = styled.a`
+  font-family: 'Khula';
+  font-weight: ${(props) => props.theme.fontWeights.semiBold};
+  font-size: inherit;
+  line-height: 140%;
+  color: #333b4e;
+  text-decoration: none;
+
+  :hover,
+  :active {
+    text-decoration: underline;
+  }
+
+  @media (max-width: ${(props) => props.theme.breakpoints.md}) {
+    font-size: 14px;
+  }
+`;
+
+interface BaseLinkProps extends LinkProps {
+  href: string;
+  className?: string;
+  external?: boolean;
+  style?: any;
+}
+
+export const BaseLink: FC<BaseLinkProps> = ({
+  className,
+  children,
+  external,
+  href,
+  as,
+  ...rest
+}) => {
+  if (external) {
+    return (
+      <StyledLink
+        className={className}
+        target="_blank"
+        rel="noopener"
+        href={href}
+        {...rest}
+      >
+        {children}
+      </StyledLink>
+    );
+  }
+
+  return (
+    <Link as={as} passHref {...rest} href={href}>
+      <StyledLink className={className}>{children}</StyledLink>
+    </Link>
+  );
+};

components/Buttons.tsx

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+import { BaseButton } from './BaseButton';
+
+const PrimaryButton = styled(BaseButton)`
+  width: 100%;
+  height: 60px;
+  background: #333b4e;
+  box-shadow: 0px 1px 2px #0f0e39, inset 0px 4px 9px rgba(255, 255, 255, 0.25);
+  border-radius: 11px;
+  outline: none;
+  font-weight: bold;
+  font-style: normal;
+  font-family: 'Khula';
+  font-size: 16px;
+  text-align: center;
+  color: #ffffff;
+  transition: all 0.15s ease-in;
+  will-change: transform, background-color, box-shadow;
+  cursor: pointer;
+  :active {
+    transform: scale(0.98);
+  }
+  :disabled {
+    box-shadow: inset 0px 4px 9px rgba(255, 255, 255, 0.25);
+    cursor: not-allowed;
+  }
+  /* also focus ?? */
+  :hover:not(:disabled) {
+    transform: scale(0.98), translateY(-2px);
+  }
+`;
+
+const SecondaryButton = styled(BaseButton)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 60px;
+  text-decoration: none;
+  background: #ffffff;
+  border: 1px solid #e3f0ff;
+  box-shadow: inset 0px 4px 9px rgba(255, 255, 255, 0.25);
+  border-radius: 11px;
+  outline: none;
+  font-weight: bold;
+  font-style: normal;
+  font-family: 'Khula';
+  font-size: 16px;
+  line-height: 19px;
+  text-align: center;
+  color: #333b4e;
+  transition: all 0.15s ease-in;
+  will-change: transform, background-color, box-shadow;
+  cursor: pointer;
+  :active {
+    transform: scale(0.98);
+  }
+  :disabled {
+    box-shadow: inset 0px 4px 9px rgba(255, 255, 255, 0.25);
+    cursor: not-allowed;
+  }
+  :hover:not(:disabled) {
+    transform: scale(0.98), translateY(-2px);
+  }
+`;
+
+const GoldenPrimaryButton = styled(PrimaryButton)`
+  background: #b58532;
+`;
+
+const PrimaryButtonLink = styled(PrimaryButton)`
+  text-decoration: none;
+  width: 162px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 30px;
+`;
+
+const GoldenPrimaryButtonLink = styled(PrimaryButtonLink)`
+  background: #b58532;
+`;
+
+export {
+  PrimaryButton,
+  PrimaryButtonLink,
+  SecondaryButton,
+  GoldenPrimaryButton,
+  GoldenPrimaryButtonLink,
+};