Merge pull request #25 from mars-protocol/v1.4.4

release v1.4.4

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mars",
   "homepage": "./",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "license": "SEE LICENSE IN LICENSE FILE",
   "private": false,
   "scripts": {

src/components/common/CosmosWalletConnectProvider/CosmosWalletConnectProvider.tsx

@@ -21,7 +21,9 @@ export const CosmosWalletConnectProvider = ({ children }: Props) => {
     if (chainInfoOverrides) return
 
     const fetchConfig = async () => {
-      const file = await import(`../../../configs/${NETWORK !== 'mainnet' ? 'osmo-test-4' : 'osmosis-1'}.ts`)
+      const file = await import(
+        `../../../configs/${NETWORK !== 'mainnet' ? 'osmo-test-4' : 'osmosis-1'}.ts`
+      )
 
       const networkConfig: NetworkConfig = file.NETWORK_CONFIG
 

src/components/common/Header/Settings.tsx

@@ -12,15 +12,13 @@ import styles from './Settings.module.scss'
 
 export const Settings = () => {
   const { t } = useTranslation()
-  const inputPlaceholder = '...'
   const queryClient = useQueryClient()
   const slippages = [0.02, 0.03]
   const [showDetails, setShowDetails] = useState(false)
   const slippage = useStore((s) => s.slippage)
   const networkConfig = useStore((s) => s.networkConfig)
-  const baseCurrency = useStore((s) => s.baseCurrency)
   const currencyAssets = useStore((s) => s.currencyAssets)
-  const [customSlippage, setCustomSlippage] = useState<string>(inputPlaceholder)
+  const [customSlippage, setCustomSlippage] = useState<number>(0)
   const [inputRef, setInputRef] = useState<React.RefObject<HTMLInputElement>>()
   const [isCustom, setIsCustom] = useState(false)
   const enableAnimations = useStore((s) => s.enableAnimations)
@@ -32,7 +30,8 @@ export const Settings = () => {
   )
 
   const onInputChange = (value: number) => {
-    setCustomSlippage(value.toString())
+    value = value / 100
+    setCustomSlippage(value)
     if (!value.toString()) {
       return
     }
@@ -42,14 +41,14 @@ export const Settings = () => {
     setIsCustom(false)
 
     if (!customSlippage) {
-      setCustomSlippage(inputPlaceholder)
+      setCustomSlippage(0)
       useStore.setState({ slippage })
       return
     }
 
     const value = Number(customSlippage || 0) / 100
     if (slippages.includes(value)) {
-      setCustomSlippage(inputPlaceholder)
+      setCustomSlippage(0)
       useStore.setState({ slippage: value })
       return
     }
@@ -178,12 +177,14 @@ export const Settings = () => {
                           onChange={onInputChange}
                           onBlur={onInputBlur}
                           onFocus={onInputFocus}
-                          value={customSlippage}
+                          value={customSlippage * 100}
                           maxValue={10}
                           maxDecimals={1}
                           maxLength={3}
                           className={styles.customSlippageBtn}
                           style={{ fontSize: 16 }}
+                          decimals={2}
+                          placeholder='...'
                         />
                         %
                       </button>

src/components/common/InputSection/InputSection.module.scss

@@ -52,6 +52,12 @@
     }
   }
 
+  .input {
+    width: 100%;
+    text-align: center;
+    font-size: rem-calc(16);
+  }
+
   .warning {
     color: $colorInfoVoteAgainst;
     align-self: center;
@@ -107,40 +113,6 @@
     @include typoS;
   }
 
-  .inputWrapper {
-    align-self: center;
-    opacity: 1;
-    border: 1px solid $colorGreyHighlight;
-    width: rem-calc(448);
-    max-width: 100%;
-    height: rem-calc(56);
-    border-radius: $borderRadiusS;
-    display: flex;
-    justify-content: center;
-
-    .inputPercentage {
-      text-align: center;
-      opacity: 1;
-      background: none;
-      border: none;
-      color: $fontColorLightPrimary;
-      @include typoXXL;
-
-      &::placeholder {
-        text-indent: rem-calc(-14);
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    input::-webkit-inner-spin-button {
-      appearance: none;
-      @include margin(0);
-    }
-  }
-
   .inputRaw {
     align-self: center;
     background: none;
@@ -155,6 +127,18 @@
     margin-bottom: space(3);
     flex-wrap: wrap;
   }
+
+  .inputWrapper {
+    align-self: center;
+    opacity: 1;
+    border: 1px solid $colorGreyHighlight;
+    width: rem-calc(448);
+    max-width: 100%;
+    height: rem-calc(56);
+    border-radius: $borderRadiusS;
+    display: flex;
+    justify-content: center;
+  }
 }
 
 .feeTooltipContent {

src/components/common/InputSection/InputSection.tsx

@@ -1,7 +1,6 @@
-import { Button, DisplayCurrency, InputSlider } from 'components/common'
+import { Button, DisplayCurrency, InputSlider, NumberInput } from 'components/common'
-import { formatValue, lookup, lookupSymbol, parseNumberInput } from 'libs/parse'
+import { lookupSymbol } from 'libs/parse'
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import CurrencyInput from 'react-currency-input-field'
 import { useTranslation } from 'react-i18next'
 import useStore from 'store'
 import { ViewType } from 'types/enums'
@@ -157,42 +156,16 @@ export const InputSection = ({
         {produceUpperInputInfo()}
 
         <div className={styles.inputWrapper}>
-          <CurrencyInput
+          <NumberInput
-            allowNegativeValue={false}
+            onChange={inputCallback}
-            autoFocus={true}
+            minValue={0}
-            className={`h4 number ${styles.inputPercentage}`}
+            maxValue={maxUsableAmount || 0}
-            decimalSeparator='.'
+            value={amount}
-            decimalsLimit={asset.decimals}
+            maxDecimals={asset.decimals}
-            disableAbbreviations={true}
+            allowNegative={false}
-            disabled={disabled}
+            suffix={suffix}
-            groupSeparator=','
+            className={`number ${styles.input}`}
-            name='currencyInput'
+            decimals={asset.decimals}
-            onKeyPress={(event) => {
-              if (event.key === 'Enter') {
-                onEnterHandler()
-              }
-            }}
-            onValueChange={(value) => {
-              if (value?.charAt(value.length - 1) !== '.') {
-                inputCallback(parseNumberInput(value))
-                setFakeAmount(undefined)
-              } else {
-                setFakeAmount(value)
-              }
-            }}
-            placeholder='0'
-            suffix={` ${suffix}`}
-            value={
-              fakeAmount
-                ? fakeAmount
-                : amount
-                ? lookup(
-                    Number(formatValue(amount, 0, 0, false, false, false, false, false)),
-                    asset.denom,
-                    asset.decimals,
-                  )
-                : ''
-            }
           />
         </div>
         <DisplayCurrency

src/components/common/NumberInput/NumberInput.tsx

@@ -1,11 +1,14 @@
-import { lookup } from 'libs/parse'
+import BigNumber from 'bignumber.js'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 
 import styles from './NumberInput.module.scss'
 
+BigNumber.config({ EXPONENTIAL_AT: [-24, 20] })
+
 interface Props {
-  value: string
+  value: number
   className: string
+  decimals: number
   maxDecimals: number
   minValue?: number
   maxValue?: number
@@ -13,6 +16,7 @@ interface Props {
   allowNegative?: boolean
   suffix?: string
   style?: {}
+  placeholder?: string
   onChange: (value: number) => void
   onBlur?: () => void
   onFocus?: () => void
@@ -22,17 +26,40 @@ interface Props {
 export const NumberInput = (props: Props) => {
   const inputRef = React.useRef<HTMLInputElement>(null)
   const cursorRef = React.useRef(0)
+
+  const magnifyValue = (value: string) => {
+    return new BigNumber(value).shiftedBy(props.decimals).toString()
+  }
+
+  const minifyValue = useCallback(
+    (value: string) => {
+      return new BigNumber(value).shiftedBy(-1 * props.decimals).toString()
+    },
+    [props.decimals],
+  )
+
   const [inputValue, setInputValue] = useState({
-    formatted: props.value,
+    formatted: minifyValue(props.value.toString()),
-    value: Number(props.value),
+    value: props.value,
   })
 
+  const clearDots = (value: string) => {
+    const regex = new RegExp(/\.\./g)
+    if (regex.test(value)) {
+      const search = '.'
+      const replaceWith = ''
+      value = value.split(search).join(replaceWith)
+    }
+
+    return value
+  }
+
   useEffect(() => {
     setInputValue({
-      formatted: props.value,
+      formatted: minifyValue(props.value.toString()),
       value: Number(props.value),
     })
-  }, [props.value])
+  }, [props.value, minifyValue])
 
   useEffect(() => {
     if (!props.onRef) return
@@ -73,9 +100,14 @@ export const NumberInput = (props: Props) => {
   }, [inputValue, inputRef])
 
   const onInputChange = (value: string) => {
-    if (props.suffix) {
+    if (props.placeholder) {
-      value = value.replace(props.suffix, '')
+      value = clearDots(value)
     }
+
+    if (props.suffix) {
+      value = value.replace(' ' + props.suffix, '')
+    }
+
     const numberCount = value.match(/[0-9]/g)?.length || 0
     const decimals = value.split('.')[1]?.length || 0
     const lastChar = value.charAt(value.length - 1)
@@ -129,14 +161,25 @@ export const NumberInput = (props: Props) => {
       return
     }
 
-    updateValues(String(lookup(Number(value), '', 6)), Number(value))
+    if (Number(value) === 0) {
+      updateValues(value, 0)
+      return
+    }
+
+    updateValues(value, Number(magnifyValue(value)))
   }
 
   return (
     <input
       ref={inputRef}
       type='text'
-      value={`${inputValue.formatted}${props.suffix ? props.suffix : ''}`}
+      value={
+        props.placeholder && !props.value
+          ? props.placeholder
+          : `${inputValue.formatted ? inputValue.formatted : ''}${
+              props.suffix ? ' ' + props.suffix : ''
+            }`
+      }
       onFocus={onInputFocus}
       onChange={(e) => onInputChange(e.target.value)}
       onBlur={props.onBlur}

src/components/common/TxModal/Action.tsx

@@ -86,6 +86,7 @@ export const Action = ({
   const convertToBaseCurrency = useStore((s) => s.convertToBaseCurrency)
   const findUserDebt = useStore((s) => s.findUserDebt)
   const enableAnimations = useStore((s) => s.enableAnimations)
+  const baseCurrencyDecimals = useStore((s) => s.baseCurrency.decimals)
 
   // ------------------
   // LOCAL STATE
@@ -135,6 +136,7 @@ export const Action = ({
         amount * currentAssetPrice, // amount in display currency
         activeView,
         relevantBalanceKey,
+        baseCurrencyDecimals,
       ),
     [
       activeView,
@@ -144,6 +146,7 @@ export const Action = ({
       denom,
       redBankAssets,
       relevantBalanceKey,
+      baseCurrencyDecimals,
     ],
   )
 
@@ -155,6 +158,7 @@ export const Action = ({
       0.0,
       activeView,
       relevantBalanceKey,
+      baseCurrencyDecimals,
     ),
     relevantBalanceKey,
   )
@@ -311,9 +315,7 @@ export const Action = ({
 
   const amountUntilDepositCap = currentAsset.depositCap - Number(currentAsset.depositLiquidity)
 
-  const onValueEntered = (newValue: number) => {
+  const onValueEntered = (microValue: number) => {
-    let microValue = Number(magnify(newValue, decimals)) || 0
-
     if (microValue >= maxUsableAmount) microValue = maxUsableAmount
     setAmountCallback(Number(formatValue(microValue, 0, 0, false, false, false, false, false)))
     setCapHit(amount > amountUntilDepositCap && activeView === ViewType.Deposit)

src/components/fields/PositionInput/TokenInput/TokenInput.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import { Button, DisplayCurrency, NumberInput } from 'components/common'
 import { findByDenom } from 'functions'
 import { useAsset } from 'hooks/data'
-import { formatValue, magnify } from 'libs/parse'
+import { formatValue } from 'libs/parse'
 import { useTranslation } from 'react-i18next'
 import useStore from 'store'
 
@@ -43,9 +43,7 @@ export const TokenInput = (props: Props) => {
     props.borrowRate !== undefined && styles.isBorrow,
   ])
 
-  const onValueEntered = (newValue: number) => {
+  const onValueEntered = (microValue: number) => {
-    let microValue = Number(magnify(newValue, asset?.decimals || 0))
-
     if (props.maxAmount !== undefined) {
       if (microValue >= (props.maxAmount ?? 0)) microValue = props.maxAmount
     } else {
@@ -58,9 +56,7 @@ export const TokenInput = (props: Props) => {
 
   if (!asset) return null
 
-  const maxAmount =
+  const maxAmount = props.maxAmount === undefined ? Number(walletBalance.amount) : props.maxAmount
-    (props.maxAmount === undefined ? Number(walletBalance.amount) : props.maxAmount) /
-    10 ** asset.decimals
 
   const showGasWarning =
     props.maxAmount &&
@@ -74,22 +70,21 @@ export const TokenInput = (props: Props) => {
         color='quaternary'
         className={`xxsCaps faded ${styles.maxBtn}`}
         onClick={() => onValueEntered(maxAmount)}
-        text={`${props.maxAmountLabel}: ${maxAmount}`}
+        text={`${props.maxAmountLabel}: ${maxAmount / 10 ** asset.decimals}`}
         variant='transparent'
       />
       <div className={styles.input}>
         <div className={containerClasses}>
           <NumberInput
             onChange={onValueEntered}
-            onFocus={() => {}}
-            onBlur={() => {}}
             minValue={0}
-            maxValue={(props.maxAmount || 0) / 10 ** asset.decimals}
+            maxValue={props.maxAmount || 0}
-            value={(props.amount / 10 ** asset.decimals).toString()}
+            value={props.amount}
-            maxDecimals={6}
+            maxDecimals={asset.decimals}
             allowNegative={false}
             suffix={isSingleToken ? ` ${props.input.symbol}` : ''}
             className={inputClasses}
+            decimals={asset.decimals}
           />
           {!isSingleToken && (
             <>

src/components/redbank/AssetTable/ActionsRow.tsx

@@ -29,7 +29,7 @@ export const ActionsRow = ({ row, type }: Props) => {
     tr: true,
     expanded: row.getIsExpanded(),
   })
-  const assetSymbol = row.original.symbol
+  const assetID = row.original.id
 
   return (
     <tr key={row.id} className={trClasses} onClick={() => row.toggleExpanded()}>
@@ -43,7 +43,7 @@ export const ActionsRow = ({ row, type }: Props) => {
                   window.open(
                     getSwapUrl({
                       baseUrl: appUrl,
-                      to: assetSymbol,
+                      to: assetID,
                     }),
                   )
                 }}
@@ -60,14 +60,14 @@ export const ActionsRow = ({ row, type }: Props) => {
                     prefix={<SVG.Deposit />}
                     size='small'
                     text={t('redbank.deposit')}
-                    onClick={() => router.push(`/redbank/deposit/${assetSymbol}`)}
+                    onClick={() => router.push(`/redbank/deposit/${assetID}`)}
                   />
                 }
                 tooltip={
                   hasBalance
                     ? null
                     : t('redbank.toDepositAssetOnChain', {
-                        asset: assetSymbol,
+                        asset: assetID,
                         chain: chainInfo?.name,
                       })
                 }
@@ -78,7 +78,7 @@ export const ActionsRow = ({ row, type }: Props) => {
                   prefix={<SVG.Withdraw />}
                   size='small'
                   text={t('redbank.withdraw')}
-                  onClick={() => router.push(`/redbank/withdraw/${assetSymbol}`)}
+                  onClick={() => router.push(`/redbank/withdraw/${assetID}`)}
                 />
               )}
             </>
@@ -94,7 +94,7 @@ export const ActionsRow = ({ row, type }: Props) => {
                         window.open(
                           getSwapUrl({
                             baseUrl: appUrl,
-                            to: assetSymbol,
+                            to: assetID,
                           }),
                         )
                       }}
@@ -112,13 +112,13 @@ export const ActionsRow = ({ row, type }: Props) => {
                         prefix={<SVG.Deposit />}
                         size='small'
                         text={t('common.repay')}
-                        onClick={() => router.push(`/redbank/repay/${assetSymbol}`)}
+                        onClick={() => router.push(`/redbank/repay/${assetID}`)}
                       />
                     }
                     tooltip={
                       !hasBalance
                         ? t('redbank.noFundsForRepay', {
-                            symbol: assetSymbol,
+                            symbol: assetID,
                           })
                         : null
                     }
@@ -134,7 +134,7 @@ export const ActionsRow = ({ row, type }: Props) => {
                     disabled={row.original.marketLiquidity === '0' || hasNeverDeposited}
                     size='small'
                     text={t('common.borrow')}
-                    onClick={() => router.push(`/redbank/borrow/${assetSymbol}`)}
+                    onClick={() => router.push(`/redbank/borrow/${assetID}`)}
                   />
                 }
                 tooltip={

src/components/redbank/BorrowColumns/useBorrowColumns.module.scss

@@ -15,9 +15,21 @@
     background-image: $colorGradientATOM;
   }
 
+  &.JUNO {
+    background-image: $colorGradientJUNO;
+  }
+
   &.axlUSDC {
     background-image: $colorGradientAxlUSDC;
   }
+
+  &.axlWBTC {
+    background-image: $colorGradientAxlWBTC;
+  }
+
+  &.axlWETH {
+    background-image: $colorGradientAxlWETH;
+  }
 }
 
 .logo {

src/components/redbank/BorrowColumns/useBorrowColumns.tsx

@@ -19,7 +19,7 @@ export const useBorrowColumns = () => {
         header: '',
         cell: (info) => (
           <div
-            className={`${styles.color} ${styles[info.row.original.symbol]} ${
+            className={`${styles.color} ${styles[info.row.original.id]} ${
               info.row.getIsExpanded() ? styles.expanded : ''
             }`}
           />
@@ -34,7 +34,7 @@ export const useBorrowColumns = () => {
           </div>
         ),
       }),
-      columnHelper.accessor('name', {
+      columnHelper.accessor('symbol', {
         enableSorting: enableSorting,
         header: () => (
           <TextTooltip text={t('common.asset')} tooltip={t('redbank.tooltips.borrow.assets')} />
@@ -42,8 +42,8 @@ export const useBorrowColumns = () => {
         id: 'name',
         cell: (info) => (
           <>
-            <p className='m'>{info.row.original.symbol}</p>
+            <p className='m'>{info.getValue()}</p>
-            <p className='s faded'>{info.getValue()}</p>
+            <p className='s faded'>{info.row.original.name}</p>
           </>
         ),
       }),

src/components/redbank/DepositColumns/useDepositColumns.module.scss

@@ -15,6 +15,10 @@
     background-image: $colorGradientATOM;
   }
 
+  &.JUNO {
+    background-image: $colorGradientJUNO;
+  }
+
   &.axlUSDC {
     background-image: $colorGradientAxlUSDC;
   }
@@ -22,6 +26,14 @@
   &.stATOM {
     background-image: $colorGradientStATOM;
   }
+
+  &.axlWBTC {
+    background-image: $colorGradientAxlWBTC;
+  }
+
+  &.axlWETH {
+    background-image: $colorGradientAxlWETH;
+  }
 }
 
 .logo {

src/components/redbank/DepositColumns/useDepositColumns.tsx

@@ -23,7 +23,7 @@ export const useDepositColumns = () => {
         header: '',
         cell: (info) => (
           <div
-            className={`${styles.color} ${styles[info.row.original.symbol]} ${
+            className={`${styles.color} ${styles[info.row.original.id]} ${
               info.row.getIsExpanded() ? styles.expanded : ''
             }`}
           />
@@ -38,7 +38,7 @@ export const useDepositColumns = () => {
           </div>
         ),
       }),
-      columnHelper.accessor('name', {
+      columnHelper.accessor('symbol', {
         enableSorting: enableSorting,
         header: () => (
           <TextTooltip text={t('common.asset')} tooltip={t('redbank.tooltips.deposit.assets')} />
@@ -46,8 +46,8 @@ export const useDepositColumns = () => {
         id: 'name',
         cell: (info) => (
           <>
-            <p className='m'>{info.row.original.symbol}</p>
+            <p className='m'>{info.getValue()}</p>
-            <p className='s faded'>{info.getValue()}</p>
+            <p className='s faded'>{info.row.original.name}</p>
           </>
         ),
       }),

src/components/redbank/RedbankAction/RedbankAction.tsx

@@ -23,11 +23,11 @@ import styles from './RedbankAction.module.scss'
 
 interface Props {
   activeView: ViewType
-  symbol: string
+  id: string
 }
 
 export const RedbankAction = React.memo(
-  ({ activeView, symbol }: Props) => {
+  ({ activeView, id }: Props) => {
     // ------------------
     // EXTERNAL HOOKS
     // ------------------
@@ -62,8 +62,9 @@ export const RedbankAction = React.memo(
     // VARIABLES
     // ------------------
     const assets = [...whitelistedAssets, ...otherAssets]
-    const denom = assets.find((asset) => asset.symbol === symbol)?.denom || ''
+    const denom = assets.find((asset) => asset.id === id)?.denom || ''
     const decimals = lookupDecimals(denom, whitelistedAssets || []) || 6
+    const symbol = assets.find((asset) => asset.id === id)?.symbol || ''
     const walletBallance = Number(findByDenom(userBalances, denom)?.amount.toString())
 
     // Read only states
@@ -191,7 +192,7 @@ export const RedbankAction = React.memo(
     ) => {
       const finalisedArray: RedBankAsset[] = []
       for (let i = 0; i < assets.length; i++) {
-        if ((assets[i][key] || 0) > 0) {
+        if (Number(assets[i][key] ?? 0) > 0) {
           finalisedArray.push(assets[i])
         }
       }

src/configs/osmo-test-4.ts

@@ -1,6 +1,8 @@
 import { ChainInfoID, WalletID } from '@marsprotocol/wallet-connector'
 import { URL_GQL, URL_REST, URL_RPC } from 'constants/env'
 import atom from 'images/atom.svg'
+import axlwbtc from 'images/axlwbtc.svg'
+import axlweth from 'images/axlweth.svg'
 import juno from 'images/juno.svg'
 import mars from 'images/mars.svg'
 import osmo from 'images/osmo.svg'
@@ -10,22 +12,45 @@ export const ASSETS: { [denom: string]: Asset } = {
   osmo: {
     symbol: 'OSMO',
     name: 'Osmosis',
+    id: 'OSMO',
     denom: 'uosmo',
     color: colors.osmo,
-    decimals: 6,
     logo: osmo,
+    decimals: 6,
     poolId: 678,
   },
   atom: {
     symbol: 'ATOM',
     name: 'Atom',
+    id: 'ATOM',
     denom: 'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2',
     color: colors.atom,
     logo: atom,
     decimals: 6,
   },
+  axlwbtc: {
+    symbol: 'WBTC.axl',
+    id: 'axlWBTC',
+    name: 'Axelar Wrapped Bitcoin',
+    denom: 'ibc/1480B8FD20AD5FCAE81EA87584D269547DD4D436843C1D20F15E00EB64743EF4',
+    color: colors.axlwbtc,
+    logo: axlwbtc,
+    decimals: 8,
+    poolId: 43,
+  },
+  axlweth: {
+    symbol: 'WETH.axl',
+    id: 'axlWETH',
+    name: 'Axelar Wrapped Ethereum',
+    denom: 'ibc/1DCC8A6CB5689018431323953344A9F6CC4D0BFB261E88C9F7777372C10CD076',
+    color: colors.axlweth,
+    logo: axlweth,
+    decimals: 18,
+    poolId: 42,
+  },
   juno: {
     symbol: 'JUNO',
+    id: 'JUNO',
     name: 'Juno',
     denom: 'ibc/46B44899322F3CD854D2D46DEEF881958467CDD4B3B10086DA49296BBED94BED',
     color: colors.juno,
@@ -74,9 +99,17 @@ export const NETWORK_CONFIG: NetworkConfig = {
   },
   assets: {
     base: ASSETS.osmo,
-    whitelist: [ASSETS.osmo, ASSETS.atom, ASSETS.juno],
+    whitelist: [ASSETS.osmo, ASSETS.atom, ASSETS.juno, ASSETS.axlwbtc, ASSETS.axlweth],
     other: [OTHER_ASSETS.usd, OTHER_ASSETS.mars],
-    currencies: [OTHER_ASSETS.usd, ASSETS.osmo, ASSETS.atom, ASSETS.juno, OTHER_ASSETS.mars],
+    currencies: [
+      OTHER_ASSETS.usd,
+      ASSETS.osmo,
+      ASSETS.atom,
+      ASSETS.axlweth,
+      ASSETS.juno,
+      ASSETS.axlwbtc,
+      OTHER_ASSETS.mars,
+    ],
   },
   displayCurrency: OTHER_ASSETS.usd,
   appUrl: 'https://testnet.osmosis.zone',

src/configs/osmosis-1.ts

@@ -2,6 +2,8 @@ import { ChainInfoID, WalletID } from '@marsprotocol/wallet-connector'
 import { URL_GQL, URL_REST, URL_RPC } from 'constants/env'
 import atom from 'images/atom.svg'
 import axlusdc from 'images/axlusdc.svg'
+import axlwbtc from 'images/axlwbtc.svg'
+import axlweth from 'images/axlweth.svg'
 import mars from 'images/mars.svg'
 import osmo from 'images/osmo.svg'
 import statom from 'images/statom.svg'
@@ -11,22 +13,43 @@ export const ASSETS: { [denom: string]: Asset } = {
   osmo: {
     symbol: 'OSMO',
     name: 'Osmosis',
+    id: 'OSMO',
     denom: 'uosmo',
     color: colors.osmo,
-    decimals: 6,
     logo: osmo,
+    decimals: 6,
   },
   axlusdc: {
-    symbol: 'axlUSDC',
+    symbol: 'USDC.axl',
     name: 'Axelar USDC',
+    id: 'axlUSDC',
     denom: 'ibc/D189335C6E4A68B513C10AB227BF1C1D38C746766278BA3EEB4FB14124F1D858',
     color: colors.axlusdc,
-    logo: axlusdc,
     decimals: 6,
+    logo: axlusdc,
+  },
+  axlwbtc: {
+    symbol: 'WBTC.axl',
+    id: 'axlWBTC',
+    name: 'Axelar Wrapped Bitcoin',
+    denom: 'ibc/D1542AA8762DB13087D8364F3EA6509FD6F009A34F00426AF9E4F9FA85CBBF1F',
+    color: colors.axlwbtc,
+    logo: axlwbtc,
+    decimals: 8,
+  },
+  axlweth: {
+    symbol: 'WETH.axl',
+    id: 'axlWETH',
+    name: 'Axelar Wrapped Ethereum',
+    denom: 'ibc/EA1D43981D5C9A1C4AAEA9C23BB1D4FA126BA9BC7020A25E0AE4AA841EA25DC5',
+    color: colors.axlweth,
+    logo: axlweth,
+    decimals: 18,
   },
   atom: {
     symbol: 'ATOM',
     name: 'Atom',
+    id: 'ATOM',
     denom: 'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2',
     color: colors.atom,
     logo: atom,
@@ -35,6 +58,7 @@ export const ASSETS: { [denom: string]: Asset } = {
   statom: {
     symbol: 'stATOM',
     name: 'Stride Atom',
+    id: 'stATOM',
     denom: 'ibc/C140AFD542AE77BD7DCC83F13FDD8C5E5BB8C4929785E6EC2F4C636F98F17901',
     color: colors.statom,
     logo: statom,
@@ -81,13 +105,21 @@ export const NETWORK_CONFIG: NetworkConfig = {
   },
   assets: {
     base: ASSETS.osmo,
-    whitelist: [ASSETS.osmo, ASSETS.atom, ASSETS.axlusdc, ASSETS.statom],
+    whitelist: [
+      ASSETS.osmo,
+      ASSETS.atom,
+      ASSETS.axlusdc,
+      ASSETS.axlwbtc,
+      ASSETS.axlweth,
+      ASSETS.statom,
+    ],
     other: [OTHER_ASSETS.usd, OTHER_ASSETS.mars],
     currencies: [
       OTHER_ASSETS.usd,
       ASSETS.osmo,
       ASSETS.atom,
-      ASSETS.axlusdc,
+      ASSETS.axlweth,
+      ASSETS.axlwbtc,
       ASSETS.statom,
       OTHER_ASSETS.mars,
     ],
@@ -130,7 +162,7 @@ export const VAULT_CONFIGS: Vault[] = [
   },
   {
     address: 'osmo1jfmwayj8jqp9tfy4v4eks5c2jpnqdumn8x8xvfllng0wfes770qqp7jl4j',
-    name: { name: 'OSMO-axlUSDC LP', unlockDuration: 14, unlockTimeframe: 'days' },
+    name: { name: 'OSMO-USDC.axl LP', unlockDuration: 14, unlockTimeframe: 'days' },
     denoms: {
       primary: 'uosmo',
       secondary: 'ibc/D189335C6E4A68B513C10AB227BF1C1D38C746766278BA3EEB4FB14124F1D858',
@@ -138,12 +170,12 @@ export const VAULT_CONFIGS: Vault[] = [
     },
     symbols: {
       primary: 'OSMO',
-      secondary: 'axlUSDC',
+      secondary: 'USDC.axl',
     },
     color: '#478edc',
     lockup: 86400 * 14,
     provider: 'Apollo vault',
-    description: { maxLeverage: 2.86, lpName: 'OSMO-axlUSDC' },
+    description: { maxLeverage: 2.86, lpName: 'OSMO-USDC.axl' },
     ltv: {
       max: 0.645,
       contract: 0.65,

src/constants/appConstants.ts

@@ -4,8 +4,6 @@ export const FORUM_URL = 'https://forum.marsprotocol.io/'
 /* asset:unit */
 export const MARS_SYMBOL = 'MARS'
 export const MARS_DECIMALS = 6
-export const USDC_SYMBOL = 'axlUSDC'
-export const STATOM_SYMBOL = 'stATOM'
 
 /* borrow capacity */
 export const DEFAULT_SLIPPAGE = 0.01

src/functions/getSwapUrl.ts

@@ -9,9 +9,11 @@ export const getSwapUrl = (options: Options) => {
   let fromName = from
   let toName = to
 
-  if (!fromName) fromName = 'ATOM'
+  if (!fromName) fromName = 'OSMO'
-  if (fromName === to) fromName = 'OSMO'
+  if (fromName === to) fromName = 'ATOM'
   if (to === 'axlUSDC') toName = 'USDC'
+  if (to === 'axlWBTC') toName = 'WBTC'
+  if (to === 'axlWETH') toName = 'ETH'
 
   return `${baseUrl}?from=${fromName}&to=${toName}`
 }

src/functions/queries/getDepositDebtQuery.ts

@@ -8,14 +8,14 @@ export const getDepositDebtQuery = (
   const wasmQueries = whitelistedAssets?.map((asset: Asset) => {
     let query = ''
     const denom = asset.denom
-    const symbol = asset.symbol
+    const id = asset.id
 
     if (!denom) return query
 
     const totalCollateralScaled =
       marketInfo.find((market) => market.denom === asset.denom)?.collateral_total_scaled || '0'
 
-    const depositMarketKey = `${symbol}Deposits`
+    const depositMarketKey = `${id}Deposits`
     query =
       query +
       getContractQuery(
@@ -32,7 +32,7 @@ export const getDepositDebtQuery = (
 
     const totalDebtScaled =
       marketInfo.find((market) => market.denom === asset.denom)?.debt_total_scaled || '0'
-    const debtMarketKey = `${symbol}Debt`
+    const debtMarketKey = `${id}Debt`
     query =
       query +
       getContractQuery(

src/functions/queries/getRedbankQuery.ts

@@ -18,22 +18,22 @@ export const getRedbankQuery = (
   const wasmQueries = whitelistedAssets?.map((asset: Asset) => {
     let query = ''
     const denom = asset.denom
-    const symbol = asset.symbol
+    const id = asset.id
     const contract_addr = asset.contract_addr
     if (!denom) return query
 
     // Load cw 20 balance
     if (contract_addr) {
-      query = getContractQuery(symbol, contract_addr, getBalanceQuery(redBankContractAddress || ''))
+      query = getContractQuery(id, contract_addr, getBalanceQuery(redBankContractAddress || ''))
     }
 
     // Load market info
     const marketQuery = getMarketQuery(denom)
 
-    const marketKey = `${symbol}Market`
+    const marketKey = `${id}Market`
     query = query + getContractQuery(marketKey, redBankContractAddress || '', marketQuery)
 
-    const incentiveKey = `${symbol}MarketIncentive`
+    const incentiveKey = `${id}MarketIncentive`
     query =
       query +
       getContractQuery(

src/functions/redbank/produceUpdatedAssetData.test.tsx

@@ -12,6 +12,7 @@ describe('produceUpdatedAssetData', () => {
       100,
       ViewType.Deposit,
       'borrowBalanceBaseCurrency',
+      6,
     )
     expect(assets.length).toBe(1)
     expect(assets[0]).toEqual({
@@ -27,6 +28,7 @@ describe('produceUpdatedAssetData', () => {
       100,
       ViewType.Deposit,
       'borrowBalanceBaseCurrency',
+      6,
     )
     expect(assets.length).toBe(2)
     expect(assets[1]).toEqual({
@@ -42,6 +44,7 @@ describe('produceUpdatedAssetData', () => {
       100,
       ViewType.Deposit,
       'borrowBalanceBaseCurrency',
+      6,
     )
     expect(assets.length).toBe(2)
     expect(assets[1]).toEqual({
@@ -59,6 +62,7 @@ describe('produceUpdatedAssetData', () => {
         50,
         ViewType.Deposit,
         'depositBalanceBaseCurrency',
+        6,
       )
       expect(assets.length).toBe(1)
       expect(assets[0]).toEqual({
@@ -74,6 +78,7 @@ describe('produceUpdatedAssetData', () => {
         100,
         ViewType.Deposit,
         'depositBalanceBaseCurrency',
+        6,
       )
       expect(assets.length).toBe(1)
       expect(assets[0]).toEqual({
@@ -92,6 +97,7 @@ describe('produceUpdatedAssetData', () => {
         50,
         ViewType.Borrow,
         'borrowBalanceBaseCurrency',
+        6,
       )
       expect(assets.length).toBe(1)
       expect(assets[0]).toEqual({
@@ -107,6 +113,7 @@ describe('produceUpdatedAssetData', () => {
         100,
         ViewType.Borrow,
         'borrowBalanceBaseCurrency',
+        6,
       )
       expect(assets.length).toBe(1)
       expect(assets[0]).toEqual({
@@ -125,6 +132,7 @@ describe('produceUpdatedAssetData', () => {
         100,
         ViewType.Repay,
         'borrowBalanceBaseCurrency',
+        6,
       )
       expect(assets.length).toBe(1)
       expect(assets[0]).toEqual({

src/functions/redbank/produceUpdatedAssetData.ts

@@ -1,3 +1,4 @@
+import { demagnify } from 'libs/parse'
 import { ViewType } from 'types/enums'
 
 export const produceUpdatedAssetData = (
@@ -7,6 +8,7 @@ export const produceUpdatedAssetData = (
   updateAmount: number,
   activeView: ViewType,
   key: 'depositBalanceBaseCurrency' | 'borrowBalanceBaseCurrency',
+  baseCurrencyDecimals: number,
 ) => {
   const alreadyPresent = assetData.some((asset: RedBankAsset) => asset.denom === denom)
   // For first use, when the user has no borrow balance yet and this list will be empty
@@ -21,6 +23,8 @@ export const produceUpdatedAssetData = (
   }
 
   return assetData.map((asset) => {
+    const additionalDecimals = asset.decimals - baseCurrencyDecimals
+    const amountAdjustedForDecimals = demagnify(updateAmount, additionalDecimals)
     const newAsset = { ...asset }
     const assetbaseCurrencyBalance = asset[key] || 0
     let updatedAssetbaseCurrencyBalance = asset[key]
@@ -29,8 +33,8 @@ export const produceUpdatedAssetData = (
       // if we are repaaying or redeeming, we decrease the amount
       updatedAssetbaseCurrencyBalance =
         activeView === ViewType.Borrow || activeView === ViewType.Deposit
-          ? assetbaseCurrencyBalance + updateAmount
+          ? assetbaseCurrencyBalance + amountAdjustedForDecimals
-          : assetbaseCurrencyBalance - updateAmount
+          : assetbaseCurrencyBalance - amountAdjustedForDecimals
     }
     newAsset[key] = updatedAssetbaseCurrencyBalance
     return newAsset

src/hooks/queries/useDepositAndDebt.tsx

@@ -15,6 +15,10 @@ export interface DepositAndDebtData {
     JUNODebt: string
     axlUSDCDeposits: string
     axlUSDCDebt: string
+    axlWBTCDeposits: string
+    axlWBTCDebt: string
+    axlWETHDeposits: string
+    axlWETHDebt: string
     stATOMDeposits: string
     stATOMDebt: string
   }

src/hooks/queries/useMarsOracle.tsx

@@ -32,7 +32,7 @@ export const useMarsOracle = () => {
                 }`
 
       const querySegment = `
-                    ${whitelistAsset.symbol}: contractQuery(contractAddress: "${oracleAddress}", query: {
+                    ${whitelistAsset.id}: contractQuery(contractAddress: "${oracleAddress}", query: {
                         price: ${asset}
                     })
                 `

src/i18n.ts

@@ -17,7 +17,7 @@ i18next
     backend: {
       crossDomain: true,
       loadPath() {
-        return 'https://raw.githubusercontent.com/mars-protocol/translations/main/{{lng}}.json'
+        return 'https://raw.githubusercontent.com/mars-protocol/translations/develop/{{lng}}.json'
       },
     },
     react: {

src/images/axlwbtc.svg

@@ -0,0 +1,23 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+	<path fill="#FFFFFF" d="M23.6,14.9C22,21.3,15.5,25.2,9,23.6C2.6,22-1.3,15.5,0.3,9.1C1.9,2.7,8.4-1.2,14.8,0.4
+		C21.3,2,25.2,8.5,23.6,14.9L23.6,14.9L23.6,14.9z"/>
+			<path id="Shape" fill="#5A5564" d="M19.6,5l-0.7,0.7c3.3,3.6,3.3,9,0,12.6l0.7,0.7C23.2,15,23.2,9,19.6,5L19.6,5z"/>
+			<path id="Shape-2" fill="#5A5564" d="M5.7,5.1c3.6-3.3,9-3.3,12.6,0L19,4.4C15,0.8,9,0.8,5,4.4L5.7,5.1z"/>
+			<path id="Shape-3" fill="#5A5564" d="M5.1,18.3c-3.3-3.6-3.3-9,0-12.6L4.4,5C0.8,9,0.8,15,4.4,19L5.1,18.3z"/>
+			<path id="Shape-4" fill="#5A5564" d="M18.3,18.9c-3.6,3.3-9,3.3-12.6,0L5,19.6c3.9,3.6,10,3.6,13.9,0L18.3,18.9z"/>
+			<path id="Shape-5" fill="#F09242" d="M16.2,9.8c-0.1-1.4-1.3-1.8-2.8-2V5.9h-1.2v1.9c-0.3,0-0.6,0-0.9,0V5.9h-1.2v1.9H7.8v1.2
+				c0,0,0.9,0,0.8,0c0.3,0,0.6,0.2,0.7,0.5v5.2c0,0.1-0.1,0.2-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1c0,0-0.8,0-0.8,0l-0.2,1.4h2.3v1.9
+				h1.2v-1.9h0.9v1.9h1.2v-1.9c2-0.1,3.3-0.6,3.5-2.4c0.1-1.5-0.6-2.1-1.7-2.4C15.8,11.4,16.3,10.8,16.2,9.8z M14.5,13.9
+				c0,1.4-2.5,1.3-3.3,1.3v-2.6C12.1,12.6,14.5,12.4,14.5,13.9z M14,10.3c0,1.3-2.1,1.2-2.7,1.2V9.2C11.9,9.2,14,9,14,10.3z"/>
+			<path id="Shape-6" fill="#282138" d="M12,24C5.4,24,0,18.6,0,12S5.4,0,12,0c6.6,0,12,5.4,12,12C24,18.6,18.6,24,12,24
+				C12,24,12,24,12,24z M12,0.9c-6.1,0-11.1,5-11,11.1c0,6.1,5,11.1,11.1,11c6.1,0,11-5,11-11.1C23.1,5.9,18.1,0.9,12,0.9
+				C12,0.9,12,0.9,12,0.9z"/>
+	<path fill="#FFFFFF" d="M20,24c2.2,0,4-1.8,4-4s-1.8-4-4-4s-4,1.8-4,4S17.8,24,20,24z"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M20,23.5c1.9,0,3.5-1.6,3.5-3.5s-1.6-3.5-3.5-3.5s-3.5,1.6-3.5,3.5
+		S18.1,23.5,20,23.5z M24,20c0,2.2-1.8,4-4,4s-4-1.8-4-4s1.8-4,4-4S24,17.8,24,20z"/>
+	<path d="M20.3,19.6l1.4-1.4l-0.5-0.5L20,18.8l-1.1-1.1l-0.5,0.5l1.4,1.4c0.1,0.1,0.2,0.1,0.3,0.1S20.2,19.7,20.3,19.6L20.3,19.6z"
+		/>
+	<path d="M22.3,21.1L21.2,20l1.1-1.1l-0.5-0.5l-1.4,1.4c-0.1,0.1-0.1,0.4,0,0.5l1.4,1.4L22.3,21.1z"/>
+	<path d="M20,21.2l1.1,1.1l0.5-0.5l-1.4-1.4c-0.1-0.1-0.4-0.1-0.5,0l-1.4,1.4l0.5,0.5L20,21.2L20,21.2z"/>
+	<path d="M19.6,20.3c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-1.4-1.4l-0.5,0.5l1.1,1.1l-1.1,1.1l0.5,0.5L19.6,20.3z"/>
+</svg>

src/images/axlweth.svg

@@ -0,0 +1,18 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+	<path fill="#FFFFFF" d="M23.6,14.9C22,21.3,15.5,25.2,9,23.6C2.6,22-1.3,15.5,0.3,9.1C1.9,2.7,8.4-1.2,14.8,0.4
+		C21.3,2,25.2,8.5,23.6,14.9L23.6,14.9L23.6,14.9z"/>
+	<polygon fill="#343434" points="11.9,1.2 11.8,1.7 11.8,15.9 11.9,16.1 18.5,12.2"/>
+	<polygon fill="#8C8C8C" points="11.9,1.2 5.3,12.2 11.9,16.1 11.9,9.2"/>
+	<polygon fill="#3C3C3B" points="11.9,17.3 11.8,17.4 11.8,22.5 11.9,22.7 18.5,13.4"/>
+	<polygon fill="#8C8C8C" points="11.9,22.7 11.9,17.3 5.3,13.4"/>
+	<polygon fill="#141414" points="11.9,16.1 18.5,12.2 11.9,9.2"/>
+	<polygon fill="#393939" points="5.3,12.2 11.9,16.1 11.9,9.2"/>
+	<path fill="#FFFFFF" d="M20,24c2.2,0,4-1.8,4-4s-1.8-4-4-4s-4,1.8-4,4S17.8,24,20,24z"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M20,23.5c1.9,0,3.5-1.6,3.5-3.5s-1.6-3.5-3.5-3.5s-3.5,1.6-3.5,3.5
+		S18.1,23.5,20,23.5z M24,20c0,2.2-1.8,4-4,4s-4-1.8-4-4s1.8-4,4-4S24,17.8,24,20z"/>
+	<path d="M20.3,19.6l1.4-1.4l-0.5-0.5L20,18.8l-1.1-1.1l-0.5,0.5l1.4,1.4c0.1,0.1,0.2,0.1,0.3,0.1S20.2,19.7,20.3,19.6L20.3,19.6z"
+		/>
+	<path d="M22.3,21.1L21.2,20l1.1-1.1l-0.5-0.5l-1.4,1.4c-0.1,0.1-0.1,0.4,0,0.5l1.4,1.4L22.3,21.1z"/>
+	<path d="M20,21.2l1.1,1.1l0.5-0.5l-1.4-1.4c-0.1-0.1-0.4-0.1-0.5,0l-1.4,1.4l0.5,0.5L20,21.2L20,21.2z"/>
+	<path d="M19.6,20.3c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-1.4-1.4l-0.5,0.5l1.1,1.1l-1.1,1.1l0.5,0.5L19.6,20.3z"/>
+</svg>

src/libs/parse.ts

@@ -7,7 +7,7 @@ import { ViewType } from 'types/enums'
 
 import { countDecimals } from './math'
 
-BigNumber.config({ EXPONENTIAL_AT: [-18, 20] })
+BigNumber.config({ EXPONENTIAL_AT: [-24, 20] })
 
 type Formatter = (amount: string, symbol: string, decimals: number) => string
 
@@ -16,9 +16,9 @@ const rm = BigNumber.ROUND_HALF_CEIL
 export const dp = (decimals: number, symbol?: string): number => decimals
 
 export const lookup = (amount: number, symbol: string, decimals: number): number => {
-  const value = symbol ? new BigNumber(amount).div(10 ** decimals) : new BigNumber(amount)
+  const value = new BigNumber(amount)
 
-  return value.dp(dp(decimals, symbol), rm).toNumber()
+  return demagnify(value.toNumber(), decimals)
 }
 
 export const findAssetByDenom = (denom: string, assets: Asset[]) =>
@@ -71,8 +71,13 @@ export const toAmount = (value: string, decimals: number): string =>
         .toString()
     : '0'
 
-export const magnify = (value: number, decimals: number): BigNumber | number =>
+export const magnify = (value: number, decimals: number) => {
-  value ? new BigNumber(value).times(10 ** decimals).integerValue() : 0
+  return value === 0 ? 0 : new BigNumber(value).shiftedBy(decimals).toNumber()
+}
+
+export const demagnify = (amount: number, decimals: number) => {
+  return amount === 0 ? 0 : new BigNumber(amount).shiftedBy(-1 * decimals).toNumber()
+}
 
 const addLeadingZero = (number: number | string): string => {
   return `${number.toString().length === 1 ? '0' : ''}${number.toString()}`

src/mocks/redBankAssets.ts

@@ -19,6 +19,7 @@ export const redBankAssets: RedBankAsset[] = [
     walletBalance: '100',
     borrowEnabled: true,
     depositEnabled: true,
+    id: 'ATOM',
   },
   {
     borrowRate: 30,
@@ -40,5 +41,6 @@ export const redBankAssets: RedBankAsset[] = [
     walletBalance: '100',
     borrowEnabled: true,
     depositEnabled: true,
+    id: 'OSMO',
   },
 ]

src/pages/redbank/borrow/[id].tsx

@@ -1,13 +1,12 @@
 import { RedbankAction } from 'components/redbank'
 import { useRouter } from 'next/router'
-import React from 'react'
 import { ViewType } from 'types/enums'
 
 const Borrow = () => {
   const router = useRouter()
-  const symbol = router.query.symbol as string
+  const id = router.query.id as string
 
-  return <RedbankAction activeView={ViewType.Borrow} symbol={symbol} />
+  return <RedbankAction activeView={ViewType.Borrow} id={id} />
 }
 
 export default Borrow

src/pages/redbank/deposit/[id].tsx

@@ -1,13 +1,12 @@
 import { RedbankAction } from 'components/redbank'
 import { useRouter } from 'next/router'
-import React from 'react'
 import { ViewType } from 'types/enums'
 
 const Withdraw = () => {
   const router = useRouter()
-  const symbol = router.query.symbol as string
+  const id = router.query.id as string
 
-  return <RedbankAction activeView={ViewType.Deposit} symbol={symbol} />
+  return <RedbankAction activeView={ViewType.Deposit} id={id} />
 }
 
 export default Withdraw

src/pages/redbank/repay/[id].tsx

@@ -1,13 +1,12 @@
 import { RedbankAction } from 'components/redbank'
 import { useRouter } from 'next/router'
-import React from 'react'
 import { ViewType } from 'types/enums'
 
 const Repay = () => {
   const router = useRouter()
-  const symbol = router.query.symbol as string
+  const id = router.query.id as string
 
-  return <RedbankAction activeView={ViewType.Repay} symbol={symbol} />
+  return <RedbankAction activeView={ViewType.Repay} id={id} />
 }
 
 export default Repay

src/pages/redbank/withdraw/[id].tsx

@@ -1,13 +1,12 @@
 import { RedbankAction } from 'components/redbank'
 import { useRouter } from 'next/router'
-import React from 'react'
 import { ViewType } from 'types/enums'
 
 const Withdraw = () => {
   const router = useRouter()
-  const symbol = router.query.symbol as string
+  const id = router.query.id as string
 
-  return <RedbankAction activeView={ViewType.Withdraw} symbol={symbol} />
+  return <RedbankAction activeView={ViewType.Withdraw} id={id} />
 }
 
 export default Withdraw

src/store/interfaces/oracles.interface.ts

@@ -17,7 +17,6 @@ export interface OraclesSlice {
   // SETTERS
   // ------------------
   setExchangeRatesState: (state: State) => void
-  setExchangeRates: (rates: Coin[]) => void
   // ------------------
   // QUERY RELATED
   // ------------------

src/store/slices/common.ts

@@ -216,12 +216,12 @@ const commonSlice = (
     if (!whitelistedAssets.length) return
 
     const depositCoins: Coin[] = whitelistedAssets.map((asset) => ({
-      amount: data.mdwasmkey[`${asset.symbol}Deposits`],
+      amount: data.mdwasmkey[`${asset.id}Deposits`],
       denom: asset.denom,
     }))
 
     const debtCoins: Coin[] = whitelistedAssets.map((asset) => ({
-      amount: data.mdwasmkey[`${asset.symbol}Debt`],
+      amount: data.mdwasmkey[`${asset.id}Debt`],
       denom: asset.denom,
     }))
 

src/store/slices/oracles.ts

@@ -85,7 +85,6 @@ const oraclesSlice = (set: NamedSet<Store>, get: GetState<Store>): OraclesSlice
   // SETTERS
   // ------------------
   setExchangeRatesState: (state: State) => set({ exchangeRatesState: state }),
-  setExchangeRates: (rates: Coin[]) => set({ exchangeRates: rates }),
 
   // ------------------
   // QUERY RELATED
@@ -112,12 +111,20 @@ const oraclesSlice = (set: NamedSet<Store>, get: GetState<Store>): OraclesSlice
           return
         }
 
-        const symbol = asset.symbol
+        const id = asset.id
-        const exchangeRateResult = wasmQueryResults[`${symbol}`].price || '0.00'
+        const exchangeRateResult = wasmQueryResults[`${id}`].price || '0.00'
+        const additionalDecimals =
+          asset.decimals > get().baseCurrency.decimals
+            ? asset.decimals - get().baseCurrency.decimals
+            : 0
         // Fix for a LCDClientError object instead of string
         const exchangeRate: Coin = {
           denom,
-          amount: typeof exchangeRateResult === 'string' ? exchangeRateResult || '0.00' : '0.00',
+          amount:
+            typeof exchangeRateResult === 'string'
+              ? new BigNumber(exchangeRateResult).times(10 ** additionalDecimals).toString() ||
+                '0.00'
+              : '0.00',
         }
         if (asset.denom === displayCurrency.denom) {
           set({

src/store/slices/redBank.ts

@@ -4,7 +4,7 @@ import { SECONDS_IN_YEAR } from 'constants/timeConstants'
 import { findByDenom } from 'functions'
 import { UserDebtData } from 'hooks/queries/useUserDebt'
 import { UserDepositData } from 'hooks/queries/useUserDeposit'
-import { lookupDenomBySymbol } from 'libs/parse'
+import { demagnify, lookupDenomBySymbol } from 'libs/parse'
 import isEqual from 'lodash.isequal'
 import { RedBankSlice } from 'store/interfaces/redBank.interface'
 import { Store } from 'store/interfaces/store.interface'
@@ -99,18 +99,19 @@ const redBankSlice = (set: NamedSet<Store>, get: GetState<Store>): RedBankSlice
         { denom: asset.denom, amount: depositLiquidity.toString() },
       )
 
+      const additionalDecimals = asset.decimals - get().baseCurrency.decimals
       const redBankAsset: RedBankAsset = {
         ...asset,
         walletBalance: assetWallet?.amount.toString(),
         depositBalance: depositBalance.toString(),
         depositBalanceBaseCurrency: convertToBaseCurrency({
           denom: asset.denom,
-          amount: depositBalance.toString(),
+          amount: demagnify(depositBalance, additionalDecimals).toString(),
         }),
         borrowBalance: borrowBalance.toString(),
         borrowBalanceBaseCurrency: convertToBaseCurrency({
           denom: asset.denom,
-          amount: borrowBalance.toString(),
+          amount: demagnify(borrowBalance, additionalDecimals).toString(),
         }),
         borrowRate: borrowApy * 100 >= 0.01 ? borrowApy * 100 : 0.0,
         apy: depositApy * 100 >= 0.01 ? depositApy * 100 : 0.0,
@@ -147,16 +148,16 @@ const redBankSlice = (set: NamedSet<Store>, get: GetState<Store>): RedBankSlice
 
     whitelistedAssets?.forEach((asset: Asset) => {
       const denom = asset.denom
-      const symbol = asset.symbol
+      const id = asset.id
       const queryResult = data.rbwasmkey
       const marketData = {
-        ...queryResult[`${symbol}Market`],
+        ...queryResult[`${id}Market`],
         denom: denom,
       }
       marketInfo.push(marketData)
 
       const marketIncentiveData = {
-        ...queryResult[`${symbol}MarketIncentive`],
+        ...queryResult[`${id}MarketIncentive`],
         denom: denom,
       }
       marketIncentiveInfo.push(marketIncentiveData)

src/styles/_assets.module.scss

@@ -6,6 +6,8 @@
   osmo: $colorTokenOSMO;
   atom: $colorTokenATOM;
   axlusdc: $colorTokenAxlUSDC;
+  axlwbtc: $colorTokenAxlWBTC;
+  axlweth: $colorTokenAxlWETH;
   juno: $colorTokenJUNO;
   statom: $colorTokenStATOM;
 

src/styles/_master.public.scss

@@ -0,0 +1,579 @@
+@use 'sass:math';
+$rem-base: 16px;
+
+/* Colors */
+$colorWhite: #f5f5f5;
+$colorGrey: #bdbdbd;
+$colorGreyLight: #e0e0e0;
+$colorGreyHighlight: #efefef;
+$colorGreyMedium: #9e9e9e;
+$colorGreyDark: #616161;
+
+/* CI Colors */
+$colorPrimary: #0000ff;
+$colorPrimaryHighlight: #6962cc;
+$colorPrimaryAlpha: rgba(0, 0, 255, 0.05);
+$colorSecondary: #212121;
+$colorSecondaryHighlight: #424242;
+$colorSecondaryDark: #111111;
+$colorSecondaryAlpha: rgba(17, 17, 17, 0.15);
+$colorAccent: $colorGreyMedium;
+$colorAccentHighlight: $colorGreyMedium;
+$colorAccentDark: $colorGreyDark;
+$colorAccentInverted: $colorGreyLight;
+
+/* Info Colors */
+$colorInfoProfit: #c4e7e9;
+$colorInfoLoss: #c8aaaa;
+$colorInfoWarning: #ffb5b5;
+$colorInfoVoteAgainst: #6c5a46;
+
+/* Token Colors */
+$colorTokenMARS: #dd5b65;
+$colorTokenOSMO: #9f1ab9;
+$colorTokenATOM: #6f7390;
+$colorTokenAxlUSDC: #478edc;
+$colorTokenJUNO: black;
+$colorTokenStATOM: #e50571;
+$colorTokenAxlWBTC: #f09242;
+$colorTokenAxlWETH: #343434;
+
+$colorGradientOSMO: linear-gradient(to bottom, #3a02e2, #e700ca);
+$colorGradientATOM: linear-gradient(to bottom, #2e3148, #6f7390);
+$colorGradientJUNO: linear-gradient(to bottom, #000000, #333333);
+$colorGradientAxlUSDC: linear-gradient(to bottom, #1f5c9e, #478edc);
+$colorGradientAxlWBTC: linear-gradient(to bottom, #f09242, #f9d3b3);
+$colorGradientAxlWETH: linear-gradient(to bottom, #343434, #8c8c8c);
+$colorGradientStATOM: linear-gradient(to bottom, #e50571, #fb5da9);
+
+/* Alpha Colors */
+$alphaWhite10: rgba(255, 255, 255, 0.1);
+$alphaWhite20: rgba(255, 255, 255, 0.2);
+$alphaWhite30: rgba(255, 255, 255, 0.3);
+$alphaWhite40: rgba(255, 255, 255, 0.4);
+$alphaWhite50: rgba(255, 255, 255, 0.5);
+$alphaWhite60: rgba(255, 255, 255, 0.6);
+$alphaWhite70: rgba(255, 255, 255, 0.7);
+$alphaWhite80: rgba(255, 255, 255, 0.8);
+$alphaWhite90: rgba(255, 255, 255, 0.9);
+$alphaBlack10: rgba(0, 0, 0, 0.1);
+$alphaBlack20: rgba(0, 0, 0, 0.2);
+$alphaBlack30: rgba(0, 0, 0, 0.3);
+$alphaBlack40: rgba(0, 0, 0, 0.4);
+$alphaBlack50: rgba(0, 0, 0, 0.5);
+$alphaBlack60: rgba(0, 0, 0, 0.6);
+$alphaBlack70: rgba(0, 0, 0, 0.7);
+$alphaBlack80: rgba(0, 0, 0, 0.8);
+$alphaBlack90: rgba(0, 0, 0, 0.9);
+
+/* Background Colors */
+$backgroundBody: $colorGrey;
+$backgroundBodyDark: $backgroundBody;
+$backgroundInTile: transparent;
+$backgroundFooter: transparent;
+
+/* Slider Colors */
+$sliderThumb: $colorGreyDark;
+$sliderMark: $colorGreyDark;
+
+/* Tooltip Colors */
+$tooltipIconColor: $alphaBlack60;
+
+/* Table Colors */
+$tableBorder: $alphaBlack30;
+$tableBorderEnd: $alphaBlack80;
+$tableSort: $alphaBlack20;
+$tableSortActive: $alphaBlack90;
+$tableHeader: $alphaBlack40;
+$tableLabel: $colorSecondaryDark;
+
+/* Graph Colors */
+$graphLiquidationsLine: $alphaBlack70;
+$graphAxis: $alphaBlack40;
+
+/* Shadows */
+$shadowInset: inset 0px 2px 2px rgba(0, 0, 0, 0.25);
+
+@mixin shadowFade {
+  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 40%);
+}
+
+/* Devider */
+@mixin devider10 {
+  border-bottom: 1px solid $alphaBlack10;
+}
+
+@mixin devider20 {
+  border-bottom: 1px solid $alphaBlack20;
+}
+
+@mixin devider40 {
+  border-bottom: 1px solid $alphaBlack40;
+}
+
+@mixin devider60 {
+  border-bottom: 1px solid $alphaBlack60;
+}
+
+/* Backgrounds */
+@mixin bgBody {
+  background-color: $backgroundBody;
+}
+
+@mixin bgTableHover {
+  background-color: transparent;
+}
+
+@mixin bgBodyDark {
+  background-color: $backgroundBodyDark;
+}
+
+@mixin bgProposalActive {
+  background: linear-gradient(90deg, #10aa93 2.6%, #248aa9 97.92%);
+}
+
+@mixin bgProposalHover {
+  background-color: $colorGreyMedium;
+}
+
+@mixin bgTile($deg: 99.79) {
+  background: linear-gradient(
+    #{$deg}deg,
+    rgba(8, 11, 30, 0.79) 8.17%,
+    rgba(52, 20, 33, 0.9) 94.54%
+  );
+}
+
+@mixin bgInTile {
+  background: $backgroundInTile;
+}
+
+@mixin bgOverlay {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+@mixin bgTooltip {
+  background: linear-gradient(77.47deg, rgba(20, 24, 57, 0.9) 11.58%, rgba(34, 16, 57, 0.9) 93.89%);
+}
+
+@mixin bgPopover {
+  background: linear-gradient(180deg, #fef4ed -2.1%, #ecdbe0 97.53%);
+  color: $fontColorDarkPrimary;
+}
+
+@mixin bgTileDevider {
+  background-color: $alphaBlack60;
+}
+
+@mixin bgDevider {
+  background-color: $alphaBlack20;
+}
+
+@mixin bgInput {
+  background-color: #282a33;
+}
+
+@mixin bgPrimary {
+  background-color: $colorPrimary;
+  color: $colorWhite;
+}
+
+@mixin bgSecondary {
+  background-color: $colorSecondary;
+  color: $colorWhite;
+}
+
+@mixin bgTertiary {
+  background-color: $alphaBlack60;
+  color: $colorWhite;
+}
+
+@mixin bgLimit {
+  background: $colorPrimary;
+}
+
+@mixin bgLimitOpacity {
+  background: $colorPrimary;
+}
+
+@mixin bgHatched {
+  background-image: linear-gradient(
+    135deg,
+    #1a1c25 33.33%,
+    rgba(255, 255, 255, 0.2) 33.33%,
+    rgba(255, 255, 255, 0.2) 50%,
+    #1a1c25 50%,
+    #1a1c25 83.33%,
+    rgba(255, 255, 255, 0.2) 83.33%,
+    rgba(255, 255, 255, 0.2) 100%
+  );
+  background-size: 5px 5px;
+}
+
+/* GLOWS */
+/* GLOWS */
+@mixin glowXS {
+  display: none;
+}
+@mixin glowS {
+  display: none;
+}
+@mixin glowM {
+  display: none;
+}
+@mixin glowL {
+  display: none;
+}
+@mixin glowXL {
+  display: none;
+}
+@mixin glowXXL {
+  display: none;
+}
+
+/* Typography */
+$fontWeightLight: 300;
+$fontWeightRegular: 400;
+$fontWeightSemibold: 600;
+
+$fontColorDarkPrimary: $colorWhite;
+$fontColorDarkSecondary: $colorSecondaryDark;
+$fontColorLightPrimary: $colorSecondaryDark;
+$fontColorLightSecondary: $alphaBlack30;
+$fontColorLightTertiary: $colorSecondaryDark;
+$fontColorLtv: $colorWhite;
+
+@mixin typoH1 {
+  font-weight: $fontWeightLight;
+  font-size: rem-calc(60.84);
+  line-height: space(20);
+}
+
+@mixin typoH2 {
+  font-size: rem-calc(38.49);
+  line-height: space(14);
+}
+
+@mixin typoH2caps {
+  @include typoH2;
+}
+
+@mixin typoH3 {
+  font-size: rem-calc(30.42);
+  line-height: space(10);
+}
+
+@mixin typoH3caps {
+  font-size: rem-calc(30.42);
+}
+
+@mixin typoH4 {
+  font-size: rem-calc(24.03);
+  line-height: space(9);
+  font-weight: $fontWeightRegular;
+}
+
+@mixin typoH4caps {
+  @include typoH4;
+}
+
+@mixin typoXXL {
+  font-size: rem-calc(21.36);
+  line-height: space(8);
+}
+
+@mixin typoXXLcaps {
+  @include typoXXL;
+  font-weight: $fontWeightLight;
+}
+
+@mixin typoXL {
+  font-size: rem-calc(18.98);
+  line-height: space(7);
+}
+
+@mixin typoXLcaps {
+  @include typoXL;
+  font-weight: $fontWeightLight;
+}
+
+@mixin typoL {
+  font-size: rem-calc(16.88);
+  line-height: space(6);
+}
+
+@mixin typoLcaps {
+  @include typoL;
+  font-weight: $fontWeightSemibold;
+}
+
+@mixin typoM {
+  font-size: rem-calc(15);
+  line-height: space(5);
+}
+
+@mixin typoMcaps {
+  @include typoM;
+}
+
+@mixin typoS {
+  font-size: rem-calc(13.33);
+  line-height: space(5);
+}
+
+@mixin typoScaps {
+  @include typoS;
+  font-weight: $fontWeightSemibold;
+}
+
+@mixin typoXS {
+  font-size: rem-calc(11.85);
+  line-height: space(4);
+}
+
+@mixin typoXScaps {
+  @include typoXS;
+  font-weight: $fontWeightSemibold;
+}
+
+@mixin typoXXS {
+  font-size: rem-calc(10.53);
+  line-height: space(4);
+}
+
+@mixin typoXXScaps {
+  @include typoXXS;
+  font-weight: $fontWeightSemibold;
+}
+
+@mixin typoXXXS {
+  font-size: rem-calc(9.36);
+  line-height: space(2);
+}
+
+@mixin typoXXXScaps {
+  @include typoXXXS;
+  font-weight: $fontWeightSemibold;
+}
+
+@mixin typoButton {
+  @include typoS;
+  font-weight: $fontWeightSemibold;
+}
+
+@mixin typoNav {
+  @include typoL;
+}
+
+@mixin typoNetwork {
+  font-size: rem-calc(10.53);
+  font-weight: $fontWeightSemibold;
+}
+
+/* Spacing */
+$spacingBase: 4;
+
+@function space($multiplier) {
+  $space: rem-calc($spacingBase * $multiplier);
+  @return $space;
+}
+
+@mixin padding($top: 1, $right: null, $bottom: null, $left: null) {
+  @if $left {
+    padding: space($top) space($right) space($bottom) space($left);
+  } @else {
+    @if $bottom {
+      padding: space($top) space($right) space($bottom);
+    } @else {
+      @if $right {
+        padding: space($top) space($right);
+      } @else {
+        padding: space($top);
+      }
+    }
+  }
+}
+
+@mixin margin($top: 1, $right: null, $bottom: null, $left: null) {
+  @if $left {
+    margin: space($top) space($right) space($bottom) space($left);
+  } @else {
+    @if $bottom {
+      margin: space($top) space($right) space($bottom);
+    } @else {
+      @if $right {
+        margin: space($top) space($right);
+      } @else {
+        margin: space($top);
+      }
+    }
+  }
+}
+
+@function strip-unit($num) {
+  @return math.div($num, $num * 0 + 1);
+}
+
+@function convert-to-rem($value, $base-value: $rem-base) {
+  $value: math.div(strip-unit($value), strip-unit($base-value)) * 1rem;
+  @if ($value == 0rem) {
+    $value: 0;
+  }
+  @return $value;
+}
+
+@function rem-calc($values, $base-value: $rem-base) {
+  $max: length($values);
+  @if $max == 1 {
+    @return convert-to-rem(nth($values, 1), $base-value);
+  }
+  $remValues: ();
+  @for $i from 1 through $max {
+    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
+  }
+  @return $remValues;
+}
+
+/* LAYOUTS */
+@mixin layoutTile {
+  padding: space(1);
+  background: $colorGreyHighlight;
+  border: 2px solid $colorWhite;
+  box-shadow: 0 0 0 3px $colorGreyHighlight, 12px 12px 0 0 rgb(0 0 0 / 50%) !important;
+  height: fit-content;
+}
+
+@mixin layoutTooltip {
+  padding: space(3);
+  background: $colorGreyLight;
+  border: 1px solid $colorSecondaryDark;
+}
+
+@mixin layoutPopover {
+  padding: space(3);
+  background: $colorGreyLight;
+  border: 1px solid $colorSecondaryDark;
+}
+
+@mixin layoutIncentiveButton {
+}
+
+@mixin layoutLogo {
+  > svg {
+    width: rem-calc(57);
+    height: rem-calc(57);
+
+    path {
+      stroke: $fontColorLightPrimary;
+    }
+  }
+}
+
+@mixin layoutGlobal {
+  opacity: 1 !important;
+  box-shadow: none !important;
+}
+
+/* Buttons */
+$buttonBorder: $alphaBlack40;
+$buttonBorderHover: $colorSecondaryDark;
+
+@mixin buttonS {
+  @include typoS;
+  @include padding(1.5, 5);
+  height: rem-calc(32);
+}
+
+@mixin buttonM {
+  @include typoM;
+  @include padding(2.5, 6);
+  height: rem-calc(40);
+}
+
+@mixin buttonL {
+  @include typoL;
+  @include padding(2.5, 6);
+  height: rem-calc(56);
+}
+
+@mixin buttonSolidPrimary {
+  &.primary {
+    background-color: $colorPrimary;
+    color: $colorWhite;
+
+    &:hover,
+    &:focus {
+      background-color: $colorPrimaryHighlight;
+    }
+
+    &:active {
+      background-color: lighten($colorPrimary, 10%);
+    }
+  }
+}
+
+@mixin buttonSolidSecondary {
+  &.secondary {
+    background-color: $colorSecondary;
+    color: $colorWhite;
+
+    &:hover,
+    &:focus {
+      background-color: $colorSecondaryHighlight;
+    }
+
+    &:active {
+      background-color: lighten($colorSecondary, 10%);
+    }
+  }
+}
+
+@mixin buttonSolidTertiary {
+  &.tertiary {
+    background-color: $colorSecondaryDark;
+    color: $colorWhite;
+    border: 1px solid $alphaBlack30;
+
+    &:hover,
+    &:focus {
+      border: 1px solid $alphaBlack20;
+    }
+
+    &:active {
+      background-color: lighten($colorSecondaryDark, 10%);
+    }
+  }
+}
+
+/* Border Radius */
+$borderRadiusXXXS: 0;
+$borderRadiusXXS: 0;
+$borderRadiusXS: 0;
+$borderRadiusS: 0;
+$borderRadiusM: 0;
+$borderRadiusL: 0;
+$borderRadiusXL: 0;
+$borderRadiusXXL: 0;
+$borderRadiusXXXL: 0;
+$borderRadiusXXXXL: 0;
+$borderRadiusRound: 0;
+
+/* Dimensions */
+$headerHeight: rem-calc(86);
+$mobileNavHeight: rem-calc(64);
+$footerHeight: rem-calc(300);
+$footerHeightMedium: rem-calc(300);
+$footerHeightSmall: rem-calc(800);
+$contentWidth: 1248px;
+
+/* Breakpoints */
+$bpLargeHigh: $contentWidth;
+$bpLargeLow: 1025px;
+$bpMediumHigh: 1024px;
+$bpMediumLow: 801px;
+$bpSmallHigh: 800px;
+$bpXSmallHigh: 719px;
+$bpXSmallLow: 480px;
+
+/* Animation Timings */
+$animationSpeed: 1s;

src/styles/_master.scss

@@ -35,10 +35,15 @@ $colorTokenATOM: #6f7390;
 $colorTokenAxlUSDC: #478edc;
 $colorTokenJUNO: black;
 $colorTokenStATOM: #e50571;
+$colorTokenAxlWBTC: #f09242;
+$colorTokenAxlWETH: #343434;
 
 $colorGradientOSMO: linear-gradient(to bottom, #3a02e2, #e700ca);
 $colorGradientATOM: linear-gradient(to bottom, #2e3148, #6f7390);
+$colorGradientJUNO: linear-gradient(to bottom, #000000, #333333);
 $colorGradientAxlUSDC: linear-gradient(to bottom, #1f5c9e, #478edc);
+$colorGradientAxlWBTC: linear-gradient(to bottom, #f09242, #f9d3b3);
+$colorGradientAxlWETH: linear-gradient(to bottom, #343434, #8c8c8c);
 $colorGradientStATOM: linear-gradient(to bottom, #e50571, #fb5da9);
 
 /* Alpha Colors */

src/types/interfaces/asset.d.ts

@@ -2,7 +2,8 @@ interface Asset {
   color: string
   name: string
   denom: string
-  symbol: 'OSMO' | 'ATOM' | 'JUNO' | 'axlUSDC' | 'stATOM'
+  symbol: 'OSMO' | 'ATOM' | 'JUNO' | 'USDC.axl' | 'stATOM' | 'WBTC.axl' | 'WETH.axl'
+  id: 'axlUSDC' | 'axlWBTC' | 'axlWETH' | 'OSMO' | 'ATOM' | 'JUNO' | 'stATOM'
   prefix?: string
   contract_addr?: string
   logo: string
@@ -13,6 +14,7 @@ interface Asset {
 
 interface OtherAsset extends Omit<Asset, 'symbol'> {
   symbol: 'MARS' | ''
+  id?: ''
 }
 
 interface AssetPairInfo {

src/types/interfaces/redbank.d.ts

@@ -11,6 +11,10 @@ interface RedBankData {
     JUNOMarketIncentive: MarketIncentive
     axlUSDCMarket: Market
     axlUSDCMarketIncentive: MarketIncentive
+    axlWBTCMarket: Market
+    axlWBTCMarketIncentive: MarketIncentive
+    axlWETHMarket: Market
+    axlWETHMarketIncentive: MarketIncentive
     stATOMMarket: Market
     stATOMMarketIncentive: MarketIncentive
     collateral: UserCollateral[]