@txnlab/use-wallet-react 3.0.0-alpha.1 → 3.0.0-alpha.2
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/dist/index.cjs +42 -20
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +20 -14
- package/dist/index.d.ts +20 -14
- package/dist/index.js +42 -20
- package/dist/index.js.map +1 -1
- package/package.json +6 -2
package/dist/index.cjs
CHANGED
|
@@ -35,23 +35,22 @@ __export(src_exports, {
|
|
|
35
35
|
});
|
|
36
36
|
module.exports = __toCommonJS(src_exports);
|
|
37
37
|
|
|
38
|
+
// src/useWallet.ts
|
|
39
|
+
var import_react_store = require("@tanstack/react-store");
|
|
40
|
+
var React2 = __toESM(require("react"), 1);
|
|
41
|
+
|
|
38
42
|
// src/WalletProvider.tsx
|
|
39
43
|
var React = __toESM(require("react"), 1);
|
|
40
|
-
var
|
|
41
|
-
var WalletContext = React.createContext({});
|
|
44
|
+
var WalletContext = React.createContext(void 0);
|
|
42
45
|
var useWalletManager = () => {
|
|
43
|
-
const
|
|
44
|
-
if (!
|
|
46
|
+
const manager = React.useContext(WalletContext);
|
|
47
|
+
if (!manager) {
|
|
45
48
|
throw new Error("useWallet must be used within the WalletProvider");
|
|
46
49
|
}
|
|
47
|
-
return
|
|
50
|
+
return manager;
|
|
48
51
|
};
|
|
49
52
|
var WalletProvider = ({ manager, children }) => {
|
|
50
|
-
const [state, setState] = React.useState(import_use_wallet_js.defaultState);
|
|
51
53
|
React.useEffect(() => {
|
|
52
|
-
const unsubscribe = manager.subscribe((state2) => {
|
|
53
|
-
setState(state2);
|
|
54
|
-
});
|
|
55
54
|
const resumeSessions = async () => {
|
|
56
55
|
try {
|
|
57
56
|
await manager.resumeSessions();
|
|
@@ -60,33 +59,56 @@ var WalletProvider = ({ manager, children }) => {
|
|
|
60
59
|
}
|
|
61
60
|
};
|
|
62
61
|
resumeSessions();
|
|
63
|
-
return () => unsubscribe();
|
|
64
62
|
}, [manager]);
|
|
65
|
-
return /* @__PURE__ */ React.createElement(WalletContext.Provider, { value:
|
|
63
|
+
return /* @__PURE__ */ React.createElement(WalletContext.Provider, { value: manager }, children);
|
|
66
64
|
};
|
|
67
65
|
|
|
68
66
|
// src/useWallet.ts
|
|
69
67
|
function useWallet() {
|
|
70
|
-
const
|
|
71
|
-
const { activeNetwork, activeWallet } = state;
|
|
72
|
-
const wallets = manager.wallets;
|
|
68
|
+
const manager = useWalletManager();
|
|
73
69
|
const algodClient = manager.algodClient;
|
|
74
|
-
const
|
|
75
|
-
const
|
|
76
|
-
const
|
|
77
|
-
const
|
|
70
|
+
const walletStateMap = (0, import_react_store.useStore)(manager.store, (state) => state.wallets);
|
|
71
|
+
const activeWalletId = (0, import_react_store.useStore)(manager.store, (state) => state.activeWallet);
|
|
72
|
+
const walletsArray = React2.useMemo(() => [...manager.wallets.values()], [manager]);
|
|
73
|
+
const [wallets, setWallets] = React2.useState([]);
|
|
74
|
+
React2.useEffect(() => {
|
|
75
|
+
setWallets(
|
|
76
|
+
walletsArray.map((wallet) => {
|
|
77
|
+
const walletState = walletStateMap[wallet.id];
|
|
78
|
+
return {
|
|
79
|
+
id: wallet.id,
|
|
80
|
+
metadata: wallet.metadata,
|
|
81
|
+
accounts: walletState?.accounts ?? [],
|
|
82
|
+
activeAccount: walletState?.activeAccount ?? null,
|
|
83
|
+
isConnected: !!walletState,
|
|
84
|
+
isActive: wallet.id === activeWalletId,
|
|
85
|
+
connect: () => wallet.connect(),
|
|
86
|
+
disconnect: () => wallet.disconnect(),
|
|
87
|
+
setActive: () => wallet.setActive(),
|
|
88
|
+
setActiveAccount: (addr) => wallet.setActiveAccount(addr)
|
|
89
|
+
};
|
|
90
|
+
})
|
|
91
|
+
);
|
|
92
|
+
}, [walletsArray, walletStateMap, activeWalletId]);
|
|
93
|
+
const activeWallet = activeWalletId ? manager.getWallet(activeWalletId) || null : null;
|
|
94
|
+
const activeWalletState = activeWalletId ? walletStateMap[activeWalletId] || null : null;
|
|
95
|
+
const activeWalletAccounts = activeWalletState?.accounts ?? null;
|
|
96
|
+
const activeWalletAddresses = activeWalletAccounts?.map((account) => account.address) ?? null;
|
|
97
|
+
const activeAccount = activeWalletState?.activeAccount ?? null;
|
|
98
|
+
const activeAddress = activeAccount?.address ?? null;
|
|
99
|
+
const activeNetwork = (0, import_react_store.useStore)(manager.store, (state) => state.activeNetwork);
|
|
78
100
|
const setActiveNetwork = manager.setActiveNetwork;
|
|
79
101
|
const signTransactions = (txnGroup, indexesToSign, returnGroup) => {
|
|
80
102
|
if (!activeWallet) {
|
|
81
103
|
throw new Error("No active wallet");
|
|
82
104
|
}
|
|
83
|
-
return
|
|
105
|
+
return activeWallet.signTransactions(txnGroup, indexesToSign, returnGroup);
|
|
84
106
|
};
|
|
85
107
|
const transactionSigner = (txnGroup, indexesToSign) => {
|
|
86
108
|
if (!activeWallet) {
|
|
87
109
|
throw new Error("No active wallet");
|
|
88
110
|
}
|
|
89
|
-
return
|
|
111
|
+
return activeWallet.transactionSigner(txnGroup, indexesToSign);
|
|
90
112
|
};
|
|
91
113
|
return {
|
|
92
114
|
wallets,
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/useWallet.ts","../src/WalletProvider.tsx"],"sourcesContent":["export { useWallet } from './useWallet'\nexport { WalletProvider } from './WalletProvider'\n","'use client'\n\nimport { useStore } from '@tanstack/react-store'\nimport * as React from 'react'\nimport { useWalletManager } from './WalletProvider'\nimport type { WalletAccount, WalletMetadata } from '@txnlab/use-wallet-js'\nimport type algosdk from 'algosdk'\n\nexport interface Wallet {\n id: string\n metadata: WalletMetadata\n accounts: WalletAccount[]\n activeAccount: WalletAccount | null\n isConnected: boolean\n isActive: boolean\n connect: () => Promise<WalletAccount[]>\n disconnect: () => Promise<void>\n setActive: () => void\n setActiveAccount: (address: string) => void\n}\n\nexport function useWallet() {\n const manager = useWalletManager()\n\n const algodClient: algosdk.Algodv2 = manager.algodClient\n\n const walletStateMap = useStore(manager.store, (state) => state.wallets)\n const activeWalletId = useStore(manager.store, (state) => state.activeWallet)\n\n const walletsArray = React.useMemo(() => [...manager.wallets.values()], [manager])\n\n const [wallets, setWallets] = React.useState<Wallet[]>([])\n\n React.useEffect(() => {\n setWallets(\n walletsArray.map((wallet): Wallet => {\n const walletState = walletStateMap[wallet.id]\n\n return {\n id: wallet.id,\n metadata: wallet.metadata,\n accounts: walletState?.accounts ?? [],\n activeAccount: walletState?.activeAccount ?? null,\n isConnected: !!walletState,\n isActive: wallet.id === activeWalletId,\n connect: () => wallet.connect(),\n disconnect: () => wallet.disconnect(),\n setActive: () => wallet.setActive(),\n setActiveAccount: (addr) => wallet.setActiveAccount(addr)\n }\n })\n )\n }, [walletsArray, walletStateMap, activeWalletId])\n\n const activeWallet = activeWalletId ? manager.getWallet(activeWalletId) || null : null\n const activeWalletState = activeWalletId ? walletStateMap[activeWalletId] || null : null\n\n const activeWalletAccounts = activeWalletState?.accounts ?? null\n const activeWalletAddresses = activeWalletAccounts?.map((account) => account.address) ?? null\n const activeAccount = activeWalletState?.activeAccount ?? null\n const activeAddress = activeAccount?.address ?? null\n\n const activeNetwork = useStore(manager.store, (state) => state.activeNetwork)\n const setActiveNetwork = manager.setActiveNetwork\n\n const signTransactions = (\n txnGroup: algosdk.Transaction[] | algosdk.Transaction[][] | Uint8Array[] | Uint8Array[][],\n indexesToSign?: number[],\n returnGroup?: boolean\n ) => {\n if (!activeWallet) {\n throw new Error('No active wallet')\n }\n return activeWallet.signTransactions(txnGroup, indexesToSign, returnGroup)\n }\n\n const transactionSigner = (txnGroup: algosdk.Transaction[], indexesToSign: number[]) => {\n if (!activeWallet) {\n throw new Error('No active wallet')\n }\n return activeWallet.transactionSigner(txnGroup, indexesToSign)\n }\n\n return {\n wallets,\n algodClient,\n activeNetwork,\n activeWallet,\n activeWalletAccounts,\n activeWalletAddresses,\n activeAccount,\n activeAddress,\n setActiveNetwork,\n signTransactions,\n transactionSigner\n }\n}\n","'use client'\n\nimport { WalletManager } from '@txnlab/use-wallet-js'\nimport * as React from 'react'\n\nconst WalletContext = React.createContext<WalletManager | undefined>(undefined)\n\nexport const useWalletManager = () => {\n const manager = React.useContext(WalletContext)\n\n if (!manager) {\n throw new Error('useWallet must be used within the WalletProvider')\n }\n\n return manager\n}\n\ninterface WalletProviderProps {\n manager: WalletManager\n children: React.ReactNode\n}\n\nexport const WalletProvider = ({ manager, children }: WalletProviderProps): JSX.Element => {\n React.useEffect(() => {\n const resumeSessions = async () => {\n try {\n await manager.resumeSessions()\n } catch (error) {\n console.error('Error resuming sessions:', error)\n }\n }\n\n resumeSessions()\n }, [manager])\n\n return <WalletContext.Provider value={manager}>{children}</WalletContext.Provider>\n}\n"],"mappings":"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","names":["React"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,32 +1,38 @@
|
|
|
1
1
|
import * as _txnlab_use_wallet_js from '@txnlab/use-wallet-js';
|
|
2
|
-
import { WalletManager } from '@txnlab/use-wallet-js';
|
|
2
|
+
import { WalletAccount, WalletMetadata, WalletManager } from '@txnlab/use-wallet-js';
|
|
3
3
|
import algosdk from 'algosdk';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
|
|
6
|
+
interface Wallet {
|
|
7
|
+
id: string;
|
|
8
|
+
metadata: WalletMetadata;
|
|
9
|
+
accounts: WalletAccount[];
|
|
10
|
+
activeAccount: WalletAccount | null;
|
|
11
|
+
isConnected: boolean;
|
|
12
|
+
isActive: boolean;
|
|
13
|
+
connect: () => Promise<WalletAccount[]>;
|
|
14
|
+
disconnect: () => Promise<void>;
|
|
15
|
+
setActive: () => void;
|
|
16
|
+
setActiveAccount: (address: string) => void;
|
|
17
|
+
}
|
|
6
18
|
declare function useWallet(): {
|
|
7
|
-
wallets:
|
|
19
|
+
wallets: Wallet[];
|
|
8
20
|
algodClient: algosdk.Algodv2;
|
|
9
21
|
activeNetwork: _txnlab_use_wallet_js.NetworkId;
|
|
10
|
-
activeWallet: _txnlab_use_wallet_js.
|
|
11
|
-
activeWalletAccounts:
|
|
12
|
-
name: string;
|
|
13
|
-
address: string;
|
|
14
|
-
}[] | null;
|
|
22
|
+
activeWallet: _txnlab_use_wallet_js.BaseWallet | null;
|
|
23
|
+
activeWalletAccounts: WalletAccount[] | null;
|
|
15
24
|
activeWalletAddresses: string[] | null;
|
|
16
|
-
activeAccount:
|
|
17
|
-
name: string;
|
|
18
|
-
address: string;
|
|
19
|
-
} | null;
|
|
25
|
+
activeAccount: WalletAccount | null;
|
|
20
26
|
activeAddress: string | null;
|
|
21
27
|
setActiveNetwork: (networkId: _txnlab_use_wallet_js.NetworkId) => void;
|
|
22
28
|
signTransactions: (txnGroup: algosdk.Transaction[] | algosdk.Transaction[][] | Uint8Array[] | Uint8Array[][], indexesToSign?: number[], returnGroup?: boolean) => Promise<Uint8Array[]>;
|
|
23
29
|
transactionSigner: (txnGroup: algosdk.Transaction[], indexesToSign: number[]) => Promise<Uint8Array[]>;
|
|
24
30
|
};
|
|
25
31
|
|
|
26
|
-
interface
|
|
32
|
+
interface WalletProviderProps {
|
|
27
33
|
manager: WalletManager;
|
|
28
|
-
children
|
|
34
|
+
children: React.ReactNode;
|
|
29
35
|
}
|
|
30
|
-
declare const WalletProvider: ({ manager, children }:
|
|
36
|
+
declare const WalletProvider: ({ manager, children }: WalletProviderProps) => JSX.Element;
|
|
31
37
|
|
|
32
38
|
export { WalletProvider, useWallet };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,32 +1,38 @@
|
|
|
1
1
|
import * as _txnlab_use_wallet_js from '@txnlab/use-wallet-js';
|
|
2
|
-
import { WalletManager } from '@txnlab/use-wallet-js';
|
|
2
|
+
import { WalletAccount, WalletMetadata, WalletManager } from '@txnlab/use-wallet-js';
|
|
3
3
|
import algosdk from 'algosdk';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
|
|
6
|
+
interface Wallet {
|
|
7
|
+
id: string;
|
|
8
|
+
metadata: WalletMetadata;
|
|
9
|
+
accounts: WalletAccount[];
|
|
10
|
+
activeAccount: WalletAccount | null;
|
|
11
|
+
isConnected: boolean;
|
|
12
|
+
isActive: boolean;
|
|
13
|
+
connect: () => Promise<WalletAccount[]>;
|
|
14
|
+
disconnect: () => Promise<void>;
|
|
15
|
+
setActive: () => void;
|
|
16
|
+
setActiveAccount: (address: string) => void;
|
|
17
|
+
}
|
|
6
18
|
declare function useWallet(): {
|
|
7
|
-
wallets:
|
|
19
|
+
wallets: Wallet[];
|
|
8
20
|
algodClient: algosdk.Algodv2;
|
|
9
21
|
activeNetwork: _txnlab_use_wallet_js.NetworkId;
|
|
10
|
-
activeWallet: _txnlab_use_wallet_js.
|
|
11
|
-
activeWalletAccounts:
|
|
12
|
-
name: string;
|
|
13
|
-
address: string;
|
|
14
|
-
}[] | null;
|
|
22
|
+
activeWallet: _txnlab_use_wallet_js.BaseWallet | null;
|
|
23
|
+
activeWalletAccounts: WalletAccount[] | null;
|
|
15
24
|
activeWalletAddresses: string[] | null;
|
|
16
|
-
activeAccount:
|
|
17
|
-
name: string;
|
|
18
|
-
address: string;
|
|
19
|
-
} | null;
|
|
25
|
+
activeAccount: WalletAccount | null;
|
|
20
26
|
activeAddress: string | null;
|
|
21
27
|
setActiveNetwork: (networkId: _txnlab_use_wallet_js.NetworkId) => void;
|
|
22
28
|
signTransactions: (txnGroup: algosdk.Transaction[] | algosdk.Transaction[][] | Uint8Array[] | Uint8Array[][], indexesToSign?: number[], returnGroup?: boolean) => Promise<Uint8Array[]>;
|
|
23
29
|
transactionSigner: (txnGroup: algosdk.Transaction[], indexesToSign: number[]) => Promise<Uint8Array[]>;
|
|
24
30
|
};
|
|
25
31
|
|
|
26
|
-
interface
|
|
32
|
+
interface WalletProviderProps {
|
|
27
33
|
manager: WalletManager;
|
|
28
|
-
children
|
|
34
|
+
children: React.ReactNode;
|
|
29
35
|
}
|
|
30
|
-
declare const WalletProvider: ({ manager, children }:
|
|
36
|
+
declare const WalletProvider: ({ manager, children }: WalletProviderProps) => JSX.Element;
|
|
31
37
|
|
|
32
38
|
export { WalletProvider, useWallet };
|
package/dist/index.js
CHANGED
|
@@ -1,20 +1,19 @@
|
|
|
1
|
+
// src/useWallet.ts
|
|
2
|
+
import { useStore } from "@tanstack/react-store";
|
|
3
|
+
import * as React2 from "react";
|
|
4
|
+
|
|
1
5
|
// src/WalletProvider.tsx
|
|
2
6
|
import * as React from "react";
|
|
3
|
-
|
|
4
|
-
var WalletContext = React.createContext({});
|
|
7
|
+
var WalletContext = React.createContext(void 0);
|
|
5
8
|
var useWalletManager = () => {
|
|
6
|
-
const
|
|
7
|
-
if (!
|
|
9
|
+
const manager = React.useContext(WalletContext);
|
|
10
|
+
if (!manager) {
|
|
8
11
|
throw new Error("useWallet must be used within the WalletProvider");
|
|
9
12
|
}
|
|
10
|
-
return
|
|
13
|
+
return manager;
|
|
11
14
|
};
|
|
12
15
|
var WalletProvider = ({ manager, children }) => {
|
|
13
|
-
const [state, setState] = React.useState(defaultState);
|
|
14
16
|
React.useEffect(() => {
|
|
15
|
-
const unsubscribe = manager.subscribe((state2) => {
|
|
16
|
-
setState(state2);
|
|
17
|
-
});
|
|
18
17
|
const resumeSessions = async () => {
|
|
19
18
|
try {
|
|
20
19
|
await manager.resumeSessions();
|
|
@@ -23,33 +22,56 @@ var WalletProvider = ({ manager, children }) => {
|
|
|
23
22
|
}
|
|
24
23
|
};
|
|
25
24
|
resumeSessions();
|
|
26
|
-
return () => unsubscribe();
|
|
27
25
|
}, [manager]);
|
|
28
|
-
return /* @__PURE__ */ React.createElement(WalletContext.Provider, { value:
|
|
26
|
+
return /* @__PURE__ */ React.createElement(WalletContext.Provider, { value: manager }, children);
|
|
29
27
|
};
|
|
30
28
|
|
|
31
29
|
// src/useWallet.ts
|
|
32
30
|
function useWallet() {
|
|
33
|
-
const
|
|
34
|
-
const { activeNetwork, activeWallet } = state;
|
|
35
|
-
const wallets = manager.wallets;
|
|
31
|
+
const manager = useWalletManager();
|
|
36
32
|
const algodClient = manager.algodClient;
|
|
37
|
-
const
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
const
|
|
33
|
+
const walletStateMap = useStore(manager.store, (state) => state.wallets);
|
|
34
|
+
const activeWalletId = useStore(manager.store, (state) => state.activeWallet);
|
|
35
|
+
const walletsArray = React2.useMemo(() => [...manager.wallets.values()], [manager]);
|
|
36
|
+
const [wallets, setWallets] = React2.useState([]);
|
|
37
|
+
React2.useEffect(() => {
|
|
38
|
+
setWallets(
|
|
39
|
+
walletsArray.map((wallet) => {
|
|
40
|
+
const walletState = walletStateMap[wallet.id];
|
|
41
|
+
return {
|
|
42
|
+
id: wallet.id,
|
|
43
|
+
metadata: wallet.metadata,
|
|
44
|
+
accounts: walletState?.accounts ?? [],
|
|
45
|
+
activeAccount: walletState?.activeAccount ?? null,
|
|
46
|
+
isConnected: !!walletState,
|
|
47
|
+
isActive: wallet.id === activeWalletId,
|
|
48
|
+
connect: () => wallet.connect(),
|
|
49
|
+
disconnect: () => wallet.disconnect(),
|
|
50
|
+
setActive: () => wallet.setActive(),
|
|
51
|
+
setActiveAccount: (addr) => wallet.setActiveAccount(addr)
|
|
52
|
+
};
|
|
53
|
+
})
|
|
54
|
+
);
|
|
55
|
+
}, [walletsArray, walletStateMap, activeWalletId]);
|
|
56
|
+
const activeWallet = activeWalletId ? manager.getWallet(activeWalletId) || null : null;
|
|
57
|
+
const activeWalletState = activeWalletId ? walletStateMap[activeWalletId] || null : null;
|
|
58
|
+
const activeWalletAccounts = activeWalletState?.accounts ?? null;
|
|
59
|
+
const activeWalletAddresses = activeWalletAccounts?.map((account) => account.address) ?? null;
|
|
60
|
+
const activeAccount = activeWalletState?.activeAccount ?? null;
|
|
61
|
+
const activeAddress = activeAccount?.address ?? null;
|
|
62
|
+
const activeNetwork = useStore(manager.store, (state) => state.activeNetwork);
|
|
41
63
|
const setActiveNetwork = manager.setActiveNetwork;
|
|
42
64
|
const signTransactions = (txnGroup, indexesToSign, returnGroup) => {
|
|
43
65
|
if (!activeWallet) {
|
|
44
66
|
throw new Error("No active wallet");
|
|
45
67
|
}
|
|
46
|
-
return
|
|
68
|
+
return activeWallet.signTransactions(txnGroup, indexesToSign, returnGroup);
|
|
47
69
|
};
|
|
48
70
|
const transactionSigner = (txnGroup, indexesToSign) => {
|
|
49
71
|
if (!activeWallet) {
|
|
50
72
|
throw new Error("No active wallet");
|
|
51
73
|
}
|
|
52
|
-
return
|
|
74
|
+
return activeWallet.transactionSigner(txnGroup, indexesToSign);
|
|
53
75
|
};
|
|
54
76
|
return {
|
|
55
77
|
wallets,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/
|
|
1
|
+
{"version":3,"sources":["../src/useWallet.ts","../src/WalletProvider.tsx"],"sourcesContent":["'use client'\n\nimport { useStore } from '@tanstack/react-store'\nimport * as React from 'react'\nimport { useWalletManager } from './WalletProvider'\nimport type { WalletAccount, WalletMetadata } from '@txnlab/use-wallet-js'\nimport type algosdk from 'algosdk'\n\nexport interface Wallet {\n id: string\n metadata: WalletMetadata\n accounts: WalletAccount[]\n activeAccount: WalletAccount | null\n isConnected: boolean\n isActive: boolean\n connect: () => Promise<WalletAccount[]>\n disconnect: () => Promise<void>\n setActive: () => void\n setActiveAccount: (address: string) => void\n}\n\nexport function useWallet() {\n const manager = useWalletManager()\n\n const algodClient: algosdk.Algodv2 = manager.algodClient\n\n const walletStateMap = useStore(manager.store, (state) => state.wallets)\n const activeWalletId = useStore(manager.store, (state) => state.activeWallet)\n\n const walletsArray = React.useMemo(() => [...manager.wallets.values()], [manager])\n\n const [wallets, setWallets] = React.useState<Wallet[]>([])\n\n React.useEffect(() => {\n setWallets(\n walletsArray.map((wallet): Wallet => {\n const walletState = walletStateMap[wallet.id]\n\n return {\n id: wallet.id,\n metadata: wallet.metadata,\n accounts: walletState?.accounts ?? [],\n activeAccount: walletState?.activeAccount ?? null,\n isConnected: !!walletState,\n isActive: wallet.id === activeWalletId,\n connect: () => wallet.connect(),\n disconnect: () => wallet.disconnect(),\n setActive: () => wallet.setActive(),\n setActiveAccount: (addr) => wallet.setActiveAccount(addr)\n }\n })\n )\n }, [walletsArray, walletStateMap, activeWalletId])\n\n const activeWallet = activeWalletId ? manager.getWallet(activeWalletId) || null : null\n const activeWalletState = activeWalletId ? walletStateMap[activeWalletId] || null : null\n\n const activeWalletAccounts = activeWalletState?.accounts ?? null\n const activeWalletAddresses = activeWalletAccounts?.map((account) => account.address) ?? null\n const activeAccount = activeWalletState?.activeAccount ?? null\n const activeAddress = activeAccount?.address ?? null\n\n const activeNetwork = useStore(manager.store, (state) => state.activeNetwork)\n const setActiveNetwork = manager.setActiveNetwork\n\n const signTransactions = (\n txnGroup: algosdk.Transaction[] | algosdk.Transaction[][] | Uint8Array[] | Uint8Array[][],\n indexesToSign?: number[],\n returnGroup?: boolean\n ) => {\n if (!activeWallet) {\n throw new Error('No active wallet')\n }\n return activeWallet.signTransactions(txnGroup, indexesToSign, returnGroup)\n }\n\n const transactionSigner = (txnGroup: algosdk.Transaction[], indexesToSign: number[]) => {\n if (!activeWallet) {\n throw new Error('No active wallet')\n }\n return activeWallet.transactionSigner(txnGroup, indexesToSign)\n }\n\n return {\n wallets,\n algodClient,\n activeNetwork,\n activeWallet,\n activeWalletAccounts,\n activeWalletAddresses,\n activeAccount,\n activeAddress,\n setActiveNetwork,\n signTransactions,\n transactionSigner\n }\n}\n","'use client'\n\nimport { WalletManager } from '@txnlab/use-wallet-js'\nimport * as React from 'react'\n\nconst WalletContext = React.createContext<WalletManager | undefined>(undefined)\n\nexport const useWalletManager = () => {\n const manager = React.useContext(WalletContext)\n\n if (!manager) {\n throw new Error('useWallet must be used within the WalletProvider')\n }\n\n return manager\n}\n\ninterface WalletProviderProps {\n manager: WalletManager\n children: React.ReactNode\n}\n\nexport const WalletProvider = ({ manager, children }: WalletProviderProps): JSX.Element => {\n React.useEffect(() => {\n const resumeSessions = async () => {\n try {\n await manager.resumeSessions()\n } catch (error) {\n console.error('Error resuming sessions:', error)\n }\n }\n\n resumeSessions()\n }, [manager])\n\n return <WalletContext.Provider value={manager}>{children}</WalletContext.Provider>\n}\n"],"mappings":";AAEA,SAAS,gBAAgB;AACzB,YAAYA,YAAW;;;ACAvB,YAAY,WAAW;AAEvB,IAAM,gBAAsB,oBAAyC,MAAS;AAEvE,IAAM,mBAAmB,MAAM;AACpC,QAAM,UAAgB,iBAAW,aAAa;AAE9C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AAEA,SAAO;AACT;AAOO,IAAM,iBAAiB,CAAC,EAAE,SAAS,SAAS,MAAwC;AACzF,EAAM,gBAAU,MAAM;AACpB,UAAM,iBAAiB,YAAY;AACjC,UAAI;AACF,cAAM,QAAQ,eAAe;AAAA,MAC/B,SAAS,OAAO;AACd,gBAAQ,MAAM,4BAA4B,KAAK;AAAA,MACjD;AAAA,IACF;AAEA,mBAAe;AAAA,EACjB,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO,oCAAC,cAAc,UAAd,EAAuB,OAAO,WAAU,QAAS;AAC3D;;;ADfO,SAAS,YAAY;AAC1B,QAAM,UAAU,iBAAiB;AAEjC,QAAM,cAA+B,QAAQ;AAE7C,QAAM,iBAAiB,SAAS,QAAQ,OAAO,CAAC,UAAU,MAAM,OAAO;AACvE,QAAM,iBAAiB,SAAS,QAAQ,OAAO,CAAC,UAAU,MAAM,YAAY;AAE5E,QAAM,eAAqB,eAAQ,MAAM,CAAC,GAAG,QAAQ,QAAQ,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;AAEjF,QAAM,CAAC,SAAS,UAAU,IAAU,gBAAmB,CAAC,CAAC;AAEzD,EAAM,iBAAU,MAAM;AACpB;AAAA,MACE,aAAa,IAAI,CAAC,WAAmB;AACnC,cAAM,cAAc,eAAe,OAAO,EAAE;AAE5C,eAAO;AAAA,UACL,IAAI,OAAO;AAAA,UACX,UAAU,OAAO;AAAA,UACjB,UAAU,aAAa,YAAY,CAAC;AAAA,UACpC,eAAe,aAAa,iBAAiB;AAAA,UAC7C,aAAa,CAAC,CAAC;AAAA,UACf,UAAU,OAAO,OAAO;AAAA,UACxB,SAAS,MAAM,OAAO,QAAQ;AAAA,UAC9B,YAAY,MAAM,OAAO,WAAW;AAAA,UACpC,WAAW,MAAM,OAAO,UAAU;AAAA,UAClC,kBAAkB,CAAC,SAAS,OAAO,iBAAiB,IAAI;AAAA,QAC1D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,cAAc,gBAAgB,cAAc,CAAC;AAEjD,QAAM,eAAe,iBAAiB,QAAQ,UAAU,cAAc,KAAK,OAAO;AAClF,QAAM,oBAAoB,iBAAiB,eAAe,cAAc,KAAK,OAAO;AAEpF,QAAM,uBAAuB,mBAAmB,YAAY;AAC5D,QAAM,wBAAwB,sBAAsB,IAAI,CAAC,YAAY,QAAQ,OAAO,KAAK;AACzF,QAAM,gBAAgB,mBAAmB,iBAAiB;AAC1D,QAAM,gBAAgB,eAAe,WAAW;AAEhD,QAAM,gBAAgB,SAAS,QAAQ,OAAO,CAAC,UAAU,MAAM,aAAa;AAC5E,QAAM,mBAAmB,QAAQ;AAEjC,QAAM,mBAAmB,CACvB,UACA,eACA,gBACG;AACH,QAAI,CAAC,cAAc;AACjB,YAAM,IAAI,MAAM,kBAAkB;AAAA,IACpC;AACA,WAAO,aAAa,iBAAiB,UAAU,eAAe,WAAW;AAAA,EAC3E;AAEA,QAAM,oBAAoB,CAAC,UAAiC,kBAA4B;AACtF,QAAI,CAAC,cAAc;AACjB,YAAM,IAAI,MAAM,kBAAkB;AAAA,IACpC;AACA,WAAO,aAAa,kBAAkB,UAAU,aAAa;AAAA,EAC/D;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@txnlab/use-wallet-react",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.2",
|
|
4
4
|
"description": "React library for integrating Algorand wallets into decentralized applications",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -52,11 +52,13 @@
|
|
|
52
52
|
}
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"@
|
|
55
|
+
"@tanstack/react-store": "^0.2.1",
|
|
56
|
+
"@txnlab/use-wallet-js": "3.0.0-alpha.11"
|
|
56
57
|
},
|
|
57
58
|
"devDependencies": {
|
|
58
59
|
"@types/react": "^18.2.45",
|
|
59
60
|
"algosdk": "^2.6.0",
|
|
61
|
+
"jsdom": "^23.0.1",
|
|
60
62
|
"react": "^18.2.0",
|
|
61
63
|
"react-dom": "^18.2.0",
|
|
62
64
|
"tsup": "^8.0.0",
|
|
@@ -65,6 +67,8 @@
|
|
|
65
67
|
"scripts": {
|
|
66
68
|
"build": "tsup",
|
|
67
69
|
"start": "tsup src/index.ts --watch",
|
|
70
|
+
"test": "vitest",
|
|
71
|
+
"test:watch": "vitest --watch",
|
|
68
72
|
"lint": "eslint -c '../../.eslintrc.json' '**/*.{js,ts}'",
|
|
69
73
|
"prettier": "prettier --check '**/*.{js,ts}'",
|
|
70
74
|
"typecheck": "tsc --noEmit"
|