fix: update nimiq-utils installation docs

onmax · onmax · commit f811def3cafc · 2025-09-19T10:25:12.000+02:00
- Add descriptive subline after H1
- Convert framework integration to code-group tabs
- Fix TypeScript interface names (CalculateStakingRewardsParams/Result)
- Add rewards-calculator to basic usage example
- Include CDN usage in framework integration tabs
- Remove outdated troubleshooting and environment sections
- Clarify bundle optimization with import patterns
diff --git a/nimiq-utils/installation.md b/nimiq-utils/installation.md
@@ -1,35 +1,35 @@
-# Installation
+# Install Nimiq Utils
 
-Learn how to install and set up Nimiq Utils in your project with different package managers and bundlers.
+A comprehensive JavaScript/TypeScript utility library for the Nimiq blockchain ecosystem.
 
-## Package Manager Installation
+::: code-group
 
-### pnpm (Recommended)
-
-```bash
+```bash [pnpm]
 pnpm add @nimiq/utils
 ```
 
-### npm
-
-```bash
+```bash [npm]
 npm install @nimiq/utils
 ```
 
-### yarn
-
-```bash
+```bash [yarn]
 yarn add @nimiq/utils
 ```
 
+```bash [bun]
+bun add @nimiq/utils
+```
+
+:::
+
 ## Basic Usage
 
 Nimiq Utils is designed with tree-shaking in mind. Import only the modules you need to keep your bundle size optimized.
 
 ```typescript
 import { AddressBook } from '@nimiq/utils/address-book'
 import { FormattableNumber } from '@nimiq/utils/formattable-number'
-// Import specific modules
+import { calculateStakingRewards } from '@nimiq/utils/rewards-calculator'
 import { ValidationUtils } from '@nimiq/utils/validation-utils'
 
 // Use the utilities
@@ -38,18 +38,25 @@ const isValid = ValidationUtils.isValidAddress(address)
 const label = AddressBook.getLabel(address)
 const amount = new FormattableNumber('1234.56').toString({ maxDecimals: 2 })
 
-console.log({ isValid, label, amount })
+// Calculate staking rewards
+const rewards = calculateStakingRewards({
+  stakedSupplyRatio: 0.5,
+  amount: 100000,
+  days: 365
+})
+
+console.log({ isValid, label, amount, rewards })
 ```
 
 ## TypeScript Support
 
 Nimiq Utils is written in TypeScript and includes full type definitions out of the box. No additional `@types` packages needed.
 
 ```typescript
-import type { StakingParams, StakingResult } from '@nimiq/utils/rewards-calculator'
+import type { CalculateStakingRewardsParams, CalculateStakingRewardsResult } from '@nimiq/utils/rewards-calculator'
 import { calculateStakingRewards } from '@nimiq/utils/rewards-calculator'
 
-const params: StakingParams = {
+const params: CalculateStakingRewardsParams = {
   stakedSupplyRatio: 0.5,
   amount: 100000,
   days: 365,
@@ -58,16 +65,16 @@ const params: StakingParams = {
   fee: 0.02
 }
 
-const result: StakingResult = calculateStakingRewards(params)
+const result: CalculateStakingRewardsResult = calculateStakingRewards(params)
 ```
 
 ## Framework Integration
 
-### Vue.js / Nuxt
+::: code-group
 
-```typescript
-import { FormattableNumber } from '@nimiq/utils/formattable-number'
+```typescript [Vue.js / Nuxt]
 // composables/useNimiqUtils.ts
+import { FormattableNumber } from '@nimiq/utils/formattable-number'
 import { ValidationUtils } from '@nimiq/utils/validation-utils'
 
 export function useNimiqUtils() {
@@ -89,12 +96,10 @@ export function useNimiqUtils() {
 }
 ```
 
-### React / Next.js
-
-```typescript
+```typescript [React / Next.js]
+// hooks/useNimiqUtils.ts
 import { FormattableNumber } from '@nimiq/utils/formattable-number'
 import { ValidationUtils } from '@nimiq/utils/validation-utils'
-// hooks/useNimiqUtils.ts
 import { useCallback } from 'react'
 
 export function useNimiqUtils() {
@@ -116,9 +121,7 @@ export function useNimiqUtils() {
 }
 ```
 
-### Vanilla JavaScript
-
-```html
+```html [Vanilla JavaScript]
 <!DOCTYPE html>
 <html>
 <head>
@@ -141,74 +144,25 @@ export function useNimiqUtils() {
 </html>
 ```
 
-## Bundle Size Optimization
-
-Nimiq Utils is designed for optimal tree-shaking. Only import what you use:
-
-```typescript
-// ❌ Avoid - Imports entire library
-import * as NimiqUtils from '@nimiq/utils'
-import { FormattableNumber } from '@nimiq/utils/formattable-number'
-
-// ✅ Good - Only imports specific modules
-import { ValidationUtils } from '@nimiq/utils/validation-utils'
-```
-
-## Environment Requirements
-
-- **Node.js**: 16.0 or higher
-- **Browser**: Modern browsers with ES2020 support
-- **TypeScript**: 4.5 or higher (optional)
-
-## CDN Usage
-
-For quick prototyping or legacy environments:
-
-```html
+```html [CDN Usage]
 <script type="module">
   import { ValidationUtils } from 'https://cdn.skypack.dev/@nimiq/utils/validation-utils'
   // Use ValidationUtils...
 </script>
 ```
 
-## Troubleshooting
-
-### Module Resolution Issues
-
-If you encounter module resolution issues, ensure your bundler supports ES modules:
-
-```json
-// tsconfig.json
-{
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
-  }
-}
-```
+:::
 
-### Vite Configuration
-
-For Vite projects, no additional configuration is needed. Nimiq Utils works out of the box.
+## Bundle Size Optimization
 
-### Webpack Configuration
+Nimiq Utils is designed for optimal tree-shaking. Only import what you need:
 
-For older Webpack versions, you might need to ensure ES module support:
+```typescript
+// ❌ Avoid - Imports entire library
+import * as NimiqUtils from '@nimiq/utils'
 
-```javascript
-// webpack.config.js
-module.exports = {
-  resolve: {
-    extensionAlias: {
-      '.js': ['.ts', '.js']
-    }
-  }
-}
+// ✅ Good - Import from specific modules for best tree-shaking
+import { FormattableNumber } from '@nimiq/utils/formattable-number'
+import { calculateStakingRewards } from '@nimiq/utils/rewards-calculator'
+import { ValidationUtils } from '@nimiq/utils/validation-utils'
 ```
-
-## Next Steps
-
-- **[📖 Why Nimiq Utils?](./why)** - Learn about the benefits
-- **[🚀 Browse Modules](./index#available-modules)** - Explore all available utilities
-- **[💡 Examples](https://github.com/nimiq/nimiq-utils/tree/master/examples)** - See real-world usage examples
