Adding selection field for keypair type

packages/playground/src/stores/profile_manager.ts

@@ -1,3 +1,4 @@
+import type { KeypairType } from "@threefold/grid_client";
 import { defineStore } from "pinia";
 
 import { useGrid } from "./grid";
@@ -9,6 +10,7 @@ export interface Profile {
   address: string;
   relay: string;
   pk: string;
+  keypairType: KeypairType | undefined;
 }
 
 interface State {

packages/playground/src/utils/grid.ts

@@ -1,15 +1,18 @@
-import { BackendStorageType, GridClient, NetworkEnv } from "@threefold/grid_client";
+import { BackendStorageType, GridClient, KeypairType, NetworkEnv } from "@threefold/grid_client";
 
 import type { Profile } from "../stores/profile_manager";
 
 const network = (process.env.NETWORK as NetworkEnv) || window.env.NETWORK;
-
-export async function getGrid(profile: Pick<Profile, "mnemonic">, projectName?: string) {
+export async function getGrid(
+  profile: Pick<Profile, "mnemonic"> & Partial<Pick<Profile, "keypairType">>,
+  projectName?: string,
+) {
   if (!profile) return null;
   const grid = new GridClient({
     mnemonic: profile.mnemonic,
     network,
     backendStorageType: BackendStorageType.tfkvstore,
+    keypairType: profile.keypairType || KeypairType.sr25519,
     projectName,
 
     ...(import.meta.env.DEV && network !== NetworkEnv.custom
@@ -95,6 +98,7 @@ export async function loadProfile(grid: GridClient): Promise<Profile> {
     address: grid.tfclient.address,
     relay: grid.getDefaultUrls(network).relay.slice(6),
     pk: (await grid.twins.get({ id: grid!.twinId })).pk,
+    keypairType: grid.clientOptions!.keypairType,
   };
 }
 

packages/playground/src/weblets/profile_manager.vue

@@ -97,6 +97,13 @@
                   the password. Mnemonic or Hex Seed will never be shared outside of this device.
                 </p>
               </v-alert>
+
+              <v-alert variant="tonal" type="info" class="mb-6" v-if="keypairType === KeypairType.ed25519">
+                <p>
+                  Please note that generation of ed25519 Keys isn't supported, you can only import pre existing ones.
+                </p>
+              </v-alert>
+
               <VTooltip
                 v-if="activeTab === 1"
                 text="Mnemonic or Hex Seed are your private key. They are used to represent you on the ThreeFold Grid. You can paste existing (Mnemonic or Hex Seed) or click the 'Create Account' button to create an account and generate mnemonic."
@@ -127,23 +134,36 @@
                       ref="mnemonicInput"
                       :disable-validation="creatingAccount || activatingAccount || activating"
                     >
-                      <div v-bind="tooltipProps">
-                        <VTextField
-                          label="Mnemonic or Hex Seed"
-                          placeholder="Please insert your Mnemonic or Hex Seed"
-                          v-model="mnemonic"
-                          v-bind="{ ...passwordInputProps, ...validationProps }"
-                          :disabled="creatingAccount || activatingAccount || activating"
-                        />
-                      </div>
+                      <v-row>
+                        <v-col cols="10">
+                          <div v-bind="tooltipProps">
+                            <VTextField
+                              label="Mnemonic or Hex Seed"
+                              placeholder="Please insert your Mnemonic or Hex Seed"
+                              v-model="mnemonic"
+                              v-bind="{ ...passwordInputProps, ...validationProps }"
+                              :disabled="creatingAccount || activatingAccount || activating"
+                            />
+                          </div>
+                        </v-col>
+                        <v-col cols="2">
+                          <v-autocomplete
+                            :items="[...keyType]"
+                            item-title="name"
+                            v-model="keypairType"
+                            v-if="activeTab === 1"
+                          />
+                        </v-col>
+                      </v-row>
+
                       <div class="d-flex justify-end mb-10">
                         <v-tooltip>
                           <template v-slot:activator="{ isActive, props }">
                             <VBtn
                               class="mt-2 ml-3"
                               color="primary"
                               variant="tonal"
-                              :disabled="!shouldActivateAccount"
+                              :disabled="!shouldActivateAccount || keypairType === KeypairType.ed25519"
                               :loading="activatingAccount"
                               @click="openAcceptTerms = termsLoading = true"
                               v-bind="props"
@@ -159,7 +179,9 @@
                           class="mt-2 ml-3"
                           color="secondary"
                           variant="tonal"
-                          :disabled="isValidForm || !!mnemonic || shouldActivateAccount"
+                          :disabled="
+                            isValidForm || !!mnemonic || shouldActivateAccount || keypairType === KeypairType.ed25519
+                          "
                           :loading="creatingAccount"
                           @click="openAcceptTerms = termsLoading = true"
                         >
@@ -252,6 +274,9 @@
               <v-alert type="error" variant="tonal" class="mt-2 mb-4" v-if="loginError">
                 {{ loginError }}
               </v-alert>
+              <v-alert variant="tonal" type="warning" class="mb-6" v-if="activeTab === 1">
+                <p>Using different keypair types will lead to a completely different account.</p>
+              </v-alert>
             </FormValidator>
 
             <div class="d-flex justify-center mt-2">
@@ -404,6 +429,7 @@
 
 <script lang="ts" setup>
 import { isAddress } from "@polkadot/util-crypto";
+import { KeypairType } from "@threefold/grid_client";
 import { validateMnemonic } from "bip39";
 import Cryptr from "cryptr";
 import md5 from "md5";
@@ -433,6 +459,8 @@ interface Credentials {
   passwordHash?: string;
   mnemonicHash?: string;
 }
+const keyType = ["sr25519", "ed25519"];
+const keypairType = ref(KeypairType.sr25519);
 
 const theme = useTheme();
 
@@ -462,6 +490,15 @@ watch(
     }
   },
 );
+watch(
+  () => keypairType.value,
+  async (value, oldValue) => {
+    if (value !== oldValue) {
+      mnemonicInput.value?.validate();
+    }
+  },
+  { deep: false },
+);
 
 function mounted() {
   if (isStoredCredentials()) {
@@ -607,7 +644,7 @@ async function activate(mnemonic: string) {
   activating.value = true;
   sessionStorage.setItem("password", password.value);
   try {
-    const grid = await getGrid({ mnemonic });
+    const grid = await getGrid({ mnemonic, keypairType: keypairType.value });
     const profile = await loadProfile(grid!);
     ssh.value = profile.ssh;
     profileManager.set({ ...profile, mnemonic });
@@ -619,7 +656,7 @@ async function activate(mnemonic: string) {
 }
 
 function validateMnInput(mnemonic: string) {
-  return getGrid({ mnemonic })
+  return getGrid({ mnemonic, keypairType: keypairType.value })
     .then(() => undefined)
     .catch(e => {
       return { message: normalizeError(e, "Something went wrong. please try again.") };