FE fixes

Author: urko94

frontend/components/parts/form/Claim.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { useMessage } from 'naive-ui';
 import { createPublicClient, http, isErc6492Signature } from 'viem';
-import SuccessSVG from '~/assets/images/success.svg';
 import { ClaimType } from '~/lib/values/general.values';
 
 const props = defineProps({
@@ -85,15 +84,11 @@ async function claim() {
 </script>
 
 <template>
-  <div class="max-w-md w-full md:px-6 my-12 mx-auto">
-    <img :src="SuccessSVG" class="mx-auto" width="165" height="169" alt="airdrop" />
-
+  <div class="max-w-md w-full md:px-9 my-12 mx-auto">
     <div class="my-8 text-center">
-      <h3 class="mb-6">Great Success!</h3>
-      <p>
-        Minting your NFT is almost done. Please sign the message with your wallet to confirm ownership of the wallet and
-        claim your NFT.
-      </p>
+      <NuxtIcon name="icon/cube" class="inline-block icon-auto text-9xl lg:text-[150px]" filled />
+      <h1 class="mt-4 mb-6 lg:text-3xl">Your NFT is ready for you</h1>
+      <p>Click below to reveal your unique digital collectible.</p>
     </div>
     <Btn size="large" :loading="loading" :disabled="walletUsed" @click="claim()">Claim NFT</Btn>
   </div>

frontend/components/parts/form/Share.vue

@@ -19,25 +19,24 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="metadata" class="max-w-md w-full md:px-6 mx-auto">
-    <div class="mb-8 text-center">
-      <h3 v-if="txHash">Just minted my #{{ metadata.name }} NFT on Apillon!</h3>
-      <h3 v-else>Already minted your #{{ metadata.name }} NFT on Apillon!</h3>
+  <div v-if="metadata" class="max-w-md w-full md:px-2 mx-auto">
+    <div v-if="txHash || true" class="mb-8 text-center">
+      <NuxtIcon name="icon/success" class="inline-block text-3xl text-green" filled />
+      <h4>Great success!</h4>
+      <p class="text-bg-bg">Your NFT has been successfully minted. Share it with the world!</p>
     </div>
+    <h1 class="my-4 text-center lg:text-3xl">Your NFT</h1>
 
-    <div class="rounded-lg overflow-hidden mb-6">
+    <div class="rounded-lg overflow-hidden mb-6 max-w-64 mx-auto">
       <div v-if="loading" class="w-full h-40 flex-cc">
         <Spinner :size="36" />
       </div>
       <img v-else-if="imageLink" :src="imageLink" class="w-full" alt="nft" />
 
-      <div class="p-6 bg-grey-dark text-white">
-        <h5>{{ metadata.name }}</h5>
+      <div class="p-3 bg-grey-dark rounded-b-lg text-white">
+        <span class="text-cs">{{ metadata.name }}</span>
       </div>
       <div class="mt-4 text-center">
-        <p class="mb-4">{{ metadata.description }}</p>
-
-        <!-- Transaction -->
         <a
           v-if="txHash"
           :href="transactionLink(txHash, config.public.CHAIN_ID)"

frontend/components/parts/form/Wallet.vue

@@ -28,13 +28,14 @@ function connectWallet(conn: Connector<CreateConnectorFn>) {
 </script>
 
 <template>
-  <div class="max-w-md w-full md:px-6 my-12 mx-auto text-center">
+  <div class="max-w-md w-full md:px-4 my-12 mx-auto text-center">
     <NuxtIcon name="icon/studio" class="text-3xl inline-block" />
 
     <h1 class="my-4">{{ claimTypeName }}</h1>
     <div>
-      <strong>Email the magic. Earn the trust.</strong><br />
-      Turn leads into fans - and fans into believers.
+      <strong> You’ll need a secure wallet to receive and manage your NFT.</strong><br />
+
+      No wallet yet? Use Apillon Embedded wallet - no tricky setup, no stress.
     </div>
 
     <hr class="my-4 border-grey-transparent dark:border-bg-lighter" />

frontend/pages/claim.vue

@@ -3,7 +3,6 @@ import type { Events } from '@apillon/wallet-sdk';
 import { useWallet } from '@apillon/wallet-vue';
 import { useMessage } from 'naive-ui';
 import { isErc6492Signature } from 'viem';
-import SuccessSVG from '~/assets/images/success.svg';
 import { ClaimType } from '~/lib/values/general.values';
 
 definePageMeta({
@@ -93,20 +92,16 @@ function onClaim(metadata: Metadata, txHash?: string) {
     </p>
   </div>
   <FormShare v-else-if="metadata" :metadata="metadata" />
-  <div v-else-if="!connected" class="max-w-md w-full md:px-6 my-12 mx-auto">
-    <img :src="SuccessSVG" class="mx-auto" width="165" height="169" alt="airdrop" />
-
+  <div v-else-if="!connected" class="max-w-md w-full md:px-9 my-12 mx-auto">
     <div class="my-8 text-center">
-      <h3 class="mb-6">Great Success!</h3>
-      <p>
-        To join this NFT airdrop, you need to connect your EVM compatible wallet. This step is crucial for securely
-        receiving and managing the airdropped NFTs.
-      </p>
+      <NuxtIcon name="icon/cube" class="inline-block icon-auto text-9xl lg:text-[150px]" filled />
+      <h1 class="mt-4 mb-6 lg:text-3xl">Your NFT is ready for you</h1>
+      <p>Click below to reveal your unique digital collectible.</p>
     </div>
 
     <ConnectWallet size="large" />
   </div>
-  <div v-else-if="isWhitelist && !walletSignature" class="max-w-md w-full md:px-6 my-12 mx-auto">
+  <div v-else-if="isWhitelist && !walletSignature" class="max-w-md w-full md:px-9 my-12 mx-auto">
     <Btn size="large" :loading="loading" @click="validateWallet()"> Wallet eligibility check </Btn>
   </div>
   <NftCountdown v-else-if="timeToStart > 0" :timestamp="config.public.CLAIM_START" />

frontend/pages/index.vue

@@ -31,8 +31,8 @@ function openEmbeddedWallet() {
     <div class="my-8 text-center max-w-xl mx-auto">
       <h6 class="mb-2 font-semibold">Having trouble logging in?</h6>
       <p class="text-black">
-        Only those with secret handshake (the designated wallet) can enter. Contact the master who set up your NFT
-        Studio to request access.
+        Only those with secret handshake (the designated wallet) can enter. Contact the master who set up your Simplet
+        to request access.
       </p>
     </div>
     <Footer />