@skip-go/widget 1.1.0 → 1.2.0

package/README.md

@@ -1,159 +1,132 @@
-# Skip Go Widget
-
-The `@skip-go/widget` package is an npm package providing a React component for a full swap interface using the [Skip API](https://skip.build/).
-
-## Installation
-
-To install the package, run the following command:
-
-```bash
-npm install @skip-go/widget
-```
-
-## Quick Start Guide
-
-### 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:
-
-```tsx
-import { SwapWidget } from '@skip-go/widget';
-import '@skip-go/widget/style.css';
-
-const SwapPage = () => {
-  return (
-    <div
-      style={{
-        width: '450px',
-        height: '820px',
-      }}
-    >
-      <SwapWidget
-        colors={{
-          primary: '#FF4FFF',
-        }}
-      />
-    </div>
-  );
-};
-```
-
-## Component Props
-
-### SwapWidget
-
-The `SwapWidget` component accepts the following props:
-
-```tsx
-interface SwapWidgetProps {
-  colors?: {
-    primary?: string; // Custom primary color for the widget. Defaults to `#FF486E`.
-  };
-  defaultRoute?: {
-    // Default route for the widget.
-    amountIn?: number;
-    amountOut?: number;
-    srcChainID?: string;
-    srcAssetDenom?: string;
-    destChainID?: string;
-    destAssetDenom?: string;
-  };
-  routeConfig?: {
-    experimentalFeatures?: ['hyperlane'];
-    allowMultiTx?: boolean;
-    allowUnsafe?: boolean;
-    bridges?: ('IBC' | 'AXELAR' | 'CCTP' | 'HYPERLANE')[];
-    swapVenues?: {
-      name: string;
-      chainID: string;
-    }[];
-  };
-  className?: string;
-  style?: React.CSSProperties;
-  settings?: {
-    customGasAmount?: number; // custom gas amount for validation defaults to 200_000
-    slippage?: number; //percentage of slippage 0-100. defaults to 3
-  };
-  onlyTestnet?: boolean; // Only show testnet chains
-}
-```
-
-### 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 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
-
-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:
-
-```tsx
-import { initializeSwapWidget } from '@skip-go/widget';
-
-initializeSwapWidget();
-```
-
-voila! you can now use the `swap-widget` web-component
-
-The props for the web component are the same as `SwapWidgetProps` and `SwapWidgetProviderProps` except that
-they are sent to the web-component as attributes in kebab-case as strings or stringified objects ie.
-
-```tsx
-interface SwapWidgetProps {
-  colors
-  defaultRoute
-  routeConfig
-```
-
-becomes
-
-```tsx
-<swap-widget
-  class-name="classname"
-  colors='{"primary":"#FF4FFF"}'
-  default-route={JSON.stringify({
-    srcChainID: 'osmosis-1',
-    srcAssetDenom:
-      'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
-  })}
-></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>
-```
+# Skip Go Widget
+
+The `@skip-go/widget` package is an npm package providing a React component for a full swap interface using the [Skip Go API](https://skip.build/).
+
+## Installation
+
+To install the package, run the following command:
+
+```bash
+npm install @skip-go/widget
+```
+
+## React Component usage
+
+import the `SwapWidget` from `'@skip-go/widget'` to render the swap interface:
+
+```tsx
+import { SwapWidget } from '@skip-go/widget';
+
+const SwapPage = () => {
+  return (
+    <div
+      style={{
+        width: '450px',
+        height: '820px',
+      }}
+    >
+      <SwapWidget
+        colors={{
+          primary: '#FF4FFF',
+        }}
+      />
+    </div>
+  );
+};
+```
+
+### SwapWidget props
+
+The `SwapWidget` component accepts the following props:
+
+```tsx
+interface SwapWidgetProps {
+  colors?: {
+    primary?: string; // Custom primary color for the widget. Defaults to `#FF486E`.
+  };
+  defaultRoute?: {
+    // Default route for the widget.
+    amountIn?: number;
+    amountOut?: number;
+    srcChainID?: string;
+    srcAssetDenom?: string;
+    destChainID?: string;
+    destAssetDenom?: string;
+  };
+  routeConfig?: {
+    experimentalFeatures?: ['hyperlane'];
+    allowMultiTx?: boolean;
+    allowUnsafe?: boolean;
+    bridges?: ('IBC' | 'AXELAR' | 'CCTP' | 'HYPERLANE')[];
+    swapVenues?: {
+      name: string;
+      chainID: string;
+    }[];
+  };
+  className?: string;
+  style?: React.CSSProperties;
+  settings?: {
+    customGasAmount?: number; // custom gas amount for validation defaults to 200_000
+    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.
+}
+```
+
+## 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 first call the `initializeSwapWidget` function:
+
+```tsx
+import { initializeSwapWidget } from '@skip-go/widget';
+
+initializeSwapWidget();
+```
+
+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` except that
+they are sent to the web-component as attributes in kebab-case as strings or stringified objects ie.
+
+```tsx
+interface SwapWidgetProps {
+  colors
+  defaultRoute
+  routeConfig
+```
+
+becomes
+
+```tsx
+<swap-widget
+  class-name="classname"
+  colors='{"primary":"#FF4FFF"}'
+  default-route={JSON.stringify({
+    srcChainID: 'osmosis-1',
+    srcAssetDenom:
+      'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
+  })}
+  toaster-props=""
+  endpoint-options=""
+  api-url=""
+></swap-widget>
+```

package/build/hooks/use-delete-injected-styles-from-react-hot-toast.d.ts

@@ -0,0 +1 @@
+export declare const useDeleteInjectedStylesFromReactHotToast: () => void;

package/build/hooks/use-fix-radix-ui-wheel-event.d.ts

@@ -0,0 +1 @@
+export declare const useFixRadixUiWheelEvent: () => void;

package/build/hooks/use-force-client-render.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const useForceClientRender: (reactNode: ReactNode) => ReactNode;

package/build/hooks/use-inject-fonts-to-document-head.d.ts

@@ -0,0 +1 @@
+export declare const useInjectFontsToDocumentHead: () => void;

package/build/hooks/use-inject-style-to-document-head.d.ts

@@ -0,0 +1 @@
+export declare const useInjectStyleToDocumentHead: () => void;

package/build/hooks/use-inject-styles-to-head.d.ts

@@ -0,0 +1 @@
+export declare const useInjectStylesToDocumentHead: () => void;

package/build/index.d.ts

@@ -1,4 +1,3 @@
-import './styles/global.css';
 export { SwapWidgetProvider } from './provider';
 export { SwapWidget, SwapWidgetProps } from './ui';
 export { initializeSwapWidget } from './ui/WebComponent';