diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..70c7df3 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,20 @@ +########## +# If adding to this file, think about updating .eslintignore too +########## + +# General # +########## +build/ +coverage/ +dist/ +vars/ +vendor/ +.cache/ +public/ +CHANGELOG.md +generated/ +.yarn +.github/workflows +diagnostics/**.md +*.tfstate +**/.gen diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..2996082 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 100, + "singleQuote": true, + "semi": true +} diff --git a/src/App.tsx b/src/App.tsx index ac22d34..318a407 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,8 @@ -import { Header } from "@/components/header"; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs"; -import { SwapLiquidityHub } from "./trade/liquidity-hub/liquidity-hub-swap"; -import { Settings } from "./trade/settings"; -import { SwapTwap, SwapLimit } from "./trade/twap/twap"; +import { Header } from '@/components/header'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from './components/ui/tabs'; +import { SwapLiquidityHub } from './trade/liquidity-hub/liquidity-hub-swap'; +import { Settings } from './trade/settings'; +import { SwapTwap, SwapLimit } from './trade/twap/twap'; export function App() { return ( diff --git a/src/store.ts b/src/store.ts index a663c4b..aaf20b8 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,5 +1,5 @@ -import { create } from "zustand"; -import { persist } from "zustand/middleware"; +import { create } from 'zustand'; +import { persist } from 'zustand/middleware'; interface AppStore { slippage: number; @@ -12,7 +12,7 @@ export const useAppState = create( setSlippage: (slippage: number) => set({ slippage }), }), { - name: "main-store", + name: 'main-store', } ) ); diff --git a/src/trade/liquidity-hub/context.tsx b/src/trade/liquidity-hub/context.tsx index adde981..019810b 100644 --- a/src/trade/liquidity-hub/context.tsx +++ b/src/trade/liquidity-hub/context.tsx @@ -1,31 +1,19 @@ -import { useDefaultTokens } from "@/lib"; -import { Token } from "@/types"; -import { - constructSDK, - LiquidityHubSDK, - Quote, -} from "@orbs-network/liquidity-hub-sdk"; -import { OptimalRate } from "@paraswap/sdk"; -import { - useContext, - ReactNode, - useReducer, - useCallback, - useMemo, - createContext, - useEffect, -} from "react"; -import { useAccount } from "wagmi"; -import { useToRawAmount } from "../hooks"; +import { useDefaultTokens } from '@/lib'; +import { Token } from '@/types'; +import { constructSDK, LiquidityHubSDK, Quote } from '@orbs-network/liquidity-hub-sdk'; +import { OptimalRate } from '@paraswap/sdk'; +import { ReactNode, useReducer, useCallback, useMemo, createContext, useEffect } from 'react'; +import { useAccount } from 'wagmi'; +import { useToRawAmount } from '../hooks'; const initialState: State = { inToken: null, outToken: null, - inputAmount: "", + inputAmount: '', acceptedQuote: undefined, acceptedOptimalRate: undefined, liquidityHubDisabled: false, - forceLiquidityHub: true, + forceLiquidityHub: false, confirmationModalOpen: false, proceedWithLiquidityHub: false, }; @@ -40,16 +28,16 @@ interface State { signature?: string; confirmationModalOpen: boolean; proceedWithLiquidityHub: boolean; - acceptedOptimalRate?: OptimalRate + acceptedOptimalRate?: OptimalRate; } -type Action = { type: "UPDATE"; payload: Partial } | { type: "RESET" }; +type Action = { type: 'UPDATE'; payload: Partial } | { type: 'RESET' }; const reducer = (state: State, action: Action): State => { switch (action.type) { - case "UPDATE": + case 'UPDATE': return { ...state, ...action.payload }; - case "RESET": + case 'RESET': return initialState; default: return state; @@ -64,62 +52,52 @@ interface ContextType { parsedInputAmount?: string; } -const Context = createContext({} as ContextType); -// eslint-disable-next-line react-refresh/only-export-components -export const useLiquidityHubSwapContext = () => { - return useContext(Context); -}; +export const LiquidityHubContext = createContext({} as ContextType); -export const LiquidityHubSwapProvider = ({ - children, -}: { - children: ReactNode; -}) => { +export const LiquidityHubSwapProvider = ({ children }: { children: ReactNode }) => { const [_state, dispatch] = useReducer(reducer, initialState); const defaultTokens = useDefaultTokens(); const chainId = useAccount().chainId; - const state = useMemo(() => { return { ..._state, - inToken: _state.inToken || defaultTokens?.inToken || null, + inToken: _state.inToken || defaultTokens?.inToken || null, outToken: _state.outToken || defaultTokens?.outToken || null, }; }, [_state, defaultTokens]); - - const parsedInputAmount = useToRawAmount( - state.inputAmount, - state.inToken?.decimals - ); + const parsedInputAmount = useToRawAmount(state.inputAmount, state.inToken?.decimals); const updateState = useCallback( (payload: Partial) => { - dispatch({ type: "UPDATE", payload }); + dispatch({ type: 'UPDATE', payload }); }, [dispatch] ); const resetState = useCallback(() => { - dispatch({ type: "RESET" }); + dispatch({ type: 'RESET' }); }, [dispatch]); useEffect(() => { - if(chainId) { + if (chainId) { resetState(); } - }, [chainId, resetState]) - + }, [chainId, resetState]); + const sdk = useMemo(() => constructSDK({ partner: 'widget', chainId }), [chainId]); - const sdk = useMemo( - () => constructSDK({ partner: "widget", chainId }), - [chainId] - ); + useEffect(() => { + const params = new URLSearchParams(window.location.search); + const lh = params.get('lh'); + if (lh) { + updateState({ forceLiquidityHub: true }); + } + }, [updateState]); return ( - {children} - + ); }; diff --git a/src/trade/liquidity-hub/hooks.ts b/src/trade/liquidity-hub/hooks.ts index b103734..46abba8 100644 --- a/src/trade/liquidity-hub/hooks.ts +++ b/src/trade/liquidity-hub/hooks.ts @@ -11,7 +11,7 @@ import { permit2Address } from "@orbs-network/liquidity-hub-sdk"; import { useMemo, useCallback } from "react"; import { Address } from "viem"; import { useAccount } from "wagmi"; -import { useLiquidityHubSwapContext } from "./context"; +import { useLiquidityHubSwapContext } from "./useLiquidityHubSwapContext"; import { QUOTE_REFETCH_INTERVAL } from "./consts"; @@ -59,7 +59,7 @@ const useNetwork = () => { const useNativeOrWrapped = (address?: string) => { const callback = useNativeOrWrappedAddressCallback(); - return useMemo(() => callback(address), [address]); + return useMemo(() => callback(address), [address, callback]); }; const useNativeOrWrappedAddressCallback = () => { diff --git a/src/trade/liquidity-hub/liquidity-hub-confirmation-dialog.tsx b/src/trade/liquidity-hub/liquidity-hub-confirmation-dialog.tsx index 9e68a0d..02a3e62 100644 --- a/src/trade/liquidity-hub/liquidity-hub-confirmation-dialog.tsx +++ b/src/trade/liquidity-hub/liquidity-hub-confirmation-dialog.tsx @@ -13,7 +13,7 @@ import { useUsdAmount, } from "@/lib"; import { useAccount } from "wagmi"; -import { useLiquidityHubSwapContext } from "./context"; +import { useLiquidityHubSwapContext } from "./useLiquidityHubSwapContext"; import { useLiquidityHubApproval, useOptimalRate, @@ -23,7 +23,6 @@ import { SwapConfirmationDialog, useSwapProgress, } from "../swap-confirmation-dialog"; -import { _TypedDataEncoder } from "@ethersproject/hash"; import { useToExactAmount } from "../hooks"; import { useLiquidityHubSwapCallback } from "./useLiquidityHubSwapCallback"; import { useParaswapSwapCallback } from "./useParaswapSwapCallback"; @@ -100,12 +99,7 @@ export function LiquidityHubConfirmationDialog() { } else { swapWithLiquidityHub(); } - }, [ - isLiquidityHubTrade, - swapWithLiquidityHub, - swapWithParaswap, - updateProgressState, - ]); + }, [isLiquidityHubTrade, swapWithLiquidityHub, swapWithParaswap]); const onClose = useCallback(() => { updateState({ @@ -121,13 +115,7 @@ export function LiquidityHubConfirmationDialog() { setTimeout(() => { resetProgressState(); }, 5_00); - }, [ - progressState.swapStatus, - progressState.currentStep, - resetProgressState, - updateState, - refetchBalances, - ]); + }, [progressState.swapStatus, resetProgressState, updateState, refetchBalances]); const usd = useUSD(); const outAmount = useOutAmount(); diff --git a/src/trade/liquidity-hub/liquidity-hub-swap.tsx b/src/trade/liquidity-hub/liquidity-hub-swap.tsx index 1da668f..8367396 100644 --- a/src/trade/liquidity-hub/liquidity-hub-swap.tsx +++ b/src/trade/liquidity-hub/liquidity-hub-swap.tsx @@ -1,23 +1,19 @@ -import { TokenCard } from "@/components/tokens/token-card"; -import { SwitchButton } from "@/components/ui/switch-button"; -import { useCallback, useMemo } from "react"; -import { useAccount } from "wagmi"; -import { Button } from "@/components/ui/button"; -import { _TypedDataEncoder } from "@ethersproject/hash"; -import { Token } from "@/types"; -import { ErrorCodes } from "@/lib"; -import "../style.css"; -import { useConnectModal } from "@rainbow-me/rainbowkit"; -import { - LiquidityHubSwapProvider, - useLiquidityHubSwapContext, -} from "./context"; -import { useToExactAmount } from "../hooks"; -import { LiquidityHubConfirmationDialog } from "./liquidity-hub-confirmation-dialog"; -import { useLiquidityHubInputError, useOptimalRate } from "./hooks"; -import { SwapDetails } from "./swap-details"; -import { useLiquidityHubQuote } from "./useLiquidityHubQuote"; -import { useIsLiquidityHubTrade } from "./useIsLiquidityHubTrade"; +import { TokenCard } from '@/components/tokens/token-card'; +import { SwitchButton } from '@/components/ui/switch-button'; +import { useCallback, useMemo } from 'react'; +import { useAccount } from 'wagmi'; +import { Button } from '@/components/ui/button'; +import { Token } from '@/types'; +import { ErrorCodes } from '@/lib'; +import '../style.css'; +import { useConnectModal } from '@rainbow-me/rainbowkit'; +import { LiquidityHubSwapProvider } from './context'; +import { useToExactAmount } from '../hooks'; +import { LiquidityHubConfirmationDialog } from './liquidity-hub-confirmation-dialog'; +import { useLiquidityHubInputError, useOptimalRate } from './hooks'; +import { SwapDetails } from './swap-details'; +import { useIsLiquidityHubTrade } from './useIsLiquidityHubTrade'; +import { useLiquidityHubSwapContext } from './useLiquidityHubSwapContext'; function SwapPanel() { return ( @@ -44,7 +40,7 @@ const Switch = () => { updateState({ inToken: outToken, outToken: inToken, - inputAmount: "", + inputAmount: '', }); }, [inToken, outToken, updateState]); @@ -58,8 +54,7 @@ const Switch = () => { const ShowConfirmationButton = () => { const account = useAccount().address; const openConnectModal = useConnectModal().openConnectModal; - const { data: liquidityHubQuote } = useLiquidityHubQuote(); - const { data: optimalRate, isLoading: optimalRateLoading } = useOptimalRate(); + const { data: optimalRate } = useOptimalRate(); const inputError = useLiquidityHubInputError(); const proceedWithLiquidityHub = useIsLiquidityHubTrade(); @@ -75,40 +70,32 @@ const ShowConfirmationButton = () => { const { text, onClick } = useMemo(() => { if (!account) { return { - text: "Connect wallet", + text: 'Connect wallet', onClick: openConnectModal, }; } if (inputError === ErrorCodes.InsufficientBalance) { return { - text: "Insufficient balance", + text: 'Insufficient balance', }; } if (inputError === ErrorCodes.EnterAmount) { return { - text: "Enter amount", + text: 'Enter amount', }; } if (!optimalRate && inputAmount) { return { - text: "Fetching rate...", + text: 'Fetching rate...', }; } return { - text: "Swap", + text: 'Swap', onClick: onOpenConfirmation, }; - }, [ - inputError, - inputAmount, - liquidityHubQuote, - optimalRate, - optimalRateLoading, - openConnectModal, - onOpenConfirmation, - ]); + }, [account, inputError, optimalRate, inputAmount, onOpenConfirmation, openConnectModal]); return (