show mainnet charts on testnet (#417)

src/components/Trade/TradeChart/OsmosisTheGraphDataFeed.ts

@@ -1,3 +1,6 @@
+import { defaultSymbolInfo } from 'components/Trade/TradeChart/constants'
+import { ENV } from 'constants/env'
+import { getAssetByDenom, getEnabledMarketAssets } from 'utils/assets'
 import {
   Bar,
   ErrorCallback,
@@ -9,10 +12,7 @@ import {
   ResolutionString,
   ResolveCallback,
 } from 'utils/charting_library'
-import { ENV } from 'constants/env'
-import { getAssetByDenom, getEnabledMarketAssets } from 'utils/assets'
 import { BN } from 'utils/helpers'
-import { defaultSymbolInfo } from 'components/Trade/TradeChart/constants'
 
 interface BarQueryData {
   close: string
@@ -50,7 +50,7 @@ export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
     this.baseDecimals = baseDecimals
     this.baseDenom = baseDenom
     const enabledMarketAssets = getEnabledMarketAssets()
-    this.enabledMarketAssetDenoms = enabledMarketAssets.map((asset) => asset.denom)
+    this.enabledMarketAssetDenoms = enabledMarketAssets.map((asset) => asset.mainnetDenom)
     this.supportedPools = enabledMarketAssets
       .map((asset) => asset.poolId?.toString())
       .filter((poolId) => typeof poolId === 'string') as string[]

src/components/Trade/TradeChart/TVChartContainer.tsx

@@ -1,5 +1,12 @@
 import { useEffect, useMemo, useRef } from 'react'
 
+import Card from 'components/Card'
+import { disabledFeatures, enabledFeatures, overrides } from 'components/Trade/TradeChart/constants'
+import {
+  OsmosisTheGraphDataFeed,
+  PAIR_SEPARATOR,
+} from 'components/Trade/TradeChart/OsmosisTheGraphDataFeed'
+import useStore from 'store'
 import {
   ChartingLibraryWidgetOptions,
   IChartingLibraryWidget,
@@ -7,13 +14,6 @@ import {
   Timezone,
   widget,
 } from 'utils/charting_library'
-import Card from 'components/Card'
-import {
-  OsmosisTheGraphDataFeed,
-  PAIR_SEPARATOR,
-} from 'components/Trade/TradeChart/OsmosisTheGraphDataFeed'
-import useStore from 'store'
-import { disabledFeatures, enabledFeatures, overrides } from 'components/Trade/TradeChart/constants'
 
 interface Props {
   buyAsset: Asset
@@ -24,7 +24,7 @@ export const TVChartContainer = (props: Props) => {
   const chartContainerRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>
   const widgetRef = useRef<IChartingLibraryWidget>()
   const defaultSymbol = useRef<string>(
-    `${props.buyAsset.denom}${PAIR_SEPARATOR}${props.sellAsset.denom}`,
+    `${props.buyAsset.mainnetDenom}${PAIR_SEPARATOR}${props.sellAsset.mainnetDenom}`,
   )
   const baseCurrency = useStore((s) => s.baseCurrency)
   const dataFeed = useMemo(
@@ -97,12 +97,12 @@ export const TVChartContainer = (props: Props) => {
   useEffect(() => {
     if (widgetRef?.current) {
       widgetRef.current.setSymbol(
-        `${props.sellAsset.denom}${PAIR_SEPARATOR}${props.buyAsset.denom}`,
+        `${props.sellAsset.mainnetDenom}${PAIR_SEPARATOR}${props.buyAsset.mainnetDenom}`,
         widgetRef.current.chart().resolution() || ('1h' as ResolutionString),
         () => {},
       )
     }
-  }, [props.buyAsset.denom, props.sellAsset.denom])
+  }, [props.buyAsset.mainnetDenom, props.sellAsset.mainnetDenom])
 
   return (
     <Card title='Trading Chart' contentClassName='px-0.5 pb-0.5 h-full '>

src/constants/assets.ts

@@ -9,6 +9,7 @@ export const ASSETS: Asset[] = [
     name: 'Osmosis',
     id: 'OSMO',
     denom: 'uosmo',
+    mainnetDenom: 'uosmo',
     color: '#9f1ab9',
     decimals: 6,
     hasOraclePrice: true,
@@ -26,6 +27,7 @@ export const ASSETS: Asset[] = [
     denom: IS_TESTNET
       ? 'ibc/A8C2D23A1E6F95DA4E48BA349667E322BD7A6C996D8A4AAE8BA72E190F3D1477'
       : 'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2',
+    mainnetDenom: 'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2',
     color: '#6f7390',
     logo: '/images/tokens/atom.svg',
     decimals: 6,
@@ -42,6 +44,7 @@ export const ASSETS: Asset[] = [
     name: 'Stride Atom',
     id: 'stATOM',
     denom: 'ibc/C140AFD542AE77BD7DCC83F13FDD8C5E5BB8C4929785E6EC2F4C636F98F17901',
+    mainnetDenom: 'ibc/C140AFD542AE77BD7DCC83F13FDD8C5E5BB8C4929785E6EC2F4C636F98F17901',
     color: '#9f1ab9',
     logo: '/images/tokens/statom.svg',
     decimals: 6,
@@ -56,6 +59,7 @@ export const ASSETS: Asset[] = [
     id: 'axlWBTC',
     name: 'Axelar Wrapped Bitcoin',
     denom: 'ibc/D1542AA8762DB13087D8364F3EA6509FD6F009A34F00426AF9E4F9FA85CBBF1F',
+    mainnetDenom: 'ibc/D1542AA8762DB13087D8364F3EA6509FD6F009A34F00426AF9E4F9FA85CBBF1F',
     color: '#f09242',
     logo: '/images/tokens/axlwbtc.svg',
     decimals: 8,
@@ -71,6 +75,7 @@ export const ASSETS: Asset[] = [
     id: 'axlWETH',
     name: 'Axelar Wrapped Ethereum',
     denom: 'ibc/EA1D43981D5C9A1C4AAEA9C23BB1D4FA126BA9BC7020A25E0AE4AA841EA25DC5',
+    mainnetDenom: 'ibc/EA1D43981D5C9A1C4AAEA9C23BB1D4FA126BA9BC7020A25E0AE4AA841EA25DC5',
     color: '#343434',
     logo: '/images/tokens/axlweth.svg',
     decimals: 18,
@@ -88,6 +93,7 @@ export const ASSETS: Asset[] = [
     denom: IS_TESTNET
       ? 'ibc/DB9D326CF53EA07610C394D714D78F8BB4DC7E312D4213193791A9046BF45E20'
       : MARS_MAINNET_DENOM,
+    mainnetDenom: MARS_MAINNET_DENOM,
     color: '#dd5b65',
     logo: '/images/tokens/mars.svg',
     decimals: 6,
@@ -104,6 +110,7 @@ export const ASSETS: Asset[] = [
     denom: IS_TESTNET
       ? 'ibc/6F34E1BD664C36CE49ACC28E60D62559A5F96C4F9A6CCE4FC5A67B2852E24CFE'
       : 'ibc/D189335C6E4A68B513C10AB227BF1C1D38C746766278BA3EEB4FB14124F1D858',
+    mainnetDenom: 'ibc/D189335C6E4A68B513C10AB227BF1C1D38C746766278BA3EEB4FB14124F1D858',
     color: '#478edc',
     logo: '/images/tokens/axlusdc.svg',
     decimals: 6,
@@ -120,6 +127,7 @@ export const ASSETS: Asset[] = [
     name: 'US Dollar',
     id: 'USD',
     denom: 'usd',
+    mainnetDenom: 'usd',
     color: '',
     logo: '',
     decimals: 2,
@@ -135,6 +143,7 @@ export const ASSETS: Asset[] = [
     name: 'OSMO-ATOM LP',
     id: 'gamm/pool/12',
     denom: 'gamm/pool/12',
+    mainnetDenom: 'gamm/pool/12',
     color: '',
     logo: '',
     decimals: 6,

src/types/interfaces/asset.d.ts

@@ -2,6 +2,7 @@ interface Asset {
   color: string
   name: string
   denom: string
+  mainnetDenom: string
   symbol:
     | 'OSMO'
     | 'ATOM'