add wallet accounts management

resources/js/components/SignTransaction.vue

@@ -38,7 +38,7 @@
             </div>
             <div v-else-if="!loadingApi && !signing" class="flex flex-col space-y-2 animate-fade-in">
                 <div
-                    v-for="account in connectionStore.accounts"
+                    v-for="account in walletAccounts"
                     :key="account.address"
                     class="px-4 py-3 border border-light-stroke-strong dark:border-dark-stroke-strong rounded-md cursor-pointer hover:bg-primary/20 transition-all flex items-center space-x-4"
                     @click="selectAccount(account)"
@@ -51,7 +51,7 @@
                         </span>
                     </div>
                 </div>
-                <div v-if="!connectionStore.accounts?.length" class="text-center">
+                <div v-if="!walletAccounts.length" class="text-center">
                     <span class="text-sm text-light-content dark:text-dark-content">
                         No accounts found. Please connect your wallet.
                     </span>
@@ -71,7 +71,7 @@ import Btn from './Btn.vue';
 import Modal from './Modal.vue';
 import { addressShortHex } from '~/util/address';
 import { useTransactionStore } from '~/store/transaction';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import LoadingCircle from './LoadingCircle.vue';
 import snackbar from '~/util/snackbar';
 import Identicon from './Identicon.vue';
@@ -95,6 +95,8 @@ const signing = ref(false);
 const transactionStore = useTransactionStore();
 const connectionStore = useConnectionStore();
 
+const walletAccounts = computed(() => connectionStore.getWalletAccounts());
+
 const signTransaction = async () => {
     try {
         if (!connectionStore.provider) {

resources/js/components/WalletConnectButton.vue

@@ -112,7 +112,7 @@ const connectWallet = async (provider: string) => {
         });
         await connectionStore.getAccounts();
         const localAccounts = connectionStore.accounts.map((account) => publicKeyToAddress(account.address));
-        const walletAccounts = useAppStore().user?.walletAccounts?.map((account) => publicKeyToAddress(account));
+        const walletAccounts = useAppStore().user?.walletAccounts?.map((account) => publicKeyToAddress(account)) ?? [];
         const uniqueAccounts = [...new Set([...walletAccounts, ...localAccounts])];
 
         AuthApi.setUserAccounts(uniqueAccounts);

resources/js/components/pages/SettingsWalletApp.vue

@@ -6,9 +6,9 @@
                     <div>
                         <div class="space-y-3">
                             <div class="flex space-x-4 items-center">
-                                <span class="text-light-content dark:text-dark-content text-sm"
-                                    >You are connected with {{ walletName }}</span
-                                >
+                                <span class="text-light-content dark:text-dark-content text-sm">
+                                    You are connected with {{ walletName }}
+                                </span>
                                 <button
                                     id="wallet-connect-button__disconnect"
                                     class="flex items-center space-x-2 rounded-md bg-primary py-1 px-2 md:py-2 md:px-3 text-sm font-semibold shadow-sm outline-none focus:outline-none focus:ring-0 focus:ring-offset-1 text-white transition-all"
@@ -27,16 +27,17 @@
                             </p>
                         </div>
                         <div class="flex flex-col space-y-4 mt-4">
-                            <label
-                                v-for="account in userWalletAccounts"
-                                :key="account"
-                                class="text-light-content dark:text-dark-content bg-light-surface-background dark:bg-dark-surface-background hover:text-white hover:bg-light-surface-brand text-sm rounded-md mr-auto p-2 cursor-pointer transition-all"
-                                name="walletAccount"
-                                disabled
-                                @click="copyText(account)"
-                            >
-                                {{ account }}
-                            </label>
+                            <template v-if="loadingAccounts">
+                                <LoadingCircle class="mt-4" :size="42" />
+                            </template>
+                            <template v-else>
+                                <WalletAppItem
+                                    v-for="item in userWalletAccounts"
+                                    :key="item.account"
+                                    :account="item.account"
+                                    :enabled="item.enabled"
+                                />
+                            </template>
                         </div>
                     </div>
                 </template>
@@ -54,30 +55,22 @@
 </template>
 
 <script lang="ts" setup>
-import snackbar from '~/util/snackbar';
 import CollapseCard from '../CollapseCard.vue';
-import { computed, watch } from 'vue';
-import { useAppStore } from '~/store';
+import { computed, ref, watch } from 'vue';
 import { useConnectionStore } from '~/store/connection';
 import WalletConnectButton from '../WalletConnectButton.vue';
-import { publicKeyToAddress } from '~/util/address';
+import WalletAppItem from './WalletAppItem.vue';
+import LoadingCircle from '../LoadingCircle.vue';
 
-const appStore = useAppStore();
 const connectionStore = useConnectionStore();
 
+const loadingAccounts = ref(false);
+
 const connected = computed(() => connectionStore.wallet);
-const userWalletAccounts = computed(
-    () =>
-        appStore.user?.walletAccounts || connectionStore.accounts?.map((account) => publicKeyToAddress(account.address))
-);
+const userWalletAccounts = computed(() => connectionStore.getWalletAccounts());
 
 const originUrl = window.location.origin;
 
-const copyText = (text: string) => {
-    navigator.clipboard.writeText(text);
-    snackbar.info({ title: 'Copied to clipboard!' });
-};
-
 const disconnectWallet = async () => {
     await connectionStore.disconnectWallet();
 };
@@ -92,9 +85,11 @@ const walletName = computed(() => {
     return '';
 });
 
-watch(connected, () => {
+watch(connected, async () => {
     if (connected.value) {
-        connectionStore.getAccounts();
+        loadingAccounts.value = true;
+        await connectionStore.getAccounts();
+        loadingAccounts.value = false;
     }
 });
 </script>

resources/js/components/pages/WalletAppItem.vue

@@ -0,0 +1,43 @@
+<template>
+    <div
+        class="text-light-content dark:text-dark-content bg-light-surface-background dark:bg-dark-surface-background text-sm rounded-md p-2 cursor-pointer transition-all w-full flex justify-between items-center"
+        name="walletAccount"
+        disabled
+    >
+        <span @click="copyText(account)">
+            {{ account }}
+        </span>
+
+        <Btn
+            class="!bg-opacity-90 text-white"
+            :class="{
+                '!bg-green-500': !props.enabled,
+                '!bg-red-500': props.enabled,
+            }"
+            @click.prevent="enableAccount"
+        >
+            {{ props.enabled ? 'Disconnect' : 'Connect' }}
+        </Btn>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import snackbar from '~/util/snackbar';
+import Btn from '../Btn.vue';
+import { useConnectionStore } from '~/store/connection';
+
+const props = defineProps<{
+    account: string;
+    enabled: boolean;
+}>();
+
+const copyText = (text: string) => {
+    navigator.clipboard.writeText(text);
+    snackbar.info({ title: 'Copied to clipboard!' });
+};
+
+const enableAccount = () => {
+    useConnectionStore().enableWalletAccount(props.account);
+    snackbar.success({ title: !props.enabled ? 'Wallet account enabled.' : 'Wallet account disabled.' });
+};
+</script>

resources/js/store/connection.ts

@@ -37,9 +37,10 @@ export const useConnectionStore = defineStore('connection', {
         walletSession: null,
         account: null,
         accounts: null,
+        disabledAccounts: [],
     }),
     persist: {
-        paths: ['provider'],
+        paths: ['provider', 'disabledAccounts'],
     },
     actions: {
         getWeb3Modal() {
@@ -226,5 +227,33 @@ export const useConnectionStore = defineStore('connection', {
 
             return [...new Set(accounts)];
         },
+        getWalletAccounts() {
+            let accounts =
+                useAppStore().user?.walletAccounts ||
+                this.accounts?.map((account) => publicKeyToAddress(account.address));
+            try {
+                accounts = accounts?.map((account) => {
+                    if (this.disabledAccounts?.find((disabled) => disabled === account)) {
+                        return { account, enabled: false };
+                    }
+
+                    return { account, enabled: true };
+                });
+            } catch {
+                //
+            }
+
+            return accounts;
+        },
+        enableWalletAccount(account: string) {
+            if (!this.disabledAccounts) {
+                this.disabledAccounts = [];
+            }
+            if (!this.disabledAccounts.find((disabled) => disabled === account)) {
+                this.disabledAccounts.push(account);
+            } else {
+                this.disabledAccounts = this.disabledAccounts.filter((disabled) => disabled !== account);
+            }
+        },
     },
 });

resources/js/types/types.interface.ts

@@ -34,6 +34,7 @@ export interface ConnectionState {
     walletSession: any;
     account: any;
     accounts: any;
+    disabledAccounts: any;
 }
 
 export interface TransactionState {