@iota/dapp-kit 0.1.2 → 0.3.0

package/src/components/WalletProvider.tsx

@@ -9,9 +9,9 @@ import type { StateStorage } from 'zustand/middleware';
 
 import {
     DEFAULT_PREFERRED_WALLETS,
-    DEFAULT_REQUIRED_FEATURES,
     DEFAULT_STORAGE,
     DEFAULT_STORAGE_KEY,
+    DEFAULT_WALLET_FILTER,
 } from '../constants/walletDefaults.js';
 import { WalletContext } from '../contexts/walletContext.js';
 import { useAutoConnectWallet } from '../hooks/wallet/useAutoConnectWallet.js';
@@ -29,8 +29,8 @@ export type WalletProviderProps = {
     /** A list of wallets that are sorted to the top of the wallet list, if they are available to connect to. By default, wallets are sorted by the order they are loaded in. */
     preferredWallets?: string[];
 
-    /** A list of features that are required for the dApp to function. This filters the list of wallets presented to users when selecting a wallet to connect from, ensuring that only wallets that meet the dApps requirements can connect. */
-    requiredFeatures?: (keyof WalletWithRequiredFeatures['features'])[];
+    /** A filter function to select wallets that support features required for the dApp to function. This filters the list of wallets presented to users when selecting a wallet to connect from, ensuring that only wallets that meet the dApps requirements can connect. */
+    walletFilter?: (wallet: WalletWithRequiredFeatures) => boolean;
 
     /** Enables the development-only unsafe burner wallet, which can be useful for testing. */
     enableUnsafeBurner?: boolean;
@@ -54,7 +54,7 @@ export type { WalletWithFeatures };
 
 export function WalletProvider({
     preferredWallets = DEFAULT_PREFERRED_WALLETS,
-    requiredFeatures = DEFAULT_REQUIRED_FEATURES,
+    walletFilter = DEFAULT_WALLET_FILTER,
     storage = DEFAULT_STORAGE,
     storageKey = DEFAULT_STORAGE_KEY,
     enableUnsafeBurner = false,
@@ -65,7 +65,7 @@ export function WalletProvider({
     const storeRef = useRef(
         createWalletStore({
             autoConnectEnabled: autoConnect,
-            wallets: getRegisteredWallets(preferredWallets, requiredFeatures),
+            wallets: getRegisteredWallets(preferredWallets, walletFilter),
             storage: storage || createInMemoryStore(),
             storageKey,
         }),
@@ -75,7 +75,7 @@ export function WalletProvider({
         <WalletContext.Provider value={storeRef.current}>
             <WalletConnectionManager
                 preferredWallets={preferredWallets}
-                requiredFeatures={requiredFeatures}
+                walletFilter={walletFilter}
                 enableUnsafeBurner={enableUnsafeBurner}
             >
                 {/* TODO: We ideally don't want to inject styles if people aren't using the UI components */}
@@ -88,16 +88,16 @@ export function WalletProvider({
 
 type WalletConnectionManagerProps = Pick<
     WalletProviderProps,
-    'preferredWallets' | 'requiredFeatures' | 'enableUnsafeBurner' | 'children'
+    'preferredWallets' | 'walletFilter' | 'enableUnsafeBurner' | 'children'
 >;
 
 function WalletConnectionManager({
     preferredWallets = DEFAULT_PREFERRED_WALLETS,
-    requiredFeatures = DEFAULT_REQUIRED_FEATURES,
+    walletFilter = DEFAULT_WALLET_FILTER,
     enableUnsafeBurner = false,
     children,
 }: WalletConnectionManagerProps) {
-    useWalletsChanged(preferredWallets, requiredFeatures);
+    useWalletsChanged(preferredWallets, walletFilter);
     useWalletPropertiesChanged();
     useUnsafeBurnerWallet(enableUnsafeBurner);
     useAutoConnectWallet();

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.tsx

@@ -10,10 +10,10 @@ import * as styles from './GettingStarted.css.js';
 export function GettingStarted() {
     return (
         <div className={styles.container}>
-            <Heading as="h2">Get Started with Iota</Heading>
+            <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 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

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.tsx

@@ -32,7 +32,7 @@ export function WalletList({ selectedWalletName, onPlaceholderClick, onSelect }:
                 ))
             ) : (
                 <WalletListItem
-                    name="Iota Wallet"
+                    name="IOTA Wallet"
                     icon={<IotaIcon />}
                     onClick={onPlaceholderClick}
                     isSelected

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/styling/InjectedThemeStyles.tsx

@@ -19,6 +19,10 @@ export function InjectedThemeStyles({ theme }: InjectedThemeStylesProps) {
 
     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,
             }}

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

@@ -4,7 +4,6 @@
 
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 import { recipe } from '@vanilla-extract/recipes';
-
 import { themeVars } from '../../themes/themeContract.js';
 
 export const buttonVariants = recipe({
@@ -22,7 +21,6 @@ export const buttonVariants = recipe({
             primary: {
                 backgroundColor: themeVars.backgroundColors.primaryButton,
                 color: themeVars.colors.primaryButton,
-                boxShadow: themeVars.shadows.primaryButton,
                 ':hover': {
                     backgroundColor: themeVars.backgroundColors.primaryButtonHover,
                 },
@@ -31,15 +29,15 @@ export const buttonVariants = recipe({
                 borderWidth: 1,
                 borderStyle: 'solid',
                 borderColor: themeVars.borderColors.outlineButton,
-                color: themeVars.colors.outlineButton,
+                color: themeVars.colors.primaryButton,
                 ':hover': {
                     backgroundColor: themeVars.backgroundColors.outlineButtonHover,
                 },
             },
         },
         size: {
-            md: { borderRadius: themeVars.radii.medium, padding: '8px 16px' },
-            lg: { borderRadius: themeVars.radii.large, padding: '16px 24px ' },
+            md: { borderRadius: themeVars.radii.full, padding: '8px 16px' },
+            lg: { borderRadius: themeVars.radii.full, padding: '16px 24px ' },
         },
     },
     defaultVariants: {

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

@@ -11,7 +11,4 @@ export const container = style({
     padding: 8,
     color: themeVars.colors.iconButton,
     backgroundColor: themeVars.backgroundColors.iconButton,
-    ':hover': {
-        backgroundColor: themeVars.backgroundColors.iconButtonHover,
-    },
 });

package/src/constants/walletDefaults.ts

@@ -2,19 +2,25 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import type { WalletWithRequiredFeatures } from '@iota/wallet-standard';
+import type { IotaWalletFeatures, WalletWithRequiredFeatures } from '@iota/wallet-standard';
 
 import { createInMemoryStore } from '../utils/stateStorage.js';
 
-export const IOTA_WALLET_NAME = 'Iota Wallet';
+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';
 
-export const DEFAULT_REQUIRED_FEATURES: (keyof WalletWithRequiredFeatures['features'])[] = [
-    'iota:signTransactionBlock',
-];
+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 = 'TODO';
+
+export const WALLET_DOWNLOAD_URL =
+    'https://chromewebstore.google.com/detail/' + WALLET_CHROME_EXTENSION_ID;

package/src/constants/walletMutationKeys.ts

@@ -10,9 +10,10 @@ export const walletMutationKeys = {
     autoconnectWallet: formMutationKeyFn('autoconnect-wallet'),
     disconnectWallet: formMutationKeyFn('disconnect-wallet'),
     signPersonalMessage: formMutationKeyFn('sign-personal-message'),
-    signTransactionBlock: formMutationKeyFn('sign-transaction-block'),
-    signAndExecuteTransactionBlock: formMutationKeyFn('sign-and-execute-transaction-block'),
+    signTransaction: formMutationKeyFn('sign-transaction'),
+    signAndExecuteTransaction: formMutationKeyFn('sign-and-execute-transaction'),
     switchAccount: formMutationKeyFn('switch-account'),
+    reportTransactionEffects: formMutationKeyFn('report-transaction-effects'),
 };
 
 function formMutationKeyFn(baseEntity: string) {

package/src/hooks/useIotaClientInfiniteQuery.ts

@@ -81,6 +81,7 @@ export function useIotaClientInfiniteQuery<
                 ...(params ?? {}),
                 cursor: pageParam,
             } as never),
-        getNextPageParam: (lastPage) => (lastPage.hasNextPage ? lastPage.nextCursor ?? null : null),
+        getNextPageParam: (lastPage) =>
+            lastPage.hasNextPage ? (lastPage.nextCursor ?? null) : null,
     });
 }

package/src/hooks/useIotaClientQuery.ts

@@ -66,7 +66,9 @@ export function useIotaClientQuery<
         ...options,
         queryKey: [iotaContext.network, method, params, ...queryKey],
         queryFn: async () => {
-            return await iotaContext.client[method](params as never);
+            return (await iotaContext.client[method](
+                params as never,
+            )) as IotaRpcMethods[T]['result'];
         },
     });
 }

package/src/hooks/wallet/useAutoConnectWallet.ts

@@ -91,5 +91,5 @@ export function useAutoConnectWallet(): 'disabled' | 'idle' | 'attempted' {
         return 'attempted';
     }
 
-    return isError ? 'attempted' : data ?? 'idle';
+    return isError ? 'attempted' : (data ?? 'idle');
 }

package/src/hooks/wallet/useConnectWallet.ts

@@ -58,7 +58,12 @@ export function useConnectWallet({
                 );
                 const selectedAccount = getSelectedAccount(connectedIotaAccounts, accountAddress);
 
-                setWalletConnected(wallet, connectedIotaAccounts, selectedAccount);
+                setWalletConnected(
+                    wallet,
+                    connectedIotaAccounts,
+                    selectedAccount,
+                    connectResult.supportedIntents,
+                );
 
                 return { accounts: connectedIotaAccounts };
             } catch (error) {

package/src/hooks/wallet/useCurrentWallet.ts

@@ -10,6 +10,7 @@ import { useWalletStore } from './useWalletStore.js';
 export function useCurrentWallet() {
     const currentWallet = useWalletStore((state) => state.currentWallet);
     const connectionStatus = useWalletStore((state) => state.connectionStatus);
+    const supportedIntents = useWalletStore((state) => state.supportedIntents);
 
     switch (connectionStatus) {
         case 'connecting':
@@ -19,6 +20,7 @@ export function useCurrentWallet() {
                 isDisconnected: false,
                 isConnecting: true,
                 isConnected: false,
+                supportedIntents: [],
             } as const;
         case 'disconnected':
             return {
@@ -27,6 +29,7 @@ export function useCurrentWallet() {
                 isDisconnected: true,
                 isConnecting: false,
                 isConnected: false,
+                supportedIntents: [],
             } as const;
         case 'connected': {
             return {
@@ -35,6 +38,7 @@ export function useCurrentWallet() {
                 isDisconnected: false,
                 isConnecting: false,
                 isConnected: true,
+                supportedIntents,
             } as const;
         }
     }

package/src/hooks/wallet/useReportTransactionEffects.ts

@@ -0,0 +1,87 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { toB64 } from '@iota/iota-sdk/utils';
+import type { IotaReportTransactionEffectsInput } from '@iota/wallet-standard';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
+import type { WalletFeatureNotSupportedError } from '../../errors/walletErrors.js';
+import {
+    WalletNoAccountSelectedError,
+    WalletNotConnectedError,
+} from '../../errors/walletErrors.js';
+import type { PartialBy } from '../../types/utilityTypes.js';
+import { useCurrentAccount } from './useCurrentAccount.js';
+import { useCurrentWallet } from './useCurrentWallet.js';
+
+type UseReportTransactionEffectsArgs = Omit<
+    PartialBy<IotaReportTransactionEffectsInput, 'account' | 'chain'>,
+    'effects'
+> & {
+    effects: string | number[];
+};
+
+type UseReportTransactionEffectsError =
+    | WalletFeatureNotSupportedError
+    | WalletNoAccountSelectedError
+    | WalletNotConnectedError
+    | Error;
+
+type UseReportTransactionEffectsMutationOptions = Omit<
+    UseMutationOptions<
+        void,
+        UseReportTransactionEffectsError,
+        UseReportTransactionEffectsArgs,
+        unknown
+    >,
+    'mutationFn'
+>;
+
+/**
+ * Mutation hook for prompting the user to sign a message.
+ */
+export function useReportTransactionEffects({
+    mutationKey,
+    ...mutationOptions
+}: UseReportTransactionEffectsMutationOptions = {}): UseMutationResult<
+    void,
+    UseReportTransactionEffectsError,
+    UseReportTransactionEffectsArgs
+> {
+    const { currentWallet } = useCurrentWallet();
+    const currentAccount = useCurrentAccount();
+
+    return useMutation({
+        mutationKey: walletMutationKeys.reportTransactionEffects(mutationKey),
+        mutationFn: async ({
+            effects,
+            chain = currentWallet?.chains[0],
+            account = currentAccount,
+        }) => {
+            if (!currentWallet) {
+                throw new WalletNotConnectedError('No wallet is connected.');
+            }
+
+            if (!account) {
+                throw new WalletNoAccountSelectedError(
+                    'No wallet account is selected to report transaction effects for',
+                );
+            }
+
+            const reportTransactionEffectsFeature =
+                currentWallet.features['iota:reportTransactionEffects'];
+
+            if (reportTransactionEffectsFeature) {
+                return await reportTransactionEffectsFeature.reportTransactionEffects({
+                    effects: Array.isArray(effects) ? toB64(new Uint8Array(effects)) : effects,
+                    account,
+                    chain: chain ?? currentWallet?.chains[0],
+                });
+            }
+        },
+        ...mutationOptions,
+    });
+}

package/src/hooks/wallet/useSignAndExecuteTransaction.ts

@@ -0,0 +1,165 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Transaction } from '@iota/iota-sdk/transactions';
+import { toB64 } from '@iota/iota-sdk/utils';
+import type {
+    IotaSignAndExecuteTransactionInput,
+    IotaSignAndExecuteTransactionOutput,
+} from '@iota/wallet-standard';
+import { signTransaction } from '@iota/wallet-standard';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
+import {
+    WalletFeatureNotSupportedError,
+    WalletNoAccountSelectedError,
+    WalletNotConnectedError,
+} from '../../errors/walletErrors.js';
+import type { PartialBy } from '../../types/utilityTypes.js';
+import { useIotaClient } from '../useIotaClient.js';
+import { useCurrentAccount } from './useCurrentAccount.js';
+import { useCurrentWallet } from './useCurrentWallet.js';
+import { useReportTransactionEffects } from './useReportTransactionEffects.js';
+
+type UseSignAndExecuteTransactionArgs = PartialBy<
+    Omit<IotaSignAndExecuteTransactionInput, 'transaction'>,
+    'account' | 'chain'
+> & {
+    transaction: Transaction | string;
+};
+
+type UseSignAndExecuteTransactionResult = IotaSignAndExecuteTransactionOutput;
+
+type UseSignAndExecuteTransactionError =
+    | WalletFeatureNotSupportedError
+    | WalletNoAccountSelectedError
+    | WalletNotConnectedError
+    | Error;
+
+type ExecuteTransactionResult =
+    | {
+          digest: string;
+          rawEffects?: number[];
+      }
+    | {
+          effects?: {
+              bcs?: string;
+          };
+      };
+
+type UseSignAndExecuteTransactionMutationOptions<Result extends ExecuteTransactionResult> = Omit<
+    UseMutationOptions<
+        Result,
+        UseSignAndExecuteTransactionError,
+        UseSignAndExecuteTransactionArgs,
+        unknown
+    >,
+    'mutationFn'
+> & {
+    execute?: ({ bytes, signature }: { bytes: string; signature: string }) => Promise<Result>;
+};
+
+/**
+ * Mutation hook for prompting the user to sign and execute a transaction.
+ */
+export function useSignAndExecuteTransaction<
+    Result extends ExecuteTransactionResult = UseSignAndExecuteTransactionResult,
+>({
+    mutationKey,
+    execute,
+    ...mutationOptions
+}: UseSignAndExecuteTransactionMutationOptions<Result> = {}): UseMutationResult<
+    Result,
+    UseSignAndExecuteTransactionError,
+    UseSignAndExecuteTransactionArgs
+> {
+    const { currentWallet, supportedIntents } = useCurrentWallet();
+    const currentAccount = useCurrentAccount();
+    const client = useIotaClient();
+    const { mutate: reportTransactionEffects } = useReportTransactionEffects();
+
+    const executeTransaction: ({
+        bytes,
+        signature,
+    }: {
+        bytes: string;
+        signature: string;
+    }) => Promise<ExecuteTransactionResult> =
+        execute ??
+        (async ({ bytes, signature }) => {
+            const { digest, rawEffects } = await client.executeTransactionBlock({
+                transactionBlock: bytes,
+                signature,
+                options: {
+                    showRawEffects: true,
+                },
+            });
+
+            return {
+                digest,
+                rawEffects,
+                effects: toB64(new Uint8Array(rawEffects!)),
+                bytes,
+                signature,
+            };
+        });
+
+    return useMutation({
+        mutationKey: walletMutationKeys.signAndExecuteTransaction(mutationKey),
+        mutationFn: async ({ transaction, ...signTransactionArgs }): Promise<Result> => {
+            if (!currentWallet) {
+                throw new WalletNotConnectedError('No wallet is connected.');
+            }
+
+            const signerAccount = signTransactionArgs.account ?? currentAccount;
+            if (!signerAccount) {
+                throw new WalletNoAccountSelectedError(
+                    'No wallet account is selected to sign the transaction with.',
+                );
+            }
+            const chain = signTransactionArgs.chain ?? signerAccount?.chains[0];
+
+            if (!currentWallet.features['iota:signTransaction']) {
+                throw new WalletFeatureNotSupportedError(
+                    "This wallet doesn't support the `signTransaction` feature.",
+                );
+            }
+
+            const { signature, bytes } = await signTransaction(currentWallet, {
+                ...signTransactionArgs,
+                transaction: {
+                    async toJSON() {
+                        return typeof transaction === 'string'
+                            ? transaction
+                            : await transaction.toJSON({
+                                  supportedIntents,
+                                  client,
+                              });
+                    },
+                },
+                account: signerAccount,
+                chain: signTransactionArgs.chain ?? signerAccount.chains[0],
+            });
+
+            const result = await executeTransaction({ bytes, signature });
+
+            let effects: string;
+
+            if ('effects' in result && result.effects?.bcs) {
+                effects = result.effects.bcs;
+            } else if ('rawEffects' in result) {
+                effects = toB64(new Uint8Array(result.rawEffects!));
+            } else {
+                throw new Error('Could not parse effects from transaction result.');
+            }
+
+            reportTransactionEffects({ effects, account: signerAccount, chain });
+
+            return result as Result;
+        },
+        ...mutationOptions,
+    });
+}