add wallet accounts

resources/js/api/auth.ts

@@ -155,4 +155,15 @@ export class AuthApi {
 
         return AuthApi.sendPlatfromRequest(data);
     }
+
+    static async setUserAccounts(accounts: string) {
+        const data = {
+            query: mutations.UpdateUser,
+            variables: {
+                walletAccounts: accounts,
+            },
+        };
+
+        return AuthApi.sendPlatfromRequest(data);
+    }
 }

resources/js/components/App.vue

@@ -22,8 +22,9 @@ import SideNavbar from '~/components/SideNavbar.vue';
 import SupportButton from '~/components/SupportButton.vue';
 import SnackbarGroup from '~/components/SnackbarGroup.vue';
 import UserNavbar from '~/components/UserNavbar.vue';
-import { computed, watch } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { useConnectionStore } from '~/store/connection';
 
 const appStore = useAppStore();
 const router = useRouter();
@@ -54,6 +55,10 @@ const initialTheme = () => {
     }
 })();
 
+onMounted(() => {
+    useConnectionStore().loadWallet();
+});
+
 watch(
     () => appStore.theme,
     () => {

resources/js/components/CollapseCard.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="bg-light-surface-primary dark:bg-dark-surface-primary shadow rounded-lg">
         <div
-            class="flex divide-x divide-light-stroke dark:divide-dark-stroke transition-all"
-            :class="{ 'border-b border-light-stroke dark:border-dark-stroke': open }"
+            class="flex divide-x divide-light-stroke dark:divide-dark-stroke transition-all border-light-stroke dark:border-dark-stroke"
+            :class="{ 'border-b': open }"
         >
             <div
                 class="flex justify-between px-4 py-5 flex-1 cursor-pointer text-light-content-strong dark:text-dark-content-strong"

resources/js/components/WalletConnectButton.vue

@@ -73,11 +73,13 @@ import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
 import ScaleTransition from './ScaleTransition.vue';
 import snackbar from '~/util/snackbar';
 import { useConnectionStore } from '~/store/connection';
+import { publicKeyToAddress } from '~/util/address';
+import { AuthApi } from '~/api/auth';
 
 const connectionStore = useConnectionStore();
 
 const loading = ref(false);
-const showAccountsModal = ref(false);
+
 const walletName = computed(() => {
     if (connectionStore.provider === 'wc') {
         return 'Enjin Wallet';
@@ -96,9 +98,9 @@ const connectWallet = async (provider: string) => {
         await connectionStore.connectWallet(provider, () => {
             loading.value = false;
         });
-        if (connectionStore.accounts) {
-            showAccountsModal.value = true;
-        }
+        await connectionStore.getAccounts();
+        const accounts = connectionStore.accounts.map((account) => publicKeyToAddress(account.address))
+        AuthApi.setUserAccounts(accounts);
     } catch {
         snackbar.error({ title: 'Failed to connect the wallet' });
     } finally {

resources/js/components/pages/SettingsWalletAccount.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="walletAccount" class="p-6">
+    <div class="p-6">
         <h1 class="text-xl text-light-content-strong dark:text-dark-content-strong">Wallet Account</h1>
         <p class="mt-1 text-sm text-light-content dark:text-dark-content max-w-3xl">
             The platform depends on there being a funded wallet daemon account setup and connected to the platform and

resources/js/graphql/mutation/auth/UpdateUser.ts

@@ -1,3 +1,3 @@
-export default `mutation UpdateUser($email: String, $password: String) {
-    UpdateUser(email: $email, password: $password)
+export default `mutation UpdateUser($email: String, $password: String, $walletAccounts: [String!]) {
+    UpdateUser(email: $email, password: $password, walletAccounts: $walletAccounts)
   }`;

resources/js/store/connection.ts

@@ -9,6 +9,8 @@ import { wcNamespaces, wcProjectId } from '~/util/constants';
 import { useAppStore } from '.';
 import snackbar from '~/util/snackbar';
 import { Web3Modal, Web3ModalConfig } from '@web3modal/standalone';
+import { AuthApi } from '~/api/auth';
+import { publicKeyToAddress } from '~/util/address';
 
 export const PrivacyPolicyLink = 'https://nft.io/legal/privacy-policy';
 export const TermsOfServiceLink = 'https://nft.io/legal/terms-of-service';
@@ -44,6 +46,16 @@ export const useConnectionStore = defineStore('connection', {
         getWeb3Modal() {
             return new Web3Modal(walletConnectWeb3modalConfig);
         },
+        async loadWallet() {
+            if (this.provider) {
+                await this.connectWallet(this.provider, () => {});
+                if (!this.wallet) {
+                    return;
+                }
+                await this.getAccounts();
+                AuthApi.setUserAccounts(this.accounts.map((account) => publicKeyToAddress(account.address)));
+            }
+        },
         async connectWallet(provider: string, endLoading: Function) {
             if (provider === 'wc') {
                 await this.connectWC(endLoading);

resources/js/util/index.ts

@@ -112,9 +112,9 @@ export const checkFormatPrice = (price, listing, currency) => {
     if (
         listing &&
         (listing.makeAssetId.collectionId !== '0' ||
-        listing.makeAssetId.tokenId !== '0' ||
-        listing.takeAssetId.tokenId !== '0' ||
-        listing.takeAssetId.collectionId !== '0')
+            listing.makeAssetId.tokenId !== '0' ||
+            listing.takeAssetId.tokenId !== '0' ||
+            listing.takeAssetId.collectionId !== '0')
     ) {
         return `${formatPriceFromENJ(price)?.toLocaleString('en-US', {
             maximumFractionDigits: 18,