fetch token symbol from the chain

src/components/Elements/ListingCard/index.tsx

@@ -86,7 +86,7 @@ const ListingCardInner = ({
   const [endTimestamp, setEndTimestamp] = useState(0);
 
   const {
-    state: { api, apiState },
+    state: { api, apiState, symbol },
   } = useRelayApi();
   const { timeslicePeriod } = useCommon();
 
@@ -196,7 +196,7 @@ const ListingCardInner = ({
         >
           <Typography fontSize={'1rem'}>Price/timeslice:</Typography>
           <Typography variant='h2'>
-            {formatBalance(listing.timeslicePrice.toString(), true)} ROC
+            {`${formatBalance(listing.timeslicePrice.toString(),true)} ${symbol}`}
           </Typography>
         </Box>
         <Box
@@ -206,7 +206,7 @@ const ListingCardInner = ({
         >
           <Typography fontSize={'1rem'}>Total:</Typography>
           <Typography variant='h2'>
-            {formatBalance(listing.currentPrice.toString(), true)} ROC
+            {`${formatBalance(listing.currentPrice.toString(), true)} ${symbol}`}
           </Typography>
         </Box>
       </Box>

src/components/Elements/SaleInfo/index.tsx

@@ -31,7 +31,7 @@ export const SaleInfoGrid = ({
   const [saleStartTimestamp, setSaleStartTimestamp] = useState(0);
   const [saleEndTimestamp, setSaleEndTimestamp] = useState(0);
   const {
-    state: { api, apiState },
+    state: { api, apiState, symbol },
   } = useCoretimeApi();
 
   const nextPhase = (): SalePhase => {
@@ -79,12 +79,10 @@ export const SaleInfoGrid = ({
       </Box>
       <Box className={styles.gridItem}>
         <Typography variant='h6'>
-          {`Current price: ${formatBalance(currentPrice.toString(), false)}`}{' '}
-          ROC
+          {`Current price: ${formatBalance(currentPrice.toString(), false)} ${symbol}`}
         </Typography>
         <Typography>
-          {`Floor price: ${formatBalance(saleInfo.price.toString(), false)}`}{' '}
-          ROC
+          {`Floor price: ${formatBalance(saleInfo.price.toString(), false)} ${symbol}`}
         </Typography>
       </Box>
       <Box>

src/components/Modals/Sell/index.tsx

@@ -15,6 +15,7 @@ import { useEffect, useState } from 'react';
 import { AmountInput, RegionCard } from '@/components/Elements';
 import { RecipientSelector } from '@/components/Elements/Selectors/RecipientSelector';
 
+import { useCoretimeApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
 import { RegionMetadata } from '@/models';
@@ -31,6 +32,7 @@ export const SellModal = ({
   regionMetadata,
 }: SellModalProps) => {
   const { activeAccount, api } = useInkathon();
+  const {state: {symbol}} = useCoretimeApi();
 
   const { fetchRegions } = useRegions();
   const { toastError, toastSuccess } = useToast();
@@ -112,7 +114,7 @@ export const SellModal = ({
               amount={regionPrice}
               title='Region price'
               caption='The price for the entire region'
-              currency='ROC'
+              currency={symbol}
               setAmount={setRegionPrice}
             />
           </Stack>

src/contexts/apis/common.ts

@@ -12,6 +12,7 @@ export type State = {
   api: ApiPromise | null;
   apiError: any;
   apiState: ApiState;
+  symbol: string;
 };
 
 export const initialState: State = {
@@ -20,6 +21,7 @@ export const initialState: State = {
   api: null,
   apiError: null,
   apiState: ApiState.DISCONNECTED,
+  symbol: '',
 };
 
 ///
@@ -37,6 +39,8 @@ export const reducer = (state: any, action: any) => {
       return { ...state, apiState: ApiState.ERROR, apiError: action.payload };
     case 'DISCONNECTED':
       return { ...state, apiState: ApiState.DISCONNECTED };
+    case 'SET_SYMBOL':
+      return { ...state, symbol: action.payload };
     default:
       throw new Error(`Unknown type: ${action.type}`);
   }
@@ -66,7 +70,17 @@ export const connect = (
   _api.on('connected', () => {
     dispatch({ type: 'CONNECT', payload: _api });
     // `ready` event is not emitted upon reconnection and is checked explicitly here.
-    _api.isReady.then(() => dispatch({ type: 'CONNECT_SUCCESS' }));
+    _api.isReady.then(() => {
+      dispatch({ type: 'CONNECT_SUCCESS' });
+      const chainInfo = _api.registry.getChainProperties();
+      if (chainInfo?.tokenSymbol.isSome) {
+        const [symbol] = chainInfo.tokenSymbol.toHuman() as [string];
+        dispatch({
+          type: 'SET_SYMBOL',
+          payload: symbol,
+        });
+      }
+    });
   });
   _api.on('ready', () => dispatch({ type: 'CONNECT_SUCCESS' }));
   _api.on('error', (err) => dispatch({ type: 'CONNECT_ERROR', payload: err }));

src/pages/purchase.tsx

@@ -55,7 +55,7 @@ const Purchase = () => {
   const [saleEndTimestamp, setSaleEndTimestamp] = useState(0);
   const { saleInfo, config, loading } = useSaleInfo();
   const {
-    state: { api, apiState },
+    state: { api, apiState, symbol },
   } = useCoretimeApi();
 
   const { fetchRegions } = useRegions();
@@ -71,7 +71,7 @@ const Purchase = () => {
 
       if (balance == 0) {
         toastWarning(
-          'The selected account does not have any ROC tokens on the Coretime chain.'
+          `The selected account does not have any ${symbol} tokens on the Coretime chain.`
         );
       }
     },
@@ -208,7 +208,7 @@ const Purchase = () => {
           </Typography>
         </Box>
         <Typography variant='h6' sx={{ color: theme.palette.text.primary }}>
-          {`Your balance: ${formatBalance(balance.toString(), false)} ROC`}
+          {`Your balance: ${formatBalance(balance.toString(), false)} ${symbol}`}
         </Typography>
       </Box>
       <Box>