A plug-and-play React SDK for displaying Liqwid Finance yield earnings data. Easily embed yield tracking functionality into any website or React application.
Live demo available at: https://liqwid-sdk-demo.vercel.app/
- 🎨 Beautiful UI: Custom-designed SDK with Liqwid Finance branding
- 📱 Responsive: Works perfectly on desktop, tablet, and mobile
- 🔌 Easy Integration: Use as React component or vanilla JavaScript
- 💰 Multi-Currency: Support for GBP, USD, EUR
- ⚡ Real-time Data: Fetches live yield data from Liqwid Finance API
npm install liqwid-sdk<!-- React Dependencies -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- Liqwid SDK -->
<script src="https://unpkg.com/liqwid-sdk/dist/liqwid-sdk.umd.js"></script>import React from 'react';
import { LiqwidSDK } from 'liqwid-sdk';
function App() {
return (
<div>
<h1>My DeFi Dashboard</h1>
{/* Basic SDK - user enters their address */}
<LiqwidSDK currency="USD" />
{/* Pre-filled SDK */}
<LiqwidSDK
addresses={['address1','address2?']}
currency="GBP"
/>
</div>
);
}<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- SDK container -->
<div id="liqwid-sdk"></div>
<!-- Scripts -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/liqwid-sdk/dist/liqwid-sdk.umd.js"></script>
<script>
// Initialize the SDK
LiqwidSDK.create({
elementId: 'liqwid-sdk',
currency: 'USD'
});
</script>
</body>
</html>| 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 |
// components/LiqwidSDK.tsx
import dynamic from 'next/dynamic';
const LiqwidSDK = dynamic(() => import('liqwid-sdk'), {
ssr: false,
loading: () => <p>Loading Liqwid SDK...</p>
});
export default function DashboardPage() {
return (
<div>
<h1>Portfolio Dashboard</h1>
<LiqwidSDK currency="USD" />
</div>
);
}Add this to your theme or use a code injection plugin:
<!-- Add to your post/page -->
<div id="liqwid-sdk" style="margin: 20px 0;"></div>
<script>
// Load dependencies if not already loaded
if (!window.React) {
document.head.appendChild(Object.assign(document.createElement('script'), {
src: 'https://unpkg.com/react@18/umd/react.production.min.js',
crossOrigin: 'anonymous'
}));
}
if (!window.ReactDOM) {
document.head.appendChild(Object.assign(document.createElement('script'), {
src: 'https://unpkg.com/react-dom@18/umd/react-dom.production.min.js',
crossOrigin: 'anonymous'
}));
}
// Load SDK
document.head.appendChild(Object.assign(document.createElement('script'), {
src: 'https://unpkg.com/liqwid-sdk/dist/liqwid-sdk.umd.js',
onload: () => {
LiqwidSDK.create({
elementId: 'liqwid-sdk',
currency: 'USD'
});
}
}));
</script><template>
<div ref="sdkContainer" id="liqwid-sdk"></div>
</template>
<script>
export default {
name: 'LiqwidSDK',
async mounted() {
// Dynamically import the SDK
const { LiqwidSDK } = await import('liqwid-sdk/dist/liqwid-sdk.umd.js');
LiqwidSDK.create({
elementId: 'liqwid-sdk',
currency: 'EUR'
});
}
}
</script>The SDK uses CSS custom properties for easy theming:
.liqwid-sdk {
--sdk-max-width: 400px;
--sdk-border-radius: 12px;
--sdk-primary-color: #667eea;
--sdk-text-color: white;
}# 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 testThe SDK integrates with the Liqwid Finance GraphQL API:
Endpoint: https://v2.api.liqwid.finance/graphql
Query: GetYieldEarned
query GetYieldEarned($input: YieldEarnedInput!, $currencyInput: InCurrencyInput) {
historical {
yieldEarned(input: $input) {
totalYieldEarned(input: $currencyInput)
markets {
id
amount
amountInCurrency(input: $currencyInput)
}
}
}
}Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Initial release
- React component and vanilla JS support
- Multi-currency display
- Responsive design
- Real-time data fetching
Built with ❤️ by @itzdanny for the Cardano ecosystem