@monygroupcorp/micro-web3 0.1.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 +87 -0
- package/dist/micro-web3.cjs.js +10 -0
- package/dist/micro-web3.cjs.js.map +1 -0
- package/dist/micro-web3.esm.js +10 -0
- package/dist/micro-web3.esm.js.map +1 -0
- package/dist/micro-web3.umd.js +10 -0
- package/dist/micro-web3.umd.js.map +1 -0
- package/package.json +34 -0
- package/rollup.config.cjs +36 -0
- package/src/components/BondingCurve/BondingCurve.js +296 -0
- package/src/components/Display/BalanceDisplay.js +81 -0
- package/src/components/Display/PriceDisplay.js +214 -0
- package/src/components/Ipfs/IpfsImage.js +265 -0
- package/src/components/Modal/ApprovalModal.js +398 -0
- package/src/components/Swap/SwapButton.js +81 -0
- package/src/components/Swap/SwapInputs.js +137 -0
- package/src/components/Swap/SwapInterface.js +972 -0
- package/src/components/Swap/TransactionOptions.js +238 -0
- package/src/components/Util/MessagePopup.js +159 -0
- package/src/components/Wallet/WalletModal.js +69 -0
- package/src/components/Wallet/WalletSplash.js +567 -0
- package/src/index.js +43 -0
- package/src/services/BlockchainService.js +1576 -0
- package/src/services/ContractCache.js +348 -0
- package/src/services/IpfsService.js +249 -0
- package/src/services/PriceService.js +191 -0
- package/src/services/WalletService.js +541 -0
package/README.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# micro-web3
|
|
2
|
+
|
|
3
|
+
A lean, reusable Web3 toolkit with components for wallet connection, IPFS, and common Web3 UI patterns.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install micro-web3
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
This package provides a set of services and UI components to accelerate Web3 development.
|
|
14
|
+
|
|
15
|
+
### Services
|
|
16
|
+
|
|
17
|
+
- `BlockchainService`: A service for interacting with smart contracts.
|
|
18
|
+
- `WalletService`: Handles wallet connection, detection, and interactions.
|
|
19
|
+
- `ContractCache`: Provides TTL-based caching for blockchain contract reads.
|
|
20
|
+
- `PriceService`: A service for polling for price and other contract data.
|
|
21
|
+
- `IpfsService`: A light client for IPFS resolution with gateway rotation and fallback.
|
|
22
|
+
|
|
23
|
+
### UI Components
|
|
24
|
+
|
|
25
|
+
- `WalletSplash`: Blocks access to content until a wallet is connected.
|
|
26
|
+
- `WalletModal`: A modal for selecting a wallet.
|
|
27
|
+
- `IpfsImage`: Renders images with IPFS support.
|
|
28
|
+
- `SwapInterface`: A full-featured swap interface for buying and selling tokens.
|
|
29
|
+
- `BondingCurve`: A component for rendering a bonding curve chart.
|
|
30
|
+
- `PriceDisplay`: Displays the price of a token.
|
|
31
|
+
- `BalanceDisplay`: Displays the user's token balances.
|
|
32
|
+
- `MessagePopup`: A component for showing toast-like notifications.
|
|
33
|
+
- `ApprovalModal`: A modal for approving token spending.
|
|
34
|
+
- `TransactionOptions`: A component for setting transaction options like a message.
|
|
35
|
+
- `SwapInputs`: The input fields for a swap interface.
|
|
36
|
+
- `SwapButton`: The main button for a swap interface.
|
|
37
|
+
|
|
38
|
+
## Example
|
|
39
|
+
|
|
40
|
+
```javascript
|
|
41
|
+
import { Component, EventBus } from 'microact';
|
|
42
|
+
import {
|
|
43
|
+
BlockchainService,
|
|
44
|
+
WalletService,
|
|
45
|
+
ContractCache,
|
|
46
|
+
PriceService,
|
|
47
|
+
SwapInterface
|
|
48
|
+
} from 'micro-web3';
|
|
49
|
+
|
|
50
|
+
// 1. Set up services
|
|
51
|
+
const eventBus = new EventBus();
|
|
52
|
+
const contractCache = new ContractCache(eventBus);
|
|
53
|
+
const blockchainService = new BlockchainService(eventBus, contractCache);
|
|
54
|
+
const walletService = new WalletService(eventBus);
|
|
55
|
+
const priceService = new PriceService(blockchainService, eventBus);
|
|
56
|
+
|
|
57
|
+
// 2. Initialize services
|
|
58
|
+
await blockchainService.initialize(networkConfig);
|
|
59
|
+
await blockchainService.initializeContract(contractAddress, contractAbi, mirrorAbi, routerAbi);
|
|
60
|
+
await walletService.initialize();
|
|
61
|
+
priceService.initialize(walletService.getAddress());
|
|
62
|
+
|
|
63
|
+
// 3. Create a component
|
|
64
|
+
class MyApp extends Component {
|
|
65
|
+
constructor() {
|
|
66
|
+
super();
|
|
67
|
+
this.swapInterface = new SwapInterface({
|
|
68
|
+
blockchainService,
|
|
69
|
+
eventBus,
|
|
70
|
+
// ... other props
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
render() {
|
|
75
|
+
return `
|
|
76
|
+
<div>
|
|
77
|
+
<h1>My dApp</h1>
|
|
78
|
+
<div data-ref="swap-interface-container"></div>
|
|
79
|
+
</div>
|
|
80
|
+
`;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
onMount() {
|
|
84
|
+
this.swapInterface.mount(this.refs['swap-interface-container']);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
```
|