@iota/dapp-kit 0.5.3 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +34 -0
- package/dist/cjs/components/AccountDropdownMenu.d.ts +4 -2
- package/dist/cjs/components/AccountDropdownMenu.js +81 -15
- package/dist/cjs/components/AccountDropdownMenu.js.map +4 -4
- package/dist/cjs/components/ConnectButton.d.ts +2 -1
- package/dist/cjs/components/ConnectButton.js +163 -89
- package/dist/cjs/components/ConnectButton.js.map +4 -4
- package/dist/cjs/components/WalletProvider.d.ts +3 -1
- package/dist/cjs/components/WalletProvider.js +7 -3
- package/dist/cjs/components/WalletProvider.js.map +2 -2
- package/dist/cjs/hooks/useGetDefaultIotaName.d.ts +1 -0
- package/dist/cjs/hooks/useGetDefaultIotaName.js +80 -0
- package/dist/cjs/hooks/useGetDefaultIotaName.js.map +7 -0
- package/dist/cjs/hooks/wallet/useCurrentChain.d.ts +5 -0
- package/dist/cjs/hooks/wallet/useCurrentChain.js +50 -0
- package/dist/cjs/hooks/wallet/useCurrentChain.js.map +7 -0
- package/dist/cjs/hooks/wallet/useSignAndExecuteTransaction.js +8 -2
- package/dist/cjs/hooks/wallet/useSignAndExecuteTransaction.js.map +3 -3
- package/dist/cjs/index.js +179 -118
- package/dist/cjs/index.js.map +4 -4
- package/dist/cjs/walletStore.d.ts +4 -1
- package/dist/cjs/walletStore.js +3 -1
- package/dist/cjs/walletStore.js.map +2 -2
- package/dist/esm/components/AccountDropdownMenu.d.ts +4 -2
- package/dist/esm/components/AccountDropdownMenu.js +79 -13
- package/dist/esm/components/AccountDropdownMenu.js.map +4 -4
- package/dist/esm/components/ConnectButton.d.ts +2 -1
- package/dist/esm/components/ConnectButton.js +145 -71
- package/dist/esm/components/ConnectButton.js.map +4 -4
- package/dist/esm/components/WalletProvider.d.ts +3 -1
- package/dist/esm/components/WalletProvider.js +7 -3
- package/dist/esm/components/WalletProvider.js.map +2 -2
- package/dist/esm/hooks/useGetDefaultIotaName.d.ts +1 -0
- package/dist/esm/hooks/useGetDefaultIotaName.js +59 -0
- package/dist/esm/hooks/useGetDefaultIotaName.js.map +7 -0
- package/dist/esm/hooks/wallet/useCurrentChain.d.ts +5 -0
- package/dist/esm/hooks/wallet/useCurrentChain.js +27 -0
- package/dist/esm/hooks/wallet/useCurrentChain.js.map +7 -0
- package/dist/esm/hooks/wallet/useSignAndExecuteTransaction.js +8 -2
- package/dist/esm/hooks/wallet/useSignAndExecuteTransaction.js.map +3 -3
- package/dist/esm/index.js +150 -89
- package/dist/esm/index.js.map +4 -4
- package/dist/esm/walletStore.d.ts +4 -1
- package/dist/esm/walletStore.js +3 -1
- package/dist/esm/walletStore.js.map +2 -2
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -3
- package/src/components/AccountDropdownMenu.tsx +17 -3
- package/src/components/ConnectButton.tsx +7 -1
- package/src/components/WalletProvider.tsx +5 -0
- package/src/hooks/useGetDefaultIotaName.ts +43 -0
- package/src/hooks/wallet/useCurrentChain.ts +12 -0
- package/src/hooks/wallet/useSignAndExecuteTransaction.ts +5 -2
- package/src/walletStore.ts +5 -0
|
@@ -24,6 +24,7 @@ import { createInMemoryStore } from '../utils/stateStorage.js';
|
|
|
24
24
|
import { getRegisteredWallets } from '../utils/walletUtils.js';
|
|
25
25
|
import { createWalletStore } from '../walletStore.js';
|
|
26
26
|
import { InjectedThemeStyles } from './styling/InjectedThemeStyles.js';
|
|
27
|
+
import type { ChainType } from '@iota/iota-sdk/client';
|
|
27
28
|
|
|
28
29
|
export type WalletProviderProps = {
|
|
29
30
|
/** 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. */
|
|
@@ -47,6 +48,8 @@ export type WalletProviderProps = {
|
|
|
47
48
|
/** The theme to use for styling UI components. Defaults to using the light theme. */
|
|
48
49
|
theme?: Theme | null;
|
|
49
50
|
|
|
51
|
+
chain?: ChainType;
|
|
52
|
+
|
|
50
53
|
children: ReactNode;
|
|
51
54
|
};
|
|
52
55
|
|
|
@@ -61,6 +64,7 @@ export function WalletProvider({
|
|
|
61
64
|
autoConnect = false,
|
|
62
65
|
theme = lightTheme,
|
|
63
66
|
children,
|
|
67
|
+
chain,
|
|
64
68
|
}: WalletProviderProps) {
|
|
65
69
|
const storeRef = useRef(
|
|
66
70
|
createWalletStore({
|
|
@@ -68,6 +72,7 @@ export function WalletProvider({
|
|
|
68
72
|
wallets: getRegisteredWallets(preferredWallets, walletFilter),
|
|
69
73
|
storage: storage || createInMemoryStore(),
|
|
70
74
|
storageKey,
|
|
75
|
+
chain,
|
|
71
76
|
}),
|
|
72
77
|
);
|
|
73
78
|
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
// Copyright (c) 2025 IOTA Stiftung
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
|
|
4
|
+
import { getNetwork } from '@iota/iota-sdk/client';
|
|
5
|
+
import { useQuery } from '@tanstack/react-query';
|
|
6
|
+
import { IotaNamesClient, normalizeIotaName } from '@iota/iota-names-sdk';
|
|
7
|
+
import { useIotaClientContext } from './useIotaClient.js';
|
|
8
|
+
import { useMemo } from 'react';
|
|
9
|
+
import { IotaGraphQLClient } from '@iota/iota-sdk/graphql';
|
|
10
|
+
|
|
11
|
+
export function useGetDefaultIotaName(
|
|
12
|
+
address: string | null | undefined,
|
|
13
|
+
iotaNamesEnabled: boolean,
|
|
14
|
+
) {
|
|
15
|
+
const iotaContext = useIotaClientContext();
|
|
16
|
+
const network = getNetwork(iotaContext.network);
|
|
17
|
+
|
|
18
|
+
const iotaNamesClient = useMemo(() => {
|
|
19
|
+
const iotaGraphQLClient = new IotaGraphQLClient({
|
|
20
|
+
url: network.graphql!,
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
return new IotaNamesClient({
|
|
24
|
+
graphQlClient: iotaGraphQLClient,
|
|
25
|
+
network: network.id,
|
|
26
|
+
});
|
|
27
|
+
}, [network.id]);
|
|
28
|
+
|
|
29
|
+
const iotaNamesSupported = !!iotaNamesClient.config;
|
|
30
|
+
|
|
31
|
+
return useQuery({
|
|
32
|
+
queryKey: ['iota-name', 'default-name', address],
|
|
33
|
+
queryFn: async () => {
|
|
34
|
+
if (!address) return null;
|
|
35
|
+
|
|
36
|
+
const name = await iotaNamesClient?.getDefaultName(address);
|
|
37
|
+
|
|
38
|
+
return name ? normalizeIotaName(name) : name;
|
|
39
|
+
},
|
|
40
|
+
enabled: !!iotaNamesClient && !!address && iotaNamesEnabled && iotaNamesSupported,
|
|
41
|
+
staleTime: 1000 * 60 * 10,
|
|
42
|
+
});
|
|
43
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// Copyright (c) 2025 IOTA Stiftung
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
|
|
4
|
+
import type { ChainType } from '@iota/iota-sdk/client';
|
|
5
|
+
import { useWalletStore } from './useWalletStore.js';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Retrieves the chain the dapp is configured with, if any.
|
|
9
|
+
*/
|
|
10
|
+
export function useCurrentChain(): ChainType | undefined {
|
|
11
|
+
return useWalletStore((state) => state.chain);
|
|
12
|
+
}
|
|
@@ -23,6 +23,7 @@ import { useIotaClient } from '../useIotaClient.js';
|
|
|
23
23
|
import { useCurrentAccount } from './useCurrentAccount.js';
|
|
24
24
|
import { useCurrentWallet } from './useCurrentWallet.js';
|
|
25
25
|
import { useReportTransactionEffects } from './useReportTransactionEffects.js';
|
|
26
|
+
import { useCurrentChain } from './useCurrentChain.js';
|
|
26
27
|
|
|
27
28
|
type UseSignAndExecuteTransactionArgs = PartialBy<
|
|
28
29
|
Omit<IotaSignAndExecuteTransactionInput, 'transaction'>,
|
|
@@ -77,6 +78,7 @@ export function useSignAndExecuteTransaction<
|
|
|
77
78
|
UseSignAndExecuteTransactionError,
|
|
78
79
|
UseSignAndExecuteTransactionArgs
|
|
79
80
|
> {
|
|
81
|
+
const currentChain = useCurrentChain();
|
|
80
82
|
const { currentWallet, supportedIntents } = useCurrentWallet();
|
|
81
83
|
const currentAccount = useCurrentAccount();
|
|
82
84
|
const client = useIotaClient();
|
|
@@ -121,7 +123,6 @@ export function useSignAndExecuteTransaction<
|
|
|
121
123
|
'No wallet account is selected to sign the transaction with.',
|
|
122
124
|
);
|
|
123
125
|
}
|
|
124
|
-
const chain = signTransactionArgs.chain ?? signerAccount?.chains[0];
|
|
125
126
|
|
|
126
127
|
if (!currentWallet.features['iota:signTransaction']) {
|
|
127
128
|
throw new WalletFeatureNotSupportedError(
|
|
@@ -129,6 +130,8 @@ export function useSignAndExecuteTransaction<
|
|
|
129
130
|
);
|
|
130
131
|
}
|
|
131
132
|
|
|
133
|
+
const chain = signTransactionArgs.chain ?? currentChain ?? signerAccount?.chains[0];
|
|
134
|
+
|
|
132
135
|
const { signature, bytes } = await signTransaction(currentWallet, {
|
|
133
136
|
...signTransactionArgs,
|
|
134
137
|
transaction: {
|
|
@@ -142,7 +145,7 @@ export function useSignAndExecuteTransaction<
|
|
|
142
145
|
},
|
|
143
146
|
},
|
|
144
147
|
account: signerAccount,
|
|
145
|
-
chain
|
|
148
|
+
chain,
|
|
146
149
|
});
|
|
147
150
|
|
|
148
151
|
const result = await executeTransaction({ bytes, signature });
|
package/src/walletStore.ts
CHANGED
|
@@ -8,6 +8,7 @@ import type { StateStorage } from 'zustand/middleware';
|
|
|
8
8
|
import { createJSONStorage, persist } from 'zustand/middleware';
|
|
9
9
|
|
|
10
10
|
import { getWalletUniqueIdentifier } from './utils/walletUtils.js';
|
|
11
|
+
import type { ChainType } from '@iota/iota-sdk/client';
|
|
11
12
|
|
|
12
13
|
type WalletConnectionStatus = 'disconnected' | 'connecting' | 'connected';
|
|
13
14
|
|
|
@@ -41,6 +42,7 @@ export type StoreState = {
|
|
|
41
42
|
lastConnectedWalletName: string | null;
|
|
42
43
|
connectionStatus: WalletConnectionStatus;
|
|
43
44
|
supportedIntents: string[];
|
|
45
|
+
chain: ChainType | undefined;
|
|
44
46
|
} & WalletActions;
|
|
45
47
|
|
|
46
48
|
type WalletConfiguration = {
|
|
@@ -48,6 +50,7 @@ type WalletConfiguration = {
|
|
|
48
50
|
wallets: WalletWithRequiredFeatures[];
|
|
49
51
|
storage: StateStorage;
|
|
50
52
|
storageKey: string;
|
|
53
|
+
chain?: ChainType;
|
|
51
54
|
};
|
|
52
55
|
|
|
53
56
|
export function createWalletStore({
|
|
@@ -55,6 +58,7 @@ export function createWalletStore({
|
|
|
55
58
|
storage,
|
|
56
59
|
storageKey,
|
|
57
60
|
autoConnectEnabled,
|
|
61
|
+
chain,
|
|
58
62
|
}: WalletConfiguration) {
|
|
59
63
|
return createStore<StoreState>()(
|
|
60
64
|
persist(
|
|
@@ -68,6 +72,7 @@ export function createWalletStore({
|
|
|
68
72
|
lastConnectedWalletName: null,
|
|
69
73
|
connectionStatus: 'disconnected',
|
|
70
74
|
supportedIntents: [],
|
|
75
|
+
chain,
|
|
71
76
|
setConnectionStatus(connectionStatus) {
|
|
72
77
|
set(() => ({
|
|
73
78
|
connectionStatus,
|