Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lifinance/widget
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
https://github.com/lifinance/widget
bridge bridge-aggregation cross-chain cross-chain-applications cross-chain-bridge cross-chain-swap dapp defi ethereum integration lifi react solana ui viem wagmi web3 widget
Last synced: 1 day ago
JSON representation
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
- Host: GitHub
- URL: https://github.com/lifinance/widget
- Owner: lifinance
- License: apache-2.0
- Created: 2022-01-19T13:40:28.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-13T15:13:29.000Z (9 days ago)
- Last Synced: 2024-12-16T11:46:11.953Z (6 days ago)
- Topics: bridge, bridge-aggregation, cross-chain, cross-chain-applications, cross-chain-bridge, cross-chain-swap, dapp, defi, ethereum, integration, lifi, react, solana, ui, viem, wagmi, web3, widget
- Language: TypeScript
- Homepage: https://li.fi/widget
- Size: 35.8 MB
- Stars: 131
- Watchers: 7
- Forks: 85
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](/LICENSE.md)
[](https://www.npmjs.com/package/@lifi/widget)
[](https://www.npmjs.com/package/@lifi/widget)
[](https://crowdin.com/project/lifi-widget)
[](https://twitter.com/lifiprotocol)
LI.FI Widget
[**LI.FI Widget**](https://docs.li.fi/integrate-li.fi-widget/li.fi-widget-overview) is a set of prebuilt UI components that will help you integrate a secure cross-chain bridging and swapping experience that can be styled to match your web app design perfectly and helps drive your multi-chain strategy and attract new users from everywhere.
[**LI.FI Widget**](https://docs.li.fi/integrate-li.fi-widget/li.fi-widget-overview) features include:
- All ecosystems, chains, bridges, exchanges, and solvers that [LI.FI](https://docs.li.fi/list-chains-bridges-dexs-solvers) supports
- Embeddable variants - compact, wide, and drawer
- Options to allow or deny certain chains, tokens, bridges, and exchanges
- Pre-configured themes and lots of customization options with dark mode support so you can match the look and feel of your web app
- Wallet management UI with the option to opt-out and use your own ([Wagmi](https://wagmi.sh/) and [Solana Wallet Standard](https://github.com/anza-xyz/wallet-standard) support)
- View of transactions in progress and transaction history
- Curated wallet lists and wallet bookmarks
- Route settings for advanced users (stored locally)
- Complete UI translations to match your customer’s preferred language
- Compatibility tested with React, Next.js, Vue, Nuxt.js, Svelte, Remix, Gatsby, Vite, CRA, RainbowKit
## Installation
### LI.FI Widget
LI.FI Widget is available as an [npm package](https://www.npmjs.com/package/@lifi/widget).
**pnpm:**
```sh
pnpm add @lifi/widget
```
**npm:**
```sh
npm install @lifi/widget
```
**yarn:**
```sh
yarn add @lifi/widget
```
### LI.FI Wallet Management
LI.FI Wallet Management is available as an [npm package](https://www.npmjs.com/package/@lifi/wallet-management).
**pnpm:**
```sh
pnpm add @lifi/wallet-management
```
**npm:**
```sh
npm install @lifi/wallet-management
```
**yarn:**
```sh
yarn add @lifi/wallet-management
```
## Getting started with LI.FI Widget
Here is an example of a basic app using LI.FI Widget:
```tsx
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
const widgetConfig: WidgetConfig = {
theme: {
container: {
border: '1px solid rgb(234, 234, 234)',
borderRadius: '16px',
},
},
};
export const WidgetPage = () => {
return (
);
};
```
## Examples
Visit our [playground](https://playground.li.fi) to see how you can customize your [LI.FI Widget](https://www.npmjs.com/package/@lifi/widget) experience. Additionally, see [examples](/examples) folder in this repository.
## Documentation
Please visit [LI.FI Widget Documentation](https://docs.li.fi/integrate-li.fi-widget/li.fi-widget-overview).
## Contributing Translations
We appreciate your interest in helping translate our project!
If you'd like to contribute translations, please visit our Crowdin project page at [Crowdin LI.FI Widget](https://crowdin.com/project/lifi-widget). Register on Crowdin and you can start translating the project into your preferred language. Your contributions will help make our project accessible to a wider audience around the world.
Thank you for your support!
## Changelog
The [changelog](/CHANGELOG.md) is regularly updated to reflect what's changed in each new release.
## License
This project is licensed under the terms of the
[Apache-2.0](/LICENSE.md).