Installer Tweaks

scripts/updateRuntimePin.ts

@@ -65,7 +65,7 @@ async function main(): Promise<void> {
   if (resolvedPin.mainRepoCommitHash) {
     console.info(`- main repo commit: ${resolvedPin.mainRepoCommitHash}`);
   }
-  console.info('- next step: run yarn install to sync yarn.lock and node_modules');
+  console.info('- next step: run `yarn install` followed by `yarn build:server`');
 }
 
 function normalizeRef(value: string | undefined): string {

src-vue/navigation-operations/ServerMenu.vue

@@ -18,7 +18,7 @@
             style="box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15)"
           >
             <div :style="{ width: `${installerProgress}%` }" class="h-full bg-white border-r min-w-1 text-right" />
-            <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-normal text-slate-600/40 mt-px">{{ numeral(installerProgress).format('0.[0]')}}%</div>
+            <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-bold text-slate-600/60 font-mono">{{ numeral(installerProgress).format('0.[0]')}}%</div>
           </div>
         </div>
         <div v-else-if="lastUpdatedAt" class="pl-2.5 pr-3 pt-px flex flex-row items-center">
@@ -72,8 +72,13 @@
               </DropdownMenuItem>
             </div>
 
-            <DropdownMenuItem v-else-if="config.isServerInstalling" @click="openServerOverlay" class="px-3 py-1 w-120 cursor-pointer text-black/30 hover:text-argon-600">
+            <DropdownMenuItem v-else-if="config.isServerInstalling" class="px-3 py-1 w-120 text-black/30 cursor-default!">
               <InstallProgress />
+              <div class="border-t border-dashed border-slate-300 py-1">
+                <button @click="openServerOverlay" class="mt-2 text-base py-1.5 px-5 text-white bg-argon-600 border border-argon-700 hover:inner-button-shadow hover:bg-argon-700 rounded-md w-full cursor-pointer">
+                  Open Server Overlay
+                </button>
+              </div>
             </DropdownMenuItem>
 
             <div v-else-if="lastUpdatedAt">

src-vue/overlays-operations/ServerOverlay.vue

@@ -11,11 +11,17 @@
       <div v-else-if="overlayMode === 'installing'">
         <p v-if="config.isServerInstalled" class="pt-2 pb-5 font-light">
           We are updating the bot program on your {{ serverIdentity() }}. This will only
-          take a few minutes to complete.
+          take a few minutes to complete. Please do not close this app until it is finished.
         </p>
-        <p v-else class="pt-3 pb-5 font-light">
+        <p v-else class="pt-1 pb-6 font-light leading-6">
           We are verifying and setting up your {{ serverIdentity() }}. This may take several
           hours to complete.
+          <template v-if="canCloseOverlay">
+            You can close this overlay and app without affecting the installation process.
+          </template>
+          <template>
+            Please do not close this app until the core server files have been uploaded.
+          </template>
         </p>
         <div class="border-t border-dashed border-slate-300 text-black/40">
           <InstallProgress />

src-vue/screens-operations/mining-screen/SetupChecklist.vue

@@ -44,7 +44,7 @@
           <div class="px-4">
             <h2 class="text-2xl text-argon-600 font-bold">
               Connect a Cloud Server
-              <span v-if="config.isServerAdded" class="installing-badge relative -top-0.5 text-base rounded bg-argon-600/80 px-2 py-0.5 text-white">INSTALLING</span>
+              <span v-if="config.isServerAdded && !config.isServerInstalled" class="installing-badge relative -top-0.5 text-base rounded bg-argon-600/80 px-2 py-0.5 text-white">INSTALLING</span>
             </h2>
             <p v-if="hasMiningMachine">
               <template v-if="config.serverAdd?.localComputer">This local computer will be used to run your mining software. We've already checked its requirements.</template>

src-vue/screens-operations/vaulting-screen/SetupChecklist.vue

@@ -41,7 +41,10 @@
         >
           <Checkbox :isChecked="wallets.isLoaded && hasMiningMachine" />
           <div class="px-4">
-            <h2 class="text-2xl text-[#A600D4] font-bold">Connect a Cloud Server</h2>
+            <h2 class="text-2xl text-[#A600D4] font-bold">
+              Connect a Cloud Server
+              <span v-if="config.isServerAdded && !config.isServerInstalled" class="installing-badge relative -top-0.5 text-base rounded bg-argon-600/80 px-2 py-0.5 text-white">INSTALLING</span>
+            </h2>
             <p v-if="hasMiningMachine">
               <template v-if="config.serverAdd?.localComputer">This local computer will be used to run your mining software. We've already checked its requirements.</template>
               <template v-else-if="config.serverAdd?.digitalOcean">Your Digital Ocean API Key is ready to go. We will do all the work of creating and setting up your server.</template>
@@ -241,7 +244,11 @@ function openHowVaultingWorksOverlay() {
 }
 
 function openServerConnectPanel() {
-  basicEmitter.emit('openServerConnectPanel');
+  if (config.isServerAdded) {
+    basicEmitter.emit('openServerOverlay');
+  } else {
+    basicEmitter.emit('openServerConnectPanel');
+  }
 }
 
 function goBack() {
@@ -262,4 +269,17 @@ section:hover {
 section p {
   @apply mt-1 ml-0.5 opacity-60;
 }
+
+.installing-badge {
+  animation: installing-fade 1.2s ease-in-out infinite alternate;
+}
+
+@keyframes installing-fade {
+  from {
+    opacity: 0.3;
+  }
+  to {
+    opacity: 1;
+  }
+}
 </style>