From ae324a6da523d09d4d1536c5015bb6feedd8982a Mon Sep 17 00:00:00 2001 From: tjs Date: Thu, 18 Aug 2022 16:50:34 -0400 Subject: [PATCH] update to latest client and program version --- components/TokenList.tsx | 153 ++++++++++------------ components/TokenSelect.tsx | 12 +- components/account/ActionTokenItem.tsx | 2 +- components/account/ActionTokenList.tsx | 2 +- components/modals/BorrowModal.tsx | 26 ++-- components/modals/DepositModal.tsx | 14 +- components/modals/UserSetupModal.tsx | 24 ++-- components/modals/WithdrawModal.tsx | 21 +-- components/shared/HealthImpact.tsx | 9 +- components/swap/JupiterRouteInfo.tsx | 51 ++++---- components/swap/LeverageSlider.tsx | 27 ++-- components/swap/Swap.tsx | 120 +++++++---------- components/swap/useJupiter.ts | 30 ++--- components/wallet/ConnectWalletButton.tsx | 20 +-- components/wallet/WalletListener.tsx | 14 +- store/state.ts | 147 +++++++++++---------- utils/wallet.ts | 18 --- yarn.lock | 8 +- 18 files changed, 317 insertions(+), 381 deletions(-) diff --git a/components/TokenList.tsx b/components/TokenList.tsx index da6a22d5..97fcc863 100644 --- a/components/TokenList.tsx +++ b/components/TokenList.tsx @@ -10,7 +10,7 @@ import { useTranslation } from 'next-i18next' import { useTheme } from 'next-themes' import Image from 'next/image' import { useRouter } from 'next/router' -import { Fragment, useEffect, useMemo, useState } from 'react' +import { Fragment, useCallback, useEffect, useMemo, useState } from 'react' import { useViewport } from '../hooks/useViewport' import mangoStore from '../store/state' @@ -53,8 +53,8 @@ const TokenList = () => { }, [coingeckoPrices, actions]) const banks = useMemo(() => { - if (group?.banksMap) { - const rawBanks = Array.from(group?.banksMap, ([key, value]) => ({ + if (group) { + const rawBanks = Array.from(group?.banksMapByName, ([key, value]) => ({ key, value, })) @@ -62,17 +62,27 @@ const TokenList = () => { ? showZeroBalances ? rawBanks.sort( (a, b) => - Math.abs(mangoAccount?.getUi(b.value) * Number(b.value.price)) - - Math.abs(mangoAccount?.getUi(a.value) * Number(a.value.price)) + Math.abs( + mangoAccount?.getTokenBalanceUi(b.value[0]) * + Number(b.value[0].price) + ) - + Math.abs( + mangoAccount?.getTokenBalanceUi(a.value[0]) * + Number(a.value[0].price) + ) ) : rawBanks - .filter((b) => mangoAccount?.getUi(b.value) !== 0) + .filter((b) => mangoAccount?.getTokenBalanceUi(b.value[0]) !== 0) .sort( (a, b) => Math.abs( - mangoAccount?.getUi(b.value) * Number(b.value.price) + mangoAccount?.getTokenBalanceUi(b.value[0]) * + Number(b.value[0].price) ) - - Math.abs(mangoAccount?.getUi(a.value) * Number(a.value.price)) + Math.abs( + mangoAccount?.getTokenBalanceUi(a.value[0]) * + Number(a.value[0].price) + ) ) : rawBanks } @@ -116,11 +126,12 @@ const TokenList = () => { - {banks.map((bank, index) => { - const oraclePrice = bank.value.price + {banks.map(({ key, value }, index) => { + const bank = value[0] + const oraclePrice = bank.price const coingeckoData = coingeckoPrices.find( - (asset) => asset.symbol === bank.key + (asset) => asset.symbol === key ) const change = coingeckoData @@ -135,12 +146,12 @@ const TokenList = () => { let logoURI if (jupiterTokens.length) { logoURI = jupiterTokens.find( - (t) => t.address === bank.value.mint.toString() + (t) => t.address === bank.mint.toString() )!.logoURI } const hasInterestEarned = totalInterestData.find( - (d) => d.symbol === bank.value.name + (d) => d.symbol === bank.name ) const interestAmount = hasInterestEarned @@ -154,7 +165,7 @@ const TokenList = () => { : 0.0 return ( - +
@@ -164,7 +175,7 @@ const TokenList = () => { )}
-

{bank.value.name}

+

{bank.name}

@@ -183,12 +194,12 @@ const TokenList = () => { } data={chartData} height={40} - name={bank.key} + name={key} width={104} xKey="0" yKey="1" /> - ) : bank.key === 'USDC' || bank.key === 'USDT' ? null : ( + ) : key === 'USDC' || key === 'USDT' ? null : (

{t('unavailable')}

) ) : ( @@ -198,20 +209,16 @@ const TokenList = () => {

- {formatDecimal( - bank.value.getDepositRate().toNumber(), - 2, - { fixed: true } - )} + {formatDecimal(bank.getDepositRate().toNumber(), 2, { + fixed: true, + })} %

|

- {formatDecimal( - bank.value.getBorrowRate().toNumber(), - 2, - { fixed: true } - )} + {formatDecimal(bank.getBorrowRate().toNumber(), 2, { + fixed: true, + })} %

@@ -227,13 +234,13 @@ const TokenList = () => {

{mangoAccount - ? formatDecimal(mangoAccount.getUi(bank.value)) + ? formatDecimal(mangoAccount.getTokenBalanceUi(bank)) : 0}

{mangoAccount ? `${formatFixedDecimals( - mangoAccount.getUi(bank.value) * + mangoAccount.getTokenBalanceUi(bank) * oraclePrice.toNumber(), true )}` @@ -242,10 +249,7 @@ const TokenList = () => {

- +
@@ -255,19 +259,17 @@ const TokenList = () => { ) : (
- {banks.map((bank) => { - const oraclePrice = bank.value.price + {banks.map(({ key, value }) => { + const bank = value[0] + const oraclePrice = bank.price let logoURI if (jupiterTokens.length) { logoURI = jupiterTokens.find( - (t) => t.address === bank.value.mint.toString() + (t) => t.address === bank.mint.toString() )!.logoURI } return ( -
+
@@ -278,28 +280,25 @@ const TokenList = () => { )}
-

{bank.value.name}

+

{bank.name}

{t('available')}: {mangoAccount - ? formatDecimal(mangoAccount.getUi(bank.value)) + ? formatDecimal(mangoAccount.getTokenBalanceUi(bank)) : 0}

- + handleShowTokenDetails(bank.value.name)} + onClick={() => handleShowTokenDetails(bank.name)} > {
{

{t('rates')}

- {formatDecimal( - bank.value.getDepositRate().toNumber(), - 2 - )} - % + {formatDecimal(bank.getDepositRate().toNumber(), 2)}% | - {formatDecimal( - bank.value.getBorrowRate().toNumber(), - 2 - )} - % + {formatDecimal(bank.getBorrowRate().toNumber(), 2)}%

@@ -358,8 +349,8 @@ const TokenList = () => {

{t('liquidity')}

{formatDecimal( - bank.value.uiDeposits() - bank.value.uiBorrows(), - bank.value.mintDecimals + bank.uiDeposits() - bank.uiBorrows(), + bank.mintDecimals )}

@@ -392,37 +383,35 @@ const ActionsMenu = ({ const router = useRouter() const { asPath } = router - const handleShowActionModals = ( - token: string, - action: 'borrow' | 'deposit' | 'withdraw' - ) => { - setSelectedToken(token) - action === 'borrow' - ? setShowBorrowModal(true) - : action === 'deposit' - ? setShowDepositModal(true) - : setShowWithdrawModal(true) - } + const handleShowActionModals = useCallback( + (token: string, action: 'borrow' | 'deposit' | 'withdraw') => { + setSelectedToken(token) + action === 'borrow' + ? setShowBorrowModal(true) + : action === 'deposit' + ? setShowDepositModal(true) + : setShowWithdrawModal(true) + }, + [] + ) - const handleBuy = () => { + const handleBuy = useCallback(() => { set((s) => { - s.swap.inputToken = 'USDC' - s.swap.outputToken = bank.name + s.swap.outputBank = bank }) if (asPath === '/') { router.push('/trade', undefined, { shallow: true }) } - } + }, [bank, router, asPath, set]) - const handleSell = () => { + const handleSell = useCallback(() => { set((s) => { - s.swap.inputToken = bank.name - s.swap.outputToken = 'USDC' + s.swap.inputBank = bank }) if (asPath === '/') { router.push('/trade', undefined, { shallow: true }) } - } + }, [router, asPath, set, bank]) return ( <> @@ -465,14 +454,14 @@ const ActionsMenu = ({ handleBuy()} + onClick={handleBuy} > {t('buy')} handleSell()} + onClick={handleSell} > {t('sell')} diff --git a/components/TokenSelect.tsx b/components/TokenSelect.tsx index ad4bdbbe..020d85ba 100644 --- a/components/TokenSelect.tsx +++ b/components/TokenSelect.tsx @@ -3,12 +3,16 @@ import Image from 'next/image' import mangoStore from '../store/state' type TokenSelectProps = { - token: string + tokenSymbol: string | undefined showTokenList: (x: any) => void type: 'input' | 'output' } -const TokenSelect = ({ token, showTokenList, type }: TokenSelectProps) => { +const TokenSelect = ({ + tokenSymbol, + showTokenList, + type, +}: TokenSelectProps) => { const group = mangoStore((s) => s.group) const jupiterTokens = mangoStore((s) => s.jupiterTokens) @@ -16,7 +20,7 @@ const TokenSelect = ({ token, showTokenList, type }: TokenSelectProps) => { let logoURI if (jupiterTokens.length) { - logoURI = jupiterTokens.find((t) => t.symbol === token)!.logoURI + logoURI = jupiterTokens.find((t) => t.symbol === tokenSymbol)!.logoURI } return ( @@ -33,7 +37,7 @@ const TokenSelect = ({ token, showTokenList, type }: TokenSelectProps) => { )}
-
{token}
+
{tokenSymbol}
diff --git a/components/account/ActionTokenItem.tsx b/components/account/ActionTokenItem.tsx index ddc52cea..d8610f64 100644 --- a/components/account/ActionTokenItem.tsx +++ b/components/account/ActionTokenItem.tsx @@ -13,7 +13,7 @@ const ActionTokenItem = ({ }: { bank: Bank customValue: number - onSelect: (x: any) => void + onSelect: (x: string) => void showBorrowRates?: boolean showDepositRates?: boolean }) => { diff --git a/components/account/ActionTokenList.tsx b/components/account/ActionTokenList.tsx index 329ae53e..e9b05610 100644 --- a/components/account/ActionTokenList.tsx +++ b/components/account/ActionTokenList.tsx @@ -9,7 +9,7 @@ const ActionTokenList = ({ showDepositRates, }: { banks: any - onSelect: (x: any) => void + onSelect: (x: string) => void sortByKey: string showBorrowRates?: boolean showDepositRates?: boolean diff --git a/components/modals/BorrowModal.tsx b/components/modals/BorrowModal.tsx index a5bf535e..461df612 100644 --- a/components/modals/BorrowModal.tsx +++ b/components/modals/BorrowModal.tsx @@ -3,7 +3,7 @@ import { ChevronDownIcon } from '@heroicons/react/solid' import { useTranslation } from 'next-i18next' import Image from 'next/image' import React, { ChangeEvent, useCallback, useMemo, useState } from 'react' -import mangoStore from '../../store/state' +import mangoStore, { INPUT_TOKEN_DEFAULT } from '../../store/state' import { ModalProps } from '../../types/modal' import { notify } from '../../utils/notifications' import { formatFixedDecimals } from '../../utils/numbers' @@ -29,14 +29,16 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) { const group = mangoStore((s) => s.group) const [inputAmount, setInputAmount] = useState('') const [submitting, setSubmitting] = useState(false) - const [selectedToken, setSelectedToken] = useState(token || 'USDC') + const [selectedToken, setSelectedToken] = useState( + token || INPUT_TOKEN_DEFAULT + ) const [showTokenList, setShowTokenList] = useState(false) const [sizePercentage, setSizePercentage] = useState('') const jupiterTokens = mangoStore((s) => s.jupiterTokens) const bank = useMemo(() => { const group = mangoStore.getState().group - return group?.banksMap.get(selectedToken) + return group?.banksMapByName.get(selectedToken)![0] }, [selectedToken]) const logoUri = useMemo(() => { @@ -55,7 +57,7 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) { const group = mangoStore.getState().group if (!group || !bank) return 0 const amount = mangoAccount - ?.getMaxWithdrawWithBorrowForToken(group, selectedToken) + ?.getMaxWithdrawWithBorrowForToken(group, bank.mint) .toNumber() return amount && amount > 0 ? toUiDecimals(amount, bank.mintDecimals) : 0 }, [mangoAccount, bank, selectedToken]) @@ -89,7 +91,7 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) { const tx = await client.tokenWithdraw( group, mangoAccount, - selectedToken, + bank!.mint, parseFloat(inputAmount), true ) @@ -116,17 +118,18 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) { const banks = useMemo(() => { if (mangoAccount) { - return group?.banksMap - ? Array.from(group?.banksMap, ([key, value]) => { + return group?.banksMapByName + ? Array.from(group?.banksMapByName, ([key, value]) => { + const bank = value[0] const amount = mangoAccount - ?.getMaxWithdrawWithBorrowForToken(group, key) + ?.getMaxWithdrawWithBorrowForToken(group, bank.mint) .toNumber() return { key, value, maxAmount: amount && amount > 0 - ? toUiDecimals(amount, value.mintDecimals) + ? toUiDecimals(amount, bank.mintDecimals) : 0, } }) @@ -230,10 +233,7 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) { /> - +