Merge pull request #96 from MLH-Fellowship/staging

Final Merge from Staging to Main
MLH-Fellowship · Apr 9, 2021 · 3818aa7 · 3818aa7
2 parents a2c7074 + 8dfb02d
commit 3818aa7
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -7,12 +7,12 @@
   <p align="center">
     "A Decentralised Encrypted File Storing and Sharing App which is back-boned by Ethereum Smart Contracts and is preparing its launch to the moon 🚀"
     <br /><br />
-    <a href="https://mlh-fellowship.github.io/CryptoDrive/"><strong>Browse CryptoDrive</strong></a>
+    <a href="https://www.cryptodrive.tech"><strong>Browse CryptoDrive</strong></a>
     <br />
     <br />
     <a href="https://en.wikipedia.org/wiki/Decentralization">What is Decentralization</a>
     ·
-    <a href="https://mlh-fellowship.github.io/CryptoDrive/">Live</a>
+    <a href="https://www.cryptodrive.tech">Live</a>
     .
     <a href="https://github.com/MLH-Fellowship/CryptoDrive/issues">Report Bug</a>
     ·
@@ -72,9 +72,9 @@ To use CryptoDrive ,<strong> Metamask </strong> browser extension is required. Y
 <!-- Project Breakdown -->
 ## Project Architecture 
 
-```js
-Architecture and Figma need to be added here
-```
+Explained on Figma [here](https://www.figma.com/proto/DihWjVshe5rKgssA7aauCM/CryptoDrive?node-id=46%3A399&scaling=min-zoom)
+
+
 
 <!-- GETTING STARTED -->
 
@@ -140,4 +140,4 @@ Important decisions regarding the project are taken by the following maintainer.
 
 
 ## Deployment
-<a href="https://mlh-fellowship.github.io/CryptoDrive/"><img src="https://img.shields.io/badge/-GitHub%20Pages-black?style=for-the-badge&logo=github"/></a>
+<a href="https://www.cryptodrive.tech"><img src="https://img.shields.io/badge/-GitHub%20Pages-black?style=for-the-badge&logo=github"/></a>
diff --git a/public/cd.png b/public/cd.png
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
+    <link rel="icon" href="%PUBLIC_URL%/cd.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="preconnect" href="https://fonts.gstatic.com">

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,19 +1,19 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "CryptoDrive",
+  "name": "A decentralized storage and sharing solution.",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "cd.png",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "cd.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "cd.png",
       "type": "image/png",
       "sizes": "512x512"
     }

diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,7 @@
 import React from "react";
 import LoginUI from "./pages/Login/";
 import SignUpUI from "./pages/SignUp";
+import MtmskHelp from "./pages/Metamask"
 import * as ROUTES from "./constants/routes";
 import { Route, Switch, useLocation } from "react-router-dom";
 import { HashRouter as Router } from 'react-router-dom'
@@ -26,6 +27,9 @@ export default function App() {
             <VerticalTabs />
           </div>
         </Route>
+        <Route exact path={ROUTES.HELP}>
+          <MtmskHelp />
+        </Route>
       </Router>
     </>
   );

diff --git a/src/Web3/index.js b/src/Web3/index.js
@@ -1,6 +1,7 @@
 import Web3 from "web3";
 import data from "./contractABI";
-
+import {Redirect }from "react-router-dom"
+import * as ROUTES from './../constants/routes'
 // Function LoadWeb3 used to laod the web3 in the browser and checking whether the web3 has etheruem access or not
 // If not it returns a alert stating the metamask is not present
 
@@ -12,7 +13,8 @@ const loadWeb3=async ()=> {
 		if (window.web3) {
 			window.web3 = new Web3(window.web3.currentProvider);
 		} else {
-			window.alert("please use metamask");
+			window.location.replace(`https://www.cryptodrive.tech/#/help`) 
+            return
 		}
 
   };
@@ -30,8 +32,9 @@ const ContractConnect = async () => {
     return CryptoDrive;
     }
     catch(error){
-        window.alert("Please install metamask to connect with the contract");
-        return;
+        // window.alert("Please install metamask to connect with the contract");
+        window.location.replace(`https://www.cryptodrive.tech/#/help`) 
+        return 
     }
   };
 

diff --git a/src/constants/routes.js b/src/constants/routes.js
@@ -4,3 +4,4 @@ export const BROWSE_FILES = "/browse-files";
 export const SIGN_UP = "/signup";
 export const SIGN_IN = "/signin";
 export const DASHBOARD = "/dashboard"
+export const HELP = "/help"
diff --git a/src/pages/Landing/src/assets/images/video-placeholder.jpg b/src/pages/Landing/src/assets/images/video-placeholder.jpg
diff --git a/src/pages/Landing/src/components/layout/partials/FooterNav.js b/src/pages/Landing/src/components/layout/partials/FooterNav.js
@@ -17,7 +17,7 @@ const FooterNav = ({
       {...props}
       className={classes}
     >
-      <ul className="list-reset">
+      {/* <ul className="list-reset">
         <li>
           <Link to="#0">Contact</Link>
         </li>
@@ -30,7 +30,7 @@ const FooterNav = ({
         <li>
           <Link to="#0">Support</Link>
         </li>
-      </ul>
+      </ul> */}
     </nav>
   );
 }

diff --git a/src/pages/Landing/src/components/sections/Hero.js b/src/pages/Landing/src/components/sections/Hero.js
@@ -99,7 +99,7 @@ const Hero = ({
             data-reveal-delay="800"
           >
             <a
-              data-video="https://player.vimeo.com/video/174002812"
+              data-video="https://player.vimeo.com/video/535007430"
               href="#0"
               aria-controls="video-modal"
               onClick={openModal}
@@ -116,7 +116,7 @@ const Hero = ({
             id="video-modal"
             show={videoModalActive}
             handleClose={closeModal}
-            video="https://player.vimeo.com/video/174002812"
+            video="https://player.vimeo.com/video/535007430"
             videoTag="iframe"
           />
         </div>

diff --git a/src/pages/Metamask/index.jsx b/src/pages/Metamask/index.jsx
@@ -0,0 +1,85 @@
+import React from "react";
+import { Grid } from "@material-ui/core";
+
+const Mtmsk = () => {
+  return (
+    <div style={{ margin: "25px", display: "flex", justifyContent: "center" }}>
+      <div>
+        <center>
+          <h1>
+            Please Install Metamask Extension, in order to proceed with
+            Cryptodrive.
+          </h1>
+          <br />
+          Dont worry we will help you out if you are just getting started.
+          <br /> <br />
+          <br />
+          <b>
+            {" "}
+            Click on the metamask icon (orange fox) below to install metamask
+            extension.
+          </b>
+          <br /> <br />
+          <br />
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://metamask.io/download.html"
+          >
+            <img
+              src="https://cdn.iconscout.com/icon/free/png-512/metamask-2728406-2261817.png"
+              height="150"
+              width="150"
+              alt="MetamaskIcon"
+            />
+          </a>
+          <br />
+          <br /> <br />
+        </center>
+        <h5>Step 1: Make an Account on Metamask Extension</h5>
+        <h5>
+          Step 2: Copy your Account Address It looks like this:{" "}
+          <code>ox0C0D.....60A</code>
+        </h5>
+        <h5>
+          Step 3: You do need some ethers, to start Cryptodrive, lets have
+          faucet ethers from Rinkeby Testnet
+        </h5>
+        <h5>Step 4: You need tweet your address, dont worry its safe. </h5>
+        <h5>
+          Step 5: You need paste that tweet link, here{" "}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://faucet.rinkeby.io/"
+          >
+            https://faucet.rinkeby.io/
+          </a>{" "}
+        </h5>
+        <h5>
+          Step 6: Now you have your ethers, in Metamask, you can check on to
+          extension
+        </h5>
+        <h5>
+          Note: If you are not able see ethers, just click on Rinkeby Test
+          Network, just above your Account Address, from the drop down menu.{" "}
+        </h5>
+        <br />
+        <h2>
+          Hurray!! You did it.
+          <br />
+          Head over to{" "}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://www.cryptodrive.tech"
+          >
+            Cryptodrive.tech
+          </a>{" "}
+          and be the owner of your own data.
+        </h2>
+      </div>
+    </div>
+  );
+};
+export default Mtmsk;