Add Get TFT button in new Dashboard (#1086)

* add Get TFT button

* fix color of toast

* remove print line

* update position of button

* add icon before success or failure in toast

* update 404 page

* use alice client and remove callback

* call connect method

* fix getting tfts

* use getGrid

* check on network && add method to balance module

* improve code readability

* fix bug when solving conflict

* reload balance

* connect client again when connecting to alice

packages/grid_client/src/clients/tf-grid/balances.ts

@@ -1,4 +1,4 @@
-import { Balance, Balances, BalanceTransferOptions, QueryBalancesGetOptions } from "@threefold/tfchain_client";
+import { Balance, Balances, BalanceTransferOptions, Client, QueryBalancesGetOptions } from "@threefold/tfchain_client";
 import { Decimal } from "decimal.js";
 
 class TFBalances extends Balances {
@@ -16,6 +16,17 @@ class TFBalances extends Balances {
     const decimalAmountInTFT = decimalAmount.mul(10 ** 7).toNumber();
     return await super.transfer({ address: options.address, amount: decimalAmountInTFT });
   }
+
+  async getMoreFunds() {
+    if (this.client.url !== "wss://tfchain.dev.grid.tf/ws" && this.client.url !== "wss://tfchain.qa.grid.tf/ws") {
+      throw "Unable to get more TFTs";
+    }
+    await this.client.connect();
+    const client = new Client({ url: this.client.url, mnemonicOrSecret: "//Alice" });
+    await client.connect();
+    const transaction = await client.balances.transfer({ address: this.client.address, amount: 100 * 1e7 });
+    return transaction.apply();
+  }
 }
 
 export { TFBalances };

packages/grid_client/src/modules/balance.ts

@@ -27,6 +27,12 @@ class Balance {
   async getMyBalance() {
     return await this.client.balances.getMyBalance();
   }
+
+  @expose
+  @validateInput
+  async getMoreFunds() {
+    return await this.client.balances.getMoreFunds();
+  }
 }
 
 export { Balance as balance };

packages/playground/src/App.vue

@@ -90,8 +90,11 @@
             <v-img :src="baseUrl + 'images/logoTF.png'" width="160px" />
           </v-toolbar-title>
 
-          <v-spacer></v-spacer>
-
+          <v-spacer>
+            <div class="d-flex align-center justify-start">
+              <FundsCard v-if="hasActiveProfile"></FundsCard>
+            </div>
+          </v-spacer>
           <v-btn class="capitalize" :style="{ pointerEvents: 'none' }" variant="text"> {{ network }}net </v-btn>
           <v-divider vertical class="mx-2" />
           <AppTheme />
@@ -299,6 +302,7 @@ import AppTheme from "./components/app_theme.vue";
 import ConnectWalletLanding from "./components/connect_wallet_landing.vue";
 import DeploymentListManager from "./components/deployment_list_manager.vue";
 import DisclaimerToolbar from "./components/disclaimer_toolbar.vue";
+import FundsCard from "./components/funds_card.vue";
 import ProfileManagerController from "./components/profile_manager_controller.vue";
 import TFNotification from "./components/tf_notification.vue";
 import ProfileManager from "./weblets/profile_manager.vue";
@@ -326,6 +330,7 @@ export default {
     AppTheme,
     ConnectWalletLanding,
     AppInfo,
+    FundsCard,
     ProfileManagerController,
   },
 };

packages/playground/src/components/funds_card.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-btn
+    id="tftBtn"
+    width="2000"
+    color="white"
+    @click="addTFT"
+    class="px-lg-6 px-md-2 px-sm-0 mx-sm-0"
+    style="color: white; max-width: 140px; width: auto; background-color: var(--primary)"
+    :loading="loadingAddTFT"
+  >
+    GET TFT
+  </v-btn>
+</template>
+
+<script lang="ts">
+import { createToast } from "mosha-vue-toastify";
+import { ref } from "vue";
+
+import { useProfileManagerController } from "../components/profile_manager_controller.vue";
+import { useProfileManager } from "../stores";
+import { getGrid } from "../utils/grid";
+
+export default {
+  name: "FundsCard",
+  setup() {
+    const loadingAddTFT = ref(false);
+    const profileManager = useProfileManager();
+    const ProfileManagerController = useProfileManagerController();
+    const addTFT = async () => {
+      if (window.env.NETWORK !== "dev" && window.env.NETWORK !== "qa") {
+        window.open("https://gettft.com/gettft/", "_blank");
+      } else {
+        loadingAddTFT.value = true;
+        try {
+          const grid = await getGrid(profileManager.profile!);
+          await grid?.balance.getMoreFunds();
+          await ProfileManagerController.reloadBalance();
+          loadingAddTFT.value = false;
+          createToast(`Success!`, {
+            position: "bottom-right",
+            hideProgressBar: true,
+            toastBackgroundColor: "#1aa18f",
+            timeout: 5000,
+            type: "success",
+            showIcon: true,
+          });
+        } catch (e) {
+          loadingAddTFT.value = false;
+          console.log("Error: ", e);
+          createToast(`Get more TFT failed!`, {
+            position: "bottom-right",
+            hideProgressBar: true,
+            toastBackgroundColor: "black",
+            timeout: 5000,
+            type: "danger",
+            showIcon: true,
+          });
+        }
+      }
+    };
+    return {
+      loadingAddTFT,
+      addTFT,
+    };
+  },
+};
+</script>
+
+<style>
+#tftBtn {
+  display: inline-block;
+  min-width: 10px !important;
+}
+
+:root {
+  --primary: #1aa18f;
+}
+</style>

packages/tfchain_client/src/client.ts

@@ -254,7 +254,9 @@ class Client extends QueryClient {
       throw Error("mnemonicOrSecret or extension signer should be provided");
     }
     if (this.mnemonicOrSecret) {
-      if (!validateMnemonic(this.mnemonicOrSecret)) {
+      if (this.mnemonicOrSecret === "//Alice") {
+        return;
+      } else if (!validateMnemonic(this.mnemonicOrSecret)) {
         if (this.mnemonicOrSecret.includes(" "))
           // seed shouldn't have spaces
           throw Error("Invalid mnemonic! Must be bip39 compliant");