@miden-sdk/miden-wallet-adapter 0.13.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/README.md +242 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.js +20 -0
- package/dist/styles.css +359 -0
- package/package.json +47 -0
package/README.md
ADDED
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
# Miden Wallet Adapter
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/js/@demox-labs%2Fmiden-wallet-adapter)
|
|
4
|
+
|
|
5
|
+
The **Miden Wallet Adapter** package provides everything you need to integrate the Miden Wallet into your decentralized application (dApp) using React. This package bundles all the core functionality, React integration, UI components, and adapter implementation in a single convenient package.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
# npm
|
|
11
|
+
npm install @demox-labs/miden-wallet-adapter
|
|
12
|
+
|
|
13
|
+
# yarn
|
|
14
|
+
yarn add @demox-labs/miden-wallet-adapter
|
|
15
|
+
|
|
16
|
+
# pnpm
|
|
17
|
+
pnpm add @demox-labs/miden-wallet-adapter
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### Peer Dependencies
|
|
21
|
+
|
|
22
|
+
This package requires React as a peer dependency:
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install react react-dom
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Quick Start
|
|
29
|
+
|
|
30
|
+
### 1. Setup Wallet Provider
|
|
31
|
+
|
|
32
|
+
Wrap your app with the `WalletProvider` and `WalletModalProvider`:
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import React from 'react';
|
|
36
|
+
import {
|
|
37
|
+
WalletProvider,
|
|
38
|
+
WalletModalProvider,
|
|
39
|
+
MidenWalletAdapter,
|
|
40
|
+
} from '@demox-labs/miden-wallet-adapter';
|
|
41
|
+
|
|
42
|
+
import '@demox-labs/miden-wallet-adapter/styles.css';
|
|
43
|
+
|
|
44
|
+
const wallets = [
|
|
45
|
+
new MidenWalletAdapter({ appName: 'Your Miden App' }),
|
|
46
|
+
];
|
|
47
|
+
|
|
48
|
+
function App() {
|
|
49
|
+
return (
|
|
50
|
+
<WalletProvider wallets={wallets}>
|
|
51
|
+
<WalletModalProvider>
|
|
52
|
+
<YourAppComponents />
|
|
53
|
+
</WalletModalProvider>
|
|
54
|
+
</WalletProvider>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
**Note**: Either the stylesheet must be imported or custom styles must be defined
|
|
59
|
+
|
|
60
|
+
### 2. Add Wallet Connection UI
|
|
61
|
+
|
|
62
|
+
Use the `WalletMultiButton` for a complete wallet connection experience:
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { WalletMultiButton } from '@demox-labs/miden-wallet-adapter';
|
|
66
|
+
|
|
67
|
+
function Header() {
|
|
68
|
+
return (
|
|
69
|
+
<header>
|
|
70
|
+
<h1>My Miden dApp</h1>
|
|
71
|
+
<WalletMultiButton />
|
|
72
|
+
</header>
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### 3. Use Wallet in Components
|
|
78
|
+
|
|
79
|
+
Access wallet state and functionality with the `useWallet` hook:
|
|
80
|
+
|
|
81
|
+
#### Send Transaction
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
import { useWallet, SendTransaction } from '@demox-labs/miden-wallet-adapter';
|
|
85
|
+
|
|
86
|
+
function SendComponent() {
|
|
87
|
+
const { wallet, address, connected } = useWallet();
|
|
88
|
+
|
|
89
|
+
const handleSend = async () => {
|
|
90
|
+
if (!wallet || !address) return;
|
|
91
|
+
|
|
92
|
+
const transaction = new SendTransaction(
|
|
93
|
+
address,
|
|
94
|
+
'recipient_address_here',
|
|
95
|
+
'faucet_id_here',
|
|
96
|
+
'public', // or 'private'
|
|
97
|
+
BigInt(1000) // amount
|
|
98
|
+
);
|
|
99
|
+
|
|
100
|
+
try {
|
|
101
|
+
await wallet.adapter.requestSend(transaction);
|
|
102
|
+
console.log('Transaction sent successfully!');
|
|
103
|
+
} catch (error) {
|
|
104
|
+
console.error('Transaction failed:', error);
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
if (!connected) {
|
|
109
|
+
return <p>Please connect your wallet</p>;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
return (
|
|
113
|
+
<div>
|
|
114
|
+
<p>Connected: {address}</p>
|
|
115
|
+
<button onClick={handleSend}>Send Transaction</button>
|
|
116
|
+
</div>
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
#### Custom Transaction
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
import { useWallet, CustomTransaction } from '@demox-labs/miden-wallet-adapter';
|
|
125
|
+
|
|
126
|
+
function CustomTransactionComponent() {
|
|
127
|
+
const { wallet, address, requestTransaction } = useWallet();
|
|
128
|
+
|
|
129
|
+
const handleCustomTransaction = async () => {
|
|
130
|
+
if (!wallet || !address) return;
|
|
131
|
+
|
|
132
|
+
const customTransaction = new CustomTransaction(
|
|
133
|
+
address,
|
|
134
|
+
transactionRequest // TransactionRequest from Miden Web SDK
|
|
135
|
+
);
|
|
136
|
+
|
|
137
|
+
await requestTransaction(customTransaction);
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
return <button onClick={handleCustomTransaction}>Execute Custom Transaction</button>;
|
|
141
|
+
}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
#### Requesting assets and private notes
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
import { useWallet } from '@demox-labs/miden-wallet-adapter';
|
|
148
|
+
|
|
149
|
+
function AssetsAndNotesComponent() {
|
|
150
|
+
const { wallet, address, requestAssets, requestPrivateNotes } = useWallet();
|
|
151
|
+
|
|
152
|
+
const getAssetsAndNotes() = async () => {
|
|
153
|
+
if (!wallet || !address) return;
|
|
154
|
+
|
|
155
|
+
// { faucetId: string, amount: string }[]
|
|
156
|
+
const assets = await requestAssets();
|
|
157
|
+
|
|
158
|
+
// { noteId: string, noteType: NoteType, senderAccountId: string, assets: Asset[] }
|
|
159
|
+
const notes = await requestPrivateNotes();
|
|
160
|
+
|
|
161
|
+
return { assets, notes };
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
return <button onClick={getAssetsAndNotes}>Get Assets and Notes</button>
|
|
165
|
+
}
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
## UI Components
|
|
169
|
+
|
|
170
|
+
The package includes several pre-built React components:
|
|
171
|
+
|
|
172
|
+
- **`WalletMultiButton`** - All-in-one button for connect/disconnect/account display
|
|
173
|
+
- **`WalletConnectButton`** - Simple connect button
|
|
174
|
+
- **`WalletDisconnectButton`** - Simple disconnect button
|
|
175
|
+
- **`WalletModal`** - Modal for wallet selection
|
|
176
|
+
- **`WalletModalButton`** - Button that opens the wallet modal
|
|
177
|
+
|
|
178
|
+
## API Reference
|
|
179
|
+
|
|
180
|
+
### Core Types
|
|
181
|
+
|
|
182
|
+
- `WalletAdapter` - Base wallet adapter interface
|
|
183
|
+
- `WalletAdapterNetwork` - Network types (Testnet, Localnet)
|
|
184
|
+
- `WalletReadyState` - Wallet readiness states
|
|
185
|
+
- `TransactionType` - Transaction type enumeration
|
|
186
|
+
|
|
187
|
+
### Transaction Classes
|
|
188
|
+
|
|
189
|
+
- `SendTransaction` - For sending assets
|
|
190
|
+
- `ConsumeTransaction` - For consuming notes
|
|
191
|
+
- `CustomTransaction` - For custom transaction requests
|
|
192
|
+
|
|
193
|
+
### Error Classes
|
|
194
|
+
|
|
195
|
+
- `WalletError` - Base wallet error
|
|
196
|
+
- `WalletConnectionError` - Connection-related errors
|
|
197
|
+
- `WalletSignTransactionError` - Transaction signing errors
|
|
198
|
+
- And many more specific error types
|
|
199
|
+
|
|
200
|
+
## Modular Usage
|
|
201
|
+
|
|
202
|
+
If you prefer more granular control, you can install individual packages:
|
|
203
|
+
|
|
204
|
+
```bash
|
|
205
|
+
# Core infrastructure only
|
|
206
|
+
npm install @demox-labs/miden-wallet-adapter-base
|
|
207
|
+
|
|
208
|
+
# React integration
|
|
209
|
+
npm install @demox-labs/miden-wallet-adapter-react
|
|
210
|
+
|
|
211
|
+
# UI components
|
|
212
|
+
npm install @demox-labs/miden-wallet-adapter-reactui
|
|
213
|
+
|
|
214
|
+
# Miden wallet adapter
|
|
215
|
+
npm install @demox-labs/miden-wallet-adapter-miden
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
## Development
|
|
219
|
+
|
|
220
|
+
```bash
|
|
221
|
+
# Install dependencies
|
|
222
|
+
yarn install
|
|
223
|
+
|
|
224
|
+
# Build the package
|
|
225
|
+
yarn build
|
|
226
|
+
|
|
227
|
+
# Generate documentation
|
|
228
|
+
yarn doc
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
## Contributing
|
|
232
|
+
|
|
233
|
+
Contributions are welcome! Please read our contributing guidelines and submit pull requests to our GitHub repository.
|
|
234
|
+
|
|
235
|
+
## License
|
|
236
|
+
|
|
237
|
+
MIT
|
|
238
|
+
|
|
239
|
+
## Support
|
|
240
|
+
|
|
241
|
+
- [GitHub Issues](https://github.com/demox-labs/miden-wallet-adapter/issues)
|
|
242
|
+
- [Documentation](https://github.com/demox-labs/miden-wallet-adapter)
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Miden Wallet Adapter - All-in-One Package
|
|
3
|
+
*
|
|
4
|
+
* This package provides a complete solution for integrating Miden wallets into your dApp.
|
|
5
|
+
* It re-exports everything from the core packages for easy consumption.
|
|
6
|
+
*
|
|
7
|
+
* For more granular control, you can install individual packages:
|
|
8
|
+
* - @miden-sdk/miden-wallet-adapter-base: Core infrastructure
|
|
9
|
+
* - @miden-sdk/miden-wallet-adapter-react: React hooks and providers
|
|
10
|
+
* - @miden-sdk/miden-wallet-adapter-reactui: React UI components
|
|
11
|
+
* - @miden-sdk/miden-wallet-adapter-miden: Miden wallet implementation
|
|
12
|
+
*/
|
|
13
|
+
export * from '@miden-sdk/miden-wallet-adapter-base';
|
|
14
|
+
export * from '@miden-sdk/miden-wallet-adapter-react';
|
|
15
|
+
export * from '@miden-sdk/miden-wallet-adapter-reactui';
|
|
16
|
+
export * from '@miden-sdk/miden-wallet-adapter-miden';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Miden Wallet Adapter - All-in-One Package
|
|
3
|
+
*
|
|
4
|
+
* This package provides a complete solution for integrating Miden wallets into your dApp.
|
|
5
|
+
* It re-exports everything from the core packages for easy consumption.
|
|
6
|
+
*
|
|
7
|
+
* For more granular control, you can install individual packages:
|
|
8
|
+
* - @miden-sdk/miden-wallet-adapter-base: Core infrastructure
|
|
9
|
+
* - @miden-sdk/miden-wallet-adapter-react: React hooks and providers
|
|
10
|
+
* - @miden-sdk/miden-wallet-adapter-reactui: React UI components
|
|
11
|
+
* - @miden-sdk/miden-wallet-adapter-miden: Miden wallet implementation
|
|
12
|
+
*/
|
|
13
|
+
// Export everything from the base package (core infrastructure)
|
|
14
|
+
export * from '@miden-sdk/miden-wallet-adapter-base';
|
|
15
|
+
// Export everything from the React integration package
|
|
16
|
+
export * from '@miden-sdk/miden-wallet-adapter-react';
|
|
17
|
+
// Export everything from the React UI components package
|
|
18
|
+
export * from '@miden-sdk/miden-wallet-adapter-reactui';
|
|
19
|
+
// Export everything from the Miden wallet adapter
|
|
20
|
+
export * from '@miden-sdk/miden-wallet-adapter-miden';
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,359 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
|
2
|
+
|
|
3
|
+
.wallet-adapter-button {
|
|
4
|
+
background-color: transparent;
|
|
5
|
+
border: none;
|
|
6
|
+
color: white;
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
display: flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
font-family: 'Inter', 'Roboto', 'Helvetica Neue', Helvetica, Arial,
|
|
11
|
+
sans-serif;
|
|
12
|
+
font-size: 16px;
|
|
13
|
+
font-weight: 600;
|
|
14
|
+
height: 48px;
|
|
15
|
+
line-height: 48px;
|
|
16
|
+
padding: 0 24px;
|
|
17
|
+
border-radius: 32px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.wallet-adapter-button-trigger {
|
|
21
|
+
background-color: #FF5500;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.wallet-adapter-button:not([disabled]):focus-visible {
|
|
25
|
+
outline-color: white;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.wallet-adapter-button:not([disabled]):hover {
|
|
29
|
+
background-color: #FF5500;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.wallet-adapter-button[disabled] {
|
|
33
|
+
background: #F3F3F3;
|
|
34
|
+
color: black;
|
|
35
|
+
cursor: not-allowed;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.wallet-adapter-button-end-icon,
|
|
39
|
+
.wallet-adapter-button-start-icon {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
background-color: white;
|
|
44
|
+
border-radius: 4px;
|
|
45
|
+
width: 24px;
|
|
46
|
+
height: 24px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.wallet-adapter-button-start-icon img {
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
width: 16px;
|
|
54
|
+
height: 16px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.wallet-adapter-button-end-icon {
|
|
58
|
+
margin-left: 12px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.wallet-adapter-button-start-icon {
|
|
62
|
+
margin-right: 8px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.wallet-adapter-collapse {
|
|
66
|
+
width: 100%;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.wallet-adapter-dropdown {
|
|
70
|
+
position: relative;
|
|
71
|
+
display: inline-block;
|
|
72
|
+
width: 185px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.wallet-adapter-dropdown-list {
|
|
76
|
+
position: absolute;
|
|
77
|
+
z-index: 99;
|
|
78
|
+
display: grid;
|
|
79
|
+
padding: 4px;
|
|
80
|
+
top: 100%;
|
|
81
|
+
right: 0;
|
|
82
|
+
margin: 0;
|
|
83
|
+
list-style: none;
|
|
84
|
+
background: white;
|
|
85
|
+
border-radius: 8px;
|
|
86
|
+
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.10);
|
|
87
|
+
opacity: 0;
|
|
88
|
+
visibility: hidden;
|
|
89
|
+
transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
|
|
90
|
+
font-family: 'Inter', 'Roboto', 'Helvetica Neue', Helvetica, Arial,
|
|
91
|
+
sans-serif;
|
|
92
|
+
width: 100%;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.wallet-adapter-dropdown-list-active {
|
|
96
|
+
opacity: 1;
|
|
97
|
+
visibility: visible;
|
|
98
|
+
transform: translateY(10px);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.wallet-adapter-dropdown-list-item {
|
|
102
|
+
display: flex;
|
|
103
|
+
flex-direction: row;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
align-items: center;
|
|
106
|
+
border: none;
|
|
107
|
+
outline: none;
|
|
108
|
+
cursor: pointer;
|
|
109
|
+
white-space: nowrap;
|
|
110
|
+
box-sizing: border-box;
|
|
111
|
+
padding: 12px 15px;
|
|
112
|
+
width: 100%;
|
|
113
|
+
border-radius: 8px;
|
|
114
|
+
font-size: 14px;
|
|
115
|
+
font-weight: 600;
|
|
116
|
+
color: #656565;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.wallet-adapter-dropdown-list-item:not([disabled]):hover {
|
|
120
|
+
background-color: #F9F9F9;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.wallet-adapter-modal-collapse-button svg {
|
|
124
|
+
align-self: center;
|
|
125
|
+
fill: #999;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.wallet-adapter-modal-collapse-button.wallet-adapter-modal-collapse-button-active
|
|
129
|
+
svg {
|
|
130
|
+
transform: rotate(180deg);
|
|
131
|
+
transition: transform ease-in 150ms;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.wallet-adapter-modal {
|
|
135
|
+
position: fixed;
|
|
136
|
+
top: 0;
|
|
137
|
+
left: 0;
|
|
138
|
+
right: 0;
|
|
139
|
+
bottom: 0;
|
|
140
|
+
opacity: 0;
|
|
141
|
+
transition: opacity linear 150ms;
|
|
142
|
+
background: rgba(0, 0, 0, 0.5);
|
|
143
|
+
z-index: 1040;
|
|
144
|
+
overflow-y: auto;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.wallet-adapter-modal.wallet-adapter-modal-fade-in {
|
|
148
|
+
opacity: 1;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.wallet-adapter-modal-button-close {
|
|
152
|
+
display: flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
justify-content: center;
|
|
155
|
+
cursor: pointer;
|
|
156
|
+
padding: 13px;
|
|
157
|
+
border-radius: 8px;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.wallet-adapter-modal-button-close:focus-visible {
|
|
161
|
+
outline-color: black;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.wallet-adapter-modal-button-close:hover {
|
|
165
|
+
background-color: #F3F3F3;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.wallet-adapter-modal-overlay {
|
|
169
|
+
background: rgba(0, 0, 0, 0.5);
|
|
170
|
+
position: fixed;
|
|
171
|
+
top: 0;
|
|
172
|
+
left: 0;
|
|
173
|
+
bottom: 0;
|
|
174
|
+
right: 0;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.wallet-adapter-modal-container {
|
|
178
|
+
display: flex;
|
|
179
|
+
margin: 3rem;
|
|
180
|
+
min-height: calc(100vh - 6rem); /* 100vh - 2 * margin */
|
|
181
|
+
align-items: center;
|
|
182
|
+
justify-content: center;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
@media (max-width: 480px) {
|
|
186
|
+
.wallet-adapter-modal-container {
|
|
187
|
+
margin: 1rem;
|
|
188
|
+
min-height: calc(100vh - 2rem); /* 100vh - 2 * margin */
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.wallet-adapter-modal-wrapper {
|
|
193
|
+
box-sizing: border-box;
|
|
194
|
+
position: relative;
|
|
195
|
+
display: flex;
|
|
196
|
+
align-items: center;
|
|
197
|
+
flex-direction: column;
|
|
198
|
+
z-index: 1050;
|
|
199
|
+
max-width: 360px;
|
|
200
|
+
border-radius: 16px;
|
|
201
|
+
background: white;
|
|
202
|
+
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
|
|
203
|
+
font-family: 'Inter', 'Roboto', 'Helvetica Neue', Helvetica, Arial,
|
|
204
|
+
sans-serif;
|
|
205
|
+
flex: 1;
|
|
206
|
+
color: black;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.wallet-adapter-modal-wrapper .wallet-adapter-button {
|
|
210
|
+
color: black;
|
|
211
|
+
font-size: 14px;
|
|
212
|
+
font-weight: 500;
|
|
213
|
+
height: 46px;
|
|
214
|
+
line-height: 20px;
|
|
215
|
+
padding: 10px 8px;
|
|
216
|
+
border-radius: 8px;
|
|
217
|
+
width: 100%;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.wallet-adapter-modal-wrapper .wallet-adapter-button:not([disabled]):hover {
|
|
221
|
+
background-color: #F3F3F3;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.wallet-adapter-modal-wrapper hr {
|
|
225
|
+
background: #EBEBEB;
|
|
226
|
+
margin-top: 16px;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.wallet-adapter-modal-title {
|
|
230
|
+
font-weight: 600;
|
|
231
|
+
font-size: 18px;
|
|
232
|
+
line-height: 24px;
|
|
233
|
+
margin: 0;
|
|
234
|
+
padding: 16px;
|
|
235
|
+
width: 100%;
|
|
236
|
+
display: flex;
|
|
237
|
+
justify-content: space-between;
|
|
238
|
+
align-items: center;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
@media (max-width: 374px) {
|
|
242
|
+
.wallet-adapter-modal-title {
|
|
243
|
+
font-size: 18px;
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.wallet-adapter-modal-content {
|
|
248
|
+
padding: 8px 16px 16px;
|
|
249
|
+
font-size: 14px;
|
|
250
|
+
text-align: center;
|
|
251
|
+
font-weight: 400;
|
|
252
|
+
line-height: 20px;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.wallet-adapter-modal-list {
|
|
256
|
+
margin: 0 0 16px 0;
|
|
257
|
+
padding: 0 16px;
|
|
258
|
+
width: 100%;
|
|
259
|
+
list-style: none;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.wallet-adapter-modal-list-section-title {
|
|
263
|
+
display: block;
|
|
264
|
+
font-size: 14px;
|
|
265
|
+
font-weight: 400;
|
|
266
|
+
line-height: 20px;
|
|
267
|
+
margin-bottom: 8px;
|
|
268
|
+
color: #656565;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.wallet-adapter-modal-list hr {
|
|
272
|
+
margin-bottom: 16px;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.wallet-adapter-modal-list .wallet-adapter-button {
|
|
276
|
+
font-weight: 500;
|
|
277
|
+
font-size: 14px;
|
|
278
|
+
line-height: 20px;
|
|
279
|
+
padding: 12px 8px;
|
|
280
|
+
height: fit-content;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.wallet-adapter-modal-list .wallet-adapter-button-end-icon,
|
|
284
|
+
.wallet-adapter-modal-list .wallet-adapter-button-start-icon {
|
|
285
|
+
width: 32px;
|
|
286
|
+
height: 32px;
|
|
287
|
+
border-radius: 6px;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.wallet-adapter-modal-list .wallet-adapter-button-start-icon {
|
|
291
|
+
border: 1px solid #E5E5E5;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.wallet-adapter-modal-list .wallet-adapter-button-start-icon img {
|
|
295
|
+
width: 20px;
|
|
296
|
+
height: 20px;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.wallet-adapter-modal-list .wallet-adapter-button span {
|
|
300
|
+
margin-left: auto;
|
|
301
|
+
margin-right: 8px;
|
|
302
|
+
font-size: 12px;
|
|
303
|
+
font-weight: 400;
|
|
304
|
+
opacity: 0.6;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.wallet-adapter-modal-discover-miden-message {
|
|
308
|
+
display: flex;
|
|
309
|
+
flex-direction: column;
|
|
310
|
+
align-items: center;
|
|
311
|
+
text-align: center;
|
|
312
|
+
padding: 40px 0 40px;
|
|
313
|
+
margin-bottom: 8px;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.wallet-adapter-modal-discover-miden-message h1 {
|
|
317
|
+
margin-top: 32px;
|
|
318
|
+
margin-bottom: 8px;
|
|
319
|
+
font-size: 24px;
|
|
320
|
+
line-height: 28px;
|
|
321
|
+
font-weight: 600;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.wallet-adapter-modal-discover-miden-message p {
|
|
325
|
+
font-size: 14px;
|
|
326
|
+
line-height: 20px;
|
|
327
|
+
font-weight: 400;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.wallet-adapter-modal-middle {
|
|
331
|
+
width: 100%;
|
|
332
|
+
display: flex;
|
|
333
|
+
flex-direction: column;
|
|
334
|
+
align-items: center;
|
|
335
|
+
padding: 8px 16px 16px 16px;
|
|
336
|
+
box-sizing: border-box;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.wallet-adapter-modal-middle-button {
|
|
340
|
+
display: flex;
|
|
341
|
+
justify-content: center;
|
|
342
|
+
cursor: pointer;
|
|
343
|
+
width: 100%;
|
|
344
|
+
background-color: #FF5500;
|
|
345
|
+
padding: 12px 16px;
|
|
346
|
+
font-size: 16px;
|
|
347
|
+
font-weight: 500;
|
|
348
|
+
border: none;
|
|
349
|
+
border-radius: 8px;
|
|
350
|
+
color: #fff;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.wallet-adapter-modal-middle-button:not([disabled]):hover {
|
|
354
|
+
background-color: #FF5500;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.wallet-adapter-modal-middle-button svg {
|
|
358
|
+
margin-left: 8px;
|
|
359
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@miden-sdk/miden-wallet-adapter",
|
|
3
|
+
"version": "0.13.0",
|
|
4
|
+
"description": "Modular TypeScript wallet adapters and React components for Miden applications.",
|
|
5
|
+
"module": "dist/index.js",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
7
|
+
"author": "Demox Labs",
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"scripts": {
|
|
10
|
+
"build": "tsc && yarn copy-styles",
|
|
11
|
+
"clean": "rimraf dist/ node_modules/",
|
|
12
|
+
"copy-styles": "copyfiles -u 6 ../../node_modules/@miden-sdk/miden-wallet-adapter-reactui/dist/styles.css dist/",
|
|
13
|
+
"doc": "echo \"(no docs)\""
|
|
14
|
+
},
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"@miden-sdk/miden-wallet-adapter-base": "workspace:^",
|
|
17
|
+
"@miden-sdk/miden-wallet-adapter-miden": "workspace:^",
|
|
18
|
+
"@miden-sdk/miden-wallet-adapter-react": "workspace:^",
|
|
19
|
+
"@miden-sdk/miden-wallet-adapter-reactui": "workspace:^"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@types/react-dom": "^19.0.4",
|
|
23
|
+
"copyfiles": "^2.4.1",
|
|
24
|
+
"react": "^19.1.1",
|
|
25
|
+
"react-dom": "^19.1.1"
|
|
26
|
+
},
|
|
27
|
+
"peerDependencies": {
|
|
28
|
+
"@types/react": "^19.0.0",
|
|
29
|
+
"@types/react-dom": "^19.0.0",
|
|
30
|
+
"react": "^19.1.1",
|
|
31
|
+
"react-dom": "^19.1.1"
|
|
32
|
+
},
|
|
33
|
+
"files": [
|
|
34
|
+
"dist"
|
|
35
|
+
],
|
|
36
|
+
"exports": {
|
|
37
|
+
".": {
|
|
38
|
+
"import": "./dist/index.js",
|
|
39
|
+
"types": "./dist/index.d.ts"
|
|
40
|
+
},
|
|
41
|
+
"./styles.css": "./dist/styles.css"
|
|
42
|
+
},
|
|
43
|
+
"repository": {
|
|
44
|
+
"type": "git",
|
|
45
|
+
"url": "https://github.com/demox-labs/miden-wallet-adapter.git"
|
|
46
|
+
}
|
|
47
|
+
}
|