Swap widget without providers (#69)

.changeset/rich-fishes-lie.md

@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': minor
+---
+
+Export SwapWidgetWithoutProvider

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 (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+      }}
+    >
+      <div
+        style={{
+          width: '450px',
+          height: '820px',
+        }}
+      >
+        <SwapWidgetProvider>
+          <SwapWidgetWithoutProviders
+            colors={{
+              primary: '#FF4FFF',
+            }}
+            defaultRoute={{
+              srcChainID: 'osmosis-1',
+              srcAssetDenom:
+                'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
+            }}
+          />
+        </SwapWidgetProvider>
+      </div>
+      <button
+        onClick={() => {
+          if (window.confirm('Are you sure you want to purge all settings?')) {
+            window.localStorage.clear();
+            window.sessionStorage.clear();
+            window.location.reload();
+          }
+        }}
+        style={{
+          height: '40px',
+        }}
+      >
+        Purge Settings
+      </button>
+    </div>
+  );
+};
+
+export default Home;

examples/nextjs/styles/globals.css

@@ -16,6 +16,4 @@ div,
 p,
 span {
   color: gray;
-  border: 2px solid gray;
-  background: gray;
 }

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';

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<HTMLDivElement>,
   'className' | 'style'
 > &
-  ConfigureSwapWidgetArgs &
+  ConfigureSwapWidgetArgs;
+
+export type SwapWidgetProps = SwapWidgetWithoutProvidersProps &
   Partial<SwapWidgetProviderProps>;
 
+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 (
+    <Scope
+      stylesheets={[cssReset, toastStyles, shadowDomStyles]}
+      config={{ dsd: 'emulated' }}
+    >
+      <SwapWidgetUI className={className} style={style} />
+    </Scope>
+  );
+};
+
 export const SwapWidget: React.FC<SwapWidgetProps> = ({
   colors,
   settings,