diff --git a/src/components/Borrow/BorrowTable.tsx b/src/components/Borrow/BorrowTable.tsx
index bc8aba77..6b5d4bf3 100644
--- a/src/components/Borrow/BorrowTable.tsx
+++ b/src/components/Borrow/BorrowTable.tsx
@@ -9,15 +9,15 @@ import {
import Image from 'next/image'
import React from 'react'
+import { AssetRow } from 'components/Borrow'
import { ChevronDown, ChevronUp } from 'components/Icons'
import { formatCurrency } from 'utils/formatters'
-import { AssetRow } from 'components/Borrow'
interface Market {
denom: string
symbol: string
- icon: string
- chain: string
+ logo: string
+ name: string
borrowed: {
amount: number
value: number
@@ -42,10 +42,10 @@ export const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
id: 'symbol',
accessorFn: (row) => (
-
+
{row.symbol}
-
{row.chain}
+
{row.name}
),
diff --git a/src/components/BorrowCapacity.tsx b/src/components/BorrowCapacity.tsx
index 86d8c2de..9f140b1c 100644
--- a/src/components/BorrowCapacity.tsx
+++ b/src/components/BorrowCapacity.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames'
import { useEffect, useState } from 'react'
import { FormattedNumber, Text, Tooltip } from 'components'
-import { useSettings } from 'stores'
+import { useSettingsStore } from 'stores'
interface Props {
balance: number
@@ -27,7 +27,7 @@ export const BorrowCapacity = ({
hideValues,
decimals = 2,
}: Props) => {
- const enableAnimations = useSettings((s) => s.enableAnimations)
+ const enableAnimations = useSettingsStore((s) => s.enableAnimations)
const [percentOfMaxRound, setPercentOfMaxRound] = useState(0)
const [percentOfMaxRange, setPercentOfMaxRange] = useState(0)
diff --git a/src/components/BorrowModal.tsx b/src/components/BorrowModal.tsx
index e415abfc..f34331de 100644
--- a/src/components/BorrowModal.tsx
+++ b/src/components/BorrowModal.tsx
@@ -18,8 +18,7 @@ import {
import { useAccountStats, useBalances, useCalculateMaxBorrowAmount } from 'hooks/data'
import { useBorrowFunds } from 'hooks/mutations'
import { useAllBalances, useMarkets, useTokenPrices } from 'hooks/queries'
-import { useAccountDetailsStore } from 'stores'
-import { chain } from 'utils/chains'
+import { useAccountDetailsStore, useNetworkConfigStore } from 'stores'
import { formatCurrency, formatValue } from 'utils/formatters'
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
@@ -34,12 +33,14 @@ export const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
const [isBorrowToCreditAccount, setIsBorrowToCreditAccount] = useState(false)
const selectedAccount = useAccountDetailsStore((s) => s.selectedAccount)
+ const whitelistedAssets = useNetworkConfigStore((s) => s.assets.whitelist)
+ const baseAsset = useNetworkConfigStore((s) => s.assets.base)
const balances = useBalances()
const { actions, borrowAmount } = useMemo(() => {
const borrowAmount = BigNumber(amount)
- .times(10 ** getTokenDecimals(tokenDenom))
+ .times(10 ** getTokenDecimals(tokenDenom, whitelistedAssets))
.toNumber()
const withdrawAmount = isBorrowToCreditAccount ? 0 : borrowAmount
@@ -60,11 +61,11 @@ export const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
},
] as AccountStatsAction[],
}
- }, [amount, isBorrowToCreditAccount, tokenDenom])
+ }, [amount, isBorrowToCreditAccount, tokenDenom, whitelistedAssets])
const accountStats = useAccountStats(actions)
- const tokenSymbol = getTokenSymbol(tokenDenom)
+ const tokenSymbol = getTokenSymbol(tokenDenom, whitelistedAssets)
const { mutate, isLoading } = useBorrowFunds(borrowAmount, tokenDenom, !isBorrowToCreditAccount, {
onSuccess: () => {
@@ -83,9 +84,9 @@ export const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
const walletAmount = useMemo(() => {
return BigNumber(balancesData?.find((balance) => balance.denom === tokenDenom)?.amount ?? 0)
- .div(10 ** getTokenDecimals(tokenDenom))
+ .div(10 ** getTokenDecimals(tokenDenom, whitelistedAssets))
.toNumber()
- }, [balancesData, tokenDenom])
+ }, [balancesData, tokenDenom, whitelistedAssets])
const tokenPrice = tokenPrices?.[tokenDenom] ?? 0
const borrowRate = Number(marketsData?.[tokenDenom]?.borrow_rate)
@@ -109,7 +110,7 @@ export const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
const handleSliderValueChange = (value: number[]) => {
const decimal = value[0] / 100
- const tokenDecimals = getTokenDecimals(tokenDenom)
+ const tokenDecimals = getTokenDecimals(tokenDenom, whitelistedAssets)
// limit decimal precision based on token contract decimals
const newAmount = Number((decimal * maxValue).toFixed(tokenDecimals))
@@ -174,7 +175,7 @@ export const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
allowNegative={false}
onValueChange={(v) => handleValueChange(v.floatValue || 0)}
suffix={` ${tokenSymbol}`}
- decimalScale={getTokenDecimals(tokenDenom)}
+ decimalScale={getTokenDecimals(tokenDenom, whitelistedAssets)}
/>
@@ -244,7 +245,7 @@ export const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
{formatCurrency(
BigNumber(accountStats.netWorth)
- .dividedBy(10 ** chain.stakeCurrency.coinDecimals)
+ .dividedBy(10 ** baseAsset.decimals)
.toNumber(),
)}
@@ -281,7 +282,7 @@ export const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
{formatCurrency(
BigNumber(accountStats?.totalPosition ?? 0)
- .dividedBy(10 ** chain.stakeCurrency.coinDecimals)
+ .dividedBy(10 ** baseAsset.decimals)
.toNumber(),
)}
@@ -291,7 +292,7 @@ export const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
{formatCurrency(
BigNumber(accountStats?.totalDebt ?? 0)
- .dividedBy(10 ** chain.stakeCurrency.coinDecimals)
+ .dividedBy(10 ** baseAsset.decimals)
.toNumber(),
)}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 673ac9d4..c05ed085 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames'
import React, { LegacyRef, ReactNode } from 'react'
import { CircularProgress } from 'components'
-import { useSettings } from 'stores'
+import { useSettingsStore } from 'stores'
interface Props {
children?: string | ReactNode
@@ -74,7 +74,7 @@ export const Button = React.forwardRef(function Button(
ref,
) {
const buttonClasses = []
- const enableAnimations = useSettings((s) => s.enableAnimations)
+ const enableAnimations = useSettingsStore((s) => s.enableAnimations)
switch (variant) {
case 'round':
diff --git a/src/components/CircularProgress.tsx b/src/components/CircularProgress.tsx
index 856b1361..b09e7891 100644
--- a/src/components/CircularProgress.tsx
+++ b/src/components/CircularProgress.tsx
@@ -1,7 +1,7 @@
import classNames from 'classnames'
import { Text } from 'components'
-import { useSettings } from 'stores'
+import { useSettingsStore } from 'stores'
interface Props {
color?: string
@@ -10,7 +10,7 @@ interface Props {
}
export const CircularProgress = ({ color = '#FFFFFF', size = 20, className }: Props) => {
- const enableAnimations = useSettings((s) => s.enableAnimations)
+ const enableAnimations = useSettingsStore((s) => s.enableAnimations)
const borderWidth = `${size / 10}px`
const borderColor = `${color} transparent transparent transparent`
diff --git a/src/components/FormattedNumber.tsx b/src/components/FormattedNumber.tsx
index 22bc5edc..94b87a82 100644
--- a/src/components/FormattedNumber.tsx
+++ b/src/components/FormattedNumber.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames'
import React, { useEffect, useRef } from 'react'
import { animated, useSpring } from 'react-spring'
-import { useSettings } from 'stores'
+import { useSettingsStore } from 'stores'
import { formatValue } from 'utils/formatters'
export const FormattedNumber = React.memo(
@@ -18,7 +18,7 @@ export const FormattedNumber = React.memo(
rounded = false,
abbreviated = false,
}: FormattedNumberProps) => {
- const enableAnimations = useSettings((s) => s.enableAnimations)
+ const enableAnimations = useSettingsStore((s) => s.enableAnimations)
const prevAmountRef = useRef
(0)
useEffect(() => {
diff --git a/src/components/Gauge.tsx b/src/components/Gauge.tsx
index 9d8dbb55..794ee7fd 100644
--- a/src/components/Gauge.tsx
+++ b/src/components/Gauge.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames'
import { ReactNode } from 'react'
import { Tooltip } from 'components'
-import { useSettings } from 'stores'
+import { useSettingsStore } from 'stores'
interface Props {
tooltip: string | ReactNode
@@ -20,7 +20,7 @@ export const Gauge = ({
label,
tooltip,
}: Props) => {
- const enableAnimations = useSettings((s) => s.enableAnimations)
+ const enableAnimations = useSettingsStore((s) => s.enableAnimations)
const percentage = value * 100
const percentageValue = percentage > 100 ? 100 : percentage < 0 ? 0 : percentage
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index ade6f89a..1e823a00 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -5,7 +5,7 @@ import React, { useEffect } from 'react'
import { AccountDetails } from 'components/Account'
import { DesktopNavigation } from 'components/Navigation'
import { useCreditAccounts } from 'hooks/queries'
-import { useSettings, useWalletStore } from 'stores'
+import { useSettingsStore, useWalletStore } from 'stores'
const filter = {
day: 'brightness-100 hue-rotate-0',
@@ -13,7 +13,7 @@ const filter = {
}
export const Layout = ({ children }: { children: React.ReactNode }) => {
- const enableAnimations = useSettings((s) => s.enableAnimations)
+ const enableAnimations = useSettingsStore((s) => s.enableAnimations)
const { data: creditAccountsList } = useCreditAccounts()
const hasCreditAccounts = creditAccountsList && creditAccountsList.length > 0
diff --git a/src/components/RepayModal.tsx b/src/components/RepayModal.tsx
index 0b12efa6..58c011f8 100644
--- a/src/components/RepayModal.tsx
+++ b/src/components/RepayModal.tsx
@@ -7,10 +7,10 @@ import { toast } from 'react-toastify'
import { Button, CircularProgress, ContainerSecondary, Slider } from 'components'
import { useRepayFunds } from 'hooks/mutations'
-import { useAccountDetailsStore } from 'stores'
+import { useAllBalances, useCreditAccountPositions, useTokenPrices } from 'hooks/queries'
+import { useAccountDetailsStore, useNetworkConfigStore } from 'stores'
import { formatCurrency } from 'utils/formatters'
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
-import { useAllBalances, useCreditAccountPositions, useTokenPrices } from 'hooks/queries'
// 0.001% buffer / slippage to avoid repay action from not fully repaying the debt amount
const REPAY_BUFFER = 1.00001
@@ -26,8 +26,9 @@ export const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
const selectedAccount = useAccountDetailsStore((s) => s.selectedAccount)
const { data: positionsData } = useCreditAccountPositions(selectedAccount ?? '')
+ const whitelistedAssets = useNetworkConfigStore((s) => s.assets.whitelist)
- const tokenSymbol = getTokenSymbol(tokenDenom)
+ const tokenSymbol = getTokenSymbol(tokenDenom, whitelistedAssets)
const maxRepayAmount = useMemo(() => {
const tokenDebtAmount =
@@ -36,13 +37,13 @@ export const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
return BigNumber(tokenDebtAmount)
.times(REPAY_BUFFER)
.decimalPlaces(0)
- .div(10 ** getTokenDecimals(tokenDenom))
+ .div(10 ** getTokenDecimals(tokenDenom, whitelistedAssets))
.toNumber()
- }, [positionsData, tokenDenom])
+ }, [positionsData, tokenDenom, whitelistedAssets])
const { mutate, isLoading } = useRepayFunds(
BigNumber(amount)
- .times(10 ** getTokenDecimals(tokenDenom))
+ .times(10 ** getTokenDecimals(tokenDenom, whitelistedAssets))
.toNumber(),
tokenDenom,
{
@@ -62,9 +63,9 @@ export const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
const walletAmount = useMemo(() => {
return BigNumber(balancesData?.find((balance) => balance.denom === tokenDenom)?.amount ?? 0)
- .div(10 ** getTokenDecimals(tokenDenom))
+ .div(10 ** getTokenDecimals(tokenDenom, whitelistedAssets))
.toNumber()
- }, [balancesData, tokenDenom])
+ }, [balancesData, tokenDenom, whitelistedAssets])
const tokenPrice = tokenPrices?.[tokenDenom] ?? 0
@@ -115,11 +116,9 @@ export const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
-
About
+
Repay
- Bringing the next generation of video creation to the Metaverse.
-
@@ -144,7 +143,7 @@ export const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
allowNegative={false}
onValueChange={(v) => handleValueChange(v.floatValue || 0)}
suffix={` ${tokenSymbol}`}
- decimalScale={getTokenDecimals(tokenDenom)}
+ decimalScale={getTokenDecimals(tokenDenom, whitelistedAssets)}
/>
@@ -159,7 +158,7 @@ export const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
value={percentageValue}
onChange={(value) => {
const decimal = value[0] / 100
- const tokenDecimals = getTokenDecimals(tokenDenom)
+ const tokenDecimals = getTokenDecimals(tokenDenom, whitelistedAssets)
// limit decimal precision based on token contract decimals
const newAmount = Number((decimal * maxValue).toFixed(tokenDecimals))
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 22911338..a8e1e55d 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames'
import { ReactNode } from 'react'
import { Questionmark } from 'components/Icons'
-import { useSettings } from 'stores'
+import { useSettingsStore } from 'stores'
interface Props {
children?: ReactNode | string
@@ -22,7 +22,7 @@ export const Tooltip = ({
inderactive = false,
underline = false,
}: Props) => {
- const enableAnimations = useSettings((s) => s.enableAnimations)
+ const enableAnimations = useSettingsStore((s) => s.enableAnimations)
return (
{
+ const whitelistedAssets = useNetworkConfigStore((s) => s.assets.whitelist)
+
const [selectedTokenIn, setSelectedTokenIn] = useState('')
const [selectedTokenOut, setSelectedTokenOut] = useState('')
const [amountIn, setAmountIn] = useState(0)
@@ -92,9 +94,10 @@ export const TradeActionModule = () => {
{
onSuccess: () => {
toast.success(
- `${amountIn} ${getTokenSymbol(selectedTokenIn)} swapped for ${amountOut} ${getTokenSymbol(
- selectedTokenOut,
- )}`,
+ `${amountIn} ${getTokenSymbol(
+ selectedTokenIn,
+ whitelistedAssets,
+ )} swapped for ${amountOut} ${getTokenSymbol(selectedTokenOut, whitelistedAssets)}`,
)
resetAmounts()
},
@@ -189,19 +192,20 @@ export const TradeActionModule = () => {
>
{allowedCoinsData?.map((entry) => (
- {getTokenSymbol(entry)}
+ {getTokenSymbol(entry, whitelistedAssets)}
))}
- {getTokenSymbol(entry)}
+ {getTokenSymbol(entry, whitelistedAssets)}
))}
In Wallet:{' '}
{BigNumber(walletAmount)
- .dividedBy(10 ** getTokenDecimals(selectedTokenIn))
+ .dividedBy(10 ** getTokenDecimals(selectedTokenIn, whitelistedAssets))
.toNumber()
.toLocaleString(undefined, {
- maximumFractionDigits: getTokenDecimals(selectedTokenIn),
+ maximumFractionDigits: getTokenDecimals(selectedTokenIn, whitelistedAssets),
})}{' '}
- {getTokenSymbol(selectedTokenIn)}
+ {getTokenSymbol(selectedTokenIn, whitelistedAssets)}
In Account:{' '}
{BigNumber(accountAmount)
- .dividedBy(10 ** getTokenDecimals(selectedTokenIn))
+ .dividedBy(10 ** getTokenDecimals(selectedTokenIn, whitelistedAssets))
.toNumber()
.toLocaleString(undefined, {
- maximumFractionDigits: getTokenDecimals(selectedTokenIn),
+ maximumFractionDigits: getTokenDecimals(selectedTokenIn, whitelistedAssets),
})}{' '}
- {getTokenSymbol(selectedTokenIn)}
+ {getTokenSymbol(selectedTokenIn, whitelistedAssets)}
{
const decimal = value[0] / 100
- const tokenDecimals = getTokenDecimals(selectedTokenIn)
+ const tokenDecimals = getTokenDecimals(selectedTokenIn, whitelistedAssets)
// limit decimal precision based on token contract decimals
const newAmount = Number((decimal * maxAmount).toFixed(0))
@@ -308,10 +313,10 @@ export const TradeActionModule = () => {
{isMarginEnabled
? BigNumber(borrowAmount)
- .dividedBy(10 ** getTokenDecimals(selectedTokenIn))
+ .dividedBy(10 ** getTokenDecimals(selectedTokenIn, whitelistedAssets))
.toNumber()
.toLocaleString(undefined, {
- maximumFractionDigits: getTokenDecimals(selectedTokenIn),
+ maximumFractionDigits: getTokenDecimals(selectedTokenIn, whitelistedAssets),
})
: '-'}
diff --git a/src/components/Wallet/ConnectedButton.tsx b/src/components/Wallet/ConnectedButton.tsx
index 11954e6c..a254a0b9 100644
--- a/src/components/Wallet/ConnectedButton.tsx
+++ b/src/components/Wallet/ConnectedButton.tsx
@@ -1,9 +1,5 @@
-import {
- ChainInfoID,
- SimpleChainInfoList,
- useWallet,
- useWalletManager,
-} from '@marsprotocol/wallet-connector'
+import { ChainInfoID, SimpleChainInfoList, useWalletManager } from '@marsprotocol/wallet-connector'
+import BigNumber from 'bignumber.js'
import classNames from 'classnames'
import { useCallback, useEffect, useState } from 'react'
import useClipboard from 'react-use-clipboard'
@@ -11,7 +7,8 @@ import useClipboard from 'react-use-clipboard'
import { Button, CircularProgress, FormattedNumber, Text } from 'components'
import { Check, Copy, ExternalLink, Osmo, Wallet } from 'components/Icons'
import { Overlay } from 'components/Overlay'
-import { useTokenBalance } from 'hooks/queries'
+import { useAllBalances } from 'hooks/queries'
+import { useNetworkConfigStore, useWalletStore } from 'stores'
import { formatValue, truncate } from 'utils/formatters'
export const ConnectedButton = () => {
@@ -19,18 +16,22 @@ export const ConnectedButton = () => {
// EXTERNAL HOOKS
// ---------------
const { disconnect } = useWalletManager()
- const { chainInfo, address, name } = useWallet()
+ const address = useWalletStore((s) => s.address)
+ const chainInfo = useWalletStore((s) => s.chainInfo)
+ const name = useWalletStore((s) => s.name)
+ const baseAsset = useNetworkConfigStore((s) => s.assets.base)
// ---------------
// LOCAL HOOKS
// ---------------
- const { data } = useTokenBalance()
+ const { data } = useAllBalances()
// ---------------
// LOCAL STATE
// ---------------
const [isLoading, setIsLoading] = useState(false)
const [showDetails, setShowDetails] = useState(false)
+ const [walletAmount, setWalletAmount] = useState(0)
const [isCopied, setCopied] = useClipboard(address || '', {
successDuration: 1000 * 5,
})
@@ -52,6 +53,14 @@ export const ConnectedButton = () => {
setIsLoading(loading)
}, [address, name, chainInfo])
+ useEffect(() => {
+ setWalletAmount(
+ BigNumber(data?.find((balance) => balance.denom === baseAsset.denom)?.amount ?? 0)
+ .div(10 ** baseAsset.decimals)
+ .toNumber(),
+ )
+ }, [data, baseAsset.denom, baseAsset.decimals])
+
return (
{chainInfo?.chainId !== ChainInfoID.Osmosis1 && (
@@ -90,7 +99,7 @@ export const ConnectedButton = () => {
)}
>
{!isLoading ? (
- `${formatValue(data, 2, 2, true, false, ` ${chainInfo?.stakeCurrency?.coinDenom}`)}`
+ `${formatValue(walletAmount, 2, 2, true, false, ` ${baseAsset.symbol}`)}`
) : (
)}
@@ -101,13 +110,13 @@ export const ConnectedButton = () => {
- {chainInfo?.stakeCurrency?.coinDenom}
+ {baseAsset.denom}
diff --git a/src/components/Wallet/WalletConnectProvider.tsx b/src/components/Wallet/WalletConnectProvider.tsx
index 0b8331fe..20b1d77b 100644
--- a/src/components/Wallet/WalletConnectProvider.tsx
+++ b/src/components/Wallet/WalletConnectProvider.tsx
@@ -5,22 +5,24 @@ import { FC } from 'react'
import { CircularProgress } from 'components'
import { buttonColorClasses, buttonSizeClasses, buttonVariantClasses } from 'components/Button'
import { Close } from 'components/Icons'
-import KeplrImage from 'images/keplr-wallet-extension.png'
-import WalletConnectImage from 'images/walletconnect-keplr.png'
-import { useSettings } from 'stores'
+// TODO: get networkConfig source dynamically
+import { networkConfig } from 'config/osmo-test-4'
+import KeplrImage from 'images/wallets/keplr-wallet-extension.png'
+import WalletConnectImage from 'images/wallets/walletconnect-keplr.png'
+import { useSettingsStore } from 'stores'
type Props = {
children?: React.ReactNode
}
export const WalletConnectProvider: FC
= ({ children }) => {
- const enableAnimations = useSettings((s) => s.enableAnimations)
+ const enableAnimations = useSettingsStore((s) => s.enableAnimations)
return (
{
- const enableAnimations = useSettings((s) => s.enableAnimations)
+ const enableAnimations = useSettingsStore((s) => s.enableAnimations)
const queryChangeHandler = (event: MediaQueryListEvent) => {
- useSettings.setState({ enableAnimations: !event?.matches ?? true })
+ useSettingsStore.setState({ enableAnimations: !event?.matches ?? true })
}
useEffect(() => {
const mediaQuery: MediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)')
if (mediaQuery) {
- useSettings.setState({ enableAnimations: !mediaQuery.matches })
+ useSettingsStore.setState({ enableAnimations: !mediaQuery.matches })
mediaQuery.addEventListener('change', queryChangeHandler)
return () => mediaQuery.removeEventListener('change', queryChangeHandler)
}
diff --git a/src/hooks/data/useBalances.tsx b/src/hooks/data/useBalances.tsx
index 95ba3e43..d6d616f4 100644
--- a/src/hooks/data/useBalances.tsx
+++ b/src/hooks/data/useBalances.tsx
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react'
import { useCreditAccountPositions, useMarkets, useTokenPrices } from 'hooks/queries'
-import { useAccountDetailsStore } from 'stores'
+import { useAccountDetailsStore, useNetworkConfigStore } from 'stores'
import { formatBalances } from 'utils/balances'
export const useBalances = () => {
@@ -10,6 +10,7 @@ export const useBalances = () => {
const { data: marketsData } = useMarkets()
const { data: tokenPrices } = useTokenPrices()
const selectedAccount = useAccountDetailsStore((s) => s.selectedAccount)
+ const whitelistedAssets = useNetworkConfigStore((s) => s.assets.whitelist)
const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountPositions(
selectedAccount ?? '',
@@ -18,15 +19,15 @@ export const useBalances = () => {
useEffect(() => {
const balances =
positionsData?.coins && tokenPrices
- ? formatBalances(positionsData.coins, tokenPrices, false)
+ ? formatBalances(positionsData.coins, tokenPrices, false, whitelistedAssets)
: []
const debtBalances =
positionsData?.debts && tokenPrices
- ? formatBalances(positionsData.debts, tokenPrices, true, marketsData)
+ ? formatBalances(positionsData.debts, tokenPrices, true, whitelistedAssets, marketsData)
: []
setBalanceData([...balances, ...debtBalances])
- }, [positionsData, marketsData, tokenPrices])
+ }, [positionsData, marketsData, tokenPrices, whitelistedAssets])
return balanceData
}
diff --git a/src/hooks/data/useCalculateMaxBorrowAmount.tsx b/src/hooks/data/useCalculateMaxBorrowAmount.tsx
index 99d676d9..8f1bfbad 100644
--- a/src/hooks/data/useCalculateMaxBorrowAmount.tsx
+++ b/src/hooks/data/useCalculateMaxBorrowAmount.tsx
@@ -7,7 +7,7 @@ import {
useRedbankBalances,
useTokenPrices,
} from 'hooks/queries'
-import { useAccountDetailsStore } from 'stores'
+import { useAccountDetailsStore, useNetworkConfigStore } from 'stores'
import { getTokenDecimals } from 'utils/tokens'
const getApproximateHourlyInterest = (amount: string, borrowAPY: string) => {
@@ -18,6 +18,7 @@ const getApproximateHourlyInterest = (amount: string, borrowAPY: string) => {
export const useCalculateMaxBorrowAmount = (denom: string, isUnderCollateralized: boolean) => {
const selectedAccount = useAccountDetailsStore((s) => s.selectedAccount)
+ const whitelistedAssets = useNetworkConfigStore((s) => s.assets.whitelist)
const { data: positionsData } = useCreditAccountPositions(selectedAccount ?? '')
const { data: marketsData } = useMarkets()
@@ -61,7 +62,7 @@ export const useCalculateMaxBorrowAmount = (denom: string, isUnderCollateralized
}, 0)
const borrowTokenPrice = tokenPrices[denom]
- const tokenDecimals = getTokenDecimals(denom)
+ const tokenDecimals = getTokenDecimals(denom, whitelistedAssets)
let maxAmountCapacity
if (isUnderCollateralized) {
@@ -76,7 +77,10 @@ export const useCalculateMaxBorrowAmount = (denom: string, isUnderCollateralized
.div(borrowTokenPrice)
}
- const marketLiquidity = redbankBalances?.[denom] ?? 0
+ const marketLiquidity = BigNumber(
+ redbankBalances?.find((asset) => asset.denom.toLowerCase() === denom.toLowerCase())?.amount ||
+ 0,
+ )
const maxBorrowAmount = maxAmountCapacity.gt(marketLiquidity)
? marketLiquidity
@@ -96,5 +100,6 @@ export const useCalculateMaxBorrowAmount = (denom: string, isUnderCollateralized
positionsData,
redbankBalances,
tokenPrices,
+ whitelistedAssets,
])
}
diff --git a/src/hooks/data/useCalculateMaxWithdrawAmount.tsx b/src/hooks/data/useCalculateMaxWithdrawAmount.tsx
index e094c52c..7a8000e5 100644
--- a/src/hooks/data/useCalculateMaxWithdrawAmount.tsx
+++ b/src/hooks/data/useCalculateMaxWithdrawAmount.tsx
@@ -7,7 +7,7 @@ import {
useRedbankBalances,
useTokenPrices,
} from 'hooks/queries'
-import { useAccountDetailsStore } from 'stores'
+import { useAccountDetailsStore, useNetworkConfigStore } from 'stores'
import { getTokenDecimals } from 'utils/tokens'
const getApproximateHourlyInterest = (amount: string, borrowAPY: string) => {
@@ -18,13 +18,14 @@ const getApproximateHourlyInterest = (amount: string, borrowAPY: string) => {
export const useCalculateMaxWithdrawAmount = (denom: string, borrow: boolean) => {
const selectedAccount = useAccountDetailsStore((s) => s.selectedAccount)
+ const whitelistedAssets = useNetworkConfigStore((s) => s.assets.whitelist)
const { data: positionsData } = useCreditAccountPositions(selectedAccount ?? '')
const { data: marketsData } = useMarkets()
const { data: tokenPrices } = useTokenPrices()
const { data: redbankBalances } = useRedbankBalances()
- const tokenDecimals = getTokenDecimals(denom)
+ const tokenDecimals = getTokenDecimals(denom, whitelistedAssets)
const getTokenValue = useCallback(
(amount: string, denom: string) => {
@@ -101,7 +102,10 @@ export const useCalculateMaxWithdrawAmount = (denom: string, borrow: boolean) =>
maxAmountCapacity = maxAmountCapacity < 0 ? 0 : maxAmountCapacity
}
- const marketLiquidity = redbankBalances?.[denom] ?? 0
+ const marketLiquidity = BigNumber(
+ redbankBalances?.find((asset) => asset.denom.toLowerCase() === denom.toLowerCase())?.amount ||
+ 0,
+ )
const maxWithdrawAmount = BigNumber(maxAmountCapacity).gt(marketLiquidity)
? marketLiquidity
diff --git a/src/hooks/mutations/useCreateCreditAccount.tsx b/src/hooks/mutations/useCreateCreditAccount.tsx
index 55e7d6c3..342c6e94 100644
--- a/src/hooks/mutations/useCreateCreditAccount.tsx
+++ b/src/hooks/mutations/useCreateCreditAccount.tsx
@@ -1,8 +1,12 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'react-toastify'
-import { contractAddresses } from 'config/contracts'
-import { useAccountDetailsStore, useWalletStore } from 'stores'
+import {
+ useAccountDetailsStore,
+ useModalStore,
+ useNetworkConfigStore,
+ useWalletStore,
+} from 'stores'
import { queryKeys } from 'types/query-keys-factory'
import { hardcodedFee } from 'utils/contants'
@@ -14,17 +18,13 @@ const executeMsg = {
export const useCreateCreditAccount = () => {
const signingClient = useWalletStore((s) => s.signingClient)
const address = useWalletStore((s) => s.address)
+ const creditManagerAddress = useNetworkConfigStore((s) => s.contracts.creditManager)
const queryClient = useQueryClient()
return useMutation(
async () =>
- await signingClient?.execute(
- address ?? '',
- contractAddresses.creditManager,
- executeMsg,
- hardcodedFee,
- ),
+ await signingClient?.execute(address ?? '', creditManagerAddress, executeMsg, hardcodedFee),
{
onSettled: () => {
queryClient.invalidateQueries(queryKeys.creditAccounts(address ?? ''))
@@ -38,7 +38,7 @@ export const useCreateCreditAccount = () => {
// TODO: is there some better way to parse response to extract token id???
const createdID = data.logs[0].events[2].attributes[6].value
useAccountDetailsStore.setState({ selectedAccount: createdID })
- toast.success('New account created')
+ useModalStore.setState({ fundAccountModal: true })
},
},
)
diff --git a/src/hooks/mutations/useDeleteCreditAccount.tsx b/src/hooks/mutations/useDeleteCreditAccount.tsx
index 99930b6a..92248a27 100644
--- a/src/hooks/mutations/useDeleteCreditAccount.tsx
+++ b/src/hooks/mutations/useDeleteCreditAccount.tsx
@@ -1,14 +1,14 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'react-toastify'
-import { contractAddresses } from 'config/contracts'
-import { useWalletStore } from 'stores'
+import { useNetworkConfigStore, useWalletStore } from 'stores'
import { queryKeys } from 'types/query-keys-factory'
import { hardcodedFee } from 'utils/contants'
export const useDeleteCreditAccount = (accountId: string) => {
const signingClient = useWalletStore((s) => s.signingClient)
const address = useWalletStore((s) => s.address)
+ const accountNftAddress = useNetworkConfigStore((s) => s.contracts.accountNft)
const queryClient = useQueryClient()
@@ -16,7 +16,7 @@ export const useDeleteCreditAccount = (accountId: string) => {
async () =>
await signingClient?.execute(
address ?? '',
- contractAddresses.accountNft,
+ accountNftAddress,
{
burn: {
token_id: accountId,
diff --git a/src/hooks/mutations/useDepositCreditAccount.tsx b/src/hooks/mutations/useDepositCreditAccount.tsx
index aa97b85e..7fca6bcc 100644
--- a/src/hooks/mutations/useDepositCreditAccount.tsx
+++ b/src/hooks/mutations/useDepositCreditAccount.tsx
@@ -1,8 +1,7 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'react-toastify'
-import { contractAddresses } from 'config/contracts'
-import { useWalletStore } from 'stores'
+import { useNetworkConfigStore, useWalletStore } from 'stores'
import { queryKeys } from 'types/query-keys-factory'
import { hardcodedFee } from 'utils/contants'
@@ -16,6 +15,7 @@ export const useDepositCreditAccount = (
) => {
const signingClient = useWalletStore((s) => s.signingClient)
const address = useWalletStore((s) => s.address)
+ const creditManagerAddress = useNetworkConfigStore((s) => s.contracts.creditManager)
const queryClient = useQueryClient()
@@ -23,7 +23,7 @@ export const useDepositCreditAccount = (
async () =>
await signingClient?.execute(
address ?? '',
- contractAddresses.creditManager,
+ creditManagerAddress,
{
update_credit_account: {
account_id: accountId,
diff --git a/src/hooks/queries/index.ts b/src/hooks/queries/index.ts
index 580c18bb..6a6ee8a6 100644
--- a/src/hooks/queries/index.ts
+++ b/src/hooks/queries/index.ts
@@ -5,6 +5,5 @@ export { useCreditAccountPositions } from './useCreditAccountPositions'
export { useCreditAccounts } from './useCreditAccounts'
export { useMarkets } from './useMarkets'
export { useRedbankBalances } from './useRedbankBalances'
-export { useTokenBalance } from './useTokenBalance'
export { useTokenPrices } from './useTokenPrices'
// @endindex
diff --git a/src/hooks/queries/useAllBalances.tsx b/src/hooks/queries/useAllBalances.tsx
index f812e348..a4674e08 100644
--- a/src/hooks/queries/useAllBalances.tsx
+++ b/src/hooks/queries/useAllBalances.tsx
@@ -1,27 +1,48 @@
+import { Coin } from '@cosmjs/stargate'
import { useQuery } from '@tanstack/react-query'
+import request, { gql } from 'graphql-request'
+import { useMemo } from 'react'
-import { useWalletStore } from 'stores'
+import { useNetworkConfigStore, useWalletStore } from 'stores'
import { queryKeys } from 'types/query-keys-factory'
-import { chain } from 'utils/chains'
-type Result = {
- balances: { amount: string; denom: string }[]
+interface UserBalanceData {
+ balance: {
+ balance: Coin[]
+ }
}
export const useAllBalances = () => {
const address = useWalletStore((s) => s.address)
+ const hiveUrl = useNetworkConfigStore((s) => s.hiveUrl)
- const result = useQuery(
+ const result = useQuery(
queryKeys.allBalances(address ?? ''),
- () => fetch(`${chain.rest}/cosmos/bank/v1beta1/balances/${address}`).then((res) => res.json()),
+ async () => {
+ return await request(
+ hiveUrl!,
+ gql`
+ query UserBalanceQuery {
+ balance: bank {
+ balance(
+ address: "${address}"
+ ) {
+ amount
+ denom
+ }
+ }
+ }
+ `,
+ )
+ },
{
- enabled: !!address,
- staleTime: Infinity,
+ enabled: !!hiveUrl && !!address,
+ staleTime: 30000,
+ refetchInterval: 30000,
},
)
-
return {
...result,
- data: result?.data?.balances,
+ data: useMemo(() => result.data && result.data.balance.balance, [result.data]),
}
}
diff --git a/src/hooks/queries/useAllowedCoins.tsx b/src/hooks/queries/useAllowedCoins.tsx
index 08c0603d..becfa8a7 100644
--- a/src/hooks/queries/useAllowedCoins.tsx
+++ b/src/hooks/queries/useAllowedCoins.tsx
@@ -1,7 +1,6 @@
import { useQuery } from '@tanstack/react-query'
-import { contractAddresses } from 'config/contracts'
-import { useWalletStore } from 'stores'
+import { useNetworkConfigStore, useWalletStore } from 'stores'
import { queryKeys } from 'types/query-keys-factory'
type Result = string[]
@@ -12,10 +11,11 @@ const queryMsg = {
export const useAllowedCoins = () => {
const client = useWalletStore((s) => s.signingClient)
+ const creditManagerAddress = useNetworkConfigStore((s) => s.contracts.creditManager)
const result = useQuery(
queryKeys.allowedCoins(),
- async () => client?.queryContractSmart(contractAddresses.creditManager, queryMsg),
+ async () => client?.queryContractSmart(creditManagerAddress, queryMsg),
{
enabled: !!client,
staleTime: Infinity,
diff --git a/src/hooks/queries/useCreditAccountPositions.tsx b/src/hooks/queries/useCreditAccountPositions.tsx
index e59212de..4b678eda 100644
--- a/src/hooks/queries/useCreditAccountPositions.tsx
+++ b/src/hooks/queries/useCreditAccountPositions.tsx
@@ -2,8 +2,7 @@ import { Coin } from '@cosmjs/stargate'
import { useQuery } from '@tanstack/react-query'
import { useMemo } from 'react'
-import { contractAddresses } from 'config/contracts'
-import { useWalletStore } from 'stores'
+import { useNetworkConfigStore, useWalletStore } from 'stores'
import { queryKeys } from 'types/query-keys-factory'
interface DebtAmount {
@@ -27,11 +26,12 @@ interface Result {
export const useCreditAccountPositions = (accountId: string) => {
const address = useWalletStore((s) => s.address)
const client = useWalletStore((s) => s.signingClient)
+ const creditManagerAddress = useNetworkConfigStore((s) => s.contracts.creditManager)
const result = useQuery(
queryKeys.creditAccountsPositions(accountId),
async () =>
- client?.queryContractSmart(contractAddresses.creditManager, {
+ client?.queryContractSmart(creditManagerAddress, {
positions: {
account_id: accountId,
},
diff --git a/src/hooks/queries/useCreditAccounts.tsx b/src/hooks/queries/useCreditAccounts.tsx
index 25514f2f..307c9c8d 100644
--- a/src/hooks/queries/useCreditAccounts.tsx
+++ b/src/hooks/queries/useCreditAccounts.tsx
@@ -1,8 +1,7 @@
import { useQuery } from '@tanstack/react-query'
import { useMemo } from 'react'
-import { contractAddresses } from 'config/contracts'
-import { useAccountDetailsStore, useWalletStore } from 'stores'
+import { useAccountDetailsStore, useNetworkConfigStore, useWalletStore } from 'stores'
import { queryKeys } from 'types/query-keys-factory'
type Result = {
@@ -13,6 +12,7 @@ export const useCreditAccounts = () => {
const address = useWalletStore((s) => s.address)
const client = useWalletStore((s) => s.signingClient)
const selectedAccount = useAccountDetailsStore((s) => s.selectedAccount)
+ const accountNftAddress = useNetworkConfigStore((s) => s.contracts.accountNft)
const setSelectedAccount = (account: string) => {
useAccountDetailsStore.setState({ selectedAccount: account })
}
@@ -27,7 +27,7 @@ export const useCreditAccounts = () => {
const result = useQuery(
queryKeys.creditAccounts(address ?? ''),
- async () => client?.queryContractSmart(contractAddresses.accountNft, queryMsg),
+ async () => client?.queryContractSmart(accountNftAddress, queryMsg),
{
staleTime: Infinity,
enabled: !!address && !!client,
diff --git a/src/hooks/queries/useRedbankBalances.tsx b/src/hooks/queries/useRedbankBalances.tsx
index b4f7fb6d..0b4fa38b 100644
--- a/src/hooks/queries/useRedbankBalances.tsx
+++ b/src/hooks/queries/useRedbankBalances.tsx
@@ -1,57 +1,48 @@
import { Coin } from '@cosmjs/stargate'
import { useQuery } from '@tanstack/react-query'
+import request, { gql } from 'graphql-request'
import { useMemo } from 'react'
-import { contractAddresses } from 'config/contracts'
+import { useNetworkConfigStore } from 'stores'
import { queryKeys } from 'types/query-keys-factory'
-import { chain } from 'utils/chains'
interface Result {
- data: {
- bank: {
- balance: Coin[]
- }
+ bank: {
+ balance: Coin[]
}
}
-const fetchBalances = () => {
- return fetch(chain.hive, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({
- query: `
- query RedbankBalances {
- bank {
- balance(
- address: "${contractAddresses.redBank}"
- ) {
- amount
- denom
- }
- }
- }
- `,
- }),
- }).then((res) => res.json())
-}
-
export const useRedbankBalances = () => {
- const result = useQuery(queryKeys.redbankBalances(), fetchBalances)
+ const hiveUrl = useNetworkConfigStore((s) => s.hiveUrl)
+ const redBankAddress = useNetworkConfigStore((s) => s.contracts.redBank)
+ const result = useQuery(
+ queryKeys.redbankBalances(),
+ async () => {
+ return await request(
+ hiveUrl!,
+ gql`
+ query RedbankBalances {
+ bank {
+ balance(
+ address: "${redBankAddress}"
+ ) {
+ amount
+ denom
+ }
+ }
+ }
+ `,
+ )
+ },
+ {
+ enabled: !!hiveUrl && !!redBankAddress,
+ staleTime: 30000,
+ refetchInterval: 30000,
+ },
+ )
return {
...result,
- data: useMemo(() => {
- if (!result.data) return
-
- return result.data?.data.bank.balance.reduce(
- (acc, coin) => ({
- ...acc,
- [coin.denom]: coin.amount,
- }),
- {},
- ) as { [key in string]: string }
- }, [result.data]),
+ data: useMemo(() => result.data && result.data.bank.balance, [result.data]),
}
}
diff --git a/src/hooks/queries/useTokenBalance.tsx b/src/hooks/queries/useTokenBalance.tsx
deleted file mode 100644
index 14bf6f74..00000000
--- a/src/hooks/queries/useTokenBalance.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import BigNumber from 'bignumber.js'
-
-import { useWalletStore } from 'stores'
-import { queryKeys } from 'types/query-keys-factory'
-import { chain } from 'utils/chains'
-
-type Result = {
- balance: {
- amount: number
- denom: string
- }
-}
-
-export const useTokenBalance = (denom?: string) => {
- const address = useWalletStore((s) => s.address)
-
- const result = useQuery(
- queryKeys.tokenBalance(address ?? '', denom || chain.stakeCurrency.coinMinimalDenom),
- async () =>
- fetch(
- `${chain.rest}/cosmos/bank/v1beta1/balances/${address}/by_denom?denom=${
- denom || chain.stakeCurrency.coinMinimalDenom
- }`,
- ).then((res) => res.json()),
- {
- enabled: !!address,
- },
- )
-
- return {
- ...result,
- data: result?.data
- ? BigNumber(result.data.balance.amount)
- .div(10 ** chain.stakeCurrency.coinDecimals)
- .toNumber()
- : 0,
- }
-}
diff --git a/src/hooks/queries/useTokenPrices.tsx b/src/hooks/queries/useTokenPrices.tsx
index 0a1998d1..0720a389 100644
--- a/src/hooks/queries/useTokenPrices.tsx
+++ b/src/hooks/queries/useTokenPrices.tsx
@@ -2,23 +2,22 @@ import { useQuery } from '@tanstack/react-query'
import { gql, request } from 'graphql-request'
import { useMemo } from 'react'
-import { contractAddresses } from 'config/contracts'
-import { tokenInfo } from 'config/tokenInfo'
+import { useNetworkConfigStore } from 'stores'
import { queryKeys } from 'types/query-keys-factory'
-import { chain } from 'utils/chains'
-const tokenInfoList = Object.values(tokenInfo)
-
-// TODO: build gql query dynamically on whitelisted tokens
-const fetchTokenPrices = () => {
+const fetchTokenPrices = async (
+ hiveUrl: string,
+ whitelistedTokens: Asset[],
+ oracleAddress: string,
+) => {
return request(
- chain.hive,
+ hiveUrl,
gql`
query PriceOracle {
prices: wasm {
- ${tokenInfoList.map((token) => {
+ ${whitelistedTokens.map((token) => {
return `${token.symbol}: contractQuery(
- contractAddress: "${contractAddresses.oracle}"
+ contractAddress: "${oracleAddress}"
query: {
price: {
denom: "${token.denom}"
@@ -33,10 +32,17 @@ const fetchTokenPrices = () => {
}
export const useTokenPrices = () => {
- const result = useQuery(queryKeys.tokenPrices(), fetchTokenPrices, {
- refetchInterval: 30000,
- staleTime: Infinity,
- })
+ const hiveUrl = useNetworkConfigStore((s) => s.hiveUrl)
+ const whitelistedTokens = useNetworkConfigStore((s) => s.assets.whitelist)
+ const oracleAddress = useNetworkConfigStore((s) => s.contracts.oracle)
+ const result = useQuery(
+ queryKeys.tokenPrices(),
+ async () => await fetchTokenPrices(hiveUrl, whitelistedTokens, oracleAddress),
+ {
+ refetchInterval: 30000,
+ staleTime: Infinity,
+ },
+ )
return {
...result,
diff --git a/src/images/keplr-wallet-extension.png b/src/images/wallets/keplr-wallet-extension.png
similarity index 100%
rename from src/images/keplr-wallet-extension.png
rename to src/images/wallets/keplr-wallet-extension.png
diff --git a/src/images/walletconnect-keplr.png b/src/images/wallets/walletconnect-keplr.png
similarity index 100%
rename from src/images/walletconnect-keplr.png
rename to src/images/wallets/walletconnect-keplr.png
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 7ed0739b..371c9c63 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -19,8 +19,30 @@ const App = ({ Component, pageProps }: AppProps) => {
return (
<>
- Mars V2
- Mars Protocol V2
+
diff --git a/src/pages/borrow.tsx b/src/pages/borrow.tsx
index ab9df023..7f2f5626 100644
--- a/src/pages/borrow.tsx
+++ b/src/pages/borrow.tsx
@@ -3,8 +3,6 @@ import { useMemo, useRef, useState } from 'react'
import { BorrowModal, Card, RepayModal, Text } from 'components'
import { BorrowTable } from 'components/Borrow'
-import { useAccountDetailsStore } from 'stores'
-import { getTokenDecimals, getTokenInfo } from 'utils/tokens'
import {
useAllowedCoins,
useCreditAccountPositions,
@@ -12,6 +10,8 @@ import {
useRedbankBalances,
useTokenPrices,
} from 'hooks/queries'
+import { useAccountDetailsStore, useNetworkConfigStore } from 'stores'
+import { getTokenDecimals, getTokenInfo } from 'utils/tokens'
type ModalState = {
show: 'borrow' | 'repay' | false
@@ -21,6 +21,8 @@ type ModalState = {
}
const Borrow = () => {
+ const whitelistedAssets = useNetworkConfigStore((s) => s.assets.whitelist)
+
const [modalState, setModalState] = useState({
show: false,
data: { tokenDenom: '' },
@@ -53,22 +55,25 @@ const Borrow = () => {
allowedCoinsData
?.filter((denom) => borrowedAssetsMap.has(denom))
.map((denom) => {
- const { symbol, chain, icon } = getTokenInfo(denom)
+ const { symbol, name, logo } = getTokenInfo(denom, whitelistedAssets)
const borrowRate = Number(marketsData?.[denom].borrow_rate) || 0
- const marketLiquidity = BigNumber(redbankBalances?.[denom] ?? 0)
- .div(10 ** getTokenDecimals(denom))
+ const marketLiquidity = BigNumber(
+ redbankBalances?.find((asset) => asset.denom.toLowerCase() === denom.toLowerCase())
+ ?.amount || 0,
+ )
+ .div(10 ** getTokenDecimals(denom, whitelistedAssets))
.toNumber()
const borrowAmount = BigNumber(borrowedAssetsMap.get(denom) as string)
- .div(10 ** getTokenDecimals(denom))
+ .div(10 ** getTokenDecimals(denom, whitelistedAssets))
.toNumber()
const borrowValue = borrowAmount * (tokenPrices?.[denom] ?? 0)
const rowData = {
denom,
symbol,
- icon,
- chain,
+ logo,
+ name,
borrowed: {
amount: borrowAmount,
value: borrowValue,
@@ -83,17 +88,20 @@ const Borrow = () => {
allowedCoinsData
?.filter((denom) => !borrowedAssetsMap.has(denom))
.map((denom) => {
- const { symbol, chain, icon } = getTokenInfo(denom)
+ const { symbol, name, logo } = getTokenInfo(denom, whitelistedAssets)
const borrowRate = Number(marketsData?.[denom].borrow_rate) || 0
- const marketLiquidity = BigNumber(redbankBalances?.[denom] ?? 0)
- .div(10 ** getTokenDecimals(denom))
+ const marketLiquidity = BigNumber(
+ redbankBalances?.find((asset) => asset.denom.toLowerCase() === denom.toLowerCase())
+ ?.amount || 0,
+ )
+ .div(10 ** getTokenDecimals(denom, whitelistedAssets))
.toNumber()
const rowData = {
denom,
symbol,
- icon,
- chain,
+ logo,
+ name,
borrowed: null,
borrowRate,
marketLiquidity,
@@ -102,7 +110,14 @@ const Borrow = () => {
return rowData
}) ?? [],
}
- }, [allowedCoinsData, borrowedAssetsMap, marketsData, redbankBalances, tokenPrices])
+ }, [
+ allowedCoinsData,
+ borrowedAssetsMap,
+ marketsData,
+ redbankBalances,
+ tokenPrices,
+ whitelistedAssets,
+ ])
const handleBorrowClick = (denom: string) => {
setModalState({ show: 'borrow', data: { tokenDenom: denom } })
@@ -131,7 +146,7 @@ const Borrow = () => {
-
+
Available to Borrow
`export { ${f.name} } from '${f.path}'`)
export { useAccountDetailsStore } from './useAccountDetailsStore'
export { useModalStore } from './useModalStore'
-export { useSettings } from './useSettings'
+export { useNetworkConfigStore } from './useNetworkConfigStore'
+export { useSettingsStore } from './useSettingsStore'
export { useWalletStore } from './useWalletStore'
// @endindex
diff --git a/src/stores/useNetworkConfigStore.tsx b/src/stores/useNetworkConfigStore.tsx
new file mode 100644
index 00000000..5a1198d9
--- /dev/null
+++ b/src/stores/useNetworkConfigStore.tsx
@@ -0,0 +1,8 @@
+import create from 'zustand'
+
+import { networkConfig } from 'config/osmo-test-4'
+
+// TODO: Create dynamic network import
+export const useNetworkConfigStore = create()(() => {
+ return networkConfig
+})
diff --git a/src/stores/useSettings.tsx b/src/stores/useSettingsStore.tsx
similarity index 64%
rename from src/stores/useSettings.tsx
rename to src/stores/useSettingsStore.tsx
index fd360ebb..3887d21d 100644
--- a/src/stores/useSettings.tsx
+++ b/src/stores/useSettingsStore.tsx
@@ -4,6 +4,6 @@ interface SettingsStore {
enableAnimations: boolean
}
-export const useSettings = create()(() => ({
+export const useSettingsStore = create()(() => ({
enableAnimations: true,
}))
diff --git a/src/stores/useWalletStore.tsx b/src/stores/useWalletStore.tsx
index dada5395..28439c10 100644
--- a/src/stores/useWalletStore.tsx
+++ b/src/stores/useWalletStore.tsx
@@ -5,7 +5,7 @@ import {
} from '@marsprotocol/wallet-connector'
import create from 'zustand'
-import { contractAddresses } from 'config/contracts'
+import { networkConfig } from 'config/osmo-test-4'
import { MarsAccountNftClient } from 'types/generated/mars-account-nft/MarsAccountNft.client'
import { MarsCreditManagerClient } from 'types/generated/mars-credit-manager/MarsCreditManager.client'
import { MarsSwapperBaseClient } from 'types/generated/mars-swapper-base/MarsSwapperBase.client'
@@ -40,22 +40,23 @@ export const useWalletStore = create()((set, get) => ({
status: WalletConnectionStatus.ReadyForConnection,
clients: {},
actions: {
+ // TODO: work with slices in one global store instead
initClients: (address, signingClient) => {
if (!signingClient) return
const accountNft = new MarsAccountNftClient(
signingClient,
address,
- contractAddresses.accountNft,
+ networkConfig.contracts.accountNft,
)
const creditManager = new MarsCreditManagerClient(
signingClient,
address,
- contractAddresses.creditManager,
+ networkConfig.contracts.creditManager,
)
const swapperBase = new MarsSwapperBaseClient(
signingClient,
address,
- contractAddresses.swapper,
+ networkConfig.contracts.swapper,
)
set(() => ({
diff --git a/src/types/index.ts b/src/types/index.ts
deleted file mode 100644
index f291da59..00000000
--- a/src/types/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// ENUMS
-
-export enum ChainId {
- Mainnet = 'injective-1',
- Testnet = 'injective-888',
- Devnet = 'injective-777',
-}
-
-export enum Wallet {
- Metamask = 'metamask',
- Ledger = 'ledger',
- LedgerLegacy = 'ledger-legacy',
- Trezor = 'trezor',
- Keplr = 'keplr',
- Torus = 'torus',
- WalletConnect = 'wallet-connect',
-}
-
-// COSMOS
-export enum CosmosChainId {
- Injective = 'injective-1',
- Osmosis = 'osmosis-1',
-}
-
-export enum TestnetCosmosChainId {
- Osmosis = 'osmo-test-4',
- Cosmoshub = 'cosmoshub-testnet',
-}
diff --git a/src/types/interfaces/asset.d.ts b/src/types/interfaces/asset.d.ts
new file mode 100644
index 00000000..cbcfe064
--- /dev/null
+++ b/src/types/interfaces/asset.d.ts
@@ -0,0 +1,15 @@
+interface Asset {
+ color: string
+ name: string
+ denom: string
+ symbol: 'OSMO' | 'ATOM' | 'CRO'
+ contract_addr?: string
+ logo: string
+ decimals: number
+ hasOraclePrice: boolean
+ poolId?: number
+}
+
+interface OtherAsset extends Omit {
+ symbol: 'MARS'
+}
diff --git a/src/types/components/FormattedNumber.d.ts b/src/types/interfaces/components/FormattedNumber.d.ts
similarity index 100%
rename from src/types/components/FormattedNumber.d.ts
rename to src/types/interfaces/components/FormattedNumber.d.ts
diff --git a/src/types/components/PositionsList.d.ts b/src/types/interfaces/components/PositionsList.d.ts
similarity index 100%
rename from src/types/components/PositionsList.d.ts
rename to src/types/interfaces/components/PositionsList.d.ts
diff --git a/src/types/components/RiskChart.d.ts b/src/types/interfaces/components/RiskChart.d.ts
similarity index 100%
rename from src/types/components/RiskChart.d.ts
rename to src/types/interfaces/components/RiskChart.d.ts
diff --git a/src/types/hooks/useAccountStats.d.ts b/src/types/interfaces/hooks/useAccountStats.d.ts
similarity index 100%
rename from src/types/hooks/useAccountStats.d.ts
rename to src/types/interfaces/hooks/useAccountStats.d.ts
diff --git a/src/types/hooks/useMarkets.d.ts b/src/types/interfaces/hooks/useMarkets.d.ts
similarity index 100%
rename from src/types/hooks/useMarkets.d.ts
rename to src/types/interfaces/hooks/useMarkets.d.ts
diff --git a/src/types/hooks/useTokenPrices.d.ts b/src/types/interfaces/hooks/useTokenPrices.d.ts
similarity index 100%
rename from src/types/hooks/useTokenPrices.d.ts
rename to src/types/interfaces/hooks/useTokenPrices.d.ts
diff --git a/src/types/interfaces/networkConfig.d.ts b/src/types/interfaces/networkConfig.d.ts
new file mode 100644
index 00000000..83e61c09
--- /dev/null
+++ b/src/types/interfaces/networkConfig.d.ts
@@ -0,0 +1,22 @@
+interface NetworkConfig {
+ name: string
+ hiveUrl: string
+ rpcUrl: string
+ restUrl: string
+ contracts: {
+ accountNft: string
+ mockVault: string
+ marsOracleAdapter: string
+ swapper: string
+ mockZapper: string
+ creditManager: string
+ redBank: string
+ oracle: string
+ }
+ assets: {
+ base: Asset
+ whitelist: Asset[]
+ other: OtherAsset[]
+ }
+ appUrl: string
+}
diff --git a/src/types/utils/formatters.d.ts b/src/types/interfaces/utils/formatters.d.ts
similarity index 100%
rename from src/types/utils/formatters.d.ts
rename to src/types/interfaces/utils/formatters.d.ts
diff --git a/src/utils/address.ts b/src/utils/address.ts
deleted file mode 100644
index 7771598c..00000000
--- a/src/utils/address.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { bech32 } from 'bech32'
-import { Address } from 'ethereumjs-util'
-
-export const getInjectiveAddress = (address: string): string => {
- const addressBuffer = Address.fromString(address.toString()).toBuffer()
-
- return bech32.encode('inj', bech32.toWords(addressBuffer))
-}
-
-export const getAddressFromInjectiveAddress = (address: string): string => {
- if (address.startsWith('0x')) {
- return address
- }
-
- return `0x${Buffer.from(bech32.fromWords(bech32.decode(address).words)).toString('hex')}`
-}
diff --git a/src/utils/balances.ts b/src/utils/balances.ts
index e77169af..50ff59bd 100644
--- a/src/utils/balances.ts
+++ b/src/utils/balances.ts
@@ -7,6 +7,7 @@ export const formatBalances = (
positionData: Coin[],
tokenPrices: KeyValuePair,
debt: boolean,
+ whitelistedAssets: Asset[],
marketsData?: MarketData,
): PositionsData[] => {
const balances: PositionsData[] = []
@@ -14,16 +15,16 @@ export const formatBalances = (
positionData.forEach((coin) => {
const dataEntry: PositionsData = {
asset: {
- amount: getTokenSymbol(coin.denom),
+ amount: getTokenSymbol(coin.denom, whitelistedAssets),
type: debt ? 'debt' : undefined,
},
value: {
- amount: getTokenTotalUSDValue(coin.amount, coin.denom, tokenPrices),
+ amount: getTokenTotalUSDValue(coin.amount, coin.denom, whitelistedAssets, tokenPrices),
format: 'number',
prefix: '$',
},
size: {
- amount: lookup(coin.amount, coin.denom),
+ amount: lookup(coin.amount, coin.denom, whitelistedAssets),
format: 'number',
maxDecimals: 4,
minDecimals: 0,
diff --git a/src/utils/chains.ts b/src/utils/chains.ts
deleted file mode 100644
index c042274a..00000000
--- a/src/utils/chains.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-export const chainsInfo = {
- Injective: {
- chainId: 'injective-1',
- rpc: 'https://tm.injective.network',
- rest: 'https://lcd.injective.network',
- stakeCurrency: {
- coinDenom: 'INJ',
- coinMinimalDenom: 'inj',
- coinDecimals: 18,
- coinGeckoId: 'injective-protocol',
- coinImageUrl: '/tokens/injective.svg',
- },
- // works
- // rest: "https://lcd.injective.network",
- },
- InjectiveTestnet: {
- chainId: 'injective-888',
- // need to check
- rpc: 'https://testnet.tm.injective.dev',
- rest: 'https://testnet.lcd.injective.dev',
- stakeCurrency: {
- coinDenom: 'INJ',
- coinMinimalDenom: 'inj',
- coinDecimals: 18,
- coinGeckoId: 'injective-protocol',
- coinImageUrl: '/tokens/injective.svg',
- },
- },
- Osmosis: {
- chainId: 'osmosis-1',
- rpc: 'https://rpc.osmosis.zone',
- rest: 'https://lcd.osmosis.zone',
- stakeCurrency: {
- coinDenom: 'OSMO',
- coinMinimalDenom: 'uosmo',
- coinDecimals: 6,
- coinGeckoId: 'osmosis',
- coinImageUrl: '/tokens/osmo.svg',
- },
- },
- OsmosisTestnet: {
- chainId: 'osmo-test-4',
- rpc: 'https://osmosis-delphi-testnet-1.simply-vc.com.mt/XF32UOOU55CX/osmosis-rpc',
- rest: 'https://osmosis-delphi-testnet-1.simply-vc.com.mt/XF32UOOU55CX/osmosis-lcd',
- hive: 'https://osmosis-delphi-testnet-1.simply-vc.com.mt/XF32UOOU55CX/osmosis-hive/graphql',
- stakeCurrency: {
- coinDenom: 'OSMO',
- coinMinimalDenom: 'uosmo',
- coinDecimals: 6,
- coinGeckoId: 'osmosis',
- coinImageUrl: '/tokens/osmo.svg',
- },
- },
-}
-
-export const chain = chainsInfo.OsmosisTestnet
diff --git a/src/utils/contants.ts b/src/utils/contants.ts
index 154e2950..c42b7753 100644
--- a/src/utils/contants.ts
+++ b/src/utils/contants.ts
@@ -1,11 +1,9 @@
-import { chain } from 'utils/chains'
-
// StdFee
// TODO: decide some strategy to handle fees
export const hardcodedFee = {
amount: [
{
- denom: chain.stakeCurrency.coinMinimalDenom,
+ denom: 'uosmo',
amount: '100000',
},
],
diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts
index e5b4f937..2d9eac5b 100644
--- a/src/utils/formatters.ts
+++ b/src/utils/formatters.ts
@@ -20,20 +20,21 @@ export const formatCurrency = (value: string | number) => {
export const getTokenTotalUSDValue = (
amount: string,
denom: string,
+ whitelistedAssets: Asset[],
tokenPrices?: KeyValuePair,
) => {
if (!tokenPrices) return 0
return (
BigNumber(amount)
- .div(10 ** getTokenDecimals(denom))
+ .div(10 ** getTokenDecimals(denom, whitelistedAssets))
.toNumber() * tokenPrices[denom]
)
}
-export const lookup = (amount: string | number, denom: string) => {
+export const lookup = (amount: string | number, denom: string, whitelistedAssets: Asset[]) => {
return BigNumber(amount)
- .div(10 ** getTokenDecimals(denom))
+ .div(10 ** getTokenDecimals(denom, whitelistedAssets))
.toNumber()
}
diff --git a/src/utils/tokens.ts b/src/utils/tokens.ts
index 8c66a5b5..de5fd6b0 100644
--- a/src/utils/tokens.ts
+++ b/src/utils/tokens.ts
@@ -1,17 +1,15 @@
-import { tokenInfo } from 'config/tokenInfo'
+import { networkConfig } from 'config/osmo-test-4'
-export const getTokenSymbol = (denom: string) => {
- return tokenInfo[denom]?.symbol ?? denom
-}
+export const getTokenSymbol = (denom: string, whitelistedAssets: Asset[]) =>
+ whitelistedAssets.find((asset) => asset.denom.toLowerCase() === denom.toLowerCase())?.symbol || ''
-export const getTokenDecimals = (denom: string) => {
- return tokenInfo[denom]?.decimals ?? 6
-}
+export const getTokenDecimals = (denom: string, whitelistedAssets: Asset[]) =>
+ whitelistedAssets.find((asset) => asset.denom.toLowerCase() === denom.toLowerCase())?.decimals ||
+ 6
-export const getTokenIcon = (denom: string) => {
- return tokenInfo[denom].icon
-}
+export const getTokenIcon = (denom: string, whitelistedAssets: Asset[]) =>
+ whitelistedAssets.find((asset) => asset.denom.toLowerCase() === denom.toLowerCase())?.logo || ''
-export const getTokenInfo = (denom: string) => {
- return tokenInfo[denom]
-}
+export const getTokenInfo = (denom: string, whitelistedAssets: Asset[]) =>
+ whitelistedAssets.find((asset) => asset.denom.toLowerCase() === denom.toLowerCase()) ||
+ networkConfig.assets.base
diff --git a/yarn.lock b/yarn.lock
index 674f2cb2..f9cf28da 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2625,10 +2625,10 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-11.11.6.tgz#df929d1bb2eee5afdda598a41930fe50b43eaa6a"
integrity sha512-Exw4yUWMBXM3X+8oqzJNRqZSwUAaS4+7NdvHqQuFi/d+synz++xmX3QIf+BFqneW8N31R8Ky+sikfZUXq07ggQ==
-"@types/node@18.7.14":
- version "18.7.14"
- resolved "https://registry.yarnpkg.com/@types/node/-/node-18.7.14.tgz#0fe081752a3333392d00586d815485a17c2cf3c9"
- integrity sha512-6bbDaETVi8oyIARulOE9qF1/Qdi/23z6emrUh0fNJRUmjznqrixD4MpGDdgOFk5Xb0m2H6Xu42JGdvAxaJR/wA==
+"@types/node@^18.11.13":
+ version "18.11.17"
+ resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.17.tgz#5c009e1d9c38f4a2a9d45c0b0c493fe6cdb4bcb5"
+ integrity sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng==
"@types/parse-json@^4.0.0":
version "4.0.0"