UI fixes

Author: urko94

frontend/components/parts/ConnectWallet.vue

@@ -30,11 +30,10 @@
   >
     <FormWallet :admin="admin">
       <template v-if="!!config.public.EMBEDDED_WALLET_CLIENT">
-        <small v-if="!admin">Dont have a wallet?</small>
-        <Btn type="secondary" size="large" @click="openWallet">
+        <Btn class="relative" type="secondary" size="large" @click="openWallet">
           <span class="mr-1">▶◀</span> Apillon Embedded Wallet
+          <Tag v-if="!admin" class="absolute -right-4 top-0 rotate-12 z-10" type="info">No setup needed</Tag>
         </Btn>
-        <small v-if="!admin">Connect your existing wallet to get started:</small>
       </template>
     </FormWallet>
   </modal>
@@ -43,7 +42,7 @@
 <script lang="ts" setup>
 import type { Size } from 'naive-ui/es/button/src/interface';
 import { useAccountEffect, useChains } from '@wagmi/vue';
-import { EmbeddedWallet, useWallet } from '@apillon/wallet-vue';
+import { EmbeddedWallet, useWallet, useAccount } from '@apillon/wallet-vue';
 
 const props = defineProps({
   admin: { type: Boolean, default: false },
@@ -53,6 +52,7 @@ const props = defineProps({
 const config = useRuntimeConfig();
 const authStore = useAuthStore();
 const chains = useChains();
+const { info } = useAccount();
 const { wallet } = useWallet();
 const { loading, modalWalletVisible, network, connected, walletAddress, disconnectWallet, initEmbeddedWallet, login } =
   useWalletConnect();
@@ -70,9 +70,19 @@ watch(
     }
   }
 );
+watch(
+  () => info.activeWallet?.address,
+  address => {
+    if (address && props.admin) {
+      login();
+    }
+  }
+);
 
 function openWallet() {
-  if (wallet.value) {
+  if (info.activeWallet?.address && props.admin) {
+    login();
+  } else if (wallet.value) {
     wallet.value.events.emit('open', true);
     modalWalletVisible.value = false;
   }

frontend/components/parts/PreviewUpload.vue

@@ -23,7 +23,10 @@
           <p class="mt-2 text-xs">Your balance: {{ userStore.balance }} credits</p>
         </div>
       </div>
-      <Btn size="large" type="primary" @click="deploy()"> Send minting invites </Btn>
+      <Btn size="large" type="primary" @click="deploy()">
+        <span v-if="isMethodWallet">Send NFTs</span>
+        <span v-else>Send minting invites</span>
+      </Btn>
     </div>
   </div>
 

frontend/composables/useWalletConnect.ts

@@ -1,4 +1,4 @@
-import type { Events } from '@apillon/wallet-sdk';
+import { WalletDisconnectedError, type Events } from '@apillon/wallet-sdk';
 import type { Config } from '@wagmi/vue';
 import type { Address } from 'viem';
 import { signMessage } from '@wagmi/vue/actions';
@@ -72,7 +72,11 @@ export default function useWalletConnect() {
     if (isConnected.value) {
       disconnect();
     } else if (wallet.value && info.activeWallet?.address) {
-      wallet.value?.events.emit('disconnect');
+      try {
+        wallet.value?.events.emit('disconnect', { error: new WalletDisconnectedError() });
+      } catch (e) {
+        console.error(e);
+      }
     }
   }
 

frontend/layouts/poap.vue

@@ -5,7 +5,10 @@
         <div ref="headerRef">
           <Header logo-center />
         </div>
-        <div class="container max-w-6xl py-8 flex flex-col justify-center box-border" :style="containerStyle">
+        <div
+          class="container max-w-6xl py-8 flex flex-col justify-center box-border"
+          :style="{ minHeight: `calc(100vh - ${height}px)` }"
+        >
           <slot />
         </div>
         <div ref="footerRef" class="justify-center">
@@ -32,12 +35,6 @@ const height = ref<number>(0);
 const headerRef = ref<HTMLElement>();
 const footerRef = ref<HTMLElement>();
 
-const containerStyle = computed(() => {
-  return {
-    minHeight: `calc(100vh - ${height.value}px)`,
-  };
-});
-
 onMounted(() => {
   setHeight();
 });