@scallop-io/scallop-swap-sdk-react 1.0.0

package/src/contexts/sdkContext.ts

@@ -0,0 +1,8 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { createContext } from 'react';
+
+import type { SdkStore } from '../store.js';
+
+export const SdkConfigContext = createContext<SdkStore | null>(null);

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useGetSwapRoutes, type SwapRoutesResult } from './useGetSwapRoutes';
+export { useBuildSwapTransaction } from './useBuildSwapTransaction';
+export { useAggregatorContext } from './useAggregatorContext';
+export { useAggregatorFetchingStatus } from './useAggregatorFetchingStatus';

package/src/hooks/useActiveDexesChanged.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useSdkConfigStore } from './useSdkConfigStore';
+import { useAggregatorContext } from './useAggregatorContext';
+
+export const useActiveDexesChanged = () => {
+  const setActiveDexes = useSdkConfigStore((v) => v.setActiveDexes);
+  const aggregator = useAggregatorContext().aggregator;
+
+  useEffect(() => {
+    aggregator.events.on('poolStatusChanged', ({ name, pool, enabled }) => {
+      setActiveDexes(name, pool, enabled);
+    });
+  }, [aggregator]);
+};

package/src/hooks/useAggregatorContext.ts

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { ScallopSwapSdkContext } from '../providers/scallop-swap-sdk-provider';
+
+export const useAggregatorContext = () => {
+  const ctx = useContext(ScallopSwapSdkContext);
+
+  if (!ctx) {
+    throw new Error(
+      'Could not find ScallopSwapSdkContext. Ensure that you have set up the ScallopSwapSdkProvider'
+    );
+  }
+
+  return ctx;
+};

package/src/hooks/useAggregatorFetchingStatus.ts

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import {
+  QueryKey,
+  useQuery,
+  useQueryClient,
+  UseQueryOptions,
+} from '@tanstack/react-query';
+import { useAggregatorContext } from './useAggregatorContext';
+import { queryKeys } from 'src/constants/queryKeys';
+
+export const useAggregatorFetchingStatus = (
+  options?: Omit<
+    UseQueryOptions<
+      Record<string, boolean>,
+      Error,
+      Record<string, boolean>,
+      QueryKey
+    >,
+    'queryFn' | 'queryKey'
+  >
+) => {
+  const { aggregator } = useAggregatorContext();
+  const queryClient = useQueryClient();
+  const queryKey = queryKeys.api.getAggregatorFetchStatus();
+
+  useEffect(() => {
+    const onStart = ({ name }: { name: string }) => {
+      queryClient.setQueryData<Record<string, boolean>>(queryKey, (prev) => ({
+        ...(prev ?? aggregator.fetchingStatus),
+        [name]: true,
+      }));
+    };
+
+    const onEnd = ({ name }: { name: string }) => {
+      queryClient.setQueryData<Record<string, boolean>>(queryKey, (prev) => ({
+        ...(prev ?? aggregator.fetchingStatus),
+        [name]: false,
+      }));
+    };
+
+    aggregator.events.on('aggregatorFetchStart', onStart);
+    aggregator.events.on('aggregatorFetchEnd', onEnd);
+
+    return () => {
+      aggregator.events.off('aggregatorFetchStart', onStart);
+      aggregator.events.off('aggregatorFetchEnd', onEnd);
+    };
+  }, [aggregator, queryClient]);
+
+  return useQuery({
+    ...options,
+    queryKey,
+    staleTime: Infinity,
+    queryFn: () => aggregator.fetchingStatus,
+  });
+};

package/src/hooks/useAggregatorQuery.ts

@@ -0,0 +1,91 @@
+import {
+  QueryKey,
+  useQuery,
+  UseQueryOptions,
+  UseQueryResult,
+} from '@tanstack/react-query';
+import { Aggregator } from '@scallop-io/scallop-swap-sdk';
+import { useAggregatorContext } from './useAggregatorContext';
+import { queryKeys } from 'src/constants/queryKeys';
+
+type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<T>;
+type AggregatorMethodName = {
+  [K in keyof Aggregator]: Aggregator[K] extends (
+    ...args: any[]
+  ) => Promise<any>
+    ? K
+    : never;
+}[keyof Aggregator];
+
+export type AggregatorMethods = {
+  [K in AggregatorMethodName]: {
+    name: K;
+    result: Awaited<ReturnType<Aggregator[K]>>;
+    params: Parameters<Aggregator[K]>;
+  };
+};
+
+type UseAggregatorQueryOptions<
+  T extends keyof AggregatorMethods,
+  TData,
+> = PartialBy<
+  Omit<
+    UseQueryOptions<AggregatorMethods[T]['result'], Error, TData, QueryKey>,
+    'queryFn'
+  >,
+  'queryKey'
+>;
+
+const callAggregatorMethod = <T extends AggregatorMethodName>(
+  aggregator: Aggregator,
+  method: T,
+  params: AggregatorMethods[T]['params']
+): Promise<AggregatorMethods[T]['result']> => {
+  const fn = aggregator[method] as (
+    ...args: AggregatorMethods[T]['params']
+  ) => Promise<AggregatorMethods[T]['result']>;
+  return fn(...params);
+};
+
+export function useAggregatorQuery<
+  T extends keyof AggregatorMethods,
+  TData = AggregatorMethods[T]['result'],
+>(
+  ...args: AggregatorMethods[T]['params'] extends []
+    ? [
+        method: T,
+        params?: AggregatorMethods[T]['params'],
+        options?: UseAggregatorQueryOptions<T, TData>,
+      ]
+    : [
+        method: T,
+        params: AggregatorMethods[T]['params'],
+        options?: UseAggregatorQueryOptions<T, TData>,
+      ]
+): UseQueryResult<TData, Error> {
+  const [method, params, { queryKey = [], ...options } = {}] = args as [
+    method: T,
+    params?: AggregatorMethods[T]['params'],
+    options?: UseAggregatorQueryOptions<T, TData>,
+  ];
+
+  const aggregatorContext = useAggregatorContext();
+
+  return useQuery({
+    ...options,
+    queryKey: [
+      ...queryKeys.sdk.aggregatorQuery({
+        method,
+        params,
+      }),
+      ...queryKey,
+    ],
+    queryFn: () =>
+      callAggregatorMethod(
+        aggregatorContext.aggregator,
+        method,
+        // if some methods take no args, params will be [] for them
+        (params ?? []) as AggregatorMethods[T]['params']
+      ),
+  });
+}

package/src/hooks/useBuildSwapTransaction.ts

@@ -0,0 +1,58 @@
+import {
+  Transaction,
+  TransactionObjectArgument,
+} from '@mysten/sui/transactions';
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { FetchRouteResult } from '@scallop-io/scallop-swap-sdk';
+import { useAggregatorContext } from './useAggregatorContext';
+
+type UseBuildSwapTransactionMutationOptions = Omit<
+  UseMutationOptions<
+    {
+      coinOutType: string;
+      tx: Transaction;
+      coinOut?: TransactionObjectArgument;
+    },
+    Error,
+    {
+      route: FetchRouteResult<any>;
+      options?: {
+        txExtensionParams?: {
+          initTx: Transaction;
+          coinIn: TransactionObjectArgument;
+        };
+        mergeResult?: boolean;
+        slippage?: number;
+      };
+    }
+  >,
+  'mutationFn'
+>;
+
+export const useBuildSwapTransaction = ({
+  mutationKey,
+  ...mutationOptions
+}: UseBuildSwapTransactionMutationOptions = {}) => {
+  const aggregatorContext = useAggregatorContext();
+  return useMutation({
+    mutationKey: mutationKey ?? [
+      'buildSwapTransaction',
+      aggregatorContext.client.network,
+    ],
+    mutationFn: async ({ route, options = {} }) => {
+      const { txExtensionParams, mergeResult, slippage } = options;
+      if (mergeResult === false) {
+        return aggregatorContext.aggregator.buildRouteTransaction(route, {
+          txExtensionParams,
+          mergeResult: false,
+          slippage,
+        });
+      }
+      return aggregatorContext.aggregator.buildRouteTransaction(route, {
+        txExtensionParams,
+        slippage,
+      });
+    },
+    ...mutationOptions,
+  });
+};

package/src/hooks/useGetSwapRoutes.ts

@@ -0,0 +1,87 @@
+import {
+  QueryKey,
+  useQuery,
+  useQueryClient,
+  UseQueryOptions,
+} from '@tanstack/react-query';
+import { Aggregator, FetchRouteResult } from '@scallop-io/scallop-swap-sdk';
+import { useAggregatorContext } from './useAggregatorContext';
+import { queryKeys } from 'src/constants/queryKeys';
+
+export type SwapRoutesResult = Awaited<ReturnType<Aggregator['fetchRoutes']>>;
+
+export function sortAndInsert(
+  old: SwapRoutesResult | undefined,
+  route: FetchRouteResult<any>
+): SwapRoutesResult {
+  // Remove existing route from the same aggregator, if any
+  const routes = (old?.routes ?? []).filter(
+    (r) => r.formattedResult.name !== route.formattedResult.name
+  );
+
+  // Find insertion point to maintain descending order by coinOut amount
+  const insertIndex = routes.findIndex(
+    (r) =>
+      route.formattedResult.coinOut.amount >= r.formattedResult.coinOut.amount
+  );
+
+  if (insertIndex === -1) {
+    routes.push(route);
+  } else {
+    routes.splice(insertIndex, 0, route);
+  }
+
+  return {
+    routes,
+    errors: old?.errors ?? [],
+  };
+}
+
+export const useGetSwapRoutes = (
+  {
+    coinInType,
+    coinOutType,
+    swapAmount,
+  }: {
+    coinInType: string;
+    coinOutType: string;
+    swapAmount: string;
+  },
+  options?: Omit<
+    UseQueryOptions<SwapRoutesResult, Error, SwapRoutesResult, QueryKey>,
+    'queryFn' | 'queryKey'
+  >
+) => {
+  const { aggregator } = useAggregatorContext();
+  const queryClient = useQueryClient();
+
+  const queryKey = queryKeys.api.getSwapRoutes({
+    coinInType,
+    coinOutType,
+    swapAmount,
+  });
+
+  return useQuery({
+    ...options,
+    queryKey,
+    queryFn: () =>
+      aggregator.fetchRoutes(
+        {
+          coinInType,
+          coinOutType,
+          swapAmount: BigInt(swapAmount),
+        },
+        {
+          onRouteFound: (route: FetchRouteResult<any>) => {
+            queryClient.setQueryData(
+              queryKey,
+              (old: SwapRoutesResult | undefined) => sortAndInsert(old, route)
+            );
+          },
+          onError: (error) => {
+            console.error('Error fetching routes:', error);
+          },
+        }
+      ),
+  });
+};

package/src/hooks/useLoadConfig.ts

@@ -0,0 +1,44 @@
+import { useAggregatorContext } from './useAggregatorContext';
+import { useSdkConfigStore } from './useSdkConfigStore';
+import { useEffect } from 'react';
+
+export const useLoadConfig = () => {
+  const activeDexes = useSdkConfigStore((state) => state.activeDexes);
+  const slippage = useSdkConfigStore((state) => state.slippage);
+  const aggregator = useAggregatorContext().aggregator;
+  const setDefaultActiveDexes = useSdkConfigStore(
+    (state) => state.setDefaultActiveDexes
+  );
+
+  // Handle dexes
+  useEffect(() => {
+    if (Object.keys(activeDexes).length === 0) {
+      const defaultDexes = aggregator.aggregators.reduce(
+        (acc, curr) => {
+          acc[curr.name] = curr.pools.reduce(
+            (acc, curr) => {
+              acc[curr] = true;
+              return acc;
+            },
+            {} as Record<string, boolean>
+          );
+          return acc;
+        },
+        {} as Record<string, Record<string, boolean>>
+      );
+
+      setDefaultActiveDexes(defaultDexes);
+    } else {
+      Object.entries(activeDexes).forEach(([name, dexPools]) => {
+        const namedAggregator = aggregator.getAggregator(name as string);
+        if (!namedAggregator) return;
+        namedAggregator.poolsMap = new Map(Object.entries(dexPools));
+      });
+    }
+  }, [aggregator]);
+
+  // Handle slippage
+  useEffect(() => {
+    aggregator.setSlippage(slippage);
+  }, [aggregator]);
+};

package/src/hooks/useSdkConfigStore.ts

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { SdkConfigContext } from 'src/contexts/sdkContext';
+import { StoreState } from 'src/store';
+import { useStore } from 'zustand';
+
+export function useSdkConfigStore<T>(selector: (state: StoreState) => T): T {
+  const store = useContext(SdkConfigContext);
+  if (!store) {
+    throw new Error(
+      'Could not find SdkConfigContext. Ensure that you have set up the SdkConfigProvider.'
+    );
+  }
+  return useStore(store, selector);
+}

package/src/hooks/useSlippageChanged.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useAggregatorContext } from './useAggregatorContext';
+import { useSdkConfigStore } from './useSdkConfigStore';
+
+export const useSlippageChanged = () => {
+  const aggregator = useAggregatorContext().aggregator;
+  const setSlippage = useSdkConfigStore((v) => v.setSlippage);
+
+  useEffect(() => {
+    aggregator.events.on('aggregatorSlippageChanged', ({ slippageInBps }) => {
+      setSlippage(slippageInBps);
+    });
+  }, [aggregator]);
+};

package/src/hooks/useSwapSlippage.ts

@@ -0,0 +1,21 @@
+import { useCallback, useMemo } from 'react';
+import { useAggregatorContext } from './useAggregatorContext';
+
+export const useSwapSlippage = () => {
+  const { aggregator } = useAggregatorContext();
+
+  const setSlippage = useCallback(
+    (slippageInBps: number) => {
+      aggregator.setSlippage(slippageInBps);
+    },
+    [aggregator]
+  );
+
+  return useMemo(
+    () => ({
+      slippage: aggregator.slippage,
+      setSlippage,
+    }),
+    [aggregator.slippage, setSlippage]
+  );
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './hooks';
+export * from './providers';
+export * from './types';
+export { queryKeys } from './constants/queryKeys';

package/src/providers/index.ts

@@ -0,0 +1,2 @@
+export { ScallopSwapSdkProvider } from './scallop-swap-sdk-provider';
+export { SdkConfigProvider } from './sdk-config';

package/src/providers/scallop-swap-sdk-provider/index.tsx

@@ -0,0 +1,74 @@
+import { createContext, useEffect, useMemo } from 'react';
+import {
+  ScallopSwapSdkProviderContext,
+  ScallopSwapSdkProviderProps,
+} from './types';
+import {
+  Aggregator,
+  AftermathSwap,
+  CetusSwap,
+  FlowXSwap,
+  _7kSwap,
+} from '@scallop-io/scallop-swap-sdk';
+import type { FC, PropsWithChildren } from 'react';
+import { SdkConfigProvider } from '../sdk-config';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+export const ScallopSwapSdkContext =
+  createContext<ScallopSwapSdkProviderContext | null>(null);
+
+export const ScallopSwapSdkProvider: FC<
+  PropsWithChildren<ScallopSwapSdkProviderProps>
+> = ({
+  children,
+  client,
+  walletAddress,
+  aggregator,
+  queryClient,
+}: PropsWithChildren<ScallopSwapSdkProviderProps>) => {
+  const _aggregator = useMemo(() => {
+    return (
+      aggregator ??
+      new Aggregator({
+        client,
+        walletAddress,
+      })
+    );
+  }, [aggregator, client, walletAddress]);
+
+  useEffect(() => {
+    // Only initialize default aggregators when one wasn't provided by the caller
+    if (aggregator) return;
+
+    const params = {
+      walletAddress: _aggregator.walletAddress,
+      client: _aggregator.client,
+    };
+
+    _aggregator.setSlippage(10); // 0.1%
+    _aggregator.addAggregator([
+      new CetusSwap(params),
+      new AftermathSwap(params),
+      new FlowXSwap(params),
+      new _7kSwap(params),
+    ]);
+  }, [_aggregator, aggregator]);
+
+  const _queryClient = useMemo(
+    () => queryClient ?? new QueryClient(),
+    [queryClient]
+  );
+
+  const ctx = useMemo<ScallopSwapSdkProviderContext>(
+    () => ({ aggregator: _aggregator, client: client }),
+    [_aggregator, client]
+  );
+
+  return (
+    <ScallopSwapSdkContext.Provider value={ctx}>
+      <QueryClientProvider client={_queryClient}>
+        <SdkConfigProvider>{children}</SdkConfigProvider>
+      </QueryClientProvider>
+    </ScallopSwapSdkContext.Provider>
+  );
+};

package/src/providers/scallop-swap-sdk-provider/types.ts

@@ -0,0 +1,16 @@
+// import { SuiClient } from '@mysten/sui/client';
+import { SuiClient } from '@mysten/sui/client';
+import { Aggregator } from '@scallop-io/scallop-swap-sdk';
+import { QueryClient } from '@tanstack/query-core';
+
+export type ScallopSwapSdkProviderContext = {
+  aggregator: Aggregator;
+  client: SuiClient;
+};
+
+export type ScallopSwapSdkProviderProps = {
+  client: SuiClient;
+  walletAddress: string;
+  aggregator?: Aggregator;
+  queryClient?: QueryClient;
+};

package/src/providers/sdk-config/index.tsx

@@ -0,0 +1,36 @@
+import { useRef, type FC, type PropsWithChildren } from 'react';
+import { SdkProps } from './types';
+import { SdkConfigContext } from 'src/contexts/sdkContext';
+import { createSdkStore } from 'src/store';
+import { DEFAULT_STORAGE, STORAGE_KEY } from 'src/constants/defaults';
+import { createInMemoryStore } from 'src/utils/storage';
+import { useActiveDexesChanged } from 'src/hooks/useActiveDexesChanged';
+import { useLoadConfig } from 'src/hooks/useLoadConfig';
+import { useSlippageChanged } from 'src/hooks/useSlippageChanged';
+
+export const SdkConfigProvider: FC<PropsWithChildren<SdkProps>> = ({
+  storage = DEFAULT_STORAGE,
+  storageKey = STORAGE_KEY,
+  children,
+}) => {
+  const storeRef = useRef(
+    createSdkStore({
+      storage: storage || createInMemoryStore(),
+      storageKey,
+    })
+  );
+
+  return (
+    <SdkConfigContext.Provider value={storeRef.current}>
+      <SdkDataManager>{children}</SdkDataManager>
+    </SdkConfigContext.Provider>
+  );
+};
+
+export const SdkDataManager: FC<PropsWithChildren<{}>> = ({ children }) => {
+  useLoadConfig();
+  useSlippageChanged();
+  useActiveDexesChanged();
+
+  return children;
+};

package/src/providers/sdk-config/types.ts

@@ -0,0 +1,7 @@
+import { StateStorage } from 'zustand/middleware';
+
+export type SdkProps = {
+  storage?: StateStorage | null;
+  storageKey?: string;
+};
+export type SdkDataManagerProps = {};

package/src/store.ts

@@ -0,0 +1,61 @@
+import { createStore } from 'zustand';
+import { createJSONStorage, persist, StateStorage } from 'zustand/middleware';
+import { DEFAULT_STORAGE } from './constants/defaults';
+
+type StoreActions = {
+  setActiveAggregatorNames: (
+    activeAggregatorNames: Record<string, boolean>
+  ) => void;
+  setSlippage: (slippage: number) => void;
+  setActiveDexes: (name: string, pool: string, enabled: boolean) => void;
+  setDefaultActiveDexes: (
+    defaultDexes: Record<string, Record<string, boolean>>
+  ) => void;
+};
+
+export type StoreState = {
+  activeAggregatorNames: Record<string, boolean>;
+  slippage: number;
+  activeDexes: Record<string, Record<string, boolean>>;
+} & StoreActions;
+
+type StorageConfig = {
+  storage: StateStorage;
+  storageKey: string;
+};
+
+export const createSdkStore = ({ storageKey }: StorageConfig) => {
+  return createStore<StoreState>()(
+    persist(
+      (set, get) => ({
+        activeAggregatorNames: {},
+        slippage: 30, // Default to 30 bps (0.3%)
+        activeDexes: {},
+        setDefaultActiveDexes: (
+          defaultDexes: Record<string, Record<string, boolean>>
+        ) => {
+          set({ activeDexes: defaultDexes });
+        },
+        setActiveAggregatorNames: (
+          activeAggregatorNames: Record<string, boolean>
+        ) => {
+          set({ activeAggregatorNames });
+        },
+        setSlippage: (slippage: number) => {
+          set({ slippage });
+        },
+        setActiveDexes: (name: string, pool: string, enabled: boolean) => {
+          const newActiveDexes = { ...get().activeDexes };
+          newActiveDexes[name][pool] = enabled;
+          set({ activeDexes: newActiveDexes });
+        },
+      }),
+      {
+        name: storageKey,
+        storage: createJSONStorage(() => DEFAULT_STORAGE),
+      }
+    )
+  );
+};
+
+export type SdkStore = ReturnType<typeof createSdkStore>;

package/src/types.ts

@@ -0,0 +1,21 @@
+export type {
+  FetchRouteResult,
+  FormattedRouteResult,
+} from '@scallop-io/scallop-swap-sdk';
+
+export namespace QueryKeys {
+  export namespace API {
+    export type GetAggregatorFetchStatus = {};
+    export type GetSwapRoutes = {
+      coinInType: string;
+      coinOutType: string;
+      swapAmount?: string;
+    };
+  }
+  export namespace SDK {
+    export type AggregatorQuery = {
+      method: string;
+      params: any;
+    };
+  }
+}

package/src/utils/storage.ts

@@ -0,0 +1,16 @@
+import type { StateStorage } from 'zustand/middleware';
+
+export const createInMemoryStore = (): StateStorage => {
+  const store = new Map();
+  return {
+    getItem(key: string) {
+      return store.get(key);
+    },
+    setItem(key: string, value: string) {
+      store.set(key, value);
+    },
+    removeItem(key: string) {
+      store.delete(key);
+    },
+  };
+};