diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..f0eb61e --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": false +} diff --git a/src/components/Output.tsx b/src/components/Output.tsx index 6f6ab91..99654ce 100644 --- a/src/components/Output.tsx +++ b/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(""); diff --git a/src/components/RouteDetails/index.tsx b/src/components/RouteDetails/index.tsx index 44ec6d6..5d6d23b 100644 --- a/src/components/RouteDetails/index.tsx +++ b/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 diff --git a/src/components/TokenInput/index.tsx b/src/components/TokenInput/index.tsx index 6c12f16..da8784b 100644 --- a/src/components/TokenInput/index.tsx +++ b/src/components/TokenInput/index.tsx @@ -23,7 +23,7 @@ export const TokenInput = (props: TokenInputProps) => { activeToken, tokens, noTokens = false, - tokenToDisable + tokenToDisable, } = props; return (
diff --git a/src/components/TxModal/SuccessToast.tsx b/src/components/TxModal/SuccessToast.tsx index ec90d19..d44ed57 100644 --- a/src/components/TxModal/SuccessToast.tsx +++ b/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 ( Transaction is complete diff --git a/src/components/TxModal/TxStepDetails.tsx b/src/components/TxModal/TxStepDetails.tsx index 2f0c886..86184fd 100644 --- a/src/components/TxModal/TxStepDetails.tsx +++ b/src/components/TxModal/TxStepDetails.tsx @@ -287,7 +287,7 @@ const TxStep = ({ inProgress = false, forReview = false, bridgeTx = false, - txHash + txHash, }: { label: string; children: ReactNode; diff --git a/src/components/Widget.tsx b/src/components/Widget.tsx index 93106ae..a5e7d78 100644 --- a/src/components/Widget.tsx +++ b/src/components/Widget.tsx @@ -150,7 +150,14 @@ export const Widget = (props: WidgetProps) => { {transitions( (style, item) => - item && + item && ( + + ) )} diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx index 711a924..0745810 100644 --- a/src/components/common/Button.tsx +++ b/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 && } {children} + {isLoading && }{" "} + {children} ); }; diff --git a/src/components/common/ChainSelect.tsx b/src/components/common/ChainSelect.tsx index 1ef9c15..9c5789f 100644 --- a/src/components/common/ChainSelect.tsx +++ b/src/components/common/ChainSelect.tsx @@ -29,7 +29,7 @@ function Option({ return (
@@ -39,7 +39,9 @@ function Option({ className="skt-w h-6 w-6" style={{ borderRadius: `calc(0.3rem * ${borderRadius})` }} /> - {network?.name} + + {network?.name} +
{selected && !onlyOneNetwork && ( diff --git a/src/components/common/InnerCard.tsx b/src/components/common/InnerCard.tsx index ba81451..a4fb90e 100644 --- a/src/components/common/InnerCard.tsx +++ b/src/components/common/InnerCard.tsx @@ -14,7 +14,7 @@ export const InnerCard = ({
{children} diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx index 87a829a..6f3c32b 100644 --- a/src/components/common/Modal.tsx +++ b/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 ( - +
{/* circle */} )} diff --git a/src/consts/customisation.ts b/src/consts/customisation.ts index a048e22..ce40640 100644 --- a/src/consts/customisation.ts +++ b/src/consts/customisation.ts @@ -4,4 +4,4 @@ export const defaultCustomisation: Customize = { width: 360, responsiveWidth: false, borderRadius: 1, -}; \ No newline at end of file +}; diff --git a/src/consts/index.ts b/src/consts/index.ts index 5204ecb..beb1ddc 100644 --- a/src/consts/index.ts +++ b/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...", } diff --git a/src/consts/time.ts b/src/consts/time.ts index 86d84a2..6e15775 100644 --- a/src/consts/time.ts +++ b/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) }; diff --git a/src/hooks/apis.ts b/src/hooks/apis.ts index 44651b7..75ca8dc 100644 --- a/src/hooks/apis.ts +++ b/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, }; }; diff --git a/src/hooks/apis/useRoutes.ts b/src/hooks/apis/useRoutes.ts index c3687b6..41f7195 100644 --- a/src/hooks/apis/useRoutes.ts +++ b/src/hooks/apis/useRoutes.ts @@ -50,7 +50,7 @@ export const useRoutes = ( includeBridges, excludeBridges, singleTxOnly, - defaultSwapSlippage: swapSlippage + defaultSwapSlippage: swapSlippage, } ); return quotes; diff --git a/src/hooks/updateAndRefetch.ts b/src/hooks/updateAndRefetch.ts index 403a963..918da5f 100644 --- a/src/hooks/updateAndRefetch.ts +++ b/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)); } } diff --git a/src/hooks/useCustomSettings.ts b/src/hooks/useCustomSettings.ts index b05b8bd..2557a72 100644 --- a/src/hooks/useCustomSettings.ts +++ b/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) { diff --git a/src/hooks/useGetFees.ts b/src/hooks/useGetFees.ts index 7ae12b4..4ffcf57 100644 --- a/src/hooks/useGetFees.ts +++ b/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(""); const [feesInUsd, setFeesInUsd] = useState(0); diff --git a/src/hooks/useMappedChainData.ts b/src/hooks/useMappedChainData.ts index 4d81f32..6782f6a 100644 --- a/src/hooks/useMappedChainData.ts +++ b/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(undefined); - const supportedNetworks = useSelector((state: any) => state.networks.allNetworks) + const supportedNetworks = useSelector( + (state: any) => state.networks.allNetworks + ); useEffect(() => { if (!supportedNetworks) { setMap(supportedNetworks); diff --git a/src/providers/CustomizeProvider.tsx b/src/providers/CustomizeProvider.tsx index 6764205..fb80f70 100644 --- a/src/providers/CustomizeProvider.tsx +++ b/src/providers/CustomizeProvider.tsx @@ -14,7 +14,8 @@ interface ContextType { export const CustomizeContext = createContext(null); export const CustomizeProvider = ({ children }: ContextProviderProps) => { - const [customization, setCustomization] = useState(defaultCustomisation); + const [customization, setCustomization] = + useState(defaultCustomisation); return ( {children} diff --git a/src/state/amountSlice.ts b/src/state/amountSlice.ts index 504a262..326497c 100644 --- a/src/state/amountSlice.ts +++ b/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; diff --git a/src/state/store.js b/src/state/store.js index 0e19b89..ec2db1f 100644 --- a/src/state/store.js +++ b/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, }, }); diff --git a/src/stories/Test.stories.tsx b/src/stories/Test.stories.tsx index 6a7951c..d369cbf 100644 --- a/src/stories/Test.stories.tsx +++ b/src/stories/Test.stories.tsx @@ -75,7 +75,10 @@ const Template = (args: WidgetProps) => { const _defaultDestNetwork = _destNetworks[0]; return ( -
+

User Address : {userAddress}
@@ -95,8 +98,10 @@ const Template = (args: WidgetProps) => { )}

-
@@ -117,11 +122,11 @@ const Customize = { }; function showAlert(value) { - console.log('showing alert', value); + console.log("showing alert", value); } const UNISWAP_DEFAULT_LIST = "https://gateway.ipfs.io/ipns/tokens.uniswap.org"; -const displayName = Salil +const displayName = Salil; export const Default = Template.bind({}); Default.args = { @@ -140,7 +145,7 @@ Default.args = { // onDestinationNetworkChange: (value) => console.log('Dest Network:', value), // onError: (value) => console.log('Error', value), // onSubmit: (value: transactionDetails) => console.log('Submitted: ', value, value?.txData?.[0]?.chainId), - + // tokenList: MY_LIST, // tokenList: UNISWAP_DEFAULT_LIST, // destNetworks: [10], diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 1a9d913..999dd02 100644 --- a/src/types/index.d.ts +++ b/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 @@ -90,7 +90,7 @@ 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; diff --git a/src/utils/luminance.ts b/src/utils/luminance.ts index 1793ca8..f6fdc30 100644 --- a/src/utils/luminance.ts +++ b/src/utils/luminance.ts @@ -1,4 +1,4 @@ -// Currently this is not used anywhere. +// Currently this is not used anywhere. import { formatRGB } from "."; export const getContrast = function (rgbColor) {