Merge pull request #16 from aryanbhasin/master

Closes PR#15 (Adds Joseph's WalletConnect code)
GrantStenger · Apr 29, 2022 · 609ba29 · 609ba29 · vercel · Apr 29, 2022
2 parents 8e18c2c + fcbc4ef
commit 609ba29
Show file tree

Hide file tree

Showing 8 changed files with 676 additions and 364 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -30,7 +30,7 @@
     "buffer": "^6.0.3",
     "compression": "1.7.4",
     "cross-env": "^7.0.3",
-    "ethers": "^5.5.4",
+    "ethers": "^5.6.4",
     "events": "^3.3.0",
     "express": "4.17.2",
     "formik": "^2.2.9",
@@ -44,7 +44,7 @@
     "stream-browserify": "^3.0.0",
     "ts-node": "^10.5.0",
     "util": "^0.12.4",
-    "wagmi": "^0.2.12"
+    "wagmi": "^0.3.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.2",

diff --git a/frontend/src/client/components/ContractCreator.tsx b/frontend/src/client/components/ContractCreator.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { useAccount, useConnect } from "wagmi";
+import { useAccount, useConnect, useDisconnect, useEnsAvatar, useEnsName } from "wagmi";
 import { Formik, Field, useFormik, useFormikContext } from 'formik';
 import { getNFTs, getNFTMetadata } from "../lib/web3";
 import { GetNftMetadataResponse } from "@alch/alchemy-web3";
@@ -141,10 +141,11 @@ const SelectNFTByAddress = () => {
 }
 
 export const ContractCreator = () => {
-  const [{ data, error }, connect] = useConnect()
-  const [{ data: accountData }, disconnect] = useAccount({
-    fetchEns: true,
-  });
+  const { data: accountData } = useAccount();
+  const { data: ensName } = useEnsName({ address: accountData?.address })
+  const { data: ensAvatar } = useEnsAvatar({ addressOrName: accountData?.address });
+  const { connect, connectors, error, isConnecting, pendingConnector } = useConnect();
+  const { disconnect } = useDisconnect();
 
   return (
     <Formik
@@ -163,21 +164,21 @@ export const ContractCreator = () => {
             {accountData ? (  
               <>
                 <div>
-                  {accountData.ens && <img src={accountData.ens?.avatar!} alt="ENS Avatar" />}
+                  {ensName && <img src={ensAvatar!} alt="ENS Avatar" />}
                   <div>Connected to <span className="font-bold">{accountData.connector?.name}</span></div>
                   <div>
-                    {accountData.ens?.name
-                      ? `${accountData.ens?.name} (${accountData.address})`
+                    {ensName
+                      ? `${ensName} (${accountData.address})`
                       : accountData.address}
                   </div>
                 </div>
-                <button onClick={disconnect} className="_button">Disconnect</button>
+                <button onClick={() => disconnect()} className="_button">Disconnect</button>
               </>
             ) : (
               <>
                 <h2 className="text-xl font-bold">Select a wallet</h2>
                 <div className="space-y-2">
-                  {data.connectors.map((connector) => (
+                  {connectors.map((connector) => (
                     <button
                       disabled={!connector.ready}
                       key={connector.id}
@@ -194,7 +195,7 @@ export const ContractCreator = () => {
             )}
           </div>
           {/* Module #2: Select Mode */}
-          {data.connected ? (
+          {accountData ? (
             <div className="_card max-w-120 space-y-4">
               <h2 className="text-xl font-bold">I want to...</h2>
               <div className="space-x-2">
@@ -215,7 +216,7 @@ export const ContractCreator = () => {
               </div>
             </div>
           ) : null}
-          {data.connected && f.values.mode === "BORROW" ? (
+          {accountData && f.values.mode === "BORROW" ? (
             <div className="_card max-w-120 space-y-4">
               <h2 className="text-xl font-bold">Select NFT</h2>
               <SelectNFTByAddress />

diff --git a/frontend/src/client/components/Navbar.tsx b/frontend/src/client/components/Navbar.tsx
@@ -1,8 +1,15 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import { useAccount, useConnect, useDisconnect, useEnsAvatar, useEnsName, Connector } from 'wagmi'
+import { InjectedConnector } from 'wagmi/connectors/injected'
 import nerpLogo from "../../../static/nerpLogoWhite.png";
 
 export const Navbar = () => {
+  const { data: accountData } = useAccount();
+  const { data: ensName } = useEnsName({ address: accountData?.address })
+  const { connect, connectors, error, isConnecting, pendingConnector } = useConnect();
+  const { disconnect } = useDisconnect();
+
   return (
     <header className={"justify-center items-center bg-indigo-400 w-full"}>
       <div className="container flex flex-wrap justify-between items-center mx-auto">
@@ -24,9 +31,43 @@ export const Navbar = () => {
           <div className="text-white hover:text-indigo-100 font-bold py-2 pl-4 pr-10">
             <Link to="/about">About</Link>
           </div>
-          <button className="float-right bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
-            Connect Wallet
-          </button>
+
+          {/* Wallet connection. */}
+          {error && <div>error.message</div>}
+          {accountData
+            ? <>
+                <div className="text-black font-bold py-2 pl-4 pr-10">
+                  {ensName
+                  ? <div>{ensName}</div>
+                  : <div>{accountData.address?.substring(0, 8)}...</div>
+                  }
+                </div>
+                <div>
+                  <button
+                    className="bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded"
+                    onClick={() => disconnect()}
+                  >
+                    Disconnect
+                  </button>
+                </div>
+              </>
+            /* All the connection buttons (only show the ones that are ready to be used). */
+            : <div>
+              {connectors.filter((connector) => connector.ready).map((connector) => (
+                <button
+                  className="bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded"
+                  key={connector.id}
+                  onClick={() => connect(connector)}
+                >
+                  {connector.name}
+                  {!connector.ready && ' (unsupported)'}
+                  {isConnecting &&
+                    connector.id === pendingConnector?.id &&
+                    ' (connecting)'}
+                </button>
+              ))}
+            </div>
+          }
         </div>
       </div>
     </header>

diff --git a/frontend/src/client/components/WalletProvider.tsx b/frontend/src/client/components/WalletProvider.tsx
@@ -1,8 +1,7 @@
 import React, { FC } from "react";
-import { Provider, chain, defaultChains } from "wagmi";
+import { Provider, createClient, chain, defaultChains } from "wagmi";
 import { InjectedConnector } from 'wagmi/connectors/injected'
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
-import { WalletLinkConnector } from 'wagmi/connectors/walletLink'
 
 // API key for Ethereum node
 // Two popular services are Infura (infura.io) and Alchemy (alchemy.com)
@@ -33,19 +32,26 @@ const connectors = ({ chainId } : { chainId?: number }) => {
       },
     }),
     // WalletLink (coinbase wallet, etc.)
+    /*
     new WalletLinkConnector({
       options: {
         appName: 'n3rp',
         jsonRpcUrl: `${rpcUrl}/${infuraId}`,
       },
     }),
+    */
   ]
 }
 
+const client = createClient({
+  autoConnect: true,
+  connectors: connectors
+});
+
 const WalletProvider : FC = ({ children }) => (
-  <Provider autoConnect={true} connectors={connectors}>
+  <Provider client={client}>
     {children}
   </Provider>
 );
 
-export default WalletProvider;
+export default WalletProvider;
diff --git a/frontend/src/client/pages/About.tsx b/frontend/src/client/pages/About.tsx
@@ -57,8 +57,8 @@ const MainContent = () => {
         Get started by
       </p>
       <div>
-        <Link to="/create" className="bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">Listing an NFT</Link>
-        <Link to="/find" className="ml-4 bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">Exploring Current Rentals</Link>
+        <Link to="/list" className="bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">Listing an NFT</Link>
+        <Link to="/explore" className="ml-4 bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">Exploring Current Rentals</Link>
       </div>
     </div>
   );

diff --git a/frontend/src/client/pages/Main.tsx b/frontend/src/client/pages/Main.tsx
@@ -24,19 +24,16 @@ const Main = () => {
             Want to borrow someone else's NFT to go to a party? 
           </p>
           <div className="mt-3 text-base text-slate-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
-            <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded">
-              Connect Your Wallet
-            </button>
-            <span>&nbsp; and get started!</span>
+            <span>Connect Your Wallet and get started!</span>
           </div>
           <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
             <div className="rounded-md shadow">
-              <Link to="/create" className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
+              <Link to="/list" className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
                 List a rental now
               </Link>
             </div>
             <div className="mt-3 sm:mt-0 sm:ml-3">
-              <Link to="/find" className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
+              <Link to="/explore" className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
                 Explore current rentals
               </Link>
             </div>

diff --git a/frontend/src/client/pages/Rentals.tsx b/frontend/src/client/pages/Rentals.tsx
@@ -23,7 +23,7 @@ const MyListingsView = () => {
             {/* TODO: Check if user has listed NFTs */}
             <p>You haven't listed any NFTs!</p>
             <div>
-                <Link to="/create" className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-8 py-3 rounded">List a Rental</Link>
+                <Link to="/list" className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-8 py-3 rounded">List a Rental</Link>
             </div>
         </div>
     );
@@ -36,7 +36,7 @@ const MyRentalsView = () => {
             {/* TODO: Check if user has rented NFTs */}
             <p>You haven't rented any NFTs!</p>
             <div>
-                <Link to="/find" className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-8 py-3 rounded">Explore Current Rentals!</Link>
+                <Link to="/explore" className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-8 py-3 rounded">Explore Current Rentals!</Link>
             </div>
         </div>
     );