UI updates (#187)

* project list color updates

* update exit icon

* update outlined button style

* add tooltip for sidebar links

* show basic menu in interaction history

* add menu icons

* show transaction status in interaction history

* disable menu for first block

* update transaction content layout

* temporary menu tooltip

* redirect to the default project route

* reorganize sidebar nav links, make interactions the default page

* update service account icon

* fix initial redirection

* remove tooltip, remove unused dependencies

* remove extra spacing in sidebar

* minor fix

* show event data inline, simplify events table

* restructure components, remove obsolete/unused styles

* restructure interaction components

* update transaction source display

* tweak events table column widths

* fix account keys table

* show details tabs under transaction outcome view

* compute account tags

* add account tags

backend/src/accounts/entities/account.entity.ts

@@ -2,7 +2,7 @@ import { PollingEntity } from "../../core/entities/polling.entity";
 import { Column, Entity, OneToMany, PrimaryColumn } from "typeorm";
 import { AccountKeyEntity } from "./key.entity";
 import { AccountContractEntity } from "./contract.entity";
-import { Account } from "@flowser/shared";
+import { Account, AccountTag } from "@flowser/shared";
 import { TransactionEntity } from "../../transactions/transaction.entity";
 import { AccountStorageItemEntity } from "./storage-item.entity";
 import { BlockContextEntity } from "../../blocks/entities/block-context.entity";
@@ -92,6 +92,29 @@ export class AccountEntity extends PollingEntity implements BlockContextEntity {
   }
 
   toProto(): Account {
+    const tags: AccountTag[] = [];
+
+    if (this.isDefaultAccount) {
+      tags.push({
+        name: "Default",
+        description: "This account was created automatically by the emulator.",
+      });
+    }
+
+    const isServiceAccount = [
+      "0xf8d6e0586b0a20c7",
+      "0x0000000000000001", // When using monotonic addresses setting
+    ].includes(this.address);
+
+    // https://developers.flow.com/concepts/flow-token/concepts#flow-service-account
+    if (isServiceAccount) {
+      tags.push({
+        name: "Service",
+        description:
+          "A special account in Flow that has special permissions to manage system contracts. It is able to mint tokens, set fees, and update network-level contracts.",
+      });
+    }
+
     return {
       address: this.address,
       balance: this.balance,
@@ -101,7 +124,7 @@ export class AccountEntity extends PollingEntity implements BlockContextEntity {
       contracts: this.contracts?.map((contract) => contract.toProto()) ?? [],
       transactions:
         this.transactions?.map((transaction) => transaction.toProto()) ?? [],
-      isDefaultAccount: this.isDefaultAccount,
+      tags,
       createdAt: this.createdAt.toISOString(),
       updatedAt: this.updatedAt.toISOString(),
     };

backend/src/data-processing/processor.service.ts

@@ -705,15 +705,19 @@ export class ProcessorService implements ProjectContextLifecycle {
     flowBlock: FlowBlock;
   }): AccountEntity {
     const { flowAccount, flowBlock } = options;
-    const account = AccountEntity.createDefault();
-    account.blockId = flowBlock.id;
-    account.address = ensurePrefixedAddress(flowAccount.address);
-    account.balance = flowAccount.balance;
-    account.code = flowAccount.code;
-    account.keys = flowAccount.keys.map((flowKey) =>
-      this.createKeyEntity({ flowAccount, flowKey, flowBlock })
-    );
-    return account;
+    return new AccountEntity({
+      balance: flowAccount.balance,
+      address: ensurePrefixedAddress(flowAccount.address),
+      blockId: flowBlock.id,
+      isDefaultAccount: false,
+      contracts: [],
+      storage: [],
+      transactions: [],
+      code: flowAccount.code,
+      keys: flowAccount.keys.map((flowKey) =>
+        this.createKeyEntity({ flowAccount, flowKey, flowBlock })
+      ),
+    });
   }
 
   private createKeyEntity(options: {

frontend/package.json

@@ -10,11 +10,12 @@
   "main": "dist/targets/electron/main.js",
   "homepage": "./",
   "dependencies": {
+    "reactjs-popup": "2.0.5",
+    "@szhsin/react-menu": "4.0.3",
     "@codemirror/legacy-modes": "^6.1.0",
     "@fingerprintjs/fingerprintjs": "^3.3.6",
     "@flowser/backend": "0.0.1",
     "@flowser/shared": "0.0.1",
-    "@onflow/cadence-parser": "^0.26.0",
     "@onflow/fcl": "^1.6.0",
     "@onflow/types": "^1.0.3",
     "@sentry/electron": "^4.0.2",

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, ReactNode, useEffect } from "react";
 import {
   createBrowserRouter,
+  Navigate,
   Outlet,
   RouterProvider,
   useLocation,
@@ -36,7 +37,7 @@ import {
   useGetPollingTransactions,
 } from "./hooks/use-api";
 import { TransactionsTable } from "./modules/transactions/TransactionsTable/TransactionsTable";
-import { TransactionDetails } from "./modules/transactions/details/TransactionDetails";
+import { TransactionDetails } from "./modules/transactions/TransactionDetails/TransactionDetails";
 import { BlockDetails } from "./modules/blocks/BlockDetails/BlockDetails";
 import { BlocksTable } from "./modules/blocks/BlocksTable/BlocksTable";
 import { AccountDetails } from "./modules/accounts/AccountDetails/AccountDetails";
@@ -97,6 +98,10 @@ export const FlowserClientApp = ({
 };
 
 const router = createBrowserRouter([
+  {
+    index: true,
+    element: <Navigate to="projects" replace />,
+  },
   {
     path: "projects",
     element: (
@@ -128,7 +133,11 @@ const router = createBrowserRouter([
         ),
         children: [
           {
-            path: "ProjectSettings",
+            index: true,
+            element: <Navigate to="interactions" replace />,
+          },
+          {
+            path: "settings",
             element: <ProjectSettingsPage />,
           },
           {