feat: add checkout widget

.gitignore

@@ -43,3 +43,4 @@ next-env.d.ts
 
 .claude/worktrees/
 .omc/
+.cursor/

examples/vue/src/vite-env.d.ts

@@ -2,6 +2,7 @@
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
+
   // biome-ignore lint/complexity/noBannedTypes: allowed in vue
   const component: DefineComponent<{}, {}, any>
   export default component

knip.json

@@ -21,6 +21,10 @@
         "@walletconnect/ethereum-provider",
         "porto"
       ]
+    },
+    "packages/widget": {
+      "ignore": ["src/config/version.ts"],
+      "ignoreDependencies": ["@transak/ui-js-sdk", "@meshconnect/web-link-sdk"]
     }
   }
 }

package.json

@@ -15,6 +15,7 @@
     "dev:dev": "pnpm --filter widget-playground-vite dev:dev",
     "dev:staging": "pnpm --filter widget-playground-vite dev:staging",
     "dev:local": "pnpm --filter widget-playground-vite dev:local",
+    "dev:mock-api": "pnpm --filter @lifi/widget dev:mock-api",
     "dev:next": "pnpm --filter widget-playground-next dev",
     "release": "pnpm release:version && pnpm release:build && pnpm standard-version -a -s",
     "release:alpha": "pnpm release:version --preid alpha && pnpm release:build && pnpm standard-version -a -s --prerelease alpha --skip.changelog",

packages/wallet-management/src/components/WalletMenuContent.tsx

@@ -12,7 +12,7 @@ import {
   List,
   Typography,
 } from '@mui/material'
-import { useMemo, useReducer, useRef } from 'react'
+import { useEffect, useMemo, useReducer, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAccount } from '../hooks/useAccount.js'
 import type { CombinedWallet } from '../hooks/useCombinedWallets.js'
@@ -83,7 +83,19 @@ export const WalletMenuContent: React.FC<WalletMenuContentProps> = ({
       .filter(Boolean)
   }, [accounts])
 
-  const [state, dispatch] = useReducer(reducer, { view: 'wallet-list' })
+  const openedWithWalletId = Boolean(walletChainArgs?.walletId)
+
+  const [state, dispatch] = useReducer(reducer, undefined, (): State => {
+    const walletId = walletChainArgs?.walletId
+    if (!walletId) {
+      return { view: 'wallet-list' }
+    }
+    const wallet = installedWallets.find((w) => w.id === walletId)
+    if (!wallet) {
+      return { view: 'wallet-list' }
+    }
+    return { view: 'multi-ecosystem', selectedWalletId: walletId }
+  })
 
   const handleMultiEcosystem = (id: string) => {
     dispatch({ type: 'SHOW_MULTI_ECOSYSTEM', id })
@@ -94,7 +106,18 @@ export const WalletMenuContent: React.FC<WalletMenuContentProps> = ({
   }
 
   const handleBack = () => {
-    dispatch({ type: 'SHOW_WALLET_LIST' })
+    if (openedWithWalletId) {
+      if (state.view === 'connecting') {
+        dispatch({
+          type: 'SHOW_MULTI_ECOSYSTEM',
+          id: state.selectedWalletId!,
+        })
+      } else {
+        onClose()
+      }
+    } else {
+      dispatch({ type: 'SHOW_WALLET_LIST' })
+    }
   }
 
   const handleError = (id: string, error: any) => {
@@ -119,6 +142,10 @@ export const WalletMenuContent: React.FC<WalletMenuContentProps> = ({
     const targetChainType =
       walletChainArgs.chain?.chainType ?? walletChainArgs.chainType
 
+    if (!targetChainType) {
+      return installedWallets
+    }
+
     return installedWallets
       .map((wallet) => {
         const filteredConnectors = wallet.connectors.filter(
@@ -131,6 +158,23 @@ export const WalletMenuContent: React.FC<WalletMenuContentProps> = ({
       .filter(Boolean) as typeof installedWallets
   }, [installedWallets, walletChainArgs])
 
+  const filteredWalletsRef = useRef(filteredWallets)
+  filteredWalletsRef.current = filteredWallets
+
+  useEffect(() => {
+    const walletId = walletChainArgs?.walletId
+    if (!walletId) {
+      dispatch({ type: 'SHOW_WALLET_LIST' })
+      return
+    }
+    const wallet = filteredWalletsRef.current.find((w) => w.id === walletId)
+    if (!wallet) {
+      dispatch({ type: 'SHOW_WALLET_LIST' })
+      return
+    }
+    dispatch({ type: 'SHOW_MULTI_ECOSYSTEM', id: walletId })
+  }, [walletChainArgs?.walletId])
+
   const isMultiEcosystem = state.view === 'multi-ecosystem'
   const isConnecting = state.view === 'connecting'
 

packages/wallet-management/src/index.ts

@@ -1,7 +1,16 @@
 import type {} from '@mui/material/themeCssVarsAugmentation'
 
+export { BitcoinListItemButton } from './components/BitcoinListItemButton.js'
+export { CardListItemButton } from './components/CardListItemButton.js'
+export { EthereumListItemButton } from './components/EthereumListItemButton.js'
+export { SolanaListItemButton } from './components/SolanaListItemButton.js'
+export { SuiListItemButton } from './components/SuiListItemButton.js'
 export * from './hooks/useAccount.js'
 export * from './hooks/useAccountDisconnect.js'
+export {
+  type CombinedWallet,
+  useCombinedWallets,
+} from './hooks/useCombinedWallets.js'
 export * from './hooks/useWalletManagementEvents.js'
 export * from './icons.js'
 export * from './providers/WalletManagementProvider/types.js'
@@ -10,5 +19,12 @@ export * from './providers/WalletManagementProviders.js'
 export type { WalletMenuOpenArgs } from './providers/WalletMenuProvider/types.js'
 export * from './providers/WalletMenuProvider/WalletMenuContext.js'
 export * from './types/events.js'
+export { WalletTagType } from './types/walletTagType.js'
 export * from './utils/getConnectorIcon.js'
+export { getConnectorId } from './utils/getConnectorId.js'
+export { getSortedByTags } from './utils/getSortedByTags.js'
 export * from './utils/getWalletPriority.js'
+export {
+  getConnectorTagType,
+  getWalletTagType,
+} from './utils/walletTags.js'

packages/wallet-management/src/providers/WalletMenuProvider/types.ts

@@ -3,6 +3,7 @@ import type { ChainType, ExtendedChain } from '@lifi/sdk'
 export interface WalletMenuOpenArgs {
   chain?: ExtendedChain
   chainType?: ChainType
+  walletId?: string
 }
 
 export interface WalletMenuContext {

packages/widget-playground-next/src/app/AppProvider.tsx

@@ -21,6 +21,7 @@ export const AppProvider = ({ children }: PropsWithChildren) => {
     <EnvVariablesProvider
       EVMWalletConnectId={process.env.NEXT_PUBLIC_EVM_WALLET_CONNECT!}
       TVMWalletConnectId={process.env.NEXT_PUBLIC_TVM_WALLET_CONNECT!}
+      onrampSessionApiUrl={process.env.NEXT_PUBLIC_ONRAMP_SESSION_API_URL!}
     >
       <QueryClientProvider client={queryClient}>
         <WidgetConfigProvider defaultWidgetConfig={defaultWidgetConfig}>

packages/widget-playground-vite/.env

@@ -1,3 +1,4 @@
 VITE_EVM_WALLET_CONNECT=5432e3507d41270bee46b7b85bbc2ef8
 VITE_TVM_WALLET_CONNECT=5432e3507d41270bee46b7b85bbc2ef8
 VITE_API_URL=https://li.quest/v1
+VITE_ONRAMP_SESSION_API_URL=http://localhost:8080

packages/widget-playground-vite/.env.staging

@@ -1,2 +1,4 @@
 VITE_API_URL=https://staging.li.quest/v1
-# Set VITE_API_KEY in .env.staging.local (git-ignored)
+# in .env.dev.local (git-ignored)
+# VITE_API_KEY 
+# VITE_ONRAMP_SESSION_API_URL

packages/widget-playground-vite/src/App.tsx

@@ -14,10 +14,25 @@ import type { JSX, PropsWithChildren } from 'react'
 const queryClient = new QueryClient()
 
 const AppProvider = ({ children }: PropsWithChildren) => {
+  const checkoutToChainRaw = import.meta.env.VITE_CHECKOUT_TO_CHAIN
+  const checkoutToChain = checkoutToChainRaw
+    ? Number(checkoutToChainRaw)
+    : undefined
+
   return (
     <EnvVariablesProvider
       EVMWalletConnectId={import.meta.env.VITE_EVM_WALLET_CONNECT}
       TVMWalletConnectId={import.meta.env.VITE_TVM_WALLET_CONNECT}
+      onrampSessionApiUrl={
+        import.meta.env.VITE_CHECKOUT_API_BASE_URL ||
+        import.meta.env.VITE_ONRAMP_SESSION_API_URL ||
+        undefined
+      }
+      checkoutIntegrator={import.meta.env.VITE_CHECKOUT_INTEGRATOR || undefined}
+      checkoutToChain={
+        Number.isNaN(checkoutToChain) ? undefined : checkoutToChain
+      }
+      checkoutToToken={import.meta.env.VITE_CHECKOUT_TO_TOKEN || undefined}
     >
       <QueryClientProvider client={queryClient}>
         <WidgetConfigProvider defaultWidgetConfig={defaultWidgetConfig}>

packages/widget-playground/package.json

@@ -28,8 +28,10 @@
     "@lifi/widget": "workspace:*",
     "@lifi/widget-provider-bitcoin": "workspace:*",
     "@lifi/widget-provider-ethereum": "workspace:*",
+    "@lifi/widget-provider-mesh": "workspace:*",
     "@lifi/widget-provider-solana": "workspace:*",
     "@lifi/widget-provider-sui": "workspace:*",
+    "@lifi/widget-provider-transak": "workspace:*",
     "@lifi/widget-provider-tron": "workspace:*",
     "@metamask/connect-evm": "^0.10.0",
     "@monaco-editor/react": "^4.7.0",

packages/widget-playground/src/components/DrawerControls/DesignControls/WidgetModeControl.tsx

@@ -0,0 +1,46 @@
+import type { JSX, SyntheticEvent } from 'react'
+import type { PlaygroundWidgetMode } from '../../../store/widgetConfig/types.js'
+import { useConfigActions } from '../../../store/widgetConfig/useConfigActions.js'
+import { usePlaygroundWidgetMode } from '../../../store/widgetConfig/useConfigValues.js'
+import { CardValue } from '../../Card/Card.style.js'
+import { ExpandableCard } from '../../Card/ExpandableCard.js'
+import { Tab, Tabs } from '../../Tabs/Tabs.style.js'
+
+const modeLabels: Record<PlaygroundWidgetMode, string> = {
+  swap: 'Swap / bridge',
+  checkout: 'Checkout',
+}
+
+export const WidgetModeControl = (): JSX.Element => {
+  const { playgroundWidgetMode } = usePlaygroundWidgetMode()
+  const { setPlaygroundWidgetMode } = useConfigActions()
+
+  const handleChange = (_: SyntheticEvent, value: PlaygroundWidgetMode) => {
+    if (value === 'swap' || value === 'checkout') {
+      setPlaygroundWidgetMode(value)
+    }
+  }
+
+  return (
+    <ExpandableCard
+      title="Widget mode"
+      value={
+        <CardValue sx={{ textTransform: 'none' }}>
+          {modeLabels[playgroundWidgetMode]}
+        </CardValue>
+      }
+    >
+      <Tabs
+        value={playgroundWidgetMode}
+        aria-label="Playground widget mode"
+        indicatorColor="primary"
+        onChange={handleChange}
+        sx={{ mt: 0.5 }}
+        orientation="vertical"
+      >
+        <Tab label={modeLabels.swap} value="swap" disableRipple />
+        <Tab label={modeLabels.checkout} value="checkout" disableRipple />
+      </Tabs>
+    </ExpandableCard>
+  )
+}

packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx

@@ -26,6 +26,7 @@ import { ThemeControl } from './DesignControls/ThemeControl.js'
 import { VariantControl } from './DesignControls/VariantControl.js'
 import { WalletManagementControl } from './DesignControls/WalletManagementControl.js'
 import { WidgetEventControls } from './DesignControls/WidgetEventsControls.js'
+import { WidgetModeControl } from './DesignControls/WidgetModeControl.js'
 import {
   Drawer,
   DrawerContentContainer,
@@ -117,6 +118,7 @@ export const DrawerControls = (): JSX.Element => {
             >
               <ExpandableCardAccordion>
                 <WidgetConfigControls>
+                  <WidgetModeControl />
                   <VariantControl />
                   <SubvariantControl />
                   <AppearanceControl />

packages/widget-playground/src/components/Widget/CheckoutWidgetView.tsx

@@ -0,0 +1,96 @@
+import { LifiWidgetCheckout } from '@lifi/widget/checkout'
+import { meshProvider } from '@lifi/widget-provider-mesh'
+import { transakProvider } from '@lifi/widget-provider-transak'
+import { Box, Button, Typography } from '@mui/material'
+import { type JSX, useCallback, useMemo, useState } from 'react'
+import { widgetBaseConfig } from '../../defaultWidgetConfig.js'
+import { useEnvVariables } from '../../providers/EnvVariablesProvider.js'
+import { useConfig } from '../../store/widgetConfig/useConfig.js'
+
+// TODO(cleanup-remove-playground-hardcoded-checkout-defaults): Replace these literals with
+// explicit env/config contract defaults once migration is complete.
+/** Default checkout target for Mesh/Transak demos (native ETH on Ethereum). Playground `config` overrides when set. */
+const DEFAULT_CHECKOUT_ONRAMP_TARGET = {
+  toChain: 1,
+  toToken: '0x0000000000000000000000000000000000000000',
+} as const
+
+const DEFAULT_CHECKOUT_CORE_API_URL = 'https://develop.li.quest'
+const DEFAULT_CHECKOUT_INTEGRATOR = 'local-test'
+
+export function CheckoutWidgetView(): JSX.Element {
+  const { config } = useConfig()
+  const {
+    onrampSessionApiUrl,
+    checkoutIntegrator,
+    checkoutToChain,
+    checkoutToToken,
+  } = useEnvVariables()
+  const [open, setOpen] = useState(false)
+
+  const handleOpen = useCallback(() => {
+    setOpen(true)
+  }, [])
+
+  const handleClose = useCallback(() => {
+    setOpen(false)
+  }, [])
+
+  // TODO(cleanup-remove-integrator-override-heuristic): Remove this heuristic comparison against
+  // widgetBaseConfig.integrator and use a strict precedence contract.
+  const resolvedIntegrator =
+    config?.integrator && config.integrator !== widgetBaseConfig.integrator
+      ? config.integrator
+      : checkoutIntegrator?.trim() || DEFAULT_CHECKOUT_INTEGRATOR
+
+  const checkoutConfig = {
+    ...config,
+    providers: config?.providers ?? widgetBaseConfig.providers,
+    toChain:
+      config?.toChain ??
+      checkoutToChain ??
+      DEFAULT_CHECKOUT_ONRAMP_TARGET.toChain,
+    toToken:
+      config?.toToken ??
+      checkoutToToken ??
+      DEFAULT_CHECKOUT_ONRAMP_TARGET.toToken,
+  }
+
+  const onRampProviders = useMemo(() => [transakProvider(), meshProvider()], [])
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 2,
+        p: 3,
+        flex: 1,
+        minHeight: 320,
+      }}
+    >
+      <Typography
+        variant="body2"
+        color="text.secondary"
+        sx={{ textAlign: 'center' }}
+      >
+        Checkout — opens as a centered widget
+      </Typography>
+      <Button variant="contained" onClick={handleOpen}>
+        Deposit
+      </Button>
+      <LifiWidgetCheckout
+        open={open}
+        integrator={resolvedIntegrator}
+        onrampSessionApiUrl={
+          onrampSessionApiUrl?.trim() || DEFAULT_CHECKOUT_CORE_API_URL
+        }
+        config={checkoutConfig}
+        onRampProviders={onRampProviders}
+        onClose={handleClose}
+      />
+    </Box>
+  )
+}

packages/widget-playground/src/components/Widget/WidgetView.tsx

@@ -5,10 +5,13 @@ import { useCallback, useEffect, useRef } from 'react'
 import { useFormValues } from '../../store/editTools/useFormValues.js'
 import { useSkeletonToolValues } from '../../store/editTools/useSkeletonToolValues.js'
 import { useConfig } from '../../store/widgetConfig/useConfig.js'
+import { usePlaygroundWidgetMode } from '../../store/widgetConfig/useConfigValues.js'
+import { CheckoutWidgetView } from './CheckoutWidgetView.js'
 import { WidgetViewContainer } from './WidgetViewContainer.js'
 
 export function WidgetView(): JSX.Element {
   const { config } = useConfig()
+  const { playgroundWidgetMode } = usePlaygroundWidgetMode()
   const drawerRef = useRef<WidgetDrawer>(null)
   const formRef = useRef<FormState>(null)
   const { isSkeletonShown, isSkeletonSideBySide } = useSkeletonToolValues()
@@ -30,6 +33,14 @@ export function WidgetView(): JSX.Element {
     }
   }, [formValues])
 
+  if (playgroundWidgetMode === 'checkout') {
+    return (
+      <WidgetViewContainer>
+        <CheckoutWidgetView />
+      </WidgetViewContainer>
+    )
+  }
+
   return (
     <WidgetViewContainer toggleDrawer={toggleDrawer}>
       {!isSkeletonShown || isSkeletonSideBySide ? (