From 5b064b557f80dcffa8c48af2b95eb931e1b447d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Urban=20Kova=C4=8D?= <urban.kovac@kalmia.si>
Date: Mon, 19 Feb 2024 12:03:17 +0100
Subject: [PATCH 1/5] Add recipient fix

---
 frontend/components/parts/Table/Users.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/components/parts/Table/Users.vue b/frontend/components/parts/Table/Users.vue
index 3844eed..17d8b36 100644
--- a/frontend/components/parts/Table/Users.vue
+++ b/frontend/components/parts/Table/Users.vue
@@ -29,7 +29,11 @@ const newUser = ref<UserInterface>({
 });
 
 function isEditable(row: UserInterface, index: number) {
-  return !row.email && props.users.length === index + 1;
+  return (
+    !row.email &&
+    (props.users.length === index + 1 ||
+      props.users.length % PaginationValues.PAGE_DEFAULT_LIMIT === index + 1)
+  );
 }
 
 const createColumns = (): DataTableColumns<UserInterface> => {

From 6157d304edf31fb70c3c9d5acab8e2582f9e2779 Mon Sep 17 00:00:00 2001
From: ZanJereb <zan_jereb@hotmail.com>
Date: Mon, 19 Feb 2024 12:13:11 +0100
Subject: [PATCH 2/5] Changed spinner color, hide nft image on mobile

---
 frontend/components/general/Spinner.vue | 1 +
 frontend/pages/index.vue                | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/components/general/Spinner.vue b/frontend/components/general/Spinner.vue
index 0de4105..213cb4f 100644
--- a/frontend/components/general/Spinner.vue
+++ b/frontend/components/general/Spinner.vue
@@ -35,6 +35,7 @@ defineProps({
   position: absolute;
   top: 50%;
   left: 50%;
+  color: black;
 
   .path {
     stroke-dasharray: 8, 10;
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index df037a3..d7c8669 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import SuperRareJpg from '~/assets/images/superrare.jpg';
 
+const { isMd } = useScreen();
+
 useHead({
   title: 'MENT token airdrop',
 });
@@ -21,7 +23,7 @@ useHead({
         <FormSighUp btn-text="Sign up" />
       </div>
     </div>
-    <div class="flex-cc relative w-full">
+    <div v-if="isMd" class="flex-cc relative w-full">
       <img :src="SuperRareJpg" class="mx-auto" width="461" height="461" alt="Super rare NFT" />
     </div>
   </div>

From 2e4a1ff97683f29fb44f5dac863c7a7916885d94 Mon Sep 17 00:00:00 2001
From: Tadej Vengust <vengust.tadej@gmail.com>
Date: Mon, 19 Feb 2024 12:25:58 +0100
Subject: [PATCH 3/5] production workflow

---
 .github/workflows/deploy_production.yml | 38 +++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 .github/workflows/deploy_production.yml

diff --git a/.github/workflows/deploy_production.yml b/.github/workflows/deploy_production.yml
new file mode 100644
index 0000000..2759a33
--- /dev/null
+++ b/.github/workflows/deploy_production.yml
@@ -0,0 +1,38 @@
+name: Deploy production Website
+
+on:
+  push:
+    branches:
+      - main
+
+defaults:
+  run:
+    working-directory: ./frontend
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build application
+        run: npm run generate
+
+      - name: Deploy website
+        env:
+          APILLON_API_KEY: ${{ secrets.APILLON_API_KEY }}
+          APILLON_API_SECRET: ${{ secrets.APILLON_API_SECRET }}
+          WEBSITE_UUID: ${{ secrets.WEBSITE_UUID }}
+        run: |
+          npm i -g @apillon/cli
+          apillon hosting deploy-website ./.output/public --uuid $WEBSITE_UUID --key $APILLON_API_KEY --secret $APILLON_API_SECRET

From a01afb4566df9df223bf71eeb4c0420e083002a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Urban=20Kova=C4=8D?= <urban.kovac@kalmia.si>
Date: Mon, 19 Feb 2024 12:29:02 +0100
Subject: [PATCH 4/5] Load metadata from static IPFS link

---
 frontend/lib/config/development.ts  |  4 ++--
 frontend/lib/config/production.ts   |  6 ++++--
 frontend/lib/config/staging.ts      |  4 ++--
 frontend/lib/types/general.types.ts |  2 ++
 frontend/pages/claim.vue            | 31 +++++++++++++++++++++++++----
 5 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/frontend/lib/config/development.ts b/frontend/lib/config/development.ts
index a363209..7ffd4d3 100644
--- a/frontend/lib/config/development.ts
+++ b/frontend/lib/config/development.ts
@@ -1,10 +1,10 @@
-import { ConfigInterface } from '~/lib/types/general.types';
-
 const config: ConfigInterface = {
   APP_URL: 'http://localhost:3000',
   API_BASE: 'http://localhost:3001',
   CAPTCHA_KEY: '10000000-ffff-ffff-ffff-000000000001',
   CHAIN_ID: 1287,
+  METADATA_BASE_URI: null,
+  METADATA_TOKEN: null,
 };
 
 export default config;
diff --git a/frontend/lib/config/production.ts b/frontend/lib/config/production.ts
index 55d455e..f0e85b6 100644
--- a/frontend/lib/config/production.ts
+++ b/frontend/lib/config/production.ts
@@ -1,10 +1,12 @@
-import { ConfigInterface } from '~/lib/types/general.types';
-
 const config: ConfigInterface = {
   APP_URL: 'https://ment-stg.nectarnode.io',
   API_BASE: 'https://ment-api.apillon.io',
   CAPTCHA_KEY: 'f363ce6d-7543-4284-9caa-cf3219723f04',
   CHAIN_ID: 1287,
+  METADATA_BASE_URI:
+    'https://k2k4r8p41ygxp9ogebtgstf7ix8qqn11qdcu2ld4u08896kei1wmcbj3.ipns.nectarnode.io/',
+  METADATA_TOKEN:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjaWQiOiJrMms0cjhwNDF5Z3hwOW9nZWJ0Z3N0ZjdpeDhxcW4xMXFkY3UybGQ0dTA4ODk2a2VpMXdtY2JqMyIsInByb2plY3RfdXVpZCI6IjdhMGQzNzgyLTVhODgtNGYxNS04Yjg4LTA1MTNiOTczNDhjMyIsImlhdCI6MTcwODMyNzg2OCwic3ViIjoiSVBGUy10b2tlbiJ9.dByI1FQ8rj8_dd89r_BtpF0DEdsLNOIovt-7J2mRsB0',
 };
 
 export default config;
diff --git a/frontend/lib/config/staging.ts b/frontend/lib/config/staging.ts
index b9841f6..dc2da51 100644
--- a/frontend/lib/config/staging.ts
+++ b/frontend/lib/config/staging.ts
@@ -1,10 +1,10 @@
-import { ConfigInterface } from '~/lib/types/general.types';
-
 const config: ConfigInterface = {
   APP_URL: 'https://app-stg.apillon.io',
   API_BASE: 'https://api-stg.apillon.io',
   CAPTCHA_KEY: '10000000-ffff-ffff-ffff-000000000001',
   CHAIN_ID: 1284,
+  METADATA_BASE_URI: null,
+  METADATA_TOKEN: null,
 };
 
 export default config;
diff --git a/frontend/lib/types/general.types.ts b/frontend/lib/types/general.types.ts
index 5281759..b9b2f12 100644
--- a/frontend/lib/types/general.types.ts
+++ b/frontend/lib/types/general.types.ts
@@ -6,6 +6,8 @@ declare global {
     API_BASE: string;
     CHAIN_ID: number;
     CAPTCHA_KEY: string;
+    METADATA_BASE_URI: string | null;
+    METADATA_TOKEN: string | null;
   }
 
   type AuthResponseProfile = {
diff --git a/frontend/pages/claim.vue b/frontend/pages/claim.vue
index 9f1e015..762c6e1 100644
--- a/frontend/pages/claim.vue
+++ b/frontend/pages/claim.vue
@@ -11,6 +11,7 @@ useHead({
   title: 'MENT token airdrop',
 });
 
+const config = useRuntimeConfig();
 const { query } = useRoute();
 const router = useRouter();
 const message = useMessage();
@@ -46,7 +47,9 @@ async function claimAirdrop() {
       }
     }
 
-    const signature = await walletClient.value.signMessage({ message: `Sign to verify and mint your free Ment NFT!\n${timestamp}` });
+    const signature = await walletClient.value.signMessage({
+      message: `Sign to verify and mint your free Ment NFT!\n${timestamp}`,
+    });
     const res = await $api.post<ClaimResponse>('/users/claim', {
       jwt: query.token?.toString() || '',
       signature,
@@ -63,7 +66,13 @@ async function claimAirdrop() {
       console.debug(receipt);
       message.success("You've successfully claimed your MENT token.");
 
-      if (receipt.data?.to && receipt.data?.logs[0].topics[3]) {
+      if (
+        config.public.METADATA_BASE_URI &&
+        config.public.METADATA_TOKEN &&
+        receipt.data?.logs[0].topics[3]
+      ) {
+        getMetadata(Number(receipt.data?.logs[0].topics[3]), res.data.transactionHash);
+      } else if (receipt.data?.to && receipt.data?.logs[0].topics[3]) {
         const nftId = Number(receipt.data?.logs[0].topics[3]);
 
         await loadNft(receipt.data.to, nftId, res.data.transactionHash);
@@ -91,6 +100,20 @@ async function loadNft(contract: Address, id: number, transactionHash: string) {
     message.error('Fetch failed, missing NFT metadata!');
   }
 }
+
+async function getMetadata(id: number, transactionHash: string) {
+  try {
+    const url = `${config.public.METADATA_BASE_URI}${id}.json?token=${config.public.METADATA_TOKEN}`;
+
+    const metadata = await fetch(url).then(response => {
+      return response.json();
+    });
+    router.push({ name: 'share', query: { ...metadata, txHash: transactionHash } });
+  } catch (e) {
+    console.error(e);
+    message.error('Fetch failed, missing NFT metadata!');
+  }
+}
 </script>
 
 <template>
@@ -100,8 +123,8 @@ async function loadNft(contract: Address, id: number, transactionHash: string) {
     <div v-if="!isConnected" class="my-8 text-center">
       <h3 class="mb-6">Almost there!</h3>
       <p>
-        But first, connect a compatible digital wallet. This step is crucial
-        for securely receiving and managing the MENT token you’re about to receive.
+        But first, connect a compatible digital wallet. This step is crucial for securely receiving
+        and managing the MENT token you’re about to receive.
       </p>
     </div>
 

From e4e010d9fa6b2285387975dcbe14ab10ccaee753 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Urban=20Kova=C4=8D?= <urban.kovac@kalmia.si>
Date: Mon, 19 Feb 2024 15:23:06 +0100
Subject: [PATCH 5/5] Import NFT, show if user already claimed nft

---
 frontend/composables/useContract.ts | 35 ++++++++++++++++++++++++-
 frontend/lib/config/development.ts  |  1 +
 frontend/lib/config/production.ts   |  3 ++-
 frontend/lib/config/staging.ts      |  1 +
 frontend/lib/types/general.types.ts |  1 +
 frontend/pages/claim.vue            | 40 ++++++++++++++++++++++++-----
 frontend/pages/share.vue            | 19 ++++++++++++++
 7 files changed, 92 insertions(+), 8 deletions(-)

diff --git a/frontend/composables/useContract.ts b/frontend/composables/useContract.ts
index 8eefbd8..6cdbcf4 100644
--- a/frontend/composables/useContract.ts
+++ b/frontend/composables/useContract.ts
@@ -22,14 +22,42 @@ export default function useContract() {
   const usedChain = config.public.CHAIN_ID === Chains.MOONBASE ? moonbaseAlpha : moonbeam;
   const contract = ref();
 
+  async function getTokenOfOwner(index: number) {
+    return (await contract.value.read.tokenOfOwnerByIndex([address.value, index])) as number;
+  }
+
   async function getTokenUri(id: number) {
     return (await contract.value.read.tokenURI([id])) as string;
   }
 
+  async function watchAsset(nftId: string | number) {
+    if (!walletClient.value) {
+      await refetch();
+      await sleep(200);
+    }
+    try {
+      const contractAddress = contract.value?.address
+        ? contract.value.address
+        : config.public.CONTRACT_ADDRESS;
+
+      await walletClient.value.watchAsset({
+        type: 'ERC721',
+        options: {
+          address: contractAddress,
+          tokenId: `${nftId}`,
+        },
+      });
+      return true;
+    } catch (e) {
+      contractError(e);
+      return false;
+    }
+  }
+
   /**
    * Helper for initializing specific contract
    */
-  async function initContract(contractAddress: string) {
+  async function initContract(contractAddress: `0x${string}`) {
     if (!walletClient.value) {
       await refetch();
       await sleep(200);
@@ -85,6 +113,9 @@ export default function useContract() {
       } else if (errorData.includes('valid recovery code')) {
         // Problem with embedded signature
         msg = 'Problem with embedded wallet';
+      } else if (errorData.includes('Suggested NFT is not owned by the selected account ')) {
+        msg =
+          'Suggested NFT is not owned by the selected account, please try again with other wallet.';
       } else if (
         errorData.includes('user rejected transaction') ||
         errorData.includes('User rejected the request')
@@ -103,7 +134,9 @@ export default function useContract() {
   return {
     contract,
     contractError,
+    getTokenOfOwner,
     getTokenUri,
     initContract,
+    watchAsset,
   };
 }
diff --git a/frontend/lib/config/development.ts b/frontend/lib/config/development.ts
index 7ffd4d3..b3cc6e9 100644
--- a/frontend/lib/config/development.ts
+++ b/frontend/lib/config/development.ts
@@ -3,6 +3,7 @@ const config: ConfigInterface = {
   API_BASE: 'http://localhost:3001',
   CAPTCHA_KEY: '10000000-ffff-ffff-ffff-000000000001',
   CHAIN_ID: 1287,
+  CONTRACT_ADDRESS: null,
   METADATA_BASE_URI: null,
   METADATA_TOKEN: null,
 };
diff --git a/frontend/lib/config/production.ts b/frontend/lib/config/production.ts
index f0e85b6..5b4ae4a 100644
--- a/frontend/lib/config/production.ts
+++ b/frontend/lib/config/production.ts
@@ -1,8 +1,9 @@
 const config: ConfigInterface = {
-  APP_URL: 'https://ment-stg.nectarnode.io',
+  APP_URL: 'https://nft.ment.si',
   API_BASE: 'https://ment-api.apillon.io',
   CAPTCHA_KEY: 'f363ce6d-7543-4284-9caa-cf3219723f04',
   CHAIN_ID: 1287,
+  CONTRACT_ADDRESS: '0x208C1bfa90faC3aED3587a1D9d6F8119aF45FdA6',
   METADATA_BASE_URI:
     'https://k2k4r8p41ygxp9ogebtgstf7ix8qqn11qdcu2ld4u08896kei1wmcbj3.ipns.nectarnode.io/',
   METADATA_TOKEN:
diff --git a/frontend/lib/config/staging.ts b/frontend/lib/config/staging.ts
index dc2da51..9e2a680 100644
--- a/frontend/lib/config/staging.ts
+++ b/frontend/lib/config/staging.ts
@@ -3,6 +3,7 @@ const config: ConfigInterface = {
   API_BASE: 'https://api-stg.apillon.io',
   CAPTCHA_KEY: '10000000-ffff-ffff-ffff-000000000001',
   CHAIN_ID: 1284,
+  CONTRACT_ADDRESS: null,
   METADATA_BASE_URI: null,
   METADATA_TOKEN: null,
 };
diff --git a/frontend/lib/types/general.types.ts b/frontend/lib/types/general.types.ts
index b9b2f12..9335798 100644
--- a/frontend/lib/types/general.types.ts
+++ b/frontend/lib/types/general.types.ts
@@ -6,6 +6,7 @@ declare global {
     API_BASE: string;
     CHAIN_ID: number;
     CAPTCHA_KEY: string;
+    CONTRACT_ADDRESS: string | null;
     METADATA_BASE_URI: string | null;
     METADATA_TOKEN: string | null;
   }
diff --git a/frontend/pages/claim.vue b/frontend/pages/claim.vue
index 762c6e1..66c0533 100644
--- a/frontend/pages/claim.vue
+++ b/frontend/pages/claim.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 type Address = `0x${string}`;
+
 import SuccessSVG from '~/assets/images/success.svg';
 import colors from '~/tailwind.colors';
 import { useAccount, useConnect, useWalletClient } from 'use-wagmi';
@@ -21,7 +22,7 @@ const { handleError } = useErrors();
 const { address, isConnected } = useAccount();
 const { data: walletClient, refetch } = useWalletClient();
 const { connect, connectors } = useConnect();
-const { initContract, getTokenUri } = useContract();
+const { initContract, getTokenOfOwner, getTokenUri } = useContract();
 
 const loading = ref<boolean>(false);
 
@@ -81,26 +82,53 @@ async function claimAirdrop() {
       }
     }
   } catch (e) {
-    handleError(e);
+    if (
+      !config.public.CONTRACT_ADDRESS ||
+      !(await getMyNFT(config.public.CONTRACT_ADDRESS as Address))
+    ) {
+      handleError(e);
+    }
   }
   loading.value = false;
 }
 
-async function loadNft(contract: Address, id: number, transactionHash: string) {
+async function loadNft(contractAddress: Address, id: number, transactionHash: string) {
   try {
-    await initContract(contract);
+    await initContract(contractAddress);
     const url = await getTokenUri(id);
 
     const metadata = await fetch(url).then(response => {
       return response.json();
     });
-    router.push({ name: 'share', query: { ...metadata, txHash: transactionHash } });
+    router.push({ name: 'share', query: { ...metadata, nftId: id, txHash: transactionHash } });
   } catch (e) {
     console.error(e);
     message.error('Fetch failed, missing NFT metadata!');
   }
 }
 
+async function getMyNFT(contract: Address) {
+  try {
+    await initContract(contract);
+    const id = await getTokenOfOwner(0);
+    const url = await getTokenUri(Number(id));
+
+    const metadata = await fetch(url).then(response => {
+      return response.json();
+    });
+
+    if (metadata) {
+      message.success('You already claimed NFT');
+      router.push({ name: 'share', query: { ...metadata } });
+    } else {
+      return false;
+    }
+  } catch (e) {
+    console.error(e);
+    return false;
+  }
+}
+
 async function getMetadata(id: number, transactionHash: string) {
   try {
     const url = `${config.public.METADATA_BASE_URI}${id}.json?token=${config.public.METADATA_TOKEN}`;
@@ -108,7 +136,7 @@ async function getMetadata(id: number, transactionHash: string) {
     const metadata = await fetch(url).then(response => {
       return response.json();
     });
-    router.push({ name: 'share', query: { ...metadata, txHash: transactionHash } });
+    router.push({ name: 'share', query: { ...metadata, nftId: id, txHash: transactionHash } });
   } catch (e) {
     console.error(e);
     message.error('Fetch failed, missing NFT metadata!');
diff --git a/frontend/pages/share.vue b/frontend/pages/share.vue
index 6f4ce6d..528d4bd 100644
--- a/frontend/pages/share.vue
+++ b/frontend/pages/share.vue
@@ -8,7 +8,9 @@ useHead({
 
 const router = useRouter();
 const { query } = useRoute();
+const message = useMessage();
 const config = useRuntimeConfig();
+const { watchAsset } = useContract();
 
 useSeoMeta(
   prepareOG(`Just minted my ${query.name} NFT on https://nft.ment.si!`, ``, `${query.image}`)
@@ -25,6 +27,7 @@ const metadata = ref<Metadata | null>({
   description: `${query?.description}`,
   image: `${query?.image}`,
 });
+const nftId = ref<string | undefined>(`${query?.nftId}`);
 const txHash = ref<string | undefined>(`${query?.txHash}`);
 
 function transactionLink(transactionHash?: string | null): string {
@@ -46,6 +49,14 @@ function transactionLink(transactionHash?: string | null): string {
       return '';
   }
 }
+
+async function importNft(nftId: string) {
+  const imported = await watchAsset(nftId);
+
+  if (imported) {
+    message.success("You've successfully imported your MENT token to your wallet.");
+  }
+}
 </script>
 
 <template>
@@ -63,6 +74,14 @@ function transactionLink(transactionHash?: string | null): string {
       </div>
       <div class="mt-4 text-center">
         <p class="mb-4">{{ metadata.description }}</p>
+        <Btn
+          v-if="query?.nftId && nftId"
+          size="large"
+          class="!text-black mb-6"
+          @click="importNft(nftId)"
+        >
+          Import NFT to wallet
+        </Btn>
         <a
           v-if="query?.txHash && txHash"
           :href="transactionLink(txHash)"