@iota/dapp-kit 0.0.0-experimental-20250610130929

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 {}

package/src/hooks/networkConfig.ts

@@ -0,0 +1,46 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { IotaClientOptions } from '@iota/iota-sdk/client';
+
+import { useIotaClientContext } from './useIotaClient.js';
+
+export type NetworkConfig<T extends object = object> = IotaClientOptions & {
+    variables?: T;
+};
+
+export function createNetworkConfig<
+    const T extends Record<string, Config>,
+    Config extends NetworkConfig<Variables> = T[keyof T],
+    Variables extends object = NonNullable<Config['variables']>,
+>(networkConfig: T) {
+    function useNetworkConfig(): Config {
+        const { config } = useIotaClientContext();
+
+        if (!config) {
+            throw new Error('No network config found');
+        }
+
+        return config as T[keyof T];
+    }
+
+    function useNetworkVariables(): Variables {
+        const { variables } = useNetworkConfig();
+
+        return (variables ?? {}) as Variables;
+    }
+
+    function useNetworkVariable<K extends keyof Variables>(name: K): Variables[K] {
+        const variables = useNetworkVariables();
+
+        return variables[name];
+    }
+
+    return {
+        networkConfig,
+        useNetworkConfig,
+        useNetworkVariables,
+        useNetworkVariable,
+    };
+}

package/src/hooks/useIotaClient.ts

@@ -0,0 +1,24 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { IotaClient } from '@iota/iota-sdk/client';
+import { useContext } from 'react';
+
+import { IotaClientContext } from '../components/IotaClientProvider.js';
+
+export function useIotaClientContext() {
+    const iotaClient = useContext(IotaClientContext);
+
+    if (!iotaClient) {
+        throw new Error(
+            'Could not find IotaClientContext. Ensure that you have set up the IotaClientProvider',
+        );
+    }
+
+    return iotaClient;
+}
+
+export function useIotaClient(): IotaClient {
+    return useIotaClientContext().client;
+}

package/src/hooks/useIotaClientInfiniteQuery.ts

@@ -0,0 +1,87 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { IotaClient } from '@iota/iota-sdk/client';
+import type {
+    InfiniteData,
+    UseInfiniteQueryOptions,
+    UseInfiniteQueryResult,
+} from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import type { PartialBy } from '../types/utilityTypes.js';
+import { useIotaClientContext } from './useIotaClient.js';
+
+interface PaginatedResult {
+    data?: unknown;
+    nextCursor?: unknown;
+    hasNextPage: boolean;
+}
+
+export type IotaRpcPaginatedMethodName = {
+    [K in keyof IotaClient]: IotaClient[K] extends (input: any) => Promise<PaginatedResult>
+        ? K
+        : never;
+}[keyof IotaClient];
+
+export type IotaRpcPaginatedMethods = {
+    [K in IotaRpcPaginatedMethodName]: IotaClient[K] extends (
+        input: infer Params,
+    ) => Promise<
+        infer Result extends { hasNextPage?: boolean | null; nextCursor?: infer Cursor | null }
+    >
+        ? {
+              name: K;
+              result: Result;
+              params: Params;
+              cursor: Cursor;
+          }
+        : never;
+};
+
+export type UseIotaClientInfiniteQueryOptions<
+    T extends keyof IotaRpcPaginatedMethods,
+    TData,
+> = PartialBy<
+    Omit<
+        UseInfiniteQueryOptions<
+            IotaRpcPaginatedMethods[T]['result'],
+            Error,
+            TData,
+            IotaRpcPaginatedMethods[T]['result'],
+            unknown[]
+        >,
+        'queryFn' | 'initialPageParam' | 'getNextPageParam'
+    >,
+    'queryKey'
+>;
+
+export function useIotaClientInfiniteQuery<
+    T extends keyof IotaRpcPaginatedMethods,
+    TData = InfiniteData<IotaRpcPaginatedMethods[T]['result']>,
+>(
+    method: T,
+    params: IotaRpcPaginatedMethods[T]['params'],
+    {
+        queryKey = [],
+        enabled = !!params,
+        ...options
+    }: UseIotaClientInfiniteQueryOptions<T, TData> = {},
+): UseInfiniteQueryResult<TData, Error> {
+    const iotaContext = useIotaClientContext();
+
+    return useInfiniteQuery({
+        ...options,
+        initialPageParam: null,
+        queryKey: [iotaContext.network, method, params, ...queryKey],
+        enabled,
+        queryFn: ({ pageParam }) =>
+            iotaContext.client[method]({
+                ...(params ?? {}),
+                cursor: pageParam,
+            } as never),
+        getNextPageParam: (lastPage) =>
+            lastPage.hasNextPage ? (lastPage.nextCursor ?? null) : null,
+    });
+}

package/src/hooks/useIotaClientMutation.ts

@@ -0,0 +1,28 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+import { useIotaClientContext } from './useIotaClient.js';
+import type { IotaRpcMethods } from './useIotaClientQuery.js';
+
+export type UseIotaClientMutationOptions<T extends keyof IotaRpcMethods> = Omit<
+    UseMutationOptions<IotaRpcMethods[T]['result'], Error, IotaRpcMethods[T]['params'], unknown[]>,
+    'mutationFn'
+>;
+
+export function useIotaClientMutation<T extends keyof IotaRpcMethods>(
+    method: T,
+    options: UseIotaClientMutationOptions<T> = {},
+): UseMutationResult<IotaRpcMethods[T]['result'], Error, IotaRpcMethods[T]['params'], unknown[]> {
+    const iotaContext = useIotaClientContext();
+
+    return useMutation({
+        ...options,
+        mutationFn: async (params) => {
+            return await iotaContext.client[method](params as never);
+        },
+    });
+}