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,