fix(nfts): snaefell ui fixes v4

packages/snaefell-ui/src/components/ConnectButton/ConnectButton.svelte

@@ -90,8 +90,11 @@
       {/if}
     {:else}
       <CircleUserIcon size="24" class={classNames('h-12')} />
-      {#if windowSize !== 'sm'}
-        Connect Wallet{/if}
+      {#if windowSize === 'sm'}
+        Connect
+      {:else}
+        Connect Wallet
+      {/if}
     {/if}
   </button>
 {/if}

packages/snaefell-ui/src/components/Mint/Mint.svelte

@@ -4,6 +4,7 @@
   import { getContext, onMount } from 'svelte';
   import { zeroAddress } from 'viem';
 
+  import { errorToast } from '$components/core/Toast';
   import User from '$lib/user';
   import type { IMint } from '$stores/mint';
   import { connectedSourceChain } from '$stores/network';
@@ -50,16 +51,23 @@
   }
 
   async function load() {
-    canMint = await Token.canMint();
-    mintMax = await Token.maxSupply();
-    totalSupply = await Token.totalSupply();
-
-    if (!canMint) {
+    try {
+      canMint = await Token.canMint();
+      mintMax = await Token.maxSupply();
+      totalSupply = await Token.totalSupply();
+
+      if (!canMint) {
+        isReady = true;
+        return;
+      }
+      totalMintCount = await User.totalWhitelistMintCount();
       isReady = true;
-      return;
+    } catch (e: any) {
+      errorToast({
+        title: 'Load error',
+        message: e.message,
+      });
     }
-    totalMintCount = await User.totalWhitelistMintCount();
-    isReady = true;
   }
 
   onMount(async () => {

packages/snaefell-ui/src/components/Mint/classes.ts

@@ -1,18 +1,25 @@
 import { classNames } from '$lib/util/classNames';
 export const wrapperClasses = classNames(
   'h-max',
-  'w-max',
   'flex',
-  'md:flex-row',
-  'flex-col',
+
   'items-center',
   'justify-center',
-  //'md:px-5',
-  'p-8',
   'bg-neutral-background',
   'rounded-3xl',
-  'gap-16',
-  //'md:py-16',
+  'gap-12',
+  // mobile
+  'py-4',
+  'px-1',
+  'mt-1.5',
+  'flex-col',
+  'w-[calc(100%-1.5rem)]',
+  // regular
+  'md:flex-row',
+  'md:p-8',
+  'md:mt-32',
+  'md:max-w-[95vw]',
+  'md:w-max',
 );
 
 export const halfPanel = classNames(

packages/snaefell-ui/src/components/core/Icons/CircleUserRegular.svelte

@@ -36,7 +36,7 @@
     class={className}
     aria-label={ariaLabel}
     aria-describedby={hasDescription ? ariaDescribedby : undefined}
-    viewBox="0 0 512 512"
+    viewBox="0 0 24 24"
     on:click
     on:keydown
     on:keyup
@@ -53,7 +53,10 @@
       <desc id={desc.id}>{desc.desc}</desc>
     {/if}
     <path
-      d="M406.5 399.6C387.4 352.9 341.5 320 288 320H224c-53.5 0-99.4 32.9-118.5 79.6C69.9 362.2 48 311.7 48 256C48 141.1 141.1 48 256 48s208 93.1 208 208c0 55.7-21.9 106.2-57.5 143.6zm-40.1 32.7C334.4 452.4 296.6 464 256 464s-78.4-11.6-110.5-31.7c7.3-36.7 39.7-64.3 78.5-64.3h64c38.8 0 71.2 27.6 78.5 64.3zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-272a40 40 0 1 1 0-80 40 40 0 1 1 0 80zm-88-40a88 88 0 1 0 176 0 88 88 0 1 0 -176 0z" />
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18.8139 19.2336C20.737 17.4214 21.9375 14.8509 21.9375 12C21.9375 6.51167 17.4883 2.0625 12 2.0625C6.51167 2.0625 2.0625 6.51167 2.0625 12C2.0625 14.8509 3.263 17.4214 5.18606 19.2336C6.96512 20.9101 9.36257 21.9375 12 21.9375C14.6374 21.9375 17.0349 20.9101 18.8139 19.2336ZM6.03253 17.9241C7.43345 16.1766 9.58606 15.0577 12 15.0577C14.4139 15.0577 16.5665 16.1766 17.9675 17.9241C16.4441 19.4585 14.333 20.4087 12 20.4087C9.66698 20.4087 7.55588 19.4585 6.03253 17.9241ZM15.8221 8.94231C15.8221 11.0532 14.1109 12.7644 12 12.7644C9.8891 12.7644 8.17788 11.0532 8.17788 8.94231C8.17788 6.83141 9.8891 5.12019 12 5.12019C14.1109 5.12019 15.8221 6.83141 15.8221 8.94231Z"
+      fill={color} />
   </svg>
 {:else}
   <svg
@@ -66,15 +69,18 @@
     class={className}
     aria-label={ariaLabel}
     aria-describedby={hasDescription ? ariaDescribedby : undefined}
-    viewBox="0 0 512 512">
+    viewBox="0 0 24 24">
     {#if title.id && title.title}
       <title id={title.id}>{title.title}</title>
     {/if}
     {#if desc.id && desc.desc}
       <desc id={desc.id}>{desc.desc}</desc>
     {/if}
     <path
-      d="M406.5 399.6C387.4 352.9 341.5 320 288 320H224c-53.5 0-99.4 32.9-118.5 79.6C69.9 362.2 48 311.7 48 256C48 141.1 141.1 48 256 48s208 93.1 208 208c0 55.7-21.9 106.2-57.5 143.6zm-40.1 32.7C334.4 452.4 296.6 464 256 464s-78.4-11.6-110.5-31.7c7.3-36.7 39.7-64.3 78.5-64.3h64c38.8 0 71.2 27.6 78.5 64.3zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-272a40 40 0 1 1 0-80 40 40 0 1 1 0 80zm-88-40a88 88 0 1 0 176 0 88 88 0 1 0 -176 0z" />
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18.8139 19.2336C20.737 17.4214 21.9375 14.8509 21.9375 12C21.9375 6.51167 17.4883 2.0625 12 2.0625C6.51167 2.0625 2.0625 6.51167 2.0625 12C2.0625 14.8509 3.263 17.4214 5.18606 19.2336C6.96512 20.9101 9.36257 21.9375 12 21.9375C14.6374 21.9375 17.0349 20.9101 18.8139 19.2336ZM6.03253 17.9241C7.43345 16.1766 9.58606 15.0577 12 15.0577C14.4139 15.0577 16.5665 16.1766 17.9675 17.9241C16.4441 19.4585 14.333 20.4087 12 20.4087C9.66698 20.4087 7.55588 19.4585 6.03253 17.9241ZM15.8221 8.94231C15.8221 11.0532 14.1109 12.7644 12 12.7644C9.8891 12.7644 8.17788 11.0532 8.17788 8.94231C8.17788 6.83141 9.8891 5.12019 12 5.12019C14.1109 5.12019 15.8221 6.83141 15.8221 8.94231Z"
+      fill={color} />
   </svg>
 {/if}
 

packages/snaefell-ui/src/components/core/Section/Section.svelte

@@ -13,7 +13,7 @@
     'overflow-hidden',
     height === 'full' ? 'h-screen' : null,
     height === 'min' ? 'h-[50vh] pt-32' : null,
-    height === 'fit' ? 'h-auto pt-32' : null,
+    height === 'fit' ? 'h-auto' : null,
     'relative',
     'flex flex-col',
     'items-center',

packages/snaefell-ui/src/components/core/Section/SectionContainer.svelte

@@ -9,7 +9,7 @@
     pageScroll.set(scrollTarget.scrollTop > 100);
   }
 
-  const sectionContainerClasses = classNames('w-full', 'h-full', 'z-0', $$props.class);
+  const sectionContainerClasses = classNames('w-full', 'overflow-y-scroll', 'h-full', 'z-0', $$props.class);
 </script>
 
 <div bind:this={scrollTarget} on:scroll={handleScroll} class={sectionContainerClasses}>

packages/snaefell-ui/src/components/sections/Footer.section.svelte

@@ -7,45 +7,37 @@
 
   let windowSize: 'sm' | 'md' | 'lg' = 'md';
 
-  const sectionClasses = classNames('justify-end align-end', 'mb-5');
+  const infoSectionClasses = classNames('justify-center items-center', 'mb-5', 'pt-32');
+  const footerSectionClasses = classNames('justify-end', 'w-full', 'mb-5', 'pt-32');
 
   const titleClasses = classNames(
     'w-full',
     'text-left',
     'text-primary',
-    'mb-4',
+    'mb-6',
     'uppercase',
     'tracking-normal',
     'text-[16px]/[24px]',
     'font-bold',
     'font-sans',
     'leading-relaxed',
-    'px-12',
   );
 
   const contentClasses = classNames(
     'md:font-normal',
-    //'md:text-[57px]/[64px]',
-    'md:text-3xl',
-    'text-2xl',
+    'md:text-[45px]/[52px]',
+    'text-[32px]/[40px]',
     'my-4',
     'md:my-6',
     'text-content-primary',
     'font-medium',
     'font-clash-grotesk',
-    'text-4xl',
-    // sm variant
-    'w-full',
-    'px-0',
-    // md variant
-    'md:w-3/4',
-    'md:px-12',
   );
 
-  const contentWrapperClasses = classNames('w-full', 'h-full');
+  const contentWrapperClasses = classNames('w-full', 'h-full', 'max-w-[1000px]', 'lg:px-2', 'md:px-6', 'px-4');
 </script>
 
-<Section height={'fit'} class={sectionClasses} width="xl">
+<Section height={'fit'} class={infoSectionClasses} width="xl">
   <div class={contentWrapperClasses}>
     <p class={titleClasses}>
       {$t('content.sections.information.title')}
@@ -64,7 +56,8 @@
     </div>
   </div>
 </Section>
-<Section height={'fit'} class={sectionClasses} width="xl">
+
+<Section height={'fit'} class={footerSectionClasses} width="xl">
   <Footer />
 </Section>
 

packages/snaefell-ui/src/generated/abi/index.ts

@@ -584,7 +584,7 @@ export const snaefellTokenAbi = [
  *
  */
 export const snaefellTokenAddress = {
-  31337: '0x4ed7c70F96B99c776995fB64377f0d4aB3B0e1C1',
+  31337: '0x5FC8d32690cc91D4c39d9d3abcBD16989F875707',
   167000: '0xD57b9EE8f597801e82018ed44e07E9065645B0c1',
 } as const;
 

packages/snaefell-ui/src/lib/token/canMint.ts

@@ -6,20 +6,25 @@ import { totalWhitelistMintCount } from '../user/totalWhitelistMintCount';
 import getConfig from '../wagmi/getConfig';
 
 export async function canMint(): Promise<boolean> {
-  const { config, chainId } = getConfig();
+  try {
+    const { config, chainId } = getConfig();
 
-  const account = getAccount(config);
-  if (!account.address) return false;
-  const accountAddress = account.address as IAddress;
+    const account = getAccount(config);
+    if (!account.address) return false;
+    const accountAddress = account.address as IAddress;
 
-  const freeMintCount = await totalWhitelistMintCount();
-  if (freeMintCount === 0) return false;
-  const result = await readContract(config, {
-    abi: snaefellTokenAbi,
-    address: snaefellTokenAddress[chainId as IChainId],
-    functionName: 'canMint',
-    args: [accountAddress, BigInt(freeMintCount)],
-    chainId,
-  });
-  return result as boolean;
+    const freeMintCount = await totalWhitelistMintCount();
+    if (freeMintCount === 0) return false;
+    const result = await readContract(config, {
+      abi: snaefellTokenAbi,
+      address: snaefellTokenAddress[chainId as IChainId],
+      functionName: 'canMint',
+      args: [accountAddress, BigInt(freeMintCount)],
+      chainId,
+    });
+    return result as boolean;
+  } catch (e) {
+    console.warn(e);
+    return false;
+  }
 }

packages/snaefell-ui/src/lib/token/mint.ts

@@ -36,7 +36,7 @@ export async function mint({
       address: snaefellTokenAddress[chainId],
       functionName: 'mint',
       args: [proof, BigInt(mintCount)],
-      chainId,
+      chainId: chainId as number,
     });
 
     onTransaction(tx);

packages/snaefell-ui/src/lib/wagmi/watcher.ts

@@ -1,6 +1,6 @@
 import { watchAccount } from '@wagmi/core';
 
-import { config } from '$wagmi-config';
+import { config, taiko } from '$wagmi-config';
 
 import { isSupportedChain } from '../../lib/chain';
 import { refreshUserBalance } from '../../lib/util/balance';
@@ -20,7 +20,11 @@ export async function startWatching() {
         refreshUserBalance();
         // We need to check if the chain is supported, and if not
         // we present the user with a modal to switch networks.
-        if ((chain && !isSupportedChain(Number(chain.id))) || (!data.chainId && data.address)) {
+        const isLocalHost = window.location.hostname === 'localhost';
+        const isSupportedChainId = isLocalHost ? isSupportedChain(Number(data.chainId)) : data.chainId === taiko.id;
+        const isConnected = data.address !== undefined;
+
+        if (!isSupportedChainId && isConnected) {
           switchChainModal.set(true);
           return;
         } else if (chain) {

packages/snaefell-ui/src/wagmi.config.ts

@@ -5,7 +5,7 @@ import { PUBLIC_WALLETCONNECT_PROJECT_ID } from '$env/static/public';
 
 const projectId = PUBLIC_WALLETCONNECT_PROJECT_ID;
 
-import { hardhat } from 'viem/chains';
+// import { hardhat } from 'viem/chains';
 
 import { chainIdToChain } from '$lib/chain/chains';
 
@@ -14,18 +14,16 @@ export const taiko = chainIdToChain(167000);
 
 const baseConfig = {
   chains: [
-    hardhat,
+    // hardhat,
     taiko,
-    // devnet
   ],
   projectId,
   metadata: {},
   batch: {
     multicall: false,
   },
   transports: {
-    [hardhat.id]: http('http://localhost:8545'),
-    //[devnet.id]: http('https://rpc.internal.taiko.xyz'),
+    //  [hardhat.id]: http('http://localhost:8545'),
     [taiko.id]: http('https://rpc.mainnet.taiko.xyz'),
   },
 } as const;