@iota/dapp-kit 0.0.0-experimental-20250610130929

package/src/components/connect-modal/views/ConnectionStatus.css.ts

@@ -0,0 +1,37 @@
+// 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({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    overflowY: 'auto',
+});
+
+export const walletIcon = style({
+    objectFit: 'cover',
+    width: 72,
+    height: 72,
+    borderRadius: themeVars.radii.large,
+});
+
+export const title = style({
+    marginTop: 12,
+});
+
+export const connectionStatus = style({
+    marginTop: 4,
+});
+
+export const retryButtonContainer = style({
+    position: 'absolute',
+    bottom: 20,
+    right: 20,
+});

package/src/components/connect-modal/views/ConnectionStatus.tsx

@@ -0,0 +1,55 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithRequiredFeatures } from '@iota/wallet-standard';
+
+import { Button } from '../../ui/Button.js';
+import { Heading } from '../../ui/Heading.js';
+import { Text } from '../../ui/Text.js';
+import * as styles from './ConnectionStatus.css.js';
+
+type ConnectionStatusProps = {
+    selectedWallet: WalletWithRequiredFeatures;
+    hadConnectionError: boolean;
+    onRetryConnection: (selectedWallet: WalletWithRequiredFeatures) => void;
+};
+
+export function ConnectionStatus({
+    selectedWallet,
+    hadConnectionError,
+    onRetryConnection,
+}: ConnectionStatusProps) {
+    return (
+        <div className={styles.container}>
+            <img
+                className={styles.walletIcon}
+                src={selectedWallet.icon}
+                alt={`${selectedWallet.name} logo`}
+            />
+            <div className={styles.title}>
+                <Heading as="h2" size="xl">
+                    Opening {selectedWallet.name}
+                </Heading>
+            </div>
+            <div className={styles.connectionStatus}>
+                {hadConnectionError ? (
+                    <Text color="danger">Connection failed</Text>
+                ) : (
+                    <Text color="muted">Confirm connection in the wallet...</Text>
+                )}
+            </div>
+            {hadConnectionError ? (
+                <div className={styles.retryButtonContainer}>
+                    <Button
+                        type="button"
+                        variant="primary"
+                        onClick={() => onRetryConnection(selectedWallet)}
+                    >
+                        Retry Connection
+                    </Button>
+                </div>
+            ) : null}
+        </div>
+    );
+}

package/src/components/connect-modal/views/GetTheWallet.css.ts

@@ -0,0 +1,38 @@
+// 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({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: themeVars.spacing.medium,
+    height: '100%',
+    gap: themeVars.spacing.xlarge,
+});
+
+export const content = style({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: themeVars.spacing.medium,
+});
+
+export const text = style({
+    fontSize: themeVars.fontSizes.medium,
+    textAlign: 'center',
+    color: themeVars.colors.body,
+});
+
+export const button = style({
+    display: 'flex',
+    alignItems: 'center',
+    gap: themeVars.spacing.xsmall,
+});
+
+export const icon = style({
+    color: themeVars.colors.body,
+});

package/src/components/connect-modal/views/GetTheWallet.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { WALLET_DOWNLOAD_URL } from '../../../constants/walletDefaults.js';
+import { ArrowTopRightIcon } from '../../icons/ArrowTopRightIcon.js';
+import { IotaIcon } from '../../icons/IotaIcon.js';
+import { Button } from '../../ui/Button.js';
+import * as styles from './GetTheWallet.css.js';
+
+export function GetTheWalletView() {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                <IotaIcon className={styles.icon} width={48} height={48} />
+                <p className={styles.text}>Don't have a wallet yet?</p>
+            </div>
+            <a href={WALLET_DOWNLOAD_URL} target="_blank" rel="noopener noreferrer">
+                <Button size="md" variant="primary" className={styles.button}>
+                    Get the IOTA wallet
+                    <ArrowTopRightIcon width={16} height={16} />
+                </Button>
+            </a>
+        </div>
+    );
+}

package/src/components/connect-modal/views/GettingStarted.css.ts

@@ -0,0 +1,29 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    overflowY: 'auto',
+});
+
+export const content = style({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    flexGrow: 1,
+    gap: 20,
+    padding: 40,
+    paddingBottom: 60,
+    overflow: 'auto',
+});
+
+export const installButtonContainer = style({
+    position: 'absolute',
+    bottom: 20,
+    right: 20,
+});

package/src/components/connect-modal/views/GettingStarted.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button } from '../../ui/Button.js';
+import { Heading } from '../../ui/Heading.js';
+import { InfoSection } from '../InfoSection.js';
+import * as styles from './GettingStarted.css.js';
+
+export function GettingStarted() {
+    return (
+        <div className={styles.container}>
+            <Heading as="h2">Get Started with IOTA</Heading>
+            <div className={styles.content}>
+                <InfoSection title="Install the IOTA Wallet Extension">
+                    We recommend pinning IOTA Wallet to your taskbar for quicker access.
+                </InfoSection>
+                <InfoSection title="Create or Import a Wallet">
+                    Be sure to back up your wallet using a secure method. Never share your secret
+                    phrase with anyone.
+                </InfoSection>
+                <InfoSection title="Refresh Your Browser">
+                    Once you set up your wallet, refresh this window browser to load up the
+                    extension.
+                </InfoSection>
+                <div className={styles.installButtonContainer}>
+                    <Button variant="primary" asChild>
+                        <a
+                            href="https://chrome.google.com/webstore/detail/iota-wallet/iidjkmdceolghepehaaddojmnjnkkija"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            Install Wallet Extension
+                        </a>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/connect-modal/views/WhatIsAWallet.css.ts

@@ -0,0 +1,21 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+});
+
+export const content = style({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    flexGrow: 1,
+    gap: 20,
+    padding: 40,
+    overflowY: 'auto',
+});

package/src/components/connect-modal/views/WhatIsAWallet.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Heading } from '../../ui/Heading.js';
+import { InfoSection } from '../InfoSection.js';
+import * as styles from './WhatIsAWallet.css.js';
+
+export function WhatIsAWallet() {
+    return (
+        <div className={styles.container}>
+            <Heading as="h2">What is a Wallet</Heading>
+            <div className={styles.content}>
+                <InfoSection title="Easy Login">
+                    No need to create new accounts and passwords for every website. Just connect
+                    your wallet and get going.
+                </InfoSection>
+                <InfoSection title="Store your Digital Assets">
+                    Send, receive, store, and display your digital assets like NFTs & coins.
+                </InfoSection>
+            </div>
+        </div>
+    );
+}

package/src/components/connect-modal/views/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './ConnectionStatus.js';
+export * from './WhatIsAWallet.js';
+export * from './GetTheWallet.js';

package/src/components/connect-modal/wallet-list/WalletList.css.ts

@@ -0,0 +1,17 @@
+// 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({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    overflowY: 'auto',
+});
+
+export const icon = style({
+    color: themeVars.colors.body,
+});

package/src/components/connect-modal/wallet-list/WalletList.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithRequiredFeatures } from '@iota/wallet-standard';
+
+import { useWallets } from '../../../hooks/wallet/useWallets.js';
+import { getWalletUniqueIdentifier } from '../../../utils/walletUtils.js';
+import { IotaIcon } from '../../icons/IotaIcon.js';
+import * as styles from './WalletList.css.js';
+import { WalletListItem } from './WalletListItem.js';
+
+type WalletListProps = {
+    selectedWalletName?: string;
+    onPlaceholderClick: () => void;
+    onSelect: (wallet: WalletWithRequiredFeatures) => void;
+};
+
+export function WalletList({ selectedWalletName, onPlaceholderClick, onSelect }: WalletListProps) {
+    const wallets = useWallets();
+    return (
+        <ul className={styles.container}>
+            {wallets.length > 0 ? (
+                wallets.map((wallet) => (
+                    <WalletListItem
+                        key={getWalletUniqueIdentifier(wallet)}
+                        name={wallet.name}
+                        icon={wallet.icon}
+                        isSelected={getWalletUniqueIdentifier(wallet) === selectedWalletName}
+                        onClick={() => onSelect(wallet)}
+                    />
+                ))
+            ) : (
+                <WalletListItem
+                    name="IOTA Wallet"
+                    icon={<IotaIcon className={styles.icon} />}
+                    onClick={onPlaceholderClick}
+                    isSelected
+                />
+            )}
+        </ul>
+    );
+}

package/src/components/connect-modal/wallet-list/WalletListItem.css.ts

@@ -0,0 +1,36 @@
+// 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({
+    display: 'flex',
+});
+
+export const walletItem = style({
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 1,
+    padding: 8,
+    gap: 8,
+    borderRadius: themeVars.radii.large,
+    ':hover': {
+        backgroundColor: themeVars.backgroundColors.walletItemHover,
+    },
+});
+
+export const selectedWalletItem = style({
+    backgroundColor: themeVars.backgroundColors.walletItemSelected,
+    boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.05)',
+});
+
+export const walletIcon = style({
+    width: 28,
+    height: 28,
+    flexShrink: 0,
+    objectFit: 'cover',
+    borderRadius: themeVars.radii.small,
+});

package/src/components/connect-modal/wallet-list/WalletListItem.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { clsx } from 'clsx';
+import type { ReactNode } from 'react';
+
+import { Heading } from '../../ui/Heading.js';
+import * as styles from './WalletListItem.css.js';
+
+type WalletListItemProps = {
+    name: string;
+    icon: ReactNode;
+    isSelected?: boolean;
+    onClick: () => void;
+};
+
+export function WalletListItem({ name, icon, onClick, isSelected = false }: WalletListItemProps) {
+    return (
+        <li className={styles.container}>
+            <button
+                className={clsx(styles.walletItem, { [styles.selectedWalletItem]: isSelected })}
+                type="button"
+                onClick={onClick}
+            >
+                {typeof icon === 'string' ? (
+                    <img className={styles.walletIcon} src={icon} alt={`${name} logo`} />
+                ) : (
+                    icon
+                )}
+                <Heading size="md" truncate asChild>
+                    <div>{name}</div>
+                </Heading>
+            </button>
+        </li>
+    );
+}

package/src/components/icons/ArrowRightIcon.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 ArrowRightIcon(props: ComponentProps<'svg'>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            {...props}
+        >
+            <path
+                fill="currentColor"
+                d="m10.707 6.293 5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L13.586 12 9.293 7.707a1 1 0 0 1 1.414-1.414Z"
+            />
+        </svg>
+    );
+}

package/src/components/icons/ArrowTopRightIcon.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 ArrowTopRightIcon(props: ComponentProps<'svg'>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            {...props}
+        >
+            <path
+                d="M17.4825 6.29014C17.3873 6.19563 17.2778 6.12421 17.161 6.07588C17.0431 6.02699 16.9138 6 16.7782 6L8.70711 6C8.15482 6 7.70711 6.44772 7.70711 7C7.70711 7.55228 8.15482 8 8.70711 8L14.364 8L6.29289 16.0711C5.90237 16.4616 5.90237 17.0948 6.29289 17.4853C6.68342 17.8758 7.31658 17.8758 7.70711 17.4853L15.7782 9.41421V15.0711C15.7782 15.6234 16.2259 16.0711 16.7782 16.0711C17.3305 16.0711 17.7782 15.6234 17.7782 15.0711L17.7782 7.0008C17.7782 6.86458 17.7509 6.73391 17.7016 6.61556C17.6531 6.49895 17.5816 6.38966 17.487 6.29464L17.4853 6.29289L17.4825 6.29014Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}

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('');
+}