Merge pull request #120 from CheesecakeLabs/T1AS-179_operating_expens…

…es_helper

fea operating expenses helper

frontend/src/app/core/pages/cost-center/index.tsx

@@ -1,15 +1,20 @@
-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'
 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 && (
             <VStack>
               <MenuSettings option={SettingsOptions.COST_CENTER} />
+              <ActionHelper title={'About Operating Expenses'}>
+                <Text color="gray.900" lineHeight="22px" fontSize="sm">
+                  {operatingExpensesHelperP1}
+                </Text>
+                <Text color="gray.900" lineHeight="22px" fontSize="sm" mt="1rem">
+                  {operatingExpensesHelperP2}
+                </Text>
+              </ActionHelper>
             </VStack>
           )}
         </Flex>

frontend/src/components/molecules/action-helper/index.tsx

@@ -1,26 +1,32 @@
 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<IActionHelper> = ({
   title,
   description,
+  children,
 }) => {
   return (
     <Container variant="primary" maxW={{ base: 'full', md: '290px' }} mt="1rem">
       <Flex justifyContent="space-between" alignItems="center" mb="0.75rem">
         <Text>{title}</Text>
         <InfoIcon />
       </Flex>
-      <Text color="gray.900" lineHeight="22px" fontSize="sm">
-        {description}
-      </Text>
+      {children ? (
+        children
+      ) : (
+        <Text color="gray.900" lineHeight="22px" fontSize="sm">
+          {description}
+        </Text>
+      )}
     </Container>
   )
 }

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."