Add wallet login

src/components/AppBar/AppBar.tsx

@@ -14,6 +14,7 @@ import LogsIcon from "../../assets/icons/logs.svg?react";
 import HostIcon from "../../assets/icons/host.svg?react";
 import SettingsIcon from "../../assets/icons/settings.svg?react";
 import NetworkFlashIcon from "../../assets/icons/flash.svg?react";
+import { WalletConnect } from "../WalletLogin/WalletLogin";
 
 type Props = {
   onIconClick: () => void;
@@ -76,6 +77,7 @@ export function AppBar({ onIconClick }: Props) {
           </div>
         </div>
         <aside className="row gap">
+          <WalletConnect></WalletConnect>
           <div className="row gap">
             <NetworkFlashIcon />
             <span>Network</span>

src/components/AppBar/appBar.css

@@ -82,7 +82,7 @@
       }
     }
 
-    div:last-child {
+    > div:last-child {
       cursor: pointer;
     }
   }

src/components/WalletLogin/WalletLogin.css

@@ -0,0 +1,55 @@
+.wallet-login {
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  background-color: #252525;
+
+  div {
+    > p {
+      font-family: Inter;
+      font-size: 8px;
+      font-weight: 700;
+      text-transform: uppercase;
+      color: #6e6e6e;
+      display: block;
+      font-size: 10px;
+    }
+  }
+
+  var {
+    font-family: Inter;
+    font-size: 12px;
+    font-weight: 700;
+    color: #ffffff99;
+    font-style: normal;
+    font-size: 16px;
+  }
+
+  footer {
+    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 32px;
+
+    p {
+      font-family: Inter;
+      font-size: 10px;
+      font-weight: 700;
+      line-height: 10px;
+      text-align: left;
+      color: #3ee089;
+      font-style: normal;
+    }
+
+    a {
+      font-family: Inter;
+      font-size: 10px;
+      font-weight: 700;
+      line-height: 10px;
+      color: #6e6e6e;
+      cursor: pointer;
+    }
+  }
+}

src/components/WalletLogin/WalletLogin.tsx

@@ -0,0 +1,20 @@
+import { Strings } from "../../utils/strings";
+import "./WalletLogin.css";
+
+export function WalletConnect() {
+  return (
+    <div className="wallet-login">
+      <img src="/img/wallet-login.png" width={48} height={48} />
+      <div>
+        <p>Mainnet</p>
+        <var>
+          {Strings.shortId("0x5B3D1D5D5C5D5D5D5D5D5D5D5D5D5D5D5D5D5D5D")}
+        </var>
+        <footer>
+          <p>Connected</p>
+          <a>Disconnect</a>
+        </footer>
+      </div>
+    </div>
+  );
+}