Pedro/fe tweaks (#1564)

* Tweaks

* icons and cleanups

integration/manualtests/tx_test.go

@@ -34,7 +34,7 @@ const (
 // Testnet values used for quick debugging:
 // l1 host: testnet-eth2network.uksouth.cloudapp.azure.com
 // l1 port: 9000
-// l2 host: testnet.obscu.ro
+// l2 host: erpc.testnet.obscu.ro
 // l2 port: 81
 // l2wallet: 8dfb8083da6275ae3e4f41e3e8a8c19d028d32c9247e24530933782f2a05035b -> 0xA58C60cc047592DE97BF1E8d2f225Fc5D959De77
 
@@ -48,10 +48,10 @@ var (
 
 	l2Wallet = wallet.NewInMemoryWalletFromConfig(
 		"4bfe14725e685901c062ccd4e220c61cf9c189897b6c78bd18d7f51291b2b8f8",
-		443,
+		777,
 		gethlog.New())
-	l2Host = "localhost"
-	l2Port = 43900
+	l2Host = "erpc.testnet.obscu.ro"
+	l2Port = 81
 )
 
 func TestL1IssueContractInteractWaitReceipt(t *testing.T) {
@@ -327,8 +327,9 @@ func TestL2IssueTxWaitReceipt(t *testing.T) {
 	require.NoError(t, err)
 
 	if balance.Cmp(big.NewInt(0)) <= 0 {
-		t.Errorf("not enough balance: has %s has %s obx", l2Wallet.Address().Hex(), balance.String())
+		t.Fatalf("not enough balance: has %s has %s obx", l2Wallet.Address().Hex(), balance.String())
 	}
+	fmt.Println("balance: ", balance.String())
 
 	toAddr := datagenerator.RandomAddress()
 	nonce, err := authClient.NonceAt(ctx, nil)

tools/obscuroscan_v2/frontend/src/App.vue

@@ -36,14 +36,6 @@ export default {
 </script>
 
 <style scoped>
-.nav-bar-header {
-  background:black;
-  min-height: 40vh;
-}
-
-.main-content {
-  margin-top: -35vh;
-}
 
 .bot-bar {
   background:black;

tools/obscuroscan_v2/frontend/src/components/MetaMaskConnectButton.vue

@@ -1,5 +1,8 @@
 <template>
-  <button @click="connectMetamask">Connect to Metamask</button>
+  <el-button @click="connectMetamask" size="large" >
+    <img src="@/assets/imgs/icon_metamask.png" alt="Connect with MetaMask" class="metamask-icon" />
+    Connect with MetaMask
+  </el-button>
 </template>
 
 <script>
@@ -40,5 +43,10 @@ export default {
 </script>
 
 <style scoped>
-/* Add your styles here */
+.metamask-icon {
+  width: 24px;       /* Set desired width */
+  height: 24px;      /* Set desired height */
+  object-fit: cover; /* Ensure image content is not distorted */
+  margin-right: 8px; /* Optional space between the icon and the text */
+}
 </style>

tools/obscuroscan_v2/frontend/src/components/PublicTxDataGrid.vue

@@ -1,7 +1,7 @@
 <template>
   <el-card class="fill-width">
     <el-table  height="60vh" :data="publicTransactionsData">
-      <el-table-column prop="BatchHeight" label="BatchHeight" width="180" />
+      <el-table-column prop="BatchHeight" label="Batch Height" width="180" />
       <el-table-column prop="Finality" label="Finality" width="180" />
       <el-table-column prop="TransactionHash" label="Tx Hash"  />
     </el-table>

tools/obscuroscan_v2/frontend/src/components/RotatingBatchesItem.vue

@@ -1,13 +1,12 @@
 <template>
-  <el-card class="centered-container">
-  <div class="slider-container">
-    <div class="slider-content" :class="{ 'slide-out': isAnimating }">
-      <el-card v-for="card in displayedCards" :key="card.hash" class="card-content">
-        <h3>Height: {{ card.number }}</h3>
+  <el-card class="centered-container" shadow="never" style="border-radius: 20px;">
+  <div class="slider-container" style="width: 100%;">
+    <div class="slider-content" :class="{ 'slide-out': isAnimating }" >
+      <el-card v-for="card in displayedCards" :key="card.hash" class="card-content box">
+        <h3 class="header-text" >Batch: {{ card.number }}</h3>
         <p>&nbsp;</p>
         <h5><ShortenedHash :hash="card.hash" /></h5>
         <h5><Timestamp :unixTimestampSeconds="Number(card.timestamp)" /></h5>
-        <h5>No of Txs: N/A</h5>
       </el-card>
     </div>
   </div>
@@ -47,6 +46,16 @@ export default {
 
 <style scoped>
 
+.box {
+  border-radius: 15px;
+  background: #F4F6FF;
+}
+
+.header-text {
+  color: #5973B8;
+  font-weight: bold;
+}
+
 .centered-container {
   display: flex;
   justify-content: center;  /* Center children horizontally */
@@ -67,6 +76,7 @@ export default {
   display: inline-block;
   width: 200px;  /* If 5 cards need to be displayed at a time, and container width is 1000px, then each card can be approximately 200px wide */
   margin-right: 20px;  /* Adjust as needed */
+  text-align: center;
 }
 
 

tools/obscuroscan_v2/frontend/src/components/RotatingRollupsItem.vue

@@ -1,13 +1,13 @@
 <template>
-  <el-card class="centered-container">
-  <div class="slider-container">
+  <el-card class="centered-container" shadow="never" style="border-radius: 20px; ">
+  <div class="slider-container" style="width: 100%;">
     <div class="slider-content" :class="{ 'slide-out': isAnimating }">
-      <el-card v-for="card in displayedCards"  class="card-content">
-        <h3>Block: {{ card.L1ProofNumber }}</h3>
+      <el-card v-for="card in displayedCards"  class="card-content box">
+        <h3 class="header-text">Rollup: <ShortenedHash :hash="card.hash" /></h3>
         <p>&nbsp;</p>
-        <h5>R: <ShortenedHash :hash="card.hash" /></h5>
-        <h5>Block: <ShortenedHash :hash="card.L1Proof" /></h5>
-        <h5>No of Txs: N/A</h5>
+        <h5>Last Batch: {{ card.LastBatchSeqNo }}</h5>
+        <h5><ShortenedHash :hash="card.CompressionL1Head" /></h5>
+
       </el-card>
     </div>
   </div>
@@ -46,6 +46,16 @@ export default {
 
 <style scoped>
 
+.header-text {
+  color: #5973B8;
+  font-weight: bold;
+}
+
+.box {
+  border-radius: 15px;
+  background: #F4F6FF;
+}
+
 .centered-container {
   display: flex;
   justify-content: center;  /* Center children horizontally */
@@ -66,6 +76,7 @@ export default {
   display: inline-block;
   width: 200px;  /* If 5 cards need to be displayed at a time, and container width is 1000px, then each card can be approximately 200px wide */
   margin-right: 20px;  /* Adjust as needed */
+  text-align: center;
 }
 
 

tools/obscuroscan_v2/frontend/src/components/SummaryItem.vue

@@ -1,65 +1,79 @@
 <template>
-  <el-row>
-    <el-col :span="4">
-      <el-card class="box" shadow="always">
-        <p>Ether Price</p>
+  <el-card shadow="never" style=" border-radius: 20px; ">
+  <el-row justify="space-evenly">
+    <el-col :span="4" >
+      <el-card class="box" shadow="never">
+        <p class="header-text">
+          <img class="icon" src="@/assets/imgs/icon_ethereum.png"/>
+          Ether Price
+        </p>
+
         <div>
           <div v-if="ethPriceUSD">$ {{ ethPriceUSD }}</div>
-          <div v-else>-</div>
+          <div v-else v-loading=true element-loading-background="#F4F6FF">loading...</div>
         </div>
       </el-card>
       <p>&nbsp;</p>
 
-      <el-card class="box" shadow="always">
-        <p>Nodes</p>
-        <p>n/a</p>
+      <el-card class="box" shadow="never">
+        <p class="header-text">
+          <img class="icon" src="@/assets/imgs/icon_nodes.png"/>
+          Nodes
+        </p>
+        <p v-loading=true element-loading-background="#F4F6FF">loading...</p>
       </el-card>
     </el-col>
 
-    <el-col :span="4" :offset="2">
-      <el-card class="box" shadow="always">
-        <p>Latest L2 Batch</p>
+    <el-col :span="4" :offset="3">
+      <el-card class="box" shadow="never">
+        <p class="header-text">
+          <img class="icon" src="@/assets/imgs/icon_l2_batch.png"/>
+          Latest L2 Batch
+        </p>
         <div>
           <div v-if="latestBatch">{{ latestBatch }}</div>
-          <div v-else>-</div>
+          <div v-else v-loading=true element-loading-background="#F4F6FF">loading...</div>
         </div>
       </el-card>
       <p>&nbsp;</p>
 
-      <el-card class="box" shadow="always">
-        <p>Latest L1 Rollup</p>
+      <el-card class="box" shadow="never">
+        <p class="header-text">
+          <img class="icon" src="@/assets/imgs/icon_l1_rollup.png"/>
+          Latest L1 Rollup
+        </p>
         <div>
           <div v-if="latestL1Proof">
             <ShortenedHash :hash="latestL1Proof" />
           </div>
-          <div v-else>-</div>
+          <div v-else v-loading=true element-loading-background="#F4F6FF">loading...</div>
         </div>
       </el-card>
     </el-col>
-    <el-col :span="4" :offset="2">
-      <el-card class="box" shadow="always">
-        <p>Transactions</p>
+    <el-col :span="4" :offset="3">
+      <el-card class="box" shadow="never">
+        <p class="header-text">
+          <img class="icon" src="@/assets/imgs/icon_transactions.png"/>
+          Transactions</p>
         <div>
           <div v-if="totalTransactionCount">{{ totalTransactionCount }}</div>
-          <div v-else>-</div>
+          <div v-else v-loading=true element-loading-background="#F4F6FF">loading...</div>
         </div>
       </el-card>
       <p>&nbsp;</p>
 
-      <el-card class="box" shadow="always">
-        <p>Contracts</p>
+      <el-card class="box" shadow="never">
+        <p class="header-text">
+          <img class="icon" src="@/assets/imgs/icon_contracts.png"/>
+          Contracts</p>
         <div>
           <div v-if="totalContractCount">{{ totalContractCount }}</div>
-          <div v-else>-</div>
+          <div v-else v-loading=true element-loading-background="#F4F6FF">loading...</div>
         </div>
       </el-card>
     </el-col>
-    <el-col :span="4" :offset="2">
-      <el-card class="box" shadow="always" style="min-height: 100%">
-        <p>News from Foundation</p>
-      </el-card>
-    </el-col>
   </el-row>
+  </el-card>
 </template>
 
 <script>
@@ -106,5 +120,21 @@ export default {
 <style scoped>
 .box {
   border-radius: 15px;
+  background: #F4F6FF;
+}
+
+.icon {
+  height: 24px;      /* Set desired height */
+  object-fit: cover; /* Ensure image content is not distorted */
+  margin-right: 8px; /* Optional space between the icon and the text */
+}
+
+.header-text {
+  color: #5973B8;
+  font-weight: bold;
+}
+
+.el-icon-loading:before {
+  color: red;
 }
 </style>