From b14038bf47a9b3f80cde3fe8c372880dfe0b55a8 Mon Sep 17 00:00:00 2001
From: Matej Poklemba <matejpoklemba@gmail.com>
Date: Tue, 9 Jan 2024 11:35:04 +0100
Subject: [PATCH] Cosmetic changes

---
 .../bridge-zkapp/src/components/ConnectWallet.tsx    | 12 ++++++++++--
 .../rollup/bridge-zkapp/src/components/Navbar.tsx    |  9 +++++++--
 .../src/components/TransactionHistory.tsx            |  1 +
 .../rollup/bridge-zkapp/src/utils/format.ts          |  4 ++--
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/app/zkapps_examples/rollup/bridge-zkapp/src/components/ConnectWallet.tsx b/src/app/zkapps_examples/rollup/bridge-zkapp/src/components/ConnectWallet.tsx
index 442adec25e..de8d769367 100644
--- a/src/app/zkapps_examples/rollup/bridge-zkapp/src/components/ConnectWallet.tsx
+++ b/src/app/zkapps_examples/rollup/bridge-zkapp/src/components/ConnectWallet.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@mui/material";
+import { Button, Typography } from "@mui/material";
 import { useAppStore } from "../configs/store";
 import useConnectWallet from "../hooks/useConnectWallet";
 import { auroLink } from "../utils/constants";
@@ -12,7 +12,15 @@ export default function ConnectWallet() {
       Install wallet
     </Button>
   ) : userPublicKey ? (
-    <Button>{formatAddress(userPublicKey.toBase58())}</Button>
+    <Typography
+      variant="button"
+      sx={(theme) => ({
+        color: theme.palette.primary.main,
+        textTransform: "none",
+      })}
+    >
+      Connected: {formatAddress(userPublicKey.toBase58())}
+    </Typography>
   ) : (
     <Button onClick={connectWallet}>Connect wallet</Button>
   );
diff --git a/src/app/zkapps_examples/rollup/bridge-zkapp/src/components/Navbar.tsx b/src/app/zkapps_examples/rollup/bridge-zkapp/src/components/Navbar.tsx
index b372fa26e5..c2f9cbaef8 100644
--- a/src/app/zkapps_examples/rollup/bridge-zkapp/src/components/Navbar.tsx
+++ b/src/app/zkapps_examples/rollup/bridge-zkapp/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import { AppBar, Button, Container, Stack, Toolbar } from "@mui/material";
+import { AppBar, Container, Stack, Toolbar, Typography } from "@mui/material";
 import ConnectWallet from "./ConnectWallet";
 
 export default function Navbar() {
@@ -7,7 +7,12 @@ export default function Navbar() {
       <AppBar sx={{ bgcolor: "#030909" }}>
         <Container>
           <Toolbar sx={{ gap: 2 }}>
-            <Button variant="text">Zeko bridge</Button>
+            <Typography
+              variant="button"
+              sx={(theme) => ({ color: theme.palette.primary.main })}
+            >
+              Zeko bridge
+            </Typography>
             <Stack sx={{ flexGrow: 1 }} />
             <ConnectWallet />
           </Toolbar>
diff --git a/src/app/zkapps_examples/rollup/bridge-zkapp/src/components/TransactionHistory.tsx b/src/app/zkapps_examples/rollup/bridge-zkapp/src/components/TransactionHistory.tsx
index 613d22fed7..aaf11cf3ea 100644
--- a/src/app/zkapps_examples/rollup/bridge-zkapp/src/components/TransactionHistory.tsx
+++ b/src/app/zkapps_examples/rollup/bridge-zkapp/src/components/TransactionHistory.tsx
@@ -17,6 +17,7 @@ function TransactionItem({ tx }: { tx: Transaction }) {
         <Typography
           variant="caption"
           sx={{
+            alignSelf: "center",
             color:
               tx.status === TransactionStatus.COMPLETE
                 ? "green"
diff --git a/src/app/zkapps_examples/rollup/bridge-zkapp/src/utils/format.ts b/src/app/zkapps_examples/rollup/bridge-zkapp/src/utils/format.ts
index a4bb4fdf66..e64d385c8b 100644
--- a/src/app/zkapps_examples/rollup/bridge-zkapp/src/utils/format.ts
+++ b/src/app/zkapps_examples/rollup/bridge-zkapp/src/utils/format.ts
@@ -73,7 +73,7 @@ export const formatAddress = (
   address: string | undefined
 ): string | undefined => {
   if (address === undefined) return undefined;
-  return `${address.substring(0, 8)}...${address.substring(
-    address.length - 4
+  return `${address.substring(0, 10)}...${address.substring(
+    address.length - 10
   )}`;
 };