From 203c571bc549a0d45e27efc358c0aa25c07a51a7 Mon Sep 17 00:00:00 2001 From: tjs Date: Fri, 18 Nov 2022 14:11:06 -0500 Subject: [PATCH] use jupiter api and hooks --- apis/coingecko.ts | 7 +- components/MangoProvider.tsx | 24 +- components/TokenList.tsx | 30 +- components/account/ActionTokenItem.tsx | 11 +- components/modals/BorrowModal.tsx | 9 +- components/modals/DepositModal.tsx | 9 +- components/modals/RepayModal.tsx | 11 +- components/modals/WithdrawModal.tsx | 9 +- components/shared/BalancesTable.tsx | 11 +- components/stats/SpotMarketsTable.tsx | 24 +- components/stats/TokenStats.tsx | 11 +- components/swap/JupiterRouteInfo.tsx | 77 +-- components/swap/LeverageSlider.tsx | 14 +- components/swap/RoutesModal.tsx | 17 +- components/swap/SwapForm.tsx | 114 ++-- components/swap/SwapFormTokenList.tsx | 32 +- components/swap/SwapHistoryTable.tsx | 18 +- components/swap/SwapPage.tsx | 10 +- components/swap/SwapTokenChart.tsx | 50 +- components/swap/TokenSelect.tsx | 11 +- components/swap/useJupiter.ts | 116 ---- components/swap/useJupiterRoutes.ts | 81 +++ components/swap/useJupiterSwapData.ts | 33 + components/trade/AdvancedMarketHeader.tsx | 7 +- components/trade/AdvancedTradeForm.tsx | 15 +- components/trade/MarketLogos.tsx | 13 +- components/trade/PerpSlider.tsx | 4 +- components/trade/SpotSlider.tsx | 1 + components/trade/UnsettledTrades.tsx | 1 - hooks/useCoingecko.ts | 49 ++ hooks/useJupiterMints.ts | 51 ++ ...orageState.tsx => useLocalStorageState.ts} | 0 ...useMangoAccount.tsx => useMangoAccount.ts} | 0 hooks/useMangoGroup.ts | 10 + .../{useOraclePrice.tsx => useOraclePrice.ts} | 0 hooks/{useSolBalance.tsx => useSolBalance.ts} | 0 ...lances.tsx => useUnsettledSpotBalances.ts} | 0 package.json | 3 +- pages/token/[token].tsx | 45 +- store/mangoStore.ts | 86 +-- types/jupiter.ts | 130 +++- utils/constants.ts | 3 +- yarn.lock | 638 +----------------- 43 files changed, 645 insertions(+), 1140 deletions(-) delete mode 100644 components/swap/useJupiter.ts create mode 100644 components/swap/useJupiterRoutes.ts create mode 100644 components/swap/useJupiterSwapData.ts create mode 100644 hooks/useCoingecko.ts create mode 100644 hooks/useJupiterMints.ts rename hooks/{useLocalStorageState.tsx => useLocalStorageState.ts} (100%) rename hooks/{useMangoAccount.tsx => useMangoAccount.ts} (100%) create mode 100644 hooks/useMangoGroup.ts rename hooks/{useOraclePrice.tsx => useOraclePrice.ts} (100%) rename hooks/{useSolBalance.tsx => useSolBalance.ts} (100%) rename hooks/{useUnsettledSpotBalances.tsx => useUnsettledSpotBalances.ts} (100%) diff --git a/apis/coingecko.ts b/apis/coingecko.ts index 6821a62b..f1a59fd3 100644 --- a/apis/coingecko.ts +++ b/apis/coingecko.ts @@ -1,8 +1,11 @@ export const fetchChartData = async ( - baseTokenId: string, - quoteTokenId: string, + baseTokenId: string | undefined, + quoteTokenId: string | undefined, daysToShow: number ) => { + console.log('fetching chart:', baseTokenId, quoteTokenId) + + if (!baseTokenId || !quoteTokenId) return try { const [inputResponse, outputResponse] = await Promise.all([ fetch( diff --git a/components/MangoProvider.tsx b/components/MangoProvider.tsx index a6ac47c2..69d25134 100644 --- a/components/MangoProvider.tsx +++ b/components/MangoProvider.tsx @@ -1,42 +1,20 @@ import { useEffect } from 'react' import mangoStore from '@store/mangoStore' -import useInterval from '@components/shared/useInterval' import { PublicKey } from '@solana/web3.js' import { useRouter } from 'next/router' import { MangoAccount } from '@blockworks-foundation/mango-v4' import useMangoAccount from 'hooks/useMangoAccount' -const rehydrateStore = async () => { - const actions = mangoStore.getState().actions - actions.fetchGroup() - const mangoAccount = mangoStore.getState().mangoAccount.current - if (mangoAccount) { - // actions.reloadMangoAccount() - } -} - const HydrateStore = () => { const actions = mangoStore((s) => s.actions) const { mangoAccount } = useMangoAccount() - const jupiterTokens = mangoStore((s) => s.jupiterTokens) - - useInterval(() => { - rehydrateStore() - }, 5000) useEffect(() => { const fetchData = async () => { await actions.fetchGroup() - actions.fetchJupiterTokens() } fetchData() - }, []) - - useEffect(() => { - if (jupiterTokens.length) { - actions.fetchCoingeckoPrices() - } - }, [jupiterTokens]) + }, [actions]) // watch selected Mango Account for changes useEffect(() => { diff --git a/components/TokenList.tsx b/components/TokenList.tsx index 6b7f69eb..723d5743 100644 --- a/components/TokenList.tsx +++ b/components/TokenList.tsx @@ -30,6 +30,7 @@ import Tooltip from './shared/Tooltip' import { formatTokenSymbol } from 'utils/tokens' import RepayModal from './modals/RepayModal' import useMangoAccount from 'hooks/useMangoAccount' +import useJupiterMints from '../hooks/useJupiterMints' const TokenList = () => { const { t } = useTranslation(['common', 'token', 'trade']) @@ -38,7 +39,7 @@ const TokenList = () => { const { mangoAccount } = useMangoAccount() const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances) const group = mangoStore((s) => s.group) - const jupiterTokens = mangoStore((s) => s.jupiterTokens) + const { mangoTokens } = useJupiterMints() const totalInterestData = mangoStore( (s) => s.mangoAccount.stats.interestTotals.data ) @@ -136,8 +137,8 @@ const TokenList = () => { const oraclePrice = bank.uiPrice let logoURI - if (jupiterTokens.length) { - logoURI = jupiterTokens.find( + if (mangoTokens?.length) { + logoURI = mangoTokens.find( (t) => t.address === bank.mint.toString() )!.logoURI } @@ -263,7 +264,7 @@ export default TokenList const MobileTokenListItem = ({ bank }: { bank: Bank }) => { const { t } = useTranslation(['common', 'token']) const [showTokenDetails, setShowTokenDetails] = useState(false) - const jupiterTokens = mangoStore((s) => s.jupiterTokens) + const { mangoTokens } = useJupiterMints() const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances) const { mangoAccount } = useMangoAccount() const totalInterestData = mangoStore( @@ -274,8 +275,8 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => { const router = useRouter() let logoURI - if (jupiterTokens.length) { - logoURI = jupiterTokens.find( + if (mangoTokens?.length) { + logoURI = mangoTokens.find( (t) => t.address === bank.mint.toString() )!.logoURI } @@ -420,7 +421,7 @@ const ActionsMenu = ({ // const set = mangoStore.getState().set // const router = useRouter() // const { asPath } = router - const jupiterTokens = mangoStore((s) => s.jupiterTokens) + const { mangoTokens } = useJupiterMints() const handleShowActionModals = useCallback( (token: string, action: 'borrow' | 'deposit' | 'withdraw' | 'repay') => { @@ -437,7 +438,7 @@ const ActionsMenu = ({ ) // const handleBuy = useCallback(() => { - // const outputTokenInfo = jupiterTokens.find( + // const outputTokenInfo = mangoTokens.find( // (t: any) => t.address === bank.mint.toString() // ) // set((s) => { @@ -447,10 +448,10 @@ const ActionsMenu = ({ // if (asPath === '/') { // router.push('/swap', undefined, { shallow: true }) // } - // }, [bank, router, asPath, set, jupiterTokens]) + // }, [bank, router, asPath, set, mangoTokens]) // const handleSell = useCallback(() => { - // const inputTokenInfo = jupiterTokens.find( + // const inputTokenInfo = mangoTokens.find( // (t: any) => t.address === bank.mint.toString() // ) // set((s) => { @@ -460,13 +461,12 @@ const ActionsMenu = ({ // if (asPath === '/') { // router.push('/swap', undefined, { shallow: true }) // } - // }, [router, asPath, set, bank, jupiterTokens]) + // }, [router, asPath, set, bank, mangoTokens]) const logoURI = useMemo(() => { - if (!bank || !jupiterTokens.length) return '' - return jupiterTokens.find((t) => t.address === bank.mint.toString()) - ?.logoURI - }, [bank, jupiterTokens]) + if (!bank || !mangoTokens?.length) return '' + return mangoTokens.find((t) => t.address === bank.mint.toString())?.logoURI + }, [bank, mangoTokens]) return ( <> diff --git a/components/account/ActionTokenItem.tsx b/components/account/ActionTokenItem.tsx index 68c46d98..74a76416 100644 --- a/components/account/ActionTokenItem.tsx +++ b/components/account/ActionTokenItem.tsx @@ -3,6 +3,7 @@ import Image from 'next/legacy/image' import { useMemo } from 'react' import mangoStore from '@store/mangoStore' import { formatDecimal } from '../../utils/numbers' +import useJupiterMints from 'hooks/useJupiterMints' const ActionTokenItem = ({ bank, @@ -18,17 +19,15 @@ const ActionTokenItem = ({ showDepositRates?: boolean }) => { const { mint, name } = bank - const jupiterTokens = mangoStore((s) => s.jupiterTokens) + const { mangoTokens } = useJupiterMints() const logoUri = useMemo(() => { let logoURI - if (jupiterTokens.length) { - logoURI = jupiterTokens.find( - (t) => t.address === mint.toString() - )!.logoURI + if (mangoTokens?.length) { + logoURI = mangoTokens.find((t) => t.address === mint.toString())!.logoURI } return logoURI - }, [mint, jupiterTokens]) + }, [mint, mangoTokens]) return (