A React widget for displaying Liqwid Finance yield earnings data
npm install liqwid-sdkbash
npm install liqwid-sdk
`
$3
`html
`
🚀 Quick Start
$3
`tsx
import React from 'react';
import { LiqwidSDK } from 'liqwid-sdk';
function App() {
return (
My DeFi Dashboard
{/ Basic SDK - user enters their address /}
{/ Pre-filled SDK /}
currency="GBP"
/>
);
}
`
$3
`html
My Website
`
⚙️ Configuration
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| addresses | string[] | [] | Array of Cardano addresses to fetch yield data for |
| currency | 'GBP' \| 'USD' \| 'EUR' | 'GBP' | Display currency for yield amounts |
📖 Examples
$3
`tsx
// components/LiqwidSDK.tsx
import dynamic from 'next/dynamic';
const LiqwidSDK = dynamic(() => import('liqwid-sdk'), {
ssr: false,
loading: () => Loading Liqwid SDK...
});
export default function DashboardPage() {
return (
Portfolio Dashboard
);
}
`
$3
Add this to your theme or use a code injection plugin:
`html
`
$3
`vue
`
🎨 Customization
The SDK uses CSS custom properties for easy theming:
`css
.liqwid-sdk {
--sdk-max-width: 400px;
--sdk-border-radius: 12px;
--sdk-primary-color: #667eea;
--sdk-text-color: white;
}
`
🔧 Development
`bash
Clone the repository
git clone https://github.com/yourusername/liqwid-sdk.git
cd liqwid-sdk
Install dependencies
npm install
Start development server
npm run dev
Build for production
npm run build
Run tests
npm test
`
📊 API Reference
The SDK integrates with the Liqwid Finance GraphQL API:
Endpoint: https://v2.api.liqwid.finance/graphql
Query: GetYieldEarned
`graphql
query GetYieldEarned($input: YieldEarnedInput!, $currencyInput: InCurrencyInput) {
historical {
yieldEarned(input: $input) {
totalYieldEarned(input: $currencyInput)
markets {
id
amount
amountInCurrency(input: $currencyInput)
}
}
}
}
`
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)