feat(nfts): snaefell ui fixes

packages/snaefell-ui/package.json

@@ -57,12 +57,12 @@
   "type": "module",
   "dependencies": {
     "@openzeppelin/merkle-tree": "^1.0.6",
-    "@wagmi/cli": "^2.1.4",
-    "@wagmi/connectors": "^4.1.18",
-    "@wagmi/core": "^2.8.0",
-    "@web3modal/common": "^4.1.1",
-    "@web3modal/ui": "^4.1.1",
-    "@web3modal/wagmi": "^4.1.1",
+    "@wagmi/cli": "^2.1.8",
+    "@wagmi/connectors": "^5.0.6",
+    "@wagmi/core": "^2.10.4",
+    "@web3modal/common": "^4.2.2",
+    "@web3modal/ui": "^4.2.2",
+    "@web3modal/wagmi": "^4.2.2",
     "@zerodevx/svelte-toast": "^0.9.5",
     "autoprefixer": "^10.4.19",
     "daisyui": "^4.10.1",
@@ -71,6 +71,6 @@
     "minidenticons": "^4.2.1",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
-    "viem": "^2.9.29"
+    "viem": "^2.13.1"
   }
 }

packages/snaefell-ui/src/components/Button/ActionButton.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { Spinner } from '$components/core/Spinner';
+  import { classNames } from '$lib/util/classNames';
+
+  import { ButtonState } from './states';
+  import type { ActionButtonType } from './types';
+
+  export let loading = false;
+
+  export let priority: ActionButtonType;
+  export let state: ButtonState = ButtonState.DEFAULT;
+
+  export let onPopup = false;
+
+  $: if (loading) {
+    state = ButtonState.LOADING;
+  } else {
+    state = ButtonState.DEFAULT;
+  }
+
+  $: disabledColor = onPopup && $$restProps.disabled ? '!bg-dialog-interactive-disabled' : '';
+
+  $: commonClasses = classNames(
+    'btn size-[56px] px-[28px] py-[14px] rounded-full flex-1 w-full items-center',
+    $$restProps.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+    disabledColor,
+    $$props.class,
+  );
+
+  $: primaryClasses = classNames('btn-primary text-white border-none');
+
+  $: secondaryClasses = classNames(
+    $$restProps.disabled
+      ? 'border-none'
+      : 'border-primary-brand dark:text-white hover:bg-primary-interactive-hover btn-secondary bg-transparent light:text-black',
+  );
+
+  $: priorityToClassMap = {
+    primary: primaryClasses,
+    secondary: secondaryClasses,
+  };
+
+  $: classes = classNames(commonClasses, priorityToClassMap[priority], $$props.class);
+</script>
+
+<button {...$$restProps} class={classes} on:click>
+  {#if loading}
+    <Spinner />
+  {/if}
+
+  <slot />
+</button>

packages/snaefell-ui/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default as ActionButton } from './ActionButton.svelte';

packages/snaefell-ui/src/components/Button/states.ts

@@ -0,0 +1,5 @@
+export const enum ButtonState {
+  DEFAULT,
+  LOADING,
+  DISABLED,
+}

packages/snaefell-ui/src/components/Button/types.ts

@@ -0,0 +1 @@
+export type ActionButtonType = 'primary' | 'secondary';

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

@@ -5,14 +5,14 @@
   import { t } from 'svelte-i18n';
   import { zeroAddress } from 'viem';
 
+  import ActionButton from '$components/Button/ActionButton.svelte';
   import { Divider } from '$components/core/Divider';
   import InfoRow from '$components/core/InfoRow/InfoRow.svelte';
   import { ProgressBar } from '$components/core/ProgressBar';
   import User from '$lib/user';
   import { classNames } from '$lib/util/classNames';
   import type { IMint } from '$stores/mint';
   import { connectedSourceChain } from '$stores/network';
-  import { Button } from '$ui/Button';
   import { Spinner } from '$ui/Spinner';
 
   import Token from '../../lib/token';
@@ -36,7 +36,7 @@
 
   let windowSize: 'sm' | 'md' | 'lg' = 'md';
 
-  const buttonClasses = classNames('mt-6');
+  const buttonClasses = classNames('mt-6 max-h-[56px]');
 
   $: canMint = false;
   $: totalSupply = 0;
@@ -177,8 +177,9 @@
     </div>
 
     {#if isReady}
-      <Button disabled={!canMint} on:click={mint} class={buttonClasses} wide block type="primary">
-        {$t('buttons.mint')}</Button>
+      <ActionButton priority="primary" disabled={!canMint} on:click={mint} class={buttonClasses} onPopup>
+        {$t('buttons.mint')}
+      </ActionButton>
     {:else}
       <Spinner />
     {/if}

packages/snaefell-ui/src/lib/connect/web3modal.ts

@@ -29,7 +29,7 @@ export const web3modal = createWeb3Modal({
   projectId,
   featuredWalletIds: [],
   allowUnsupportedChain: true,
-  excludeWalletIds: ['c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96'],
+  excludeWalletIds: [],
   chainImages,
   themeVariables: {
     '--w3m-color-mix': 'var(--neutral-background)',

packages/snaefell-ui/wagmi.config.ts

@@ -4,6 +4,8 @@ import type { Abi, Address } from 'abitype'
 import { existsSync, mkdirSync,readFileSync, writeFileSync } from 'fs'
 
 import * as DevnetDeployment from '../nfts/deployments/snaefell/devnet.json'
+import * as MainnetDeployment from '../nfts/deployments/snaefell/mainnet.json'
+
 import * as LocalhostDeployment from '../nfts/deployments/snaefell/localhost.json'
 import * as MainnetDeployment from '../nfts/deployments/snaefell/mainnet.json'
 import SnaefellToken from '../nfts/out/SnaefellToken.sol/SnaefellToken.json'