feat: customization

package.json

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

src/components/Input.tsx

@@ -1,6 +1,6 @@
 import { ethers } from "ethers";
 import { useDispatch, useSelector } from "react-redux";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState, useRef } from "react";
 import { Currency, Network, onNetworkChange, onTokenChange } from "../types";
 import { NATIVE_TOKEN_ADDRESS } from "../consts";
 
@@ -96,6 +96,7 @@ export const Input = ({
   const sameChainSwapsEnabled = useSelector(
     (state: any) => state.customSettings.sameChainSwapsEnabled
   );
+  const initialAmount = useSelector((state:any)=> state.customSettings.initialAmount);
 
   function updateNetwork(network: Network) {
     dispatch(setSourceChain(network?.chainId));
@@ -304,15 +305,28 @@ export const Input = ({
     } else formateAndParseAmount(balance);
   }
 
-  // Reset source amount on mount
+  // to set the initialAmount if any. To be executed only on first render
+  const firstRender = useRef(true);
   useEffect(() => {
-    inputAmountFromReduxState && dispatch(setSourceAmount(null));
+    if (initialAmount && sourceToken && firstRender.current) {
+      const truncatedValue = truncateDecimalValue(
+        initialAmount,
+        sourceToken?.decimals
+      );
+      onChangeInput(truncatedValue);
+      firstRender.current = false;
+    } else if (!firstRender.current) {
+      // Reset source amount on mount
+      inputAmountFromReduxState && dispatch(setSourceAmount(null));
+    }
+  }, [initialAmount, sourceToken]);
 
+  useEffect(() => {
     // resetting the source chain on unmount
     // on toggle, the source chain state would retain causing issues in setting token on the first render
     return () => {
       dispatch(setSourceChain(null));
-    }
+    };
   }, []);
 
   return (

src/components/Settings/SortPreference.tsx

@@ -9,10 +9,8 @@ import { SubTitle } from "./SubTitle";
 
 export const SortPreference = () => {
   const dispatch = useDispatch();
-  const sortPrefFromStore = useSelector((state: any) => state.quotes.sortPref);
-  const [_sortPref, _setSortPref] = useState<string>(sortPrefFromStore);
+  const sortPref = useSelector((state: any) => state.quotes.sortPref);
   const [dropdown, openDropdown] = useState<boolean>(false);
-  const [label, setLabel] = useState<string>("");
 
   const dropdownRef = useClickOutside(() => openDropdown(false));
 
@@ -32,15 +30,13 @@ export const SortPreference = () => {
   ];
 
   const handleChange = (item) => {
-    _setSortPref(item.id);
     dispatch(setSortPref(item.id));
-    setLabel(item.label);
     openDropdown(false);
   };
 
-  useEffect(() => {
-    setLabel(sortOptions.filter((x) => x.id === _sortPref)?.[0].label);
-  }, []);
+  function getSortOption(id) {
+    return sortOptions.filter((x) => x.id === id)?.[0];
+  }
 
   return (
     <div className="skt-w skt-w-flex skt-w-items-center skt-w-relative skt-w-z-30 skt-w-justify-between">
@@ -51,7 +47,7 @@ export const SortPreference = () => {
         ref={dropdownRef}
       >
         <Option onClick={() => openDropdown(!dropdown)} active>
-          {label}{" "}
+          {getSortOption(sortPref)?.label}{" "}
           <ChevronDown
             className={`skt-w skt-w-w-4 skt-w-h-4 skt-w-text-widget-secondary skt-w-transition-all ${
               dropdown ? "rotate-180" : ""

src/hooks/useCustomSettings.ts

@@ -1,5 +1,5 @@
 import { WidgetProps } from "../types";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useDispatch } from "react-redux";
 import {
   setCustomDestNetworks,
@@ -14,9 +14,13 @@ import {
   setSingleTxOnly,
   setApiKey,
   setFeeParams,
-  setHideIntegratorFee
+  setHideIntegratorFee,
+  setInitialAmount,
 } from "../state/customSettingsSlice";
-import { setSingleTxOnly as setSingleTxOnlyFromUser } from "../state/quotesSlice";
+import {
+  setSingleTxOnly as setSingleTxOnlyFromUser,
+  setSortPref,
+} from "../state/quotesSlice";
 import { formatRGB } from "../utils";
 
 // To set custom chains, tokens, default values passed as props
@@ -32,12 +36,15 @@ export const useCustomSettings = (props: WidgetProps) => {
     enableSameChainSwaps,
     includeBridges,
     excludeBridges,
+    defaultSortPreference,
     singleTxOnly,
     feeParams,
     API_KEY,
-    hideIntegratorFee
+    hideIntegratorFee,
+    initialAmount
   } = props;
   const dispatch = useDispatch();
+  const firstRender = useRef(true);
 
   useEffect(() => {
     sourceNetworks && dispatch(setCustomSourceNetworks(sourceNetworks));
@@ -53,10 +60,20 @@ export const useCustomSettings = (props: WidgetProps) => {
       excludeBridges?.length > 0 &&
       dispatch(setExludeBridges(excludeBridges));
     dispatch(setSingleTxOnly(singleTxOnly));
+
+    // This code is executed only on first render
+    // This is done so that the values are not updated or reset to default value
+    // due to network or account updates
+    if(firstRender.current){
+      defaultSortPreference && dispatch(setSortPref(defaultSortPreference));
+      initialAmount && dispatch(setInitialAmount(initialAmount))
+
+      firstRender.current = false
+    }
 
     if (feeParams?.feePercent && feeParams?.feeTakerAddress) {
       dispatch(setFeeParams(feeParams));
-      hideIntegratorFee && dispatch(setHideIntegratorFee(hideIntegratorFee))
+      hideIntegratorFee && dispatch(setHideIntegratorFee(hideIntegratorFee));
     }
 
     // if singleTxOnly is set to true in the plugin config,

src/state/customSettingsSlice.ts

@@ -16,6 +16,7 @@ const initialState = {
   apiKey: null,
   feeParams: null,
   hideIntegratorFee: false,
+  initialAmount: null,
 };
 
 const customSettingsSlice = createSlice({
@@ -66,6 +67,9 @@ const customSettingsSlice = createSlice({
     },
     setHideIntegratorFee: (state, action) => {
       state.hideIntegratorFee = action.payload
+    },
+    setInitialAmount: (state, action) => {
+      state.initialAmount = action.payload
     }
   },
 });
@@ -86,7 +90,8 @@ export const {
   setSingleTxOnly,
   setApiKey,
   setFeeParams,
-  setHideIntegratorFee
+  setHideIntegratorFee,
+  setInitialAmount
 } = customSettingsSlice.actions;
 
 // Note - Custom token list is not set here. Check out hooks/useTokenLists.ts

src/types/index.d.ts

@@ -1,16 +1,24 @@
 import { ReactNode } from "react";
 import { ChainId, UserTxType } from "@socket.tech/socket-v2-sdk";
 type supportedBridges =
-  | "polygon-bridge"
   | "hop"
+  | "anyswap"
   | "anyswap-router-v4"
-  | "hyphen"
+  | "anyswap-router-v6"
+  | "polygon-bridge"
   | "arbitrum-bridge"
-  | "connext"
-  | "celer"
+  | "hyphen"
   | "across"
   | "optimism-bridge"
-  | "refuel-bridge";
+  | "celer"
+  | "refuel-bridge"
+  | "stargate"
+  | "connext"
+  | "cctp"
+  | "synapse"
+  | "base-bridge"
+  | "zora-bridge"
+  | "zksync-native";
 
 interface txData {
   hash: string;
@@ -48,45 +56,45 @@ export interface WidgetProps {
   /** Custom Destination Networks */
   destNetworks?: number[];
 
-  /** 
+  /**
    * To override Default Source Network
-   * 
+   *
    * Default source network is Polygon
    */
   defaultSourceNetwork?: number;
 
   /**
    * To override Default Destination Network
-   * 
+   *
    * Default destination network is Ethereum
    */
   defaultDestNetwork?: number;
 
   /**
    * Token List.
-   * 
-   * You can pass the url to the token list or pass the list as JSON, as long as it matches the schema. 
+   *
+   * You can pass the url to the token list or pass the list as JSON, as long as it matches the schema.
    * Token list schema - https://uniswap.org/tokenlist.schema.json
    */
   tokenList?: string | Currency[];
 
   /**
    * To override default source token.
    * Default token is USDC with Native token as a fallback.
-   * 
+   *
    * Pass the string "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" for native token
    */
   defaultSourceToken?: string;
 
-   /**
+  /**
    * To override default destination token.
    * Default token is USDC with Native token as a fallback.
-   * 
+   *
    * Pass the string "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" for native token
    */
   defaultDestToken?: string;
 
-  /** To enable only single tx quotes */ 
+  /** To enable only single tx quotes */
   singleTxOnly?: boolean;
 
   /** Refuel feature allows the users to transfer gas tokens across the chains */
@@ -104,8 +112,14 @@ export interface WidgetProps {
   /** To exclude bridges - bridges passed will be excluded from the original supported list */
   excludeBridges?: supportedBridges[];
 
+  /** To set the default sort preference. Set to output by default */
+  defaultSortPreference?: "time" | "output";
+
+  /** To set the default amount. To set it on initial render */
+  initialAmount?: string;
+
   // Widget Handlers
-  
+
   /** An integration function called when the route is completed successfully.
    * @param {transactionDetails} data
    */
@@ -140,7 +154,7 @@ export interface WidgetProps {
 
   /**
    * An intergration function called when the transaction (including same chain swap) 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
    * @param {transactionDetails} data
    */