fix(ui): tighten deployer layout and transaction actions

www/apps/frontend/src/app/app.component.html

@@ -9,5 +9,5 @@
   ></casper-ui-header>
 </header>
 <main>
-  <router-outlet class="contents"></router-outlet>
+  <casper-deployer></casper-deployer>
 </main>

www/apps/frontend/src/app/app.component.scss

@@ -1,4 +1,14 @@
 :host {
   display: grid;
-  grid-template-rows: 3.75rem auto;
+  grid-template-rows: 3.75rem minmax(0, 1fr);
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+main {
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
 }

www/apps/frontend/src/app/app.component.spec.ts

@@ -1,15 +1,23 @@
 import { TestBed } from '@angular/core/testing';
-import { DEPLOYER_TOKEN } from '@casper-util/wasm';
-import { AppComponent } from './app.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ENV_CONFIG, config } from '@casper-util/config';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { of } from 'rxjs';
+import { DEPLOYER_TOKEN } from '@casper-util/wasm';
+import { ENV_CONFIG, config } from '@casper-util/config';
+import { DeployerComponent } from '@casper-deployer/deployer';
+import { AppComponent } from './app.component';
 
 jest.mock('casper-rust-wasm-sdk', () => ({
   CasperWallet: jest.fn().mockImplementation(() => ({})),
 }));
 
+@Component({
+  selector: 'casper-deployer',
+  standalone: true,
+  template: '',
+})
+class DeployerStubComponent {}
+
 describe('AppComponent', () => {
   let mockHttpClient: Partial<HttpClient>;
 
@@ -28,7 +36,12 @@ describe('AppComponent', () => {
         { provide: ENV_CONFIG, useValue: config },
       ],
       schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+    })
+      .overrideComponent(AppComponent, {
+        remove: { imports: [DeployerComponent] },
+        add: { imports: [DeployerStubComponent] },
+      })
+      .compileComponents();
   });
 
   it('should create the app', () => {

www/apps/frontend/src/app/app.component.ts

@@ -16,13 +16,13 @@ import { HeaderComponent } from '@casper-ui/header';
 import { User } from '@casper-api/api-interfaces';
 import { DEPLOYER_TOKEN } from '@casper-util/wasm';
 import { Deployer } from 'deployer';
-import { RouterModule } from '@angular/router';
+import { DeployerComponent } from '@casper-deployer/deployer';
 import { RouteurHubService } from '@casper-util/routeur-hub';
 import { StorageService } from '@casper-util/storage';
 import { DeployerService } from '@casper-data/data-access-deployer';
 import { motesToCSPR } from 'casper-rust-wasm-sdk';
 import { WalletService } from '@casper-util/wallet';
-const imports = [CommonModule, RouterModule, HeaderComponent];
+const imports = [CommonModule, HeaderComponent, DeployerComponent];
 
 @Component({
   selector: 'casper-root',

www/apps/frontend/src/main.ts

@@ -2,7 +2,7 @@ import {
   HttpClient,
   provideHttpClient,
   withInterceptorsFromDi,
-  withXhr
+  withXhr,
 } from '@angular/common/http';
 import {
   enableProdMode,
@@ -16,24 +16,15 @@ import { config, ENV_CONFIG } from '@casper-util/config';
 import { WasmModule } from '@casper-util/wasm';
 import { AppComponent } from './app/app.component';
 import { environment } from './environments/environment';
-import { RouterModule, Routes } from '@angular/router';
 import { Toaster, TOASTER_TOKEN } from '@casper-util/toaster';
 declare const toastr: Toaster;
 
 if (environment.production) {
   enableProdMode();
 }
 
-const ROUTES: Routes = [
-  {
-    path: '',
-    loadComponent: () =>
-      import('@casper-deployer/deployer').then((m) => m.DeployerComponent),
-  },
-];
-
 const providers: Array<Provider | EnvironmentProviders> = [
-  importProvidersFrom([WasmModule, RouterModule.forRoot(ROUTES)]),
+  importProvidersFrom([WasmModule]),
   provideHttpClient(withXhr(), withInterceptorsFromDi()),
 ];
 

www/apps/frontend/src/styles.scss

@@ -6,8 +6,10 @@ html,
 body {
   display: grid;
   height: 100%;
+  max-height: 100%;
   margin: 0;
   padding: 0;
+  overflow: hidden;
 }
 
 textarea {

www/libs/feature/deployer/src/lib/deployer/deployer.component.scss

@@ -1,10 +1,39 @@
 :host {
   display: grid;
   justify-content: center;
-  align-content: center;
+  align-content: stretch;
+  align-items: stretch;
   grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: 1fr;
+  grid-template-rows: minmax(0, 1fr);
   grid-column-gap: 1rem;
-  grid-row-gap: 1rem;
-  padding: 1rem;
+  grid-row-gap: 0;
+  padding: 0.75rem 1rem;
+  box-sizing: border-box;
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+:host > section {
+  min-height: 0;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+:host > section:last-of-type {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Modal host must not create a second grid row (was +16px row-gap overflow). */
+:host > casper-deployer-arg-builder {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  z-index: 40;
 }

www/libs/feature/deployer/src/lib/get-deploy/get-deploy.component.html

@@ -6,7 +6,7 @@ <h2 class="title">Transaction Info</h2>
         class="flex justify-between text-gray-700 text-xs font-bold mb-2"
         for="activePublicKey"
       >
-        Transaction hash <input type="reset" value="clear" (click)="reset()" />
+        Hash <input type="reset" value="clear" (click)="reset()" />
       </label>
       <div class="mb-2">
         <input

www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.html

@@ -4,25 +4,26 @@ <h2 class="title">Transaction</h2>
     <div class="mb-4">
       <label
         class="flex justify-between text-gray-700 text-xs font-bold mb-2"
-        for="apiUrl"
+        for="chainName"
       >
         Chain name
         <input type="reset" value="clear" (click)="resetFirstForm($event)" />
       </label>
-      <div class="mb-2">
+      <div class="mb-2 flex gap-2 items-stretch">
         <input
           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
           name="chainName"
+          id="chainName"
           #chainNameElt
           type="search"
+          (change)="onChainNameInput()"
           [placeholder]="'ex: ' + config['chain_name_testnet']"
         />
-      </div>
-      <div class="mb-2">
         <select
           (change)="selectChainName($event)"
           #chainNameSelectElt
-          class="border border-gray-300 text-gray-900 text-xs focus:outline-none rounded focus:shadow-outline block w-full p-2.5"
+          class="border border-gray-300 text-gray-900 text-xs focus:outline-none rounded focus:shadow-outline block w-40 shrink-0 p-2.5"
+          title="Select a preset chain name"
         >
           <optgroup label="default">
             <option
@@ -115,7 +116,6 @@ <h2 class="title">Transaction</h2>
         </div>
       </div>
     </div>
-    <hr class="mb-3" />
     <div class="mb-4">
       <label
         class="flex justify-between text-gray-700 text-xs font-bold mb-2"
@@ -344,16 +344,23 @@ <h2 class="title">Transaction</h2>
         />
       </div>
     </div>
-    <div class="flex items-center justify-between mb-2 flex-wrap gap-2">
+    <input
+      class="hidden"
+      #signedTxFileElt
+      type="file"
+      accept=".json,application/json"
+      (change)="onSignedTransactionFileSelected($event)"
+    />
+    <div class="tx-actions">
       <button
-        class="flex bg-casper bg-opacity-75 hover:bg-opacity-100 text-white font-small py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-opacity-10"
+        class="tx-btn"
         type="button"
         (click)="makeTransaction()"
         [attr.disabled]="isMakeTransactionDisabled ? true : null"
       >
         Make transaction
         <svg
-          class="w-6 h-6 ml-1"
+          class="w-5 h-5 ml-1 shrink-0"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -368,14 +375,14 @@ <h2 class="title">Transaction</h2>
         </svg>
       </button>
       <button
-        class="flex bg-casper bg-opacity-75 hover:bg-opacity-100 text-white font-small py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-opacity-10"
+        class="tx-btn"
         type="button"
         (click)="signTransaction(false)"
         [attr.disabled]="isMakeTransactionDisabled ? true : null"
       >
         Sign only
         <svg
-          class="w-6 h-6 ml-1"
+          class="w-5 h-5 ml-1 shrink-0"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -385,19 +392,19 @@ <h2 class="title">Transaction</h2>
             stroke-linecap="round"
             stroke-linejoin="round"
             stroke-width="2"
-            d="M15.75 5.25v13.5m-7.5-13.5v13.5"
+            d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"
           ></path>
         </svg>
       </button>
       <button
-        class="flex bg-casper bg-opacity-75 hover:bg-opacity-100 text-white font-small py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-opacity-10"
+        class="tx-btn"
         type="button"
         (click)="signTransaction()"
         [attr.disabled]="isMakeTransactionDisabled ? true : null"
       >
         Sign & Send
         <svg
-          class="w-6 h-6 ml-1"
+          class="w-5 h-5 ml-1 shrink-0"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -407,31 +414,48 @@ <h2 class="title">Transaction</h2>
             stroke-linecap="round"
             stroke-linejoin="round"
             stroke-width="2"
-            d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"
+            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
           ></path>
         </svg>
       </button>
-      <input
-        class="hidden"
-        #signedTxFileElt
-        type="file"
-        accept=".json,application/json"
-        (change)="onSignedTransactionFileSelected($event)"
-      />
-      <button
-        class="flex bg-casper bg-opacity-75 hover:bg-opacity-100 text-white font-small py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-opacity-10"
-        type="button"
-        (click)="signedTxFileElt.click()"
-      >
+      <button class="tx-btn" type="button" (click)="signedTxFileElt.click()">
         Load signed JSON
+        <svg
+          class="w-5 h-5 ml-1 shrink-0"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+          ></path>
+        </svg>
       </button>
       <button
-        class="flex bg-casper bg-opacity-75 hover:bg-opacity-100 text-white font-small py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-opacity-10"
+        class="tx-btn"
         type="button"
         (click)="sendLoadedTransaction()"
         [attr.disabled]="!loadedSignedTransaction ? true : null"
       >
         Send loaded
+        <svg
+          class="w-5 h-5 ml-1 shrink-0"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13 10V3L4 14h7v7l9-11h-7z"
+          ></path>
+        </svg>
       </button>
     </div>
   </form>

www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.scss

@@ -3,3 +3,42 @@ textarea {
   font-size: 0.8em;
   background-color: rgb(232, 240, 254);
 }
+
+.tx-actions {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+  align-items: stretch;
+}
+
+.tx-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  grid-column: span 2;
+  height: 2.5rem;
+  min-height: 2.5rem;
+  background-color: #ff473e;
+  color: #fff;
+  font-size: 0.72rem;
+  line-height: 1;
+  padding: 0 0.35rem;
+  border: 0;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+
+  &:hover:not(:disabled) {
+    filter: brightness(0.95);
+  }
+
+  &:disabled {
+    opacity: 0.25;
+    cursor: not-allowed;
+  }
+}
+
+.tx-actions > .tx-btn:nth-child(n + 4) {
+  grid-column: span 3;
+}