components: add ConnectWalletButton, AddressView

README.md

@@ -22,7 +22,7 @@ npm i @buildship/web3-login
 Use it in your code:
 
 ```javascript
-import { Web3Provider, ConnectWeb3Modal, useWeb3 } from "@buildship/web3-login";
+import { Web3Provider, ConnectWallet, AddressView } from "@buildship/web3-login";
 
 // Wallets that you want to support
 const connectors = {
@@ -43,19 +43,23 @@ const connectors = {
 
 const App = () => {
     const { address } = useWeb3()
-    const [isOpen, setIsOpen] = useState(false)
-
+
     return <Web3Provider
         supportedChainIds={[1, 4]}
         connectors={connectors}>
-            Connected address: {address}    
-            <button onClick={() => setIsOpen(true)}>
-              Connect wallet
+
+        {/* AddressView should be used inside Web3Provider so that it picks up address */}
+        Connected address: <AddressView isShort={true} />
+
+        {/* autoOpen will pop the modal on page load */}
+        <ConnectWallet autoOpen={false}
+            renderButton={({ text, onClick }) => (
+            <button className="my-button-class" onClick={onClick}>
+                {text}
             </button>
-            <ConnectWeb3Modal 
-              open={isOpen} 
-              setOpen={setIsOpen}
-            /> 
+            )}
+        />
+
     </Web3Provider>
 }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@buildship/web3-login",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.3.2-beta3",
   "description": "UX-focused web3 auth for your React app",
   "author": "Buildship",
   "keywords": [

src/App.tsx

@@ -1,29 +1,37 @@
-import React, { useState } from 'react';
-import './App.css';
-import { useWeb3, ConnectWeb3Modal, Web3Provider } from "./package";
+import React from 'react';
+import { Web3Provider, ConnectWallet, AddressView } from "./package";
 import { defaultConnectors } from "./package/connectors";
 import { defaultTheme } from "./package/styles/theme";
 
-const AddressView = () => {
-  const { address } = useWeb3();
+import './App.css';
 
-  return <div>{address ? `Connected to ${address}` : 'Not connected'}</div>;
-}
 function App() {
-    const [open, setOpen] = useState(true);
-
     return (
         <Web3Provider
 					theme={defaultTheme}
 					supportedChainIds={[1, 4]}
 					connectors={defaultConnectors}
         >
-          <ConnectWeb3Modal open={open} setOpen={setOpen} />
 
           <div className="App">
             <header className="App-header">
-              <AddressView />
+              {/* AddressView should be used inside Web3Provider so that it picks up address */}
+              <AddressView isShort={true} />
+
+              {/* autoOpen will pop the modal on page load */}
+              <ConnectWallet autoOpen={false} renderButton={({ text, onClick }) => (
+                <button className="my-button-class" onClick={onClick}>
+                  {text}
+                </button>
+              )} />
+
             </header>
+
+            <div>
+
+              Connected address: <AddressView isShort={false} />
+
+            </div>
           </div>
         </Web3Provider>
     );

src/package/components/AddressView.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import { useWeb3 } from "../"
+
+type Props = {
+    isShort?: boolean
+}
+
+/**
+ * AddressView is used to display the current address.
+ * It should be used inside Web3Provider so that it picks up address
+ * @param isShort - If true, the address is displayed in short format: 0xff...abcd
+ * @returns {JSX.Element}
+ */
+export const AddressView = ({ isShort = true }: Props): JSX.Element => {
+    const { address } = useWeb3()
+
+    if (!address) return null
+
+    // TODO: parse ENS here
+
+    return <>
+        {isShort ? `${address.slice(0, 4)}...${address.slice(-4)}` : address}
+    </>
+
+    // return <div>{address ? `Connected to ${address}` : 'Not connected'}</div>
+}
+
+export default AddressView

src/package/components/ConnectWallet.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react"
+import { useWeb3 } from "@3rdweb/hooks"
+
+import ConnectWeb3Modal from "./ConnectWeb3Modal"
+
+type ButtonProps = { text: string, onClick: () => void }
+
+type Props = {
+    autoOpen: boolean
+    showDisconnect?: boolean
+    renderButton?: (props: ButtonProps) => JSX.Element
+}
+
+/**
+ * ConnectWallet 
+ * @param param0 - autoOpen - If true, the modal will be opened on page load
+ * @param param0 - showDisconnect - If true, a button will be shown to disconnect
+ * @param param0 - renderButton - If provided, you can control how a button is rendered
+ * @returns {JSX.Element}
+ */
+export const ConnectWallet = ({ autoOpen = false, showDisconnect = false, renderButton }: Props): JSX.Element => {
+
+    const [open, setOpen] = useState(autoOpen)
+
+    const { address, disconnectWallet } = useWeb3()
+
+    return <>
+        <ConnectWeb3Modal open={open} setOpen={setOpen} />
+
+        {!address && (
+            renderButton
+                ? renderButton({ text: "Connect Wallet", onClick: () => setOpen(true) })
+                : <button onClick={() => setOpen(true)}>Connect Wallet</button>
+        )}
+
+        {showDisconnect && address && (
+            renderButton
+                ? renderButton({ text: "Disconnect Wallet", onClick: () => disconnectWallet() })
+                : <button onClick={() => disconnectWallet()}>Disconnect Wallet</button>
+        )}
+
+    </>
+}
+
+export default ConnectWallet

src/package/components/ConnectWeb3Modal.tsx

@@ -1,11 +1,13 @@
-import React, { useState } from "react";
-import { Modal } from "./Modal";
-import { Typography } from "@mui/material";
-import styles from "./Modal/Modal.module.css"
-import { ConnectButton } from "./ConnectButton";
+import React, { useState } from "react"
+import { Typography } from "@mui/material"
 import { useWeb3 } from "@3rdweb/hooks"
-import { MagicEmailModal } from "./MagicEmailModal";
-import { connectorsMetadata } from "../connectors";
+
+import { MagicEmailModal } from "./MagicEmailModal"
+import { ConnectButton } from "./ConnectButton"
+import { Modal } from "./Modal"
+import styles from "./Modal/Modal.module.css"
+
+import { connectorsMetadata } from "../connectors"
 
 export const ConnectWeb3Modal = ({ open, setOpen }) => {
   const { connectWallet } = useWeb3()
@@ -19,7 +21,7 @@ export const ConnectWeb3Modal = ({ open, setOpen }) => {
     connectWallet(connector).then(() => {
       setOpen(false)
     })
-  };
+  }
 
 
   if (selectedConnector === "magic") {
@@ -28,7 +30,7 @@ export const ConnectWeb3Modal = ({ open, setOpen }) => {
         open={true}
         setSelectedConnector={setSelectedConnector}
       />
-    );
+    )
   }
 
   return (
@@ -55,7 +57,7 @@ export const ConnectWeb3Modal = ({ open, setOpen }) => {
         ))}
       </div>
     </Modal>
-  );
+  )
 }
 
 export default ConnectWeb3Modal

src/package/index.tsx

@@ -1,10 +1,15 @@
+import { useWeb3, useSwitchNetwork } from "./hooks";
+
 import { ConnectWeb3Modal } from "./components/ConnectWeb3Modal";
 import { IconButton } from "./components/IconButton";
 import { Web3Provider } from "./components/Web3Provider";
-import { useWeb3, useSwitchNetwork } from "./hooks";
+import ConnectWallet from "./components/ConnectWallet";
+import AddressView from "./components/AddressView";
 
 export { 
-  ConnectWeb3Modal, 
+  ConnectWeb3Modal,
+  ConnectWallet,
+  AddressView,
   Web3Provider, 
   useWeb3, 
   useSwitchNetwork,