Add shadow-dom (#29)

Add shadow-dom
skip-mev · Jul 10, 2024 · 6c4e611 · 6c4e611
1 parent 29d7204
commit 6c4e611
Show file tree

Hide file tree

Showing 31 changed files with 645 additions and 457 deletions.
diff --git a/.changeset/nine-hounds-battle.md b/.changeset/nine-hounds-battle.md
@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': minor
+---
+
+Move widget to within shadow DOM
diff --git a/README.md b/README.md
@@ -40,6 +40,12 @@ yarn dev
 yarn build
 ```
 
+### Updating changelog
+
+```
+npx changeset
+```
+
 ## Docs
 
 - [Core](./packages/core/README.md)

diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
@@ -1,30 +1,25 @@
 import { NextPage } from 'next';
-import '@skip-go/widget/style.css';
 import React from 'react';
-import { SwapWidget, SwapWidgetProvider } from '@skip-go/widget';
+import { SwapWidget } from '@skip-go/widget';
 
 const Home: NextPage = () => {
   return (
-    <div style={{ display: 'flex', gap: 50 }}>
-      <div
-        style={{
-          width: '450px',
-          height: '820px',
+    <div
+      style={{
+        width: '450px',
+        height: '820px',
+      }}
+    >
+      <SwapWidget
+        colors={{
+          primary: '#FF4FFF',
         }}
-      >
-        <SwapWidgetProvider>
-          <SwapWidget
-            colors={{
-              primary: '#FF4FFF',
-            }}
-            defaultRoute={{
-              srcChainID: 'osmosis-1',
-              srcAssetDenom:
-                'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
-            }}
-          />
-        </SwapWidgetProvider>
-      </div>
+        defaultRoute={{
+          srcChainID: 'osmosis-1',
+          srcAssetDenom:
+            'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
+        }}
+      />
     </div>
   );
 };

diff --git a/examples/nextjs/pages/web-component.tsx b/examples/nextjs/pages/web-component.tsx
@@ -1,39 +1,27 @@
 import { NextPage } from 'next';
-import '@skip-go/widget/style.css';
 import React from 'react';
-import dynamic from 'next/dynamic';
 import { initializeSwapWidget } from '@skip-go/widget';
 
-const NoSsrBase = (props: any) => <>{props.children}</>;
-
-const NoSSR = dynamic(() => Promise.resolve(NoSsrBase), {
-  ssr: false,
-});
-
 const WebComponent: NextPage = () => {
   initializeSwapWidget();
 
   return (
-    <div>
-      <div
-        style={{
-          width: '450px',
-          height: '820px',
-        }}
-      >
-        <NoSSR>
-          <skip-widget
-            colors={JSON.stringify({
-              primary: '#FF4FFF',
-            })}
-            default-route={JSON.stringify({
-              srcChainID: 'osmosis-1',
-              srcAssetDenom:
-                'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
-            })}
-          ></skip-widget>
-        </NoSSR>
-      </div>
+    <div
+      style={{
+        width: '450px',
+        height: '820px',
+      }}
+    >
+      <skip-widget
+        colors={JSON.stringify({
+          primary: '#FF4FFF',
+        })}
+        default-route={JSON.stringify({
+          srcChainID: 'osmosis-1',
+          srcAssetDenom:
+            'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
+        })}
+      ></skip-widget>
     </div>
   );
 };

diff --git a/examples/nextjs/styles/globals.css b/examples/nextjs/styles/globals.css
@@ -7,3 +7,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   background-color: gray;
 }
+
+input {
+  background-color: black;
+}
diff --git a/packages/widget/README.md b/packages/widget/README.md
@@ -10,31 +10,12 @@ To install the package, run the following command:
 npm install @skip-go/widget
 ```
 
-## Quick Start Guide
+## React Component usage
 
-### 1. Wrap Your App with `SwapWidgetProvider`
-
-First, wrap your application or the relevant page with the `SwapWidgetProvider` component:
-
-```tsx
-import { SwapWidgetProvider } from '@skip-go/widget';
-
-function App() {
-  return (
-    <SwapWidgetProvider>
-      <YourApp />
-    </SwapWidgetProvider>
-  );
-}
-```
-
-### 2. Use the `SwapWidget` Component
-
-Next, import the css and use the `SwapWidget` component to render the swap interface:
+import the `SwapWidget` from `'@skip-go/widget'` to render the swap interface:
 
 ```tsx
 import { SwapWidget } from '@skip-go/widget';
-import '@skip-go/widget/style.css';
 
 const SwapPage = () => {
   return (
@@ -54,9 +35,7 @@ const SwapPage = () => {
 };
 ```
 
-## Component Props
-
-### SwapWidget
+### SwapWidget props
 
 The `SwapWidget` component accepts the following props:
 
@@ -91,44 +70,41 @@ interface SwapWidgetProps {
     slippage?: number; //percentage of slippage 0-100. defaults to 3
   };
   onlyTestnet?: boolean; // Only show testnet chains
+  toasterProps?: {
+    // Refer to [ToasterProps](https://react-hot-toast.com/docs/toast-options) for more details. Defaults to `{ position: 'top-right' }`
+    position?: ToastPosition;
+    toastOptions?: DefaultToastOptions;
+    reverseOrder?: boolean;
+    gutter?: number;
+    containerStyle?: React.CSSProperties;
+    containerClassName?: string;
+    children?: (toast: Toast) => JSX.Element;
+  };
+  endpointOptions?: {
+    // Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
+    endpoints?: Record<string, EndpointOptions>;
+    getRpcEndpointForChain?: (chainID: string) => Promise<string>;
+    getRestEndpointForChain?: (chainID: string) => Promise<string>;
+  };
+  apiURL?: string; // Custom API URL to override Skip API endpoint. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
 }
 ```
 
-### SwapWidgetProvider
-
-The `SwapWidgetProvider` component accepts the following prop:
-
-- `toasterProps` (Optional): Props for the toaster component. Refer to [ToasterProps](https://react-hot-toast.com/docs/toast-options) for more details. Defaults to `{ position: 'top-right' }`.
-- `endpointOptions` (Optional): Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
-
-  ```ts
-  endpointOptions?: {
-      // Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
-      endpoints?: Record<string, EndpointOptions>;
-      getRpcEndpointForChain?: (chainID: string) => Promise<string>;
-      getRestEndpointForChain?: (chainID: string) => Promise<string>;
-    };
-  ```
-
-- `apiURL` (Optional): Custom API URL to override Skip Go API endpoint. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
-
-By following these steps, you can easily integrate the Skip Go Widget into your React application and customize it to meet your specific needs.
-
-### Web Component
+## Web Component usage
 
 The web component is created with the `@r2wc/react-to-web-component` library.
 
-In order to register the web-component, you must call the `initializeSwapWidget` function:
+In order to register the web-component, you must first call the `initializeSwapWidget` function:
 
 ```tsx
 import { initializeSwapWidget } from '@skip-go/widget';
 
 initializeSwapWidget();
 ```
 
-voila! you can now use the `swap-widget` web-component
+et voilà! you can now use the `swap-widget` web-component as `<swap-widget></swap-widget>`
 
-The props for the web component are the same as `SwapWidgetProps` and `SwapWidgetProviderProps` except that
+The props for the web component are the same as `SwapWidgetProps` except that
 they are sent to the web-component as attributes in kebab-case as strings or stringified objects ie.
 
 ```tsx
@@ -149,11 +125,8 @@ becomes
     srcAssetDenom:
       'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
   })}
+  toaster-props=""
+  endpoint-options=""
+  api-url=""
 ></swap-widget>
 ```
-
-the web-component exposes the `SwapWidgetProviderProps` as attributes on swap-widget as well
-
-```tsx
-<swap-widget toaster-props="" endpoint-options="" api-url=""></swap-widget>
-```
diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -40,6 +40,7 @@
     "react-dom": "17.x || 18.x"
   },
   "devDependencies": {
+    "@rollup/plugin-url": "^8.0.2",
     "@types/node": "18.7.18",
     "@types/qrcode": "^1.4.2",
     "@types/react": "^18.0.6",
@@ -100,6 +101,7 @@
     "match-sorter": "^6.3.4",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
+    "react-shadow-scope": "^1.0.5",
     "tailwind-merge": "^2.3.0",
     "viem": "2.x",
     "wagmi": "2.x",

diff --git a/packages/widget/postcss.config.cjs b/packages/widget/postcss.config.cjs
@@ -1,9 +1,6 @@
-/** @type {import('tailwindcss').Config} */
 module.exports = {
-  important: true,
-  plugins: [
-    require('tailwindcss'),
-    require('autoprefixer'),
-    require('postcss-prefixwrap')('.skip-go-widget'),
-  ],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };
diff --git a/packages/widget/rollup.config.js b/packages/widget/rollup.config.js
@@ -1,7 +1,7 @@
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import typescript from 'rollup-plugin-typescript2';
 import postcss from 'rollup-plugin-postcss';
-import copy from 'rollup-plugin-copy';
+import url from '@rollup/plugin-url';
 
 import packageJson from './package.json';
 
@@ -19,21 +19,19 @@ export default [
         config: {
           path: './postcss.config.js',
         },
+        inject: false,
         extensions: ['.css'],
         minimize: true,
-        extract: 'style.css',
+      }),
+      url({
+        include: ['**/*.woff', '**/*.woff2', '**/*.ttf'],
+        limit: Infinity,
       }),
       peerDepsExternal(),
       typescript({
         useTsconfigDeclarationDir: true,
         exclude: 'node_modules/**',
       }),
-      copy({
-        targets: [
-          // Need to copy the files over for usage
-          { src: 'src/assets/fonts', dest: 'build/assets' },
-        ],
-      }),
     ],
   },
 ];
diff --git a/packages/widget/src/hooks/use-fix-radix-ui-wheel-event.ts b/packages/widget/src/hooks/use-fix-radix-ui-wheel-event.ts
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+export const useFixRadixUiWheelEvent = () => {
+  useEffect(() => {
+    const element = document.querySelector('react-shadow-scope')?.shadowRoot;
+    if (!element) return;
+
+    const handleWheel = (e: Event) => {
+      e.stopPropagation();
+    };
+
+    const handleTouchMove = (e: Event) => {
+      e.stopPropagation();
+    };
+
+    element.addEventListener('wheel', handleWheel, true);
+    element.addEventListener('touchmove', handleTouchMove, true);
+
+    return () => {
+      element.removeEventListener('wheel', handleWheel, true);
+      element.removeEventListener('touchmove', handleTouchMove, true);
+    };
+  }, []);
+};
diff --git a/packages/widget/src/hooks/use-inject-fonts-to-document-head.ts b/packages/widget/src/hooks/use-inject-fonts-to-document-head.ts
@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { fonts } from '../styles/fonts';
+
+export const useInjectFontsToDocumentHead = () => {
+  useEffect(() => {
+    const styleElement = document.createElement('style');
+    styleElement.textContent = fonts;
+
+    if (!document.head.contains(styleElement)) {
+      document.head.appendChild(styleElement);
+    }
+
+    return () => {
+      document.head.removeChild(styleElement);
+    };
+  }, []);
+};
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
@@ -1,4 +1,3 @@
-import './styles/global.css';
 export { SwapWidgetProvider } from './provider';
 export { SwapWidget, SwapWidgetProps } from './ui';
 export { initializeSwapWidget } from './ui/WebComponent';

diff --git a/packages/widget/src/provider/index.tsx b/packages/widget/src/provider/index.tsx
@@ -62,16 +62,14 @@ export const SwapWidgetProvider: React.FC<SwapWidgetProviderProps> = ({
   ...skipApiProviderProps
 }) => {
   return (
-    <div className="skip-go-widget">
-      <WalletProvider>
-        <SkipAPIProvider {...skipApiProviderProps}>{children}</SkipAPIProvider>
-        <Toaster
-          position={'top-right'}
-          containerClassName="font-diatype"
-          toastOptions={{ duration: 1000 * 10 }}
-          {...toasterProps}
-        />
-      </WalletProvider>
-    </div>
+    <WalletProvider>
+      <SkipAPIProvider {...skipApiProviderProps}>{children}</SkipAPIProvider>
+      <Toaster
+        position={'top-right'}
+        containerClassName="font-diatype"
+        toastOptions={{ duration: 1000 * 10 }}
+        {...toasterProps}
+      />
+    </WalletProvider>
   );
 };