@skip-go/widget 2.3.8 → 2.4.1-alpha.0

package/README.md

@@ -1,196 +1,5 @@
 # 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/).
+We document everything about Skip Go Widget in [docs.skip.build/go/widget](https://docs.skip.build/go/widget)
 
-### Polyfilling Node core modules
-
-If you encounter an error like "Buffer is not defined" when importing and using @skip-go/widget, it may be necessary to polyfill Node.js modules because Skip Go Widget relies on them.
-
-Here are some polyfill plugins for common environments:
-
-- [Webpack](https://www.npmjs.com/package/node-polyfill-webpack-plugin),
-- [Rollup](https://www.npmjs.com/package/rollup-plugin-polyfill-node),
-- [Vite](https://www.npmjs.com/package/vite-plugin-node-polyfills),
-- [ESBuild](https://www.npmjs.com/package/esbuild-plugins-node-modules-polyfill)
-
-### Wrap the widget with a fixed container
-
-It is recommended to wrap the widget with a container element that has a fixed size. This helps to prevent layout shifting as the widget uses shadow-dom (which currently needs to be rendered client-side)
-
-## 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 {
-  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;
-    }[];
-  };
-  /**
-   * Filter chains and assets in selection
-   *
-   * Record<chainID, assetDenoms>
-   * if assetDenoms is undefined, all assets are allowed
-   * @example
-   * ```ts
-   * {
-   * source: {
-   *   'noble-1': undefined,
-   * },
-   * destination: {
-   *   'cosmoshub-4': [
-   *     'uatom',
-   *     'ibc/2181AAB0218EAC24BC9F86BD1364FBBFA3E6E3FCC25E88E3E68C15DC6E752D86',
-   *   ],
-   *   'agoric-3': [
-   *     'ibc/FE98AAD68F02F03565E9FA39A5E627946699B2B07115889ED812D8BA639576A9',
-   *   ],
-   *   'osmosis-1': undefined,
-   * }
-   * ```
-   */
-  filter?: {
-    source?: Record<string, string[] | undefined>;
-    destination?: Record<string, string[] | undefined>;
-  };
-  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.
-  theme?: {
-    backgroundColor: string; // background color
-    textColor: string; // text color
-    borderColor: string; // border color
-    brandColor: string; // color used for confirmation buttons
-    highlightColor: string; // color used when hovering over buttons, and in select chain/asset dropdown
-  };
-  persistSwapWidgetState?: boolean; // whether or not swap widget state should persist after refresh. Defaults to true
-}
-````
-
-# Experimental features (still in development)
-
-## 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 all props
-are passed to the web-component via attributes in kebab-case as strings or stringified objects ie.
-
-```tsx
-<div
-  style={{
-    width: '450px',
-    height: '820px',
-  }}
->
-  <SwapWidget
-    className="test-class"
-    onlyTestnet={true}
-    colors={{
-      primary: '#FF4FFF',
-    }}
-    defaultRoute={{
-      srcChainID: 'osmosis-1',
-      srcAssetDenom:
-        'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
-    }}
-  />
-</div>
-```
-
-becomes
-
-```tsx
-<div style="width:450px;height:820px;">
-  <swap-widget
-    class-name="test-class"
-    onlyTestnet="true"
-    colors='{"primary":"#FF4FFF"}'
-    default-route={JSON.stringify({
-      srcChainID: 'osmosis-1',
-      srcAssetDenom:
-        'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
-    })}
-  ></swap-widget>
-</div>
-```
+[Here](https://github.com/skip-mev/skip-go/blob/main/docs/widget/) is where all of the markdown lives

package/build/hooks/use-assets.d.ts

@@ -1,4 +1,3 @@
-import { AssetsRequest } from '@skip-go/client';
-export declare function useAssets(options?: AssetsRequest): import("@tanstack/react-query/build/legacy/types").UseQueryResult<{
-    [k: string]: import("@skip-go/client/dist/shared-CvoSvr3u").a[];
-}, Error>;
+import { Asset, AssetsRequest } from '@skip-go/client';
+import { UseQueryResult } from '@tanstack/react-query';
+export declare function useAssets(options?: AssetsRequest): UseQueryResult<Record<string, Asset[]>>;

package/build/hooks/use-auto-set-address.d.ts

@@ -1,4 +1,5 @@
 import { Chain } from '@skip-go/client';
+import { UseQueryResult } from '@tanstack/react-query';
 import { ChainAddresses, SetChainAddressesParam } from '../ui/PreviewRoute/types';
 export declare const useAutoSetAddress: ({ chain, chainID, index, enabled, signRequired, chainAddresses, setChainAddresses, }: {
     chain?: Chain | undefined;
@@ -8,4 +9,4 @@ export declare const useAutoSetAddress: ({ chain, chainID, index, enabled, signR
     signRequired?: boolean | undefined;
     chainAddresses: ChainAddresses;
     setChainAddresses: (v: SetChainAddressesParam) => void;
-}) => import("@tanstack/react-query/build/legacy/types").UseQueryResult<null, Error>;
+}) => UseQueryResult;

package/build/hooks/use-balances-by-chain.d.ts

@@ -1,4 +1,5 @@
-import { Asset, SkipRouter } from '@skip-go/client';
+import { Asset, SkipClient } from '@skip-go/client';
+import { UseQueryResult } from '@tanstack/react-query';
 import { PublicClient } from 'viem';
 import { Chain } from './use-chains';
 interface Args {
@@ -8,8 +9,8 @@ interface Args {
     enabled?: boolean;
     solanaRpcUrl?: string;
 }
-export declare function useBalancesByChain({ address, chain, assets, enabled, }: Args): import("@tanstack/react-query/build/legacy/types").UseQueryResult<Record<string, string> | undefined, Error>;
+export declare function useBalancesByChain({ address, chain, assets, enabled, }: Args): UseQueryResult<Record<string, string> | undefined>;
 export declare function getBalancesByChain(rpcURL: string, address: string, chainID: string, assets: Asset[]): Promise<Record<string, string>>;
-export declare function getEvmChainBalances(skipClient: SkipRouter, publicClient: PublicClient, address: string, chainID: string): Promise<Record<string, string>>;
+export declare function getEvmChainBalances(skipClient: SkipClient, publicClient: PublicClient, address: string, chainID: string): Promise<Record<string, string>>;
 export declare const getSvmChainBalances: (rpcUrl: string, address: string, chainID: string, assets: Asset[]) => Promise<Record<string, string>>;
 export {};

package/build/hooks/use-bridges.d.ts

@@ -1,7 +1,8 @@
 import { Bridge } from '@skip-go/client';
+import { UseQueryResult } from '@tanstack/react-query';
 export type UseBridgesQueryArgs<T = Bridge[]> = {
     enabled?: boolean;
     select?: (arr?: Bridge[]) => T;
 };
-export declare function useBridges<T = Bridge[]>(args?: UseBridgesQueryArgs<T>): import("@tanstack/react-query/build/legacy/types").UseQueryResult<T, Error>;
-export declare function useBridgeByID(bridgeID?: Bridge['id']): import("@tanstack/react-query/build/legacy/types").UseQueryResult<Bridge | undefined, Error>;
+export declare function useBridges<T = Bridge[]>(args?: UseBridgesQueryArgs<T>): UseQueryResult<T>;
+export declare function useBridgeByID(bridgeID?: Bridge['id']): UseQueryResult<Bridge | undefined>;

package/build/hooks/use-broadcasted-txs.d.ts

@@ -1,4 +1,5 @@
 import { ChainTransaction, TransferState, StatusState } from '@skip-go/client';
+import { UseQueryResult } from '@tanstack/react-query';
 interface TransferSequence {
     srcChainID: string;
     destChainID: string;
@@ -8,6 +9,12 @@ interface TransferSequence {
     };
     state: TransferState;
 }
+interface TxsStatus {
+    isSuccess: boolean;
+    isSettled: boolean;
+    transferSequence: TransferSequence[];
+    states: StatusState[];
+}
 export declare const useBroadcastedTxsStatus: ({ txs, txsRequired, enabled, }: {
     txsRequired: number;
     txs: {
@@ -15,10 +22,5 @@ export declare const useBroadcastedTxsStatus: ({ txs, txsRequired, enabled, }: {
         txHash: string;
     }[] | undefined;
     enabled?: boolean | undefined;
-}) => import("@tanstack/react-query/build/legacy/types").UseQueryResult<{
-    isSuccess: boolean;
-    isSettled: boolean;
-    transferSequence: TransferSequence[];
-    states: StatusState[];
-} | undefined, Error>;
+}) => UseQueryResult<TxsStatus>;
 export {};

package/build/hooks/use-chains.d.ts

@@ -1,4 +1,5 @@
 import { Chain as SkipChain } from '@skip-go/client';
+import { UseQueryResult } from '@tanstack/react-query';
 export type Chain = SkipChain & {
     prettyName: string;
 };
@@ -6,5 +7,5 @@ export type UseChainsQueryArgs<T = Chain[]> = {
     enabled?: boolean;
     select?: (arr?: Chain[]) => T;
 };
-export declare function useChains<T = Chain[]>(args?: UseChainsQueryArgs<T>): import("@tanstack/react-query/build/legacy/types").UseQueryResult<T, Error>;
-export declare function useChainByID(chainID?: string): import("@tanstack/react-query/build/legacy/types").UseQueryResult<Chain | undefined, Error>;
+export declare function useChains<T = Chain[]>(args?: UseChainsQueryArgs<T>): UseQueryResult<T>;
+export declare function useChainByID(chainID?: string): UseQueryResult<Chain | undefined>;

package/build/hooks/use-route.d.ts

@@ -1,4 +1,5 @@
-import { BridgeType, ExperimentalFeature, SmartSwapOptions, SwapVenueRequest } from '@skip-go/client';
+import { BridgeType, ExperimentalFeature, RouteResponse, SmartSwapOptions, SwapVenueRequest } from '@skip-go/client';
+import { UseQueryResult } from '@tanstack/react-query';
 export interface RouteConfig {
     experimentalFeatures?: ExperimentalFeature[];
     allowMultiTx?: boolean;
@@ -16,5 +17,5 @@ interface UseRouteArgs extends RouteConfig {
     destinationAssetChainID?: string;
     enabled?: boolean;
 }
-export declare function useRoute({ direction, amount, sourceAsset, sourceAssetChainID, destinationAsset, destinationAssetChainID, enabled, swapVenues, bridges, experimentalFeatures, allowMultiTx, allowUnsafe, smartSwapOptions, }: UseRouteArgs): import("@tanstack/react-query/build/legacy/types").UseQueryResult<import("@skip-go/client/dist/shared-CvoSvr3u").R | undefined, Error>;
+export declare function useRoute({ direction, amount, sourceAsset, sourceAssetChainID, destinationAsset, destinationAssetChainID, enabled, swapVenues, bridges, experimentalFeatures, allowMultiTx, allowUnsafe, smartSwapOptions, }: UseRouteArgs): UseQueryResult<RouteResponse | undefined>;
 export {};

package/build/hooks/use-skip-client.d.ts

@@ -1,4 +1,4 @@
-export declare function useSkipClient(): import("@skip-go/client").SkipRouter;
+export declare function useSkipClient(): import("@skip-go/client").SkipClient;
 export declare function useSkipConfig(): {
     apiURL: string | undefined;
     endpointOptions: {

package/build/hooks/use-swap-widget.d.ts

@@ -31,7 +31,7 @@ export declare function useSwapWidget(persistSwapWidgetState?: boolean): {
     onSourceAssetChange: (asset: Asset) => void;
     onSourceChainChange: (chain: Chain, injectAsset?: Asset) => Promise<void>;
     priceImpactThresholdReached: boolean;
-    route: import("@skip-go/client/dist/shared-CvoSvr3u").R | undefined;
+    route: import("@skip-go/client/dist/shared-CpfDn0H3").R | undefined;
     routeError: string;
     routeLoading: boolean;
     routeWarningMessage: string | undefined;

package/build/hooks/use-usd-value.d.ts

@@ -1,8 +1,9 @@
+import { UseQueryResult } from '@tanstack/react-query';
 export type Args = {
     chainId: string;
     denom: string;
     coingeckoID?: string;
     value: string;
 };
-export declare function useUsdValue(args: Args): import("@tanstack/react-query/build/legacy/types").UseQueryResult<number, Error>;
-export declare function useUsdDiffValue([args1, args2]: [Args, Args]): import("@tanstack/react-query/build/legacy/types").UseQueryResult<number, Error>;
+export declare function useUsdValue(args: Args): UseQueryResult<number>;
+export declare function useUsdDiffValue([args1, args2]: [Args, Args]): UseQueryResult<number, Error>;