diff --git a/frontend/src/app/core/pages/cost-center/index.tsx b/frontend/src/app/core/pages/cost-center/index.tsx
index fb3b32e6..111e4d68 100644
--- a/frontend/src/app/core/pages/cost-center/index.tsx
+++ b/frontend/src/app/core/pages/cost-center/index.tsx
@@ -1,4 +1,4 @@
-import { Flex, VStack, useMediaQuery } from '@chakra-ui/react'
+import { Flex, VStack, useMediaQuery, Text } from '@chakra-ui/react'
import React, { useCallback, useEffect, useState } from 'react'
import { useAssets } from 'hooks/useAssets'
@@ -6,10 +6,15 @@ import { useAuth } from 'hooks/useAuth'
import { useHorizon } from 'hooks/useHorizon'
import { useTransactions } from 'hooks/useTransactions'
import { useVaults } from 'hooks/useVaults'
+import {
+ operatingExpensesHelperP1,
+ operatingExpensesHelperP2,
+} from 'utils/constants/helpers'
import { GAService } from 'utils/ga'
import { PathRoute } from 'components/enums/path-route'
import { SettingsOptions } from 'components/enums/settings-options'
+import { ActionHelper } from 'components/molecules/action-helper'
import { MenuSettings } from 'components/organisms/menu-settings'
import { Sidebar } from 'components/organisms/sidebar'
import { CostCenterTemplate } from 'components/templates/cost-center'
@@ -105,19 +110,22 @@ export const CostCenter: React.FC = () => {
)}`
}
- const walletToName = useCallback((publicKey: string): string => {
- if (
- assets &&
- assets.find(asset => asset.distributor.key.publicKey === publicKey)
- ) {
- return 'Asset issuer'
- }
+ const walletToName = useCallback(
+ (publicKey: string): string => {
+ if (
+ assets &&
+ assets.find(asset => asset.distributor.key.publicKey === publicKey)
+ ) {
+ return 'Asset issuer'
+ }
- return (
- vaults?.find(vault => vault.wallet.key.publicKey === publicKey)?.name ||
- formatAccount(publicKey)
- )
- }, [assets, vaults])
+ return (
+ vaults?.find(vault => vault.wallet.key.publicKey === publicKey)?.name ||
+ formatAccount(publicKey)
+ )
+ },
+ [assets, vaults]
+ )
const getTransactionData = useCallback(
(transaction: Hooks.UseHorizonTypes.ITransactionItem): IHorizonData => {
@@ -294,6 +302,14 @@ export const CostCenter: React.FC = () => {
{isLargerThanMd && (
+
+
+ {operatingExpensesHelperP1}
+
+
+ {operatingExpensesHelperP2}
+
+
)}
diff --git a/frontend/src/components/molecules/action-helper/index.tsx b/frontend/src/components/molecules/action-helper/index.tsx
index 44bc7044..b449cfac 100644
--- a/frontend/src/components/molecules/action-helper/index.tsx
+++ b/frontend/src/components/molecules/action-helper/index.tsx
@@ -1,16 +1,18 @@
import { Container, Flex, Text } from '@chakra-ui/react'
-import React from 'react'
+import React, { ReactNode } from 'react'
import { InfoIcon } from 'components/icons'
interface IActionHelper {
title: string
- description: string
+ description?: string
+ children?: ReactNode
}
export const ActionHelper: React.FC = ({
title,
description,
+ children,
}) => {
return (
@@ -18,9 +20,13 @@ export const ActionHelper: React.FC = ({
{title}
-
- {description}
-
+ {children ? (
+ children
+ ) : (
+
+ {description}
+
+ )}
)
}
diff --git a/frontend/src/utils/constants/helpers.tsx b/frontend/src/utils/constants/helpers.tsx
index 45b4307e..3e62d63c 100644
--- a/frontend/src/utils/constants/helpers.tsx
+++ b/frontend/src/utils/constants/helpers.tsx
@@ -21,3 +21,9 @@ export const newContractHelper =
export const assetHomeHelper =
'Each asset represents a unique tokenized asset on the Stellar Network. It provides a digital representation of value, whether it be fiat, cryptocurrency, or other tangible or intangible assets. Within the Stellar ecosystem, assets can be traded, transferred, and used in various financial operations, providing liquidity and interoperability between different asset classes.'
+
+export const operatingExpensesHelperP1 =
+ 'This is the central administration area to monitor the network expenses required for the Sandbox to run. All transactions handled by the Sandbox are set to have their network fees covered by this Operating Expenses account as well as the underlying reserved balances required for certain features to be operational.'
+
+export const operatingExpensesHelperP2 =
+ "It's important to note that the Sandbox operates within the testnet environment, which is free of charge. The figures displayed represent a simulation of the expenses that would be incurred if operating within the mainnet."