Bug fixes

backend/package.json

@@ -35,7 +35,7 @@
     "@nestjs/serve-static": "^3.0.0",
     "@nestjs/swagger": "^5.1.1",
     "@nestjs/typeorm": "^8.1.0",
-    "@onflow/fcl": "^1.5.1",
+    "@onflow/fcl": "^1.6.0",
     "@onflow/types": "^1.0.3",
     "axios": "^0.21.4",
     "class-transformer": "0.4.0",

frontend/package.json

@@ -15,7 +15,7 @@
     "@flowser/backend": "0.0.1",
     "@flowser/shared": "0.0.1",
     "@onflow/cadence-parser": "^0.26.0",
-    "@onflow/fcl": "^1.5.1",
+    "@onflow/fcl": "^1.6.0",
     "@onflow/types": "^1.0.3",
     "@sentry/electron": "^4.0.2",
     "@tanstack/react-table": "^8.5.11",

frontend/src/components/cadence-editor/cadence-editor.css

@@ -1,11 +1,13 @@
 /* Main editor container */
 .cadence-editor {
     width: 100%;
+    height: 100%;
     background: #272B32;
 }
 
 .cadence-editor .cm-editor {
     background: none;
+    height: 100%;
 }
 
 .cm-focused {

frontend/src/components/details-card/DetailsCard.module.scss

@@ -3,7 +3,6 @@
 @import "styles/scrollbars";
 
 .root {
-  overflow: scroll;
   background: $gray-100;
   @include hiddenScrollbars();
 

frontend/src/components/details-card/DetailsCard.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import Label from "components/label/Label";
 import Value from "components/value/Value";
-import React, { FC, ReactElement } from "react";
+import React, { CSSProperties, FC, ReactElement } from "react";
 import Card from "../card/Card";
 import classes from "./DetailsCard.module.scss";
 import { SizedBox } from "../sized-box/SizedBox";

frontend/src/components/ellipsis/MiddleEllipsis.tsx

@@ -2,29 +2,36 @@ import React, { FunctionComponent, useRef } from "react";
 
 export type EllipsisProps = {
   children: string;
-  delimiter?: string;
   className?: string;
   style?: React.CSSProperties;
 };
 
 const MiddleEllipsis: FunctionComponent<EllipsisProps> = ({
   children,
-  delimiter = "...",
   className,
   style,
 }) => {
   const elRef = useRef<HTMLSpanElement>(null);
-  const pieceLength = 10;
-  const ellipsisText =
-    children.substring(0, pieceLength) +
-    delimiter +
-    children.substring(children.length - pieceLength, children.length);
+  const maxLength = 20;
 
   return (
     <span ref={elRef} className={className} style={style}>
-      {ellipsisText}
+      {trimText(children, maxLength)}
     </span>
   );
 };
 
+function trimText(text: string, maxLength: number) {
+  const delimiter = "...";
+  if (text.length <= maxLength) {
+    return text;
+  } else {
+    return (
+      text.substring(0, maxLength / 2) +
+      delimiter +
+      text.substring(text.length - maxLength / 2, text.length)
+    );
+  }
+}
+
 export default MiddleEllipsis;

frontend/src/components/tabs/Tabs.module.scss

@@ -7,6 +7,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  height: 100%;
   .tabWrapper {
     display: flex;
     align-items: center;

frontend/src/contexts/ui-state.context.tsx

@@ -6,10 +6,9 @@ import React, {
   useContext,
   useState,
 } from "react";
-import { LogDrawerUiState } from "../hooks/use-log-drawer";
 import { NavigationUiState } from "../hooks/use-navigation";
 
-export interface UiState extends LogDrawerUiState, NavigationUiState {
+export interface UiState extends NavigationUiState {
   placeholder: { [key: string]: string };
   searchTerm: { [key: string]: string };
   searchDisabled: boolean;
@@ -19,7 +18,6 @@ export const defaultUiState: UiState = {
   placeholder: { default: "Search" },
   searchTerm: { default: "" },
   searchDisabled: false,
-  logDrawerSize: "tiny",
   breadcrumbs: [],
   isBreadcrumbsVisible: false,
   isShowBackButtonVisible: true,

frontend/src/pages/interactions/InteractionsPage.module.scss

@@ -32,15 +32,15 @@
       .content {
         flex: 2;
         display: flex;
+        row-gap: $spacing-base;
         flex-direction: column;
         overflow: hidden;
         .code {
-          flex: 3;
+          height: 60%;
           background: #272B32;
-          padding-top: $spacing-base;
         }
         .details {
-          flex: 1;
+          height: 40%;
           background: #272B32;
           .error {
             padding: $spacing-base;

frontend/src/pages/interactions/InteractionsPage.tsx

@@ -93,7 +93,6 @@ function InteractionBody(): ReactElement {
         <div className={classes.code}>
           <InteractionSourceEditor />
         </div>
-        <SizedBox height={20} />
         <div className={classes.details}>
           <InteractionDetails />
         </div>

frontend/src/pages/interactions/components/execution/ExecutionSettings.module.scss

@@ -7,7 +7,12 @@
   justify-content: space-between;
   flex-direction: column;
   padding: $spacing-base;
-  width: 300px;
+  min-width: 300px;
+  row-gap: $spacing-base;
+
+  .top {
+    overflow-y: scroll;
+  }
 
   .bottom {
     display: flex;

frontend/src/pages/interactions/components/execution/ExecutionSettings.tsx

@@ -22,7 +22,7 @@ import { ExternalLink } from "../../../../components/link/ExternalLink";
 export function ExecutionSettings(): ReactElement {
   return (
     <div className={classes.root}>
-      <div>
+      <div className={classes.top}>
         <TopContent />
       </div>
       <div className={classes.bottom}>

frontend/src/pages/interactions/components/outcome/InteractionOutcome.module.scss

@@ -8,4 +8,9 @@
     padding: $spacing-base;
   }
 
+  .transactionOverview {
+    height: 100%;
+    padding: 0;
+  }
+
 }

frontend/src/pages/interactions/components/outcome/InteractionOutcome.tsx

@@ -12,7 +12,7 @@ import {
   FlowScriptOutcome,
   FlowTransactionOutcome,
 } from "pages/interactions/contexts/interaction-registry.context";
-import { TabItem, Tabs } from "../../../../components/tabs/Tabs";
+import { TabItem } from "../../../../components/tabs/Tabs";
 import { Callout } from "../../../../components/callout/Callout";
 import { useInteractionDefinitionManager } from "../../contexts/definition.context";
 import { InteractionKind } from "@flowser/shared";
@@ -125,24 +125,22 @@ function TransactionOutcome(props: { outcome: FlowTransactionOutcome }) {
   tabs.push({
     id: overviewTabId,
     label: "Overview",
-    content: <TransactionOverview transaction={data.transaction} />,
+    content: (
+      <TransactionOverview
+        transaction={data.transaction}
+        className={classes.transactionOverview}
+      />
+    ),
   });
 
   if (error) {
     tabs.push({
       id: errorTabId,
       label: "Error",
-      content: (
-        // TODO(design-revamp): Consolidate body layout styles
-        <div style={{ padding: 10 }}>
-          {data.transaction.status?.errorMessage ? (
-            <TransactionError
-              errorMessage={data.transaction.status.errorMessage}
-            />
-          ) : (
-            <pre>{outcome.error}</pre>
-          )}
-        </div>
+      content: data.transaction.status?.errorMessage ? (
+        <TransactionError errorMessage={data.transaction.status.errorMessage} />
+      ) : (
+        <pre>{outcome.error}</pre>
       ),
     });
   }
@@ -175,23 +173,13 @@ function ScriptOutcome(props: { outcome: FlowScriptOutcome }) {
     tabs.push({
       id: errorTabId,
       label: "Error",
-      content: (
-        // TODO(design-revamp): Consolidate body layout styles
-        <div style={{ padding: 10 }}>
-          <ScriptError errorMessage={error} />
-        </div>
-      ),
+      content: <ScriptError errorMessage={error} />,
     });
   } else {
     tabs.push({
       id: resultTabId,
       label: "Result",
-      content: (
-        // TODO(design-revamp): Consolidate body layout styles
-        <div style={{ padding: 10 }}>
-          <JsonView name="result" data={{ value: result }} />
-        </div>
-      ),
+      content: <JsonView name="result" data={{ value: result }} />,
     });
   }
 

frontend/src/pages/interactions/components/templates/InteractionTemplates.module.scss

@@ -11,6 +11,15 @@
   justify-content: space-between;
   position: relative;
 
+  .header {
+    background: $gray-100;
+    position: sticky;
+    top: 0;
+    padding-bottom: $spacing-base;
+    // Question mark icon is displayed above the header for some reason.
+    z-index: 1;
+  }
+
   .storedTemplates {
     display: flex;
     flex-direction: column;

frontend/src/pages/interactions/components/templates/InteractionTemplates.tsx

@@ -39,13 +39,14 @@ function StoredTemplates() {
   );
 
   return (
-    <>
-      <SearchInput
-        placeholder="Search interactions ..."
-        searchTerm={searchTerm}
-        onChangeSearchTerm={setSearchTerm}
-      />
-      <SizedBox height={20} />
+    <div>
+      <div className={classes.header}>
+        <SearchInput
+          placeholder="Search interactions ..."
+          searchTerm={searchTerm}
+          onChangeSearchTerm={setSearchTerm}
+        />
+      </div>
       <div className={classes.storedTemplates}>
         {filteredAndSortedTemplates.map((template) => (
           <div
@@ -79,7 +80,7 @@ function StoredTemplates() {
           </div>
         ))}
       </div>
-    </>
+    </div>
   );
 }
 

frontend/src/pages/interactions/hooks/use-transaction-name.ts

@@ -8,6 +8,7 @@ type UseInteractionNameProps = {
 
 enum TransactionKind {
   DEPLOY_CONTRACT,
+  REMOVE_CONTRACT,
   INITIALIZE_ACCOUNT,
 }
 
@@ -20,6 +21,14 @@ const hardcodedTemplates: [string, TransactionKind][] = [
       }`,
     TransactionKind.DEPLOY_CONTRACT,
   ],
+  [
+    `transaction(name: String) {
+      prepare(signer: AuthAccount) {
+        signer.contracts.remove(name: name)
+      }
+    }`,
+    TransactionKind.REMOVE_CONTRACT,
+  ],
   [
     `import Crypto
 
@@ -78,6 +87,10 @@ function getDynamicName(transaction: Transaction) {
       return `Deploy ${
         getArgumentValueById(transaction, "name") ?? "contract"
       }`;
+    case TransactionKind.REMOVE_CONTRACT:
+      return `Remove ${
+        getArgumentValueById(transaction, "name") ?? "contract"
+      }`;
     case TransactionKind.INITIALIZE_ACCOUNT:
       return "Init signer account";
     default:

frontend/src/pages/logs/Logs.module.scss

@@ -39,7 +39,7 @@
 
   .header {
     display: flex;
-    height: 63px;
+    height: 50px;
     color: $blue;
     align-items: center;
     overflow: hidden;