From aa1d647bde17d9fae9d2ceb90f4c3fff545c940e Mon Sep 17 00:00:00 2001
From: Adam Goth <adamgoth@gmail.com>
Date: Wed, 15 May 2024 22:27:25 +0200
Subject: [PATCH] Add network, address, balance when connected

---
 .../buttons/connect-wallet-button.tsx         | 17 +++++++++-----
 .../components/modals/metamask-modal.tsx      | 22 +++++++++++++------
 src/frontend/views/chat.tsx                   | 10 +++++++--
 3 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/frontend/components/buttons/connect-wallet-button.tsx b/src/frontend/components/buttons/connect-wallet-button.tsx
index f8b3721..c8da6bc 100644
--- a/src/frontend/components/buttons/connect-wallet-button.tsx
+++ b/src/frontend/components/buttons/connect-wallet-button.tsx
@@ -4,10 +4,10 @@ import Styled from 'styled-components';
 
 // img
 import wallet from './../../assets/images/wallet.png';
+import { truncateString } from '../../helpers';
+import { useSDK } from '@metamask/sdk-react';
 
 export interface Props {
-  connected: boolean;
-  connecting: boolean;
   onClick: () => void;
 }
 
@@ -17,12 +17,19 @@ type BadgeProps = {
 };
 
 export default forwardRef<HTMLDivElement>((props: Props, ref) => {
-  const { connected, connecting, onClick } = props;
+  const { connected, account } = useSDK();
+  const { onClick } = props;
 
-  return (
+  return !connected ? (
     <ConnectWalletButton.Wrapper onClick={onClick} ref={ref}>
       <ConnectWalletButton.Logo src={wallet} />
-      <ConnectWalletButton.Text>{connected ? 'connected' : 'connect'}</ConnectWalletButton.Text>
+      <ConnectWalletButton.Text>{'connect'}</ConnectWalletButton.Text>
+    </ConnectWalletButton.Wrapper>
+  ) : (
+    <ConnectWalletButton.Wrapper onClick={onClick} ref={ref}>
+      <ConnectWalletButton.Logo src={wallet} />
+      <ConnectWalletButton.Text>{truncateString(account ?? '')}</ConnectWalletButton.Text>
+      {/* <ConnectWalletButton.Text>ETH: {formatEther(balance ?? '0')}</ConnectWalletButton.Text> */}
     </ConnectWalletButton.Wrapper>
   );
 });
diff --git a/src/frontend/components/modals/metamask-modal.tsx b/src/frontend/components/modals/metamask-modal.tsx
index ad4cb96..d9f9130 100644
--- a/src/frontend/components/modals/metamask-modal.tsx
+++ b/src/frontend/components/modals/metamask-modal.tsx
@@ -7,13 +7,14 @@ import { truncateString } from './../../helpers';
 
 // img
 import copyIcon from './../../assets/images/copy-link.png';
+import { useSDK } from '@metamask/sdk-react';
+import { formatEther } from 'ethers';
 
-export interface Props {
-  account: string;
-}
+export interface Props {}
 
 const MetaMaskModal = forwardRef<HTMLDivElement>((props: Props, ref) => {
-  const { account } = props;
+  const { account, balance } = useSDK();
+  if (!account) return null;
 
   const isClipboardAvailable = navigator.clipboard && navigator.clipboard.writeText !== undefined;
 
@@ -30,10 +31,17 @@ const MetaMaskModal = forwardRef<HTMLDivElement>((props: Props, ref) => {
             />
           </MetaMaskRoot.Row>
         ) : (
-          <MetaMaskRoot.Value>{truncateString(account)}</MetaMaskRoot.Value>
+          <MetaMaskRoot.Row>
+            <MetaMaskRoot.Value>{truncateString(account)}</MetaMaskRoot.Value>
+          </MetaMaskRoot.Row>
         )}
       </MetaMaskRoot.Group>
-      <MetaMaskRoot.Group></MetaMaskRoot.Group>
+      <MetaMaskRoot.Group>
+        <MetaMaskRoot.Label>ETH balance</MetaMaskRoot.Label>
+        <MetaMaskRoot.Row>
+          <MetaMaskRoot.Value>{formatEther(balance ?? '0')}</MetaMaskRoot.Value>
+        </MetaMaskRoot.Row>
+      </MetaMaskRoot.Group>
     </MetaMaskRoot.Layout>
   );
 });
@@ -43,7 +51,7 @@ const MetaMaskRoot = {
     display: flex;
     flex-direction: column;
     width: 250px;
-    height: 70px;
+    height: 100px;
     border-radius: 10px;
     background: ${(props) => props.theme.colors.core};
     border: 5px solid ${(props) => props.theme.colors.hunter};
diff --git a/src/frontend/views/chat.tsx b/src/frontend/views/chat.tsx
index 812d9de..f27359c 100644
--- a/src/frontend/views/chat.tsx
+++ b/src/frontend/views/chat.tsx
@@ -26,7 +26,7 @@ const ChatView = (): JSX.Element => {
   const [isOllamaBeingPolled, setIsOllamaBeingPolled] = useState(false);
   const { ready, sdk, connected, connecting, provider, chainId, account, balance } = useSDK();
   const ethInWei = '1000000000000000000';
-  const [selectedNetwork, setSelectedNetwork] = useState('');
+  const [selectedNetwork, setSelectedNetwork] = useState(chainId);
 
   const chatMainRef = useRef<HTMLDivElement>(null);
   const chatInputRef = useRef<HTMLInputElement>(null);
@@ -72,6 +72,12 @@ const ChatView = (): JSX.Element => {
     }
   }, [dialogueEntries]);
 
+  useEffect(() => {
+    if (chainId) {
+      setSelectedNetwork(chainId);
+    }
+  }, [chainId]);
+
   //Function to update dialogue entries
   const updateDialogueEntries = (question: string, message: string) => {
     setCurrentQuestion(undefined);
@@ -234,7 +240,7 @@ const ChatView = (): JSX.Element => {
 
   return (
     <Chat.Layout>
-      <Chat.Dropdown onChange={handleNetworkChange} value="">
+      <Chat.Dropdown onChange={handleNetworkChange} value={selectedNetwork}>
         <option value="">Select a network</option>
         <option value="0x1">Ethereum</option>
         <option value="0xaa36a7">Sepolia</option>