diff --git a/.changeset/rich-fishes-lie.md b/.changeset/rich-fishes-lie.md
new file mode 100644
index 00000000..d59895c6
--- /dev/null
+++ b/.changeset/rich-fishes-lie.md
@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': minor
+---
+
+Export SwapWidgetWithoutProvider
diff --git a/examples/nextjs/pages/provider.tsx b/examples/nextjs/pages/provider.tsx
new file mode 100644
index 00000000..ee5662fa
--- /dev/null
+++ b/examples/nextjs/pages/provider.tsx
@@ -0,0 +1,51 @@
+import { NextPage } from 'next';
+import React from 'react';
+import { SwapWidgetWithoutProviders } from '@skip-go/widget';
+import { SwapWidgetProvider } from '@skip-go/widget';
+
+const Home: NextPage = () => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Home;
diff --git a/examples/nextjs/styles/globals.css b/examples/nextjs/styles/globals.css
index a9633456..df35057b 100644
--- a/examples/nextjs/styles/globals.css
+++ b/examples/nextjs/styles/globals.css
@@ -16,6 +16,4 @@ div,
p,
span {
color: gray;
- border: 2px solid gray;
- background: gray;
}
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
index e4a82e27..b3eb79ff 100644
--- a/packages/widget/src/index.ts
+++ b/packages/widget/src/index.ts
@@ -1,5 +1,10 @@
export { SwapWidgetProvider } from './provider';
-export { SwapWidget, SwapWidgetProps } from './ui';
+export {
+ SwapWidget,
+ SwapWidgetProps,
+ SwapWidgetWithoutProviders,
+ SwapWidgetWithoutProvidersProps,
+} from './ui';
export { initializeSwapWidget } from './ui/WebComponent';
export { useAssets } from './provider/assets';
export { useChains, useChainByID } from './hooks/use-chains';
diff --git a/packages/widget/src/ui/index.tsx b/packages/widget/src/ui/index.tsx
index c091744f..f02bc7d9 100644
--- a/packages/widget/src/ui/index.tsx
+++ b/packages/widget/src/ui/index.tsx
@@ -11,13 +11,49 @@ import cssReset from '../styles/cssReset.css';
import { Scope } from 'react-shadow-scope';
import { useInjectFontsToDocumentHead } from '../hooks/use-inject-fonts-to-document-head';
-export type SwapWidgetProps = Pick<
+export type SwapWidgetWithoutProvidersProps = Pick<
React.HTMLAttributes,
'className' | 'style'
> &
- ConfigureSwapWidgetArgs &
+ ConfigureSwapWidgetArgs;
+
+export type SwapWidgetProps = SwapWidgetWithoutProvidersProps &
Partial;
+export const SwapWidgetWithoutProviders: React.FC<
+ SwapWidgetWithoutProvidersProps
+> = ({
+ colors,
+ settings,
+ onlyTestnet,
+ defaultRoute,
+ routeConfig,
+ className,
+ style,
+ filter,
+}) => {
+ useInjectFontsToDocumentHead();
+ useEffect(() => {
+ configureSwapWidget({
+ colors,
+ onlyTestnet,
+ settings,
+ defaultRoute,
+ routeConfig,
+ filter,
+ });
+ }, [colors, onlyTestnet, settings, defaultRoute, routeConfig]);
+
+ return (
+
+
+
+ );
+};
+
export const SwapWidget: React.FC = ({
colors,
settings,