Front 001 index page (#5)

* create start page
* add Kimberlite contract interaction

.gitignore

@@ -12,3 +12,4 @@ artifacts
 .idea
 package-lock.json
 yarn.lock
+.DS_Store

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/.gitignore

@@ -0,0 +1,36 @@
+# 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
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1 @@
+### Frontend

frontend/abi.json

@@ -0,0 +1,28 @@
+[
+  {
+    "inputs": [],
+    "name": "extractDiamond",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "bytes4",
+        "name": "interfaceId",
+        "type": "bytes4"
+      }
+    ],
+    "name": "supportsInterface",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  }
+]

frontend/components/DeployButton/DeployButton.module.scss

@@ -0,0 +1,74 @@
+.container {
+  background-color: white;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .button {
+    background-color: white;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 16px;
+    border: 1px solid var(--lightest-diamond-blue);
+    font-size: 3rem;
+    font-weight: 500;
+    padding: 2rem 1rem;
+    cursor: pointer;
+    color: var(--diamond-blue-1);
+    overflow: hidden;
+    transition: all 1.3s;
+
+    .title {
+      position: relative;
+      display: inline-block;
+      transition: all 1.3s;
+    }
+
+    .background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-image: url(../../public/images/grad-1.webp);
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      transition: all 0.3s;
+      background-position: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+
+    .error {
+      color: red;
+    }
+
+    .diamond {
+      transition: 0.3s;
+    }
+    &:hover {
+      &.error {
+        border: 1px solid red;
+        .background {
+          opacity: 0;
+          transition: all 0.3s;
+        }
+      }
+
+      .diamond {
+        color: white;
+        transition: 0.3s;
+      }
+      .background {
+        opacity: 1;
+        transition: all 0.3s;
+      }
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+}

frontend/components/DeployButton/DeployButton.tsx

@@ -0,0 +1,32 @@
+import cn from 'classnames';
+import { IDeployButtonProps } from './DeployButtonProps';
+import styles from './DeployButton.module.scss';
+export const DeployButton: React.FC<IDeployButtonProps> = ({ onClick, deploying, error }) => {
+
+  return (
+    <div className={styles.container}>
+      <button
+        className={cn(styles.button, error ? styles.error : null)}
+        onClick={onClick}
+        disabled={deploying}
+      >
+        <div className={styles.background}></div>
+        <span className={styles.title}>
+          {error && (
+            <span className={styles.error}>
+              Something went wrong, please check your transaction
+            </span>
+          )}
+          {!error &&
+            (deploying ? (
+              <span className={styles.diamond}>Deploying...</span>
+            ) : (
+              <span>
+                Make your <span className={styles.diamond}>diamond</span>
+              </span>
+            ))}
+        </span>
+      </button>
+    </div>
+  );
+};

frontend/components/DeployButton/DeployButtonProps.ts

@@ -0,0 +1,6 @@
+export interface IDeployButtonProps {
+  children?: React.ReactNode;
+  onClick: React.MouseEventHandler;
+  deploying: boolean;
+  error: boolean;
+}

frontend/components/DeployButton/index.ts

@@ -0,0 +1 @@
+export * from './DeployButton';

frontend/components/Header/Header.module.scss

@@ -0,0 +1,48 @@
+.container {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  z-index: 5000;
+  .content {
+    max-width: 144rem;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5.6rem 4rem;
+    @media screen and (max-width: 768px) {
+      padding: 4rem;
+    }
+    @media screen and (max-width: 365px) {
+      padding: 2rem;
+    }
+
+    .logo {
+      display: flex;
+
+      height: 6.5rem;
+      padding-right: 1rem;
+      img {
+        height: 100%;
+      }
+
+      .title {
+        padding: 0.5rem 1.5rem;
+        font-size: 2.2rem;
+        font-weight: 700;
+        line-height: 2.2rem;
+        letter-spacing: 1px;
+        text-align: left;
+        color: #186faf;
+        max-width: 17rem;
+
+        @media screen and (max-width: 425px) {
+          padding: 0.5rem;
+        }
+      }
+    }
+    .connect {
+      font-size: 1.7rem;
+    }
+  }
+}

frontend/components/Header/Header.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable @next/next/no-img-element */
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import { IHeaderProps } from './HeaderProps';
+import styles from './Header.module.scss';
+import Link from 'next/link';
+import { Navigation } from '../Navigation';
+
+export const Header: React.FC<IHeaderProps> = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <div className={styles.logo}>
+          <Link href='/'>
+            <img src='/images/logo.png' alt='logo' />
+          </Link>
+        </div>
+        <div className={styles.connect}>
+          <ConnectButton />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/components/Header/HeaderProps.ts

@@ -0,0 +1,3 @@
+export interface IHeaderProps {
+  children?: React.ReactNode;
+}

frontend/components/Header/index.ts

@@ -0,0 +1 @@
+export * from './Header';

frontend/components/Layout/Layout.tsx

@@ -0,0 +1,10 @@
+import { Header } from '@/components/Header';
+
+export const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <Header />
+      {children}
+    </>
+  );
+};

frontend/components/Layout/index.ts

@@ -0,0 +1 @@
+export * from './Layout';