feat(nfts): taikoon-ui pre-mint legal disclaimer

packages/taikoon-ui/src/components/modals/MintDisclaimer.modal/MintDisclaimer.modal.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { t } from 'svelte-i18n';
+
+  import { browser } from '$app/environment';
+  import { Button } from '$components/core/Button';
+  import { Link } from '$components/core/Text';
+  import { Modal, ModalBody, ModalFooter, ModalTitle } from '$ui/Modal';
+
+  import {
+    bodyWrapperClasses,
+    footerWrapperClasses,
+    linkClasses,
+    modalContentWrapperClasses,
+    modalTitleClasses,
+  } from './classes';
+
+  const termsUrl = 'https://www.notion.so/taikoxyz/Legal-Disclaimer-89047a75cb0948f8833032f3467660c4';
+  $: isModalOpen = Boolean(browser && !localStorage.getItem('acceptedLegal'));
+
+  function acceptTerms() {
+    localStorage.setItem('acceptedLegal', 'true');
+    isModalOpen = false;
+  }
+</script>
+
+<Modal canClose={false} open={isModalOpen}>
+  <div class={modalContentWrapperClasses}>
+    <ModalTitle class={modalTitleClasses}>
+      {$t('content.legal.title')}
+    </ModalTitle>
+    <ModalBody>
+      <div class={bodyWrapperClasses}>
+        {$t('content.legal.textPre')}
+        <Link href={termsUrl} class={linkClasses} target="_blank">
+          {$t('content.legal.link')}
+        </Link>
+        {$t('content.legal.textPost')}
+      </div>
+    </ModalBody>
+    <ModalFooter>
+      <div class={footerWrapperClasses}>
+        <Button on:click={acceptTerms} type="primary">
+          {$t('buttons.accept')}
+        </Button>
+      </div>
+    </ModalFooter>
+  </div>
+</Modal>

packages/taikoon-ui/src/components/modals/MintDisclaimer.modal/classes.ts

@@ -0,0 +1,18 @@
+import { classNames } from '$lib/util/classNames';
+
+export const modalContentWrapperClasses = classNames('sm:w-full', 'md:w-[60vw]', 'lg:w-[50vw]');
+export const modalTitleClasses = classNames('sm:mt-[0]', 'mx-4', 'pt-6');
+export const bodyWrapperClasses = classNames('text-content-secondary', 'm-4');
+export const footerWrapperClasses = classNames('w-full', 'flex', 'flex-row', 'items-center', 'justify-center', 'gap-4');
+export const spinnerSmWrapper = classNames(
+  'bg-interactive-tertiary',
+  'rounded-md',
+  'w-[30px]',
+  'h-[30px]',
+  'flex',
+  'items-center',
+  'justify-center',
+);
+export const spinnerMdWrapper = classNames('w-full', 'flex', 'justify-center', 'items-center');
+export const textClasses = classNames('font-sans', 'font-bold', 'text-sm', 'text-content-primary');
+export const linkClasses = classNames('text-secondary', 'cursor-pointer');

packages/taikoon-ui/src/components/modals/index.ts

@@ -1,3 +1,4 @@
 export { default as MintConfirmationModal } from './MintConfirmation.modal/MintConfirmation.modal.svelte';
+export { default as MintDisclaimerModal } from './MintDisclaimer.modal/MintDisclaimer.modal.svelte';
 export { default as PostMintModal } from './PostMint.modal/PostMint.modal.svelte';
 export { default as TaikoonDetailModal } from './TaikoonDetail.modal/TaikoonDetail.modal.svelte';

packages/taikoon-ui/src/i18n/en.json

@@ -23,9 +23,16 @@
     "yourTaikoons": "Your Taikoons",
     "cancel": "Cancel",
     "agree": "Agree",
+    "accept": "Accept",
     "connectWallet": "Connect Wallet"
   },
   "content": {
+    "legal": {
+      "title": "Token claim",
+      "textPre": "By confirming your claim, you agree to the ",
+      "link": "terms and conditions",
+      "textPost": " of the token distribution and authorize the transfer of tokens directly to your wallet."
+    },
     "mint": {
       "title": "Taikoons",
       "alreadyMinted": "You've already minted your NFT.",

packages/taikoon-ui/src/routes/mint/+page.svelte

@@ -2,6 +2,7 @@
   import { ResponsiveController } from '@taiko/ui-lib';
 
   import { Mint } from '$components/Mint';
+  import { MintDisclaimerModal } from '$components/modals';
   import { Page } from '$components/Page';
   import { FaqSection, FooterSection } from '$components/sections';
   import { Section, SectionContainer } from '$ui/Section';
@@ -28,4 +29,6 @@
   </SectionContainer>
 </Page>
 
+<MintDisclaimerModal />
+
 <ResponsiveController bind:windowSize />