From e16092c94dec3bdd79a248b46b40b71b0abb53ea Mon Sep 17 00:00:00 2001
From: Aleksey Bykhun <theisease@gmail.com>
Date: Fri, 17 Jun 2022 14:02:44 +0800
Subject: [PATCH 01/10] add ui components

---
 src/App.tsx                              | 18 ++++++---------
 src/package/components/AddressView.tsx   | 28 +++++++++++++++++++++++
 src/package/components/ConnectWallet.tsx | 29 ++++++++++++++++++++++++
 src/package/index.tsx                    |  9 ++++++--
 4 files changed, 71 insertions(+), 13 deletions(-)
 create mode 100644 src/package/components/AddressView.tsx
 create mode 100644 src/package/components/ConnectWallet.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1e2ac54..1c2ee4a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,28 +1,24 @@
-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} />
+          {/* autoOpen will pop the modal on page load */}
+          <ConnectWallet autoOpen={true} />
 
           <div className="App">
             <header className="App-header">
-              <AddressView />
+              {/* AddressView should be used inside Web3Provider so that it picks up address */}
+              <AddressView isShort={true} />
             </header>
           </div>
         </Web3Provider>
diff --git a/src/package/components/AddressView.tsx b/src/package/components/AddressView.tsx
new file mode 100644
index 0000000..bb18ae2
--- /dev/null
+++ b/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;
diff --git a/src/package/components/ConnectWallet.tsx b/src/package/components/ConnectWallet.tsx
new file mode 100644
index 0000000..56e381b
--- /dev/null
+++ b/src/package/components/ConnectWallet.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import ConnectWeb3Modal from "./ConnectWeb3Modal";
+
+type Props = {
+    autoOpen: boolean;
+    renderButton?: (onClick: () => void) => JSX.Element;
+}
+
+/**
+ * ConnectWallet 
+ * @param param0 - autoOpen - If true, the modal will be opened on page load
+ * @returns {JSX.Element}
+ */
+export const ConnectWallet = ({ autoOpen = false, renderButton }: Props) => {
+
+    const [open, setOpen] = useState(autoOpen);
+
+    return <>
+        <ConnectWeb3Modal open={open} setOpen={setOpen} />
+
+        {renderButton
+            ? renderButton(() => setOpen(true))
+            : <button onClick={() => setOpen(true)}>Connect Wallet</button>
+        }
+
+    </>
+}
+
+export default ConnectWallet;
diff --git a/src/package/index.tsx b/src/package/index.tsx
index 8b6b436..6167429 100644
--- a/src/package/index.tsx
+++ b/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,

From 73877345ed2a1f6b4381353c221b81229d8c45a5 Mon Sep 17 00:00:00 2001
From: Aleksey Bykhun <theisease@gmail.com>
Date: Fri, 17 Jun 2022 14:03:03 +0800
Subject: [PATCH 02/10] v0.3.2-beta

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c6200af..62b1ef8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@buildship/web3-login",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.3.2-beta",
   "description": "UX-focused web3 auth for your React app",
   "author": "Buildship",
   "keywords": [

From dc84b5637a49afc79ea90aabfadd8e3293aa99a9 Mon Sep 17 00:00:00 2001
From: Aleksey Bykhun <theisease@gmail.com>
Date: Fri, 17 Jun 2022 18:28:51 +0800
Subject: [PATCH 03/10] v0.3.2-beta1

---
 package.json                                |  2 +-
 src/App.tsx                                 |  2 +-
 src/package/components/AddressView.tsx      | 12 ++++----
 src/package/components/ConnectWallet.tsx    | 31 +++++++++++++++------
 src/package/components/ConnectWeb3Modal.tsx | 22 ++++++++-------
 5 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 62b1ef8..a3a6ee4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@buildship/web3-login",
   "type": "module",
-  "version": "0.3.2-beta",
+  "version": "0.3.2-beta1",
   "description": "UX-focused web3 auth for your React app",
   "author": "Buildship",
   "keywords": [
diff --git a/src/App.tsx b/src/App.tsx
index 1c2ee4a..f20d5c4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,7 @@ function App() {
 					connectors={defaultConnectors}
         >
           {/* autoOpen will pop the modal on page load */}
-          <ConnectWallet autoOpen={true} />
+          <ConnectWallet autoOpen={true} showDisconnect={false} />
 
           <div className="App">
             <header className="App-header">
diff --git a/src/package/components/AddressView.tsx b/src/package/components/AddressView.tsx
index bb18ae2..63307e6 100644
--- a/src/package/components/AddressView.tsx
+++ b/src/package/components/AddressView.tsx
@@ -1,8 +1,8 @@
-import React from "react";
-import { useWeb3 } from "../";
+import React from "react"
+import { useWeb3 } from "../"
 
 type Props = {
-    isShort: boolean
+    isShort?: boolean
 }
 
 /**
@@ -12,7 +12,7 @@ type Props = {
  * @returns {JSX.Element}
  */
 export const AddressView = ({ isShort = true }: Props): JSX.Element => {
-    const { address } = useWeb3();
+    const { address } = useWeb3()
 
     if (!address) return null
 
@@ -22,7 +22,7 @@ export const AddressView = ({ isShort = true }: Props): JSX.Element => {
         {isShort ? `${address.slice(0, 4)}...${address.slice(-4)}` : address}
     </>
 
-    // return <div>{address ? `Connected to ${address}` : 'Not connected'}</div>;
+    // return <div>{address ? `Connected to ${address}` : 'Not connected'}</div>
 }
 
-export default AddressView;
+export default AddressView
diff --git a/src/package/components/ConnectWallet.tsx b/src/package/components/ConnectWallet.tsx
index 56e381b..5f6d9b1 100644
--- a/src/package/components/ConnectWallet.tsx
+++ b/src/package/components/ConnectWallet.tsx
@@ -1,29 +1,44 @@
-import React, { useState } from "react";
-import ConnectWeb3Modal from "./ConnectWeb3Modal";
+import React, { useState } from "react"
+import { useWeb3 } from "@3rdweb/hooks"
+
+import ConnectWeb3Modal from "./ConnectWeb3Modal"
+
+type ButtonProps = { text: string, onClick: () => void }
 
 type Props = {
-    autoOpen: boolean;
-    renderButton?: (onClick: () => void) => JSX.Element;
+    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, renderButton }: Props) => {
+export const ConnectWallet = ({ autoOpen = false, showDisconnect = false, renderButton }: Props): JSX.Element => {
 
-    const [open, setOpen] = useState(autoOpen);
+    const [open, setOpen] = useState(autoOpen)
+
+    const { disconnectWallet } = useWeb3()
 
     return <>
         <ConnectWeb3Modal open={open} setOpen={setOpen} />
 
         {renderButton
-            ? renderButton(() => setOpen(true))
+            ? renderButton({ text: "Connect Wallet", onClick: () => setOpen(true) })
             : <button onClick={() => setOpen(true)}>Connect Wallet</button>
         }
 
+        {showDisconnect && (
+            renderButton
+                ? renderButton({ text: "Disconnect Wallet", onClick: () => disconnectWallet() })
+                : <button onClick={() => disconnectWallet()}>Disconnect Wallet</button>
+        )}
+
     </>
 }
 
-export default ConnectWallet;
+export default ConnectWallet
diff --git a/src/package/components/ConnectWeb3Modal.tsx b/src/package/components/ConnectWeb3Modal.tsx
index ce54d65..10ea6b7 100644
--- a/src/package/components/ConnectWeb3Modal.tsx
+++ b/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

From c945306cb318306141a326c9e1a2e3420e4d3f5f Mon Sep 17 00:00:00 2001
From: Aleksey Bykhun <theisease@gmail.com>
Date: Fri, 17 Jun 2022 18:30:54 +0800
Subject: [PATCH 04/10] v0.3.2-beta2

---
 package.json                             |  2 +-
 src/package/components/ConnectWallet.tsx | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index a3a6ee4..26ece4f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@buildship/web3-login",
   "type": "module",
-  "version": "0.3.2-beta1",
+  "version": "0.3.2-beta2",
   "description": "UX-focused web3 auth for your React app",
   "author": "Buildship",
   "keywords": [
diff --git a/src/package/components/ConnectWallet.tsx b/src/package/components/ConnectWallet.tsx
index 5f6d9b1..140831e 100644
--- a/src/package/components/ConnectWallet.tsx
+++ b/src/package/components/ConnectWallet.tsx
@@ -22,17 +22,18 @@ export const ConnectWallet = ({ autoOpen = false, showDisconnect = false, render
 
     const [open, setOpen] = useState(autoOpen)
 
-    const { disconnectWallet } = useWeb3()
+    const { address, disconnectWallet } = useWeb3()
 
     return <>
         <ConnectWeb3Modal open={open} setOpen={setOpen} />
 
-        {renderButton
-            ? renderButton({ text: "Connect Wallet", onClick: () => setOpen(true) })
-            : <button onClick={() => setOpen(true)}>Connect Wallet</button>
-        }
+        {!address && (
+            renderButton
+                ? renderButton({ text: "Connect Wallet", onClick: () => setOpen(true) })
+                : <button onClick={() => setOpen(true)}>Connect Wallet</button>
+        )}
 
-        {showDisconnect && (
+        {showDisconnect && address && (
             renderButton
                 ? renderButton({ text: "Disconnect Wallet", onClick: () => disconnectWallet() })
                 : <button onClick={() => disconnectWallet()}>Disconnect Wallet</button>

From 32c5f4ec28a71451bbcd4018dfa81b786634a2e8 Mon Sep 17 00:00:00 2001
From: Aleksey Bykhun <theisease@gmail.com>
Date: Mon, 20 Jun 2022 10:44:37 +0800
Subject: [PATCH 05/10] v0.3.2-beta3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 26ece4f..188890c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@buildship/web3-login",
   "type": "module",
-  "version": "0.3.2-beta2",
+  "version": "0.3.2-beta3",
   "description": "UX-focused web3 auth for your React app",
   "author": "Buildship",
   "keywords": [

From 7cdcd6c9533626670289b94c66fc273dbac51715 Mon Sep 17 00:00:00 2001
From: Aleksey Bykhun <theisease@gmail.com>
Date: Mon, 20 Jun 2022 13:15:12 +0800
Subject: [PATCH 06/10] update examples

---
 README.md   | 24 ++++++++++++++----------
 src/App.tsx | 16 ++++++++++++++--
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 82827cd..d46dbac 100644
--- a/README.md
+++ b/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>
 }
 
diff --git a/src/App.tsx b/src/App.tsx
index f20d5c4..90406f0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,14 +12,26 @@ function App() {
 					supportedChainIds={[1, 4]}
 					connectors={defaultConnectors}
         >
-          {/* autoOpen will pop the modal on page load */}
-          <ConnectWallet autoOpen={true} showDisconnect={false} />
 
           <div className="App">
             <header className="App-header">
               {/* 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>
     );

From fff6061ed9c03265bcd7f7073b58ee7733e83040 Mon Sep 17 00:00:00 2001
From: Aleksey Bykhun <theisease@gmail.com>
Date: Mon, 20 Jun 2022 21:53:54 +0800
Subject: [PATCH 07/10] refactor ConnectWallet as ProfileView

---
 README.md                                |  9 +--
 package.json                             |  1 +
 src/App.tsx                              | 11 +--
 src/package/components/AddressView.tsx   |  1 -
 src/package/components/ConnectWallet.tsx | 45 ------------
 src/package/components/ProfileView.tsx   | 90 ++++++++++++++++++++++++
 src/package/index.tsx                    |  4 +-
 yarn.lock                                |  7 ++
 8 files changed, 106 insertions(+), 62 deletions(-)
 delete mode 100644 src/package/components/ConnectWallet.tsx
 create mode 100644 src/package/components/ProfileView.tsx

diff --git a/README.md b/README.md
index d46dbac..779010c 100644
--- a/README.md
+++ b/README.md
@@ -48,14 +48,11 @@ const App = () => {
         supportedChainIds={[1, 4]}
         connectors={connectors}>
 
-        {/* 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 }) => (
+        <ProfileView autoOpen={false}
+            renderButton={({ children, onClick }) => (
             <button className="my-button-class" onClick={onClick}>
-                {text}
+                {children}
             </button>
             )}
         />
diff --git a/package.json b/package.json
index 188890c..761b5b1 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@3rdweb/hooks": "1.9.0",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.3"
   },
   "peerDependencies": {
diff --git a/src/App.tsx b/src/App.tsx
index 90406f0..ea8480d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Web3Provider, ConnectWallet, AddressView } from "./package";
+import { Web3Provider, ProfileView, AddressView } from "./package";
 import { defaultConnectors } from "./package/connectors";
 import { defaultTheme } from "./package/styles/theme";
 
@@ -15,20 +15,15 @@ function App() {
 
           <div className="App">
             <header className="App-header">
-              {/* 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>
-              )} />
+              <ProfileView autoOpen={false} />
 
             </header>
 
             <div>
 
+              {/* AddressView should be used inside Web3Provider so that it picks up address */}
               Connected address: <AddressView isShort={false} />
 
             </div>
diff --git a/src/package/components/AddressView.tsx b/src/package/components/AddressView.tsx
index 63307e6..79f5854 100644
--- a/src/package/components/AddressView.tsx
+++ b/src/package/components/AddressView.tsx
@@ -22,7 +22,6 @@ export const AddressView = ({ isShort = true }: Props): JSX.Element => {
         {isShort ? `${address.slice(0, 4)}...${address.slice(-4)}` : address}
     </>
 
-    // return <div>{address ? `Connected to ${address}` : 'Not connected'}</div>
 }
 
 export default AddressView
diff --git a/src/package/components/ConnectWallet.tsx b/src/package/components/ConnectWallet.tsx
deleted file mode 100644
index 140831e..0000000
--- a/src/package/components/ConnectWallet.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-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
diff --git a/src/package/components/ProfileView.tsx b/src/package/components/ProfileView.tsx
new file mode 100644
index 0000000..bcae4a7
--- /dev/null
+++ b/src/package/components/ProfileView.tsx
@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react"
+import { useWeb3 } from "@3rdweb/hooks"
+
+import { LogoutOutlined } from "@mui/icons-material"
+import { Box, Button, Typography } from "@mui/material"
+
+import ConnectWeb3Modal from "./ConnectWeb3Modal"
+import AddressView from "./AddressView"
+
+type ButtonProps = {
+    children: JSX.Element
+    onClick: () => void
+}
+
+type Props = {
+    autoOpen: boolean
+    showDisconnect?: boolean
+    renderButton?: (props: ButtonProps) => JSX.Element
+}
+
+const defaultRenderButton = ({ children, onClick }: ButtonProps) => (
+    <Button variant="text" onClick={onClick} sx={{ px: 0, mx: 2, color: "rgba(0,0,0,0.6)" }}>
+        {children}
+    </Button>
+)
+
+/**
+ * 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 ProfileView = ({ autoOpen = false, showDisconnect = true, renderButton = defaultRenderButton }: Props): JSX.Element => {
+
+    const [open, setOpen] = useState(false)
+
+    useEffect(() => {
+        // we do it here instead of default value so that the modal is opened on page load ONLY
+        if (autoOpen) {
+            setOpen(true)
+        }
+    }, [])
+
+    const { address, disconnectWallet } = useWeb3()
+
+    const copyAddress = () => {
+        navigator.clipboard.writeText(address)
+
+        // TODO: show a snackbar
+        window.alert("Address copied to clipboard")
+    }
+
+    return <Box display="flex" alignItems="center">
+        <ConnectWeb3Modal open={open} setOpen={setOpen} />
+
+        {!address && (renderButton({
+            children: <>Connect Wallet</>,
+            onClick: () => setOpen(true),
+        }))}
+
+        {/* <Box > */}
+        {address && <Typography
+            sx={{ py: 3, cursor: "pointer", color: "rgba(0,0,0,0.6)" }}
+            fontWeight={500}
+            onClick={copyAddress}
+        >
+            <AddressView />
+        </Typography>}
+
+        {showDisconnect && address && (renderButton({
+            children: <LogoutOutlined fontSize="small" />,
+            onClick: () => disconnectWallet(),
+        }))}
+
+    </Box>
+}
+
+
+// renderButton
+//     ? renderButton({
+//         children: <LogoutOutlined fontSize="small" />,
+//         onClick: () => disconnectWallet()
+//     })
+//     : <button onClick={() => disconnectWallet()}>
+//         <LogoutOutlined fontSize="small" />
+//     </button>
+// )}
+
+export default ProfileView
diff --git a/src/package/index.tsx b/src/package/index.tsx
index 6167429..d6290c6 100644
--- a/src/package/index.tsx
+++ b/src/package/index.tsx
@@ -3,12 +3,12 @@ import { useWeb3, useSwitchNetwork } from "./hooks";
 import { ConnectWeb3Modal } from "./components/ConnectWeb3Modal";
 import { IconButton } from "./components/IconButton";
 import { Web3Provider } from "./components/Web3Provider";
-import ConnectWallet from "./components/ConnectWallet";
+import ProfileView from "./components/ProfileView";
 import AddressView from "./components/AddressView";
 
 export { 
   ConnectWeb3Modal,
-  ConnectWallet,
+  ProfileView,
   AddressView,
   Web3Provider, 
   useWeb3, 
diff --git a/yarn.lock b/yarn.lock
index e776499..f2293e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1882,6 +1882,13 @@
     prop-types "^15.8.1"
     react-is "^17.0.2"
 
+"@mui/icons-material@^5.8.4":
+  version "5.8.4"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.8.4.tgz#3f2907c9f8f5ce4d754cb8fb4b68b5a1abf4d095"
+  integrity sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+
 "@mui/material@^5.8.3":
   version "5.8.3"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.8.3.tgz#86681d14c1a119d1d9b6b981c864736d075d095f"

From 623f96fca2791110b2b8ffa1b307ec39a304c333 Mon Sep 17 00:00:00 2001
From: Aleksey Bykhun <theisease@gmail.com>
Date: Mon, 20 Jun 2022 21:56:37 +0800
Subject: [PATCH 08/10] profileview: fix styling

---
 src/package/components/ProfileView.tsx | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/package/components/ProfileView.tsx b/src/package/components/ProfileView.tsx
index bcae4a7..a600919 100644
--- a/src/package/components/ProfileView.tsx
+++ b/src/package/components/ProfileView.tsx
@@ -19,7 +19,7 @@ type Props = {
 }
 
 const defaultRenderButton = ({ children, onClick }: ButtonProps) => (
-    <Button variant="text" onClick={onClick} sx={{ px: 0, mx: 2, color: "rgba(0,0,0,0.6)" }}>
+    <Button variant="text" onClick={onClick} sx={{ px: 3, mx: 2 }}>
         {children}
     </Button>
 )
@@ -61,7 +61,7 @@ export const ProfileView = ({ autoOpen = false, showDisconnect = true, renderBut
 
         {/* <Box > */}
         {address && <Typography
-            sx={{ py: 3, cursor: "pointer", color: "rgba(0,0,0,0.6)" }}
+            sx={{ cursor: "pointer", color: "rgba(0,0,0,0.6)" }}
             fontWeight={500}
             onClick={copyAddress}
         >
@@ -69,22 +69,11 @@ export const ProfileView = ({ autoOpen = false, showDisconnect = true, renderBut
         </Typography>}
 
         {showDisconnect && address && (renderButton({
-            children: <LogoutOutlined fontSize="small" />,
+            children: <LogoutOutlined />,
             onClick: () => disconnectWallet(),
         }))}
 
     </Box>
 }
 
-
-// renderButton
-//     ? renderButton({
-//         children: <LogoutOutlined fontSize="small" />,
-//         onClick: () => disconnectWallet()
-//     })
-//     : <button onClick={() => disconnectWallet()}>
-//         <LogoutOutlined fontSize="small" />
-//     </button>
-// )}
-
 export default ProfileView

From ff80146445c8882480cc8274d7394d72a39af55b Mon Sep 17 00:00:00 2001
From: Aleksey Bykhun <theisease@gmail.com>
Date: Mon, 20 Jun 2022 21:58:41 +0800
Subject: [PATCH 09/10] fix use same color

---
 src/package/components/ProfileView.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/package/components/ProfileView.tsx b/src/package/components/ProfileView.tsx
index a600919..de03937 100644
--- a/src/package/components/ProfileView.tsx
+++ b/src/package/components/ProfileView.tsx
@@ -19,7 +19,7 @@ type Props = {
 }
 
 const defaultRenderButton = ({ children, onClick }: ButtonProps) => (
-    <Button variant="text" onClick={onClick} sx={{ px: 3, mx: 2 }}>
+    <Button variant="text" onClick={onClick} sx={{ px: 3, mx: 2, color: "rgba(0,0,0,0.6)" }}>
         {children}
     </Button>
 )
@@ -51,7 +51,7 @@ export const ProfileView = ({ autoOpen = false, showDisconnect = true, renderBut
         window.alert("Address copied to clipboard")
     }
 
-    return <Box display="flex" alignItems="center">
+    return <Box display="flex" alignItems="center" sx={{ color: "rgba(0,0,0,0.6)" }}>
         <ConnectWeb3Modal open={open} setOpen={setOpen} />
 
         {!address && (renderButton({
@@ -61,7 +61,7 @@ export const ProfileView = ({ autoOpen = false, showDisconnect = true, renderBut
 
         {/* <Box > */}
         {address && <Typography
-            sx={{ cursor: "pointer", color: "rgba(0,0,0,0.6)" }}
+            sx={{ cursor: "pointer" }}
             fontWeight={500}
             onClick={copyAddress}
         >

From 9adef2d8c31e66a51a482607a5751caf28336339 Mon Sep 17 00:00:00 2001
From: Aleksey Bykhun <theisease@gmail.com>
Date: Mon, 20 Jun 2022 22:07:21 +0800
Subject: [PATCH 10/10] v0.3.2-beta4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 761b5b1..3eac842 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@buildship/web3-login",
   "type": "module",
-  "version": "0.3.2-beta3",
+  "version": "0.3.2-beta4",
   "description": "UX-focused web3 auth for your React app",
   "author": "Buildship",
   "keywords": [