fixes

src/components/dapp/WalletButton.tsx

@@ -69,14 +69,7 @@ export default function WalletButton(props: ButtonProps) {
               <Text size="sm">Connected with {connector?.name}</Text>
               <Image className="h-lg*2 w-lg*2" src={connector?.icon} />
             </Group>
-            <Group className="flex-col items-start">
-              <Button size="sm" look="soft">
-                <Icon remix="RiArrowRightLine" /> Explorer
-              </Button>
-              <Button to={`/users/${address}`} size="sm" look="soft">
-                <Icon remix="RiArrowRightLine" /> Dashboard
-              </Button>
-            </Group>
+            <Group className="flex-col items-start">{props.children}</Group>
           </>
         }>
         <Button look="tint" className="w-full justify-center">

src/components/primitives/Checkbox.tsx

@@ -6,23 +6,31 @@ import type { Component, GetSet, Styled } from "../../utils/types";
 import Icon from "./Icon";
 
 export const checkboxStyles = tv({
-  base: "text-main-11 flex items-center bg-gradient-to-tr border-1 outline-offset-0 outline-0 text-nowrap font-text font-bold",
+  base: "text-main-11 aspect-square flex items-center bg-gradient-to-tr border-1 outline-offset-0 outline-0 text-nowrap font-text font-bold",
   variants: {
     look: {
       soft: "bg-main-0 border-main-0 hover:bg-main-4 active:bg-main-3 hover:text-main-12  focus-visible:border-main-9",
       base: "bg-main-0 border-main-6 hover:bg-main-4 active:bg-main-3 hover:text-main-12  focus-visible:border-main-9",
       bold: "bg-main-4 border-main-4 hover:bg-main-5 active:bg-main-3 text-main-12 focus-visible:border-main-9",
       tint: "bg-accent-3 border-accent-3 hover:bg-accent-5 active:bg-accent-3 text-accent-11 focus-visible:border-accent-9",
-      hype: "bg-accent-9 border-accent-9 hover:bg-accent-10 active:bg-accent-8 text-main-12 focus-visible:border-accent-10",
+      hype: "bg-accent-11 border-accent-11 text-accent-1 focus-visible:border-accent-10",
+    },
+    checked: {
+      true: "",
+      false: "bg-main-0",
     },
     size: {
-      xs: "min-h-sm px-xs*2 py-xs text-xs rounded-xs gap-xs",
-      sm: "min-h-sm px-sm py-sm/2 text-sm rounded-sm gap-sm",
-      md: " px-md py-md/2 text-md rounded-md gap-md",
+      xs: "min-h-sm px-xs*2 py-x !m-xs text-xs rounded-xs gap-xs",
+      sm: "min-h-sm px-sm py-sm/2 !m-sm text-sm rounded-sm gap-sm",
+      md: " px-md py-md/2 text-md !m-md rounded-md gap-md",
       lg: "min-h-sm px-lg py-lg/2 text-lg rounded-lg gap-lg",
       xl: "min-h-sm px-xl py-xl/2 text-xl rounded-xl gap-xl",
     },
   },
+  defaultVariants: {
+    look: "base",
+    size: "md",
+  },
 });
 
 export type CheckboxProps = Component<Styled<typeof checkboxStyles> & { state?: GetSet<boolean> }, RadixCheckboxProps>;
@@ -35,7 +43,7 @@ export default function Checkbox({ look, size, state, className }: CheckboxProps
       checked={!!getter}
       onClick={blockEvent(() => setter?.(!getter))}
       onCheckedChange={v => setter?.(!v)}
-      className={mergeClass(checkboxStyles({ look: look ?? "base", size: size ?? "md" }), className)}
+      className={mergeClass(checkboxStyles({ look: look ?? "base", size: size ?? "md", checked: getter }), className)}
       defaultChecked>
       <Icon className={!getter ? "text-main-0" : ""} size={size} remix="RiCheckFill" />
     </Root>

src/components/primitives/Divider.tsx

@@ -10,7 +10,7 @@ export const dividerStyles = tv(
         soft: "border-main-8",
         base: "border-main-11",
         bold: "border-accent-11",
-        tint: "border-t-2 border-main-1",
+        tint: "border-dashed border-main-8",
         hype: "border-t-2 border-accent-11",
       },
       vertical: {

src/components/primitives/Title.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { forwardRef } from "react";
 import { tv } from "tailwind-variants";
 import type { Component, Styled } from "../../utils/types";
 import { textStyles } from "./Text";
@@ -31,20 +32,26 @@ export type TitleProps = Component<
   HTMLHeadingElement
 >;
 
-export default function Title({ look, h, size: _size, className, ...props }: TitleProps) {
+const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(
+  { look, h, size: _size, className, ...props }: TitleProps,
+  ref,
+) {
   const size = _size ?? h;
+
   switch (h) {
     case 1:
-      return <h1 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h1 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 2:
-      return <h2 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h2 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 3:
-      return <h3 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h3 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 4:
-      return <h4 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h4 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 5:
-      return <h5 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h5 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     default:
       break;
   }
-}
+});
+
+export default Title;

src/hooks/events/useOverflowing.tsx

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useOverflowingRef<T extends HTMLElement>() {
+  const [overflowing, setOverflowing] = useState(false);
+  const ref = useRef<T>(null);
+
+  const onResize = useCallback(() => {
+    const span = ref.current;
+
+    if (span) {
+      setOverflowing(span.scrollWidth > span.clientWidth);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("resize", onResize);
+
+    return () => window.removeEventListener("resize", onResize);
+  }, [onResize]);
+
+  return { overflowing, ref };
+}

src/utils/tailwind.ts

@@ -54,6 +54,12 @@ export const generateTailwindConfig = () =>
           from: { opacity: "0", transform: "translateX(-2px)" },
           to: { opacity: "1", transform: "translateX(0)" },
         },
+        textScroll: {
+          "0%": { transform: "translateX(0%)" },
+          "90%": { transform: "translateX(-100%)" },
+          "95%": { transform: "translateX(0%)" },
+          "100%": { transform: "translateX(0%)" },
+        },
       },
       animation: {
         drop: "drop 0.1s ease-out",
@@ -65,6 +71,7 @@ export const generateTailwindConfig = () =>
         slideLeftAndFade: "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
         slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
         slideRightAndFade: "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        textScroll: "textScroll 5s linear",
       },
     },
     colors: {