feat(nfts): snaefell-ui sections re-org (#17365)

taikoxyz · May 27, 2024 · c7aa1bc · c7aa1bc
1 parent 742c009
commit c7aa1bc
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 416 deletions.
diff --git a/packages/snaefell-ui/package.json b/packages/snaefell-ui/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build",
+    "build": "cd ../ui-lib && pnpm build && cd - && vite build",
     "preview": "vite preview",
     "test": "npm run test:integration && npm run test:unit",
     "svelte:check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -19,6 +19,7 @@
     "generate:abi": "cd ../nfts && pnpm compile && cd - && wagmi generate"
   },
   "devDependencies": {
+    "@taiko/ui-lib": "workspace:*",
     "@chromatic-com/storybook": "^1.3.1",
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-auto": "^3.0.0",

diff --git a/packages/snaefell-ui/src/components/Header/Header.svelte b/packages/snaefell-ui/src/components/Header/Header.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { zeroAddress } from 'viem';
 
-  import TaikoonsIcon from '$assets/taikoons-icon.png';
   import { ResponsiveController } from '$components/core/ResponsiveController';
   import { MobileMenu } from '$components/MobileMenu';
   import { classNames } from '$lib/util/classNames';
@@ -11,13 +10,7 @@
   import type { IAddress } from '../../types';
   import { ConnectButton } from '../ConnectButton';
   import { ThemeButton } from '../ThemeButton';
-  import {
-    baseHeaderClasses,
-    rightSectionClasses,
-    taikoonsIconClasses,
-    themeButtonSeparatorClasses,
-    wrapperClasses,
-  } from './classes';
+  import { baseHeaderClasses, rightSectionClasses, themeButtonSeparatorClasses, wrapperClasses } from './classes';
   $: address = zeroAddress as IAddress;
 
   $: isMobileMenuOpen = false;
@@ -36,10 +29,6 @@
 
 <div class={wrapperClasses}>
   <div class={classNames(headerClasses, $$props.class)}>
-    <a href="/" class={classNames()}>
-      <img alt="taikoons-logo" class={taikoonsIconClasses} src={TaikoonsIcon} />
-    </a>
-
     <div class={rightSectionClasses}>
       <ConnectButton connected={$account?.isConnected} />
       <div class="inline-flex">

diff --git a/packages/snaefell-ui/src/components/Mint/Mint.svelte b/packages/snaefell-ui/src/components/Mint/Mint.svelte
@@ -40,7 +40,7 @@
 
   const mintState = getContext<IMint>('mint');
 
-  $: isReady = false;
+  $: isReady = true;
 
   $: totalMintCount = 0;
 
@@ -50,10 +50,15 @@
   $: totalMintCount, calculateGasCost();
 
   async function calculateGasCost() {
-    isCalculating = true;
+    try {
+      isCalculating = true;
 
-    gasCost = await Token.estimateMintGasCost();
-    isCalculating = false;
+      gasCost = await Token.estimateMintGasCost();
+      isCalculating = false;
+    } catch (e) {
+      console.warn(e);
+      isCalculating = false;
+    }
   }
 
   async function load() {

diff --git a/packages/snaefell-ui/src/components/modals/PostMint.modal/PostMint.modal.svelte b/packages/snaefell-ui/src/components/modals/PostMint.modal/PostMint.modal.svelte
@@ -7,15 +7,12 @@
   import { NftRenderer } from '$components/NftRenderer';
   import type { IMint } from '$stores/mint';
   import { Modal, ModalBody, ModalFooter } from '$ui/Modal';
-  import { Link } from '$ui/Text';
   import { successToast } from '$ui/Toast';
 
   import {
-    buttonWrapperClasses,
     mintedBodyClasses,
     successContentClasses,
     successFooterWrapperClasses,
-    successMintedLinkClasses,
     successTitleClasses,
   } from './classes';
 
@@ -34,34 +31,20 @@
 
 <Modal open={isModalOpen}>
   <ModalBody class={mintedBodyClasses}>
-    <NftRenderer />
+    <NftRenderer size="xl" />
 
     <div class={successTitleClasses}>
       {$t('content.mint.modals.minted.title')}
     </div>
     <div class={successContentClasses}>
       {$t('content.mint.modals.minted.text')}
-
-      <Link class={successMintedLinkClasses} href={`/collection/${$mintState.address}`}>
-        {$t('content.mint.modals.minted.link')}</Link>
     </div>
   </ModalBody>
   <ModalFooter>
     <div class={successFooterWrapperClasses}>
-      <div class={buttonWrapperClasses} use:copy={`${window.location.origin}/collection/${$mintState.address}`}>
-        <Button on:click={(event) => copyShareUrl(event.currentTarget)} wide block type="primary">
-          {$t('buttons.share')}
-        </Button>
-      </div>
-      <div class={buttonWrapperClasses}>
-        <Button
-          on:click={() => ($mintState.isModalOpen = false)}
-          href={`/collection/${$mintState.address}`}
-          wide
-          block
-          type="negative">
-          {$t('buttons.yourTaikoons')}</Button>
-      </div>
+      <Button on:click={(event) => copyShareUrl(event.currentTarget)} wide block type="primary">
+        {$t('buttons.share')}
+      </Button>
     </div>
   </ModalFooter>
 </Modal>