feat: modular widget

examples/connectkit/package.json

@@ -10,13 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lifi/wallet-management": "^3.17.3",
-    "@lifi/widget": "^3.32.2",
-    "@mui/icons-material": "7.3.2",
+    "@lifi/widget-provider-ethereum": "workspace:^",
+    "@lifi/widget": "workspace:^",
     "@mui/material": "7.3.2",
-    "@solana/wallet-adapter-base": "^0.9.27",
-    "@solana/wallet-adapter-react": "^0.15.39",
-    "@solana/web3.js": "^1.98.4",
     "@tanstack/react-query": "^5.90.1",
     "connectkit": "^1.9.1",
     "mitt": "^3.0.1",

examples/connectkit/src/App.tsx

@@ -1,4 +1,5 @@
 import { LiFiWidget } from '@lifi/widget'
+import { EthereumProvider } from '@lifi/widget-provider-ethereum'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { WalletHeader } from './components/WalletHeader'
 import { queryClient } from './config/queryClient'
@@ -20,6 +21,7 @@ function App() {
                 },
               },
             }}
+            providers={[EthereumProvider()]}
           />
         </WalletProvider>
       </QueryClientProvider>

examples/connectkit/src/providers/WalletProvider.tsx

@@ -1,5 +1,5 @@
-import { useSyncWagmiConfig } from '@lifi/wallet-management'
 import { ChainType, useAvailableChains } from '@lifi/widget'
+import { useSyncWagmiConfig } from '@lifi/widget-provider-ethereum'
 import { ConnectKitProvider, getDefaultConfig } from 'connectkit'
 import type { FC, PropsWithChildren } from 'react'
 import { createConfig, WagmiProvider } from 'wagmi'

examples/deposit-flow/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@lifi/sdk": "^3.12.14",
     "@lifi/widget": "workspace:^",
+    "@lifi/widget-provider-ethereum": "workspace:^",
     "@mui/material": "7.3.2",
     "@tanstack/react-query": "^5.90.1",
     "events": "^3.3.0",

examples/deposit-flow/src/App.tsx

@@ -6,6 +6,7 @@ import {
   HiddenUI,
   LiFiWidget,
 } from '@lifi/widget'
+import { EthereumProvider } from '@lifi/widget-provider-ethereum'
 import { useMemo } from 'react'
 import { DepositCard } from './components/DepositCard'
 import { contractTool } from './config'
@@ -60,6 +61,7 @@ export function App() {
       contractTool={contractTool}
       config={widgetConfig}
       integrator={widgetConfig.integrator}
+      providers={[EthereumProvider()]}
     />
   )
 }

examples/dynamic/package.json

@@ -21,6 +21,9 @@
     "@dynamic-labs/wagmi-connector": "^4.37.0",
     "@lifi/sdk": "^3.12.14",
     "@lifi/wallet-management": "workspace:^",
+    "@lifi/widget-provider-ethereum": "workspace:^",
+    "@lifi/widget-provider-solana": "workspace:^",
+    "@lifi/widget-provider-bitcoin": "workspace:^",
     "@lifi/widget": "workspace:^",
     "@mui/material": "7.3.2",
     "@solana/wallet-adapter-base": "^0.9.27",

examples/dynamic/src/App.tsx

@@ -4,6 +4,9 @@ import {
   useReinitialize,
 } from '@dynamic-labs/sdk-react-core'
 import { ChainId, LiFiWidget } 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 { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WalletHeader } from './components/WalletHeader'
 import { WalletProvider } from './providers/WalletProvider'
@@ -53,6 +56,7 @@ export function Main() {
             },
           },
         }}
+        providers={[EthereumProvider(), SolanaProvider(), BitcoinProvider()]}
       />
     </>
   )

examples/dynamic/src/providers/WalletProvider.tsx

@@ -4,12 +4,12 @@ import { ZeroDevSmartWalletConnectors } from '@dynamic-labs/ethereum-aa'
 import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core'
 import { SolanaWalletConnectors } from '@dynamic-labs/solana'
 import { DynamicWagmiConnector } from '@dynamic-labs/wagmi-connector'
+import { ChainType, type ExtendedChain, useAvailableChains } from '@lifi/widget'
 import {
   convertExtendedChain,
   isExtendedChain,
   useSyncWagmiConfig,
-} from '@lifi/wallet-management'
-import { ChainType, type ExtendedChain, useAvailableChains } from '@lifi/widget'
+} from '@lifi/widget-provider-ethereum'
 import { type FC, type PropsWithChildren, useRef } from 'react'
 import { type Chain, mainnet } from 'viem/chains'
 import type { Config, CreateConnectorFn } from 'wagmi'

examples/nextjs-page-router/components/DynamicWidget.tsx

@@ -1,5 +1,6 @@
 import type { WidgetConfig } from '@lifi/widget'
 import { LiFiWidget } from '@lifi/widget'
+import { EthereumProvider } from '@lifi/widget-provider-ethereum'
 
 export default function DynamicWidget() {
   const config = {
@@ -12,5 +13,11 @@ export default function DynamicWidget() {
     },
   } as Partial<WidgetConfig>
 
-  return <LiFiWidget config={config} integrator="nextjs-example" />
+  return (
+    <LiFiWidget
+      config={config}
+      integrator="nextjs-example"
+      providers={[EthereumProvider()]}
+    />
+  )
 }

examples/nextjs-page-router/components/Widget.tsx

@@ -2,6 +2,7 @@
 
 import type { WidgetConfig } from '@lifi/widget'
 import { LiFiWidget } from '@lifi/widget'
+import { EthereumProvider } from '@lifi/widget-provider-ethereum'
 import type { ReactNode } from 'react'
 import { ClientOnly } from './ClientOnly'
 
@@ -13,7 +14,11 @@ interface WidgetProps {
 export function Widget({ config, fallback }: WidgetProps) {
   return (
     <ClientOnly fallback={fallback}>
-      <LiFiWidget config={config} integrator="nextjs-example" />
+      <LiFiWidget
+        config={config}
+        integrator="nextjs-example"
+        providers={[EthereumProvider()]}
+      />
     </ClientOnly>
   )
 }

examples/nextjs-page-router/package.json

@@ -8,7 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@lifi/widget": "^3.32.2",
+    "@lifi/widget": "workspace:^",
+    "@lifi/widget-provider-ethereum": "workspace:^",
     "next": "^15.5.4",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"

examples/nextjs/components/DynamicWidget.tsx

@@ -1,5 +1,6 @@
 import type { WidgetConfig } from '@lifi/widget'
 import { LiFiWidget } from '@lifi/widget'
+import { EthereumProvider } from '@lifi/widget-provider-ethereum'
 
 export default function DynamicWidget() {
   const config = {
@@ -12,5 +13,11 @@ export default function DynamicWidget() {
     },
   } as Partial<WidgetConfig>
 
-  return <LiFiWidget config={config} integrator="nextjs-example" />
+  return (
+    <LiFiWidget
+      config={config}
+      integrator="nextjs-example"
+      providers={[EthereumProvider()]}
+    />
+  )
 }

examples/nextjs/components/Widget.tsx

@@ -2,6 +2,7 @@
 
 import type { WidgetConfig } from '@lifi/widget'
 import { LiFiWidget, WidgetSkeleton } from '@lifi/widget'
+import { EthereumProvider } from '@lifi/widget-provider-ethereum'
 import { ClientOnly } from './ClientOnly'
 
 export function Widget() {
@@ -17,7 +18,11 @@ export function Widget() {
 
   return (
     <ClientOnly fallback={<WidgetSkeleton config={config} />}>
-      <LiFiWidget config={config} integrator="nextjs-example" />
+      <LiFiWidget
+        config={config}
+        integrator="nextjs-example"
+        providers={[EthereumProvider()]}
+      />
     </ClientOnly>
   )
 }

examples/nextjs/package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "@lifi/sdk": "^3.12.14",
-    "@lifi/widget": "^3.32.2",
+    "@lifi/widget": "workspace:^",
+    "@lifi/widget-provider-ethereum": "workspace:^",
     "@mui/material-nextjs": "7.3.2",
     "next": "^15.5.4",
     "react": "^19.2.0",

examples/nextjs14-page-router/components/DynamicWidget.tsx

@@ -1,5 +1,6 @@
 import type { WidgetConfig } from '@lifi/widget'
 import { LiFiWidget } from '@lifi/widget'
+import { EthereumProvider } from '@lifi/widget-provider-ethereum'
 
 export default function DynamicWidget() {
   const config = {
@@ -12,5 +13,11 @@ export default function DynamicWidget() {
     },
   } as Partial<WidgetConfig>
 
-  return <LiFiWidget config={config} integrator="nextjs-example" />
+  return (
+    <LiFiWidget
+      config={config}
+      integrator="nextjs-example"
+      providers={[EthereumProvider()]}
+    />
+  )
 }

examples/nextjs14-page-router/components/Widget.tsx

@@ -2,6 +2,7 @@
 
 import type { WidgetConfig } from '@lifi/widget'
 import { LiFiWidget } from '@lifi/widget'
+import { EthereumProvider } from '@lifi/widget-provider-ethereum'
 import type { ReactNode } from 'react'
 import { ClientOnly } from './ClientOnly'
 
@@ -13,7 +14,11 @@ interface WidgetProps {
 export function Widget({ config, fallback }: WidgetProps) {
   return (
     <ClientOnly fallback={fallback}>
-      <LiFiWidget config={config} integrator="nextjs-example" />
+      <LiFiWidget
+        config={config}
+        integrator="nextjs-example"
+        providers={[EthereumProvider()]}
+      />
     </ClientOnly>
   )
 }

examples/nextjs14-page-router/package.json

@@ -9,7 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@lifi/widget": "^3.32.2",
+    "@lifi/widget": "workspace:^",
+    "@lifi/widget-provider-ethereum": "workspace:^",
     "next": "15.5.4",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"

examples/nextjs14/components/DynamicWidget.tsx

@@ -1,5 +1,6 @@
 import type { WidgetConfig } from '@lifi/widget'
 import { LiFiWidget } from '@lifi/widget'
+import { EthereumProvider } from '@lifi/widget-provider-ethereum'
 
 export default function DynamicWidget() {
   const config = {
@@ -12,5 +13,11 @@ export default function DynamicWidget() {
     },
   } as Partial<WidgetConfig>
 
-  return <LiFiWidget config={config} integrator="nextjs-example" />
+  return (
+    <LiFiWidget
+      config={config}
+      integrator="nextjs-example"
+      providers={[EthereumProvider()]}
+    />
+  )
 }

examples/nextjs14/components/Widget.tsx

@@ -2,6 +2,7 @@
 
 import type { WidgetConfig } from '@lifi/widget'
 import { LiFiWidget, WidgetSkeleton } from '@lifi/widget'
+import { EthereumProvider } from '@lifi/widget-provider-ethereum'
 import { ClientOnly } from './ClientOnly'
 
 export function Widget() {
@@ -17,7 +18,11 @@ export function Widget() {
 
   return (
     <ClientOnly fallback={<WidgetSkeleton config={config} />}>
-      <LiFiWidget config={config} integrator="nextjs-example" />
+      <LiFiWidget
+        config={config}
+        integrator="nextjs-example"
+        providers={[EthereumProvider()]}
+      />
     </ClientOnly>
   )
 }

examples/nextjs14/package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "@lifi/sdk": "^3.12.14",
-    "@lifi/widget": "^3.32.2",
+    "@lifi/widget": "workspace:^",
+    "@lifi/widget-provider-ethereum": "workspace:^",
     "@mui/material-nextjs": "7.3.2",
     "next": "15.5.4",
     "react": "^19.2.0",

examples/nuxt/components/WidgetContainer.vue

@@ -5,6 +5,7 @@
 <script lang="ts">
 // This is a React component
 import { LiFiWidget } from '@lifi/widget'
+import { EthereumProvider } from '@lifi/widget-provider-ethereum'
 import { applyPureReactInVue } from 'veaury'
 
 export default {
@@ -23,6 +24,7 @@ export default {
           },
         },
         integrator: 'vue-example',
+        providers: [EthereumProvider()],
       },
     }
   },

examples/nuxt/package.json

@@ -10,7 +10,8 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@lifi/widget": "^3.32.2",
+    "@lifi/widget-provider-ethereum": "workspace:^",
+    "@lifi/widget": "workspace:^",
     "nuxt": "3.17.7",
     "veaury": "^2.6.3",
     "vite-plugin-node-polyfills": "^0.24.0",

examples/privy-ethers/package.json

@@ -10,8 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lifi/wallet-management": "^3.17.3",
-    "@lifi/widget": "^3.32.2",
+    "@lifi/widget-provider-ethereum": "workspace:^",
+    "@lifi/widget-provider-solana": "workspace:^",
+    "@lifi/widget": "workspace:^",
     "@mui/icons-material": "7.3.2",
     "@mui/material": "7.3.2",
     "@privy-io/react-auth": "^2.25.0",

examples/privy-ethers/src/App.tsx

@@ -1,5 +1,7 @@
 import { ChainId, LiFiWidget } from '@lifi/widget'
-import { Grid2 } from '@mui/material'
+import { EthereumProvider } from '@lifi/widget-provider-ethereum'
+import { SolanaProvider } from '@lifi/widget-provider-solana'
+import { Grid } from '@mui/material'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { EthersPlayground } from './components/EthersPlayground'
 import { WalletHeader } from './components/WalletHeader'
@@ -11,8 +13,8 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <WalletProvider>
         <WalletHeader />
-        <Grid2 container spacing={2}>
-          <Grid2 size={{ sm: 12, md: 7 }}>
+        <Grid container spacing={2}>
+          <Grid size={{ sm: 12, md: 7 }}>
             <LiFiWidget
               integrator="vite-example"
               config={{
@@ -32,12 +34,13 @@ function App() {
                   },
                 },
               }}
+              providers={[EthereumProvider(), SolanaProvider()]}
             />
-          </Grid2>
-          <Grid2 size={{ sm: 12, md: 5 }}>
+          </Grid>
+          <Grid size={{ sm: 12, md: 5 }}>
             <EthersPlayground />
-          </Grid2>
-        </Grid2>
+          </Grid>
+        </Grid>
       </WalletProvider>
     </QueryClientProvider>
   )

examples/privy-ethers/src/providers/SyncedWalletProvider.tsx

@@ -1,9 +1,9 @@
+import { useAvailableChains } from '@lifi/widget'
 import {
   convertExtendedChain,
   isExtendedChain,
   useSyncWagmiConfig,
-} from '@lifi/wallet-management'
-import { useAvailableChains } from '@lifi/widget'
+} from '@lifi/widget-provider-ethereum'
 import { PrivyProvider } from '@privy-io/react-auth'
 import { WagmiProvider } from '@privy-io/wagmi'
 import { QueryClientProvider } from '@tanstack/react-query'