@lifi/widget 4.0.0-beta.9 → 4.1.0

package/README.md

@@ -10,57 +10,160 @@
 
 <h1 align="center">LI.FI Widget</h1>
 
-![GitHub_Repo_Card](https://github.com/user-attachments/assets/fc08ab8c-d7fb-41de-b478-c1e69c631a23)
+![GitHub_Repo_Card](https://github.com/user-attachments/assets/fd38be94-ba15-4d19-bfd7-13bcab4fa336)
 
 [**LI.FI Widget**](https://docs.li.fi/widget/overview) is a set of prebuilt UI components for secure cross-chain bridging and swapping. The widget can be customized to match your web app's design and helps drive your multi-chain strategy by attracting users from all ecosystems.
 
 [**LI.FI Widget**](https://docs.li.fi/widget/overview) features include:
 
+- **Provider-based architecture** - Modular blockchain support with separate packages for Ethereum, Bitcoin, Solana, Sui, and Tron
 - All ecosystems, chains, bridges, exchanges, and solvers that [LI.FI](https://docs.li.fi/introduction/chains) 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/), [Bigmi](https://github.com/lifinance/bigmi) and [Wallet Standard](https://github.com/wallet-standard/wallet-standard) support)
+- Pre-configured themes and lots of customization options with dark mode support so you can match the look and feel of your web app
+- Built-in wallet management UI with support for external wallet providers ([Wagmi](https://wagmi.sh/), [Bigmi](https://github.com/lifinance/bigmi), [Wallet Standard](https://github.com/wallet-standard/wallet-standard), [@mysten/dapp-kit-react](https://sdk.mystenlabs.com/dapp-kit), and [TronWallet Adapters](https://github.com/tronweb3/tronwallet-adapter))
 - Supports widely adopted industry standards, including [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792), [ERC-2612](https://eips.ethereum.org/EIPS/eip-2612), [EIP-712](https://eips.ethereum.org/EIPS/eip-712), [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963), and [Permit2](https://github.com/Uniswap/permit2)
 - 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, RainbowKit, Reown AppKit, Privy, Dynamic
+- Complete UI translations to match your customer's preferred language
+- Compatibility tested with React, Next.js, Vue, Nuxt.js, Svelte, Remix, Vite, RainbowKit, Reown AppKit, Privy, Dynamic
 
 ## Installation
 
 ### LI.FI Widget
 
-LI.FI Widget is available as an [npm package](https://www.npmjs.com/package/@lifi/widget).
+LI.FI Widget is available as an [npm package](https://www.npmjs.com/package/@lifi/widget). The widget uses a provider-based architecture, allowing you to choose which blockchains to support.
+
+**Core package:**
+
+**pnpm:**
+
+```sh
+pnpm add @lifi/widget @tanstack/react-query
+```
+
+**npm:**
+
+```sh
+npm install @lifi/widget @tanstack/react-query
+```
+
+**yarn:**
+
+```sh
+yarn add @lifi/widget @tanstack/react-query
+```
+
+### Blockchain Providers
+
+Install the provider packages for the blockchains you want to support:
+
+**Ethereum/EVM chains:**
 
 **pnpm:**
 
 ```sh
-pnpm add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query @mysten/dapp-kit
+pnpm add @lifi/widget-provider-ethereum wagmi @wagmi/core
 ```
 
 **npm:**
 
 ```sh
-npm install @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query @mysten/dapp-kit
+npm install @lifi/widget-provider-ethereum wagmi @wagmi/core
 ```
 
 **yarn:**
 
 ```sh
-yarn add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query @mysten/dapp-kit
+yarn add @lifi/widget-provider-ethereum wagmi @wagmi/core
+```
+
+**Bitcoin:**
+
+**pnpm:**
+
+```sh
+pnpm add @lifi/widget-provider-bitcoin @bigmi/react
+```
+
+**npm:**
+
+```sh
+npm install @lifi/widget-provider-bitcoin @bigmi/react
 ```
 
-- [Wagmi](https://wagmi.sh/) is type safe, extensible, and modular library for building Ethereum apps.
-- [Bigmi](https://github.com/lifinance/bigmi) is modular TypeScript library that provides reactive primitives for building Bitcoin applications.
-- [@solana/wallet-adapter-react](https://github.com/anza-xyz/wallet-adapter) is modular TypeScript wallet adapters and components for Solana applications.
-- [TanStack Query](https://tanstack.com/query/v5) is an async state manager that handles requests, caching, and more.
-- [@mysten/dapp-kit](https://sdk.mystenlabs.com/dapp-kit) provides React tools for wallet integration and data access in Sui blockchain dApps.
+**yarn:**
+
+```sh
+yarn add @lifi/widget-provider-bitcoin @bigmi/react
+```
+
+**Solana:**
+
+**pnpm:**
+
+```sh
+pnpm add @lifi/widget-provider-solana bs58
+```
+
+**npm:**
+
+```sh
+npm install @lifi/widget-provider-solana bs58
+```
+
+**yarn:**
+
+```sh
+yarn add @lifi/widget-provider-solana bs58
+```
+
+**Sui:**
+
+**pnpm:**
+
+```sh
+pnpm add @lifi/widget-provider-sui @mysten/dapp-kit-react
+```
+
+**npm:**
+
+```sh
+npm install @lifi/widget-provider-sui @mysten/dapp-kit-react
+```
+
+**yarn:**
+
+```sh
+yarn add @lifi/widget-provider-sui @mysten/dapp-kit-react
+```
+
+**Tron:**
+
+**pnpm:**
+
+```sh
+pnpm add @lifi/widget-provider-tron @tronweb3/tronwallet-adapter-react-hooks
+```
+
+**npm:**
+
+```sh
+npm install @lifi/widget-provider-tron @tronweb3/tronwallet-adapter-react-hooks
+```
+
+**yarn:**
+
+```sh
+yarn add @lifi/widget-provider-tron @tronweb3/tronwallet-adapter-react-hooks
+```
+
+**Note:** You only need to install the provider packages for the blockchains you want to support. Each provider package includes its required peer dependencies.
 
 ### LI.FI Wallet Management
 
-LI.FI Wallet Management is available as an [npm package](https://www.npmjs.com/package/@lifi/wallet-management).
+LI.FI Wallet Management is available as an [npm package](https://www.npmjs.com/package/@lifi/wallet-management) and provides wallet management UI components.
 
 **pnpm:**
 
@@ -80,14 +183,95 @@ npm install @lifi/wallet-management
 yarn add @lifi/wallet-management
 ```
 
+### LI.FI Widget Light
+
+LI.FI Widget Light is available as an [npm package](https://www.npmjs.com/package/@lifi/widget-light) and provides a lightweight, iframe-based integration. Your app manages wallets while the widget runs in a sandboxed iframe.
+
+**pnpm:**
+
+```sh
+pnpm add @lifi/widget-light
+```
+
+**npm:**
+
+```sh
+npm install @lifi/widget-light
+```
+
+**yarn:**
+
+```sh
+yarn add @lifi/widget-light
+```
+
+Ecosystem handlers are available as subpath imports (`@lifi/widget-light/ethereum`, `@lifi/widget-light/solana`, `@lifi/widget-light/bitcoin`, `@lifi/widget-light/sui`, `@lifi/widget-light/tron`) — install the corresponding peer dependencies only for the chains you need. See the [widget-light integration guide](/packages/widget-embedded/README.md) for full setup instructions.
+
+## Architecture
+
+The LI.FI Widget uses a **provider-based architecture** that allows you to selectively enable support for different blockchains:
+
+- **`@lifi/widget`** - Core widget package with UI components and functionality
+- **`@lifi/widget-provider`** - Base provider package with shared types and utilities
+- **`@lifi/widget-provider-ethereum`** - Ethereum/EVM chains support (requires [Wagmi](https://wagmi.sh/))
+- **`@lifi/widget-provider-bitcoin`** - Bitcoin support (requires [Bigmi](https://github.com/lifinance/bigmi))
+- **`@lifi/widget-provider-solana`** - Solana support (requires [bs58](https://www.npmjs.com/package/bs58))
+- **`@lifi/widget-provider-sui`** - Sui support (requires [@mysten/dapp-kit-react](https://sdk.mystenlabs.com/dapp-kit))
+- **`@lifi/widget-provider-tron`** - Tron support (requires [@tronweb3/tronwallet-adapter-react-hooks](https://github.com/tronweb3/tronwallet-adapter))
+- **`@lifi/wallet-management`** - Wallet management UI components
+- **`@lifi/widget-light`** - Lightweight iframe-based integration ([docs](https://docs.li.fi/widget/widget-light-overview))
+
+This architecture provides:
+- **Modularity**: Only install and bundle what you need
+- **Flexibility**: Mix and match blockchain support
+- **Extensibility**: Easy to add support for new blockchains
+- **Tree-shaking**: Unused providers are automatically excluded from your bundle
+
 ## Getting started with LI.FI Widget
 
-Here is an example of a basic app using LI.FI Widget:
+Here is an example of a basic app using LI.FI Widget with Ethereum support:
+
+```tsx
+import { LiFiWidget, WidgetConfig } from '@lifi/widget';
+import { EthereumProvider } from '@lifi/widget-provider-ethereum';
+
+const widgetConfig: WidgetConfig = {
+  providers: [
+    EthereumProvider(),
+  ],
+  theme: {
+    container: {
+      border: '1px solid rgb(234, 234, 234)',
+      borderRadius: '16px',
+    },
+  },
+};
+
+export const WidgetPage = () => {
+  return (
+    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
+  );
+};
+```
+
+**Multi-chain example** (Ethereum, Solana, Bitcoin, Sui, and Tron):
 
 ```tsx
 import { LiFiWidget, WidgetConfig } from '@lifi/widget';
+import { BitcoinProvider } from '@lifi/widget-provider-bitcoin';
+import { EthereumProvider } from '@lifi/widget-provider-ethereum';
+import { SolanaProvider } from '@lifi/widget-provider-solana';
+import { SuiProvider } from '@lifi/widget-provider-sui';
+import { TronProvider } from '@lifi/widget-provider-tron';
 
 const widgetConfig: WidgetConfig = {
+  providers: [
+    EthereumProvider(),
+    SolanaProvider(),
+    BitcoinProvider(),
+    SuiProvider(),
+    TronProvider(),
+  ],
   theme: {
     container: {
       border: '1px solid rgb(234, 234, 234)',

package/dist/esm/App.d.ts

@@ -1,3 +1,11 @@
-import type { WidgetDrawer } from './AppDrawer.js';
-import type { WidgetConfig } from './types/widget.js';
-export declare const App: import("react").ForwardRefExoticComponent<import("./index.js").WidgetDrawerProps & WidgetConfig & import("./index.js").WidgetConfigPartialProps & import("./index.js").FormRefProps & import("react").RefAttributes<WidgetDrawer>>;
+import { WidgetProps } from "./types/widget.js";
+import { WidgetDrawer } from "./AppDrawer.js";
+import { JSX, Ref } from "react";
+
+//#region src/App.d.ts
+declare const App: (props: WidgetProps & {
+  ref?: Ref<WidgetDrawer>;
+}) => JSX.Element;
+//#endregion
+export { App };
+//# sourceMappingURL=App.d.ts.map

package/dist/esm/App.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","names":[],"sources":["../../src/App.tsx"],"mappings":";;;;;cASa,GAAA,GACX,KAAA,EAAO,WAAA;EAAgB,GAAA,GAAM,GAAA,CAAI,YAAA;AAAA,MAChC,GAAA,CAAI,OAAA"}

package/dist/esm/App.js

@@ -1,26 +1,44 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from 'react';
-import { AppDefault } from './AppDefault.js';
-import { AppDrawer } from './AppDrawer.js';
-import { AppProvider } from './AppProvider.js';
-export const App = forwardRef((props, ref) => {
-    const config = useMemo(() => {
-        const config = { ...props, ...props.config };
-        if (config.variant === 'drawer') {
-            config.theme = {
-                ...config.theme,
-                container: {
-                    height: '100%',
-                    ...config.theme?.container,
-                },
-            };
-        }
-        return config;
-    }, [props]);
-    if (config.variant === 'drawer') {
-        return (_jsx(AppProvider, { config: config, formRef: props.formRef, children: _jsx(AppDrawer, { ref: ref, elementRef: props.elementRef, config: config, open: props.open, onClose: props.onClose, children: _jsx(AppDefault, {}) }) }));
-    }
-    return (_jsx(AppProvider, { config: config, formRef: props.formRef, children: _jsx(AppDefault, {}) }));
-});
+"use client";
+import { AppDefault } from "./AppDefault.js";
+import { AppDrawer } from "./AppDrawer.js";
+import { AppProvider } from "./AppProvider.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/App.tsx
+const App = (props) => {
+	const config = useMemo(() => {
+		const config = {
+			...props,
+			...props.config
+		};
+		if (config.variant === "drawer") config.theme = {
+			...config.theme,
+			container: {
+				height: "100%",
+				...config.theme?.container
+			}
+		};
+		return config;
+	}, [props]);
+	if (config.variant === "drawer") return /* @__PURE__ */ jsx(AppProvider, {
+		config,
+		formRef: props.formRef,
+		children: /* @__PURE__ */ jsx(AppDrawer, {
+			ref: props.ref,
+			elementRef: props.elementRef,
+			config,
+			open: props.open,
+			onClose: props.onClose,
+			children: /* @__PURE__ */ jsx(AppDefault, {})
+		})
+	});
+	return /* @__PURE__ */ jsx(AppProvider, {
+		config,
+		formRef: props.formRef,
+		children: /* @__PURE__ */ jsx(AppDefault, {})
+	});
+};
+//#endregion
+export { App };
+
 //# sourceMappingURL=App.js.map

package/dist/esm/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../../src/App.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAA4B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,MAAM,GAAiB,OAAO,CAAC,GAAG,EAAE;QACxC,MAAM,MAAM,GAAG,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,CAAA;QAC5C,IAAI,MAAM,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAChC,MAAM,CAAC,KAAK,GAAG;gBACb,GAAG,MAAM,CAAC,KAAK;gBACf,SAAS,EAAE;oBACT,MAAM,EAAE,MAAM;oBACd,GAAG,MAAM,CAAC,KAAK,EAAE,SAAS;iBAC3B;aACF,CAAA;QACH,CAAC;QACD,OAAO,MAAM,CAAA;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,IAAI,MAAM,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;QAChC,OAAO,CACL,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,YACjD,KAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,OAAO,YAEtB,KAAC,UAAU,KAAG,GACJ,GACA,CACf,CAAA;IACH,CAAC;IAED,OAAO,CACL,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,YACjD,KAAC,UAAU,KAAG,GACF,CACf,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"App.js","names":[],"sources":["../../src/App.tsx"],"sourcesContent":["'use client'\nimport type { JSX, Ref } from 'react'\nimport { useMemo } from 'react'\nimport { AppDefault } from './AppDefault.js'\nimport type { WidgetDrawer } from './AppDrawer.js'\nimport { AppDrawer } from './AppDrawer.js'\nimport { AppProvider } from './AppProvider.js'\nimport type { WidgetConfig, WidgetProps } from './types/widget.js'\n\nexport const App = (\n  props: WidgetProps & { ref?: Ref<WidgetDrawer> }\n): JSX.Element => {\n  const config: WidgetConfig = useMemo(() => {\n    const config = { ...props, ...props.config }\n    if (config.variant === 'drawer') {\n      config.theme = {\n        ...config.theme,\n        container: {\n          height: '100%',\n          ...config.theme?.container,\n        },\n      }\n    }\n    return config\n  }, [props])\n\n  if (config.variant === 'drawer') {\n    return (\n      <AppProvider config={config} formRef={props.formRef}>\n        <AppDrawer\n          ref={props.ref}\n          elementRef={props.elementRef}\n          config={config}\n          open={props.open}\n          onClose={props.onClose}\n        >\n          <AppDefault />\n        </AppDrawer>\n      </AppProvider>\n    )\n  }\n\n  return (\n    <AppProvider config={config} formRef={props.formRef}>\n      <AppDefault />\n    </AppProvider>\n  )\n}\n"],"mappings":";;;;;;;AASA,MAAa,OACX,UACgB;CAChB,MAAM,SAAuB,cAAc;EACzC,MAAM,SAAS;GAAE,GAAG;GAAO,GAAG,MAAM;EAAO;EAC3C,IAAI,OAAO,YAAY,UACrB,OAAO,QAAQ;GACb,GAAG,OAAO;GACV,WAAW;IACT,QAAQ;IACR,GAAG,OAAO,OAAO;GACnB;EACF;EAEF,OAAO;CACT,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,OAAO,YAAY,UACrB,OACE,oBAAC,aAAD;EAAqB;EAAQ,SAAS,MAAM;YAC1C,oBAAC,WAAD;GACE,KAAK,MAAM;GACX,YAAY,MAAM;GACV;GACR,MAAM,MAAM;GACZ,SAAS,MAAM;aAEf,oBAAC,YAAD,CAAa,CAAA;EACJ,CAAA;CACA,CAAA;CAIjB,OACE,oBAAC,aAAD;EAAqB;EAAQ,SAAS,MAAM;YAC1C,oBAAC,YAAD,CAAa,CAAA;CACF,CAAA;AAEjB"}