Mobile fixes, MetaMask fix on mobile, twitter share

assets/styles/_naive-ui.css

@@ -55,7 +55,7 @@
 
 /** Container */
 .container {
-  @apply md:px-20;
+  @apply px-8 md:px-20;
 }
 
 /** Date picker */
@@ -135,8 +135,7 @@
 }
 #kalm .nuxt-icon {
   &.icon-auto svg {
-    width: auto;
-    height: auto;
+    @apply w-auto h-auto max-w-full;
   }
   svg {
     margin-bottom: 0;

assets/styles/_overwrites.css

@@ -6,8 +6,17 @@
 
     &__piece {
       @apply relative bg-pink-dark rounded-2xl mx-0 w-20 pt-4 pb-3;
+    }
+
+    &__slot {
+      @apply text-xs  lowercase;
+    }
 
-      &:not(:last-child) {
+    .no-animation__card {
+      @apply font-bold;
+    }
+    @screen md {
+      .flip-clock__piece:not(:last-child) {
         &::before,
         &::after {
           content: '';
@@ -21,13 +30,5 @@
         }
       }
     }
-
-    &__slot {
-      @apply text-xs  lowercase;
-    }
-
-    .no-animation__card {
-      @apply font-bold;
-    }
   }
 }

components/general/Modal.vue

@@ -17,7 +17,7 @@ defineEmits(['close']);
 <template>
   <n-modal
     v-bind="$attrs"
-    class="min-w-full max-w-full border border-solid border-tq bg-white bg-gradient-pink xs:min-w-[400px] sm:min-w-[487px]"
+    class="w-full max-w-[90vw] md:max-w-xl border border-solid border-tq bg-white bg-gradient-pink xs:min-w-[400px] sm:min-w-[487px]"
   >
     <div class="relative" :class="innerClass || 'px-3 py-6 sm:p-10'">
       <!-- Close Button -->

components/parts/Gavin.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="text-center my-8">
     <div
-      class="inline-block mx-auto bg-gradient-orange border-2 border-border rounded-xl px-6 py-20"
+      class="inline-block mx-auto bg-gradient-orange border-2 border-border rounded-xl px-6 py-12 sm:py-16 md:py-20"
     >
       <img :src="GavinJPG" alt="Gavin" width="384" />
     </div>

components/parts/Header.vue

@@ -3,11 +3,11 @@
     <nav class="container py-5 flex gap-8 justify-between items-center">
       <div class="py-2">
         <a href="https://dotispink.xyz/" target="_blank" class="inline-flex">
-          <NuxtIcon name="pink-favicon" class="icon-auto" filled />
-          <span class="inline-block ml-2 text-2xl font-bold">got pink?</span>
+          <NuxtIcon name="pink-favicon" class="icon-auto min-w-[40px]" filled />
+          <span class="inline-block ml-2 text-2xl font-bold text-nowrap">got pink?</span>
         </a>
       </div>
-      <div>
+      <div class="text-right">
         <ConnectWallet />
       </div>
     </nav>

components/parts/form/Wallet.vue

@@ -7,7 +7,7 @@ const { connect, connectors, pendingConnector } = useConnect();
 
 <template>
   <div class="max-w-md w-full md:px-6 my-12 mx-auto">
-    <img :src="WalletSVG" class="mx-auto" width="241" height="240" alt="wallet" />
+    <img :src="WalletSVG" class="mx-auto h-32 md:h-auto" width="241" height="240" alt="wallet" />
 
     <div class="my-8 text-center">
       <h3 class="mb-6 text-black">Choose wallet</h3>
@@ -24,7 +24,6 @@ const { connect, connectors, pendingConnector } = useConnect();
         type="secondary"
         size="large"
         :loading="connector.id === pendingConnector?.id"
-        :disabled="!connector.ready"
         @click="connect({ connector })"
       >
         <span class="inline-flex gap-2 items-center">

lib/utils/helpers.ts

@@ -74,3 +74,25 @@ export function areArraysEqual(a1: any, a2: any, sorted = false) {
 export function copyToClipboard(text: string) {
   navigator.clipboard.writeText(text);
 }
+
+/**
+ * OG data
+ */
+export function prepareOG(
+  title = 'PINK PASS',
+  description = 'The Pink Pass grants access to the Pink gaming tournament, enabling participants to earn PINK Points. PINK is a Polkadot meme coin issued on AssetHub.',
+  image = '/images/super-gavin.jpg',
+  url = 'https://nft.dotispink.xyz/'
+) {
+  return {
+    title,
+    ogTitle: title,
+    twitterTitle: title,
+    description,
+    ogDescription: description,
+    twitterDescription: description,
+    ogImage: image,
+    twitterImage: image,
+    ogUrl: url,
+  };
+}

nuxt.config.ts

@@ -19,7 +19,8 @@ const meta = {
   title: 'PINK PASS',
   description:
     'The Pink Pass grants access to the Pink gaming tournament, enabling participants to earn PINK Points. PINK is a Polkadot meme coin issued on AssetHub.',
-  url: 'https://apillon.io/',
+  url: 'https://nft.dotispink.xyz/',
+  image: '/images/super-gavin.jpg',
 };
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
@@ -94,12 +95,13 @@ export default defineNuxtConfig({
         { name: 'og:title', content: meta.title, hid: 'og:title' },
         { name: 'og:description', content: meta.description, hid: 'og:description' },
         { name: 'og:url', content: meta.url, hid: 'og:url' },
-        // { name: 'og:image', content: meta.image },
+        { name: 'og:image', content: meta.image },
         { name: 'og:type', content: 'website' },
         { name: 'twitter:title', content: meta.title, hid: 'twitter:title' },
         { name: 'twitter:description', content: meta.description, hid: 'twitter:description' },
         { name: 'twitter:url', content: meta.url, hid: 'twitter:url' },
         { name: 'twitter:card', content: 'summary_large_image' },
+        { name: 'twitter:image', content: meta.image },
       ],
 
       link: [{ rel: 'icon', type: 'image/png', href: '/images/favicon.png' }],

pages/index.vue

@@ -5,33 +5,21 @@ useHead({
   title: 'PINK PASS',
 });
 
-const { address, isConnected } = useAccount();
-const metadata = ref<Metadata | null>(null);
-const txHash = ref<string | undefined>();
-
-watch(
-  () => address.value,
-  walletAddress => {
-    if (!walletAddress) {
-      metadata.value = null;
-    }
-  }
-);
+const router = useRouter();
+const { isConnected } = useAccount();
 
 function onClaim(m: Metadata, hash?: string) {
-  metadata.value = m;
-  txHash.value = hash;
+  router.push({ name: 'share', query: { ...m, txHash: hash } });
 }
 </script>
 
 <template>
   <div>
-    <div class="text-center m-10 mb-4">
+    <div class="text-center m-6 md:m-10 mb-4">
       <NuxtIcon name="pink-logo" class="inline-flex icon-auto mx-auto" filled />
     </div>
 
-    <FormShare v-if="metadata" :metadata="metadata" :tx-hash="txHash" />
-    <div v-else class="max-w-md w-full md:px-6 mx-auto pb-8">
+    <div class="max-w-md w-full md:px-6 mx-auto pb-8">
       <NftCountdown
         :start="($config.public.CLAIM_START + 60) * 1000"
         :end="$config.public.CLAIM_END * 1000"

components/parts/form/Share.vue → pages/share.vue

@@ -1,12 +1,36 @@
 <script lang="ts" setup>
+import { prepareOG } from '~/lib/utils/helpers';
 import { Environments } from '~/lib/values/general.values';
 
-defineProps({
-  metadata: { type: Object as PropType<Metadata>, default: null },
-  txHash: { type: String, default: null },
+useHead({
+  title: 'PINK PASS',
 });
 
+const router = useRouter();
+const { query, fullPath } = useRoute();
 const config = useRuntimeConfig();
+
+useSeoMeta(
+  prepareOG(
+    `Just minted my ${query.name} NFT on https://nft.dotispink.xyz!`,
+    `🚀 $PINK @pinkonomic #NFTs`,
+    `${query.image}`
+  )
+);
+
+onBeforeMount(() => {
+  if (!query.name || !query.image) {
+    router.push('/');
+  }
+});
+
+const metadata = ref<Metadata | null>({
+  name: `${query?.name}`,
+  description: `${query?.description}`,
+  image: `${query?.image}`,
+});
+const txHash = ref<string | undefined>(`${query?.txHash}`);
+
 const scanUrl =
   config.public.ENV === Environments.prod
     ? 'https://etherscan.io/tx/'
@@ -16,8 +40,8 @@ const scanUrl =
 <template>
   <div v-if="metadata" class="max-w-md w-full md:px-6 my-12 mx-auto">
     <div class="my-8 text-center">
-      <h3 class="mb-6">Celebrate your triumph!</h3>
-      <p>Display Your '{{ metadata.name }}' NFT Collectible on Social Media for All to Envy.</p>
+      <h3 class="mb-6">Just minted my #{{ metadata.name }} NFT on nft.dotispink.xyz!</h3>
+      <p>🚀 $PINK @pinkonomic #NFTs</p>
     </div>
 
     <div class="rounded-lg overflow-hidden mb-8">
@@ -29,7 +53,7 @@ const scanUrl =
       <div class="mt-4 text-center">
         <p class="mb-4">{{ metadata.description }}</p>
         <a
-          v-if="txHash"
+          v-if="query?.txHash && txHash"
           :href="`${scanUrl}${txHash}`"
           class="text-yellow hover:underline"
           target="_blank"
@@ -42,12 +66,19 @@ const scanUrl =
     <Btn
       type="secondary"
       size="large"
-      :href="`https://twitter.com/intent/tweet?text=Display Your '${metadata.name}' NFT Collectible on Social Media for All to Envy.`"
+      :href="`https://twitter.com/intent/tweet?text=Just minted my ${metadata.name} NFT on nft.dotispink.xyz!&url=https://nft.dotispink.xyz/`"
     >
       <span class="inline-flex gap-2 items-center">
         <NuxtIcon name="x" class="text-xl" />
         <span>Share on X</span>
       </span>
     </Btn>
+    <a
+      class="twitter-share-button hidden"
+      target="”_blank”"
+      :href="`https://twitter.com/intent/tweet?url=https://nft.dotispink.xyz${fullPath}`"
+    >
+      Twitter
+    </a>
   </div>
 </template>