@iota/dapp-kit 0.0.0-dev-20251015065834

package/src/components/icons/BackIcon.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+// FIXME: Replace this with a 10x10 icon to match the CheckIcon, or alternatively make the CheckIcon bigger
+// Right now, the icons don't align on mobile :(
+export function BackIcon(props: ComponentProps<'svg'>) {
+    return (
+        <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M7.57 12.262c0 .341.13.629.403.895l5.175 5.059c.204.205.45.307.751.307.609 0 1.101-.485 1.101-1.087 0-.293-.123-.574-.349-.8L10.14 12.27l4.511-4.375A1.13 1.13 0 0 0 15 7.087C15 6.485 14.508 6 13.9 6c-.295 0-.54.103-.752.308l-5.175 5.058c-.28.28-.404.56-.404.896Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}

package/src/components/icons/CheckIcon.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+export function CheckIcon(props: ComponentProps<'svg'>) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+            <path
+                fill="currentColor"
+                d="m11.726 5.048-4.73 5.156-1.722-1.879a.72.72 0 0 0-.529-.23.722.722 0 0 0-.525.24.858.858 0 0 0-.22.573.86.86 0 0 0 .211.576l2.255 2.458c.14.153.332.24.53.24.2 0 .391-.087.532-.24l5.261-5.735A.86.86 0 0 0 13 5.63a.858.858 0 0 0-.22-.572.722.722 0 0 0-.525-.24.72.72 0 0 0-.529.23Z"
+            />
+        </svg>
+    );
+}

package/src/components/icons/ChevronIcon.tsx

@@ -0,0 +1,19 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+export function ChevronIcon(props: ComponentProps<'svg'>) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+            <path
+                stroke="#A0B6C3"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="m4 6 4 4 4-4"
+            />
+        </svg>
+    );
+}

package/src/components/icons/CloseIcon.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+export function CloseIcon(props: ComponentProps<'svg'>) {
+    return (
+        <svg width={10} height={10} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M9.708.292a.999.999 0 0 0-1.413 0l-3.289 3.29L1.717.291A.999.999 0 0 0 .305 1.705l3.289 3.289-3.29 3.289a.999.999 0 1 0 1.413 1.412l3.29-3.289 3.288 3.29a.999.999 0 0 0 1.413-1.413l-3.29-3.29 3.29-3.288a.999.999 0 0 0 0-1.413Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}

package/src/components/icons/IotaIcon.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+export function IotaIcon(props: ComponentProps<'svg'>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="28px"
+            height="28px"
+            fill="none"
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <path
+                fill="#171d26"
+                d="M18.27 2.259c0 .695-.568 1.259-1.268 1.259s-1.267-.564-1.267-1.259S16.302 1 17.002 1s1.268.564 1.268 1.259m1.425 17.785c0 .695-.568 1.259-1.268 1.259s-1.267-.564-1.267-1.26c0-.695.567-1.258 1.267-1.258s1.268.563 1.268 1.259m-2.33-13.379a1.06 1.06 0 0 0 1.063-1.056 1.06 1.06 0 0 0-1.063-1.057A1.06 1.06 0 0 0 16.3 5.61a1.06 1.06 0 0 0 1.064 1.056Zm3.891-.651a1.06 1.06 0 0 1-1.063 1.056 1.06 1.06 0 0 1-1.064-1.056 1.06 1.06 0 0 1 1.064-1.057 1.06 1.06 0 0 1 1.063 1.057m-4.253 3.329c.5 0 .905-.403.905-.9 0-.496-.405-.9-.905-.9s-.906.404-.906.9c0 .497.406.9.906.9m3.734-.52c0 .497-.405.9-.905.9a.903.903 0 0 1-.906-.9c0-.496.405-.9.906-.9.5 0 .905.404.905.9m1.357 1.777c.5 0 .906-.402.906-.899s-.405-.9-.906-.9c-.5 0-.905.403-.905.9s.405.9.905.9Zm-2.309.495a.79.79 0 0 1-.792.787.79.79 0 0 1-.791-.787c0-.434.354-.786.791-.786s.792.352.792.786m-3.62.404a.79.79 0 0 0 .792-.787.79.79 0 0 0-.792-.786.79.79 0 0 0-.791.786c0 .435.354.787.791.787m5.907.471a.79.79 0 0 1-.791.787.79.79 0 0 1-.792-.786.79.79 0 0 1 .792-.787.79.79 0 0 1 .791.787Zm-4.21 1.554c.375 0 .68-.302.68-.675a.677.677 0 0 0-.68-.675.68.68 0 0 0-.68.675c0 .373.304.675.68.675m2.968.178a.68.68 0 0 1-.68.676.677.677 0 0 1-.68-.676c0-.373.304-.675.68-.675.375 0 .68.302.68.675m-5.774-.582c.375 0 .68-.302.68-.675a.68.68 0 0 0-.68-.675.68.68 0 0 0-.68.675c0 .373.304.675.68.675m2.127.943c0 .31-.254.561-.566.561a.564.564 0 0 1-.566-.562c0-.31.253-.561.566-.561s.566.251.566.562m.407 2.114a.496.496 0 0 0 .498-.494.496.496 0 0 0-.498-.495.496.496 0 0 0-.498.495c0 .273.223.494.498.494m-.791-.09a.407.407 0 0 1-.408.405.407.407 0 0 1-.408-.405c0-.223.182-.405.408-.405s.408.181.408.405m-1.472-.765a.496.496 0 0 0 .498-.494.496.496 0 0 0-.498-.495.496.496 0 0 0-.498.495c0 .273.223.494.498.494m-.973-1.64c0 .31-.254.562-.566.562a.564.564 0 0 1-.566-.562c0-.31.253-.562.566-.562s.566.251.566.562m-.588-3.666a.564.564 0 0 0 .566-.562.564.564 0 0 0-.566-.562.564.564 0 0 0-.565.562c0 .31.253.562.565.562m.745-2.473a.496.496 0 0 1-.497.494.496.496 0 0 1-.498-.494c0-.273.223-.494.498-.494s.498.22.498.494Zm.047-1.123a.406.406 0 0 0 .407-.406.406.406 0 0 0-.407-.405.407.407 0 0 0-.408.405c0 .224.182.406.408.406m-.452-1.26a.496.496 0 0 1-.498.494.496.496 0 0 1-.498-.494c0-.273.223-.494.498-.494s.498.22.498.494m4.776 10.32a.564.564 0 0 0 .566-.561.564.564 0 0 0-.566-.562.564.564 0 0 0-.566.562c0 .31.253.562.566.562ZM12.883 4.439c0 .31-.254.562-.566.562a.564.564 0 0 1-.566-.562c0-.31.254-.562.566-.562s.566.251.566.562m-.18 2.945a.564.564 0 0 0 .566-.562.564.564 0 0 0-.566-.561.564.564 0 0 0-.566.561c0 .31.253.562.566.562m.045 1.597a.677.677 0 0 1-.68.676.68.68 0 0 1-.679-.676c0-.373.304-.675.68-.675.375 0 .68.302.68.675Zm-2.74.676a.79.79 0 0 0 .791-.786.79.79 0 0 0-.791-.787.79.79 0 0 0-.792.787c0 .434.354.786.792.786m-1.494-.36c0 .497-.405.9-.905.9a.903.903 0 0 1-.906-.9c0-.497.406-.9.906-.9s.905.403.905.9m-3.529 2.18a1.06 1.06 0 0 0 1.063-1.056 1.06 1.06 0 0 0-1.063-1.056A1.06 1.06 0 0 0 3.92 10.42a1.06 1.06 0 0 0 1.064 1.056Zm-1.45.9c0 .696-.568 1.26-1.268 1.26S1 13.073 1 12.377c0-.695.567-1.259 1.267-1.259s1.268.564 1.268 1.26Zm.386-3.531A1.06 1.06 0 0 0 4.985 7.79 1.06 1.06 0 0 0 3.92 6.733 1.06 1.06 0 0 0 2.858 7.79 1.06 1.06 0 0 0 3.92 8.846Zm3.53-2.181c0 .497-.405.9-.906.9a.903.903 0 0 1-.905-.9c0-.496.405-.9.905-.9s.906.404.906.9M6.162 5.182c.5 0 .905-.403.905-.9 0-.496-.405-.9-.905-.9s-.906.404-.906.9c0 .497.406.9.906.9m3.19-1.326a.79.79 0 0 1-.791.787.79.79 0 0 1-.792-.787c0-.434.354-.786.792-.786.437 0 .791.352.791.786m1.268.788c.375 0 .68-.303.68-.675a.677.677 0 0 0-.68-.676.68.68 0 0 0-.68.675c0 .373.304.676.68.676m1.063 1.708a.68.68 0 0 1-.68.675.677.677 0 0 1-.68-.675c0-.373.305-.675.68-.675s.68.302.68.675m-2.739.695a.79.79 0 0 0 .792-.786.79.79 0 0 0-.792-.786.79.79 0 0 0-.791.786c0 .434.354.786.791.786m-1.832 5.578a.407.407 0 0 1-.408.405.407.407 0 0 1-.408-.405c0-.223.182-.405.408-.405s.408.181.408.405m1.221.201a.496.496 0 0 0 .497-.494.496.496 0 0 0-.497-.495.496.496 0 0 0-.498.495c0 .273.223.494.498.494m2.354-1.236c0 .31-.253.562-.565.562a.564.564 0 0 1-.566-.562c0-.31.253-.562.566-.562s.565.252.565.562m-.135 2.361c.375 0 .68-.302.68-.675a.677.677 0 0 0-.68-.675.677.677 0 0 0-.68.675c0 .373.304.675.68.675m-1.608-.135c0 .31-.253.562-.566.562a.564.564 0 0 1-.565-.562c0-.31.253-.562.565-.562.313 0 .566.252.566.562m-2.488.538a.496.496 0 0 0 .498-.494.496.496 0 0 0-.498-.495.496.496 0 0 0-.498.495c0 .273.223.494.498.494m.588.991c0 .31-.254.562-.566.562a.564.564 0 0 1-.566-.562c0-.31.253-.562.566-.562s.566.252.566.562m1.742.855c.376 0 .68-.303.68-.675a.677.677 0 0 0-.68-.676.677.677 0 0 0-.68.675c0 .373.305.676.68.676m3.484-1.08a.79.79 0 0 1-.79.786.79.79 0 0 1-.792-.786c0-.435.354-.787.791-.787s.792.352.792.787Zm.794 2.743c.5 0 .906-.402.906-.9 0-.496-.406-.899-.906-.899s-.905.403-.905.9.405.9.905.9Zm-2.536-.518a.79.79 0 0 1-.792.786.79.79 0 0 1-.792-.787.79.79 0 0 1 .792-.786.79.79 0 0 1 .792.787m-2.669 2.316a.79.79 0 0 0 .791-.786.79.79 0 0 0-.792-.786.79.79 0 0 0-.791.786c0 .434.354.786.792.786m2.466 1.079c0 .497-.405.9-.905.9a.903.903 0 0 1-.906-.9c0-.496.405-.9.906-.9.5 0 .905.404.905.9M13.584 22a1.06 1.06 0 0 0 1.064-1.056 1.06 1.06 0 0 0-1.064-1.057 1.06 1.06 0 0 0-1.063 1.057A1.06 1.06 0 0 0 13.584 22m-1.379-2.788c0 .497-.405.9-.905.9a.903.903 0 0 1-.906-.9c0-.497.405-.9.905-.9s.906.403.906.9m3.123.54a1.06 1.06 0 0 0 1.063-1.057 1.06 1.06 0 0 0-1.063-1.056 1.06 1.06 0 0 0-1.064 1.056 1.06 1.06 0 0 0 1.064 1.057m-7.741-2.699a.677.677 0 0 1-.68.676.677.677 0 0 1-.68-.676c0-.373.305-.675.68-.675s.68.302.68.675"
+            />
+        </svg>
+    );
+}

package/src/components/styling/InjectedThemeStyles.tsx

@@ -0,0 +1,56 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import { styleDataAttributeSelector } from '../../constants/styleDataAttribute.js';
+import { themeVars } from '../../themes/themeContract.js';
+import type { DynamicTheme, Theme, ThemeVars } from '../../themes/themeContract.js';
+
+type InjectedThemeStylesProps = {
+    theme: Theme;
+};
+
+export function InjectedThemeStyles({ theme }: InjectedThemeStylesProps) {
+    const themeStyles = Array.isArray(theme)
+        ? getDynamicThemeStyles(theme)
+        : getStaticThemeStyles(theme);
+
+    return (
+        <style
+            // @ts-expect-error The precedence prop hasn't made it to the stable release of React, but we
+            // don't want this to break in frameworks like Next which use the latest canary build.
+            precedence="default"
+            href="iota-dapp-kit-theme"
+            dangerouslySetInnerHTML={{
+                __html: themeStyles,
+            }}
+        />
+    );
+}
+
+function getDynamicThemeStyles(themes: DynamicTheme[]) {
+    return themes
+        .map(({ mediaQuery, selector, variables }) => {
+            const themeStyles = getStaticThemeStyles(variables);
+            const themeStylesWithSelectorPrefix = selector
+                ? `${selector} ${themeStyles}`
+                : themeStyles;
+
+            return mediaQuery
+                ? `@media ${mediaQuery}{${themeStylesWithSelectorPrefix}}`
+                : themeStylesWithSelectorPrefix;
+        })
+        .join(' ');
+}
+
+function getStaticThemeStyles(theme: ThemeVars) {
+    return `${styleDataAttributeSelector} {${cssStringFromTheme(theme)}}`;
+}
+
+function cssStringFromTheme(theme: ThemeVars) {
+    return Object.entries(assignInlineVars(themeVars, theme))
+        .map(([key, value]) => `${key}:${value};`)
+        .join('');
+}

package/src/components/styling/StyleMarker.css.ts

@@ -0,0 +1,49 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { globalStyle } from '@vanilla-extract/css';
+
+import { themeVars } from '../../themes/themeContract.js';
+
+globalStyle(':where(*)', {
+    boxSizing: 'border-box',
+    color: themeVars.colors.body,
+    fontFamily: themeVars.typography.fontFamily,
+    fontSize: themeVars.fontWeights.normal,
+    fontStyle: themeVars.typography.fontStyle,
+    fontWeight: themeVars.fontWeights.normal,
+    lineHeight: themeVars.typography.lineHeight,
+    letterSpacing: themeVars.typography.letterSpacing,
+});
+
+globalStyle(':where(button)', {
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    lineHeight: 'inherit',
+    letterSpacing: 'inherit',
+    color: 'inherit',
+    border: 0,
+    padding: 0,
+    margin: 0,
+});
+
+globalStyle(':where(a)', {
+    textDecoration: 'none',
+    color: 'inherit',
+    outline: 'none',
+});
+
+globalStyle(':where(ol, ul)', {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+});
+
+globalStyle(':where(h1, h2, h3, h4, h5, h6)', {
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    margin: 0,
+});

package/src/components/styling/StyleMarker.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Slot } from '@radix-ui/react-slot';
+import type { ComponentPropsWithoutRef, ElementRef, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import { styleDataAttribute } from '../../constants/styleDataAttribute.js';
+
+import './StyleMarker.css.js';
+
+type StyleMarker = {
+    children: ReactNode;
+};
+
+export const StyleMarker = forwardRef<
+    ElementRef<typeof Slot>,
+    ComponentPropsWithoutRef<typeof Slot>
+>(({ children, ...props }, forwardedRef) => (
+    <Slot ref={forwardedRef} {...props} {...styleDataAttribute}>
+        {children}
+    </Slot>
+));
+StyleMarker.displayName = 'StyleMarker';

package/src/components/ui/Button.css.ts

@@ -0,0 +1,49 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+import { recipe } from '@vanilla-extract/recipes';
+import { themeVars } from '../../themes/themeContract.js';
+
+export const buttonVariants = recipe({
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: themeVars.fontWeights.medium,
+        ':disabled': {
+            opacity: 0.5,
+        },
+    },
+    variants: {
+        variant: {
+            primary: {
+                backgroundColor: themeVars.backgroundColors.primaryButton,
+                color: themeVars.colors.primaryButton,
+                ':hover': {
+                    backgroundColor: themeVars.backgroundColors.primaryButtonHover,
+                },
+            },
+            outline: {
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: themeVars.borderColors.outlineButton,
+                color: themeVars.colors.primaryButton,
+                ':hover': {
+                    backgroundColor: themeVars.backgroundColors.outlineButtonHover,
+                },
+            },
+        },
+        size: {
+            md: { borderRadius: themeVars.radii.full, padding: '8px 16px' },
+            lg: { borderRadius: themeVars.radii.full, padding: '16px 24px ' },
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+    },
+});
+
+export type ButtonVariants = RecipeVariants<typeof buttonVariants>;

package/src/components/ui/Button.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+import type { ButtonHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import { buttonVariants } from './Button.css.js';
+import type { ButtonVariants } from './Button.css.js';
+
+type ButtonProps = {
+    asChild?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement> &
+    ButtonVariants;
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, forwardedRef) => {
+        const Comp = asChild ? Slot : 'button';
+        return (
+            <Comp
+                {...props}
+                className={clsx(buttonVariants({ variant, size }), className)}
+                ref={forwardedRef}
+            />
+        );
+    },
+);
+Button.displayName = 'Button';
+
+export { Button };

package/src/components/ui/Heading.css.ts

@@ -0,0 +1,44 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { themeVars } from '../../themes/themeContract.js';
+
+export const headingVariants = recipe({
+    variants: {
+        size: {
+            sm: {
+                fontSize: themeVars.fontSizes.small,
+            },
+            md: {
+                fontSize: themeVars.fontSizes.medium,
+            },
+            lg: {
+                fontSize: themeVars.fontSizes.large,
+            },
+            xl: {
+                fontSize: themeVars.fontSizes.xlarge,
+            },
+        },
+        weight: {
+            normal: { fontWeight: themeVars.fontWeights.normal },
+            bold: { fontWeight: themeVars.fontWeights.bold },
+        },
+        truncate: {
+            true: {
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'lg',
+        weight: 'bold',
+    },
+});
+
+export type HeadingVariants = RecipeVariants<typeof headingVariants>;

package/src/components/ui/Heading.tsx

@@ -0,0 +1,53 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+
+import { headingVariants } from './Heading.css.js';
+import type { HeadingVariants } from './Heading.css.js';
+
+type HeadingAsChildProps = {
+    asChild?: boolean;
+    as?: never;
+};
+
+type HeadingAsProps = {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    asChild?: never;
+};
+
+type HeadingProps = (HeadingAsChildProps | HeadingAsProps) &
+    React.HTMLAttributes<HTMLHeadingElement> &
+    HeadingVariants;
+
+const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
+    (
+        {
+            children,
+            className,
+            asChild = false,
+            as: Tag = 'h1',
+            size,
+            weight,
+            truncate,
+            ...headingProps
+        },
+        forwardedRef,
+    ) => {
+        return (
+            <Slot
+                {...headingProps}
+                ref={forwardedRef}
+                className={clsx(headingVariants({ size, weight, truncate }), className)}
+            >
+                {asChild ? children : <Tag>{children}</Tag>}
+            </Slot>
+        );
+    },
+);
+Heading.displayName = 'Heading';
+
+export { Heading };

package/src/components/ui/IconButton.css.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css';
+
+import { themeVars } from '../../themes/themeContract.js';
+
+export const container = style({
+    borderRadius: 9999,
+    padding: 8,
+    color: themeVars.colors.iconButton,
+    backgroundColor: themeVars.backgroundColors.iconButton,
+});

package/src/components/ui/IconButton.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+import type { ButtonHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import * as styles from './IconButton.css.js';
+
+type IconButtonProps = {
+    asChild?: boolean;
+    'aria-label': string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+    ({ className, asChild = false, ...props }, forwardedRef) => {
+        const Comp = asChild ? Slot : 'button';
+        return <Comp {...props} className={clsx(styles.container, className)} ref={forwardedRef} />;
+    },
+);
+IconButton.displayName = 'Button';
+
+export { IconButton };

package/src/components/ui/Text.css.ts

@@ -0,0 +1,39 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { themeVars } from '../../themes/themeContract.js';
+
+export const textVariants = recipe({
+    variants: {
+        size: {
+            sm: {
+                fontSize: themeVars.fontSizes.small,
+            },
+        },
+        weight: {
+            normal: { fontWeight: themeVars.fontWeights.normal },
+            medium: { fontWeight: themeVars.fontWeights.medium },
+            bold: { fontWeight: themeVars.fontWeights.bold },
+        },
+        color: {
+            muted: { color: themeVars.colors.bodyMuted },
+            danger: { color: themeVars.colors.bodyDanger },
+        },
+        mono: {
+            true: {
+                fontFamily:
+                    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'sm',
+        weight: 'normal',
+    },
+});
+
+export type TextVariants = RecipeVariants<typeof textVariants>;

package/src/components/ui/Text.tsx

@@ -0,0 +1,51 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+
+import { textVariants } from './Text.css.js';
+import type { TextVariants } from './Text.css.js';
+
+type TextAsChildProps = {
+    asChild?: boolean;
+    as?: never;
+};
+
+type TextDivProps = { as: 'div'; asChild?: never };
+
+type TextProps = (TextAsChildProps | TextDivProps) &
+    React.HTMLAttributes<HTMLDivElement> &
+    TextVariants;
+
+const Text = forwardRef<HTMLDivElement, TextProps>(
+    (
+        {
+            children,
+            className,
+            asChild = false,
+            as: Tag = 'div',
+            size,
+            weight,
+            color,
+            mono,
+            ...textProps
+        },
+        forwardedRef,
+    ) => {
+        return (
+            <Slot
+                {...textProps}
+                ref={forwardedRef}
+                className={clsx(textVariants({ size, weight, color, mono }), className)}
+            >
+                {asChild ? children : <Tag>{children}</Tag>}
+            </Slot>
+        );
+    },
+);
+Text.displayName = 'Text';
+
+export { Text };

package/src/constants/styleDataAttribute.ts

@@ -0,0 +1,9 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const styleDataAttributeName = 'data-dapp-kit';
+
+export const styleDataAttributeSelector = `[${styleDataAttributeName}]`;
+
+export const styleDataAttribute = { [styleDataAttributeName]: '' };

package/src/constants/walletDefaults.ts

@@ -0,0 +1,26 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { IotaWalletFeatures, WalletWithRequiredFeatures } from '@iota/wallet-standard';
+
+import { createInMemoryStore } from '../utils/stateStorage.js';
+
+export const IOTA_WALLET_NAME = 'IOTA Wallet';
+
+export const DEFAULT_STORAGE =
+    typeof window !== 'undefined' && window.localStorage ? localStorage : createInMemoryStore();
+
+export const DEFAULT_STORAGE_KEY = 'iota-dapp-kit:wallet-connection-info';
+
+const SIGN_FEATURES = ['iota:signTransaction'] satisfies (keyof IotaWalletFeatures)[];
+
+export const DEFAULT_WALLET_FILTER = (wallet: WalletWithRequiredFeatures) =>
+    SIGN_FEATURES.some((feature) => wallet.features[feature]);
+
+export const DEFAULT_PREFERRED_WALLETS = [IOTA_WALLET_NAME];
+
+const WALLET_CHROME_EXTENSION_ID = 'iidjkmdceolghepehaaddojmnjnkkija';
+
+export const WALLET_DOWNLOAD_URL =
+    'https://chromewebstore.google.com/detail/' + WALLET_CHROME_EXTENSION_ID;

package/src/constants/walletMutationKeys.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { MutationKey } from '@tanstack/react-query';
+
+export const walletMutationKeys = {
+    all: { baseScope: 'wallet' },
+    connectWallet: formMutationKeyFn('connect-wallet'),
+    autoconnectWallet: formMutationKeyFn('autoconnect-wallet'),
+    disconnectWallet: formMutationKeyFn('disconnect-wallet'),
+    signPersonalMessage: formMutationKeyFn('sign-personal-message'),
+    signTransaction: formMutationKeyFn('sign-transaction'),
+    signAndExecuteTransaction: formMutationKeyFn('sign-and-execute-transaction'),
+    switchAccount: formMutationKeyFn('switch-account'),
+    reportTransactionEffects: formMutationKeyFn('report-transaction-effects'),
+};
+
+function formMutationKeyFn(baseEntity: string) {
+    return function mutationKeyFn(additionalKeys: MutationKey = []) {
+        return [{ ...walletMutationKeys.all, baseEntity }, ...additionalKeys];
+    };
+}

package/src/contexts/walletContext.ts

@@ -0,0 +1,9 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { createContext } from 'react';
+
+import type { WalletStore } from '../walletStore.js';
+
+export const WalletContext = createContext<WalletStore | null>(null);

package/src/errors/walletErrors.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * An error that is instantiated when someone attempts to perform an action that requires an active wallet connection.
+ */
+export class WalletNotConnectedError extends Error {}
+
+/**
+ * An error that is instantiated when someone attempts to perform an action that requires a selected wallet account.
+ * This is more of an edge case stemming from the fact that wallets don't technically require you to authorize any
+ * accounts when connecting a wallet.
+ */
+export class WalletNoAccountSelectedError extends Error {}
+
+/**
+ * An error that is instantiated when someone attempts to perform an action that isn't supported by a wallet.
+ */
+export class WalletFeatureNotSupportedError extends Error {}
+
+/**
+ * An error that is instantiated when a wallet account can't be found for a specific wallet.
+ */
+export class WalletAccountNotFoundError extends Error {}