more refactoring and cleaning

Author: beauwilliams

.env.example

@@ -1,3 +1,6 @@
+NEXT_PUBLIC_INFURA_ID=460f40a260564ac4a4f4b3fffb032dad
+
+
 ETHERSCAN_API_KEY=ABC123ABC123ABC123ABC123ABC123ABC1
 ROPSTEN_URL=https://eth-ropsten.alchemyapi.io/v2/<YOUR ALCHEMY KEY>
 PRIVATE_KEY=0xabc123abc123abc123abc123abc123abc123abc123abc123abc123abc123abc1

components/ConnectWallet.tsx

@@ -2,18 +2,16 @@ import { providers, ethers } from 'ethers'
 import Head from 'next/head'
 import { useCallback, useEffect, useReducer } from 'react'
 import ConnectWalletButton from '@components/primitives/ConnectWalletButton';
-import { ellipseAddress, getChainData } from '@libraries/blockchain/utilities'
 import { web3Modal, initialState, reducer } from '@libraries/blockchain/walletConnector'
-import WalletConnectProvider from '@walletconnect/web3-provider'
-import WalletLink from 'walletlink'
-import Web3Modal from 'web3modal'
 import { signMessage } from '@libraries/blockchain/signatures'
 
 
 
 export const ConnectWallet = (): JSX.Element => {
   const [state, dispatch] = useReducer(reducer, initialState)
-  const { provider, web3Provider, address, chainId } = state
+  const { provider, web3Provider } = state
+
+
 
   const connect = useCallback(async function() {
     // This is the initial `provider` that is returned when
@@ -30,12 +28,14 @@ export const ConnectWallet = (): JSX.Element => {
 
     const network = await web3Provider.getNetwork()
 
+    console.log(network.chainId);
+
     dispatch({
       type: 'SET_WEB3_PROVIDER',
       provider,
       web3Provider,
       address,
-      chainId: network.chainId,
+      // chainId: network.chainId,
     })
   }, [])
 

components/Nav.tsx

@@ -5,77 +5,45 @@ import navStyles from '@styles/Nav.module.css';
 const Nav = () => {
     return (
         <div className={navStyles.navbar}>
-    <div className={navStyles.menu}>
             <ul className={navStyles.menu}>
                 <li>
-                    <Link href="/">
-
-                        Home
-                    </Link>
+                    <Link href="/">Home</Link>
                 </li>
                 <li>
-                    <Link href="/about">
-
-                        About
-                    </Link>
+                    <Link href="/about">About</Link>
                 </li>
                 <li>
-                    <Link href="/featured">
-
-                        Featured
-                    </Link>
+                    <Link href="/featured">Featured</Link>
                 </li>
                 <li>
-                    <Link href="/market">
-
-                        Marketplace
-                    </Link>
+                    <Link href="/market">Marketplace</Link>
                 </li>
                 <li>
-                    <Link href="/mint">
-
-                        Mint NFTs
-                    </Link>
+                    <Link href="/mint">Mint NFTs</Link>
                 </li>
                 <li>
                     <Link href="/community">Community</Link>
                 </li>
                 <li>
-                    <Link href="/stake">
-
-                        Stake
-                    </Link>
+                    <Link href="/stake">Stake</Link>
                 </li>
                 <li>
                     {/*here they vote on proposals, they get a share of the fees for participasting */}
-                    <Link href="/vote">
-
-                        Vote
-                    </Link>
+                    <Link href="/vote">Vote</Link>
                 </li>
                 <li>
                     {/* where they go to make proposals such as delisting, adding new creators, etc, they get comissions for accepted proposals */}
-                    <Link href="/propose">
-
-                        Propose
-                    </Link>
+                    <Link href="/propose">Propose</Link>
                 </li>
                 <li>
-                    <Link href="/launchpad">
-
-Launchpad
-                    </Link>
+                    <Link href="/launchpad">Launchpad</Link>
                 </li>
-            <li>
-                                        <ConnectWallet></ConnectWallet>
-
-                    </li>
             </ul>
-            </div>
-
-
+            <ul className="flex items-center mr-8">
+                <ConnectWallet></ConnectWallet>
+            </ul>
         </div>
     );
 };
 
-export default Nav
+export default Nav;

components/primitives/ConnectWalletButton.tsx

@@ -14,23 +14,6 @@ function ConnectWalletButton(props) {
       )}
 
       <style jsx>{`
-        main {
-          padding: 5rem 0;
-          text-align: center;
-        }
-        p {
-          margin-top: 0;
-        }
-        .container {
-          padding: 2rem;
-          margin: 0 auto;
-          max-width: 1200px;
-        }
-        .grid {
-          display: grid;
-          grid-template-columns: auto auto;
-          justify-content: space-between;
-        }
         .button {
           padding: 1rem 1.5rem;
           background: ${props.web3Provider ? 'red' : 'green'};
@@ -39,12 +22,6 @@ function ConnectWalletButton(props) {
           color: #fff;
           font-size: 1.2rem;
         }
-        .mb-0 {
-          margin-bottom: 0;
-        }
-        .mb-1 {
-          margin-bottom: 0.25rem;
-        }
       `}</style>
     </>
   );

libraries/blockchain/walletConnector.ts

@@ -21,7 +21,7 @@ const providerOptions = {
     options: {
       appName: 'Coinbase', // Your app name
       networkUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`,
-      chainId: 1,
+      // chainId: 1,
     },
     package: WalletLink,
     connector: async (_, options) => {
@@ -75,8 +75,8 @@ export type ActionType =
 export const initialState: StateType = {
   provider: null,
   web3Provider: null,
-  address: null,
-  chainId: null,
+  address: undefined,
+  chainId: 1,
 }
 
 export function reducer(state: StateType, action: ActionType): StateType {