Merge pull request #1 from harshmittal1750/frontend

cleaning and styling
xParametric · Jun 22, 2023 · e644209 · e644209
2 parents d7fbc49 + bf98b1c
commit e644209
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 105 deletions.
diff --git a/backend/.github/actions/setup/action.yml b/backend/.github/actions/setup/action.yml
@@ -0,0 +1,11 @@
+name: Setup
+description: Runs basic commands to install dependencies
+runs:
+  using: "composite"
+  steps:
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: npm install
+      run: npm install
+      shell: bash
diff --git a/backend/.github/workflows/main.yml b/backend/.github/workflows/main.yml
@@ -0,0 +1,28 @@
+name: Test & build
+
+on:
+  push:
+    branches:
+      - main
+  pull_request: ~
+
+concurrency:
+  group: main-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  run-unit-tests:
+    name: Run unit tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: npm run test:unit
+
+  run-basic-checks:
+    name: Run linters
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: npm run lint
diff --git a/backend/.husky/pre-commit b/backend/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
diff --git a/frontend/components/InstructionsComponent.jsx b/frontend/components/InstructionsComponent.jsx
@@ -1,80 +1,12 @@
 import styles from "../styles/InstructionsComponent.module.css";
 import Router, { useRouter } from "next/router";
 export default function InstructionsComponent() {
-	const router = useRouter();
-	return (
-		<div className={styles.container}>
-			<header className={styles.header_container}>
-				<h1>
-					create<span>-web3-dapp</span>
-				</h1>
-				<p>
-					Get started by editing this page in{" "}
-					<span>/pages/index.js</span>
-				</p>
-			</header>
+  const router = useRouter();
+  return (
+    <div className={styles.container}>
+      <header className={styles.header_container}></header>
 
-			<div className={styles.buttons_container}>
-				<a
-					target={"_blank"}
-					href={"https://createweb3dapp.alchemy.com/#components"}
-				>
-					<div className={styles.button}>
-						{/* <img src="https://static.alchemyapi.io/images/cw3d/Icon%20Medium/lightning-square-contained-m.svg" width={"20px"} height={"20px"} /> */}
-						<p>Add Components</p>
-					</div>
-				</a>
-				<a
-					target={"_blank"}
-					href={"https://createweb3dapp.alchemy.com/#templates"}
-				>
-					<div className={styles.button}>
-						{/* <img src="https://static.alchemyapi.io/images/cw3d/Icon%20Medium/lightning-square-contained-m.svg" width={"20px"} height={"20px"} /> */}
-						<p>Explore Templates</p>
-					</div>
-				</a>
-				<a
-					target={"_blank"}
-					href={"https://docs.alchemy.com/docs/create-web3-dapp"}
-				>
-					<div className={styles.button}>
-						<img
-							src="https://static.alchemyapi.io/images/cw3d/Icon%20Large/file-eye-01-l.svg"
-							width={"20px"}
-							height={"20px"}
-						/>
-						<p>Visit Docs</p>
-					</div>
-				</a>
-			</div>
-			<div className={styles.footer}>
-				<a href="https://alchemy.com/?a=create-web3-dapp" target={"_blank"}>
-					<img
-						id="badge-button"
-						style={{ width: "240px", height: "53px" }}
-						src="https://static.alchemyapi.io/images/marketing/badgeLight.png"
-						alt="Alchemy Supercharged"
-					/>
-				</a>
-				<div className={styles.icons_container}>
-					<div>
-						<a
-							href="https://github.com/alchemyplatform/create-web3-dapp"
-							target={"_blank"}
-						>
-							Leave a star on Github
-						</a>
-					</div>
-					<div>
-						<a
-							href="https://twitter.com/AlchemyPlatform"
-							target={"_blank"}
-						>
-							Follow us on Twitter
-						</a>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
+      <div className={styles.footer}></div>
+    </div>
+  );
 }
diff --git a/frontend/components/navigation/navbar.jsx b/frontend/components/navigation/navbar.jsx
@@ -1,12 +1,12 @@
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import styles from "../../styles/Navbar.module.css";
 export default function Navbar() {
-	return (
-		<nav className={styles.navbar}>
-			<a href="https://alchemy.com/?a=create-web3-dapp" target={"_blank"}>
-				<img className={styles.alchemy_logo} src="/cw3d-logo.png"></img>
-			</a>
-			<ConnectButton></ConnectButton>
-		</nav>
-	);
+  return (
+    <nav className={styles.navbar}>
+      <a href="https://alchemy.com/?a=create-web3-dapp" target={"_blank"}>
+        {/* <img className={styles.alchemy_logo} src="/cw3d-logo.png"></img> */}
+      </a>
+      <ConnectButton></ConnectButton>
+    </nav>
+  );
 }
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,17 +10,20 @@
 		"marketplace": "npx create-web3-dapp marketplace"
 	},
 	"dependencies": {
+		"@mui/material": "^5.13.5",
+		"@mui/styled-engine-sc": "^5.12.0",
 		"@rainbow-me/rainbowkit": "^0.12.15",
 		"alchemy-sdk": "^2.6.2",
 		"dotenv": "^16.3.1",
 		"next": "13.1.2",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
+		"styled-components": "^5.3.11",
 		"viem": "^1.0.7",
 		"wagmi": "^0.12.16"
 	},
 	"devDependencies": {
 		"eslint": "8.36.0",
-		"eslint-config-next": "13.2.4"
+		"eslint-config-next": "^12.0.4"
 	}
 }
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
@@ -1,38 +1,55 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,500;1,400&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,500;1,400&display=swap");
 
 html,
 body {
-	background-color: black;
-	font-family: 'Rubik';
-	font-weight: normal;
+  background: rgb(14, 14, 16);
+  background: -moz-linear-gradient(
+    90deg,
+    rgba(14, 14, 16, 1) 0%,
+    rgba(15, 15, 16, 1) 35%,
+    rgba(13, 13, 14, 1) 100%
+  );
+  background: -webkit-linear-gradient(
+    90deg,
+    rgba(14, 14, 16, 1) 0%,
+    rgba(15, 15, 16, 1) 35%,
+    rgba(13, 13, 14, 1) 100%
+  );
+  background: linear-gradient(
+    90deg,
+    rgba(14, 14, 16, 1) 0%,
+    rgba(15, 15, 16, 1) 35%,
+    rgba(13, 13, 14, 1) 100%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e0e10",endColorstr="#0d0d0e",GradientType=1);
+  font-family: "Rubik";
+  font-weight: normal;
 }
-h1{
-	margin-bottom: 1rem;
+h1 {
+  margin-bottom: 1rem;
 }
-h2{
-	margin-bottom: .5rem;
-	font-weight: normal;
-
+h2 {
+  margin-bottom: 0.5rem;
+  font-weight: normal;
 }
 
-p{
-	line-height: 1.5rem;
-	font-weight: lighter;
-
+p {
+  line-height: 1.5rem;
+  font-weight: lighter;
 }
 
 a {
-	color: inherit;
-	text-decoration: none;
+  color: inherit;
+  text-decoration: none;
 }
 
 * {
-	box-sizing: border-box;
-	padding: 0;
-	margin: 0;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
 }
 
 @media (prefers-color-scheme: dark) {
-	html {
-	}
+  html {
+  }
 }