diff --git a/src/components/Account/AccountList.tsx b/src/components/Account/AccountList.tsx index 2d68786b..60d7646d 100644 --- a/src/components/Account/AccountList.tsx +++ b/src/components/Account/AccountList.tsx @@ -28,14 +28,6 @@ const accountCardHeaderClasses = classNames( 'border border-transparent border-b-white/20', ) -// TODO: Make this dynamic (token select) -const formatOptions = { - decimals: ASSETS[0].decimals, - minDecimals: 0, - maxDecimals: ASSETS[0].decimals, - suffix: ` ${ASSETS[0].symbol}`, -} - export default function AccountList(props: Props) { const router = useRouter() const params = useParams() @@ -108,11 +100,7 @@ export default function AccountList(props: Props) { {isActive ? ( <>
- +
+
+
+ + Display Currency + + + Sets the denomination of values to a different currency. While OSMO is the + currency the TWAP oracles return. All other values are fetched from liquidity + pools. + + } + /> +
+ +
diff --git a/src/constants/assets.ts b/src/constants/assets.ts index 32b90097..f6282dc5 100644 --- a/src/constants/assets.ts +++ b/src/constants/assets.ts @@ -11,6 +11,7 @@ export const ASSETS: Asset[] = [ logo: '/tokens/osmo.svg', isEnabled: true, isMarket: true, + isDisplayCurrency: true, }, { symbol: 'ATOM', @@ -22,6 +23,7 @@ export const ASSETS: Asset[] = [ hasOraclePrice: true, isEnabled: IS_TESTNET ? true : false, isMarket: true, + isDisplayCurrency: true, }, { symbol: 'CRO', @@ -58,5 +60,6 @@ export const ASSETS: Asset[] = [ hasOraclePrice: true, isMarket: IS_TESTNET, isEnabled: true, + isDisplayCurrency: true, }, ] diff --git a/src/pages/api/prices/index.ts b/src/pages/api/prices/index.ts index 9982d7ec..545a7233 100644 --- a/src/pages/api/prices/index.ts +++ b/src/pages/api/prices/index.ts @@ -37,3 +37,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) return res.status(200).json(data) } + +interface TokenPricesResult { + prices: { + [key: string]: { + denom: string + price: string + } + } +} diff --git a/src/store/index.ts b/src/store/index.ts index 964f8c9a..976f17ba 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -3,12 +3,16 @@ import { devtools } from 'zustand/middleware' import { BroadcastSlice, createBroadcastSlice } from 'store/slices/broadcast' import { CommonSlice, createCommonSlice } from 'store/slices/common' +import { createCurrencySlice, CurrencySlice } from 'store/slices/currency' +import { createModalSlice, ModalSlice } from 'store/slices/modal' -export interface Store extends CommonSlice, BroadcastSlice {} +export interface Store extends CommonSlice, BroadcastSlice, CurrencySlice, ModalSlice {} const store = (set: SetState, get: GetState) => ({ ...createCommonSlice(set, get), ...createBroadcastSlice(set, get), + ...createCurrencySlice(set, get), + ...createModalSlice(set, get), }) let useStore: UseBoundStore> diff --git a/src/store/slices/common.ts b/src/store/slices/common.ts index fdd14179..4b789241 100644 --- a/src/store/slices/common.ts +++ b/src/store/slices/common.ts @@ -2,78 +2,23 @@ import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate' import { WalletClient, WalletConnectionStatus } from '@marsprotocol/wallet-connector' import { GetState, SetState } from 'zustand' -import { ENV } from 'constants/env' -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' - export interface CommonSlice { accounts: Account[] | null address?: string - borrowModal: { - asset: Asset - marketData: BorrowAsset | BorrowAssetActive - isRepay?: boolean - } | null - client?: WalletClient - clients: { - accountNft?: MarsAccountNftClient - creditManager?: MarsCreditManagerClient - swapperBase?: MarsSwapperBaseClient - } - createAccountModal: boolean - deleteAccountModal: boolean enableAnimations: boolean - fundAccountModal: boolean isOpen: boolean - prices: Coin[] selectedAccount: string | null - signingClient?: SigningCosmWasmClient + client?: WalletClient status: WalletConnectionStatus - withdrawModal: boolean - initClients: (address: string, signingClient: SigningCosmWasmClient) => void } export function createCommonSlice(set: SetState, get: GetState) { return { accounts: null, - borrowModal: null, - createAccountModal: false, - clients: {}, - deleteAccountModal: false, + creditAccounts: null, enableAnimations: true, - fundAccountModal: false, isOpen: true, - prices: [], - repayModal: false, selectedAccount: null, status: WalletConnectionStatus.Unconnected, - withdrawModal: false, - initClients: (address: string, signingClient: SigningCosmWasmClient) => { - if (!signingClient) return - const accountNft = new MarsAccountNftClient( - signingClient, - address, - ENV.ADDRESS_ACCOUNT_NFT || '', - ) - const creditManager = new MarsCreditManagerClient( - signingClient, - address, - ENV.ADDRESS_CREDIT_MANAGER || '', - ) - const swapperBase = new MarsSwapperBaseClient( - signingClient, - address, - ENV.ADDRESS_SWAPPER || '', - ) - - set(() => ({ - clients: { - accountNft, - creditManager, - swapperBase, - }, - })) - }, } } diff --git a/src/store/slices/currency.ts b/src/store/slices/currency.ts new file mode 100644 index 00000000..9925f676 --- /dev/null +++ b/src/store/slices/currency.ts @@ -0,0 +1,18 @@ +import { Coin } from '@cosmjs/stargate' +import { GetState, SetState } from 'zustand' + +import { ASSETS } from 'constants/assets' + +export interface CurrencySlice { + baseCurrency: Asset + displayCurrency: Asset + prices: Coin[] +} + +export function createCurrencySlice(set: SetState, get: GetState) { + return { + baseCurrency: ASSETS[0], + displayCurrency: ASSETS.find((asset) => asset.denom === ASSETS[0].denom)!, + prices: [], + } +} diff --git a/src/store/slices/modal.ts b/src/store/slices/modal.ts new file mode 100644 index 00000000..f2c1582c --- /dev/null +++ b/src/store/slices/modal.ts @@ -0,0 +1,23 @@ +import { GetState, SetState } from 'zustand' + +export interface ModalSlice { + borrowModal: { + asset: Asset + marketData: BorrowAsset | BorrowAssetActive + isRepay?: boolean + } | null + createAccountModal: boolean + deleteAccountModal: boolean + fundAccountModal: boolean + withdrawModal: boolean +} + +export function createModalSlice(set: SetState, get: GetState) { + return { + borrowModal: null, + createAccountModal: false, + deleteAccountModal: false, + fundAccountModal: false, + withdrawModal: false, + } +} diff --git a/src/types/interfaces/asset.d.ts b/src/types/interfaces/asset.d.ts index 4ec1c4f1..33d55d20 100644 --- a/src/types/interfaces/asset.d.ts +++ b/src/types/interfaces/asset.d.ts @@ -3,6 +3,7 @@ interface Asset { name: string denom: string symbol: 'OSMO' | 'ATOM' | 'CRO' | 'MARS' | 'JUNO' + prefix?: string contract_addr?: string logo: string decimals: number @@ -10,6 +11,7 @@ interface Asset { poolId?: number isEnabled: boolean isMarket: boolean + isDisplayCurrency?: boolean } interface OtherAsset extends Omit { diff --git a/src/types/interfaces/hooks/useTokenPrices.d.ts b/src/types/interfaces/hooks/useTokenPrices.d.ts deleted file mode 100644 index 562716e0..00000000 --- a/src/types/interfaces/hooks/useTokenPrices.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -interface TokenPricesResult { - prices: { - [key: string]: { - denom: string - price: string - } - } -} diff --git a/src/utils/assets.ts b/src/utils/assets.ts index 524365d6..85b062ac 100644 --- a/src/utils/assets.ts +++ b/src/utils/assets.ts @@ -15,3 +15,7 @@ export function getMarketAssets(): Asset[] { export function getBaseAsset() { return ASSETS.find((asset) => asset.denom === 'uosmo')! } + +export function getDisplayCurrencies() { + return ASSETS.filter((asset) => asset.isDisplayCurrency) +}