Enhance deleting grace Period contracts UX (#487)

* fix deleting Gracepriod contracts * change ui * handle Inability to pay some fees error
threefoldtech · Jun 7, 2023 · 82e62b5 · 82e62b5
1 parent 6e1cc61
commit 82e62b5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -81,10 +81,10 @@
       </v-btn>
     </template>
   </weblet-layout>
-
   <v-dialog width="70%" v-model="deletingDialog">
     <v-card>
-      <v-card-title class="text-h5"> Are you sure you want to delete the following contracts? </v-card-title>
+      <v-card-title class="text-h5 mt-2"> Are you sure you want to delete the following contracts? </v-card-title>
+      <v-alert class="ma-4" type="warning" variant="tonal">Deleting contracts may take a while to complete.</v-alert>
       <v-card-text>
         <v-chip class="ma-1" color="primary" label v-for="c in selectedContracts" :key="c.contractId">
           {{ c.contractId }}
@@ -121,6 +121,9 @@
       </v-card-actions>
     </v-card>
   </v-dialog>
+  <v-snackbar variant="tonal" color="error" v-model="snackbar" :timeout="5000">
+    Failed to delete some keys, You don't have enough tokens
+  </v-snackbar>
 </template>
 
 <script lang="ts" setup>
@@ -204,7 +207,7 @@ async function contractLockDetails(contractId: number) {
     });
   loading.value = false;
 }
-
+const snackbar = ref(false);
 const deletingDialog = ref(false);
 const contractStateDialog = ref(false);
 const deleting = ref(false);
@@ -223,7 +226,13 @@ async function onDelete() {
     contracts.value = contracts.value!.filter(c => !selectedContracts.value.includes(c));
     selectedContracts.value = [];
   } catch (e) {
-    layout.value.setStatus("failed", normalizeError(e, `Failed to delete some of the selected contracts.`));
+    if ((e as Error).message.includes("Inability to pay some fees")) {
+      contracts.value = contracts.value!.filter(c => !selectedContracts.value.includes(c));
+      selectedContracts.value = [];
+      snackbar.value = true;
+    } else {
+      layout.value.setStatus("failed", normalizeError(e, `Failed to delete some of the selected contracts.`));
+    }
   }
   deleting.value = false;
 }

diff --git a/packages/tfchain_client/src/client.ts b/packages/tfchain_client/src/client.ts
@@ -315,9 +315,9 @@ class Client extends QueryClient {
       try {
         const nonce = await this.api.rpc.system.accountNextIndex(this.address);
         if (this.keypair) {
-          extrinsic.signAndSend(this.keypair, { nonce }, callback);
+          await extrinsic.signAndSend(this.keypair, { nonce }, callback);
         } else if (this.extSigner) {
-          extrinsic.signAndSend(this.address, { nonce, signer: this.extSigner.signer }, callback);
+          await extrinsic.signAndSend(this.address, { nonce, signer: this.extSigner.signer }, callback);
         }
       } catch (e) {
         reject(e);
@@ -335,7 +335,7 @@ class Client extends QueryClient {
           section = resultSections[0];
         throw Error(
           `Failed to apply ${JSON.stringify(extrinsic.method.toHuman())} due to error: ${
-            Object.keys(this.api.errors[section])[+e]
+            Object.keys(this.api.errors[section])[+e] ?? e
           }`,
         );
       });