connect wallet

piaocreative · Nov 28, 2021 · 1d5c685 · 1d5c685
1 parent 67ac328
commit 1d5c685
Show file tree

Hide file tree

Showing 7 changed files with 52,852 additions and 11,950 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "react-image-appear": "^1.3.26",
     "react-loading-screen": "^0.0.17",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "4.0.3",
     "react-scroll": "^1.8.4",
     "react-slick": "^0.28.1",
     "react-timeline-animation": "^1.1.9",

diff --git a/src/App.js b/src/App.js
@@ -2,6 +2,7 @@ import React, {useEffect, useState} from "react";
 import { Web3ReactProvider } from '@web3-react/core'
 import LoadingScreen from 'react-loading-screen';
 import Web3 from 'web3'
+import { useWallet, UseWalletProvider } from 'use-wallet'
 
 import Header from "./components/Header";
 import Banner from "./components/Banner";
@@ -69,7 +70,12 @@ function App() {
   });
 
   return (
-    <Web3ReactProvider getLibrary={getLibrary}>
+    <UseWalletProvider
+      chainId={1}
+      connectors={{
+        portis: { dAppId: 'my-dapp-id-123-xyz' },
+      }}
+    >
 
       {
         isLoaded? 
@@ -97,7 +103,7 @@ function App() {
                 <div className="col-lg-6">
                     <div className="position-relative">
 
-                      <img src={ image } className="w-100" />
+                      {/* <img src={ image } className="w-100" /> */}
 
                       <Light
                         url="./lights/light4.png"
@@ -155,7 +161,7 @@ function App() {
       > Post Apocalyptic</LoadingScreen>
       }
 
-    </Web3ReactProvider>
+    </UseWalletProvider>
   );
 }
 

diff --git a/src/App.scss b/src/App.scss
@@ -10,6 +10,14 @@ header {
     position: relative;
     z-index: 1;
     padding: 0.5rem 0;
+
+    button {
+        width: 18rem;
+        height: 4rem;
+        padding: 0 3rem;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
 }
 
 .navbar-nav {

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,69 +1,66 @@
 import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
 import {Link} from 'react-scroll'
-
-import { useWeb3React } from "@web3-react/core"
-import { injected } from "./connectors"
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBars } from '@fortawesome/free-solid-svg-icons'
+import { useWallet } from 'use-wallet'
 
 const Header = () => {
-    const { active, activate, deactivate } = useWeb3React();
 
-    async function connect() {
-      try {
-        await activate(injected)
-      } catch (ex) {
-        console.log(ex)
-      }
-    }
-
-    async function disconnect() {
-      try {
-        deactivate();
-      } catch (ex) {
-        console.log(ex)
-      }
+    const wallet = useWallet();
+
+    function connect() {
+        wallet.connect();
+        console.log(wallet.status);
+        console.log(wallet.account)
     }
 
     return(
         <Router>
             <header>
+
                 <div className="container">
-                <nav className="navbar navbar-expand-lg">
-                    <div className="navbar-brand">
-                        <Link to="/">
-                            <img src="./logo.png" />
-                        </Link>
-                    </div>
+                    <nav className="navbar navbar-expand-lg">
+                        <div className="navbar-brand">
+                            <Link to="/">
+                                <img src="./logo.png" />
+                            </Link>
+                        </div>
 
-                    <button className="navbar-toggler btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
-                        <FontAwesomeIcon className="text-white" icon={faBars} />
-                    </button>
+                        <button className="navbar-toggler btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
+                            <FontAwesomeIcon className="text-white" icon={faBars} />
+                        </button>
 
-                    <div className="collapse navbar-collapse justify-content-end" id="navBar">
+                        <div className="collapse navbar-collapse justify-content-end" id="navBar">
 
-                        <div className="navbar-nav">
-                            <Link to="gallery" spy={true} smooth={true} className="nav-link">
-                                Gallery
-                            </Link>
-
-                            <Link to="story" spy={true} smooth={true} className="nav-link">
-                                Story
-                            </Link>
+                            <div className="navbar-nav">
+                                <Link to="gallery" spy={true} smooth={true} className="nav-link">
+                                    Gallery
+                                </Link>
+                                
+                                <Link to="story" spy={true} smooth={true} className="nav-link">
+                                    Story
+                                </Link>
 
-                            <Link to="roadmap"  spy={true} smooth={true} className="nav-link">
-                                Roadmap 
-                            </Link>
+                                <Link to="roadmap"  spy={true} smooth={true} className="nav-link">
+                                    Roadmap 
+                                </Link>
 
-                            <Link to="team" spy={true} smooth={true} className="nav-link">
-                                Team
-                            </Link> 
-                        </div>
+                                <Link to="team" spy={true} smooth={true} className="nav-link">
+                                    Team
+                                </Link> 
+                            </div>
 
-                        {active ? <a href="#" onClick={disconnect}><h4 className="connectWallet">Disconnect</h4></a> : <a href="#" onClick={connect}><h4 className="connectWallet">Wallet Connect</h4></a>}
+                            <div className="flex flex-col items-center justify-center">
+                                {wallet.status === 'connected' ? (
+                                    <button onClick={() => wallet.reset()}>Connected {wallet.account} </button>
+                                ) : (
+                                    <button onClick={connect}>Connect Wallet</button>
+                                )}
+                                {/* {wallet ? <button onClick={disconnect}>connected <span>{wallet.substring(0, 5)+'...'}</span></button> : <button onClick={connect}>Wallet Connect</button> } */}
+                            </div>
 
-                    </div>
+                        </div>
                     </nav>
                 </div>
             </header>

diff --git a/src/components/Products.js b/src/components/Products.js
@@ -1,7 +1,6 @@
 import React from "react";
 import Slider from "react-slick";
-import { BrowserRouter as Router,  Link } from "react-router-dom";
-import ReactImageAppear from 'react-image-appear';
+import { BrowserRouter as Router } from "react-router-dom";
 
 const Products = () => {
     let settings = {