lifinance · chybisov · Mar 6, 2026 · Mar 2, 2026 · Mar 2, 2026 · Mar 5, 2026
diff --git a/examples/nft-checkout/.env b/examples/nft-checkout/.env
@@ -0,0 +1,3 @@
+VITE_OPENSEA_API_KEY=ee7460014fda4f58804f25c29a27df35
+VITE_WALLET_CONNECT=5432e3507d41270bee46b7b85bbc2ef8
+
diff --git a/examples/nft-checkout/README.md b/examples/nft-checkout/README.md
@@ -0,0 +1,35 @@
+# LI.FI Widget NFT Checkout
+
+The demo of the LI.FI Widget NFT Checkout based on the OpenSea API.
+
+### How to run?
+
+```
+pnpm dev
+```
+
+### How to test?
+
+1. Find an NFT on the [OpenSea](https://opensea.io/). Please make sure it has an active listing and the test wallet has enough tokens to buy it. While we will be able to pay with any token in the process, the OpenSea SDK checks for the token in which the NFT is listed to generate transaction data.
+2. Let's say we found this NFT https://opensea.io/assets/base/0x9e81df5258908dbeef4f841d0ab3816b10850426/2578
+3. We need to replace the `opensea.io/assets` part with `localhost:3000` or `widget.li.fi`, depending on the testing environment, so the final URL should look like this
+http://localhost:3000/base/0x9e81df5258908dbeef4f841d0ab3816b10850426/2578 or this https://widget.li.fi/base/0x9e81df5258908dbeef4f841d0ab3816b10850426/2578
+4. Open the URL and make sure the test wallet is switched to the chain the NFT is on so OpenSea SDK can generate transaction data.
+5. Select any token on any chain and pay for NFT.
+
+### Live Demo
+
+https://github.com/lifinance/widget/assets/18644653/af360181-3856-4276-b309-f923f476f40b
+
+#### Demo Transactions
+
+https://optimistic.etherscan.io/tx/0xa9f4e4304822cfe01808555b66e047761361c9e54b2387f93e23e9ffb92ba151
+https://polygonscan.com/tx/0x370682cbbc544e0ea258da774220b529a086c4b22941b924587cd2e0105579f6
+
+### What does it look like?
+
+<img src="https://github.com/lifinance/widget/assets/18644653/636c3071-c47e-45db-9ebd-1b7f502c2bab" width="400" />
+
+### Questions?
+
+Please don't hesitate to open an issue or contact us if you have any questions.
diff --git a/examples/nft-checkout/index.html b/examples/nft-checkout/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.png" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" />
+    <title>LI.FI Widget</title>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/nft-checkout/package.json b/examples/nft-checkout/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "nft-checkout",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "analyze": "source-map-explorer 'dist/assets/*.js' --no-border-checks",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "check:types": "tsc --noEmit",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo",
+    "preview": "vite preview",
+    "pre-push:validate": "pnpm check:types"
+  },
+  "author": "Eugene Chybisov <eugene@li.finance>",
+  "dependencies": {
+    "@lifi/sdk": "^4.0.0-alpha.13",
+    "@lifi/wallet-management": "workspace:*",
+    "@lifi/widget": "workspace:*",
+    "@lifi/widget-provider-bitcoin": "workspace:*",
+    "@lifi/widget-provider-ethereum": "workspace:*",
+    "@lifi/widget-provider-solana": "workspace:*",
+    "@lifi/widget-provider-sui": "workspace:*",
+    "@mui/icons-material": "^7.3.6",
+    "@mui/material": "^7.3.6",
+    "@mui/system": "^7.3.6",
+    "@opensea/seaport-js": "4.0.6",
+    "@tanstack/react-query": "^5.90.20",
+    "bignumber.js": "^9.3.0",
+    "ethers": "^6.16.0",
+    "events": "^3.3.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.0",
+    "viem": "^2.45.1",
+    "wagmi": "^3.1.0"
+  },
+  "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.3",
+    "source-map-explorer": "^2.5.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-node-polyfills": "0.25.0",
+    "web-vitals": "^5.1.0"
+  },
+  "browserslist": {
+    "production": [
+      "> 1%",
+      "last 2 versions",
+      "not dead",
+      "not IE > 0",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "private": true
+}
diff --git a/examples/nft-checkout/public/favicon.ico b/examples/nft-checkout/public/favicon.ico
diff --git a/examples/nft-checkout/public/favicon.png b/examples/nft-checkout/public/favicon.png
diff --git a/examples/nft-checkout/public/logo192.png b/examples/nft-checkout/public/logo192.png
diff --git a/examples/nft-checkout/public/logo512.png b/examples/nft-checkout/public/logo512.png
diff --git a/examples/nft-checkout/public/manifest.json b/examples/nft-checkout/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "LI.FI Widget",
+  "name": "LI.FI Widget",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/examples/nft-checkout/public/robots.txt b/examples/nft-checkout/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/examples/nft-checkout/src/App.tsx b/examples/nft-checkout/src/App.tsx
@@ -0,0 +1,59 @@
+import { LiFiWidget } from '@lifi/widget'
+import { Box, CssBaseline } from '@mui/material'
+import type { NFTNetwork } from './components/NFTOpenSea/index.js'
+import {
+  NFTOpenSea,
+  NFTOpenSeaSecondary,
+  openSeaContractTool,
+} from './components/NFTOpenSea/index.js'
+import { widgetConfig } from './config.js'
+import './index.css'
+
+export const App = () => {
+  const pathnameParams = window.location.pathname.substring(1).split('/')
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        height: '100vh',
+      }}
+    >
+      <CssBaseline />
+      <Box
+        sx={{
+          flex: 1,
+          margin: 'auto',
+        }}
+      >
+        <LiFiWidget
+          contractComponent={
+            <NFTOpenSea
+              network={pathnameParams[0] as NFTNetwork}
+              contractAddress={pathnameParams[1]}
+              tokenId={pathnameParams[2]}
+            />
+          }
+          contractSecondaryComponent={
+            <NFTOpenSeaSecondary
+              network={pathnameParams[0] as NFTNetwork}
+              contractAddress={pathnameParams[1]}
+              tokenId={pathnameParams[2]}
+            />
+          }
+          contractCompactComponent={
+            <NFTOpenSeaSecondary
+              network={pathnameParams[0] as NFTNetwork}
+              contractAddress={pathnameParams[1]}
+              tokenId={pathnameParams[2]}
+            />
+          }
+          contractTool={openSeaContractTool}
+          config={widgetConfig}
+          integrator={widgetConfig.integrator}
+          open
+        />
+      </Box>
+    </Box>
+  )
+}
diff --git a/.../src/components/NFTOpenSea/NFTOpenSea.tsx → .../src/components/NFTOpenSea/NFTOpenSea.tsx b/.../src/components/NFTOpenSea/NFTOpenSea.tsx → .../src/components/NFTOpenSea/NFTOpenSea.tsx
diff --git a/...onents/NFTOpenSea/NFTOpenSeaSecondary.tsx → ...onents/NFTOpenSea/NFTOpenSeaSecondary.tsx b/...onents/NFTOpenSea/NFTOpenSeaSecondary.tsx → ...onents/NFTOpenSea/NFTOpenSeaSecondary.tsx
diff --git a/.../components/NFTOpenSea/getEthersSigner.ts → .../components/NFTOpenSea/getEthersSigner.ts b/.../components/NFTOpenSea/getEthersSigner.ts → .../components/NFTOpenSea/getEthersSigner.ts
diff --git a/...bedded/src/components/NFTOpenSea/index.ts → ...eckout/src/components/NFTOpenSea/index.ts b/...bedded/src/components/NFTOpenSea/index.ts → ...eckout/src/components/NFTOpenSea/index.ts
diff --git a/...bedded/src/components/NFTOpenSea/types.ts → ...eckout/src/components/NFTOpenSea/types.ts b/...bedded/src/components/NFTOpenSea/types.ts → ...eckout/src/components/NFTOpenSea/types.ts
diff --git a/...ents/NFTOpenSea/useOpenSeaFulfillment.tsx → ...ents/NFTOpenSea/useOpenSeaFulfillment.tsx b/...ents/NFTOpenSea/useOpenSeaFulfillment.tsx → ...ents/NFTOpenSea/useOpenSeaFulfillment.tsx
diff --git a/...components/NFTOpenSea/useOpenSeaOrder.tsx → ...components/NFTOpenSea/useOpenSeaOrder.tsx b/...components/NFTOpenSea/useOpenSeaOrder.tsx → ...components/NFTOpenSea/useOpenSeaOrder.tsx
diff --git a/...bedded/src/components/NFTOpenSea/utils.ts → ...eckout/src/components/NFTOpenSea/utils.ts b/...bedded/src/components/NFTOpenSea/utils.ts → ...eckout/src/components/NFTOpenSea/utils.ts
diff --git a/packages/widget-embedded/src/config.ts → examples/nft-checkout/src/config.ts b/packages/widget-embedded/src/config.ts → examples/nft-checkout/src/config.ts
diff --git a/packages/widget-embedded/src/index.css → examples/nft-checkout/src/index.css b/packages/widget-embedded/src/index.css → examples/nft-checkout/src/index.css
diff --git a/packages/widget-embedded/src/index.tsx → examples/nft-checkout/src/main.tsx b/packages/widget-embedded/src/index.tsx → examples/nft-checkout/src/main.tsx
@@ -45,6 +45,5 @@ root.render(
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 if (import.meta.env.DEV) {
-  // biome-ignore lint/suspicious/noConsole: allowed in dev
   reportWebVitals(console.log)
 }
diff --git a/examples/nft-checkout/src/reportWebVitals.ts b/examples/nft-checkout/src/reportWebVitals.ts
@@ -0,0 +1,13 @@
+import type { MetricType } from 'web-vitals'
+
+export const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
+      onCLS(onPerfEntry)
+      onINP(onPerfEntry)
+      onFCP(onPerfEntry)
+      onLCP(onPerfEntry)
+      onTTFB(onPerfEntry)
+    })
+  }
+}
diff --git a/examples/nft-checkout/src/vite-env.d.ts b/examples/nft-checkout/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/nft-checkout/tsconfig.json b/examples/nft-checkout/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
+    "outDir": "dist",
+    "rootDir": "./src",
+    "composite": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/nft-checkout/tsconfig.node.json b/examples/nft-checkout/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/nft-checkout/vite.config.ts b/examples/nft-checkout/vite.config.ts
@@ -0,0 +1,32 @@
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
+import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [nodePolyfills(), react()],
+  esbuild: {
+    target: 'esnext',
+  },
+  build: {
+    sourcemap: true,
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: 'globalThis',
+      },
+      plugins: [
+        NodeGlobalsPolyfillPlugin({
+          process: true,
+          buffer: true,
+        }),
+      ],
+    },
+  },
+  server: {
+    port: 3000,
+    open: true,
+  },
+})
diff --git a/examples/vite-iframe-wagmi/.env b/examples/vite-iframe-wagmi/.env
@@ -0,0 +1 @@
+VITE_WIDGET_URL=https://widget.li.fi
diff --git a/examples/vite-iframe-wagmi/.env.localhost b/examples/vite-iframe-wagmi/.env.localhost
@@ -0,0 +1 @@
+VITE_WIDGET_URL=http://localhost:3000
diff --git a/examples/vite-iframe-wagmi/index.html b/examples/vite-iframe-wagmi/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Widget Light — Host</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/vite-iframe-wagmi/package.json b/examples/vite-iframe-wagmi/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "vite-iframe-wagmi",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@lifi/widget-light": "^4.0.0-alpha.2",
+    "@tanstack/react-query": "^5.90.20",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "viem": "^2.45.1",
+    "wagmi": "^3.4.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0"
+  }
+}
diff --git a/examples/vite-iframe-wagmi/src/App.tsx b/examples/vite-iframe-wagmi/src/App.tsx
@@ -0,0 +1,31 @@
+import { LiFiWidgetLight } from '@lifi/widget-light'
+import { useEthereumIframeHandler } from '@lifi/widget-light/ethereum'
+import { useMemo } from 'react'
+import { WalletHeader } from './components/WalletHeader'
+import { widgetConfig } from './widgetConfig'
+
+const WIDGET_URL = import.meta.env.VITE_WIDGET_URL || 'https://widget.li.fi'
+const WIDGET_ORIGIN = new URL(WIDGET_URL).origin
+
+export function HostApp() {
+  const ethHandler = useEthereumIframeHandler()
+  const handlers = useMemo(() => [ethHandler], [ethHandler])
+
+  return (
+    <div className="app">
+      <WalletHeader />
+
+      <div className="app-content">
+        <LiFiWidgetLight
+          src={WIDGET_URL}
+          config={widgetConfig}
+          handlers={handlers}
+          iframeOrigin={WIDGET_ORIGIN}
+          autoResize={false}
+          className="widget-iframe"
+          title="LI.FI Widget"
+        />
+      </div>
+    </div>
+  )
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		VITE_OPENSEA_API_KEY=ee7460014fda4f58804f25c29a27df35
Copy link Copy Markdown aikido-pr-checks bot Mar 5, 2026 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Exposed secret in examples/nft-checkout/.env - high severity Detected a Generic API Key, potentially exposing access to various services and sensitive operations. _{Reply @AikidoSec ignore: [REASON] to ignore this issue.} _{More Info} Copy link Copy Markdown Member Author chybisov Mar 5, 2026 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Fine in this case
		VITE_WALLET_CONNECT=5432e3507d41270bee46b7b85bbc2ef8