Skip to content

Commit 7da929e

Browse files
wraitiiwraitii
committed
Add prettier with custom conf
1 parent 45fc717 commit 7da929e

26 files changed

+1896
-2648
lines changed

‎hyli-wallet/.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"tabWidth": 4,
3+
"printWidth": 120
4+
}

‎hyli-wallet/README.md‎

Lines changed: 72 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ A reusable React wallet component for blockchain applications, designed to provi
44

55
## Features
66

7-
- 🔐 Multiple authentication providers (Password, Google, Github, etc.)
8-
- 🔑 Session key management
9-
- 💰 Transaction handling
10-
- 📡 WebSocket integration for real-time updates
11-
- 🎨 Customizable UI
12-
- 🔄 State management via React Context
7+
- 🔐 Multiple authentication providers (Password, Google, Github, etc.)
8+
- 🔑 Session key management
9+
- 💰 Transaction handling
10+
- 📡 WebSocket integration for real-time updates
11+
- 🎨 Customizable UI
12+
- 🔄 State management via React Context
1313

1414
## Installation
1515

@@ -20,12 +20,13 @@ yarn add hyli-wallet
2020
```
2121

2222
Required peer dependencies:
23+
2324
```json
2425
{
25-
"hyli-check-secret": "^0.3.2",
26-
"react": "^19.1.0",
27-
"react-dom": "^19.1.0",
28-
"react-router-dom": "^7.5.0"
26+
"hyli-check-secret": "^0.3.2",
27+
"react": "^19.1.0",
28+
"react-dom": "^19.1.0",
29+
"react-router-dom": "^7.5.0"
2930
}
3031
```
3132

@@ -34,32 +35,34 @@ Required peer dependencies:
3435
1. First, wrap your application with the `WalletProvider`:
3536

3637
```tsx
37-
import { WalletProvider } from 'hyli-wallet';
38+
import { WalletProvider } from "hyli-wallet";
3839

3940
function App() {
40-
return (
41-
<WalletProvider config={{
42-
nodeBaseUrl: 'NODE_BASE_URL',
43-
walletServerBaseUrl: 'WALLET_SERVER_URL',
44-
applicationWsUrl: 'WEBSOCKET_URL'
45-
}}>
46-
<YourApp />
47-
</WalletProvider>
48-
);
41+
return (
42+
<WalletProvider
43+
config={{
44+
nodeBaseUrl: "NODE_BASE_URL",
45+
walletServerBaseUrl: "WALLET_SERVER_URL",
46+
applicationWsUrl: "WEBSOCKET_URL",
47+
}}
48+
>
49+
<YourApp />
50+
</WalletProvider>
51+
);
4952
}
5053
```
5154

5255
2. Use the wallet component:
5356

5457
```tsx
55-
import { HyliWallet } from 'hyli-wallet';
58+
import { HyliWallet } from "hyli-wallet";
5659

5760
function YourComponent() {
58-
return (
59-
<HyliWallet
60-
providers={['password', 'google', 'github']} // Optional: specify auth providers
61-
/>
62-
);
61+
return (
62+
<HyliWallet
63+
providers={["password", "google", "github"]} // Optional: specify auth providers
64+
/>
65+
);
6366
}
6467
```
6568

@@ -68,39 +71,39 @@ function YourComponent() {
6871
The `useWallet` hook provides access to wallet functionality:
6972

7073
```tsx
71-
import { useWallet } from 'hyli-wallet';
74+
import { useWallet } from "hyli-wallet";
7275

7376
function WalletFeatures() {
74-
const {
75-
wallet, // Current wallet state
76-
isLoading,
77-
error,
78-
login, // Login function
79-
registerAccount, // Create new account
80-
logout, // Logout function
81-
registerSessionKey, // Create new session key
82-
removeSessionKey, // Remove existing session key
83-
} = useWallet();
84-
85-
return (
86-
<div>
87-
{wallet ? (
77+
const {
78+
wallet, // Current wallet state
79+
isLoading,
80+
error,
81+
login, // Login function
82+
registerAccount, // Create new account
83+
logout, // Logout function
84+
registerSessionKey, // Create new session key
85+
removeSessionKey, // Remove existing session key
86+
} = useWallet();
87+
88+
return (
8889
<div>
89-
<p>Welcome, {wallet.username}</p>
90-
<p>Balance: {balance} HYLLAR</p>
91-
<button onClick={logout}>Logout</button>
90+
{wallet ? (
91+
<div>
92+
<p>Welcome, {wallet.username}</p>
93+
<p>Balance: {balance} HYLLAR</p>
94+
<button onClick={logout}>Logout</button>
95+
</div>
96+
) : (
97+
<p>Please connect your wallet</p>
98+
)}
9299
</div>
93-
) : (
94-
<p>Please connect your wallet</p>
95-
)}
96-
</div>
97-
);
100+
);
98101
}
99102
```
100103

101104
## Session Key Management
102105

103-
> **Note:**
106+
> **Note:**
104107
> You can find a complete and exhaustive implementation in [`here`](../front/src/components/wallet/SessionKeys.tsx).
105108
106109
### Creating a Session Key
@@ -143,8 +146,8 @@ Session keys allow for automated transaction signing:
143146
Once you have a session key, you can use it to send transactions:
144147

145148
```typescript
146-
import { useWallet } from 'hyli-wallet';
147-
import { nodeService } from 'your-services';
149+
import { useWallet } from "hyli-wallet";
150+
import { nodeService } from "your-services";
148151

149152
const { wallet, createIdentityBlobs } = useWallet();
150153

@@ -153,30 +156,27 @@ const [blob0, blob1] = createIdentityBlobs();
153156

154157
// Create and send the transaction
155158
const blobTx = {
156-
identity: wallet.address,
157-
blobs: [blob0, blob1],
159+
identity: wallet.address,
160+
blobs: [blob0, blob1],
158161
};
159162
// blob0 is the secp256k1 blob containing the signature done with the wallet's session keu
160163
// blob1 is the hyli-wallet contract that verifies that the session key is valid
161164

162165
const txHash = await nodeService.client.sendBlobTx(blobTx);
163-
console.log('Transaction sent:', txHash);
166+
console.log("Transaction sent:", txHash);
164167
```
165168

166169
### Removing a Session Key
167170

168171
When a session key is no longer needed, you can remove it:
169172

170173
```typescript
171-
import { useWallet } from 'hyli-wallet';
174+
import { useWallet } from "hyli-wallet";
172175

173176
const { removeSessionKey } = useWallet();
174177

175178
// Remove the session key using the wallet password
176-
await removeSessionKey(
177-
'your_password',
178-
'session_key_public_key'
179-
);
179+
await removeSessionKey("your_password", "session_key_public_key");
180180
```
181181

182182
## WebSocket Integration
@@ -185,12 +185,12 @@ Real-time updates for transactions and wallet events:
185185

186186
```tsx
187187
function TransactionMonitor() {
188-
useWebSocketConnection(wallet?.address, event => {
189-
if (event.tx.status === 'Success') {
190-
// Handle successful transaction
191-
fetchBalance();
192-
}
193-
});
188+
useWebSocketConnection(wallet?.address, (event) => {
189+
if (event.tx.status === "Success") {
190+
// Handle successful transaction
191+
fetchBalance();
192+
}
193+
});
194194
}
195195
```
196196

@@ -199,15 +199,12 @@ function TransactionMonitor() {
199199
You can customize the connect button by providing a render prop:
200200

201201
```tsx
202-
<HyliWallet
203-
button={({ onClick }) => (
204-
<button
205-
className="custom-button"
206-
onClick={onClick}
207-
>
208-
Connect to Wallet
209-
</button>
210-
)}
202+
<HyliWallet
203+
button={({ onClick }) => (
204+
<button className="custom-button" onClick={onClick}>
205+
Connect to Wallet
206+
</button>
207+
)}
211208
/>
212209
```
213210

‎hyli-wallet/lib.ts‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1-
import React from 'react';
2-
import { createRoot } from 'react-dom/client';
3-
import { HyliWallet } from './src/components/HyliWallet';
4-
import type { ProviderOption } from './src/hooks/useWallet';
1+
import React from "react";
2+
import { createRoot } from "react-dom/client";
3+
import { HyliWallet } from "./src/components/HyliWallet";
4+
import type { ProviderOption } from "./src/hooks/useWallet";
55

66
class HyliWalletElement extends HTMLElement {
7-
connectedCallback() {
8-
const mountPoint = document.createElement('div');
9-
this.appendChild(mountPoint);
7+
connectedCallback() {
8+
const mountPoint = document.createElement("div");
9+
this.appendChild(mountPoint);
1010

11-
const providersAttr = this.getAttribute('providers');
12-
const providers = providersAttr ? providersAttr.split(',') as ProviderOption[] : ["password" as ProviderOption];
11+
const providersAttr = this.getAttribute("providers");
12+
const providers = providersAttr
13+
? (providersAttr.split(",") as ProviderOption[])
14+
: ["password" as ProviderOption];
1315

14-
createRoot(mountPoint).render(React.createElement(HyliWallet, { providers }));
15-
}
16+
createRoot(mountPoint).render(React.createElement(HyliWallet, { providers }));
17+
}
1618
}
1719

18-
customElements.define('hyli-wallet', HyliWalletElement);
20+
customElements.define("hyli-wallet", HyliWalletElement);

‎hyli-wallet/package.json‎

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,62 @@
11
{
2-
"name": "hyli-wallet",
3-
"version": "0.2.1",
4-
"type": "module",
5-
"license": "MIT",
6-
"repository": "hyli-org/wallet",
7-
"description": "A reusable wallet component",
8-
"main": "./dist/hyli-wallet.cjs.js",
9-
"types": "dist/hyli-wallet.d.ts",
10-
"module": "./dist/hyli-wallet.es.js",
11-
"files": [
12-
"dist"
13-
],
14-
"exports": {
15-
".": {
16-
"types": "./dist/hyli-wallet.d.ts",
17-
"import": "./dist/hyli-wallet.es.js",
18-
"require": "./dist/hyli-wallet.cjs.js"
2+
"name": "hyli-wallet",
3+
"version": "0.2.1",
4+
"type": "module",
5+
"license": "MIT",
6+
"repository": "hyli-org/wallet",
7+
"description": "A reusable wallet component",
8+
"main": "./dist/hyli-wallet.cjs.js",
9+
"types": "dist/hyli-wallet.d.ts",
10+
"module": "./dist/hyli-wallet.es.js",
11+
"files": [
12+
"dist"
13+
],
14+
"exports": {
15+
".": {
16+
"types": "./dist/hyli-wallet.d.ts",
17+
"import": "./dist/hyli-wallet.es.js",
18+
"require": "./dist/hyli-wallet.cjs.js"
19+
}
20+
},
21+
"peerDependencies": {
22+
"hyli-check-secret": "^0.3.2",
23+
"react": "^19.1.0",
24+
"react-dom": "^19.1.0",
25+
"react-router-dom": "^7.5.0"
26+
},
27+
"scripts": {
28+
"clean": "rm -rf dist",
29+
"dev": "vite",
30+
"build": "vite build",
31+
"build:lib": "tsc",
32+
"prepublishOnly": "bun run build",
33+
"pub": "npm publish"
34+
},
35+
"dependencies": {
36+
"@types/crypto-js": "^4.2.2",
37+
"@types/elliptic": "^6.4.18",
38+
"@types/react-router-dom": "^5.3.3",
39+
"crypto-js": "^4.2.0",
40+
"elliptic": "^6.6.1",
41+
"hyli": "^0.3.0"
42+
},
43+
"devDependencies": {
44+
"@eslint/js": "^9.24.0",
45+
"@types/react": "^19.1.3",
46+
"@types/react-dom": "^19.1.4",
47+
"@vitejs/plugin-react": "^4.4.0",
48+
"ajv": "^8.17.1",
49+
"autoprefixer": "^10.4.21",
50+
"eslint": "^9.24.0",
51+
"eslint-plugin-react-hooks": "^5.2.0",
52+
"eslint-plugin-react-refresh": "^0.4.19",
53+
"globals": "^15.15.0",
54+
"postcss": "^8.5.3",
55+
"tailwindcss": "^4.1.4",
56+
"typescript": "^5.8.3",
57+
"typescript-eslint": "^8.30.1",
58+
"vite": "^6.3.5",
59+
"vite-plugin-css-injected-by-js": "^3.5.2",
60+
"vite-plugin-dts": "^4.5.3"
1961
}
20-
},
21-
"peerDependencies": {
22-
"hyli-check-secret": "^0.3.2",
23-
"react": "^19.1.0",
24-
"react-dom": "^19.1.0",
25-
"react-router-dom": "^7.5.0"
26-
},
27-
"scripts": {
28-
"clean": "rm -rf dist",
29-
"dev": "vite",
30-
"build": "vite build",
31-
"build:lib": "tsc",
32-
"prepublishOnly": "bun run build",
33-
"pub": "npm publish"
34-
},
35-
"dependencies": {
36-
"@types/crypto-js": "^4.2.2",
37-
"@types/elliptic": "^6.4.18",
38-
"@types/react-router-dom": "^5.3.3",
39-
"crypto-js": "^4.2.0",
40-
"elliptic": "^6.6.1",
41-
"hyli": "^0.3.0"
42-
},
43-
"devDependencies": {
44-
"@eslint/js": "^9.24.0",
45-
"@types/react": "^19.1.3",
46-
"@types/react-dom": "^19.1.4",
47-
"@vitejs/plugin-react": "^4.4.0",
48-
"ajv": "^8.17.1",
49-
"autoprefixer": "^10.4.21",
50-
"eslint": "^9.24.0",
51-
"eslint-plugin-react-hooks": "^5.2.0",
52-
"eslint-plugin-react-refresh": "^0.4.19",
53-
"globals": "^15.15.0",
54-
"postcss": "^8.5.3",
55-
"tailwindcss": "^4.1.4",
56-
"typescript": "^5.8.3",
57-
"typescript-eslint": "^8.30.1",
58-
"vite": "^6.3.5",
59-
"vite-plugin-css-injected-by-js": "^3.5.2",
60-
"vite-plugin-dts": "^4.5.3"
61-
}
6262
}

0 commit comments

Comments
 (0)