multi-wallet updates

walt-id · Dec 8, 2023 · 8c3fa2e · 8c3fa2e
1 parent 86efd9c
commit 8c3fa2e
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 69 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -1,9 +1,9 @@
 import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
 
 plugins {
-    kotlin("jvm") version "1.9.10"
+    kotlin("jvm") version "1.9.21"
     id("io.ktor.plugin") version "2.3.4"
-    id("org.jetbrains.kotlin.plugin.serialization") version "1.9.10"
+    id("org.jetbrains.kotlin.plugin.serialization") version "1.9.21"
 
     id("com.github.ben-manes.versions") version "0.48.0"
 }
@@ -31,6 +31,15 @@ tasks.withType<KotlinCompile> {
     kotlinOptions.jvmTarget = "17"
 }
 
+/*java {
+    sourceCompatibility = JavaVersion.VERSION_15
+    targetCompatibility = JavaVersion.VERSION_15
+}*/
+
+kotlin {
+    jvmToolchain(17)
+}
+
 dependencies {
     // nftkit
     implementation("id.walt:waltid-nftkit:1.2310191239.0") {
@@ -133,7 +142,7 @@ dependencies {
     implementation("org.slf4j:jul-to-slf4j:2.0.9")
 
     // Test
-    testImplementation("org.jetbrains.kotlin:kotlin-test-junit:1.9.10")
+    testImplementation("org.jetbrains.kotlin:kotlin-test-junit:1.9.21")
 
     /*testImplementation("io.kotest:kotest-runner-junit5:5.5.5")
     testImplementation("io.kotest:kotest-assertions-core:5.5.5")

diff --git a/web/src/components/wallets/WalletListing.vue b/web/src/components/wallets/WalletListing.vue
@@ -0,0 +1,59 @@
+<template>
+    <ul v-if="wallets">
+        <li v-for="wallet in wallets" class="flex items-center justify-between gap-x-6 py-5">
+            <Icon class="h-7 w-7" name="heroicons:wallet" />
+            <div class="flex items-center justify-between flex-grow">
+
+                <div class="min-w-0">
+                    <div class="flex items-start gap-x-3">
+                        <p class="text-base font-semibold leading-6 text-gray-900">{{ wallet.name }}</p>
+                        <p class="rounded-md whitespace-nowrap mt-0.5 px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset">
+                            {{ wallet.permission
+                            }}</p>
+                    </div>
+                    <div class="mt-1 flex items-center gap-x-2 text-sm leading-5 text-gray-500">
+                        <p class="whitespace-nowrap">
+                            Added on
+                            <time :datetime="wallet.addedOn">{{ wallet.addedOn }}</time>
+                        </p>
+                        <svg class="h-0.5 w-0.5 fill-current" viewBox="0 0 2 2">
+                            <circle cx="1" cy="1" r="1" />
+                        </svg>
+                        <p class="whitespace-nowrap">
+                            Created on
+                            <time :datetime="wallet.createdOn">{{ wallet.createdOn }}</time>
+                        </p>
+                    </div>
+                </div>
+                <div class="flex flex-none items-center gap-x-4">
+                    <button
+                        class="flex items-center gap-1 rounded-md bg-white px-2.5 py-1.5 text-base font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+                        @click="setWallet(wallet.id)"
+                    >
+                        Select wallet
+                        <Icon class="h-5 w-5" name="heroicons:chevron-right" />
+                    </button>
+                </div>
+            </div>
+        </li>
+    </ul>
+    <LoadingIndicator v-else />
+    <p v-if="wallets && wallets.length == 0" class="mt-2">No wallets.</p>
+</template>
+
+<script lang="ts" setup>
+import { listWallets } from "~/composables/accountWallet";
+import type WalletListing from "~/components/wallets/WalletListing.vue";
+import LoadingIndicator from "~/components/loading/LoadingIndicator.vue";
+
+const wallets = (await listWallets())?.value?.wallets;
+
+defineProps<{
+    useUrl: (wallet: WalletListing) => string;
+}>();
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/web/src/composables/accountWallet.ts b/web/src/composables/accountWallet.ts
@@ -1,5 +1,3 @@
-import { $fetch } from "ofetch";
-
 export type WalletListing = {
     id: string,
     name: string
@@ -14,26 +12,32 @@ export type WalletListings = {
 }
 
 export async function listWallets() {
-    const {data} = useFetch<WalletListings>("/wallet-api/wallet/accounts/wallets")
-    return data
+    const { data, refresh } = useFetch<WalletListings>("/wallet-api/wallet/accounts/wallets");
+    await refresh()
+    return data;
 }
 
-export function setWallet(newWallet: string | null) {
-    console.log("New wallet: ", newWallet)
-    useCurrentWallet().value = newWallet
+export function setWallet(
+    newWallet: string | null,
+    redirectUri: ((walletId: string) => string) | undefined = (walletId) => `/wallet/${walletId}`
+) {
+    console.log("New wallet: ", newWallet);
+    useCurrentWallet().value = newWallet;
 
-    if (newWallet != null)
-        navigateTo(`/wallet/${newWallet}`)
+    if (newWallet != null && redirectUri != undefined)
+        navigateTo(redirectUri(newWallet));
 }
 
-export function useCurrentWallet() { return useState<string | null>("wallet", () => {
-    const currentRoute = useRoute()
-    const currentWalletId = currentRoute.params["wallet"] ?? null
+export function useCurrentWallet() {
+    return useState<string | null>("wallet", () => {
+        const currentRoute = useRoute();
+        const currentWalletId = currentRoute.params["wallet"] ?? null;
 
-    if (currentWalletId == null && currentRoute.name != "/") {
-        console.log("Error for currentWallet at: ", currentRoute)
-    } else {
-        console.log("Returning: " + currentWalletId + ", at: " + currentRoute.fullPath)
-        return currentWalletId
-    }
-}) }
+        if (currentWalletId == null && currentRoute.name != "/") {
+            console.log("Error for currentWallet at: ", currentRoute);
+        } else {
+            console.log("Returning: " + currentWalletId + ", at: " + currentRoute.fullPath);
+            return currentWalletId;
+        }
+    });
+}
diff --git a/web/src/pages/select-wallet.vue b/web/src/pages/select-wallet.vue
@@ -4,63 +4,26 @@
             <h1 class="text-lg font-semibold">Select wallet:</h1>
 
             <div class="flex justify-between gap-2">
-                <button
-                    class="inline-flex items-center bg-blue-500 hover:bg-blue-600 focus-visible:outline-blue-600 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-                    @click="createWallet"
-                >
-                    <InboxArrowDownIcon aria-hidden="true" class="h-5 w-5 text-white mr-1" />
-                    <span>Create new wallet</span>
-                </button>
+
             </div>
         </div>
-
-        <ol class="divide-y divide-gray-100 list-decimal border rounded-2xl mt-2 px-2" role="list">
-            <li v-for="wallet in wallets" :key="wallet.id" class="flex items-center justify-between gap-x-6 py-4">
-
-                <div class="min-w-0 flex items-center px-1">
-
-                    <div>
-                        <div class="">
-                            <Icon class="h-7 w-7" name="heroicons:wallet" />
-                        </div>
-                    </div>
-
-                    <div class="min-w-0">
-                        <div class="flex items-start gap-x-3">
-                            <p class="mx-2 text-base font-semibold leading-6 text-gray-900">
-                                {{ wallet.name }}
-                            </p>
-                        </div>
-                        <div class="flex items-start gap-x-3">
-                            <p class="mx-2 overflow-x-auto text-base font-normal leading-6 text-gray-500">
-                                {{ wallet.permission }}, added on {{ wallet.addedOn }}
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex flex-none items-center gap-x-4">
-                    <NuxtLink
-                        :to="'/wallet/' + wallet.id"
-                        class="hidden rounded-md bg-white px-3 py-2 text-base font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:block"
-                    >
-                        Select wallet
-                        <Icon class="h-5 w-5" name="heroicons:chevron-right" />
-                    </NuxtLink>
-                </div>
-            </li>
-        </ol>
-        <p v-if="wallets && wallets.length == 0" class="mt-2">No wallets.</p>
+        <button
+            class="inline-flex items-center bg-blue-500 hover:bg-blue-600 focus-visible:outline-blue-600 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+        >
+            <InboxArrowDownIcon aria-hidden="true" class="h-5 w-5 text-white mr-1" />
+            <span>Create new wallet</span>
+        </button>
+        <WalletListing :use-url="(wallet) => `/wallet/${wallet.id}`"/>
     </CenterMain>
 </template>
 
 <script lang="ts" setup>
 
 import { InboxArrowDownIcon } from "@heroicons/vue/24/outline";
 import CenterMain from "~/components/CenterMain.vue";
-import type { WalletListings } from "~/composables/accountWallet";
-import { listWallets } from "~/composables/accountWallet";
+import WalletListing from "~/components/wallets/WalletListing.vue";
 
-const wallets = (await listWallets()).value.wallets
+//const wallets = (await listWallets()).value.wallets
 
 // const wallets = [{
 //     name: "Wallet of X",