Add login on action

src/components/ui/tabs/Tabs.vue

+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

src/components/ui/tabs/TabsContent.vue

+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsContent, type TabsContentProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

src/components/ui/tabs/TabsList.vue

+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsList, type TabsListProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>

src/components/ui/tabs/TabsTrigger.vue

+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      props.class,
+    )"
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>

src/components/ui/tabs/index.ts

+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'

src/components/utilcards/ConfirmAccountUpdateCard.vue

@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { useSettingsStore } from '@/stores/settings.store';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { getWax } from '@/stores/wax.store';
 import { useWalletStore } from '@/stores/wallet.store';
@@ -21,6 +21,7 @@ const ownerKey = ref<string>('');
 
 const router = useRouter();
 const wallet = useWalletStore();
+const hasWallet = computed(() => wallet.hasWallet);
 
 onMounted(() => {
   creator.value = router.currentRoute.value.query.acc as string ?? (settings.account ? `@${settings.account}` : '');
@@ -37,6 +38,9 @@ const updateAuthority = async() => {
   try {
     isLoading.value = true;
 
+    if (!hasWallet.value)
+      await wallet.openWalletSelectModal();
+
     if (!memoKey.value && !postingKey.value && !activeKey.value && !ownerKey.value)
       throw new Error("Nothing to update");
 

src/components/utilcards/ConfirmCreateAccountCard.vue

@@ -8,7 +8,7 @@ import { Checkbox } from '@/components/ui/checkbox'
 import { Label } from '@/components/ui/label'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { useSettingsStore } from '@/stores/settings.store';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { getWax } from '@/stores/wax.store';
 import { useWalletStore } from '@/stores/wallet.store';
@@ -29,6 +29,7 @@ const createAccountType = ref<"default" | "claimed">("default");
 
 const router = useRouter();
 const wallet = useWalletStore();
+const hasWallet = computed(() => wallet.hasWallet);
 
 onMounted(() => {
   creator.value = settings.account ? `@${settings.account}` : '';
@@ -46,6 +47,9 @@ const createAccount = async() => {
   try {
     isLoading.value = true;
 
+    if (!hasWallet.value)
+      await wallet.openWalletSelectModal();
+
     const wax = await getWax();
     const tx = await wax.createTransaction();
     const { median_props: { account_creation_fee } } = await wax.api.database_api.get_witness_schedule({});
@@ -128,7 +132,7 @@ const createAccount = async() => {
       <div class="my-4 space-y-4">
         <div class="grid w-full max-w-sm items-center">
           <Label for="createAccount_creator">Creator Account Name</Label>
-          <Input id="createAccount_creator" v-model="creator" class="my-2" disabled />
+          <Input id="createAccount_creator" v-model="creator" class="my-2" />
         </div>
         <div class="grid w-full max-w-sm items-center">
           <Label for="createAccount_accountName">New Account Name</Label>

src/components/utilcards/MemoEncryptCard.vue

@@ -3,9 +3,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { mdiMessageLockOutline } from '@mdi/js';
 import { ref, computed } from 'vue';
 import { Textarea } from '@/components/ui/textarea';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Switch } from '@/components/ui/switch';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { useSettingsStore } from '@/stores/settings.store';
@@ -41,6 +41,9 @@ const useMyMemoKey = async () => {
   try {
     isLoading.value = true;
 
+    if (!hasWallet.value)
+      await walletStore.openWalletSelectModal();
+
     const key = await getMemoKeyForUser(settingsStore.account!);
     if (key)
       encryptForKey.value = key;
@@ -53,6 +56,9 @@ const encryptOrDecrypt = async () => {
   try {
     isLoading.value = true;
 
+    if (!hasWallet.value)
+      await walletStore.openWalletSelectModal();
+
     if (isEncrypt.value) {
       let publicKey: string;
       let accountOrKey = encryptForKey.value;
@@ -85,17 +91,22 @@ const encryptOrDecrypt = async () => {
       <CardDescription class="mr-8">Use this module to encrypt / decrypt given message using your memo key for any purpose</CardDescription>
     </CardHeader>
     <CardContent>
-      <div class="my-4 space-x-4 flex">
-        <span>Decrypt</span>
-        <Switch v-model="isEncrypt" />
-        <span>Encrypt</span>
-      </div>
+      <Tabs default-value="decrypt" @update:model-value="value => isEncrypt = value === 'encrypt'">
+        <TabsList>
+          <TabsTrigger value="decrypt">
+            Decrypt
+          </TabsTrigger>
+          <TabsTrigger value="encrypt">
+            Encrypt
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
       <Textarea v-model="inputData" placeholder="Input" class="my-4"/>
       <Input v-model="encryptForKey" v-if="isEncrypt" placeholder="Receiver account or public key" class="mt-4"/>
       <div class="flex mb-4 underline text-sm" v-if="isEncrypt">
         <a @click="useMyMemoKey" class="ml-auto mr-1 cursor-pointer" style="color: hsla(var(--foreground) / 70%)">Use my memo key</a>
       </div>
-      <Button :loading="isLoading" :disabled="!hasWallet || (!encryptForKey && isEncrypt)" @click="encryptOrDecrypt">{{ isEncrypt ? "Encrypt" : "Decrypt" }}</Button>
+      <Button :loading="isLoading" :disabled="(!encryptForKey && isEncrypt)" @click="encryptOrDecrypt">{{ isEncrypt ? "Encrypt" : "Decrypt" }}</Button>
       <Textarea v-model="outputData" placeholder="Output" copy-enabled class="my-4" disabled/>
     </CardContent>
   </Card>

src/components/utilcards/SignTransactionCard.vue

@@ -27,6 +27,9 @@ const sign = async () => {
   try {
     isLoading.value = true;
 
+    if (!hasWallet.value)
+      await walletStore.openWalletSelectModal();
+
     try {
       JSON.parse(inputData.value);
     } catch (error) {
@@ -98,7 +101,7 @@ onMounted(() => {
     <CardContent>
       <Textarea v-model="inputData" placeholder="Transaction in API JSON form" class="my-4"/>
       <div class="my-4 space-x-4">
-        <Button :disabled="!inputData || !hasWallet || isBroadcasting" :loading="isLoading" @click="sign">Sign transaction</Button>
+        <Button :disabled="!inputData || isBroadcasting" :loading="isLoading" @click="sign">Sign transaction</Button>
       </div>
       <Textarea v-model="outputData" placeholder="Signed transaction" copy-enabled class="my-4" disabled/>
       <div class="my-4 space-x-4">

src/stores/wallet.store.ts

@@ -5,7 +5,9 @@ import { useMetamaskStore } from "./metamask.store";
 import { createKeychainWalletFor } from "@/utils/wallet/keychain";
 import { createPeakVaultWalletFor } from "@/utils/wallet/peakvault";
 
-let intervalId: NodeJS.Timeout | undefined;
+let walletRetrievalIntervalId: NodeJS.Timeout | undefined;
+
+const intervalIds = new Set<NodeJS.Timeout>();
 
 export const useWalletStore = defineStore('wallet', {
   state: () => ({
@@ -20,7 +22,7 @@ export const useWalletStore = defineStore('wallet', {
   getters: {
     hasWallet: state => !!state.wallet,
     walletsStatus: state => {
-      if (!intervalId) {
+      if (!walletRetrievalIntervalId) {
         const metamaskStore = useMetamaskStore();
 
         const checkForWallets = () => {
@@ -29,7 +31,7 @@ export const useWalletStore = defineStore('wallet', {
           state._walletsStatus.peakvault = "peakvault" in window;
         };
 
-        intervalId = setInterval(checkForWallets, 1000);
+        walletRetrievalIntervalId = setInterval(checkForWallets, 1000);
         checkForWallets();
       }
 
@@ -39,6 +41,18 @@ export const useWalletStore = defineStore('wallet', {
   actions: {
     openWalletSelectModal() {
       this.isWalletSelectModalOpen = true;
+
+      // Allow functionality of waiting for wallet to be added / selected
+      return new Promise<void>(resolve => {
+        let intervalId: NodeJS.Timeout;
+        intervalIds.add(intervalId = setInterval(() => {
+          if (this.wallet && !this.isWalletSelectModalOpen) {
+            clearInterval(intervalId);
+            intervalIds.delete(intervalId);
+            resolve();
+          }
+        }, 1000));
+      });
     },
     closeWalletSelectModal() {
       this.isWalletSelectModalOpen = false;