feat: fee router (#83)

* feat: taking feeParams as widget props and passing it to quote call

* fix: types

* v1.2.5

Author: salil-naik

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@socket.tech/plugin",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",

src/components/RouteDetails/index.tsx

@@ -44,6 +44,7 @@ export const RouteDetails = () => {
   const excludeBridges = useSelector(
     (state: any) => state.customSettings.excludeBridges
   );
+  const feeParams = useSelector((state: any) => state.customSettings.feeParams);
   const isEnoughBalance = useSelector(
     (state: any) => state.amount.isEnoughBalance
   );
@@ -63,7 +64,9 @@ export const RouteDetails = () => {
     includeBridges,
     excludeBridges,
     singleTxOnly,
-    swapSlippage
+    swapSlippage,
+    feeParams?.feeTakerAddress,
+    feeParams?.feePercent
   );
 
   // Boolean variable to fill all condition before the api call is made to fetch quotes.

src/hooks/apis/useRoutes.ts

@@ -15,7 +15,9 @@ export const useRoutes = (
   includeBridges,
   excludeBridges,
   singleTxOnly,
-  swapSlippage
+  swapSlippage,
+  feeTakerAddress,
+  feePercent
 ) => {
   const isTxModalOpen = useSelector((state: any) => state.modals.isTxModalOpen);
   const shouldFetch =
@@ -36,7 +38,9 @@ export const useRoutes = (
     includeBridges,
     excludeBridges,
     singleTxOnly,
-    swapSlippage
+    swapSlippage,
+    _feeTakerAddress,
+    _feePercent,
   ) {
     const { routes: quotes } = await socket.getAllQuotes(
       {
@@ -51,6 +55,8 @@ export const useRoutes = (
         excludeBridges,
         singleTxOnly,
         defaultSwapSlippage: swapSlippage,
+        feeTakerAddress: _feeTakerAddress,
+        feePercent: _feePercent
       }
     );
     return quotes;
@@ -69,6 +75,8 @@ export const useRoutes = (
           excludeBridges,
           singleTxOnly,
           swapSlippage,
+          feeTakerAddress,
+          feePercent,
           "quotes",
         ]
       : null,

src/hooks/useCustomSettings.ts

@@ -13,6 +13,7 @@ import {
   setExludeBridges,
   setSingleTxOnly,
   setApiKey,
+  setFeeParams,
 } from "../state/customSettingsSlice";
 import { setSingleTxOnly as setSingleTxOnlyFromUser } from "../state/quotesSlice";
 import { formatRGB } from "../utils";
@@ -31,6 +32,7 @@ export const useCustomSettings = (props: WidgetProps) => {
     includeBridges,
     excludeBridges,
     singleTxOnly,
+    feeParams,
     API_KEY,
   } = props;
   const dispatch = useDispatch();
@@ -50,6 +52,10 @@ export const useCustomSettings = (props: WidgetProps) => {
       dispatch(setExludeBridges(excludeBridges));
     dispatch(setSingleTxOnly(singleTxOnly));
 
+    if (feeParams?.feePercent && feeParams?.feeTakerAddress) {
+      dispatch(setFeeParams(feeParams));
+    }
+
     // if singleTxOnly is set to true in the plugin config,
     // additionally set the in-plugin singleTxOnly value to true
     if (singleTxOnly) {

src/state/customSettingsSlice.ts

@@ -14,6 +14,7 @@ const initialState = {
   excludeBridges: null,
   singleTxOnly: false,
   apiKey: null,
+  feeParams: null,
 };
 
 const customSettingsSlice = createSlice({
@@ -58,6 +59,9 @@ const customSettingsSlice = createSlice({
     },
     setApiKey: (state, action) => {
       state.apiKey = action.payload
+    },
+    setFeeParams: (state, action) => {
+      state.feeParams = action.payload
     }
   },
 });
@@ -76,7 +80,8 @@ export const {
   setIncludeBridges,
   setExludeBridges,
   setSingleTxOnly,
-  setApiKey
+  setApiKey,
+  setFeeParams
 } = customSettingsSlice.actions;
 
 // Note - Custom token list is not set here. Check out hooks/useTokenLists.ts

src/stories/Test.stories.tsx

@@ -107,6 +107,7 @@ const Template = (args: WidgetProps) => {
           provider={provider}
           // defaultDestNetwork={_defaultDestNetwork}
           // destNetworks={_destNetworks}
+          // feeParams={{feePercent: 2.5, feeTakerAddress: ''}}
         />
       )}
     </div>

src/types/index.d.ts

@@ -21,7 +21,7 @@ export interface transactionDetails {
   destinationAmount: string;
   sourceToken: Currency; // 0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee denotes native token
   destinationToken: Currency;
-  txData: txData[] // tx hashes will be passed here
+  txData: txData[]; // tx hashes will be passed here
   bridgeName?: string; // will be passed only in case of cross chain swaps
   estimatedServiceTime?: string; // (in ms) will be passed only in case of cross chain swaps
   dexName?: string; // will be passed only in case of same chain swaps
@@ -30,6 +30,11 @@ export interface transactionDetails {
 export type onNetworkChange = (network: Network) => void;
 export type onTokenChange = (token: Currency) => void;
 
+export interface FeeParams {
+  feePercent: number;
+  feeTakerAddress: string;
+}
+
 export interface WidgetProps {
   API_KEY: string;
   provider?: any;
@@ -93,10 +98,21 @@ export interface WidgetProps {
   // These messages are usually more human readable. Hence on our frontend we check for e.data.message || e.message
   onError?: (error: any) => void;
 
-  // Will be called when the cross-chain swap or same chain swap transaction is submitted. 
+  // Will be called when the cross-chain swap or same chain swap transaction is submitted.
   // This excludes the source and/or destination swap transactions in case of cross-chain swaps and only the bridging transaction will be considered
   onSubmit?: (data: transactionDetails) => void;
 
+  /**
+   * Fee Params to collect fees
+   *
+   * feePercent
+   * The % of fee to be cut from the source input token amount.
+   * NOTE : Fee Percent can be up to three decimal places and cannot be more than 5%
+   *
+   * feeTakerAddress: the address where the fee will be sent to in the transaction
+   */
+  feeParams?: FeeParams;
+
   locale?: string;
   title?: ReactNode | string;
   customize?: Customize;