Web3 Module

CHANGELOG.md

@@ -7,6 +7,7 @@
 - [#161](https://github.com/animareflection/ui/pull/161) [`f750579`](https://github.com/animareflection/ui/commit/f75057983f63a85daa7c74fe521298e3b2582e7e) Thanks [@Twonarly1](https://github.com/Twonarly1)! - Update `Accordion` component
 
 - [#171](https://github.com/animareflection/ui/pull/171) [`072e6d0`](https://github.com/animareflection/ui/commit/072e6d0904cdbb6eef0740fbaca43d3fdb0a9738) Thanks [@coopbri](https://github.com/coopbri)! - Change recipes to use Ark v1 slots
+
   - Change `Carousel` `slides` prop to `items`
 
 - [#158](https://github.com/animareflection/ui/pull/158) [`165d9c5`](https://github.com/animareflection/ui/commit/165d9c5fd5c938176c01a427f9493e82970a7fa8) Thanks [@hobbescodes](https://github.com/hobbescodes)! - Add additional variants for components that leverage `defaultVariants`

package.json

@@ -78,6 +78,7 @@
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.5.3",
     "@storybook/types": "^7.5.3",
+    "@tanstack/react-query": "^5.8.1",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/react": "^14.1.0",
     "@testing-library/user-event": "^14.5.1",
@@ -116,6 +117,8 @@
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
     "usehooks-ts": "^2.9.1",
+    "viem": "2.0.0-beta.1",
+    "wagmi": "beta",
     "wait-on": "^7.1.0",
     "webpack": "^5.89.0"
   }

src/components/core/Button/Button.recipe.ts

@@ -4,6 +4,7 @@ export const buttonRecipe = defineRecipe({
   className: "button",
   description: "The styles for the Button component",
   base: {
+    borderWidth: "1px",
     cursor: "pointer",
     fontWeight: "bold",
     borderRadius: "md",
@@ -27,6 +28,7 @@ export const buttonRecipe = defineRecipe({
   variants: {
     variant: {
       primary: {
+        borderColor: "accent.default",
         color: "accent.fg",
         bgColor: "accent.default",
         _hover: {
@@ -41,7 +43,6 @@ export const buttonRecipe = defineRecipe({
         },
       },
       secondary: {
-        borderWidth: "1px",
         borderColor: "border.emphasized",
         bgColor: "bg.default",
         color: "fg.emphasized",
@@ -60,6 +61,7 @@ export const buttonRecipe = defineRecipe({
         },
       },
       ghost: {
+        borderColor: "transparent",
         bgColor: "transparent",
         color: "fg.emphasized",
         _hover: {
@@ -76,6 +78,7 @@ export const buttonRecipe = defineRecipe({
         },
       },
       round: {
+        borderColor: "accent.default",
         borderRadius: "full !important",
         color: "accent.fg",
         bgColor: "accent.default",

src/components/core/Menu/Menu.stories.tsx

@@ -80,39 +80,26 @@ const WITH_CONTEXT_GROUPS: MenuItemGroupRecord[] = [
 ];
 
 export const Default: Story = {
-  render: () => (
-    <Menu triggerVariant="primary" trigger="Open Menu" groups={GROUPS} />
-  ),
+  render: () => <Menu trigger={<Button>Open Menu</Button>} groups={GROUPS} />,
 };
 
 export const Small: Story = {
   render: () => (
-    <Menu
-      triggerVariant="primary"
-      trigger="Open Menu"
-      groups={GROUPS}
-      size="sm"
-    />
+    <Menu trigger={<Button>Open Menu</Button>} groups={GROUPS} size="sm" />
   ),
 };
 
 export const Large: Story = {
   render: () => (
-    <Menu
-      triggerVariant="primary"
-      trigger="Open Menu"
-      groups={GROUPS}
-      size="lg"
-    />
+    <Menu trigger={<Button>Open Menu</Button>} groups={GROUPS} size="lg" />
   ),
 };
 
 export const WithContext: Story = {
   render: () => (
     <Menu
       closeOnSelect={false}
-      triggerVariant="primary"
-      trigger="Open Menu"
+      trigger={<Button>Open Menu</Button>}
       groups={WITH_CONTEXT_GROUPS}
     >
       {({ close: onClose }) => (

src/components/core/Menu/Menu.tsx

@@ -9,15 +9,11 @@ import {
   PrimitiveMenuItemGroupLabel,
   PrimitiveMenuTriggerItem,
 } from "components/primitives";
-import { cx } from "generated/panda/css";
-import { button, menu } from "generated/panda/recipes";
+import { menu } from "generated/panda/recipes";
 import { useIsClient } from "lib/hooks";
 
 import type { PrimitiveMenuProps } from "components/primitives";
-import type {
-  ButtonVariantProps,
-  MenuVariantProps,
-} from "generated/panda/recipes";
+import type { MenuVariantProps } from "generated/panda/recipes";
 import type { ReactElement, ReactNode } from "react";
 
 export interface MenuItemRecord {
@@ -36,7 +32,6 @@ export interface MenuItemGroupRecord {
 export interface Props extends PrimitiveMenuProps, MenuVariantProps {
   trigger?: ReactNode;
   triggerItem?: ReactNode;
-  triggerVariant?: ButtonVariantProps["variant"];
   groups?: MenuItemGroupRecord[];
 }
 
@@ -47,7 +42,6 @@ const Menu = ({
   children,
   trigger,
   triggerItem,
-  triggerVariant,
   groups,
   size,
   ...rest
@@ -63,14 +57,7 @@ const Menu = ({
       {(ctx) => (
         <>
           {trigger && (
-            <PrimitiveMenuTrigger
-              className={cx(
-                button({ variant: triggerVariant }),
-                classNames.trigger,
-              )}
-            >
-              {trigger}
-            </PrimitiveMenuTrigger>
+            <PrimitiveMenuTrigger asChild>{trigger}</PrimitiveMenuTrigger>
           )}
           {triggerItem && (
             <PrimitiveMenuTriggerItem className={classNames.triggerItem}>

src/components/core/Modal/Modal.stories.tsx

@@ -1,5 +1,5 @@
 import { modalState } from "./Modal.spec";
-import { Modal, Text } from "components/core";
+import { Button, Modal, Text } from "components/core";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
@@ -8,7 +8,7 @@ type Story = StoryObj<typeof Modal>;
 export const Default: Story = {
   render: () => (
     <Modal
-      trigger="Open Modal"
+      trigger={<Button>Open Modal</Button>}
       title="Modal Title"
       description="Modal Description"
     >
@@ -24,7 +24,7 @@ export const Default: Story = {
 export const WithContext: Story = {
   render: () => (
     <Modal
-      trigger="Open Modal"
+      trigger={<Button>Open Modal</Button>}
       title="Modal Title"
       description="Modal Description"
     >

src/components/core/Modal/Modal.tsx

@@ -47,7 +47,7 @@ const Modal = ({
       {(ctx) => (
         <>
           {trigger && (
-            <PrimitiveModalTrigger className={classNames.trigger}>
+            <PrimitiveModalTrigger className={classNames.trigger} asChild>
               {trigger}
             </PrimitiveModalTrigger>
           )}

src/components/core/Spinner/Spinner.recipe.ts

@@ -12,6 +12,10 @@ export const spinnerRecipe = defineRecipe({
   },
   variants: {
     size: {
+      xs: {
+        h: 3,
+        w: 3,
+      },
       sm: {
         h: 6,
         w: 6,