add prettier and format existing code

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false
+}

src/components/Output.tsx

@@ -153,10 +153,14 @@ export const Output = ({
 
   // when the default dest n/w is changed
   useEffect(() => {
-    if(!firstNetworkRender && defaultDestNetwork){
-      updateNetwork(supportedNetworks?.find((x:Network) => x.chainId === defaultDestNetwork))
+    if (!firstNetworkRender && defaultDestNetwork) {
+      updateNetwork(
+        supportedNetworks?.find(
+          (x: Network) => x.chainId === defaultDestNetwork
+        )
+      );
     }
-  }, [supportedNetworks, defaultDestNetwork])
+  }, [supportedNetworks, defaultDestNetwork]);
 
   // For Input & tokens
   const [outputAmount, updateOutputAmount] = useState<string>("");

src/components/RouteDetails/index.tsx

@@ -29,7 +29,9 @@ import { SortOptions } from "@socket.tech/socket-v2-sdk";
 export const RouteDetails = () => {
   const dispatch = useDispatch();
 
-  const sourceChainId = useSelector((state: any) => state.networks.sourceChainId)
+  const sourceChainId = useSelector(
+    (state: any) => state.networks.sourceChainId
+  );
   const sourceToken = useSelector((state: any) => state.tokens.sourceToken);
   const destToken = useSelector((state: any) => state.tokens.destToken);
   const sortPref = useSelector((state: any) => state.quotes.sortPref);
@@ -98,7 +100,8 @@ export const RouteDetails = () => {
   useEffect(() => {
     if (data) {
       // Reversing the order in case of sort-by-time because the API returns the list in descendind order of service time
-      const bestRoute = sortPref === SortOptions.Time ? data.reverse()[0] : data[0];
+      const bestRoute =
+        sortPref === SortOptions.Time ? data.reverse()[0] : data[0];
       dispatch(setBestRoute(bestRoute));
 
       // Check if there is sufficient native token for refuel

src/components/TokenInput/index.tsx

@@ -23,7 +23,7 @@ export const TokenInput = (props: TokenInputProps) => {
     activeToken,
     tokens,
     noTokens = false,
-    tokenToDisable
+    tokenToDisable,
   } = props;
   return (
     <div className="skt-w flex items-center justify-between mt-2.5 overflow-hidden pb-[1.125rem]">

src/components/TxModal/SuccessToast.tsx

@@ -6,12 +6,18 @@ import { animated, useSpring } from "@react-spring/web";
 export const SuccessToast = () => {
   const customSettings = useContext(CustomizeContext);
   const { borderRadius } = customSettings.customization;
-  const animationProps = useSpring({ from: { bottom: -100, opacity: 0 }, to: { bottom: 12, opacity: 1 }});
+  const animationProps = useSpring({
+    from: { bottom: -100, opacity: 0 },
+    to: { bottom: 12, opacity: 1 },
+  });
 
   return (
     <animated.div
       className="skt-w bg-widget-accent text-widget-onAccent p-4 flex items-center absolute left-3 right-3"
-      style={{ borderRadius: `calc(0.625rem * ${borderRadius})`, ...animationProps }}
+      style={{
+        borderRadius: `calc(0.625rem * ${borderRadius})`,
+        ...animationProps,
+      }}
     >
       <CheckCircle className="skt-w mr-3 text-widget-onAccent" /> Transaction is
       complete

src/components/TxModal/TxStepDetails.tsx

@@ -287,7 +287,7 @@ const TxStep = ({
   inProgress = false,
   forReview = false,
   bridgeTx = false,
-  txHash
+  txHash,
 }: {
   label: string;
   children: ReactNode;

src/components/Widget.tsx

@@ -150,7 +150,14 @@ export const Widget = (props: WidgetProps) => {
       <RouteDetails />
       {transitions(
         (style, item) =>
-          item && <TxModal style={style} onBridge={props?.onBridgeSuccess} onError={props?.onError} onSubmit={props?.onSubmit}/>
+          item && (
+            <TxModal
+              style={style}
+              onBridge={props?.onBridgeSuccess}
+              onError={props?.onError}
+              onSubmit={props?.onSubmit}
+            />
+          )
       )}
       <SettingsModal />
       <ErrorModal />

src/components/common/Button.tsx

@@ -35,12 +35,11 @@ export const Button = (props: ButtonProps) => {
       disabled:font-normal 
       disabled:border-opacity-50 
       border 
-      ${
-        classNames || ""
-      }`}
+      ${classNames || ""}`}
       style={{ borderRadius: `calc(0.625rem * ${borderRadius})` }}
     >
-      {isLoading && <Spinner size={4} />} <span className="ml-2">{children}</span>
+      {isLoading && <Spinner size={4} />}{" "}
+      <span className="ml-2">{children}</span>
     </button>
   );
 };

src/components/common/ChainSelect.tsx

@@ -29,7 +29,7 @@ function Option({
   return (
     <div
       className={`skt-w flex w-28 items-center cursor-pointer flex-shrink-0 ${
-        selected ? "" : "p-1.5 hover:bg-widget-secondary hover:bg-opacity-80" 
+        selected ? "" : "p-1.5 hover:bg-widget-secondary hover:bg-opacity-80"
       }`}
       onClick={onClick}
     >
@@ -39,7 +39,9 @@ function Option({
           className="skt-w h-6 w-6"
           style={{ borderRadius: `calc(0.3rem * ${borderRadius})` }}
         />
-        <span className="skt-w text-sm text-widget-primary mx-1">{network?.name}</span>
+        <span className="skt-w text-sm text-widget-primary mx-1">
+          {network?.name}
+        </span>
       </div>
       {selected && !onlyOneNetwork && (
         <ChevronDown className="skt-w text-widget-secondary w-4 h-4" />

src/components/common/InnerCard.tsx

@@ -14,7 +14,7 @@ export const InnerCard = ({
     <div
       className={`skt-w bg-widget-secondary p-3 mt-3 ${classNames || ""}`}
       style={{
-        borderRadius: `calc(0.75rem * ${borderRadius})`
+        borderRadius: `calc(0.75rem * ${borderRadius})`,
       }}
     >
       {children}

src/components/common/Modal.tsx

@@ -17,12 +17,15 @@ export const Modal = ({
   children,
   disableClose = false,
   classNames,
-  style
+  style,
 }: ModalProps) => {
   const customSettings = useContext(CustomizeContext);
   const { borderRadius } = customSettings.customization;
   return (
-    <animated.div style={style} className="skt-w p-1 w-full h-full absolute top-0 left-0 z-50 bg-black bg-opacity-10">
+    <animated.div
+      style={style}
+      className="skt-w p-1 w-full h-full absolute top-0 left-0 z-50 bg-black bg-opacity-10"
+    >
       <div
         className={`skt-w w-full h-full bg-widget-primary flex flex-col overflow-hidden ${
           classNames ?? ""

src/components/common/Stepper.tsx

@@ -30,7 +30,9 @@ const Step = (props: {
   const { active, completed, lastItem } = props;
   return (
     <div
-      className={`skt-w flex flex-row items-center ${!lastItem ? "flex-grow" : ""}`}
+      className={`skt-w flex flex-row items-center ${
+        !lastItem ? "flex-grow" : ""
+      }`}
     >
       {/* circle */}
       <span
@@ -48,7 +50,9 @@ const Step = (props: {
       {!lastItem && (
         <span
           className={`skt-w h-px flex-grow ${
-            completed ? "bg-widget-accent" : "bg-widget-secondary-text bg-opacity-40"
+            completed
+              ? "bg-widget-accent"
+              : "bg-widget-secondary-text bg-opacity-40"
           }`}
         ></span>
       )}

src/consts/customisation.ts

@@ -4,4 +4,4 @@ export const defaultCustomisation: Customize = {
   width: 360,
   responsiveWidth: false,
   borderRadius: 1,
-};
+};

src/consts/index.ts

@@ -42,29 +42,29 @@ export const BRIDGE_DISPLAY_NAMES = {
   [constants.bridges.OptimismBridge]: "Optimism",
 };
 
-// Status of the prepare API. 
+// Status of the prepare API.
 export enum PrepareTxStatus {
-  COMPLETED = 'completed',
-  PENDING = 'pending',
-  READY = 'ready',
+  COMPLETED = "completed",
+  PENDING = "pending",
+  READY = "ready",
 }
 
 export enum QuoteStatus {
-  FETCHING_QUOTE = 'Fetching best quote...',
-  NO_ROUTES_AVAILABLE = 'No routes available',
-  ENTER_AMOUNT = 'Enter amount',
+  FETCHING_QUOTE = "Fetching best quote...",
+  NO_ROUTES_AVAILABLE = "No routes available",
+  ENTER_AMOUNT = "Enter amount",
 }
 
 export enum ButtonTexts {
   NOT_ENOUGH_NATIVE_BALANCE = "Native token not enough",
-  NOT_ENOUGH_BALANCE = 'Not enough balance',
-  REVIEW_QUOTE = 'Review Quote',
-  CHECKING_APPROVAL = 'Checking approval',
-  APPROVING = 'Approving',
-  APPROVE = 'Approve',
-  APPROVAL_DONE = 'Approved',
-  BRIDGE_IN_PROGRESS = 'Bridging in progress',
-  INITIATING = 'Initiating...',
-  IN_PROGRESS = 'In progress',
-  REFETCHING = 'Refetching...'
+  NOT_ENOUGH_BALANCE = "Not enough balance",
+  REVIEW_QUOTE = "Review Quote",
+  CHECKING_APPROVAL = "Checking approval",
+  APPROVING = "Approving",
+  APPROVE = "Approve",
+  APPROVAL_DONE = "Approved",
+  BRIDGE_IN_PROGRESS = "Bridging in progress",
+  INITIATING = "Initiating...",
+  IN_PROGRESS = "In progress",
+  REFETCHING = "Refetching...",
 }

src/consts/time.ts

@@ -2,5 +2,5 @@
 export const time = {
   QUOTES_REFRESH: 60,
   ACTIVE_ROUTES_REFRESH: 30,
-  USER_BALANCES_REFRESH: 120 // for all the tokens (to display the balance in the token list)
+  USER_BALANCES_REFRESH: 120, // for all the tokens (to display the balance in the token list)
 };

src/hooks/apis.ts

@@ -81,13 +81,13 @@ export const useBalance = (
 
   const { data, error, isValidating, mutate } = useSWR(
     shouldFetch ? [tokenAddress, chainId, userAddress, "token-balance"] : null,
-    fetchBalance,
+    fetchBalance
   );
 
   return {
     data: data?.result,
     isBalanceLoading: userAddress && !error && !data,
-    mutate
+    mutate,
   };
 };
 

src/hooks/apis/useRoutes.ts

@@ -50,7 +50,7 @@ export const useRoutes = (
         includeBridges,
         excludeBridges,
         singleTxOnly,
-        defaultSwapSlippage: swapSlippage
+        defaultSwapSlippage: swapSlippage,
       }
     );
     return quotes;

src/hooks/updateAndRefetch.ts

@@ -26,7 +26,9 @@ export const updateAndRefetch = (
     (state: any) => state.modals.isSettingsModalOpen
   );
   const selectedRoute = useSelector((state: any) => state.routes.selectedRoute);
-  const currentActiveRoute = useSelector((state: any) => state.modals.activeRoute); // running in a loop
+  const currentActiveRoute = useSelector(
+    (state: any) => state.modals.activeRoute
+  ); // running in a loop
 
   // passing the new slippage to the database: build-next-tx api
   build = useNextTx(
@@ -54,7 +56,10 @@ export const updateAndRefetch = (
     );
 
     // Get current swap tx (before the slippage is changed)
-    const currentSwapTx = getSwapTx(selectedRoute?.route ?? currentActiveRoute, currentTxIndex);
+    const currentSwapTx = getSwapTx(
+      selectedRoute?.route ?? currentActiveRoute,
+      currentTxIndex
+    );
 
     // shouldDispatch should be true only if the new swap slippage and current swap slippage are different
     const shouldDispatch =
@@ -64,13 +69,13 @@ export const updateAndRefetch = (
 
     // Setting the selectedRoute/activeRoute (depending on which one's is in use) with the new route data.
     if (shouldDispatch) {
-      if(!!currentActiveRoute){
+      if (!!currentActiveRoute) {
         dispatch(setActiveRoute(updatedActiveRoute?.data?.result));
-      } else if (selectedRoute){
+      } else if (selectedRoute) {
         const _update = {
           ...selectedRoute,
           route: updatedActiveRoute?.data?.result,
-        }
+        };
         dispatch(setSelectedRoute(_update));
       }
     }

src/hooks/useCustomSettings.ts

@@ -47,7 +47,7 @@ export const useCustomSettings = (props: WidgetProps) => {
       excludeBridges?.length > 0 &&
       dispatch(setExludeBridges(excludeBridges));
     dispatch(setSingleTxOnly(singleTxOnly));
-    
+
     // if singleTxOnly is set to true in the plugin config,
     // additionally set the in-plugin singleTxOnly value to true
     if (singleTxOnly) {

src/hooks/useGetFees.ts

@@ -7,7 +7,7 @@ export const useGetFees = (
   gasLimit: string,
   chainId: number,
   decimals: number,
-  route: any,
+  route: any
 ) => {
   const [feesInToken, setFeesInToken] = useState<string>("");
   const [feesInUsd, setFeesInUsd] = useState<number>(0);

src/hooks/useMappedChainData.ts

@@ -4,7 +4,9 @@ import { useSelector } from "react-redux";
 // Set the necessary data for all chains.
 export default function useMappedChainData() {
   const [map, setMap] = useState<any>(undefined);
-  const supportedNetworks = useSelector((state: any) => state.networks.allNetworks)
+  const supportedNetworks = useSelector(
+    (state: any) => state.networks.allNetworks
+  );
   useEffect(() => {
     if (!supportedNetworks) {
       setMap(supportedNetworks);

src/providers/CustomizeProvider.tsx

@@ -14,7 +14,8 @@ interface ContextType {
 export const CustomizeContext = createContext<ContextType | null>(null);
 
 export const CustomizeProvider = ({ children }: ContextProviderProps) => {
-  const [customization, setCustomization] = useState<Customize>(defaultCustomisation);
+  const [customization, setCustomization] =
+    useState<Customize>(defaultCustomisation);
   return (
     <CustomizeContext.Provider value={{ customization, setCustomization }}>
       {children}

src/state/amountSlice.ts

@@ -23,4 +23,5 @@ const amountSlice = createSlice({
 });
 
 export default amountSlice.reducer;
-export const { setSourceAmount, setDestAmount, setIsEnoughBalance } = amountSlice.actions;
+export const { setSourceAmount, setDestAmount, setIsEnoughBalance } =
+  amountSlice.actions;

src/state/store.js

@@ -5,8 +5,8 @@ import tokensReducer from "./tokensSlice";
 import amountReducer from "./amountSlice";
 import quotesReducer from "./quotesSlice";
 import selectedRouteReducer from "./selectedRouteSlice";
-import txDetailsReducer from "./txDetails"
-import modalsReducer from "./modals"
+import txDetailsReducer from "./txDetails";
+import modalsReducer from "./modals";
 
 const store = configureStore({
   reducer: {
@@ -17,7 +17,7 @@ const store = configureStore({
     routes: selectedRouteReducer,
     txDetails: txDetailsReducer,
     modals: modalsReducer,
-    customSettings: customSettingsReducer
+    customSettings: customSettingsReducer,
   },
 });